jQuery：选择器使用详解
1
都说不会前端的测试不是一个好的后端开发。最近维护一个老的项目，其中的前端代码使用到了JQuery，由于自己以前对前端的了解并不是很多，没有系统的学习，都是遇到了问题才学习一下， 所以这次对Jquery进行了一次学习。
jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，能够大大提高开发效率。js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。而使用jQuery较多的就是进行DOM操作，其中就涉及到了选择器的使用。
所以这篇文章就整理一下，JQuery中关于选择器的使用。
2
jQuery 选择器的使用使得获得页面元素变得更加容易、更加灵活，从而大大减轻了开发人员的压力，提高开发效率，而不需要像使用原生的js一样使用 document 对象的 getElementById()，getElementsByName() 和 getElementsByTagName() 方法访问 Document中的某个标签。
首先来一个原生的js写法和Jquery的写法，体现其不一样的地方。
原生Js代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
height: 100px;
background-color: yellow;
margin: 10px;
display: none;
}
</style>
<script>
//原生js
window.onload = function () {
var btn = document.getElementsByTagName("button")[0];
var divArr = document.getElementsByTagName("div");
btn.onclick = function () {
for (var i = 0; i < divArr.length; i++) {
divArr[i].style.display = "block";
divArr[i].innerHTML = "1024笔记";
}
}
}
</script>
</head>
<body>
<button>这是一个按钮</button>
<div></div>
</body>
</html>
如果用 jQuery 来写，保持其他的代码不变， 上面的 ( " b u t t o n " ) 和 ("button")和 ("button")和(“div”)就是通过element选择器来获取标签元素。 JQuery的选择器基本可以分为以下九种： 接下来对这九种选择器一一进行说明。 栗子：获取所有id为demo1的元素 栗子：获取所有button的元素 栗子：获取所有class为demo2的元素 注：Class和ID的区别在于id使用的符号是"#"，而class使用的是"."。 *表示遍历所有的元素，一般适用于结合上下文的搜索匹配，栗子：遍历获取demo3元素下所有元素： 并列选择器又叫多选择器。栗子：获取所有的input元素、或id="demo4"的元素、或class="demo5"元素 直系子元素，匹配parent下第一层的子元素。栗子：id为list元素（父元素）里的第一代div元素（子元素）： 当前元素的下一兄弟元素。栗子：class="item"元素的下一个div兄弟元素： 等同于next（）方法，也可以写成： 当前元素后面的所有的兄弟元素。栗子：class="item"元素之后的所有div兄弟元素： 等同于nextAll（）方法，也可以写成： 当前元素的所有的子元素，。栗子：id为list元素里所有的div元素： 获取第一个或最后一个元素。栗子：获取第一个button元素 栗子：获取最后一个input元素： 获取非元素。栗子：获取class不为demo的div元素 获取指定索引的元素。栗子：获取tr标签的第3行： 获取偶数或者奇数索引元素（下标从0开始），even为偶数；odd为奇数。栗子：获取tr标签下所有的偶数或奇数行 获取大于x索引或者小于x索引的元素。栗子：获取tr标签下第三行之前或第三行之后的元素： 获取所有标题元素元素（h1-h6标题）。栗子： 获取input元素。栗子：获取所有的input元素 获取text单行文本框元素。栗子：获取所有的text单行文本输入框元素 如果使用input，可以写成： 获取密码框元素。栗子：获取所有的密码输入框元素 如果使用input，可以写成： 获取单选框元素。栗子：获取所有的单选框元素 如果使用input，可以写成： 获取所有的复选框元素。栗子：获取所有的复选框框元素 如果使用input，可以写成： 获取图像按钮元素。栗子：获取所有的图像按钮元素 如果使用input，可以写成： 获取所有的提交按钮元素。栗子：获取所有的提交按钮元素 如果使用input，可以写成： 获取所有的重置按钮元素。栗子： 如果使用input，可以写成： 获取所有的按钮元素。栗子： 如果使用input，可以写成： 获取所有的上传控件元素。栗子： 如果使用input，可以写成： 获取所有激活的 input 元素。栗子： 获取所有禁用的 input 元素。栗子： 获取所有被选取的 input 元素。:selected 选择器选取被选择的 元素。栗子： 获取所有被选中的 input 元素，:checked选择器选取所有选中的复选框或单选按钮。栗子： :hidden选择器选取每个当前是隐藏的元素。栗子： 注：以下几种情况的元素是隐藏元素： 带有 type=“hidden” 的表单元素 隐藏的父元素（这也会隐藏子元素） 该选择器对 visibility:hidden 和 opacity: 0 的元素不起作用。 :visible 选择器选取每个当前是可见的元素。栗子： 注：除以下几种情况之外的元素即是可见元素： type=“hidden” 的表单元素 Width 和 height 设置为 0 隐藏的父元素（同时隐藏所有子元素） 获取包含指定字符串的所有元素。栗子： 获取不包含子元素或文本为空的元素。栗子：获取所有没有子元素，或者内容文本为空的div元素。 选取包含子元素或文本的元素，与:empty相反。栗子：选取所有带有子元素或包含文本的 元素： 选取指定子元素的元素。栗子：选取所有包含有 元素在其内的 元素： 获取拥有attribute属性的所有元素。栗子：获取所有拥有title属性的a标签 获取attribute属性等于或不等于value的所有元素。栗子：获取所有拥有title属性的值等于/不等于1024笔记的a标签 获取attribute属性以value开始或以value结束或包含value的所有元素。栗子： 复合型属性过滤器，获取同时满足多个条件的元素。栗子：获取所有title以1024笔记开头，且class="demo"的a标签 获取第一个或最后一个子元素合并后的元素集合。栗子： 注： :fisrst 和 :last 返回的都是单个元素，而 :first-child 和 :last-child 返回的都是集合元素。比如 div:first 返回的是整个 DOM 文档中第一个 div 元素，而 div:first-child 是返回所有每个 div 元素下的第一个元素合并后的集合。 获取当某个元素有且仅有一个子元素。栗子： 获取第N个子元素。栗子： 注：除了 :nth-child(x)，还有 :nth-child(even) 和 :nth-child(odd)。 以上就是就是Jquery关于选择器的使用。个人对前端知识掌握有限，如有错误和问题，欢迎留言私信交流讨论。 官网API文档：http://api.jquery.com/ 汉化API文档：http://www.css88.com/jqapi-1.9/ SpringBoot开发Restful风格的接口实现CRUD功能 Postman接口测试图文教程 SpringBoot整合ElasticSearch实战 如何玩转Git SpringBoot整合JPA进行数据访问 以上就是关于Jquery 选择器的一些简单介绍。本文原创首发于微信公众号【1024笔记】，原文传送门！有兴趣的可以微信搜索关注，后台回复关键字即可免费获取海量的编程相关的学习资源（电子书、视频、源码、完整项目、面试宝典），涵盖java、python、c、前端、人工智能、大数据、数据分析等等，有任何问题都可以后台留言交流讨论，希望能对你有帮助。<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
height: 100px;
background-color: yellow;
margin: 10px;
display: none;
}
</style>
//需要先引入jquery
<script src="jquery-1.11.1.js"></script>
<script>
$(document).ready(function () {
//获取元素
//根据标签名获取按钮元素
var jQbtn = $("button");
//根据标签名获取div元素
var jQdiv = $("div");
//绑定事件
//事件是通过方法绑定的。
jQbtn.click(function () {
//显示div内容
jQdiv.show(1000);
//设置内容
jQdiv.html("1024笔记");
});
});
</script>
</head>
<body>
<button>这是一个按钮</button>
<div></div>
</body>
</html>
基本选择器
层次选择器
基本过滤选择器
内容过滤选择器
可见性过滤选择器
属性过滤选择器
子元素过滤选择器
表单对象属性过滤选择器
表单选择器
3
一、基本选择器
1、ID选择器
$('#demo1')
2、Element选择器
$("button")
3、Class选择器
$(".demo2")
4、*选择器
$("demo3 *")
5、并列选择器
$("input, #demo4, .demo5")
二、层次选择器
1、Parent>Child
$("#list > div")
2、Prev + next
$(".item + div")
$(".item").next("div")
3、Prev ~ Sibling
$(".item ~ div")
$(".item").nextAll("div")
4、ancestor descendant
$("#list div")
三、基本过滤选择器
1、:first 和 :last
$("button:first")
$("input:last")
2、:not
$("div:not(.demo)")
3、eq(x)
$("tr:eq(2)")
4、:even 和:odd
$("tr:even")
$("tr:odd")
5、:gt(x) 和 :lt(x)
$("tr:gt(2)")//第三行之前所有行
$("tr:lt(2)")//第三行之后所有行
6、:header
$(":header")
四、表单选择器
1、:input
$(":input")
2、:text
$(":text")
$("input[type=text]")
3、:password
$(":password")
$("input[type=password]")
4、:radio
$(":radio")
$("input[type=radio]")
5、:checkbox
$(":checkbox")
$("input[type=checkbox]")
6、:image
$(":image")
$("input[type=image]")
7、:submit
$(":submit")
$("input[type=submit]")
8、:reset
$(":reset")
$("input[type=reset]")
9、:button
$(":button")
$("input[type=button]")
10、:file
$(":file")
$("input[type=file]")
五、表单对象属性过滤选择器
1、:enable
$(":enabled")
2、:disabled
$(":disabled")
3、:selected
$(":selected")
4、:checked
$(":checked")
六、可见性过滤选择器
1、:hidden
$(":hidden")
设置为 display:none2、:visible
$(":visible ")
设置为 display:none七、内容过滤选择器
1、:contains(text)
$(":contains('1024笔记')")
2、:empty
$('div:empty')
3、:parent
$("td:parent")
4、:has
$("p:has(span)")
八、属性过滤选择器
1、[attribute]
$("a[title]")
2、[attribute=value]和[attribute！=value]
$("a[title="1024笔记"]")
$("a[title!="1024笔记"]")
3、[attribute^=value]，[attribute$=value]和[attribute*=value]
$('a[title^="1024笔记"]')
$('a[title$="1024笔记"]')
$('a[title*="1024笔记"]')
4、[selector1][selector2]
$('a[title^="1024笔记"][class="demo"]')
九、子元素过滤选择器
1、:first-child 和 :last-child
$('div:first-child')
$('div:last-child')
2、:only-child
$('div:only-child')
3、:nth-child(x)
$('div:nth-child(1)')
$('tr:nth-child(even)')
$('tr:nth-child(odd)')
最后如果觉得本文写得不错，就点下赞和再看推荐给更多的人呗。
以下是jQuery的一些相关网站：
官网：http://jquery.com/推荐文章
