jquery学习之1.8-子元素过滤器

子元素过滤器,主要内容如下:

此处仅用一个例子,其他自己可以都试试啊

 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;width:20%;height:30%;float:left">div1</div> 
33      <div class="div2" title="test" 
34      style="background:white;border:1px solid;width: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>
my Code

 

posted @ 2014-03-24 20:25  testForever  阅读(186)  评论(0编辑  收藏  举报