jQuery选择器和对DOM的操作

一、jQuery选择器

1.基本选择器

• 元素选择器，语法$("html标签名")，例：查找所有div下span元素的个数 $("div,span").size();

• id选择器，语法 $("#id的属性值")，例：查找Id为"div1"的元素个数 $("#div1").size();

• 类选择器，语法 $(".class的属性值")，例：查找所有样式是"class1"的元素的个数 $(".class1").size();

2.层次选择器

选择器名称	语法	解释
后代选择器	$("A B")	选择A元素内部的所有B元素
子选择器	$("A > B")	选择A元素内部的所有子B元素

• 改变内所有

  的背景色为红色：$("body div").css("background-color","red");

• 改变内子

  的背景色为红色：$("body > div").css("background-color","red");

• 改变id为one的下一个

  的背景色为红色：$("#one + div").css("background-color","red");

3. 属性选择器

选择器名称	语法	解释
属性选择器	$("A[属性名]")	包含指定属性的选择器
属性选择器	$("A[属性名=值]")	包含指定属性等于指定值的选择器
复合属性选择器	$("A[属性名=值] [属性名=值]...")	包含多个属性条件的选择器

• 查找所有含有id属性的div元素个数：$("div[id]").size();

• 查找所有name属性是newsletter的input元素，并将其选中：$("input[name='newsletter']").attr("checked","checked");

• 查找所有含有属性id且属性title值包含"es"的div元素，并将背景色改为红色：$("div[id][title*='es']").css("background-color","red");

4. 基本过滤选择器

选择器名称	语法	解释
首元素选择器	:first	获得选择的元素中的第一个元素
尾元素选择器	:last	获得选择的元素中的最后一个元素
非元素选择器	:not(selecter)	不包括指定内容的元素
等于索引选择器	:eq(index)	指定索引元素
偶数选择器	:even	偶数，从0开始计数
奇数素选择器	:odd	奇数，从1开始计数

1)查找UL中第一个元素li和最后一个元素li的内容  
	$("ul li:first").text(); 
	$("ul li:last").text();     

2)查找所有选中未选中的input元素个数  
	$(":checkbox:not(:checked)").size();  //未选中  
     
3)查找表格中第二行的内容，从索引号0开始  
    $("table tr:eq(1)").text();  
    //html()强调的是标签中的内容，如果标签中有子标签，则会显示出来，而text()强调的是标签
    //中的文本内容，不会显示子标签

4)点击表格第二列
	$("#table1 td:eq(1)").click();  

5)改变索引值为偶数的 div 元素的背景色为红色
    $("div:even").css("background-color","red");

6)改变索引值为奇数的 div 元素的背景色为 红色
    $("div:odd").css("background-color","red");

5. 表单属性过滤选择器

选择器名称	语法	解释
可用元素选择器	:enabled	获得可用元素
不可用元素选择器	:disabled	获得不可用元素
选中选择器	:checked	获得 单选/复选框 选中的元素
选中索引选择器	:selected	获得下拉框选中的元素

<script type="text/javascript">
// 
$("#b1").click(function () {   
  
   //表单元素有2个不可编辑的属性
   //disabled,不可用，不可编辑并且背景色为灰色，这个表单元素不提交给服务器
   //readyonly,只读,不可编辑并且背景色为白色，会提交数据给到服务器。

   //获取文本框的选择器有2两种：
   //第一种：$("input[type='text']")
   //第二种：$(":text")
    $(":text:enabled").val("设置input标签的value值");
});

// 
$("#b2").click(function () {
    $(":text:disabled").val("设置input标签的value值");

});

// 
$("#b3").click(function () {
    //jq对象.length属性，获取符合的标签元素的个数，jq对象本质就是js对象数组
    //alert($("input[type='checkbox']:checked").length);
    alert($(":checkbox:checked").length);
});

// 
$("#b4").click(function () {
    //jq对象.text([value]);//获取或设置标签体文本内容，text()相当于js对象的innerText
    alert($("select > option:selected").text());
});
</script>

二、jQuery的DOM操作

1. jQuery对DOM树中的文本和值进行操作

API方法	解释
text([value])	获得/设置元素的文本内容
html([value])	获得/设置元素的标签体的所有内容
val([value])	获得/设置表单元素value属性相应的值

2. jQuery对DOM树中的属性进行操作

API方法	解释
attr(name[,value])	获得/设置属性的值
prop(name[,value])	获得/设置属性的值(checked，selected)
removeAttr(name)	删除指定的属性

<ul>
   <li id="bj" name="beijing" xxx="yyy">北京</li>
   <li id="tj" name="tianjin">天津</li>
</ul>
<input type="checkbox" id="hobby"/>

//获取北京节点的name属性值
alert($("#bj").attr("name"));

//设置北京节点的name属性的值为dabeijing
$("#bj").attr("name","dabeijing");

