js進階 10-10 可見僞類選擇器和內容僞類選擇器的做用

時間 2019-11-18

標籤進階可見選擇器內容欄目 JavaScript 简体版

原文原文鏈接

js進階 10-10 可見僞類選擇器和內容僞類選擇器的做用

1、總結

一句話總結：分組來描述。內容僞類選擇器就是四個包含。可見的僞類選擇器就是可見和不可見。查找功能，也就是內容僞類選擇器很是有用。

一、可見僞類選擇器能夠作什麼？

設置你想是實現的任何元素顯示或者隱藏的功能css

二、css中元素隱藏兩種方法？

display和visibilityhtml

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

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

三、display和visibility隱藏元素的區別？

visibility還佔着文檔流的位置code

四、js中如何實現查找功能，查找文本或者類？

內容僞類選擇器htm

五、內容僞類選擇器哪四個？

選擇文本，選擇類，包含子元素，不包含子元素blog

：contains(text)選擇包含給定文本內容的元素
：has（selector)選擇含有選擇器所匹配元素的元素
：empty選擇全部不包含子元素或者不包含文本的元素
：parent選擇含有子元素或者文本的元素（跟：empty相反）

2、可見僞類選擇器和內容僞類選擇器

一、相關知識

可見性僞類選擇器
- ：hidden選取全部不可見元素
  「：hidden」選擇器選擇的不只包括樣式爲display:none全部元素，並且還包括屬性type=」hidden」和樣式爲visibility:hidden的全部元素。ip
- ：visible選取全部可見元素
內容僞類選擇器
內容僞類選擇器，就是根據元素中的文字內容或所包含的子元素特徵來選擇元素，其文字內容能夠模糊或絕對匹配進行元素定位。文檔
- ：contains(text)選擇包含給定文本內容的元素
- ：has（selector)選擇含有選擇器所匹配元素的元素
- ：empty選擇全部不包含子元素或者不包含文本的元素
- ：parent選擇含有子元素或者文本的元素（跟：empty相反）

二、代碼

 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>