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

系统学习 jQuery （三） 选择器

2017-07-12 10:02 225 查看
jQuery 操作 DOM 的逻辑是先找到想操作的 DOM 元素，然后进行相应操作。实际中我们一般是先通过 jQuery 选择器构造包含想要操作的 DOM 元素的 jQuery 对象，再通过 jQuery 对象方法对一个或一组 DOM 对象进行操作。全程使用链式操作完成方便清晰。

为了准确地选择要操作的 DOM 元素，jQuery 提供了类似 CSS 的丰富的选择器，且这些选择器可以按照一定规则组合以得到最大的灵活性。通过向 jQuery 函数传递选择器字符串来选择特定的 DOM 元素即 $(select)。

jQuery 常用选择器

#id 选择特定 id 的元素

tag 选择特定标签的元素

.class 选择特定 class 的元素

* 选择所有元素

select1, select2, selectn 选择多个选择器匹配的元素

ancestor descendant 选择 ancestor 匹配的元素的后代中匹配 descendant 的元素

parent > child 选择 select1 匹配的元素的孩子中匹配 select2 的元素

prev + next 匹配紧接在 prev 之后的 next 兄弟元素

prev ~ siblings 匹配在 prev 之后的所有 siblings 兄弟元素

:first 获取匹配的第一个元素

:not(selector) 选择不匹配 selector 的元素

:even 匹配编号为偶数的元素

:odd 匹配编号为奇数的元素

:eq(index) 匹配特定编号的元素

:gt(index) 匹配编号大于特定值的元素

:lt(index) 匹配编号小于特定值的元素

:contains(text) 匹配包含给定文本的元素

:hidden 匹配不可见或 type 为 hidden 的元素

:visible 匹配可见的元素

[attr] 匹配包含给定属性的元素

[attr = value] 匹配给定属性是某个特定值的元素

[attr != value] 匹配给定属性不存在或不等于特定值的元素

[attr ^= value] 匹配给定属性是以某些值开始的元素

[attr $= value] 匹配给定属性是以某些值结束的元素

[attr *= value] 匹配给定属性包含某些值的元素
要了解全部 jQuery 选择器请查看 jQuery API http://jquery.cuishifeng.cn/id.html

jQuery 常用筛选函数

除了通过选择器构造包含指定 DOM 元素的 jQuery 对象之外，jQuery 对象自身也提供了许多筛选函数来帮助我们近一步找到想要的元素。

eq(index) 选择集合中的第 index 个元素

first() 选择集合中第一个元素

last() 选择集合中最后一个元素

hasClass(class) 选择含有特定 class 的元素

filter(select) 选择与 select 匹配的元素

is(select) 判断是否与 select 匹配，只要有一个元素匹配就返回 true

has(select) 选择包含与 select 匹配的后代的元素

map(cb) 对 DOM 集合进行 map 操作以构造一个新数组

not(select) 选择不与 select 匹配的元素

children() 选择集合中所有元素的子元素

parent() 选择元素集合中所有元素的父元素

next() 选择元素的下一个兄弟元素

find(select) 在匹配的元素上再次应用选择器进行选择

要了解全部 jQuery 选择器请查看 jQuery API http://jquery.cuishifeng.cn/eq.html <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../lib/jquery-1.11.2/jquery.js"></script>
</head>
<body>
<div id="p1">
<p id="p2">
<a>
<span id="s1">hello7</span>
<span id="s2">hell2</span>
<span id="s3">hell3</span>
</a>
</p>
</div>
<script>
// p 里面不能套 p
$(function() {
console.log($('*:has(span)'));
console.log($("span:contains(7) ~ *"));
console.log($("span:contains(7) + *"));
console.log($("span:first"));
console.log($("span:nth-child(2)")); // 从 1 开始计数
console.log($("[id ^= s]"));
console.log($('span:even')); // 从 0 开始计数
console.log($('span:gt(0)')); // 从 0 开始计数
console.log($(':visible'));
console.log($(':root')); // 文档的根元素为 html 元素
console.log($('span').eq(2));
console.log($('#p1').find('p'));
console.log($('#s1').parent().children());
console.log($('span').filter(':contains(7)'));
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航