jquery学习之1.4-内容过滤器学习
内容过滤器包含以下内容：
代码示例如下：
1: <%@ page language="java" import="java.util.*"
2: pageEncoding="utf-8"%>
3: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
4: <html>
5: <head>
6: <title>11</title>
7: <script type="text/javascript" src="js/jquery-1.11.0.js">
8: </script>
9: <script language="javascript">
10: $(document).ready(function()
11: {
12:
13:
14: //***********************改变文本含有v1的div背景颜色为green********
15: $("#bt1").click(
16: function()
17: {
18: $("div:contains('v1')").css("background","green");
19: }
20: );
21: //***********************改变不包含子元素的div的背景色为#ffaaff********
22: $("#bt2").click(
23: function()
24: {
25: $("div:empty").css("background","#ffaaff");
26: }
27: );
28: //***********************改变包含class为mini的div的背景色为#ff00ff********
29:
30: $("#bt3").click(
31: function()
32: {
33: $("div:has('.div1_1')").css("background","#ff00ff");
34: }
35: );
36: //***********************改变含有子元素或者文本元素的div背景色为#ffcc00********
37:
38: $("#bt4").click(
39: function()
40: {
41: $("div:parent").css("background","#ffcc00");
42: }
43: );
44:
45: //***********************改变不含文本元素为v1的div背景色为#aacc00********
46:
47: $("#bt5").click(
48: function()
49: {
50: $("div:not(:contains('v1'))").css("background","#aacc00");
51: }
52: );
53:
54:
55:
56: });
57:
58: //******************************************************
59: </script>
60: </head>
61: <body>
62: <input type="button" id="bt1" value="改变文本含有v1的div背景颜色为green" ></input>
63: <input type="button" id="bt2" value="改变不包含子元素的div的背景色为#ffaaff" ></input>
64: <input type="button" id="bt3" value="改变包含class为mini的div的背景色为#ff00ff" ></input>
65: <input type="button" id="bt4" value="改变含有子元素或者文本元素的div背景色为#ffcc00" ></input>
66: <input type="button" id="bt5" value="改变不含文本元素为v1的div背景色为#aacc00" ></input>
67:
68: <br/><br/>
69: <div id="div1" style="background:grey;border:1px solid;width:20%;height:30%;float:left">
70: div1 <div class="div1_1" style="background:grey;border:1px solid;width:20%;height:30%;float:left">div_1</div>
71:
72: </div>
73: <div class="div2" style="background:white;border:1px solid;width:20%;height:30%;float:left"><p>p1第一段</p>p2第二段<p></p></div>
74: <div class="div3" style="background:grey;border:1px solid;width:20%;height:30%;float:left"></div>
75:
76: <br>
77: </body>
78: </html>
79:
