【JavaWeb】85：jQuery的各种选择器

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

感谢你的观看，谢谢你。

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

选择器的作用是什么？

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

刚学CSS的时候，觉得CSS选择器也太多了吧，直到今天学了jQuery选择器……

一、基本选择器

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

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

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

• js语法：js.onclick=function(){}。
• jQuery语法：jQuery.click(function(){})。

通俗一点理解就是：

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

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

为了观看更直接，将每个选择器和一个按钮绑定，通过触发点击事件完成对应的操作。

①id选择器

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

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

②类选择器

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

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

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

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

我们做一个对比：

③标签选择器

格式为：$("div")。

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

④全选选择器

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

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

二、层级选择器

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

①层级选择器：ancestor descendant

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

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

②层级选择器：parent > child

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

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

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

③层级选择器：prev+next

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

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

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

④层级选择器：prev~siblings

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

prev：上一个，规则同上。

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

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

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

三、属性选择器

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

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

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

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

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

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

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

格式为：$("div[id='oneId'][name*='twoName']")，前面是id为“oneId”的标签，后面是name属性值包含name.。

四、基本过滤选择器

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

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")选取文档中执行动画的元素。

五、表单对象属性选择器

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

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

需要达到如下效果：

①可用元素

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

②不可用元素

要求规则同①。

③多选框选中元素

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

④下拉框选中元素

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

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

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

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

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

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

其中上述两种选择器中：

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

例子都是文本框，其实按钮也是可以的。

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

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

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

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

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

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

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

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

六、总结

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

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

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

最后

谢谢你的观看。

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