1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
3 <html>
4 <head>
5 <!-- jQuery内容过滤选择器 -->
6 <!--
7 :contains(text) 选取含有文本内容为“text”的元素 集合元素 $("div:contains(‘我‘)") 选取含有文本“我”的div元素
8 :empty 选取不包涵子元素或者文本的空元素 集合元素 $("div:empty") 选取不包含子元素（包括文本元素）的div空元素
9 :has(selector) 选取含有选择器所匹配的元素的元素 集合元素 $("div:has(p)") 选取含有<p>元素的div元素
10 :parent 选取含有子元素或者文本的元素 集合元素 $("div:parent") 选取拥有子元素（包括文本元素）的div元素
11 -->
12 <meta http-equiv="pragma" content="no-cache">
13 <meta http-equiv="cache-control" content="no-cache">
14 <meta http-equiv="expires" content="0">
15 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
16 <meta http-equiv="description" content="This is my page">
17 <script type="text/javascript" src="../../js/jquery.js"></script>
18 <style type="text/css">
19 div,span,p{
20 width:140px;
21 height:140px;
22 margin:5px;
23 background:#aaa;
24 border:#000 1px solid;
25 float:left;
26 font-size:17px;
27 font_family:Verdana;
28 }
29 div.mini{
30 width:55px;
31 height:55px;
32 background-color:#aaa;
33 font-size:12px;
34 }
35 div.hide{
36 display:none;
37 }
38 </style>
39
40 <script type="text/javascript" >
41
42 //选取含有文本“di”的div元素背景色
43 function test1(){
44 $("div:contains(‘di‘)").css("background","#bbffaa");
45 }
46
47 //选取div里什么都没有的空元素
48 function test2(){
49 $("div:empty").css("background","#bbffaa");
50 }
51
52 //选取div中class是mini的div
53 function test3(){
54 $("div:has(.mini)").css("background","#00ff00");
55 }
56
57 //选取含有内容的div（不管是什么）
58 function test4(){
59 $("div:parent").css("background","00ff00");
60 }
61
62 </script>
63 </head>
64 <body>
65
66 <div id="one" class="one">
67 id为one class为one的div
68 <div class="mini">class为mini</div>
69 </div>
70
71 <div class="one" id="two" title="test">
72 id为two class为one title为test的div
73 <div class="mini" title="other">class为mini title为other</div>
74 <div class="mini" title="test">class为mini title为test</div>
75 </div>
76
77 <div class="one">
78 <div class="mini">class为mini</div>
79 <div class="mini">class为mini</div>
80 <div class="mini">class为mini</div>
81 <div class="mini"></div>
82 </div>
83
84 <div class="one">
85 <div class="mini">class为mini</div>
86 <div class="mini">class为mini</div>
87 <div class="mini">class为mini</div>
88 <div class="mini" title="tesst">class为mini title为tesst</div>
89 </div>
90
91 <div style="display:none;" class="none">
92 style为display class为none的div
93 </div>
94
95 <div class="hide">class为hide的div</div>
96
97
98 <div>
99 包涵input的type为hidden的div<input type="hidden" size="8"/>
100 </div>
101
102 <span id="mover">正在执行动画的span元素</span>
103
104
105 <br>
106 <input type="button" onclick="test1()" value="改变含有文本“di”的div元素的背景色"/>
107 <input type="button" onclick="test2()" value="改变不包含子元素（包括文本元素）的div空元素的背景色"/>
108 <input type="button" onclick="test3()" value="改变含有class为mini的元素的div元素的背景色"/>
109 <input type="button" onclick="test4()" value="改变含有子元素（包括文本元素）的div元素的背景色"/>
110
111
112 </body>
113 </html>
时间： 2024-08-01 20:26:18