微信扫一扫打赏支持

js进阶 10-7 简单的伪类选择器可以干什么

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>

 

posted @ 2018-06-14 11:07  范仁义  阅读(853)  评论(0)  编辑  收藏  举报