js进阶 10-8 伪类选择器有哪几类（自己不用，永远不是自己的）
一、总结
一句话总结：自己不用，永远不是自己的。
0、学而不用，却是为何？
自己不用，永远不是自己的，有需求的时候要想到它，然后操作和练习
1、伪类选择器有哪几类？
6类，简单伪类选择器元素，子元素伪类选择器，可见性伪类选择器，内容伪类选择器，表单伪类选择器，表单属性伪类选择器
2、伪类选择器有多强大？
你想到的，没有它做不到的
3、:first（简单伪类选择器）和:first-child（子元素伪类选择器）的区别是什么？
和:first的区别：:first-child可以选择多个
4、如何熟练掌握伪类选择器？
练习的时候创造机会多用，有用的意识，用着用着就熟了
5、如何掌握为了选择器（长久）？
记住框架，
记住有几大类，记住每大类的功能，由大过渡到小，
二、伪类选择器有哪几类
1、相关知识点
伪类选择器
伪类选择器也称作过滤选择器。
JQuery伪类选择器都是以英文冒号“：”开头，和css中的伪类选择器用法相似，使得我们可以快速地选择我们想要获取的元素。
- 简单伪类选择器元素
- ：not(selector)选择除了某个选择器之外的所有元素
- ：first或first()选择某元素的第一个元素（非子元素）
- ：last或last()选择某元素的最后一个元素（非子元素）
- ：odd选择某元素的索引值为奇数的元素
- ：even选择某元素的索引值为偶数的元素
- ：eq(index)选择给定索引值的元素，索引值index是一个整数，从0开始
- ：lt(index)选择所有小于索引值的元素，索引值index是一个整数，从0开始
- ：header选择h1~h6的标题元素：focus选取当前具有焦点的元素
- ：root选择页面的根元素
- ：animated选择所有正在执行动画效果的元素
- 子元素伪类选择器
- ：first-child选择父元素的第1个子元素
- ：last-child选择父元素的最后1个子元素
- ：nth-child(n)选择父元素下的第n个元素或奇偶元素，n的值为"整数|odd|vevn
- ：only-child选择父元素中唯一的子元素（该父元素只有一个子元素）
- ：first-of-type选择同元素类型的第1个同级兄弟元素
- ：last-of-type选择同元素类型的最后1个同级兄弟元素
- ：nth-of-type选择同元素类型的第n个同级兄弟元素，n的值可以是"整数|odd|even"
- ：onlt-of-type匹配父元素中特定类型的唯一子元素（但是父元素可以有多个子元素）
- 可见性伪类选择器
- ：hidden选取所有不可见元素
“：hidden”选择器选择的不仅包括样式为display:none所有元素，而且还包括属性type=”hidden”和样式为visibility:hidden的所有元素。
- ：visible选取所有可见元素
- ：hidden选取所有不可见元素
- 内容伪类选择器
内容伪类选择器，就是根据元素中的文字内容或所包含的子元素特征来选择元素，其文字内容可以模糊或绝对匹配进行元素定位。
- ：contains(text)选择包含给定文本内容的元素
- ：has（selector)选择含有选择器所匹配元素的元素
- ：empty选择所有不包含子元素或者不包含文本的元素
- ：parent选择含有子元素或者文本的元素（跟：empty相反）
- 表单伪类选择器
- : Input选择所有input元素
- ：button选择所有type="button"的input元素
- ：submit选择所有type="submit"的input元素
- ：reset选择所有type="reset"的input元素
- ：text选择所有单选文本框
- ：textarea选择所有多行文本框
- ：password选择所有密码文本框
- ：radio选择所有单选按钮
- ：checkbox选择所有复选框
- ：image选择所有图像域
- ：hidden选择所有隐藏域
- ：file选择所有文件域
- 表单属性伪类选择器
- ：enabled选择所有可用input元素
- ：disabled所有禁用的input元素
- ：selected选择所有被选中的option元素
- ：checked选择所被选中的表单元素，一般用于radio和checkbox
2、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>演示文档</title> 6 <script src="jquery-3.1.1.min.js"></script> 7 </head> 8 <body> 9 <div> 10 <div><h4>伪类选择器</h4></div> 11 <p>伪类选择器都是以英文冒号“:”开头。jQuery参考css选择器的形式，为我们提供了大量的伪类选择器，使得我们可以快速地选择我们想要获取的元素。</p> 12 <hr> 13 <h5>简单伪类选择器</h5> 14 <ul> 15 <li id="one">:not(selector) 选择除了某个选择器之外的所有元素</li> 16 <li>:first或first() 选择某元素的第一个元素（非子元素）</li> 17 <li>:last或last() 选择某元素的最后一个元素（非子元素）</li> 18 <li>:odd 选择某元素的索引值为奇数的元素</li> 19 <li>:even 选择某元素的索引值为偶数的元素</li> 20 <li>:eq(index) 选择给定索引值的元素，索引值index是一个整数，从0开始</li> 21 <li>:lt(index) 选择所有小于索引值的元素，索引值index是一个整数，从0开始</li> 22 <li>:gt(index) 选择所有大于索引值的元素，索引值index是一个整数，从0开始</li> 23 <li>:header 选择h1~h6的标题元素</li> 24 <li>:focus 选取当前具有焦点的元素</li> 25 <li>:root 选择页面的根元素</li> 26 <li>:animated 选择所有正在执行动画效果的元素</li> 27 </ul> 28 <h5>子元素伪类选择器</h5> 29 <ul> 30 <li>:first-child 选择父元素的第1个子元素</li> 31 <li>:last-child 选择父元素的最后1个子元素</li> 32 <li>:nth-child(n) 选择父元素下的第n个元素或奇偶元素，n的值为“整数|odd|even</li> 33 <li>:only-child 选择父元素中唯一的子元素（该父元素只有一个子元素)</li> 34 <li>:first-of-type 选择同元素类型的第1个同级兄弟元素</li> 35 <li>:last-of-type 选择同元素类型的最后1个同级兄弟元素</li> 36 <li>:nth-of-type 选择同元素类型的第n个同级兄弟元素，n的值可以是“整数|odd|even”</li> 37 <li>:only-of-type 匹配父元素中特定类型的唯一子元素（但是父元素可以有多个子元素）</li> 38 </ul> 39 <input type="text" value="测试"> 40 </li> 41 </div> 42 <script> 43 $(function(){ 44 // $(':header').css('color','red') 45 // $('input').focus() 46 // $(':focus').css('background-color','#ccc') 47 // $(':root').css('background-color','#ccc') 48 //和:first的区别：:first-child可以选择多个 49 //$("li:first").css("background-color", "red"); 50 // $("li:first-child").css("background-color", "red"); 51 // $("ul:first li:first-child").css("background-color", "red"); 52 // $("li:nth-child(odd)").css("background-color", "red"); 53 $(":only-child").css("background-color", "red"); 54 55 }) 56 </script> 57 </body> 58 </html>