注：详情参考 慕课网
1.id选择器
2.类选择器
3.元素选择器
4.全选择器
5.层级选择器
6.基本筛选选择器
7.内容筛选选择器
8.可见性筛选选择器
9.属性筛选选择器
10.元素筛选选择器
11.表单元素选择器
12.表单对象属性筛选器
1.id选择器
id选择器：一个用来查找的ID，即元素的id属性
$( "#id" )
示例代码：
<script type="text/javascript">
//通过jQuery直接传入id
//id的唯一，只选择到了第一个匹配的id为imooc的div节点
$("#imooc").css("border", "3px solid red");
</script>
2.类选择器
类选择器，顾名思义，通过class样式类名来获取节点
描述：
$( ".class" )
示例代码：
<script type="text/javascript">
//通过jQuery直接传入class
//class选择器可以选择多个元素
$(".imooc").css("border", "3px solid red");
</script>
3.元素选择器
元素选择器：根据给定（html）标记名称选择所有的元素
描述：
$( "element" )
示例代码：
<script type="text/javascript">
//通过jQuery直接传入标签名p
//标签是可以多个的，所以得到的同样也是一个合集
$("p").css("border", "3px solid red");
</script>
4.全选择器
在CSS中，经常会在第一行写下这样一段样式
*{padding: 0; margin: 0;}
通配符意味着给所有的元素设置默认的边距。jQuery中我们也可以通过传递选择器来选中文档页面中的元素
描述：
$( "*" )
示例代码：
<script type="text/javascript">
//获取页面中所有的元素
var elements2 = $("*") ;
//原生与jQuery方法比较
//===表示数据和类型都相等
if(elements2.length === elements1.length){
elements2.css("border","1px solid red");
}
</script>
5.层级选择器
层级选择器
仔细观察层级选择器之间还是有很多相似与不同点
- 层级选择器都有一个参考节点
- 后代选择器包含子选择器的选择的内容
- 一般兄弟选择器包含相邻兄弟选择的内容
- 相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下
示例代码：
<script type="text/javascript">
//子选择器
//$('div > p') 选择所有div元素里面的子元素P
$('div > p').css("border", "1px groove red");
</script>
<script type="text/javascript">
//后代选择器
//$('div p') 选择所有div元素里面的p元素
$('div p').css("border", "1px groove red");
</script>
<script type="text/javascript">
//相邻兄弟选择器
//选取prev后面的第一个的div兄弟节点
$('.prev + p').css("border", "3px groove blue");
</script>
<script type="text/javascript">
//一般相邻选择器
//选取prev后面的所有的div兄弟节点
$('.prev ~ p').css("border", "3px groove blue");
</script>
6.基本筛选选择器
基本筛选选择器
注意：从0开始索引
示例代码：
<script type="text/javascript">
//找到第一个div
$(".div:first").css("color", "#CD00CD");
</script>
<script type="text/javascript">
//找到最后一个div
$(".div:last").css("color", "#CD00CD");
</script>
<script type="text/javascript">
//:even 选择所引值为偶数的元素，从 0 开始计数
$(".div:even").css("border", "3px groove red");
</script>
<script type="text/javascript">
//:odd 选择所引值为奇数的元素，从 0 开始计数
$(".div:odd").css("border", "3px groove blue");
</script>
<script type="text/javascript">
//:eq
//选择单个
$(".aaron:eq(2)").css("border", "3px groove blue");
</script>
<script type="text/javascript">
//:gt 选择匹配集合中所有索引值大于给定index参数的元素
$(".aaron:gt(3)").css("border", "3px groove blue");
</script>
<script type="text/javascript">
//:lt 选择匹配集合中所有索引值小于给定index参数的元素
//与:gt相反
$(".aaron:lt(2)").css("color", "#CD00CD");
</script>
<script type="text/javascript">
//:not 选择所有元素去除不匹配给定的选择器的元素
//选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色
$("input:not(:checked) + p").css("background-color", "#CD00CD");
</script>
学编程，遇到一些简称的代码，去查清楚全称，记忆会更牢固，就比如eq全称是equal(意思是“等于”)；gt全称是greater than(意思是大于)；lt全称是less than(意思是小于)
7.内容筛选选择器
内容筛选选择器
示例代码：
<script type="text/javascript">
//查找所有class='div'中DOM元素中包含"contains"的元素节点
//并且设置颜色
$(".div:contains(':contains')").css("color", "#CD00CD");
</script>
<script type="text/javascript">
//查找所有class='div'中DOM元素中包含"span"的元素节点
//并且设置颜色
$(".div:has(span)").css("color", "blue");
</script>
<script type="text/javascript">
//选择所有包含子元素或者文本的a元素
//增加一个蓝色的边框
$("a:parent").css("border", "3px groove blue");
</script>
<script type="text/javascript">
//找到a元素下面的所有空节点(没有子元素)
//增加一段文本与边框
$("a:empty").text(":empty").css("border", "3px groove red");
</script>
8.可见性筛选选择器
可见行筛选选择器
我们有几种方式可以隐藏一个元素：
- CSS display的值是none。
- type="hidden"的表单元素。
- 宽度和高度都显式设置为0。
- 一个祖先元素是隐藏的，该元素是不会在页面上显示
- CSS visibility的值是hidden
- CSS opacity的指是0
如果元素中占据文档中一定的空间,元素被认为是可见的。
可见元素的宽度或高度，是大于零。
元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。
9.属性筛选选择器
属性筛选选择器
- [att=val]、[att]、[att|=val]、[att~=val] 属于CSS 2.1规范
- [ns|attr]、[att^=val]、[att*=val]、[att$=val] 属于CSS3规范
- [name!="value"] 属于jQuery 扩展的选择器
示例代码：
<script type="text/javascript">
//查找所有div中，属性name=p1的div元素
$('div[name=p1]').css("border", "3px groove red");
</script>
<script type="text/javascript">
//查找所有div中，有属性p2的div元素
$('div[p2]').css("border", "3px groove blue");
</script>
<script type="text/javascript">
//查找所有div中，有属性name中的值只包含一个连字符“-”的div元素
$('div[name|="-"]').css("border", "3px groove #00FF00");
</script>
<script type="text/javascript">
//查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素
$('div[name~="a"]').css("border", "3px groove #668B8B");
</script>
<script type="text/javascript">
//查找所有div中，属性name的值是用imooc开头的
$('div[name^=imooc]').css("border", "3px groove red");
</script>
<script type="text/javascript">
//查找所有div中，属性name的值是用imooc结尾的
$('div[name$=imooc]').css("border", "3px groove blue");
</script>
<script type="text/javascript">
//查找所有div中，有属性name中的值包含一个test字符串的div元素
$('div[name*="test"]').css("border", "3px groove #00FF00");
</script>
<script type="text/javascript">
//查找所有div中，有属性testattr中的值没有包含"true"的div
$('div[testattr!="true"]').css("border", "3px groove #668B8B");
</script>
这些内容不是让你记住的，而是让你有一个大概的概念，比如用到类似功能的时候会想起来，我记得有这么一个东西，具体是什么可能不清楚了，但是知道确实是有的，然后查一下
10.元素筛选选择器
元素筛选选择器
注意事项：
- :first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
- :last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素
如果子元素只有一个的话，:first-child与:last-child是同一个 - :only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配
jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的 - nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算
示例代码
<script type="text/javascript">
//查找class="first-div"下的第一个a元素
//针对所有父级下的第一个
$('.first-div a:first-child').css("color", "#CD00CD");
</script>
<script type="text/javascript">
//查找class="first-div"下的最后一个a元素
//针对所有父级下的最后一个
//如果只有一个元素的话，last也是第一个元素
$('.first-div a:last-child').css("color", "red");
</script>
<script type="text/javascript">
//查找class="first-div"下的只有一个子元素的a元素
$('.first-div a:only-child').css("color", "blue");
</script>
<script type="text/javascript">
//查找class="last-div"下的第二个a元素
$('.last-div a:nth-child(2)').css("color", "#CD00CD");
</script>
<script type="text/javascript">
//查找class="last-div"下的倒数第二个a元素
$('.last-div a:nth-last-child(2)').css("color", "red");
</script>
11.表单元素选择器
表单元素选择器
示例代码：
<script type="text/javascript">
//查找所有 input, textarea, select 和 button 元素
//:input 选择器基本上选择所有表单控件
$(':input').css("border", "1px groove red");
</script>
<script type="text/javascript">
//匹配所有input元素中类型为text的input元素
$('input:text').css("background", "#A2CD5A");
</script>
<script type="text/javascript">
//匹配所有input元素中类型为password的input元素
$('input:password').css("background", "yellow");
</script>
<script type="text/javascript">
//匹配所有input元素中的单选按钮,并选中
$('input:radio').attr('checked','true');
</script>
<script type="text/javascript">
//匹配所有input元素中的复选按钮,并选中
$('input:checkbox').attr('checked','true');
</script>
<script type="text/javascript">
//匹配所有input元素中的提交的按钮,修改背景颜色
?$('input:submit').css("background", "#C6E2FF");
</script>
<script type="text/javascript">
//匹配所有input元素中的图像类型的元素,修改背景颜色
$('input:image').css("background", "#F4A460");
</script>
<script type="text/javascript">
//匹配所有input元素中类型为按钮的元素
$('input:button').css("background", "red");
</script>
<script type="text/javascript">
//匹配所有input元素中类型为file的元素
$('input:file').css("background", "#CD1076");
</script>
12.表单对象属性筛选选择器
表单对象属性选择器
注意事项：
- 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
- 在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素
示例代码：
<script type="text/javascript">
//查找所有input所有可用的（未被禁用的元素）input元素。
$('input:enabled').css("border", "2px groove red");
</script>
<script type="text/javascript">
//查找所有input所有不可用的（被禁用的元素）input元素。
$('input:disabled').css("border", "2px groove blue");
</script>
<script type="text/javascript">
//查找所有input所有勾选的元素(单选框,复选框)
//移除input的checked属性
$('input:checked').removeAttr('checked')
</script>
<script type="text/javascript">
//查找所有option元素中,有selected属性被选中的选项
//移除option的selected属性
$('option:selected').removeAttr('selected')
</script>
