<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script language="JavaScript" src="../js/jquery-1.4.2.js"></script><style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid;float:left; font-size: 17px; font-family:Roman;}div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman;}div.visible{display:none;} </style> <!--引入jquery的js库--> </head> <body> <input type="button" value=" 改变所有可见的div元素的背景色为 #0000FF" id="b1"/> <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF" id="b2"/> <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/> <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b4"/> <!--文本隐藏域--> <input type="hidden" value="hidden_1"> <input type="hidden" value="hidden_2"> <input type="hidden" value="hidden_3"> <input type="hidden" value="hidden_4"> <h1>天气冷了</h1> <h2>天气又冷了</h2> <div id="one"> id为one div </div> <div id="two" class="mini" > id为two class是 mini div <div class="mini" >class是 mini</div></div> <div class="visible" > class是 one 这是隐藏的 <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini01" >class是 mini01</div> <div class="mini" >class是 mini</div></div><div class="visible" > 这是隐藏的</div><div class="one"></div><br><div id="mover" > 动画</div><br></body><script language="JavaScript">//<input type="button" value=" 改变所有可见的div元素的背景色为 #0000FF" id="b1"/>$("input:eq(0)").click(function(){$("div:visible").css("background","red"); });//<input type="button" value=" 选取所有不可见的元素, //利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF" id="b2"/> $("input:eq(1)").click(function(){$(":hidden").show().css("background","red"); });/*****************************************************************************************************///遍历的方法一// <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/>/* * <input type="hidden" value="hidden_1"> <input type="hidden" value="hidden_2"> <input type="hidden" value="hidden_3"> <input type="hidden" value="hidden_4"> */ $("input:eq(2)").click(function(){ //获取所有的文本隐藏域 集合 var $hidden=$("input:hidden"); /* * * this 遍历集合时，每次遍历的对象 Dom对象 * * each(function(index,domEle) 遍历集合 * * 回调函数: * function(index,domEle) 这两个参数可以不加 * * index 遍历的集合的索引 从0开始 * * domEle:每次遍历的对象==this dom对象 */ $hidden.each(function(index,domEle){ //alert(index) //alert(this.value);//alert(domEle.value);//alert($(domEle).val());alert($(this).val());//这个直接是获取它的jquery对象。 }); });/*****************************************************************************************************///遍历的方法二://<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b4"/> $("input:eq(3)").click(function(){ //获取所有的文本隐藏域 集合 var $hidden=$("input:hidden"); /* * jQuery.each(object, function(index,domEle)) * * 通用例遍方法，可用于例遍对象和数组 * * 第一参数 要遍历的对象和数组 * * 第二参数 回调函数 * * function(index,domEle) 这两个参数可以不加 * * * index 遍历的集合的索引 从0开始 * * * domEle:每次遍历的对象==this dom对象 */ $.each($hidden,function(index,domEle){ //alert(this.value) alert(domEle.value) }) });</script></html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script language="JavaScript" src="../js/jquery-1.4.2.js"></script><style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid;float:left; font-size: 17px; font-family:Roman;}div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman;} </style> <!--引入jquery的js库--> </head> <body> <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/> <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/> <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/> <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/> <input type="text" value="不可用值1" disabled="disabled"> <input type="text" value="可用值1" > <input type="text" value="不可用值2" disabled="disabled"> <input type="text" value="可用值2" > <br> <input type="checkbox" name="items" value="美容" >美容 <input type="checkbox" name="items" value="IT" >IT <input type="checkbox" name="items" value="金融" >金融 <input type="checkbox" name="items" value="管理" >管理 <br> <input type="radio" name="sex" value="男" >男 <input type="radio" name="sex" value="女" >女 <br> <select name="job" id="job" multiple="multiple" size=4> <option>程序员</option><option>中级程序员</option><option>高级程序员</option><option>系统分析师</option> </select> <select name="edu" id="edu"> <option>本科</option><option>博士</option><option>硕士</option><option>大专</option> </select> </body><script language="JavaScript">/* * <input type="text" value="不可用值1" disabled="disabled"> <input type="text" value="可用值1" > <input type="text" value="不可用值2" disabled="disabled"> <input type="text" value="可用值2" > *///<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>$("#b1").click(function(){ $("input[type=text]:enabled").each(function(){$(this).val("xxxxxxxxxxxx");});});//<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/> $("#b2").click(function(){ $("input[type=text]:disabled").each(function(index,domEle){ $(domEle).val("ITITITITITITIITITIT"); }); });/*****************************************************************************************************//* * <br> <input type="checkbox" name="items" value="美容" >美容 <input type="checkbox" name="items" value="IT" >IT <input type="checkbox" name="items" value="金融" >金融 <input type="checkbox" name="items" value="管理" >管理 <br> <input type="radio" name="sex" value="男" >男 <input type="radio" name="sex" value="女" >女 <br> *///<input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/> $("#b3").click(function(){ //复选框 //alert($("input[name=items]:checked").length); alert($("input[type=radio]:checked").length); });/*****************************************************************************************************///<input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/> $("#b4").click(function(){ $("select[name='job'] option:selected").each(function(index,domEle){alert($(domEle).text());})});/*****************************************************************************************************/</script> </html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script language="JavaScript" src="../js/jquery-1.4.2.js"></script><style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid;float:left; font-size: 17px; font-family:Roman;}div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman;} </style> <!--引入jquery的js库--> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF" id="b1"/> <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2"/> <input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"/> <input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF" id="b4"/> <input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF" id="b5"/> <h1>天气冷了</h1> <h2>天气又冷了</h2> <div id="one"> id为one </div> <div id="two" class="mini" > id为two class是 mini <div class="mini" >class是 mini</div></div> <div class="one" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one"> class是 one <div class="mini01" >class是 mini01</div> <div class="mini" >class是 mini</div></div><br><div id="mover" > 动画</div><br><span class="spanone"> span</span></body><script language="JavaScript">//<input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF" id="b1"/>$("#b1").click(function(){ $("body div").css("background","red");});//<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2"/> $("#b2").click(function(){ $("body > div").css("background","red");});//<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"/> $("#b3").click(function(){ $("#one + div").css("background","red");});//<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF" id="b4"/> $("#b4").click(function(){ $("#two ~ div").css("background","red");});//<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF" id="b5"/> $("#b5").click(function(){ $("#two").siblings("div").css("background","red"); });</script> </html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script language="JavaScript" src="../js/jquery-1.4.2.js"></script><style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid;float:left; font-size: 17px; font-family:Roman;}div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman;} </style> <!--引入jquery的js库--> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF" id="b1"/> <input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为" id="b2"/> <input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF" id="b3"/> <input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF" id="b4"/> <input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色" id="b5"/> <h1>天气冷了</h1> <h2>天气又冷了</h2> <div id="one"> id为one div </div> <div id="two" class="mini" > id为two class是 mini div <div class="mini" >class是 mini</div></div> <div class="one" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini01" >class是 mini01</div> <div class="mini" >class是 mini</div></div><div class="one"></div><br><div id="mover" > 动画</div><br></body><script language="JavaScript">//<input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF" id="b1"/> $("#b1").click(function(){ $("div:contains('di')").css("background","red"); });//<input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为" id="b2"/> $("#b2").click(function(){ $("div:empty").css("background","red"); });//<input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF" id="b3"/> $("#b3").click(function(){ //$("div[class='mini']").css("background","red");$("div:has(.mini)").css("background","red"); });//<input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF" id="b4"/> $("#b4").click(function(){$("div:parent").css("background","red"); });//<input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色" id="b5"/> $("#b5").click(function(){$("div:not(:contains('di'))").css("background","red"); });</script> </html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script language="JavaScript" src="../js/jquery-1.4.2.js"></script><style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid;float:left; font-size: 17px; font-family:Roman;}div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman;}div.visible{display:none;} </style> <!--引入jquery的js库--> </head> <body> <input type="button" value=" 每个class为one的div父元素下的第2个子元素" id="b1"/> <input type="button" value=" 每个class为one的div父元素下的第一个子元素" id="b2"/> <input type="button" value=" 每个class为one的div父元素下的最后一个子元素" id="b3"/> <input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素" id="b4"/> <!--文本隐藏域--> <input type="hidden" value="hidden_1"> <input type="hidden" value="hidden_2"> <input type="hidden" value="hidden_3"> <input type="hidden" value="hidden_4"> <h1>天气冷了</h1> <h2>天气又冷了</h2> <div id="one"> id为one div </div> <div id="one" class="mini" title="test"> id为two class是 mini div title="test" <div class="mini" >class是 mini</div></div> <div class="one" title="test"> <div class="mini" >class是 mini******</div></div> <div class="visible" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" title="test02"> class是 one title="test02" (************** <div class="mini01" >class是 mini01</div> <div class="mini" >cdddddddlass是 mini</div></div><div class="visible" > 这是隐藏的</div><div class="one"></div><br><div id="mover" > 动画</div><br></body><script language="JavaScript"> //<input type="button" value=" 每个class为one的div父元素下的第2个子元素" id="b1"/>$("#b1").click(function(){ //注意:使用子元素过滤选择器,必须在子元素过滤选择器前面加上 空格 或 > $("div[class=one] > :nth-child(2)").css("background","red");});//<input type="button" value=" 每个class为one的div父元素下的第一个子元素" id="b2"/> $("#b2").click(function(){ //注意:使用子元素过滤选择器,必须在子元素过滤选择器前面加上 空格 或 > //$("div[class=one] > :nth-child(1)").css("background","red"); $("div[class=one] > :first-child").css("background","red");});//<input type="button" value=" 每个class为one的div父元素下的最后一个子元素" id="b3"/> $("#b3").click(function(){ //注意:使用子元素过滤选择器,必须在子元素过滤选择器前面加上 空格 或 > $("div[class=one] > :last-child").css("background","red");});//<input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素" id="b4"/> $("#b4").click(function(){ //注意:使用子元素过滤选择器,必须在子元素过滤选择器前面加上 空格 或 > $("div[class=one] > :only-child").css("background","red");});</script> </html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script language="JavaScript" src="../js/jquery-1.4.2.js"></script><style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid;float:left; font-size: 17px; font-family:Roman;}div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman;} </style> <!--引入jquery的js库--> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value=" 改变第一个 div 元素的背景色为 #0000FF" id="b1"/> <input type="button" value=" 改变最后一个 div 元素的背景色为 #0000FF" id="b2"/> <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF" id="b3"/> <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF" id="b4"/> <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF" id="b5"/> <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b6"/> <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF" id="b7"/> <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF" id="b8"/> <input type="button" value=" 改变所有的标题元素的背景色为 #0000FF" id="b9"/> <input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 #0000FF" id="b10"/> <h1>天气冷了</h1> <h2>天气又冷了</h2> <div id="one"> id为one </div> <div id="two" class="mini" > id为two class是 mini <div class="mini" >class是 mini</div></div> <div class="one" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini01" >class是 mini01</div> <div class="mini" >class是 mini</div></div><br><div id="mover" > 动画</div><br></body><script language="JavaScript"> function ca(){ $("#mover").slideToggle("normal",ca);}ca();//<input type="button" value=" 改变第一个 div 元素的背景色为 #0000FF" id="b1"/> $("#b1").click(function(){ $("div:first").css("background","red"); });//<input type="button" value=" 改变最后一个 div 元素的背景色为 #0000FF" id="b2"/> $("#b2").click(function(){ $("div:last").css("background","red"); });//<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF" id="b3"/> $("#b3").click(function(){ $("div:not(.one)").css("background","red"); });//<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF" id="b4"/> $("#b4").click(function(){ $("div:even").css("background","red"); });//<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF" id="b5"/> $("#b5").click(function(){ $("div:odd").css("background","red"); });//<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b6"/> $("#b6").click(function(){ $("div:gt(3)").css("background","red"); });//<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF" id="b7"/> $("#b7").click(function(){ $("div:eq(3)").css("background","red"); });//<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF" id="b8"/> $("#b8").click(function(){ $("div:lt(3)").css("background","red"); });//<input type="button" value="改变所有的标题元素的背景色为 #0000FF" id="b9"/> $("#b9").click(function(){ $(":header").css("background","red"); });//<input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 #0000FF" id="b10"/> $("#b10").click(function(){ $(":animated").css("background","red"); });</script> </html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script language="JavaScript" src="../js/jquery-1.4.2.js"></script><style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid;float:left; font-size: 17px; font-family:Roman;}div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman;} </style> <!--引入jquery的js库--> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/> <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" id="b2"/> <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3"/> <input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4"/> <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF" id="b5"/> <h1>天气冷了</h1> <h2>天气又冷了</h2> <div id="one"> id为one </div> <div id="two" class="mini" > id为two class是 mini <div class="mini" >class是 mini</div></div> <div class="one" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini01" >class是 mini01</div> <div class="mini" >class是 mini</div></div><br><div id="mover" > 动画</div><br><span class="spanone"> span</span><span class="mini"> span</span></body><script language="JavaScript">// <input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/> $("#b1").click(function(){ $("#one").css("background","red"); });//<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" id="b2"/> $("#b2").click(function(){ $("div").css("background","red"); }); //<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3"/>$("#b3").click(function(){ $(".mini").css("background","red"); });//<input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4"/>$("#b4").click(function(){ $("*").css("background","red"); });//<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF" id="b5"/>$("#b5").click(function(){ $("span,#two").css("background","red"); });</script> </html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script language="JavaScript" src="../js/jquery-1.4.2.js"></script><style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid;float:left; font-size: 17px; font-family:Roman;}div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman;}div.visible{display:none;} </style> <!--引入jquery的js库--></head> <body> <input type="button" value=" 含有属性title 的div元素" id="b1"/> <input type="button" value=" 属性title值等于test的div元素" id="b2"/> <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)" id="b3"/> <input type="button" value=" 属性title值 以te开始 的div元素." id="b4"/> <input type="button" value=" 属性title值 以est结束 的div元素.." id="b5"/> <input type="button" value="属性title值 含有es的div元素." id="b6"/> <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素" id="b7"/> <!--文本隐藏域--> <input type="hidden" value="hidden_1"> <input type="hidden" value="hidden_2"> <input type="hidden" value="hidden_3"> <input type="hidden" value="hidden_4"> <h1>天气冷了</h1> <h2>天气又冷了</h2> <div id="one"> id为one div </div> <div id="two" class="mini" title="test"> id为two class是 mini div title="test" <div class="mini" >class是 mini</div></div> <div class="visible" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" title="test02"> class是 one title="test02" <div class="mini01" >class是 mini01</div> <div class="mini" >class是 mini</div></div><div class="visible" > 这是隐藏的</div><div class="one"></div><br><div id="mover" > 动画</div><br></body><script language="JavaScript"> //<input type="button" value=" 含有属性title 的div元素" id="b1"/>$("input:eq(0)").click(function(){ $("div[title]").css("background","red");}); //<input type="button" value=" 属性title值等于test的div元素" id="b2"/> $("input:eq(1)").click(function(){ $("div[title='test']").css("background","red");}); //<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)" id="b3"/> $("input:eq(2)").click(function(){ $("div[title!='test']").css("background","red");}); //<input type="button" value=" 属性title值 以te开始 的div元素." id="b4"/> $("input:eq(3)").click(function(){ $("div[title^='te']").css("background","red");});//<input type="button" value=" 属性title值 以est结束 的div元素.." id="b5"/> $("input:eq(4)").click(function(){ $("div[title$='est']").css("background","red");});//<input type="button" value="属性title值 含有es的div元素." id="b6"/> $("input:eq(5)").click(function(){ $("div[title*='es']").css("background","red"); });//<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素" id="b7"/> $("input:eq(6)").click(function(){ $("div[id][title*='es']").css("background","red"); });</script> </html>
