演示-JQuery中僞元素和僞類選擇器

時間 2019-11-09

原文原文鏈接

HTML代碼：javascript

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>index</title>
 6 <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 7 <script type="text/javascript">    
 8 $(function(){
 9         $("#of").focus();//使元素提早得到焦點，以便捕捉
10         })
11     
12     $(function(){
13                $(":disabled").css("color","red");
14             console.log("選擇被選中(:checked)的元素，其長度爲:"+$(":checked").length);
15             $(":focus").css("background-color","black");
16             $(":required").css("font-size","20px");
17             console.log("選擇enabled的表單元素，其長度爲:"+$(":enabled").length);
18             console.log("選擇不是required的元素，其長度爲:"+$(":optional").length);
19             console.log("選擇div中的empty的元素，其長度爲:"+$("div :empty").length);
20             console.log("id爲t的第一個子元素的value值是："+$("#t :first-child").val());
21             $("li:last-child").css("background-color","red");
22             $("ul:last-child").css("color","blue");
23             $("#ull :nth-child(even)").css("color","red");
24             $("div :nth-of-type(2)").css("color","gray");
25             $("#ull :nth-child(4)").css("background-color","yellow");
26             $("#only-type :only-of-type").css("background-color","yellow");
27             $("#only :only-child").css("color","green");
28         }
29     );
30 </script>
31 </head>
32 <body>
33 
34 <div style="border:1px solid;">
35     <div>
36     <a id="last" value="123" href="#">haha</a>
37     <a id="last" value="123" href="#">haha</a>
38         <p>興趣：</p>
39         <p>興趣：</p>
40     </div>
41     <div id="t">
42         <input type="checkbox" checked="checked" title="aa" value="我是first-child嗎？" readonly="true"/>
43         <input type="text" value="運動" id="of"/>
44         <input type="checkbox"/>
45         <input type="text" value="睡覺" disabled="disabled" />
46         <input type="checkbox"/>
47         <input type="text" value="讀書"  required="required"/>
48         <input type="checkbox"/>電影
49     </div> 
50 </div>
51 <ul id="ull">
52     <li>I</li>
53     <li>II</li>
54     <li>III</li>
55     <li>IV</li>
56     <li>V</li>
57 </ul>
58 <ul>
59     <li>1</li>
60     <li>2</li>
61     <li>3</li>
62     <li>4</li>
63     <li>5</li>
64 </ul>
65 <div id="only" style="border:1px double"><p>我是惟一元素^_^</p></div>
66 <div id="only-type" style="border:1px double"><p>我是惟一的p元素^_^</p><a>not only one~</a><br /><a>not only one~</a></div>
67 </body>
68 </html>