伪类选择器

伪类选择器

一般都是以：开头的

1.“位置”伪类选择器

位置伪类选择器，指的是根据页面中的位置来选取元素。
:first 选取某种元素的第一个
:last 选取某种元素的最后一个
:odd 选取某种元素中序号为“奇数”的所有元素，序号从0开始
:even 选取某种元素中序号为“偶数”的所有元素，序号从0开始
:eq(n) 选取某种元素的第n个，n是一个整数，从0开始
:lt(n) 单词less than缩写，选取某种元素中小于n的所有元素，n是一个整数，从0开始
:gt(n) 单词greater than缩写，选取某种元素中大于n的所有元素，n是一个整数，从0开始
$("li:eq(3)")表示选取序号为3的li元素，也就是第4个li元素
$("li:odd")选择奇数序号，实际上是第偶数个数

2.“子元素”伪类选择器

就是选择某一个元素下的子元素。
子元素类型为E
E:first-child 选择父元素下的第一个子元素
E:last-child 选择父元素下的最后一个子元素
E:nth-child(n) 选择父元素下的第n个子元素或奇偶元素，n取值有3种：数字、odd、even，n从1开始
E:only-child 选择父元素下唯一的子元素，该父元素只有一个子元素
注意 nth-child(n)中的n是从1开始，而不是从0开始的。对比lt(n) gt(n)
///////////////////////////////////////////////////////////////////////////////////////////

$("ul li:first-child").css("background-color", "red");

E:first-of-type 选择父元素下的第一个E类型的子元素
E:last-of-type 选择父元素下的最后一个E类型的子元素
E:nth-of-type(n) 选择父元素下的第n个E类型的子元素或奇偶元素，n取值有3种：数字、odd、even
E:only-of-type 选择父元素下唯一的E类型的子元素，该父元素可以有多个子元素

3.“可见性”伪类选择器

根据元素“可见”与“不可见”这两种状态来选取元素
不可见元素，指的是定义了display:none的元素。

:visible 选取所有可见元素
:hidden 选取所有不可见元素

.select{display:none;}
$("li:hidden").css("display","block");
<li class="select">jQuery</li>

4.“内容”伪类选择器

根据元素的内部文本或者子元素来选取元素
:contains(text) 选取包含指定文本的元素
:has(selector) 选取包含指定选择器的元素
:parent 选取含有文本或者子元素的元素
:empty 选取不含有文本以及子元素的元素，即空元素

$("p:contains(jQuery)").css("color", "red");//文本元素中选择
<div>jQuery实战开发</div>//不变
<p>从JavaScript到jQuery</p>//变红

5.“表单”伪类选择器

专门操作表单元素的一种伪类选择器。
:input选取所有input元素
:button 选取所有普通按钮，即<input type="button" />
:submit 选取所有提交按钮，即<input type="submit" />
:reset 选取所有重置按钮，即<input type="reset" />
:text 选取所有单行文本框
:textarea 选取所有多行文本框
:password 选取所有密码文本框
:radio 选取所有单选框
:checkbox 选取所有复选框
:image 选取所有图片域
:file 选取所有文件域

 $("input:checkbox").attr("checked", "checked");//设置属性checked为checked

“表单属性”伪类选择器

根据表单元素的属性来选取的一种伪类选择器

 var result = $("input:checked").val(); 
 alert(result); 
 <label><input type="checkbox" value="苹果"/>苹果</label>
 <label><input type="checkbox" value="西瓜" checked/>西瓜</label>

:checked 选取所有被选中的表单元素，一般是单选框或复选框
:selected 选取被选中的表单元素的选项，一般是下拉列表
:enabled 选取所有可用的表单元素
:disabled 选取所有不可用的表单元素
:read-only 选取所有只读的表单元素
:focus 选取所有获得焦点的表单元素

其他伪类选择器

:not(selector) 选取除了某个选择器之外的所有元素
:animated 选取所有正在执行动画的元素
:root 选取页面根元素，即html元素
:header 选取h1~h6的标题元素
:target 选取锚点元素
:lang(language) 选取特定语言的元素
一般情况下只会用到:not()、:animated这两个
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

<div>
    <h1><h1>
    <p></p>
    <span></span>
    <span></span>
</div>

对于:first-child来说

h1:first-child：

选择的是h1，因为父元素（即div）下的第一个子元素就是h1。

p:first-child：

选择不到任何元素，因为父元素（即div）下的第一个子元素是h1，不是p。

span:first-child：

选择不到任何元素，因为父元素（即div）下的第一个子元素是h1，不是span。
对于:first-of-type来说，我们可以得到以下结果。

h1:first-of-type：

选择的是h1，因为h1是父元素中h1类型的子元素，我们选择其中第一个（实际上也只有一个h1）。

p:first-of-type：

选择的是p，因为p是父元素中p类型的子元素，我们选择其中第一个（实际上也只有一个p）。

span:first-of-type：

选择的是第一个span，因为span是父元素中span类型的子元素，我们选择其中第一个。
简单来说，first-child是选择所有子元素的第一个元素并判断是否为指定类型。而first-of-type选择的是所指定类型中的第一个指定元素。