银财中国网
jQuery 选择器
创始人
2024-05-02 13:15:52
0次

1、jQuery 基础选择器

        原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。

$(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号

名称用法描述
ID选择器$("#id")获取指定ID的元素
全选选择器$("*")匹配所有元素
类选择器$(".class")获取同一类class的元素
标签选择器$("div")获取同一类标签的所有元素
并集选择器$("div,p,li")选取多个元素
交集选择器$("li.current")交集元素

2、层级选择器

层级选择器最常用的两个分别为：后代选择器和子代选择器。

名称用法描述
子代选择器$("ul>li");使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素
后代选择器$("ul li");使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

Document

我是div
我是nav div
我是p
  1. 我是ol 的
  2. 我是ol 的
  3. 我是ol 的
  4. 我是ol 的
  • 我是ul 的
  • 我是ul 的
  • 我是ul 的
  • 我是ul 的

3、隐式迭代（重要）

遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。

        简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。


Document

惊喜不，意外不
惊喜不，意外不
惊喜不，意外不
惊喜不，意外不
  • 相同的操作
  • 相同的操作
  • 相同的操作

4、jQuery 筛选选择器

语法用法描述
:first$("li:first")获取第一个li元素
:last$("li:last")获取最后一个li元素
:eq(index)$("li:eq(2)")获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd$("li:odd")获取到的li元素中，选择索引号为奇数的元素
:even$("li:even")获取到的li元素中，选择索引号为偶数的元素

Document

  • 多个里面筛选几个
  • 多个里面筛选几个
  • 多个里面筛选几个
  • 多个里面筛选几个
  • 多个里面筛选几个
  • 多个里面筛选几个
  1. 多个里面筛选几个
  2. 多个里面筛选几个
  3. 多个里面筛选几个
  4. 多个里面筛选几个
  5. 多个里面筛选几个
  6. 多个里面筛选几个

5、jQuery 筛选方法（重点）

语法用法说明
parent()$("li").parent();查找父级
children(selector)$("ul").children("li")相当于$("ul>li")，最近一级（亲儿子）
find(selector)$("ul").find("li");相当于$("ul li")，后代选择器
siblings(selector)$(".first").siblings("li");查找兄弟节点，不包括自己本身
nextAll([expr])$(".first").nextAll()查找当前元素之后所有的同辈元素
prevAll([expr])$(".last").prevAll()查找当前元素之前所有的同辈元素
hasClass(class)$("div").hasClass("protected")检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)$("li").eq(2);相当于$("li:eq(2)")，index从0开始

Document

儿子
我是屁
我是p



Document



Document

  1. 我是ol 的li
  2. 我是ol 的li
  3. 我是ol 的li
  4. 我是ol 的li
  5. 我是ol 的li
  6. 我是ol 的li
  • 我是ol 的li
  • 我是ol 的li
  • 我是ol 的li
  • 我是ol 的li
  • 我是ol 的li
  • 我是ol 的li
俺有current
俺木有current

6、jQuery 里面的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。


Document

7、案例：淘宝服饰精品案例分析

思路分析:

  1. 核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。
  2. 需要得到当前小li 的索引号，就可以显示对应索引号的图片
  3. jQuery 得到当前元素索引号 $(this).index()
  4. 中间对应的图片，可以通过 eq(index) 方法去选择
  5. 显示元素 show() 隐藏元素 hide()
词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：MySQL常见内置函数及其使用

下一篇：Android进阶 之 SPI机制及实现原理

相关内容

热门资讯

喜欢穿一身黑的男生性格（喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识，其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
发春是什么意思（思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思，以及思春和发春是什么意思对应的知识点，希望对各位有所帮助，...
网络用语zl是什么意思（zl是... 今天给各位分享网络用语zl是什么意思的知识，其中也会对zl是啥意思是什么网络用语进行解释，如果能碰巧...
为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?，以及为什么酷狗下载的歌曲不是...
家里可以做假山养金鱼吗（假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识，其中也会对假山能放鱼缸里吗进行解释，如果能碰巧解...
华为下载未安装的文件去哪找（华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识，其中也会对华为下载未安装的文件去哪找到进行解...
四分五裂是什么生肖什么动物（四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物，以及四分五裂打一生肖是什么对应的知识点，希...
怎么往应用助手里添加应用（应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识，其中也会对应用助手怎么添加微信进行解释，如果能...
客厅放八骏马摆件可以吗（家里摆... 今天给各位分享客厅放八骏马摆件可以吗的知识，其中也会对家里摆八骏马摆件好吗进行解释，如果能碰巧解决你...
苏州离哪个飞机场近（苏州离哪个... 本篇文章极速百科小编给大家谈谈苏州离哪个飞机场近，以及苏州离哪个飞机场近点对应的知识点，希望对各位有...