jQuery总结

Posted on | In | 阅读数

jQuery基础

如何引入jQuery

jQuery本质上就是一段普通的JavaScript代码， 通常使用引入外部JS的方式来使用jQuery

1
<script type="text/javascript" src="js/jquery.js"></script>

基础语法

基础语法： $(selector).action()

  • 美元符号定义 jQuery
  • 选择符（selector）”查询”和”查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

实例:

  • $(this).hide() - 隐藏当前元素

  • $(“p”).hide() - 隐藏所有

    元素

  • $(“p.test”).hide() - 隐藏所有 class=”test” 的

    元素

  • $(“#test”).hide() - 隐藏所有 id=”test” 的元素

选择器

1
$(slector)

selector就是选择器表达式，语法基本和CSS选择器一致

示例：

  • $(“#container”)
  • $(“.container”)
  • $(“img”)
  • $(“input[type=’password’]”)
  • $(“#container image”)

HTML操作

DOM操作

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易

属性操作

attr()：用于获取属性值

读取属性

1
2
3
4
5
$(selector).attr(attrName);

//示例
var href = $("a").attr("href");
var id = $("div").attr("id");

修改属性

1
2
3
4
$(selector).attr(attrName, "属性值");

//示例
var href = $("a").attr("href", "http://www.jd.com");

属性名不仅支持标准属性，还支持自定义属性

内容操作

获得内容

  • text()：设置或返回所选元素的文本内容
  • html()：设置或返回所选元素的内容（包括 HTML 标记
  • val()：设置或返回表单字段的值
1
2
3
4
5
6
7
8
9
10
11
//通过 jQuery text() 和 html() 方法获得内容:
$("#btn1").click(function(){
	alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
	alert("HTML: " + $("#test").html());
});
//通过 jQuery val() 方法获得输入字段的值：
$("#btn1").click(function(){
	alert("值为: " + $("#test").val());
});

样式操作

通过 jQuery，可以很容易地对 CSS 元素进行操作

  • addClass() - 向被选元素添加一个或多个类

    1
    2
    3
    4
    $("button").click(function(){
    	$("h1,h2,p").addClass("blue");
    	$("div").addClass("important");
    });

  • removeClass() - 从被选元素删除一个或多个类

    1
    2
    3
    $("button").click(function(){
    	$("h1,h2,p").removeClass("blue");
    });

  • toggleClass() - 对被选元素进行添加/删除类的切换操作

    1
    2
    3
    $("button").click(function(){
    	$("h1,h2,p").toggleClass("blue");
    });

  • css() - 设置或返回样式属性

    • 设置css属性

      1
      $("p").css("background-color","yellow");

    • 返回css属性

      1
      $("p").css("background-color");

事件

鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
hover

效果

显示隐藏

通过 jQuery使用hide()和show() 方法来隐藏和显示 HTML 元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//例：
<script>
    $(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>

<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>

使用 toggle() 方法来切换 hide() 和 show()方法

1
2
3
$("button").click(function(){
	$("p").toggle();
});

淡入淡出

fadeIn()方法：用于淡入已隐藏的元素

1
2
3
4
5
$("button").click(function(){
	$("#div1").fadeIn();
	$("#div2").fadeIn("slow");
	$("#div3").fadeIn(3000);
});

fadeOut()方法：用于淡出可见元素

1
2
3
4
5
$("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
});

fadeToogle()方法：可以在 fadeIn() 与 fadeOut() 方法之间进行切换

1
2
3
4
5
$("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
});

fadeTo()方法：允许渐变为给定的不透明度（值介于 0 与 1 之间）

1
2
3
4
5
$("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
});

滑动

slideDown()方法：用于向下滑动元素

1
2
3
$("#flip").click(function(){
    $("#panel").slideDown();
});

slideUp()方法：用于向上滑动元素

1
2
3
$("#flip").click(function(){
    $("#panel").slideUp();
});

slideToggle()方法：可以在 slideDown() 与 slideUp() 方法之间进行切换

1
2
3
$("#flip").click(function(){
    $("#panel").slideToggle();
});

动画

使用jQuery animate() 方法可以创建自定义的动画

遍历

遍历jQuery对象

遍历数组

for...in循环语句用于遍历数组或者对象的属性进行循环操作

循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//语法
for (变量 in 对象){
    在此执行代码
}

//例
<script type="text/javascript">
	var x
	var mycars = new Array()
	mycars[0] = "Saab"
	mycars[1] = "Volvo"
	mycars[2] = "BMW"

	for (x in mycars){
		document.write(mycars[x] + "<br />")
	}
</script>

Ajax

jQuery也可以实现异步加载