前端学习jQuery选择器

Posted 2020-06-29

jQuery选择器

 

 

jQuery选择器

 

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

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

---

• jQuery选择器
  • 1 优势
    • 1.1 简洁的写法
    • 1.2 支持CSS1到CSS3选择器
    • 1.3 完善的处理机制
  • 2 CSS选择器和jQuery选择器
    • 2.1 基本选择器
    • 2.2 层次选择器
    • 2.3 过滤选择器
      • 2.3.1 基本过滤选择器
      • 2.3.2 内容过滤选择器
      • 2.3.3 可见性过滤选择器
      • 2.3.4 属性过滤选择器
      • 2.3.5 子元素过滤选择器
      • 2.3.6 表单对象属性过滤选择器
    • 2.4 表单选择器

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