属性过滤器学习,主要内容包含:
代码如下:
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;20%;height:30%;float:left">div1</div> 58 <div class="div2" title="test" style="background:white;border:1px solid;20%;height:30%;float:left"><p>p1第一段</p>p2第二段<p></p></div> 59 <br> 60 </body> 61 </html>