【jquery】jquery选择器

知识点

1、jquery选择器的作用是选择jquery页面中的html元素。

2、常用的选择器有：基本选择器、层级选择器、过滤选择器、属性选择器。

基本选择器

1、 id 选择器

代码实现：

element = $("#id")

等价于

document.getElementById("id")

2、class选择器

代码实现：

$(".myClass")  

3、元素选择器

代码实现：

$("div") 

4、类选择器

代码实现：

$(".myClass") 

5、复合选择器

$("div,span,p.myclass")

注：分清p.myclass 和 p,.myclass的区别，第一个指的是所有的p标签下的类为class的元素，第二个指的是所有的p标签和所有的类为myclass的元素。

6、后代元素选择器和子元素选择器

（1）后代元素选择器

代码实现：

$("form input")

(2)子代元素选择器

代码实现：

$("form > input");

注：两者区别为一个是选择所有的子代及子代的子代，一个仅仅选择子代。

7、后续元素选择器

代码实现：

alert($("lable + input"));

注：

（1）选择的是紧跟在lable后面的input

（2）只选择了input而没有选择lable

（3）input必须紧跟lable否则选不中

8、兄弟选择器

代码实现：

$("form ~ input")

注：匹配form后的所有兄弟节点。

9、筛选：

（1）：first  获取第一个元素

（2）：last  获取第二个元素

（3）：even  获取索引值为偶数的元素

（4）：odd  匹配所有索引值为基数的元素

注：索引值均是从0开始计数

（5）：eq（index）匹配一个给定索引值的元素

（6）：gt（index）匹配所有大于给定元素索引值的元素

（7）：it（index）匹配所有小于给定元素索引值的元素

 

10、属性选择器（了解）

属性选择器
1.包含id属性的元素
$("div[id]")
2.属性等于，不等于某值
$(“input[name=‘newsletter’]”)，$(“input[name！='newsletter']")
3.属性以某值开头，结尾
$("input[name^=‘news’]") ， $("input[name$='letter']")
4.属性包含某值
$("input[name*='man']")