选择器

最新推荐文章于 2023-12-12 09:35:39 发布

原创最新推荐文章于 2023-12-12 09:35:39 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文全面解析了jQuery选择器的功能和用法，涵盖基本选择器、层级选择器、内容选择器等，详细介绍了如何通过各种选择器精准定位网页元素，进行高效操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 基本选择器

id选择器：#id；

根据ID查找元素，因为id唯一，所以返回值唯一。

//jquery代码
$("#myDiv");
//查找含有特殊字符的元素
//HTML代码：
<span id="foo:bar"></span>
<span id="foo[bar]"></span>
<span id="foo.bar"></span>
//jquery代码
#foo\\:bar
#foo\\[bar\\]
#foo\\.bar

element：根据给定的元素名匹配所有元素；

一个用于搜索的元素，指向 DOM 节点的标签名。会返回包含所有指定标签的集合。

类选择器：.class；

根据指定的类匹配元素，会返回包含所有满足条件的元素的集合。

：匹配所有元素；
复合选择器：selector1，selector2，selector3，selector4；

将每一个选择器匹配到的元素合并后一起返回。

你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

2. 层级选择器

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

ancestor：指任何有效的选择器。

descendant：指用以匹配元素的选择器，并且它是第一个选择器的后代元素。

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

parent：任何有效的选择器。

child：指用以匹配元素的选择器，并且它是第一个选择器的后代元素。

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

prev：任何有效选择器。

next：一个有效选择器并且紧接着第一个选择器。

prev~siblings：匹配所有prev元素之后的所有siblings即同辈元素；

prev：任何有效选择器。

siblings：一个选择器，并且它作为第一个选择器的同辈元素。

3. 基本选择器

：first：获取匹配的第一个元素；
：last：获取匹配的最后一个元素；
not：去除所有与给定选择器匹配的元素；

有一个参数selector，指用于筛选的选择器。

//查找除最后一个的所有li元素
//HTML代码
<div>
    <ul>
        <li><a href="#">第一个</a></li>
        <li><a href="#">第二个</a></li>
        <li><a href="#">第三个</a></li>
    </ul>
</div>
//jquery代码
<script src="../jquery-3.0.0.js"></script>
<script>
    $(function () {
        $("li:not(:last)").css({'color':'red','list-style':'none','text-decoration':'none'})
    })
</script>

注意：

这里的not是指前面的选择器的内容，比如第几个，或者是类似checked这样的单值属性。

：even：匹配所有索引值为偶数的元素，索引值从0开始计数；

注意：

这里的索引值为偶数指的是jQuery默认赋予的index索引值，从0开始，即从文本行理解是文本的第一个或者第一行。

：odd：匹配所有索引值为奇数的元素，索引值从0开始计数；
：eq(index)：匹配一个给定索引值的元素；
：gt：匹配所有大于给定索引值的元素；
：lt：匹配所有小于给定索引值的元素；
：header：匹配所有的标题元素，如h1,h2,h3.....；
：animated：匹配所有正在执行动画效果的元素；

4.内容选择器

：contains：匹配给定元素的文本；

参数：text，指一个用于查找的字符串。

//包含John字符串的元素
//HTML代码
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn
//jquery代码
$("div:contains('John')")
//结果
//[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

：empty：查找所有不包含子元素或文本的空元素；
：has：匹配含有选择器所匹配的元素的元素；
：parent：匹配含有子元素或者文本的元素；

注：

这里的parent是指选择器是父亲，即找出所有是父亲的选择器匹配的元素。

5.可见性选择器

：hidden：匹配所有不可见元素，或者type为hidden的元素（display：none）；
：visible：匹配所有可见元素；

6.属性选择器

[attribute]：匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。

//描述:
//查找所有含有 id 属性的 div 元素

//HTML 代码:
<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>
//jQuery 代码:
$("div[id]")
//结果:
[ <div id="test2"></div> ]

[attribute=value]：匹配给定的属性是某个值的元素；
[attribute！=value]：匹配给定的属性不是某个值的元素；
[attribute^=value]：匹配给定的属性是以某些值开始的元素;
[attribute$=value]：匹配给定的属性是以某些值结束的元素;
[attribute*=value]：匹配给定的属性是包含某些值的元素;
[selector1]/[selector2]/[selectorN]：符合属性选择器，需要同时满足多个条件时使用；

//描述:
//找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的

//HTML 代码:
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />
//jQuery 代码:
$("input[id][name$='man']")
//结果:
[ <input id="letterman" name="new-letterman" /> ]