JQuery选择器

Chen_NC

已于 2022-08-21 17:57:02 修改

阅读量863

点赞数

分类专栏： JavaScript基础文章标签： jquery javascript css

于 2021-12-22 15:24:11 首次发布

本文链接：https://blog.csdn.net/Chen_NC/article/details/122085534

版权

JavaScript基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Jquery选择器的优势：
1.简洁的写法
$（）函数在很多Javascript库中都被当作是一个选择器函数来使用，在Jquery中也不例外。
2.完善的处理机制
使用Jquery选择器不仅比使用传统的getElementByid()和ge't'ElementsByTagName()函数简洁得多，还能避免某些错误。

Jquery选择器的类型
Jquery可通过CSS选择器和过滤选择器两种方式选取元素：
通过CSS选择器选取元素：
基本选择器层级选择器属性选择器
通过过滤选择器选择元素
基本过滤选择器可见性过滤选择器

通过CSS选择器选取元素

基本选择器：

标签选择器：针对一类标签
ID选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
通

1、标签选择器：选择器的名字代表html页面上的标签

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。

举例：
```
<style type="text/css">
p{
    font-size:14px;
}</style>
<body>
<p>css</p>
</body>
```
再比如说，我想让“学完了安卓，继续学前端哟”这句话中的“前端”两个变为红色字体，那么我可以用<span>标签把“前端”这两个字围起来，然后给<span>标签加一个标签选择器。

代码如下：
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        span{
            color: red;
        }
    </style>
</head>
<body>
    <p>学完了安卓，继续学<span>前端</span>哟</p>
