子元素过滤器,主要内容如下:
此处仅用一个例子,其他自己可以都试试啊
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 //*******每个div中查找第二个p元素,背景色置为粉红******** 14 $("#bt1").click( 15 function() 16 { 17 $("div p:nth-child(2)").css("background","pink"); 18 } 19 ); 20 }); 21 22 //****************************************************** 23 </script> 24 </head> 25 <body> 26 <input type="button" id="bt1" value="每个class为div2的div父元素下的第二个子元素" ></input> 27 <input type="button" class="bt2" value="改变有title且title值为test的div颜色为#bb0000" ></input> 28 <input type="button" id="bt3" value="改变有title且title值以te开头的div颜色为#110000" ></input> 29 <input type="button" id="bt4" value="改变有title且title值以st结尾的div颜色为#ff0000" ></input> 30 <input type="button" id="bt5" value="改变有id且title值包含div的div颜色为#001100" ></input> 31 32 <div id="div1" title="第一个div" style="background:grey;border:1px solid;20%;height:30%;float:left">div1</div> 33 <div class="div2" title="test" 34 style="background:white;border:1px solid;20%; 35 height:30%;float:left">div2 36 <p style="background:grey;border:1px solid;">div2_1p</p> 37 <p style="background:white;border:1px solid;">div2_2p</p> 38 <div style="background:grey;border:1px solid;">div2_1div</div> 39 <div style="background:yellow;border:1px solid;">div2_2div</div> 40 </div> 41 <br> 42 </body> 43 </html>