1. 元素数量和对象类型转换
1.1 length属性和size()方法
用于获得JQuery选择器匹配的元素个数
HTML 代码:
jQuery 代码:
$("img").length;
$("img").size();
结果都是：2
1.2 get(n)方法
获取JQuery选择器，对应下标位置的原生JS对象，不能直接使用JQuery的属性和方法，需要将原生对象利用“$()”再次转换为JQuery对象后才能继续使用JQuery的属性和方法。
HTML 代码:
jQuery 代码:
$("img").get(1);
结果是:标记的原生JS对象
2. 显示与隐藏的控制
2.1 常规方式show()和hide()
以浏览器常规显示和隐藏的方式，进行DOM的外观控制。
show()方法：显示
- show()
- show("slow|normal|fast")
相当于 show(600|400|200); - show(2000)
在2000毫秒内完成显示动作 - show(2000,function(){})
第二个参数function (){}为一个回调函数，在2000毫秒后show动作彻底执行完毕后才会执行。 - show(2000,"swing|linear",function(){})
第二个参数动画特征，默认“swing”，可选是“linear”
第三个参数function (){}为一个回调函数，在2000毫秒后show动作彻底执行完毕后才会执行。
hide()方法：隐藏，使用方式参照show()方法
toggle()方法：自动识别DOM元素的当前状态，自行切换，使用方式参照show()方法
2.2 淡入淡出方式fadeIn和fadeOut
fadeIn()方法：以淡入的方式进行显示，用法参照show()方法
fadeOut()方法：以淡出的方式进行隐藏，用法参照hide()方法
fadeToggle()方法：以淡入/淡出的方式智能控制，用法参照toggle()方法
2.3 卷轴方式slideDown和slideUp
slideDown()方法：以的竖轴展开方式进行显示，用法参照show()方法
slideUp()方法：以竖轴收起的方式进行隐藏，用法参照hide()方法
slideToggle()方法：以展开/收起的方式智能控制，用法参照toggle()方法
3. 属性控制
3.1 attr()属性值控制
- attr("属性")
获取对应属性的值 - attr("属性", value)
设置对应属性的值为value
HTML 代码:
jQuery 代码:
function test1(){
var src = $("#img1").attr("src");
if(src == "img/1.jpg"){
$("#img1").attr("src","img/2.jpg");
}else{
$("#img1").attr("src","img/1.jpg");
}
}
结果是：当点击图片时，图片可以在1.jpg和2.jpg之间进行切换
3.2 prop()单属性控制
某些属性不需要属性值即可生效，比如：readonly，checked，selected，disabled，required....
- prop("checked") 取得当前是否被选中，返回true或false
- prop("checked", true|false) 设置当前“checked”是否被选中
也可以通过使用attr("disabled",true)和attr("disabled",false)控制单属性
HTML 代码:
文本框:
jQuery 代码:
function test2(){
$("#t1").prop("disabled",true);
}
function test3(){
$("#t1").prop("disabled",false);
}
结果是：当点击想用按钮的功能时，文本框会切换禁用状态
4. 值value的控制
- val()
取得DOM对象当前的value值，适用于文本框类型控件和下拉列表 - val(xxx) / val([xxx,yyy])
设置DOM对象当前的值，适用于文本框类型控件，下拉列表和单/多选按钮组
HTML 代码:
文本框:
下拉列表:
多选按钮:
1
2
3
4
jQuery 代码:
function test1(){
var t1 = $("#t1").val();
var s1 = $("#s1").val();
alert("文本框的值是："+t1);
alert("下拉列表的值是："+s1);
}
function test2(){
$("#t1").val("Hello World");
$("#s1").val(3);
$("input[name=c1]").val([2,3,4]);
}
结果是：
- 取值可以得到文本框的value和下拉列表选中项的value
- 设定可以设定文本框的value为“Hello World”，下拉列表value=3的option被选中，多选按钮组value是2，3，4的项被选中。
5. 内容的控制
5.1 html()和text()，取得和设置内容
相当于原生JS中的innerHTML和innerText两个属性
以html()为例，使用方式
- html() 取得当前DOM对象的内部HTML代码
- html(“xxx”) 设置当前DOM对象的内部HTML代码为xxx
HTML 代码:
jQuery 代码:
function test1(){
var s = "水的分子式是：H2O";
$("#div1").html(s);
}
function test2(){
var h = $("#div1").html();
alert(h);
}
function test3(){
var s = "水的分子式是：H2O";
$("#div1").text(s);
}
function test4(){
var h = $("#div1").text();
alert(h);
}
结果是：根据不同的操作取得和设置HTML和文本（是否忽略标记）
5.2 append()和prepend()，追加和插入内容
- append(xxx) 在结尾处之间xxx内容（xxx会按照HTML的语法被解析）
- prepend(xxx) 在起始处插入xxx内容（xxx会按照HTML的语法被解析）
HTML 代码:
特别
jQuery 代码:
function test5(){
$("#div2").append("好");
}
function test6(){
$("#div2").prepend("睿道");
}
结果是：
- 点击"追加HTML"会在结尾处追加红色字体字号32px的“好”文本
- 点击"插入HTML"会在起始处插入率色字体字号32px的“睿道”文本
5.3 empty()，清空内容
清除DOM对象内部的所有内容
$("#div2").empty();
5.4 remove()，移除DOM对象
在HTML页面中移除id是div2的元素，个人不建议使用remove去移除某个DOM对象。如果不需要使用该对象，建议使用hide()将其隐藏
$("#div2").remove();
6. 样式控制
6.1 css()
操作DOM对象的内联样式，相当于原生JS中的style.xxxx
- css("css属性")
获取DOM元素当前的内联css属性的值 - css("css属性","value")
设置DOM元素当前的内联css属性的值为value
HTML 代码:
`
jQuery 代码:
function test1(){
var c = $("#div1").css("background-color");
if(c == "rgb(173, 255, 47)"){
$("#div1").css("background-color","#FC2E87");
}else{
$("#div1").css("background-color","rgb(173, 255, 47)");
}
}
结果是：点击div时背景颜色切换
6.2 addClass()和removeClass()
- addClass()
为DOM对象添加一个class - removeClass()
为DOM对象移除一个class
HTML 代码:
哈哈
jQuery 代码:
function test2(){
$("#div2").addClass("haha");
}
function test3(){
$("#div2").removeClass("haha");
}
function test4(){
$("#div2").removeClass(); //移除所有的class
}
结果是：
当点击“添加样式”，为div2中的文字添加haha样式
当点击“移除样式”，为div2中的文字移除haha样式
当点击“清除所有样式”，移除div2所有的class样式（haha和xixi）
6.3 toggleClass()
为DOM对象智能控制一个class
$("#div2").toggleClass("haha");
点执行这段代码时，程序会自动判断div2当前的状态，决定是否添加或移除haha样式
当某个DOM元素通过css方法设置了背景颜色，再通过addClass方法又设置了另一个背景颜色。实际显示的是css方法设置的背景颜色（内联样式高于类）
7. DOM元素的控制
7.1 parent()和children()
- parent()
找到当前DOM的元素的父元素 - children()
找到当前DOM的元素的子元素的集合
HTML 代码:
-
1
-
2
-
3
-
4
-
5
jQuery 代码:
function test1(obj){
var d = $(obj);
var ul = d.parent().parent();
alert(ul.get(0));
}
function test2(){
var ul = $("#ul1");
var c = ul.children();
for(var i = 0; i < c.length; i++){
var li = c.get(i); //原生
$(li).css("color","red");
}
}
结果是：
- 点击每个li中的元素，会显示向上找到了ul
- 点击child按钮时，会将所有的子元素的文字颜色设置成red
7.2 next()和prev()
- next()
紧随当前DOM元素之后的元素 - nextAll()
当前DOM元素之后的所有同辈元素 - prev()
当前DOM元素之前的元素 - prevAll()
当前DOM元素之前的所有同辈元素
HTML 代码:
1
2
3
4
jQuery 代码:
function test1(obj){
var d = $(obj);
var n = d.next();
var p = d.prev();
d.removeClass();
d.prevAll().removeClass();
d.nextAll().removeClass();
d.prevAll().addClass("bgcolor1");
d.nextAll().addClass("bgcolor2");
alert("前面div的数字是:"+p.text());
alert("后面div的数字是:"+n.text());
}
结果是：
点击某个div时，显示它前面div和后面div的数字。同时设置前面所有的div的背景颜色是bgcolor1，后面所有的div的背景颜色是bgcolor2