jQuery选择器详解?
用于定位页面元素,源于CSS,由于做了扩展,其功能比 CSS 选择器更强大;且jQuery中的选择器性能要比DOM更好。
Query的选择器是将工厂函数作为容器:
var element = $(selector);
-
selector: 作为参数,表示jQuery的选择器。
-
返回值: jQuery的工厂函数会返回一个jQuery对象.
1.基本选择器
选择器 | 描述 |
---|---|
ID选择器 | 根据给定的ID匹配一个元素 |
元素选择器 | 根据给定的元素名称匹配元素 |
类选择器 | 根据给定的css类名匹配元素 |
通配符选择器 | 匹配所有元素 |
组合选择器 | 将每一个选择器匹配到的元素合并后一起返回 |
注意: 由于jQuery对象是类数组对象,即使匹配的元素只有一个,返回的结果依旧是类数组对象。
代码测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="d1">玛卡巴卡</div>
<div class="cls">吾西迪西</div>
<script>
//1.ID选择器
console.log($('#d1'));//选择id为d1的div
//2.元素选择器
console.log($('div'));//选择所有div
//3.类选择器
console.log($('.cls'));//选择class为cls的div
//4.通配符选择器
console.log($('*'));// 匹配符选择器 - 匹配所有
//5.组合选择器 - 多个选择器之间使用逗号隔开(并集)
console.log($('#d1','.cls'));
//5.组合选择器 - 多个选择器之间没有任何分割(交集)
console.log($('#d2.cls'));
</script>
</body>
</html>
2.层级选择器
选择器 | 描述 |
---|---|
后代选择器 | 根据给定的祖先元素下匹配所有的后代元素 |
子选择器 | 根据给定的父元素下匹配所有的子元素 |
相邻兄弟选择器 | 根据给定的目标元素匹配下一个相邻兄弟元素 |
普通兄弟选择器 | 根据给定的目标元素匹配后面所有兄弟元素 |
注意: 由于jQuery对象是类数组对象,即使匹配的元素只有一个,返回的结果依旧是嘞数组对象。
代码测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="father">
<div id="sun1">
<div id="a6"></div>
<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>
<div id="a4"></div>
<div id="a5"></div>
</div>
<div id="sun2">
<div id="a3"></div>
</div>
</div>
<script>
//1.后代选择器
console.log($('#father div'));//sun1,a1,a2,a3,a4,a5,a6,sun2
//2.子级选择器
console.log($('#father>div'));//sun1,sun2
//3.相邻兄弟选择器 - 指定元素的下一个相邻兄弟元素
console.log($('#a1+div'));//a2
//4.普通兄弟选择器 - 指定元素的后面所有的兄弟元素
console.log($('#a1~div'));//a2,a3,a4,a5
//5.全部兄弟选择 - siblings()方法 - 获取指定元素所有的兄弟元素(全面+后面)
console.log($('#a1').siblings('div'));//a2,a3,a4,a5,a6
</script>
</body>
</html>
3.基本过滤选择器
从多个元素中过滤出要选择的元素。
选择器 | 描述 |
---|---|
:first过滤选择器 | 获取第一个元素 |
:last过滤选择器 | 获取最后一个元素 |
:even过滤选择器 | 匹配所有索引值为偶数的元素,从О开始计数 |
:odd过滤选择器 | 匹配所有索引值为奇数的元素,从О开始计数 |
:eq()过滤选择器 | 匹配一个给定索引值的元素 |
:gt()过滤选择器 | 匹配所有大于给定索引值的元素 |
:lt()过滤选择器 | 匹配所有小于给定索引值的元素 |
:not()过滤选择器 | 去除所有与给定选择器匹配的元素 |
:header过滤选择器 | 匹配如 h1, h2, h3之类的标题元素 |
:animated过滤选择器 | 匹配所有正在执行动画效果的元素 |
注意: 由于jQuery对象是类数组对象,即使匹配的元素只有一个,返回的结果依旧是嘞数组对象。
代码测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
<style>
#animal{
width: 100px;
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<h2>这是标题</h2>
<div>玛卡巴卡</div>
<div id="d2">
<div id="child"></div>
</div>
<div></div>
<div></div>
<div>吾西迪西</div>
<div id="animal"></div>
<script>
//1.:first选择器与:last选择器 - 在指定范围匹配的元素中进行筛选
console.log($('div:first'));
console.log($('div:last'));
//2.偶数选择器 -> 过滤掉偶数,剩下为奇数
console.log($('div:even'));
//3.奇数选择器 -> 过滤掉奇数,剩下为偶数
console.log($('div:odd'));
//4.:eq(index) -> index表示索引值
console.log($('div:eq(0)'));//等于
console.log($('div:gt(0)'));//大于
console.log($('div:lt(0)'));//小于
//5.:header -> 匹配h1至h6元素
console.log($(':header'));
//设置一个动画
function animal(){
$('#animal').slideToggle(animal);
}
//调用动画
animal();
//6.:animated - > 只能匹配有jquery实现的动画
console.log($(':animated'));
//3.:not() - 去除not内的元素,返回非not内元素。
console.log($("div:not('#child')"));
</script>
</body>
</html>
4.内容过滤选择器
选择器 | 描述 |
---|---|
:contains()过滤选择器 | 匹配包含给定文本的元素 |
:empty过滤选择器 | 匹配所有不包含子元素或者文本的空元素 |
:parent过滤选择器 | 匹配含有子元素或者文本的元素 |
:has()过滤器 | 匹配含有选择器所匹配的元素的父级元素 |
注意: 由于jQuery对象是类数组对象,即使匹配的元素只有一个,返回的结果依旧是嘞数组对象。
代码测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div>这是div元素</div>
<div></div>
<div>
<div id="child"></div>
</div>
<script>
//1. :contains( ) 匹配给定元素的文本内容 - 文本内容包含di的元素。
console.log($('div:contains("di")'));
//2. :empty - 表示没有子级且没有文本内容的元素
console.log($('div:empty'));
//3. :parent - 匹配含有子元素或者文本的元素
console.log($('div:parent'));
//4. :has() - 表示包含匹配指定选择器元素的父级元素
console.log($('div:has("#child")')[0]);
</script>
</body>
</html>
5. 属性过滤选择器
选择器 | 描述 |
---|---|
[attr]过滤选择器 | 匹配包含给定属性的元素 |
[attr=value]过滤选择器 | 匹配给定的属性是某个特定值的元素 |
[attr!=value]过滤选择器 | 匹配所有不含有指定的属性,或者属性不等于特定值的元素 |
[attr^=value]过滤选择器 | 匹配给定的属性是以某些值开始的元素 |
[attr$=value]过滤选择器 | 匹配给定的属性是以某些值结尾的元素 |
[attr*=value]过滤选择器 | 匹配给定的属性是以包含某些侑的元素 |
组合属性过滤选择器 | 匹配元素需要同时满足多个属性过滤选择器 |
注意: 由于jQuery对象是类数组对象,即使匹配的元素只有一个,返回的结果依旧是类数组对象。
代码测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="username" name='d1' class="mydiv"></div>
<div id="password" name='d2' class="mycls"></div>
<div id="d3"></div>
<div class="myd"></div>
<script>
//1.[attr]过滤选择器 - 匹配包含给定属性的元素
console.log($('div[name]'));
//2. [attr=value]过滤选择器 - 匹配给定的属性是某个特定值的元素
console.log($('div[class=mydiv]'));
//3.[attr!=value]选择器 - 包含没有attr属性的元素
console.log($('div[class!=mydiv]'));
//4.[attr^=value]过滤选择器 - 匹配给定的属性是以某些值开始的元素
console.log($('div[class^=my]'));
//5.[attr$=value]过滤选择器 - 匹配给定的属性是以某些值结尾的元素
console.log($('div[class$=my]'));
//6.[attr*=value]过滤选择器 - 匹配给定的属性是以包含某些侑的元素
console.log($('div[class*=y]'));
//7.组合属性过滤选择器 - 属性过滤选择器组和用法 -> 交集
console.log($('div[name=d1][class^=my]'));
</script>
</body>
</html>
6.子元素过滤选择器
选择器 | 描述 |
---|---|
:nth-child() | 匹配器父元素下的第N个子或奇偶元素 |
:first-child() | 匹配第一个子元素 |
:last-child | 匹配最后一个子元素 |
:only-child | 如果某个元素是父元素中唯一的子元素,那将会被匹配 |
注意: 由于jQuery对象是类数组对象,即使匹配的元素只有一个,返回的结果依旧是类数组对象。
代码测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="parent">
<div id="d1">这是id为d1的div元素</div>
<div id="d2">这是id为d2的div元素</div>
<div id="d3">这是id为d3的div元素
<div id="child"></div>
</div>
</div>
<script>
//1. :first-child - 匹配第一个子元素
console.log($('div:first-child'));//返回值: 包含,#parnet(也是第一个) #d1 #child
//2. :first-last - 匹配最后一个子元素
console.log($('div:last-child'));
/*3.
:nth-child(index)
*作用 - 匹配当前元素作为第index个子元素
*注意 - index是从1开始,表示第几个
*/
console.log($('div:nth-child(1)'));
//4. :only-child - 如果某个元素是父元素中唯一的子元素,那将会被匹配
console.log($('div:only-child'));
</script>
</body>
</html>
7.表单对象属性过滤选择器
选择器 | 描述 |
---|---|
:enabled | 匹配所有可用元素 |
:disabled | 匹配所有不可用元素 |
:checked | 匹配所有选中的被选中的元素(复选框,单选框) |
:selected | 匹配所有选中的元素 |
注意: 由于jQuery对象是类数组对象,即使匹配的元素只有一个,返回的结果依旧是类数组对象。
代码测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单对象属性过滤选择器</title>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form action="#">
<input type="text" disabled>
<input type="checkbox">html
<input type="checkbox" checked>css
<select>
<option>玛卡巴卡</option>
<option selected>吾西迪西</option>
<option>汤布利布</option>
</select>
</form>
<script>
//1. :disabled - 匹配所有不可用元素
console.log($('input:disabled'));
//2. :checked - 匹配所有选中的被选中的元素(复选框,单选框)
console.log($('input:checked'));
//3. :selected - 匹配所有选中的<option>元素
console.log($('option:selected'));
//4. :enabled - 匹配所有可用元素
console.log($('input:enabled'));
</script>
</body>
</html>
8.表单选择器
选择器 | 描述 |
---|---|
:input选择器 | 匹配所有input、textarea、 select和button元素 |
:text选择器 | 匹配所有的单行文本框 |
:password选择器 | 匹配所有密码框 |
:radio选择器 | 匹配所有单选按钮 |
:checkbox选择器 | 匹配所有复选框 |
:submit选择器 | 匹配所有提交按钮 |
:image选择器 | 匹配所有图像域 |
reset选择器 | 匹配所有重置按钮 |
:button选择器 | 匹配所有按钮 |
:file选择器 | 匹配所有文件域 |
注意: 由于iQuery对象是类数组对象,即使远配的元素只有一个,返回的结果依旧是类数组对象。
代码测试: