jQuery选择器是什么？
丽兹 卡潘jQuery选择器
jQuery选择器详解？
⽤于定位页⾯元素，源于CSS，由于做了扩展，其功能⽐ CSS 选择器更强⼤；且jQuery中的选择器性能要⽐DOM更好。Query的选择器是将⼯⼚函数作为容器：
var element =$(lector);
lector: 作为参数，表⽰jQuery的选择器。
返回值： jQuery的⼯⼚函数会返回⼀个jQuery对象.
1.基本选择器
选择器描述
ID选择器根据给定的ID匹配⼀个元素
元素选择器根据给定的元素名称匹配元素
类选择器根据给定的css类名匹配元素fdaf
通配符选择器匹配所有元素
组合选择器将每⼀个选择器匹配到的元素合并后⼀起返回
注意： 由于jQuery对象是类数组对象，即使匹配的元素只有⼀个，返回的结果依旧是类数组对象。
代码测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta chart="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/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'));to是什么意思
//5.组合选择器 - 多个选择器之间没有任何分割（交集）
console.log($('#d2.cls'));
</script>
</body>
</html>
2.层级选择器
选择器描述
后代选择器根据给定的祖先元素下匹配所有的后代元素
⼦选择器根据给定的⽗元素下匹配所有的⼦元素相邻兄弟选择器根据给定的⽬标元素匹配下⼀个相邻兄弟元素
普通兄弟选择器根据给定的⽬标元素匹配后⾯所有兄弟元素
注意： 由于jQuery对象是类数组对象，即使匹配的元素只有⼀个，返回的结果依旧是嘞数组对象。
代码测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta chart="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/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.基本过滤选择器
从多个元素中过滤出要选择的元素。
apod选择器描述
:first过滤选择器获取第⼀个元素
:last过滤选择器获取最后⼀个元素
:even过滤选择器匹配所有索引值为偶数的元素，从О开始计数
:odd过滤选择器匹配所有索引值为奇数的元素，从О开始计数
:eq()过滤选择器匹配⼀个给定索引值的元素选择器描述
:gt()过滤选择器匹配所有⼤于给定索引值的元素
:lt()过滤选择器匹配所有⼩于给定索引值的元素
:not()过滤选择器去除所有与给定选择器匹配的元素
:header过滤选择器匹配如 h1, h2, h3之类的标题元素hollande
:animated过滤选择器匹配所有正在执⾏动画效果的元素注意： 由于jQuery对象是类数组对象，即使匹配的元素只有⼀个，返回的结果依旧是嘞数组对象。
代码测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta chart="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/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(){
nancy travis
$('#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 chart="UTF-8">
耳环的英文<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/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对象是类数组对象，即使匹配的元素只有⼀个，返回的结果依旧是类数组对象。
代码测试：
