js进阶 10-7 简单的伪类选择器可以干什么
一、总结
一句话总结：伪类选择器是冒号。
1、学而不用，有什么用？
多用啊，在项目中多用
2、简单的伪类选择器可以干什么？
除某元素以外，某元素的一切索引相关（奇偶，开始最后，大于小于等于）
除某元素以外，某元素的第一个，最后一个，以及某元素所有和索引相关的操作
3、伪类选择器的关键性符号是什么？
冒号，以英文冒号“：”开头
4、如何选取某一个元素中的其他元素？
用后代选择器
$('ul :not(#one)').css('color','blue');
5、如何给选择器限定内容？
加上限定的标签即可
33 // $('li:first').css('color','red');
二、简单的伪类选择器可以干什么
1、相关知识点：
伪类选择器
伪类选择器也称作过滤选择器。
JQuery伪类选择器都是以英文冒号“：”开头，和css中的伪类选择器用法相似，使得我们可以快速地选择我们想要获取的元素。
- 简单伪类选择器元素
- ：not(selector)选择除了某个选择器之外的所有元素
- ：first或first()选择某元素的第一个元素（非子元素）
- ：last或last()选择某元素的最后一个元素（非子元素）
- ：odd选择某元素的索引值为奇数的元素
- ：even选择某元素的索引值为偶数的元素
- ：eq(index)选择给定索引值的元素，索引值index是一个整数，从0开始
- ：gt(index) 选择所有大于索引值的元素，索引值index是一个整数，从0开始
- ：lt(index)选择所有小于索引值的元素，索引值index是一个整数，从0开始
- ：header选择h1~h6的标题元素
- ：focus选取当前具有焦点的元素
- ：root选择页面的根元素
- ：animated选择所有正在执行动画效果的元素
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 <h4>伪类选择器</h4> 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>:root 选择页面的根元素</li> 25 <li>:animated 选择所有正在执行动画效果的元素</li> 26 </ul> 27 <input type="text" value="测试"> 28 </li> 29 </div> 30 <script> 31 $(function(){ 32 //$('li:not(#one)').css('color','blue'); 33 // $('li:first').css('color','red'); 34 // $('li:last').css('color','red'); 35 //$('li:odd').css('color','red'); 36 //$('li:even').css('color','blue'); 37 $('li:eq(3)').css('color','red'); 38 $('li:lt(3)').css('color','blue'); 39 $('li:gt(3)').css('color','orange'); 40 41 }) 42 </script> 43 </body> 44 </html>