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

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

感谢你的观看，谢谢你。

话很少说，开始今天的学习：

选择器的做用是什么？

能够快速准确地定位咱们所须要的标签。

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

到了jQuery，仍是要学各类选择器。

果真，你如今所欠下来的，未来都得还回来。

1、基本选择器

初学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的地方。

经过它能够操做全部标签，在数据库中：“*”也表明了查询全部元素的意思。

2、层级选择器

层级选择器一共有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标签。

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

3、属性选择器

在标签中是有各类各样的属性的，好比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$='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。

4、基本筛选器

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

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

5、表单对象属性选择器

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

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

须要达到以下效果：

①可用元素

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

②不可用元素

要求规则同①。

③多选框选中元素

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

④下拉框选中元素

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

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

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

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

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

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

其中上述两种选择器中：

使用val方法能够给对应元素赋值。

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

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

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

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

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

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

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

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

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

6、总结

选择器之间是能够叠加使用的。好比层级选择器中能够包含基本选择器。

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

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

最后

谢谢你的观看。

若是能够的话，麻烦帮忙点个赞，谢谢你。

本文使用 mdnice 排版