jQuery常规选择器

要点：

一、简单选择器
主要包括id选择器、标签选择器、类选择器、子选择器
1.ID选择器，将Id为box的元素的字体颜色修饰为blue

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

p1

p2

p3

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

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

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

p1

p2

p3

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

• item1
• item2
• item3

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

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

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

二、进阶选择器
主要包括群组选择器、后代选择器、通配选择器
1.群组选择器。获取多个元素的DOM对象，将div,p,span的字体颜色设置为red，用逗号隔开

p

2.后代选择器，用空格隔开
将div下的ul下的li下的a的下划线去掉

3.通配选择器，用*表示，建议少使用
将所有元素的color设置为red

p

3.指明元素选择器

4.多类选择器

tom
jack
$(".div.student").css("font-size", "100px");
$(".div.student.jack").css("color", "red");

三.高级选择器
1）层次选择器
主要包括后代选择器、子选择器、next选择器、nextAll选择器
1.后代选择器，上述讲过了，这里过一遍
将div下的ul下的li下的a的下划线去掉

2.子选择器，上述也讲过了，这里过一遍
将ul元素的子元素li的background设置为red

• item1
• item2
• item3

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元素

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

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

ps: 当find()、children()、next()、nextAll()默认传递“*”参数，强烈建议传递参数，否则影响性能
5.prev()和prevAll()方法，匹配同级上一个元素和匹配同级所有元素，这里不再累赘
6.siblings(),匹配上下相邻的所有元素,集成了prevAll()和nextAll()方法的效果

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

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

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

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

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

ps:我们推荐使用方法来匹配元素
2）属性选择器

num1
num2
num3
num4
num5

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-这种形式的

num1
num2
num3
num4
num5

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

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

num1
num2
num3
num4
num5

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

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

num1
num2
num3
num4
num5

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

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

num1
num2
num3
num4
num5

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

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