jQuery中的选择器
一:css选择器
(1)css选择器介绍:
1.CSS选择器是一项出色的技术，它使网页的结构和表现形式完全分离，利用CSS选择器能轻松的对某个元素添加样式而不改动HTML结构。只需通过添加不同CSS规则就可以得到各种不同样式的网页.
2.使某个样式应用于特定的HTML元素.首先需找到该元素.在CSS中.执行这一任务的表现规则称为CSS选择器.
(2)css选择器的分类:
选择器 语法 描述 示例
标签选择器 E{CSS规则} 以文档元素作为选择符 td{font-size:14px;width:120px} a{text-decoration:none;}
ID选择器 #ID{CSS规则} 以文档元素的唯一标识 #note{font-size:14px;width:120px}
符ID作为选择符
类选择器 E.className{css规则} 以文档元素的class作为选择器 div.note{font-size:14px;} .dream{font-size:14px;}
群组选择器 EI E2 E3{css规则} 多个选择符应用同样的样式规则 td,p,div.a{font-size:14px;}
后代选择器 E F{css规则} 元素E的任意后代元素F #link a{color:red}
通配选择符 *{css规则} 以文档的所有元素标签选择器 *{font-size:14px;}
注释: 几乎所有的主流浏览器都支持上面的这些常用的选择器.
(3)css其它选择器:
.伪类选择器(E:Pesude-Elements{CssRules})
.子选择器(E>F{CssRules})
.临近选择器(E+F{CssRules})
.属性选择器([attr]{CssRules})
注释:当遗憾的是主流浏览器并非完全支持所有的Css选择器。把CSS应用到网页中有3种方式,即行内样式表、内部样式表和外部样式表。
class作为连接样式和网页结构的纽带。
二:jQuery选择器:
(1)jQuery选择器的介绍:
1.jQuery选择器完全继承了CSS的风格.
2.利用jQuery选择器可以非常便捷和快速的找出特定的DOM元素.为他们添加相应的行为.而无需担心浏览器是否支持.jQuery的行为规则都必须在获取元素后才能生效.
(2)jQuery选择器的写法与Css选择器的写法十分相似，只不过两者作用的效果不同。
(3)jQuery选择器与Css选择器的区别:
1.CSS选择器找到元素后是添加样式.
2.而jQuery选择器找到元素后是添加行为.
特别注意:jQuery中涉及操作Css样式的部分比单纯的CSS功能更为强大,并拥有跨浏览器的兼容性。
(4)jQuery选择器的优点:
1.简洁的写法:$()函数在很多javascript类库中都被作为一个选择器元素来使用，在JQuery中也不例外。其中,$("#ID")用来代替document.getElementById()函数，及同过ID来获取元素；$("tagName")用来代替
2.支持CSS1到CSS3的选择器:jQuery jQuery选择器CSS1、CSS2的全部和CSS 3的部分选择器，同时它也有少量的独有的选择器,使用css选择器时,开发人员需考虑主流选择器是否支持某些选择器，而在JQuery中。开发人员则可以放心使用JQuery选择器而无需考虑浏览器是否支持这些浏览器。
注释:为了能有更快的选择器解析速度,从1.1.3.1版后,JQuery废弃了不常使用的XPath选择器。但在引用相关的插件后,依然可以使用XPath选择器.
3.完善的处理机制:使用JQuery选择器不仅比使用传统的getElementById()和getElementByTagName()函数 简洁。而且还避免了某些错误.
(5)jQuery选择器分为:基本选择器、层次选择器、过滤选择器和表单选择器。
---基本选择器
1.基本选择器:基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素Id、class和标签名等来查找DOM元素。并且在网页中,id只能使用一次,class允许重复使用。
2.基本选择器说明:
选择器 描述 返回 示例
#id 根据给定的id匹配一个元素 单个元素 $("#test")选取id为test的元素
.class 根据给定的类名匹配元素 集合元素 $(".test")选取所有class为test的元素
element 根据给定的元素匹配元素 集合元素 $("p")选取所有的<p>元素
* 匹配所有元素 集合元素 $("*")选取所有的元素
Selector1, 将每一个选择器
selector2, 匹配到的元素合并后一起返回 集合元素 $("div,span,p,myClass")
……, 选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素
selectorN
----层次选择器
1.什么是层次选择器:通过DOM元素之间的层次关系来获取特定的元素.例如后代元素、子元素、相邻元素和兄弟元素等。
2.层次选择器的介绍说明:
选择器 描述 返回 示例
$("ancestor descendant") 选取ancestor元素里的所有 集合元素 $("div span")选取div里所有的<span>元素
descendant(后代)元素
$("parent>child") 选取parent元素下的child元素， 集合元素 $("div>span")选择<div>
与$("ancestor descendant") 元素下元素名是<span>的子元素
有区别，$("ancestor descendant")
选择的是后代元素
$("prev+next") 选取紧接在prev元素后的next元素 集合元素 $(".one+div")选取class为one的下一个<div>元素
$("prev~siblings") 选取prev元素之后的sibling元素 集合元素 $("#two~div")选取id为two的元素后面的所有<div>元素
3.选择器与替代方法
选择器 方法
$(".one+div") $(".one").next("div")
$("#prev~div") ("#prev").nextAll("div")
4.siblings()与$("prev~siblings")
1.$("#prev~div")选择器只能选择"#prev"元素后面的同辈<div>元素,而siblings()方法与前后位置无关,只要是同辈节点就都能匹配.
注释:$({"prev ~ siblings")在选取元素时,不包含prev元素,选取prev元素之后的sibling元素,并且不包含本身
-----过滤选择器
1.过滤选择器介绍:过滤选择器主要是通过特定的过滤规则来筛选出所选DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。
2.过滤选择器的分类(根据不同过滤规则)
基本过滤选择器
内容过滤选择器
可见性过滤选择器
属性过滤选择器
子元素过滤选择器
表单对象属性过滤选择器
3.过滤选择器的说明:
----基本过滤选择器
选择器 描述 返回 示例
:first 选取第一个元素 单个元素 $("div:first")选取所有div元素中的第一个div元素
:last 选取最后一个元素 单个元素 $("div:last")选取所有div元素中的最后一个div元素
:not(selector) 去除所有与给定选 集合元素 $("input:not(.myclass)")选取class不是myclass的input元素
择器匹配的元素
:even 选取所有索引值 集合元素 $("input:even")选取索引值偶数的input元素
为偶数的元素,
从0开始计数
:odd 选取所有索引值 集合元素 $("input:odd")选取索引值奇数的input元素
为奇数的元素,
从0开始计数
:eq(index) 选取一个给定 单个元素 $("input:eq(1)")选取索引值等于1的input元素
索引值=index的元素
:gt(index) 选取所有大于给定 集合元素 $("input:gt(1)")选取索引值大于1的input元素
索引值(index)的元素
:gt(index) 选取所有大于给定 集合元素 $("input:gt(1)")选取索引值大于1的input元素
索引值(index)的元素
:gt(index) 选取所有大于给定 集合元素 $("input:gt(1)")选取索引值大于1的input元素
索引值(index)的元素
----内容过滤选择器
选择器 描述 返回 示例
:contains(text) 选取文本内容 集合元素 $("div:contains("我")")选取含有文本"我"的div元素
含有text的元素
:empty 选取不包含 集合元素 $("div:empty")选取不包含子元素(文本)的div元素
子元素或文本
的空元素
:has(selector) 选取含有选择器 集合元素 $("div:has(p)")选取含有<p>元素的div元素
所匹配的元素的元素
:has(selector) 选取含有选择器 集合元素 $("div:has(p)")选取含有<p>元素的div元素
所匹配的元素的元素
----可见性过滤选择器
选择器 描述 返回 示例
:hidden 得到所有隐藏的元素 集合元素 Div:hidden得到所有隐藏的div
:visible 得到所有可见元素 集合元素 Div:visible得到所有可见的div
----属性过滤选择器
选择器 描述 返回 示例
[attribute] 选取拥有此属性的元素 集合元素 $("div[id]")选取拥有属性id的元素
[attribute=value] 选取属性的值 集合元素 $("div[title=test]")选取属性title等于"test"的div
为value的元素
[attribute!=value] 选取属性的值 集合元素 $("div[title!=test]")选取属性title不等于"test"的div
不等于value的元素
[attribute^=value] 选取属性的值 集合元素 $("div[title^=test]")选取属性title以"test"开头的div
以value^开始的元素
[attribute$=value] 选取属性的值 集合元素 $("div[title$=test]")选取属性title以"test"结束的div元素
以value结尾
[attribute*=value] 选取属性的值 集合元素 $("div[id][title$=test]")选取拥有属性id,
含有value 并且属性title含有"test"的div元素
----子元素过滤选择器
选择器 描述 返回 示例
:nth-child 匹配其父元素下的 集合元素 在每个ul查找第2个li:
(index/even/odd/equation) 第N个子元素或奇偶元素
$("ul li:nth-child(2)")
奇数:nth-child(even)
偶数:nth-child(odd)
:first-child 匹配第一个子元素 集合元素 在每个ul中查找第1个li:
$("ul li:first-child")
:last-child 匹配最后一个子元素 集合元素 在每个ul中查找最后1个li:
$("ul li:last-child")
:only-child 如果某个元素是 集合元素 在ul中查找是唯一子元素的li:
父元素中唯一的
子元素,那将会被匹配
4.子元素过滤选择器功能:
1.:nth-child(even)能选取每个父元素下的索引值是偶数的元素。
2.:nth-chile(odd)能选取每个父元素下的索引值是基数的元素。
3.:nth-chile(2)能选取每个父元素下的索引值等于2的元素。
4.:nth-chile(3n)能选取每个父元素下的索引值是3的倍数的元素。(n从0开始)
5.:nth-chile(3n+1)能选取每个父元素下的索引值足(3n+1)的元素。(n从0开始)
----表单对象属性过滤选择器
选择器 描述 返回 示例
:enabled 选取所有可用元素 集合元素 $("#form1:enabled")选取
id为form1的表单内的
所有可用元素
:disabled 选取所有不可用的元素 集合元素 $("form1:disabled")选取
id为form1的表单内的所有
不可用的元素
:checked 选取所有被选中的元素 集合元素 $("input:checked")选取所有被
(单选框,复选框) 选中的<input>元素
:selected 选中所有被选中的选项元素 集合元素 $('' "select:sekected",)选取
所有被选中的选项元素
5. 表单选择器的作用:为了使用户更加灵活的操作表单(及可也通过表单选择器更加方便的获得表单的某个或某类型的元素)
6.表单选择器注意事项
1: $("#form1 :input")与$("#form1 input")的区别？
$("#form1 :input"):获取ID为form1下所有的<input>、<textarea>、<select>和<button>元素
.$("#form1 input"): 获取ID为from1下所有的input标签
2:表单中取值
单标签:以"/>"结尾的标签<button id='btb' value='aaa' />，统一以val()取值，得到的是该标签中value属性的值.
双标签:成对出现的标签,例如<body></body>,统一以.html()取值,得到的值就是这对标签中的html值.
表单元素不一定在表单中.
7.jQuery虽然提供了许多实用的选择器,但也可能无法满足各种多变的业务需求,为此jQuery提供了选择器的扩展.
1:MoreSelectors for jQuery(这是jQuery的一款插件,用于增加更多的选择器,例如.color可以匹配颜色,:colindex可以表格中的列等等).
插件地址http://plugins.jquery.com/project/moreselectors.
2:Basic XPath(这个插件可以让用户使用基本的XPath,但由于使用的人不多,且降低了选择器的效率,jQuery取消了默认对XPath的支持,改用插件来实现).
插件地址http://plugins.jquery.com/project/xpath
8.其他使用CSS选择器的方法
1:除了jQuery提供了强大的选择器支持外,也有一些其他JavaScript脚本也提供了纯粹的CSS选择器的支持。
(1)Document.getElementsBySelector() 可以通过选择器来获取文档元素
示例：Document.getElementsBySelector("div#main p a.external")
(2)CssQuery
这是Dean Edwards编写的一款易用CSS选择器查找元素的脚本,支持所有的CSS1,CSS2以及部分CSS3选择器,它支持一些jQuery尚不支持的选择器,
例如：E:link ,E:nth-last-child(n)…….
语法结构如下:Elements=cssQuery(selector [,from ]);
(3)querySelectorAll() 这是W3C在Selectors API草案中提到的方案,此方法也是用于实现通过CSS选择器来获取元素的。
IE8的Beta2中已经率先实现了此方法。相信其他几大浏览器也能很快就能实现此方法。
jQuery 的作者John Resig 也表示将会利用querySelectorAll这个浏览器原生的方法来重构jQuery选择器,
同时增加一些jQuery扩展的选择器,届时jQuery选择器的执行效率将会大大提高.