//新增北京节点的description属性 属性值是didu
$("#bj").attr("description","didu");

//删除北京节点的name属性并检验name属性是否存在
$("#bj").removeAttr("name");

//获得hobby的的选中状态
//alert($("#hobby").attr("checked"));//不行
alert($("#hobby").prop("checked"));//false，代表没有选中

//attr适合操作一般大多数属性，prop适合获取操作属性值为boolean的属性
//设置复选框选中
$("#hobby").prop("checked",true);
$("#hobby").attr("checked",true);

3. jQuery对class进行操作

API方法	解释
css("样式名","样式值"])	获取/设置指定的CSS样式
addClass(类样式名)	给指定的对象添加新的类样式，指定类样式名字即可
removeClass(类样式名)	删除指定的类样式
toggleClass(类样式名)	切换样式，如果没有类样式，则添加，如果有类样式，则删除
hasClass (类样式名)	判断是否有类样式名

// 
$("#button1").click(function () {
    //设置样式
    $("#one").attr("class","second");
    $("#one").addClass("second");
    //移除样式
    $("#one").removeClass("second");
    //切换样式
    $("#one").toggleClass("second");
});

//  
$("#button2").click(function () {
   alert($("#one").css("background-color"));
});
//  
$("#button3").click(function () {
   $("#one").css("background-color","green");
});

4. jQuery创建插入对象

API方法	解释
$("")	创建A元素对象
append(element)	父标签.append(最后一个子标签)，添加成最后一个子元素，两者之间是父子关系
prepend(element)	父标签.prepend(第一个子标签)，添加成第一个子元素，两者之间是父子关系
before(element)	当前标签.before(兄弟标签)，添加到当前元素的前面，两者之间是兄弟关系
after(element)	当前标签.after(兄弟标签)，添加到当前元素的后面，两者之间是兄弟关系

5. jQuery删除对象

API方法	解释
remove()	删除指定元素
empty()	清空指定元素的所有子元素

/*删除标签2种方式
*   jq对象.remove()  自杀，将自己干掉删除
*   jq对象.empty()   清空子元素
* */

//删除
北京
$("#bj").remove();
//删除所有的子节点   清空元素中的所有后代节点(不包含属性节点)
$("#city").empty();

6. jQuery效果

1.隐藏显示HTML元素
	$("p").hide()
	$("p").show()    style="display:none;"
			display:block是将对象块状化;display:none是不显示

  切换隐藏显示
	$("p").toggle()

2.淡入淡出HTML元素
淡入:
	$("#div1").fadeIn();
    $("#div1").fadeIn("slow");
    $("#div1").fadeIn(3000);

淡出:
    $("#div1").fadeOut();
    $("#div1").fadeOut("slow");
    $("#div1").fadeOut(3000);

三、jQuery遍历函数

1. jQuery祖先

• parent()：返回被选元素的直接父元素
• parents()：返回被选元素的所有祖先元素，一路向上直到文档的根元素 ()
• parentsUntil()：返回介于两个给定元素之间的所有祖先元素

$("span").parent();  //返回每个  元素的的直接父元素
$("span").parents("ul");   //返回所有  元素的所有祖先
元素
$("span").parentsUntil("div"); //返回介于与
元素之间的所有祖先元素

2. jQuery后代

• children()：返回被选元素的所有直接子元素
• find()：返回被选元素的后代元素，一路向下直到最后一个后代

$("div").children();    //返回每个 
 元素的所有直接子元素
$("div").find("span");  //返回属于 
 后代的所有  元素	

3. jQuery同胞

• siblings()：返回被选元素的所有同胞元素
• next()：获得匹配元素集合中每个元素紧邻的同辈元素
• nextAll()：获得匹配元素集合中每个元素之后的所有同辈元素
• prev()：获得匹配元素集合中每个元素紧邻的前一个同辈元素
• prevAll()：获得匹配元素集合中每个元素之前的所有同辈元素

$("h2").siblings();  //返回 
 的所有同胞元素

$("#div1").next();  //返回 
 的下一个同胞元素(只返回一个元素)
$("div2").nextAll();  //返回 
 的所有跟随的同胞元素
$("h1").nextUntil("h3");  //返回介于 
 与 
 元素之间的所有同胞元素

prev(),prevAll()以及prevUntil()方法的工作方式与next()方法类似,只不过方向相反而已,它们返回的是前面的同胞元素

4. jQuery遍历(过滤)

• first()：返回被选元素集合的第一个元素
• last()：返回被选元素集合的最后一个元素
• eq()：返回被选元素中带有指定索引号的元素(索引号从0开始)

$("div p").first();  //获得 
 元素内部的第一个 
 元素
$("div p").last();   //选择 
 元素中的最后一个 
 元素
$("p").eq(1);        //选取第二个 
 元素 

参考：jQuery遍历函数参考手册