您的位置：首页 > Web前端 > JQuery

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

2016-03-27 19:13 513 查看
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 基本选择器

CSSjQuery功能
#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 层次选择器

CSSjQuery功能
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 基本过滤选择器

CSSjQuery功能
: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 内容过滤选择器

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

2.3.3 可见性过滤选择器

CSSjQuery
:hidden$(“:hidden”)
:visible$(“div:visible”)

2.3.4 属性过滤选择器

CSSjQuery
[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 子元素过滤选择器

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

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

CSSjQuery
:enabled同上
:disabled
:checked
:selected

2.4 表单选择器

CSSjQuery
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航