JQuery选择器

选择器

基本选择器

1. 元素选择器

$(“元素名”)

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

事实上，我们只需要把CSS选择器的写法套入$("")中，就可以变成了jQuery选择器
元素操作，可能多个可能一个

2.ID选择器

$("#id名")
$("#lvye").css("color","red");

一个

3.class选择器

$(".类名") 
$(".lv").css("color","red");

类，可能多个可能一个

4.群组选择器

$("选择器1, 选择器2, ... , 选择器n");
$("h3,div,p,span").css("color","red");

多个元素选择器，很多个

层次选择器

1.后代选择器

$("M N")或(M).find(N)所有后代

2.子代选择器

$("M>N")或(M).children(N)只有子代

3.兄弟选择器

$("M~N")或(M).nextAll(N)只能选M后面的所有一类兄弟元素

4.相邻选择器

$("M+N")或(M).next(N)选中后面的第一个兄弟N元素
实现两两之间的文字可以使用相邻选择器

5.属性选择器

E[attr ^= “value”]

选择元素E，其中E元素的attr属性取值是以“value”开头的任何字符

E[attr $=“value”]

选择元素E，其中E元素的attr属性取值是以“value”结尾的任何字符

E[attr *= “value”]

选择元素E，其中E元素的attr属性取值是包含“value”的任何字符

E[attr |= “value”]

选择元素E，其中E元素的attr属性取值等于“value”或者以“value”开头
E[attr ~= “value”] 选择元素E，其中E元素的attr属性取值等于“value”或者包含“value”
选取type取值为checkbox的input元素：

$("input[type = 'checkbox']")

选取带有id属性并且class属性是以nav开头的div元素，

<div id="container" class="nav-header"></div>：
$("div[id][class ^='nav']")

练习题

（ 1）选取含有href属性的a元素。

$(“a[href]”)

（2）选取type取值为radio的input元素。

$("input[type='radio']")

（3）选取type取值不是checkbox的input元素。

$("input[type !='chexbox']")

（4）选取class属性包含nav的div元素（class属性可以包含多个值）。

$（“div[class ~=‘nav’]”）

（5）选取class属性以article开头的div元素，例如<div class="article-title"></div>

$（“div[class ^= ‘article’]”）

（6）选取class属性以content结尾的div元素，例如<div class="article-content"></div>。

div[class $= ‘content’]

（7）选取带有id属性并且class属性是以article开头的div元素，例如<div id="container" class="article-title"></div>

div[id][class ^= ‘article’]

www.lvyestudy.com绿叶学习网