微信扫一扫打赏支持

js进阶 10-10 可见伪类选择器和内容伪类选择器的作用

js进阶 10-10  可见伪类选择器和内容伪类选择器的作用

一、总结

一句话总结：分组来描述。内容伪类选择器就是  四个  包含。可见的伪类选择器就是可见和不可见。查找功能，也就是内容伪类选择器非常有用。

 

1、可见伪类选择器可以做什么？

设置你想是实现的任何元素显示或者隐藏的功能

2、css中元素隐藏两种方法？

display和visibility

8 /* ul{display: none;}*/

9 /* ul{visibility: hidden;}*/

3、display和visibility隐藏元素的区别？

visibility还占着文档流的位置

4、js中如何实现查找功能，查找文本或者类？

内容伪类选择器

5、内容伪类选择器哪四个？

选择文本，选择类 ，包含子元素，不包含子元素

  • ：contains(text)选择包含给定文本内容的元素
  • ：has（selector)选择含有选择器所匹配元素的元素
  • ：empty选择所有不包含子元素或者不包含文本的元素
  • ：parent选择含有子元素或者文本的元素（跟：empty相反）

 

 

 

二、可见伪类选择器和内容伪类选择器

1、相关知识

  • 可见性伪类选择器
    • ：hidden选取所有不可见元素

      “：hidden”选择器选择的不仅包括样式为display:none所有元素，而且还包括属性type=”hidden”和样式为visibility:hidden的所有元素。

    • ：visible选取所有可见元素
  • 内容伪类选择器

    内容伪类选择器，就是根据元素中的文字内容或所包含的子元素特征来选择元素，其文字内容可以模糊或绝对匹配进行元素定位。

    • ：contains(text)选择包含给定文本内容的元素
    • ：has（selector)选择含有选择器所匹配元素的元素
    • ：empty选择所有不包含子元素或者不包含文本的元素
    • ：parent选择含有子元素或者文本的元素（跟：empty相反）

 

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     <style type="text/css">
 8     /*    ul{display: none;}*/
 9 /*    ul{visibility: hidden;}*/
10     </style>
11 </head>
12 <body>
13      <div>
14         <h1>h1</h1>
15         <p>p1 p标签表示段落</p>
16         <p>p2 <span>我是span</span></p>
17         <span>span1</span>
18         <span>span2</span>
19      <ul>
20         <li>1</li>
21         <li>2</li>
22         <li>3<span>li</span></li>
23         <li>4</li>
24         <li>5 <p>p</p></li>
25         <li>6</li>
26         <li>7</li>
27         <li></li>
28         <li></li>
29      </ul>
30      </div>
31      <input type="button" class="btn1" value="隐藏">
32     <input type="button" class="btn2" value="显示">
33      <script>
34          $(function(){
35              // $('ul').css('display','none');
36              // // $('ul:hidden').css('display','block');
37 
38              // $('.btn2').click(function(){
39              //     $('ul:hidden').css('display','block');
40              // })
41              // $('.btn1').click(function(){
42              //     $('div :visible').css('display','none');
43              // })
44              // $('p:contains(段落)').css("background-color",'red')
45              // $('p:has(span)').css("background-color",'red')
46              $('li:empty').css("background-color",'orange')
47              $('li:parent').css("background-color",'#ccc')
48          })
49      </script>
50 </body>
51 </html>

 

 

 

 

 

 

 

 

 
 
posted @ 2018-06-18 06:02  范仁义  阅读(374)  评论(0)  编辑  收藏  举报