jQuery常规选择器

要点：

• 基础选择器 id选择器、标签选择器、类选择器、子选择器
• 进阶选择器 群组选择器、后代选择器、通配选择器
• 高级选择器 层次选择器 属性选择器

一、简单选择器

主要包括id选择器、标签选择器、类选择器、子选择器

1.ID选择器，将Id为box的元素的字体颜色修饰为blue

<div id="box">box</div>
$("#box").css("color", "blue");

2.标签选择器，将所有的p元素的字体颜色修饰为red

<p>p1</p>
<p class="p2">p2</p>
<p>p3</p>
$("p").css("color", "red");

3.类选择器，将class为p2的元素的字体颜色修饰为black

$(".p2").css("color", "black");    

4.可以使用length属性和size()方法来查看我们选择的元素的个数

<div id="box">box</div>
<p>p1</p>
<p class="p2">p2</p>
<p>p3</p>
console.log($("#box").length);     // 1
console.log($("p").size());            // 3

5.子选择器，将ul元素的子元素li的background设置为red

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>
$("ul > li").css("background", "red");

由于jQuery对于不存在的元素具有容错的处理，我们判断一个元素是否存在有两种方式：

①判断元素的个数或者是判断元素是否存在判断元素的个数

<div id="box">box</div>
if ($("#box").length > 0) {
    console.log($("#box").css("color"));       // rgb(0, 0, 255)
}

②判断元素是否存在，可以使用访问数组的方式或者get()方法来获取元素的第N个元素，从0开始计算

if ($("#box").get(0)) {
    console.log($("#box")[0].innerHTML);       // box
}

二、进阶选择器

主要包括群组选择器、后代选择器、通配选择器

1.群组选择器。获取多个元素的DOM对象，将div,p,span的字体颜色设置为red，用逗号隔开

<div id="box">box</div>
<p class="p">p</p>
<span>span</span>
// 用标签的形式
$("div,p,span").css("color", "red");
// 用id,class和标签的形式
$("#box, .p, span").css("color", "blue");
// 如果想更具体点，可以这样
$("div#box,p.p,span").css("color", "red");

2.后代选择器，用空格隔开

将div下的ul下的li下的a的下划线去掉

<div>
    <ul>
        <li><a href="###">体育</a></li>
        <li><a href="###">新闻</a></li>
    </ul>
</div>
$("div ul li a").css("text-decoration", "none");

3.通配选择器，用*表示，建议少使用

将所有元素的color设置为red

<div>box</div>
<p>p</p>
$("*").css("color", "red");

3.指明元素选择器

<div id="box">box</div>
<div class="pox">pox</div>
$("div#box").css("color", "red");
$("div.pox").css("color", "blue");

4.多类选择器

<div class="div student tom">tom</div>
<div class="div student jack">jack</div>
$(".div.student").css("font-size", "100px");
$(".div.student.jack").css("color", "red");

三.高级选择器

1）层次选择器

主要包括后代选择器、子选择器、next选择器、nextAll选择器

1.后代选择器，上述讲过了，这里过一遍

将div下的ul下的li下的a的下划线去掉

<div>
    <ul>
        <li><a href="###">体育</a></li>
        <li><a href="###">新闻</a></li>
    </ul>
</div>
$("div ul li a").css("text-decoration", "none");
// jquery为后代选择器提供了find()方法
$("div").find("a").css("text-decoration", "none");

2.子选择器，上述也讲过了，这里过一遍

将ul元素的子元素li的background设置为red

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>
// jQuery为子选择器提供了children()方法
$("ul").children("li").css("font-size", "100px");
$("ul > li").css("background", "red");

3.next选择器，获取当前元素的下一个兄弟元素，用+选取

将div下的class为p1的下一个兄弟节点的字体颜色设置为green

$("div > p.p1+").css("color", "green");

同时，next选择器的等价方法为next()

$("div .p1").next("p").css("color", "red");

4.nextAll选择器，获取当前元素后面的所有兄弟元素，用~选取

匹配div下的div之后的所有的兄弟p元素

<div>
    <div>子div</div>
    <p class="p1">p1</p>
    <p>p2</p>
</div>
$("div div~p").css("color", "green");

同时，nextAll选择器的等价方法为nextAll()

$("div div").nextAll("p").css("color", "red");

ps: 当find()、children()、next()、nextAll()默认传递“*”参数，强烈建议传递参数，否则影响性能

5.prev()和prevAll()方法，匹配同级上一个元素和匹配同级所有元素，这里不再累赘

6.siblings(),匹配上下相邻的所有元素,集成了prevAll()和nextAll()方法的效果

<div>
    <div>子div</div>
    <p class="p1">p1</p>
    <p>p2</p>
</div>

将div下class为p1的兄弟节点为p的元素的backgroun设置为red

$("div .p1").siblings("p").css("background", "red");

7.prevUntil()和nextUntil()方法，匹配同级的上面和下面的所有元素，选取非指定的元素，一旦遇到指定元素就会停止匹配

<div>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p class="p4">p4</p>
    <p>p5</p>
    <p>p6</p>
</div>

先选取div下的最后一个p元素，然后向上选取同级的p元素，知道p元素的class为p4为止,即只有p5被选取

$("div p").eq($("div p").length - 1).prevUntil(".p4").css("color", "red");

ps:我们推荐使用方法来匹配元素

2）属性选择器

<a title="num1">num1</a>
<a>num2</a>
<a>num3</a>
<a title="no4">num4</a>
<a title="num5">num5</a>

1.匹配有title属性的a元素

$("a[title]").css("color", "red");

2.匹配有title属性且属性值为某个值的a元素

$("a[title=no4]").css("color", "red");

3.匹配有title属性,且属性值以某个值开头的a元素

$("a[title^=num]").css("color", "red");

4.匹配有title属性,且属性值以某个值结尾的a元素

$("a[title$=5]").css("color", "red");

5.匹配具有title属性且具有num属性值的或者是开头属性值num后跟一个‘-’号,即num-这种形式的

<a title="num-1">num1</a>
<a>num2</a>
<a>num3</a>
<a title="no4">num4</a>
<a title="num5">num5</a>

$("a[title|=num]").css("color", "red");

6.匹配有title属性且属性值不等于num1的a元素

<a title="num1">num1</a>
<a>num2</a>
<a>num3</a>
<a title="no4">num4</a>
<a title="num5">num5</a>

$("a[title!=num1]").css("color", "red");

7.匹配有title属性且属性值是以分隔符分开的列表的a元素

<a title="num1 aaa bbb ">num1</a>
<a>num2</a>
<a>num3</a>
<a title="no4">num4</a>
<a title="num5">num5</a>

$("a[title~=num1]").css("color", "red");

8.匹配具有title属性且属性值中包含num的a标签

<a title="asfdnum1asdf">num1</a>
<a>num2</a>
<a>num3</a>
<a title="no4">num4</a>
<a title="asdfasdfnum5asdfwe">num5</a
$("a[title*=num]").css("color", "red");

9.匹配具有aaa和title属性，且title属性值为num5的a元素

<a title="num">num1</a>
<a>num2</a>
<a>num3</a>
<a title="no4">num4</a>
<a title="num" aaa="aaa">num5</a>
$("a[aaa][title=num]").css("color", "red");