</body>
</html>
```
【总结】需要注意的是：

（1）所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。

（2）无论这个标签藏的多深，一定能够被选择上。

（3）选择的所有，而不是一个。

2、ID选择器：规定用#来定义（名字自定义）

针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以”#”来定义。

举例：
```
<head>
<title>Document</title>
<style type="text/css">
#mytitle
{
    border:3px dashed green;
}
</style>
</head>
```
然后我们在别处使用id来引用它：
```
<body>
<h2 id="mytitle">你好</h2>
</body>
```
id选择器的选择符是“#”。

任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字，可以任取，但是：

（1）只能有字母、数字、下划线。

（2）必须以字母开头。

（3）不能和标签同名。比如id不能叫做body、img、a。

（4）大小写严格区分，也就是说aa,和AA是两个不同的ID

另外，特别强调的是：HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！

一个标签可以被多个css选择器选择：
比如，我们可以同时让标签选择器和id选择器作用于同一个标签。（用到了层叠）如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> p{
font-size:40px; }
#pare2{
color: red;
} </style> </head> <body> <p>这是段落1</p>
<p id="pare2">这是段落2</p>
<p id="pare3">这是段落3</p> </body> </html>

3、类选择器：规定用圆点.来定义

针对你想要的所有标签使用。优点：灵活。

css中用.来表示类。举例如下：

<style type="text/css">
.oneclass/*定义类选择器*/{
    width:800px;
}
</style>
</head>

然后我们在别处使用class来引用它：

<body>
<h2 class="oneclass">你好</h2>
</body>

和id非常相似，任何的标签都可以携带id属性和class属性。但是id属性只能被某一特定标签引用一次

class属性的特点：

特性1：类选择器可以被多种标签使用。
特性2：同一个标签可以使用多个类选择器。用空格隔开。举例如下

<h3 class="classone  classtwo">我是一个h3啊</h3>

而不能写成：

<h3 class="teshu" class="zhongyao">我是一个h3啊</h3>

类选择器使用的举例：

类选择器的使用，能够决定一个人的css水平。

应该注意：

（1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。

（2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

如：

<style type="text/css">
        .lv{
            color: green;
        }
        .da{
            font-size: 30px;
        }
        .underline{
            text-decoration: underline;
        }
    </style>

然后让每个标签去选取自己想要用的类选择器：

  <p class="lv da">段落1</p>
    <p class="lv xian">段落2</p>
    <p class="da xian">段落3</p>

问题：到底用id还是用class？

答案：尽可能的用class，除非极特殊的情况可以用id。

原因：id是js用的。也就是说，js要通过id属性得到标签，所以css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。

注: 当css和js都在用同一个id，会出现不好沟通的情况。

我们记住这句话：类上样式，id上行为。意思是说，class属性交给css使用，id属性交给js使用。

上面这三种选择器的区别：

标签选择器针对的是页面上的一类标签。
ID选择器是只针对特定的标签(一个)，ID是此标签在此页面上的唯一标识。
类选择器可以被多种标签使用。

4、通配符*：

匹配任何标签（引出属性选择器*[title（="..."）]{...}，匹配所有带有title标签的，a[href（="..."）][title（="..."）]{color:red}将同时有 href（="..."）和 title（="..."）属性的 HTML 超链接的文本设置为红色等）

通用选择器，将匹配任何标签。不建议使用，IE有些版本不支持，大网站增加客户端负担。

效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。

举例：

<style type="text/css">
*/*定义通用选择器*，希望所有标签的上边距和左边距都为0*/{
    margin-left:0px;
    margin-top:0px;
}
</style>

后面就不需要进行引用了以上就可以起到”通配“的效果了。

层级选择器：

层次选择器，就是通过元素之间的层次关系来选择元素的一种基础选择器。层次选择器在实际开发中也是相当重要的。常见的层次关系包括：父子、后代、兄弟、相邻。

在 jQuery 中，层次选择器共有 4 种，如表 1 所示。

**表 1：jQuery 层次选择器**
选择器	说明
M N	后代选择器，选择 M 元素内部的后代N元素（所有 N 元素）
M>N	子选择器，选择 M 元素内部的子代N元素（所有第 1 级 N 元素）
M~N	同辈元素选择器，选择 M 元素后面所有的同级 N 元素
M + N	相邻元素选择器，选择 M 元素相邻的（下一个）元素（M、N 是同级元素）

此外，我们还需要注意以下 4 点：

$("M N") 可以使用 $(M).find(N) 代替；
$("M>N") 可以使用 $(M).children(N) 代替；
$("M~N") 可以使用 $(M).nextAll(N) 代替；
$("M+N") 可以使用 $(M).next(N) 代替。

后代选择器

后代选择器，用于选择元素内部的所有某一种元素，包括子元素和其他后代元素。

语法：

$("M N")

“M元素”和“N元素”之间用空格隔开，表示选中 M 元素内部的后代 N 元素（即所有 N 元素）。

子选择器

子选择器，用于选中元素内部的某一种子元素。子选择器与后代选择器虽然很相似，但是也有着明显的区别。

后代选择器，选取的是元素内部所有的元素（包括子元素、孙元素等）；
子选择器，选取的是元素内部的某一种子元素（只限子元素）。

语法：

$("M>N")

“M 元素”和“N 元素”之间使用>选择符，表示选中 M 元素内部的子元素 N。

相邻元素选择器

相邻元素选择器，用于选中元素后面（不包括前面）的某一个“相邻”的兄弟元素。相邻选择器与兄弟选择器也非常相似，不过也有明显的区别。

同辈元素选择器选取元素后面“所有”的某一类元素；
相邻元素选择器选取元素后面“相邻”的某一个元素。

语法：

$("M+N")

“M 元素”和“N 元素”之间使用+选择符，表示选中 M 元素后面的相邻的兄弟元素 N。

同辈元素选择器

同辈元素选择器，用于选中元素后面（不包括前面）的某一类兄弟元素。

语法：

$("M~N")

“M 元素”和“N 元素”之间使用~选择符，表示选中 M 元素后面所有的兄弟元素 N。

属性选择器：

语法

[attr]

表示带有以 attr 命名的属性的元素。

[attr=value]

表示带有以 attr 命名的属性，且属性值为 value 的元素。

[attr!=value]

表示不带有以 attr 命名的属性，且属性值为 value 的元素。

[attr^=value]

表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。

[attr$=value]

表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。

[attr*=value]

表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。

通过条件过滤选取元素

过滤选择器主要通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类语法相同，即选择器都以一个冒号(:)开头，冒号前是需要过滤的元素。
按照不同的过滤条件，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
注:有颜色的常用选择器。

基本过滤选择器主要有以下几种：

:first：选取第一个元素（单个元素）
:last：选取最后一个元素（单个元素）
:not(selector)：去除所有与给定选择器匹配的元素（元素集合）
:even：选取索引是偶数的所有元素，索引从0开始（元素集合）
:odd：选取索引是奇数的所有元素，索引从0开始（元素集合）
:eq（index）：选取索引等于index的元素（单个元素）
:gt(index)：选取索引大于index的元素（元素集合）
:lt(index)：选取索引小于index的元素（元素集合）
:header：选取所有的标题元素（元素集合）
:animated：选取当前正在执行动画的所有元素（元素集合）
:focus：选取当前获得焦点的元素（元素集合）

可见性过滤选择器
可见性过滤选择器是指根据元素的可见性来筛选元素的选择器。

选择器   描述   返回
:hidden   选取所有的不可见元素，或者ytpe为hidden的元素   jQuery对象数组
:visible   选取所有的可见元素   jQuery对象数组
其中，:hidden选择器用于选取所有不可见元素，包括< input type=“hidden” />、< div style=“display:none”; >等形式的不可见元素。

Chen_NC

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery选择器

Jquery选择器的优势：1.简洁的写法$（）函数在很多Javascript库中都被当作是一个选择器函数来使用，在Jquery中也不例外。2.完善的处理机制使用Jquery选择器不仅比使用传统的getElementByid()和ge't'ElementsByTagName()函数简洁得多，还能避免某些错误。Jquery选择器的类型Jquery可通过CSS选择器和过滤选择器两种方式选取元素：通过CSS选择器选取元素：基本选择器层级选择器属性选择器通过过滤选择...
复制链接

扫一扫

专栏目录