选择器，自己当初想偷懒，但现在还是得学的知识点

ゞ浴缸里的玫瑰 2023-02-25 07:11 20阅读 0赞

### 目录 ###

*   *   *  
     *  一、基本选择器
     *  二、层级选择器
     *  三、属性选择器
     *  四、基本筛选器
     *  五、表单对象属性选择器
     *  六、总结
     *  最后

###  ###

今天是刘小爱自学Java的第85天。

感谢你的观看，谢谢你。

话不多说，开始今天的学习：

![format_png][]

选择器的作用是什么？

可以快速准确地定位我们所需要的标签。

刚学CSS的时候，觉得CSS选择器也太多了吧，当时就想要不不学了吧，就只学了基本选择器。

到了jQuery，还是要学各种选择器。

果然，**你现在所欠下来的，将来都得还回来**。

## 一、基本选择器 ##

初学jQuery有个非常令人苦恼的地方：时常会把jQuery语法和js语法搞混。

事实上它们之间的语法有一定的相似度，但基本都不是一样的。

就比如说点击事件(匿名函数注册)：

*  js语法：js.οnclick=function()\{\}。
 *  jQuery语法：jQuery.click(function()\{\})。

通俗一点理解就是：

*  js对象对应的是**属性**，**给属性赋值**。
 *  jQuery对象对应的是**方法**，**给方法一个参数**。

CSS中基本选择器有3种，在jQuery中比CSS还多一种，依次分析：

![format_png 1][]

为了观看更直接，将每个选择器和一个按钮绑定，通过触发点击事件完成对应的操作，语法上面就已经做了说明。

**①id选择器**

格式为：$("\#myId01")。

通过它可以操作对应id的标签。

**②类选择器**

格式为：$(".divClass")。

通过它可以操作对应类名的标签。

jQuery语法的简洁之处就是在于此：如果是使用js语法，得到的元素为一个数组，所以要使用for循环依次赋值。

事实上jQuery对象本身就是一个js数组，相当于将for循环遍历赋值这个步骤简化了。

我们做一个对比：

![format_png 2][]

**③标签选择器**

格式为：$(“div”)。

通过它可以操作对应标签名的标签，其效果和类选择器很相似。

**④全选选择器**

格式为：$("\*")。这是jQuery中多于CSS的地方。

通过它可以操作所有标签，在数据库中：“\*”也代表了查询所有元素的意思。

## 二、层级选择器 ##

层级选择器一共有4种，逐一说明：

![format_png 3][]

**①层级选择器：ancestor descendant**

格式为：$(“body div”)，选择器之间用空格隔开。

ancestor是祖先，descendant是子孙，这个的意思就是选择body标签中的所有div标签。

**②层级选择器：parent > child**

格式为：$(“body>div”)，选择器之间用大于号隔开。

parent是父母，child是子女，这个的意思就是body标签中的下一级div标签。

*  祖先是有很多代的，对应多级子标签。
 *  父母只有一代，对应下一级子标签。

![format_png 4][]

**③层级选择器：prev+next**

格式为：$("\#DivId01+div")，选择器之间用加号隔开。

prev：上一个，id选择器，id为DivId01。

next：下一个。所以是id为DivId01的下一个Div标签。

**④层级选择器：prev~siblings**

格式为：$("\#DivId01div")，选择器之间用隔开。

prev：上一个，规则同上。

siblings：兄弟姐妹的意思，但是在这里只是弟弟妹妹。

也就是id为DivId01的后面所有Div标签。

**值得注意的是**：这两种都是同级之间操作的，不涉及到它们的子标签。

## 三、属性选择器 ##

在标签中是有各种各样的属性的，比如style属性，name属性，value属性，title属性…等等。

可以通过属性查找到对应的标签。

![format_png 5][]

attribute，属性的意思，可简写为attr。因为太多了，就没有选全。

**①属性选择器：\[attribute\]**

格式为：$(“div\[name\]”)，这里也就是div标签里的name属性。

**②属性选择器：\[attribute=value\]**

格式为：$(“div\[name=‘twoName’\]”)，这里也就是div标签里的name属性值为“twoName”。

**③属性选择器：\[attribute!=value\]**

格式为：$(“div\[name!=‘twoName’\]”)，除去name值为twoName以外的所有div标签。

**④属性选择器：\[attribute^=value\]**

格式为：$(“div\[name^=‘t’\]”)，这里也就是div标签里的name属性值以“t”开头。

**⑤属性选择器：\[attribute$=value\]**

格式为：$(“div\[name$=‘e’\]”)，这里也就是div标签里的name属性值以“e”结尾。

*⑥属性选择器：\[attribute=value\]*\*

