【前端学习】【jQuery选择器】

时间：2022-02-05 21:56:13

jQuery选择器

 
 

jQuery选择器

本文内容引自于单东林《锋利的jQuery》，未经原作者准许，禁止以商业目的转载发布！

选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM（Document Object Model）和Ajax（Asynchronous JavaScript and XML）操作都依赖于选择器。

1 优势

1.1 简洁的写法

$()被jQuery作为选择器函数来使用。例如，$("#ID")用来代替document.getElementById()。

1.2 支持CSS1到CSS3选择器

支持从CSS1~3的部分选择器，同时它也有少量独有的选择器。使用CSS选择器时，开发人员需要考虑主流浏览器是否支持某些选择器。而在jQuery中，开发人员则可以放心地使用jQuery选择器而无需考虑浏览器是否支持这些选择器。

1.3 完善的处理机制

使用jQuery获取网页中不存在的元素也不会报错，例如：

<div>test</div>
<script type="text/javascript">
    $('#tt').css("color", "red") // 这里无需判断$('#tt')是否存在
</script>

有了这个预防措施，即使以后因为某种原因删除网页上某个以前使用过的元素，也不用担心这个网页的JavaScript代码会报错。

2 CSS选择器和jQuery选择器

2.1 基本选择器

CSS jQuery 功能
#id $(“#test”) 选取id为test的元素
.class $(“.test”) 选取所有class为test的元素
element $(“p”) 选取所有的<p>元素
* $(“*”) 选取所有的元素
selector1,selector2,…selectorN $(“div,span,p.myClass”) 选取所有<div>，<span>和拥有class为myClass的<p>标签的一组元素

2.2 层次选择器

CSS jQuery 功能
E F $(“div span”) 选取<div>里所有的<span>元素
E>F $(“div>span”) 选取<div>元素下元素名是<span>的子元素
E+F $(“.one+div”) 选取class为one的下一个<div>同辈元素
E~F $(“#two~div”) 选取id为two的元素后面的所有<div>同辈元素

2.3 过滤选择器

2.3.1 基本过滤选择器

CSS jQuery 功能
:first $(“div:first”)  
:last $(“div:last”)  
:not(selector) $(“input:not(.myClass)”)  
:even $(“input:even”)  
:odd $(“input:odd”)  
:eq(index) :gt(index) :lt(index) $(“input:eq(1)”)  
:header $(“:header”) 选取所有的标题元素
:animated $(“div:animated”) 选取当前正在执行动画的所有元素
:focus $(“:focus”) 选取当前获取焦点的元素

2.3.2 内容过滤选择器

CSS jQuery
:contains(text) $(“div:contains(“text”)”)
:empty $(“div:empty”)
:has(selector) $(“div:has(p)”)
:parent $(“div:parent”)

2.3.3 可见性过滤选择器

CSS jQuery
:hidden $(“:hidden”)
:visible $(“div:visible”)

2.3.4 属性过滤选择器

CSS jQuery
[attribute] $(“div[id]”)
[attribute=value] $(“div[title=test]”)
[attribute!=value] $(“div[title!=test]”)
[attribute^=value] $ * | ~ $(“div[^=test]”)
[attr1][attr2][attrN] $(“div[id][title$=’test’”])

2.3.5 子元素过滤选择器

CSS jQuery
:nth-child(n) 同上
:first-child  
:last-child  
:only-child  

2.3.6 表单对象属性过滤选择器

CSS jQuery
:enabled 同上
:disabled  
:checked  
:selected  

2.4 表单选择器

CSS jQuery
:input  
:text  
:password  
:radio  
:checkbox  
:submit  
:image  
:reset  
:button  
:file  
:hidden  
 
 

相关文章