24-jquery选择器

一、常规选择器

1. 标签选择器

    $("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();

二、进阶选择器

1. 群组选择器

   1. $("div,p,strong")

   2. $("#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

1. 后代选择器
   

   $("#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>