格式为：$(“div\[name\*=‘four’\]”)，这里也就是div标签里的name属性值包含‘four’。

**⑦属性选择器：\[attrSel1\]\[attrSel2\]\[attrSelN\]**

也就是多个属性选择器相结合。

格式为：$(“div\[id=‘oneId’\]\[name\*=‘Name’\]”)，前面是id选择器为“oneId”的div标签，后面是name属性值包含Name。

## 四、基本筛选器 ##

一共太多种了，就不一一说明了，说几种常见的：

![format_png 6][]

HTML中有很多个div标签，其每个标签对应一个索引，从0索引位开始。

**①过滤选择器：:first**

格式：$(“div:first”)。也就是指0索引位的div标签。

**②过滤选择器：:last**

格式：$(“div:last”)。也就是指最后一个索引位的div标签。

**③过滤选择器：:not**

格式：$(“div:not(\#oneId)”)。

\#oneId即指id为oneId的标签，前面有一个not就是表示除了该标签外其它的所有标签。

**④过滤选择器：:even**

格式：$(“div:even”)。也就是指偶数索引位的div标签。

**⑤过滤选择器：:odd**

格式：$(“div:odd”)。也就是指奇数索引位的div标签。

**⑥过滤选择器：:gt(索引位)**

格式：$(“div:gt(2)”)。也就是指索引位大于2的div标签。

**⑦过滤选择器：:lt(索引位)**

格式：$(“div:lt(2)”)。也就是指索引位小于2的div标签。

没有写全，还有：

*  :eq(索引位)，等于对应索引位的标签。
 *  :header，$(":header")选取文档中所有的标题（也就是h标签）
 *  :animated，$(":animated")选取文档中执行动画的元素。

## 五、表单对象属性选择器 ##

表单标签，前段时间专门学习过，其基本属性就不赘述了。

学几个表单对象属性，首先看一个页面：

![format_png 7][]

需要达到如下效果：

**①可用元素**

点击该按钮，能选取可用元素，同时给文本框赋值。

**②不可用元素**

要求规则同①。

**③多选框选中元素**

点击该按钮，能选取多选框中已经被选中的元素，同时将选中的值在控制台上打印。

**④下拉框选中元素**

点击该按钮，能选取下拉框中已经被选中的元素，同时将选中的值在控制台上打印。

如何达到这些要求？就需要对应的选择器了：

![format_png 8][]

**①表单对象属性选择器：可用元素**

格式：$(“input:enabled”)。即选中所有可用的input标签。

**②表单对象属性选择器：不可用元素**

格式：$(“input:disabled”)。即选中所有不可用的input标签。

其中上述两种选择器中：

使用val方法可以给对应元素赋值。

例子都是文本框，其实按钮也有可用不可用之分。

**③表单对象属性选择器：选中元素**

格式：$(“input:checked”)。即匹配所有被选中的元素 。

例子中是多选框，其实单选框，下拉框也都可以使用该选择器。

*  使用each()方法可以遍历多个元素。
 *  使用attr(“属性名”)也可以获取对应属性值。

**④表单对象属性选择器：下拉框选中元素**

格式：$(“select option:selected”)。即匹配所有被选中的元素 。

例子中是多选框，其实单选框，下拉框也都可以使用该选择器。

*  使用each()方法可以遍历多个元素。
 *  使用attr(“属性名”)也可以获取对应属性值。

## 六、总结 ##

选择器之间是可以叠加使用的。比如层级选择器中可以包含基本选择器。

jQuery中的选择器实在是太多了，通过网络查询到jQuery对应里的选择器：

![format_png 9][]

遇到不会的就可以查看下文档，讲解也很详细，还有案例分析。

## 最后 ##

谢谢你的观看。

如果可以的话，麻烦帮忙点个赞，谢谢你。

[format_png]: /images/20230209/ad40ad16500f491c9d17591393b29830.png
[format_png 1]: /images/20230209/62826060b624403f8cc310d49e640bf8.png
[format_png 2]: /images/20230209/29873d78510a4d6c967cb46d6cf8d219.png
[format_png 3]: /images/20230209/8660e5cc969940edb494b058e9d9515b.png
[format_png 4]: /images/20230209/a1adebd972bc41d3afcfc5d515fdd46f.png
[format_png 5]: /images/20230209/c16055732b654b318df1427532c424b7.png
[format_png 6]: /images/20230209/4c9c59f29a2740dbab8cbcc4cb8d4620.png
[format_png 7]: /images/20230209/7c4377cddb9f40b2b6b50c2f31823bd4.png
[format_png 8]: /images/20230209/86ff072cf42744f692ff217041cbf67c.png
[format_png 9]: /images/20230209/5b76e9794de44618a6921d374c2627b1.png