jquery学习之1.7-属性过滤器学习

浏览数：24 / 时间：2015年06月09日

属性过滤器学习，主要内容包含:

代码如下：

 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       //***********************改变有title的div颜色为#aa0000********
15      $("#bt1").click(
16      function()
17      {    
18       $("div[title]").css("background","#aa0000");     
19      }
20      );
21       //********改变有title且title值为test的div颜色为#bb0000********
22     
23       $(".bt2").click(
24      function()
25      {
26       $("div[title=‘test‘]").css("background","#bb0000");     
27       //$("div[title=\"test\"]").css("background","#bb0000");    
28      }
29      );
30     //********改变有title且title值以te开头的div颜色为#110000********
31      
32       $("#bt3").click(function()
33       {
34           $("div[title^=‘第一‘]").css("background","#110000");
35       });
36       //********改变有title且title值以st结尾的div颜色为#ff0000********
37      
38       $("#bt4").click(function(){
39       $("div[title$=‘st‘]").css("background","#ff0000")
40       });
41       //********改变有id且title值包含div的div颜色为#001100********     
42       $("#bt5").click(function(){
43       $("div[id][title*=‘div‘]").css("background","#001100")
44       });
45    });
46   
47   //****************************************************** 
48   </script>
49   </head> 
50   <body>
51     <input type="button"  id="bt1" value="改变div1背景颜色为绿色" ></input>
52     <input type="button" class="bt2" value="改变有title且title值为test的div颜色为#bb0000" ></input>
53     <input type="button"  id="bt3" value="改变有title且title值以te开头的div颜色为#110000" ></input>
54     <input type="button"  id="bt4" value="改变有title且title值以st结尾的div颜色为#ff0000" ></input>
55    <input type="button"  id="bt5" value="改变有id且title值包含div的div颜色为#001100" ></input>
56    
57     <div id="div1" title="第一个div" style="background:grey;border:1px solid;width:20%;height:30%;float:left">div1</div> 
58      <div class="div2" title="test" style="background:white;border:1px solid;width:20%;height:30%;float:left"><p>p1第一段</p>p2第二段<p></p></div>
59      <br>
60   </body>
61 </html>