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选取所有可见元素
- ：hidden选取所有不可见元素
- 内容伪类选择器
内容伪类选择器，就是根据元素中的文字内容或所包含的子元素特征来选择元素，其文字内容可以模糊或绝对匹配进行元素定位。
- ：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>