第二章 jQuery选择器
标签：函数 ast 标题 ref doc padding 不为 ntb 概述
第二章jQuery选择器
一.jQuery选择器概述
1.什么是jQuery选择器
jQuery选择器类似于CSS选择器，用来选取网页中的元素。
2. jQuery选择器的优势
- 简洁的写法
$()函数在很多javaScript库中都被当成一个选择器函数来使用，在jQuery中也是如此。$(“#id”)等同于document.getElementById(“id”)。
- 完善的处理机制
使用jQuery选择器不仅比使用传统的getElementById()和getElementsByTagName()函数简洁的多，还能避免某些错误，适用性更好。
3. jQuery选择器的类型
|
分类
|
详细类型
|
|
CSS选择器
|
基本选择器
|
|
层次选择器
|
|
属性选择器
|
|
过滤选择器
|
基本过滤选择器
|
|
可见性过滤选择器
|
二. 通过CSS选择器获取元素
1.基本选择器
jQuery基本选择器主要包括标签选择器、类选择器、id选择器、并集选择器、全局选择器。
|
名称
|
返回值
|
语法：示例
|
|
标签选择器
|
元素集合
|
$(“h2”)选取所有h2元素
|
|
类选择器
|
元素集合
|
$(“.name”)选取所有class=”name”的元素
|
|
Id选择器
|
单个元素
|
$(“#id”)选取id=”id”的唯一元素
|
|
并集选择器
|
元素集合
|
$(“div,p,h2”)选取所有div,p,h2的元素的集合
|
|
全局选择器
|
集合元素
|
$(“*”)选取所有元素
|
2.层次选择器
嵌套一层或多层的选择器叫层次选择器。
|
名称
|
返回值
|
语法：示例
|
|
后代选择器
|
元素集合
|
$(“#id p”)选取id=”id”内的所有p元素，包括孙子（p里面的元素）
|
|
子选择器
|
元素集合
|
$(“#id>p”)选取id=”id”内的p元素，不包含p的子元素
|
|
相邻元素选择器
|
元素集合
|
$(“#id+p”)选取id=”id”后的下一个同辈元素
|
|
同辈元素选择器
|
元素集合
|
$(“#id~p”)选取id=”id”之后的所有同辈元素p
|
3.属性选择器
属性选择器就是通过HTML元素的属性选择元素的选择器。
|
名称
|
返回值
|
语法：示例
|
|
选取包含指定属性的元素
|
元素集合
|
$(“[hrer]”)选取包含href属性的元素
|
|
选取指定属性是某个值的元素
|
元素集合
|
$(“[href=’#’]”)选取href属性值为#的元素
|
|
选取指定属性不是某个值的元素
|
元素集合
|
$(“[href!=’#’]”)选取href属性值不为#的元素
|
|
选取指定属性的值是某些特定值开头的元素
|
元素集合
|
$(“[href^=’#’]”)选取href属性值以#开头的元素
|
|
选取指定属性的值是某些特定元素结尾的元素
|
元素集合
|
$(“[href$=’.jpg’]”)选取href属性以.jpg结尾的元素
|
|
选取指定属性值的值包含某些值的元素
|
元素集合
|
$(“[href*=’txt’]”)选取href属性值中含有txt的元素
|
三.通过条件过滤选取元素
过滤选择器主要通过特定的过滤规则来筛选出所需要的DOM元素。
按照分类，过滤选择器可以分为：基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、表单对象属性过滤。
1.基本过滤选择器
|
名称
|
返回值
|
语法：示例
|
|
选取第一个元素
|
单个元素
|
$(“li:first”)选取所有li元素中的第一个li元素
|
|
选取最后一个元素
|
单个元素
|
$(“li:last”)选取所有li元素中的最后一个li元素
|
|
选取不包含给定元素的元素
|
集合元素
|
$(“li:not(.three)”)选取所有li元素中class不是three的元素
|
|
选取索引是偶数的所有元素
|
集合元素
|
$(“li:even”)选取索引是偶数的所有li元素
|
|
选取索引是奇数的所有元素
|
集合元素
|
$(“li:odd”)选取索引是奇数的所有li 元素
|
|
选取索引等于给定值的元素
|
单个元素
|
$(“li:eq(1)”)选取索引等于1的li元素
|
|
选取索引大于给定值的元素
|
集合元素
|
$(“li:gt(1)”)选取索引大于1的元素
|
|
选取索引小于给定值的元素
|
集合元素
|
$(“li:lt(1)”)选取索引小于1的元素
|
|
选取所有标题元素，如h1~h6
|
集合元素
|
$(“:header”)选取网页中的所有标题元素
|
|
选取当前获取焦点的元素
|
集合元素
|
$(“:focus”)选取当前获取焦点的元素
|
|
选取所有动画元素
|
集合元素
|
$(“:animated”)选取当前的所有动画元素
|
2.可见过滤选择器
通过元素的显示状态（显示/隐藏）来选取 元素。
|
名称
|
返回值
|
语法：示例
|
|
选取可见元素
|
集合元素
|
$(“:visible”)选取所有可见的元素
|
|
选取隐蔽的元素
|
集合元素
|
$(“:hidden”)选取所有隐藏的元素
|
四. jQuery选择器的注意事项
1.选择器中包含特殊符号
在W3C规范中，规定属性值不能包含有某些特殊字符，解决此类错误的方法是使用转义符转义。
例如：$(“#id#a”);
$(“#id[2]”);
以上代码不能正确获取元素，正确的写法如下：
$(“#id\\#a”);
$(“#id\\[2\\]”);
2.选择器中含有空格
选择器中的空格也是不容忽视的，多一个或少一个空格，可能会得到截然不同的结果。
第二章 jQuery选择器
标签：函数 ast 标题 ref doc padding 不为 ntb 概述
原文地址：http://www.cnblogs.com/zeussbook/p/7747501.html
评论