小知识,大挑战!本文正在参与“ 程序员必备小知识 ”创作活动
作者的其他平台:
| CSDN:blog.csdn.net/qq_4115394…
| 知乎:www.zhihu.com/people/1024…
| GitHub:github.com/JiangXia-10…
| 公众号:1024笔记
本文大概5816字,读完共需17分钟
1 前言
都说不会前端的测试不是一个好的后端开发。最近维护一个老的项目,其中的前端代码使用到了JQuery,由于自己以前对前端的了解并不是很多,没有系统的学习,都是遇到了问题才学习一下, 所以这次对Jquery进行了一次学习。
jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,能够大大提高开发效率。js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里即可。而使用jQuery较多的就是进行DOM操作,其中就涉及到了选择器的使用。
所以这篇文章就整理一下,JQuery中关于选择器的使用。
2 什么是jQuery选择器
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 来写,保持其他的代码不变,
<!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>
上面的("div")就是通过element选择器来获取标签元素。
JQuery的选择器基本可以分为以下九种:
-
基本选择器
-
层次选择器
-
基本过滤选择器
-
内容过滤选择器
-
可见性过滤选择器
-
属性过滤选择器
-
子元素过滤选择器
-
表单对象属性过滤选择器
-
表单选择器
接下来对这九种选择器一一进行说明。
3 选择器详解
一、基本选择器
1、ID选择器
栗子:获取所有id为demo1的元素
$('#demo1')
2、Element选择器
栗子:获取所有button的元素
$("button")
3、Class选择器
栗子:获取所有class为demo2的元素
$(".demo2")
注:Class和ID的区别在于id使用的符号是"#",而class使用的是"."。
4、*选择器
*表示遍历所有的元素,一般适用于结合上下文的搜索匹配,栗子:遍历获取demo3元素下所有元素:
$("demo3 *")
5、并列选择器
并列选择器又叫多选择器。栗子:获取所有的input元素、或id="demo4"的元素、或class="demo5"元素
$("input, #demo4, .demo5")
二、层次选择器
1、Parent>Child
直系子元素,匹配parent下第一层的子元素。栗子:id为list元素(父元素)里的第一代div元素(子元素):
$("#list > div")
2、Prev + next
当前元素的下一兄弟元素。栗子:class="item"元素的下一个div兄弟元素:
$(".item + div")
等同于next()方法,也可以写成:
$(".item").next("div")
3、Prev ~ Sibling
当前元素后面的所有的兄弟元素。栗子:class="item"元素之后的所有div兄弟元素:
$(".item ~ div")
等同于nextAll()方法,也可以写成:
$(".item").nextAll("div")
4、ancestor descendant
当前元素的所有的子元素,。栗子:id为list元素里所有的div元素:
$("#list div")
三、基本过滤选择器
1、:first 和 :last
获取第一个或最后一个元素。栗子:获取第一个button元素
$("button:first")
栗子:获取最后一个input元素:
$("input:last")
2、:not
获取非元素。栗子:获取class不为demo的div元素
$("div:not(.demo)")
3、eq(x)
获取指定索引的元素。栗子:获取tr标签的第3行:
$("tr:eq(2)")
4、:even 和:odd
获取偶数或者奇数索引元素(下标从0开始),even为偶数;odd为奇数。栗子:获取tr标签下所有的偶数或奇数行
$("tr:even")
$("tr:odd")
5、:gt(x) 和 :lt(x)
获取大于x索引或者小于x索引的元素。栗子:获取tr标签下第三行之前或第三行之后的元素:
$("tr:gt(2)")//第三行之前所有行
$("tr:lt(2)")//第三行之后所有行
6、:header
获取所有标题元素元素(h1-h6标题)。栗子:
$(":header")
四、表单选择器
1、:input
获取input元素。栗子:获取所有的input元素
$(":input")
2、:text
获取text单行文本框元素。栗子:获取所有的text单行文本输入框元素
$(":text")
如果使用input,可以写成:
$("input[type=text]")
3、:password
获取密码框元素。栗子:获取所有的密码输入框元素
$(":password")
如果使用input,可以写成:
$("input[type=password]")
4、:radio
获取单选框元素。栗子:获取所有的单选框元素
$(":radio")
如果使用input,可以写成:
$("input[type=radio]")
5、:checkbox
获取所有的复选框元素。栗子:获取所有的复选框框元素
$(":checkbox")
如果使用input,可以写成:
$("input[type=checkbox]")
6、:image
获取图像按钮元素。栗子:获取所有的图像按钮元素
$(":image")
如果使用input,可以写成:
$("input[type=image]")
7、:submit
获取所有的提交按钮元素。栗子:获取所有的提交按钮元素
$(":submit")
如果使用input,可以写成:
$("input[type=submit]")
8、:reset
获取所有的重置按钮元素。栗子:
$(":reset")
如果使用input,可以写成:
$("input[type=reset]")
9、:button
获取所有的按钮元素。栗子:
$(":button")
如果使用input,可以写成:
$("input[type=button]")
10、:file
获取所有的上传控件元素。栗子:
$(":file")
如果使用input,可以写成:
$("input[type=file]")
五、表单对象属性过滤选择器
1、:enable
获取所有激活的 input 元素。栗子:
$(":enabled")
2、:disabled
获取所有禁用的 input 元素。栗子:
$(":disabled")
3、:selected
获取所有被选取的 input 元素。:selected 选择器选取被选择的 元素。栗子:
$(":selected")
4、:checked
获取所有被选中的 input 元素,:checked选择器选取所有选中的复选框或单选按钮。栗子:
$(":checked")
六、可见性过滤选择器
1、:hidden
:hidden选择器选取每个当前是隐藏的元素。栗子:
$(":hidden")
注:以下几种情况的元素是隐藏元素:
-
设置为 display:none
-
带有 type="hidden" 的表单元素
-
隐藏的父元素(这也会隐藏子元素)
该选择器对 visibility:hidden 和 opacity: 0 的元素不起作用。
2、:visible
:visible 选择器选取每个当前是可见的元素。栗子:
$(":visible ")
注:除以下几种情况之外的元素即是可见元素:
-
设置为 display:none
-
type="hidden" 的表单元素
-
Width 和 height 设置为 0
-
隐藏的父元素(同时隐藏所有子元素)
七、内容过滤选择器
1、:contains(text)
获取包含指定字符串的所有元素。栗子:
$(":contains('1024笔记')")
2、:empty
获取不包含子元素或文本为空的元素。栗子:获取所有没有子元素,或者内容文本为空的div元素。
$('div:empty')
3、:parent
选取包含子元素或文本的元素,与:empty相反。栗子:选取所有带有子元素或包含文本的 元素:
$("td:parent")
4、:has
选取指定子元素的元素。栗子:选取所有包含有 元素在其内的
元素:
$("p:has(span)")
八、属性过滤选择器
1、[attribute]
获取拥有attribute属性的所有元素。栗子:获取所有拥有title属性的a标签
$("a[title]")
2、[attribute=value]和[attribute!=value]
获取attribute属性等于或不等于value的所有元素。栗子:获取所有拥有title属性的值等于/不等于1024笔记的a标签
$("a[title="1024笔记"]")
$("a[title!="1024笔记"]")
3、[attribute^=value],[attribute$=value]和[attribute*=value]
获取attribute属性以value开始或以value结束或包含value的所有元素。栗子:
$('a[title^="1024笔记"]')
$('a[title$="1024笔记"]')
$('a[title*="1024笔记"]')
4、[selector1][selector2]
复合型属性过滤器,获取同时满足多个条件的元素。栗子:获取所有title以1024笔记开头,且class="demo"的a标签
$('a[title^="1024笔记"][class="demo"]')
九、子元素过滤选择器
1、:first-child 和 :last-child
获取第一个或最后一个子元素合并后的元素集合。栗子:
$('div:first-child')
$('div:last-child')
注: :fisrst 和 :last 返回的都是单个元素,而 :first-child 和 :last-child 返回的都是集合元素。比如 div:first 返回的是整个 DOM 文档中第一个 div 元素,而 div:first-child 是返回所有每个 div 元素下的第一个元素合并后的集合。
2、:only-child
获取当某个元素有且仅有一个子元素。栗子:
$('div:only-child')
3、:nth-child(x)
获取第N个子元素。栗子:
$('div:nth-child(1)')
**注:**除了 :nth-child(x),还有 :nth-child(even) 和 :nth-child(odd)。
$('tr:nth-child(even)')
$('tr:nth-child(odd)')
4 结尾
以上就是就是Jquery关于选择器的使用。个人对前端知识掌握有限,如有错误和问题,欢迎交流讨论。
最后如果觉得本文写得不错,就点下赞和再看推荐给更多的人呗。
以下是jQuery的一些相关网站:
-
官网:jquery.com/
-
官网API文档:api.jquery.com/
-
汉化API文档:www.css88.com/jqapi-1.9/
今日推荐