本篇文章包含：
1>jQuery选择器
2>jQuery伪类选择器
一、jQuery选择器：
（1）基本选择器；
（2）层次选择器；
（3）属性选择器；
//注意：jQuery代码要写在
$(function () {
//这里是你的jQuery代码
}
//这句代码类似于javascript中的window.onload = function(){}函数，意为：在文档加载完成之后执行
（1）基本选择器
格式：
$("选择器")
//选择器种类：
（1）元素选择器；
{
$("元素名");
例：
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("div").css("color","red");
})
</script>
}
（2）id选择器；
{
$("#id名")
例：
$(function () {
$("#id").css("color","red");
})
}
（3）class选择器；
{
$(".类名")
例：
$(function () {
$(".class").css("color","red");
})
}
（4）群组选择器；
{
$("选择器1 , 选择器2 ,……,选择器n")
//两个选择器之间必须用“,”（英文逗号）隔开，不然群组选择器无法生效。
例：
$("h3,#id,.class,div").css("color","red");
}
（5）*选择器-->*选择器，也成为“全选选择器”，用于选择所有的元素。
{
$("*")
//在css中为--> *{}
例：
$("#list *").css("color","red");
//像以上的例子，，说明选择器都具有共同的道理，与css选择器是一样的
//css选择器：
1.子元素选择器//#father1 div{color:blue;}
2.相邻选择器//#id+div{color:red;}
3.群组选择器//h3,div,p,span{color:red;}
......
}
（2）层次选择器
//常见的层次关系包括：父子、后代、兄弟、相邻。
$("M N") 后代选择器，选择M元素内部后代N元素（所有子元素N）
{
$("#first p").css("color","red");
}
$("M>N") 子代选择器，选择M元素内部子代N元素（所有第1级子元素N）
{
$("#first>p").css("color","red");
}
$("M~N") 兄弟选择器，选择M元素后所有的同级元素N
{
$("#second~p").css("color","red");
}
$("M＋N") 相邻选择器，选择M元素相邻的下一个元素N（M、N是同级元素）
{
$("#second+p").css("color","red");
//应用技巧：
对于一个list：
$("li+li").css("border-top", "2px solid red");
这样可以实现只有每一个li之间存在一条横线的效果
}
//其中：
（1）$("M+N")可以使用“$(M元素).next()”代替；
（2）$("M~N")可以使用“$(M元素).nextAll()”代替；
（3）属性选择器
//属性（attribute）
//selector意为选择器，即标签
//attr意为属性，所谓属性，就是标签中的那些类似于class,id 等的属性
//value意为属性的值，所谓‘值’就是一系列字符串，用来匹配属性的取值
即:class=”style”，中value就是style,attr就是class
$("selector[attr]") 选择包含给定属性的元素
{
//选择含有class属性的div元素。
$("div[class]")
}
$("selector[attr='value']") 选择给定的属性是某个特定值的元素
{
//选择type属性值为checkbox的input元素（也就是选择所有复选框元素）：
$("input[type = 'checkbox']")
}
$("selector[attr != 'value']") 选择所有含有指定的属性，但属性不等于特定值的元素
{
//选择type属性值不是checkbox的input元素：
$("input[type != 'checkbox']")
}
$("selector[attr *= 'value']") 选择给定的属性是以包含某些值的元素
{
//选择class属性包含nav的div元素：
$("div[class *= 'nav']")
//此处‘*’的用法类似于正则表达式中‘+’，即出现一次或更多次
//此处是正则表达式中的字符串匹配方法，即只要class属性中的值含有nav字段，这样的div标签都会被选中
例：
$("div[class *='nav']").css("color","green");
<div class="younavnav">CSDN博客</div>
<div class="you nav">CSDN博客</div>
<div class="nav">CSDN博客</div>
以上三种都会被选中。
})
}
$("selector[attr ^= 'value']") 选择给定的属性是以某些值开始的元素（比较少用）
{
//选择name属性以group开始的input元素，例如<input type="radio" name="group-fruit"/>：
$("input[name ^= 'group']")
//应用正则表达式的方法
}
$("selector[attr $= 'value']") 选择给定的属性是以某些值结尾的元素（比较少用）
{
选择name属性以group结尾的input元素，例如<input type="radio" name="fruit-group"/>：
$("input[name $= 'group']")
//应用正则表达式的方法
}
$("selector[selector1][selector2]…[selectorN]") 复合属性选择器，需要同时满足多个条件时使用
{
//选择具有id属性并且class属性是以s开头的div元素，例如<div id="id" class="style">CSDN博客</div>：
$("div[id][class ^='s']");
}
//^、$ 这些符号的应用为正则表达式中这些符号的应用，其中‘*’类似于正则表达式中‘+’的用法
//注意在jQuery选择器中，选择器之间是可以拼凑使用的，即
<div id="father">
<div id="id" class="hinavnav">CSDN博客</div>
</div>
$("#id[class ^='h']").css("color","green");
<==>
$("div[class ^='h']").css("color","green");
<==>
$("#father #id[class ^='h']").css("color","green");
以上全是正确的
二、jQuery伪类选择器
//伪类选择器，可以看成是一种特殊的选择器。伪类选择器都是以英文冒号“:”开头。
伪类选择器分为：
（1）简单伪类选择器；
（2）子元素伪类选择器；
（3）可见性伪类选择器；
（4）内容伪类选择器；
（5）表单伪类选择器；
（6）表单属性伪类选择器；
（1）简单伪类选择器
:not(selector) 选择除了某个选择器之外的所有元素
{
$("li:not(#myLi)").css("color", "red");
//表示选择除了id为myLi之外的其他li元素。
}
:first或first() 选择某元素的第一个元素（非子元素）
{
$("li:first,li:last").css("color", "red");
//表示选择第一个li元素和最后一个li元素。
}
:last或last() 选择某元素的最后一个元素（非子元素）
{
$("li:first,li:last").css("color", "red");
//表示选择第一个li元素和最后一个li元素。
}
:odd 选择某元素的索引值为奇数的元素
{
$("li:odd").css("color", "red");
//选择索引值为奇数的li元素
}
:even 选择某元素的索引值为偶数的元素
{
$("li:even").css("color", "red");
//选择索引值为奇数的li元素
}
:eq(index) 选择给定索引值的元素，索引值index是一个整数，从0开始
{
$("li:eq(index)").css("color", "red");
//选择索引值为特定数值的li元素
}
:lt(index) 选择所有小于索引值的元素，索引值index是一个整数，从0开始
{
$("li:lt(index)").css("color", "red");
//选择索引值小于某一特定数值的li元素
}
:gt(index) 选择所有大于索引值的元素，索引值index是一个整数，从0开始
{
$("li:gt(index)").css("color", "red");
//选择索引值大于某一特定数值的li元素
}
:header 选择h1~h6的标题元素
{
$(":header").css("color", "red");
}
:animated 选择所有正在执行动画效果的元素
{
$(":animated").css("color", "red");
}
:root 选择页面的根元素（用的少，不赘述）
:target 选择当前活动的目标元素（锚点）（用的少，不赘述）
（2）子元素伪类选择器
分为两类：
1>
:first-child 选择父元素的第1个子元素
:last-child 选择父元素的最后1个子元素
:nth-child(n) 选择父元素下的第n个元素或奇偶元素，n的值为“整数|odd|even”
:only-child 选择父元素中唯一的子元素（该父元素只有一个子元素）
//例：
$("ul li:first").css("background-color", "red");
//$("ul li:first-child").css("background-color", "red");也对
$("ul li:nth-child(2)").css("background-color", "orange");
$("ul li:last").css("background-color", "blue");
//$("ul li:last-child").css("background-color", "blue");也对
$("ul li:nth-child(odd)").css("background-color", "green");
$("ul li:nth-child(even)").css("background-color", "green");
//这一种方法有一点迂回的意思，从某一子元素先返回父级元素，再选择父级元素下的子元素
2>
:first-of-type 选择同元素类型的第1个同级兄弟元素
:last-of-type 选择同元素类型的最后1个同级兄弟元素
:nth-of-type(n) 选择同元素类型的第n个同级兄弟元素，n的值可以是“整数|odd|even”
:only-of-type 匹配父元素中特定类型的唯一子元素（但是父元素可以有多个子元素）
//区分第一类和第二类：
“第1类选择器不分元素类型，第2类选择器区分元素类型。”//这句话为摘抄的，个人感觉不是很全面
区别：
<div>
<h1></h1>
<p></p>
<span></span>
<span></span>
</div>
（1）:first-child
h1:first-child：选择的是h1元素，因为h1元素是div的第1个子元素。
p:first-child：选择不到任何元素，因为p并不是div的第1个子元素，而是div的第2个子元素。
span:first-child:选择不到任何元素，因为span并不是div的第1个子元素，而是div的第3个子元素；
//像以上三种情况，个人觉得：这倒像一个双条件选择器，首先得满足是特定的标签，其次还得满足在所有子元素中的位置
所以以下是正确的：
h1:first-child
p:nth-child(2)
span:nth-child(3)
span:last-child
（2）:first-of-type
h1: first-of-type:选择的是h1元素，因为h1元素是div中所有h1元素中的第1个h1元素，事实上也只有一个为h1的子元素。
p: first-of-type:选择的是p元素，因为p元素是div中所有p元素中的第1个p元素，事实上也只有一个为p的子元素。
span: first-of-type:选择的是id="first"的span元素，因为在div元素中有2个span元素，这里我们选择的是两个span中的第1个。
//而第二类，是选择本类型的第（n）个元素，目标指的是类型，而不是子元素在父元素中的位置
（3）可见性伪类选择器
:hidden 选取所有不可见元素
:visible 选取所有可见元素，与:hidden相反
//“:hidden”选择器选择的不仅包括样式为display:none所有元素，而且还包括属性type="hidden"和样式为visibility:hidden的所有元素。
type="hidden",用于input中，使input称为隐藏域，可以用来存储某些值
display:"none",不会出现在页面中，相当于wx:if
visibility:"hidden",相当于小程序中的hidden:
（4）内容伪类选择器
//根据元素中的文字内容或所包含的子元素特征来选择元素，其文字内容可以模糊或绝对匹配进行元素定位。
:contains(text) 选择包含给定文本内容的元素
{
$("元素名:contains(text)")
例：
$("p:contains(jQuery)").css("background-color", "red");
<p>从JavaScript到jQuery</p>
//其中与正则表达式有些相似，即
<p>从JavaScriptjQuery</p>
//这个样子也能够匹配出来
}
:has(selector) 选择含有选择器所匹配元素的元素
{
$("div:has(span)").css("background-color", "red");
//目标元素是div，div中含有span
其中的selector可以是id,class等
//$("div:has(#red,#yellow)")表示选择内部含有id为red和id为yellow子元素的div元素。
//:has(selector)中的selector是一个群组选择器。
}
:empty 选择所有不包含子元素或者不包含文本的元素
{
$("td:empty").css("background-color", "red");
}
:parent 选择含有子元素或者文本的元素（跟:empty相反）
{
$("td:parent").css("background-color", "red");
}
（5）表单伪类选择器
:input 选择所有input元素
:button 选择所有普通按钮，即type="button"的input元素
:submit 选择所有提交按钮，即type="submit"的input元素
:reset 选择所有重置按钮，即type="reset"的input元素
:text 选择所有单行文本框
:textarea 选择所有多行文本框
:password 选择所有密码文本框
:radio 选择所有单选按钮
:checkbox 选择所有复选框
:image 选择所有图像域
:hidden 选择所有隐藏域
:file 选择所有文件域
例{
$("input:checkbox").attr("checked","checked");
}
（6）表单属性伪类选择器
:checked 选择所有被选中的表单元素，一般用于radio和checkbox
option:selected 选择所有被选中的option元素
:enabled 选择所有可用元素，一般用于input、select和textarea
:disabled 选择所有不可用元素，一般用于input、select和textarea
:read-only 选择所有只读元素，一般用于input和textarea
:focus 选择获得焦点的元素，常用于input和textarea
例：
var a = $("input:checked").val();