【jQuery01】jQuery选择器
本文将从“基本选择器”、“层次选择器”、“表单选择器”、“过滤选择器”四个方面来介绍jQuery选择器
基本选择器
1. ("#id") 选择一个具有给定id属性的单个元素 ，例如：
<script type="text/javascript">
$(document).ready(function() {
$("#demo").css({
"width": "100px",
"height": "100px",
"background-color": "red"
});
});
</script>
2. (".class") 选择给定样式类名的所有元素 ，例如：
<script type="text/javascript">
$(document).ready(function() {
$(".demo").css({
"width": "100px",
"height": "100px",
"background-color": "red"
});
});
</script>
3. (“element”) 根据HTML标记名称选择所有元素 ，例如：
<script type="text/javascript">
$(document).ready(function() {
$("div").css({
"width": "100px",
"height": "100px",
"background-color": "red"
});
});
</script>
4. ("") 选择所有元素 ，例如：*
<script type="text/javascript">
$(document).ready(function() {
$("*").css({
"width": "100px",
"height": "100px",
"background-color": "red"
});
});
</script>
警告：除非被它自己使用，否则 * 选择器的速度是极其慢的。
5. (“selector1, selector2, selectorN”) 将每一个选择器匹配到的元素合并后一起返回 ，例如：
<script type="text/javascript">
$(document).ready(function() {
$("div, a, p").css({
"width": "100px",
"height": "100px",
"background-color": "red"
});
});
</script>
层次选择器
1. (“祖先元素 后代元素”) 选中给定祖先元素中的所有后代元素，后代元素可能是该元素的一个孩子、孙子、曾孙等 。例如：
<script type="text/javascript">
$(document).ready(function() {
$(".demo a").css({ // 选择类名为demo的元素的所有后代a元素，并设置字体大小
"font-size": "30px"
});
});
</script>
2. (“祖先元素 > 后代元素”) 选择所有指定父元素中指定的直接子元素，例如：
<script type="text/javascript">
$(document).ready(function() {
$(".demo>a").css({ // 选择类名为demo的元素直接子元素a，并设置字体大小
"font-size": "30px"
});
});
</script>
3. (“prev + next”) prev 和 next是两个同级别的元素，选择在prev元素后边的next元素 ，例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<div class="demo">
<div class="demo">shiyanlou</div>
<a href="http://www.shiyanlou.com/">SHIYANLOU</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".demo+a").css({
"font-size": "30px"
});
});
</script>
</body>
</html>
4. (“prev ~ siblings”) 匹配prev元素之后的所有兄弟元素。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<div class="demo">demo</div>
<a href="http://www.shiyanlou.com/">shiyanlou</a>
<a href="http://www.shiyanlou.com/">SHIYANLOU</a>
<script type="text/javascript">
$(document).ready(function() {
$(".demo~a").css({
"font-size": "30px"
});
});
</script>
</body>
</html>
注意：prev+next 和 prev~siblings 之间的区别是他们各自可及的范围，前者只能到达紧随的同级元素，后者可以扩展达到其所有的同级元素。
**在层次选择器中，第一个和第二个是比较常用的，而后面两个有更简单的方法来代替 **
比如：
· 可以使用next()方法来代替(".one + div); 和 (“prex ~ next”)选择器，比如$("#prev ~ div); 和 $("#prev").nextAll(“div”);是等价的
表单选择器
/*
:input 选取所有的 <input> 、<textarea>、<select>和 <button>元素。
:text 选取所有的单行文本框。
:password 选取所有的密码框
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:image 选取所有的图像
:reset 选取所有的重置按钮
:button 选取所有的按钮
:file 选取所有的上传域
:hidden 选取所有不可见元素
*/
过滤选择器
***基本过滤选择器 ***
:animated Selector 选择所有正在执行动画效果的元素.
:eq() Selector 在匹配的集合中选择索引值为 index 的元素。
:even Selector 选择索引值为偶数的元素，从 0 开始计数。 也可以查看 odd.
:first Selector 选择第一个匹配的元素。
:focus Selector 选择当前获取焦点的元素。
:gt() Selector 选择匹配集合中所有大于给定 index（索引值）的元素。
:header Selector 选择所有标题元素，像 h1, h2, h3 等.
:lang() Selector 选择指定语言的所有元素。
:last Selector 选择最后一个匹配的元素。
:lt() Selector 选择匹配集合中所有索引值小于给定 index 参数的元素。
:not() Selector 选择所有元素去除不匹配给定的选择器的元素。
:odd Selector 选择索引值为奇数元素，从 0 开始计数。同样查看偶数 even.
:root Selector 选择该文档的根元素。
:target Selector 选择由文档 URI 的格式化识别码表示的目标元素。
***内容过滤选择器 ***
:contains() Selector 选择所有包含指定文本的元素。
:empty Selector 选择所有没有子元素的元素（包括文本节点）。
:has() Selector 选择元素其中至少包含指定选择器匹配的一个种元素。
:parent Selector 选择所有含有子元素或者文本的父级元素。
***可见性过滤选择器 ***
:hidden Selector 选择所有隐藏的元素。
:visible Selector 选择所有可见的元素。
***属性过滤选择器 ***
Attribute Contains Prefix Selector [name|=“value”] 选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素。
Attribute Contains Selector [name*=“value”] 选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）
Attribute Contains Word Selector [name~=“value”] 选择指定属性用空格分隔的值中包含一个给定值的元素。
Attribute Ends With Selector [name$=“value”] 选择指定属性是以给定值结尾的元素。这个比较是区分大小写的。
Attribute Equals Selector [name=“value”] 选择指定属性是给定值的元素。
Attribute Not Equal Selector [name!=“value”] 选择不存在指定属性，或者指定的属性值不等于给定值的元素。
Attribute Starts With Selector [name^=“value”] 选择指定属性是以给定字符串开始的元素
Has Attribute Selector [name] 选择所有具有指定属性的元素，该属性可以是任何值。
Multiple Attribute Selector [name=“value”][name2=“value2”] 选择匹配所有指定的属性筛选器的元素
***子元素过滤选择器 ***
:first-child Selector 选择所有父级元素下的第一个子元素。
:first-of-type Selector 选择所有相同的元素名称的第一个兄弟元素。
:last-child Selector 选择所有父级元素下的最后一个子元素。
:last-of-type Selector 选择的所有元素之间具有相同元素名称的最后一个兄弟元素。
:nth-child() Selector 选择的他们所有父元素的第 n 个子元素。
:nth-last-child() Selector 选择所有他们父元素的第 n 个子元素。计数从最后一个元素开始到第一个。
:nth-last-of-type() Selector 选择的所有他们的父级元素的第 n 个子元素，计数从最后一个元素到第一个。
:nth-of-type() Selector 选择同属于一个父元素之下，并且标签名相同的子元素中的第 n 个。
:only-child Selector 如果某个元素是其父元素的唯一子元素，那么它就会被选中。
:only-of-type Selector 选择所有没有兄弟元素，且具有相同的元素名称的元素。
***表单对象过滤选择器 ***
:enabled Selector 选择所有可用的（注：未被禁用的元素）元素。
:disabled Selector 选择所有被禁用的元素。
:checked Selector 匹配所有勾选的元素。
:selected Selector 获取 select 元素中所有被选中的元素。
