一、常规选择器
-
标签选择器
$("div").css("color","red")选取页面中所有的div元素,设置其中的文本颜色为红色。
2.Id选择器
$("#div").css("color","red")选取页面中唯一的id为div的元素,设置文本颜色
3.类选择器
$(".div").css("color","red")选取页面中class="div"的所有元素,设置文本颜色。
4.size()和length属性查看返回元素的个数
$("div").length
$("div").size();
二、进阶选择器
-
群组选择器
-
$("div,p,strong")
-
$("#div,.title,strong")
-
2.后代选择器,有父子关系的
$("ul li a")
3.通配选择器
$("*")
$("ul li *")
4.元素选择器前缀
$("div.box")选取类名为box的,前缀是div标签的
$("div#box")选取id为box的,前缀是div的
5.多class选择器
$(".box.pox")选择一个元素的class="box pox"的
选择器字符串越长,执行效率越慢。
三、高级选择器
注:高级选择器不支持IE6
-
后代选择器
$("#box p").css();会选择以下所有的p,不管是儿子还是孙子。
<div id="box">
<p>a</p>
<p>b</p>
<div>
<p>a</p>
<p>b</b>
</div>
</div>
$("#box").find("p").css();等价上面。
2.子选择器,儿子会被选中,孙子不会被选中。
$("#box > p").css()
$("#box").children("p").css();
3.next选择器,某节点后一个同级DOM对象
<p>a</p>
<p>b</p>
<div id="box">
cccccc
</div>
<p>a</p>
<p>b</b>
$("#box+p").css();
等价于: $("#box").next("p").css("color","red");
3.nextAll选择器,某节点后所有同级DOM对象
$("#box~p").css();
$("#box").nextAll("p").css("color","red");
4.prev和prevAll和next一样,表示某节点前的节点。
5.siblings()表示某节点前和后的节点
$("#box").siblings("p").css("color","red");
6.nextUntil和preUntil,
<p>a</p>
<p>b</p>
<div id="box">
cccccc
</div>
<span>a</span>
<span>b</span>
<p>a</p>
<p>b</b>
$("#box").nextUntil("p").css("color","red");
往下选择知道碰到p停止。
$("#box").preUntil("p").css("color","red");
往上。
推荐使用jquery中的方法,不要使用css形式的$("#div+p")
属性选择器
$("a[title=row]").css("color","red");
<a title="row">a</a>
<a title="row1">b</a>
<a title="row2">c</a>
<a title="row3">d</a>
$("a[title^=row]").css("color","red");以row开头的
$("a[title$=row]").css("color","red");以row结尾的
$("a[title|=row]").css("color","red"); 匹配等于属性值的,或者是等于属性值,并且后面有-的
<a title="row">a</a>
<a title="row-1">b</a>
<a title="row2">c</a>
<a title="row-2">d</a>
$("a[title!=row]").css("color","red");title属性值不等于row的都选中。
$("a[title~=row]").css("color","red");包含空格列表的。
$("a[title~=col]").css("color","red");
<a title="row col">a</a>
<a title="row-1">b</a>
<a title="row2">c</a>
<a title="row-2">d</a>
$("a[title*=col]").css("color","red");筛选包含col的
$("a[data][title=row2]").css("color","red"); 多属性选择器,不仅选中title=row2的,还要有data属性的。
<a title="row">a</a>
<a title="row-1">b</a>
<a title="row2" data="aa">c</a>
<a title="row2" >e</a>
<a title="row-2">d</a>