${"div.d1")
2️⃣3.5、组合选择器
$("#id, .className, tagName")
2️⃣3.6、所有元素选择器
$("*")
2️⃣3.7、层级选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
2️⃣3.8、属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
2️⃣3.9、CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
$("p").css("background-color","red");
1️⃣四、jQuery筛选器
2️⃣4.1、基本筛选器
$(":has(元素选择器)") | 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
举几个栗子：
1、找到后代中含有h1标签的div标签
>>>$("div:has(h1)")
2、找到所有后代中不含a标签的div标签
>>>$("div:not(:has(a))")
2️⃣4.2、表单筛选器
·
当我们要取到checkbox类型的input标签：
我们可以用上面学过的方法：
$("input[type='checkbox']")
但是这种方法还是书写比较麻烦，不太符合jQuery的“Write less, do more.“
所以可以简化成如下代码：
$(":checkbox")
常用的表单筛选器还有如下：
:button 匹配所有按钮。例如：$(":button")
·:checkbox 匹配所有复选框。例如：$(":checkbox")
·:file 匹配所有文件域。例如：$(":File")
·:hidden 匹配所有不可见元素，或者type为hidden的元素。例如：$("input:hidden")
·:image 匹配所有图像域。例如：$(":image")
·:input 匹配所有 input, textarea, select 和 button 元素。例如：$(":input")
·:password 匹配所有密码框。例如：$(":password")
·:radio 匹配所有单选按钮。例如：$(":radio")
·:reset 匹配所有重置按钮。例如：$(":reset")
·:submit 匹配所有提交按钮。例如：$(":submit")
·:text 匹配所有的单行文本框。例如：$(":text")
·:header 匹配如 h1, h2, h3之类的标题元素。例如：$(":header").css("background", "#EEE");
常见的表单对象属性还有：
2️⃣4.3、筛选器的常用方法
3️⃣4.3.1、上一个元素
$("#id").prev() 找到对应id值的上一个元素
$("#id").prevAll() 找到对应id值上面的所有元素
$("#id").prevUntil("#i2") 找到对应id值上面的所有元素直到id值为i2（不包括i2本身）
3️⃣4.3.2、下一个元素
$("#id").next() 解释同上
$("#id").nextAll()
$("#id").nextUntil("#i2")
3️⃣4.3.3、父亲元素
$("#id").parent()
$("#id").parents() 查找当前元素的所有的父辈元素
$("#id").parentsUntil("#i2") 查找当前元素的所有的父辈元素，直到遇到id为i2为止（不包括i2本身）。
3️⃣4.3.4、儿子和兄弟元素
$("#id").children(); 儿子们
$("#id").siblings(); 兄弟们
3️⃣4.3.5、查找
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
例如：查找div标签下的p标签（等价于 $("div p")）
$("div").find("p")
3️⃣4.3.6、总结
这里我引用了 jQuery 参考手册 - DOM 元素方法 (w3school.com.cn)来进行详细总结和补充
这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。
| 方法 | 描述 |
| addClass() | 向匹配的元素添加指定的类名。 |
| after() | 在匹配的元素之后插入内容。 |
| append() | 向匹配元素集合中的每个元素结尾插入由参数指定的内容。 |
| appendTo() | 向目标结尾插入匹配元素集合中的每个元素。 |
| attr() | 设置或返回匹配元素的属性和值。 |
| before() | 在每个匹配的元素之前插入内容。 |
| clone() | 创建匹配元素集合的副本。 |
| detach() | 从 DOM 中移除匹配元素集合。 |
| empty() | 删除匹配的元素集合中所有的子节点。 |
| hasClass() | 检查匹配的元素是否拥有指定的类。 |
| html() | 设置或返回匹配的元素集合中的 HTML 内容。 |
| insertAfter() | 把匹配的元素插入到另一个指定的元素集合的后面。 |
| insertBefore() | 把匹配的元素插入到另一个指定的元素集合的前面。 |
| prepend() | 向匹配元素集合中的每个元素开头插入由参数指定的内容。 |
| prependTo() | 向目标开头插入匹配元素集合中的每个元素。 |
| remove() | 移除所有匹配的元素。 |
| removeAttr() | 从所有匹配的元素中移除指定的属性。 |
| removeClass() | 从所有匹配的元素中删除全部或者指定的类。 |
| replaceAll() | 用匹配的元素替换所有匹配到的元素。 |
| replaceWith() | 用新内容替换匹配的元素。 |
| text() | 设置或返回匹配元素的内容。 |
| toggleClass() | 从匹配的元素中添加或删除一个类。 |
| unwrap() | 移除并替换指定元素的父元素。 |
| val() | 设置或返回匹配元素的值。 |
| wrap() | 把匹配的元素用指定的内容或元素包裹起来。 |
| wrapAll() | 把所有匹配的元素用指定的内容或元素包裹起来。 |
| wrapinner() | 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。 |
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
