WEB基础之： jQuery选择器

最新推荐文章于 2024-03-20 16:21:21 发布

f_carey

最新推荐文章于 2024-03-20 16:21:21 发布

阅读量155

点赞数

分类专栏： WEB 文章标签： jquery

本文链接：https://blog.csdn.net/f_carey/article/details/114165145

版权

本文详细介绍了jQuery的各种选择器，包括ID选择器、元素选择器、类选择器、组合选择器、层级选择器、基本选择器、内容选择器、可见性选择器、属性选择器、表单选择器及其属性筛选器，以及混淆选择器的使用，帮助读者全面掌握jQuery中的元素选取技巧。

摘要由CSDN通过智能技术生成

jQuery选择器

示例：

<body>
    <a href="http://jquery.com/" id="linkID" class="linkClass">jQuery</a>
    <script src="jquery-3.5.1.js"></script>
</body>

1. ID选择器

#id: 根据给定的ID匹配一个元素。

$('#foo').text();		// "id=\"foo\" class=\"myclass\""
// 查找含有特殊字符的元素
// 特殊字符要用双“\\”转义
$('#foo\\:bar').text();		// "id=\"foo:bar\""
$('#foo\\[bar\\]').text();		// "id=\"foo[bar]\""
$('#foo\\.bar').text();		// "id=\"foo.bar\""

2. 元素选择器

element: 根据给定的元素标签名匹配所有元素

$('p');		// Object { 0: p#foo.myclass, 1: p#foo:bar, 2: p#foo[bar], 3: p#foo.bar, length: 4, prevObject: {…} }

3. 类选择器

.class: 根据给定的css类名匹配元素。

$('.myclass');		// Object { 0: p#foo.myclass, length: 1, prevObject: {…} }

4. 组合选择器

*: 匹配所有元素

$('*');		//Object { 0: html, 1: head, 2: meta, 3: meta, 4: meta, 5: title, 6: script, 7: style, 8: body, 9: p#foo.myclass, … }

selector1,selector2,selectorN: 指定任意多个选择器，并将匹配到的元素合并到一个结果内。
```
$('#foo','p','.myclass')		// Object { length: 0, prevObject: {…} }
```

5. 层级选择器

ancestor descendant: 在给定的祖先元素下匹配所有的后代元素。

$('body #foo');		// Object { 0: p#foo.myclass, length: 1, prevObject: {…} }

parent > child: 在给定的父元素下匹配所有的子元素。

$('body > #foo');		// Object { 0: p#foo.myclass, length: 1, prevObject: {…} }

prev + next: 匹配所有紧接在 prev 元素后的 next 元素

$('#foo + p');		// Object { 0: p#foo:bar, length: 1, prevObject: {…} }

prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素

$('#foo ~ p');		// Object { 0: p#foo:bar, 1: p#foo[bar], 2: p#foo.ba

最低0.47元/天解锁文章

f_carey

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录