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、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script src="jquery-3.1.1.min.js"></script>
<style type="text/css">
/* ul{display: none;}*/
/* ul{visibility: hidden;}*/
</style>
</head>
<body>
<div>
<h1>h1</h1>
<p>p1 p标签表示段落</p>
<p>p2 <span>我是span</span></p>
<span>span1</span>
<span>span2</span>
<ul>
<li>1</li>
<li>2</li>
<li>3<span>li</span></li>
<li>4</li>
<li>5 <p>p</p></li>
<li>6</li>
<li>7</li>
<li></li>
<li></li>
</ul>
</div>
<input type="button" class="btn1" value="隐藏">
<input type="button" class="btn2" value="显示">
<script>
$(function(){
// $('ul').css('display','none');
// // $('ul:hidden').css('display','block'); // $('.btn2').click(function(){
// $('ul:hidden').css('display','block');
// })
// $('.btn1').click(function(){
// $('div :visible').css('display','none');
// })
// $('p:contains(段落)').css("background-color",'red')
// $('p:has(span)').css("background-color",'red')
$('li:empty').css("background-color",'orange')
$('li:parent').css("background-color",'#ccc')
})
</script>
</body>
</html>