jQuery查询
练习代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <style type="text/css"> div { height:100px; width:100px; border:1px solid red; } #d1 { height :300px; width:300px; border:1px solid blue; } .d1-1 { height:200px; width:200px; border:1px solid blue; } li { border:1px solid pink; } </style> <script language="javascript" type="text/javascript" src="jquery-1.4.1.js"> </script> <script language="javascript" type="text/javascript"> function Button1_onclick() { // var u = document.getElementById("u1"); // u.innerHTML = "";//清空 // var u = document.getElementById("d1"); // u.innerHTML = "<a href='#'>大家好</a>";//innerhtml显示的是一个文本为大家好的超链接 //var u = document.getElementById("d1"); //u.innerText = "<a href='#'>大家好</a>";//innerhtml显示的是一个文本为"<a href='#'>大家好</a> //标签选择器查询 //var $dc = $("div"); //$dc.css("backgroundColor","pink"); //$dc[1].style.backgroundColor = "red";//把jquery转换成了js //var b= document.getElementById("d2"); //var $b = $(b); //$b.css("backgroundColor","gray"); //把js转换成了jquery //id选择器查询 //var $dc = $("#d1"); // $dc.css("backgroundColor","yellow"); //类选择器查询 //var $dc = $(".c3"); //$dc.css("backgroundColor","blue"); //查找标签里是li的又一个标签li里的信息 //var $dc = $("li li");//也可以这样清楚的写一下 var $dc=$("ul li li"); // $dc.css("backgroundColor", "pink"); //给类是.d1-1这个边框改变颜色 //var $dc = $(".d1-1"); // $dc.css("borderColor","black"); //表示给id=d1的直接子元素中的div改变边框颜色 //var $dc = $("#d1>div"); //$dc.css("borderColor", "black"); //表示给紧跟id=d1的元素并且标签为div //var $dc = $("#d1+div"); //$dc.css("borderColor", "black"); //表示给id=d1的兄弟元素并且标签为div的边框改变颜色 //var $dc = $("#d1~div"); // $dc.css("borderColor", "black"); //除了id=d2的边框,其余的都变黑 //var $dc = $("div:not(#d2)").css("borderColor", "black"); //even表示偶数元素的边框变成黑色 //var $dc=$("div:even").css("borderColor", "black"); //eq表示等于3的边框变成黑色 //var $dc = $("div:eq(3)").css("borderColor", "black"); //表示div有文本内容为含有a3的字符串的边框变黑 //var $dc = $("div:contains(a3)").css("borderColor", "black"); //表示div不包含任何内容的div元素 // var $dc = $("div:empty").css("borderColor", "black"); //表示在标签为tr里的用input元素的改变背景颜色 // var $dc = $("tr:has(input)").css("backgroundColor", "pink"); //表示选取有属性的aa的div元素 //var $dc = $("div[aa]").css("borderColor", "black"); // //var $dc = $("li:nth-child(3n-1)").css("borderColor", "black"); //删除 var $dc = $("li li"); $dc.remove(); } </script> </head> <body> <div id="d1" aa="a1">a1aa <div class="d1-1"></div> <div class="d1-1-1"></div> </div> <div id="d2" aa="a1">a2aa</div> <div id="d3" class="c3" aa="a1">a3aa</div> <ul id="u1"> <li> 湖北 <ul> <li>武汉</li> <li>荆州</li> <li>监利</li> </ul> </li> <li> 新疆 <ul> <li>乌鲁木齐</li> <li>吐鲁番</li> <li>伊犁</li> </ul> </li> </ul> <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" /><br/> <table> <tr> <td> <input id="Checkbox1" type="checkbox" /><td>湖北</td> </td> </tr> <tr> <td> <input id="Checkbox2" type="checkbox" /><td>湖南</td> </td> </tr> <tr> <td> <input id="Checkbox3" type="checkbox" /><td>河北</td> </td> </tr> <tr> <td> <input id="Checkbox4" type="checkbox" /><td>新疆</td> </td> </tr> <tr> <td> zhuzhuzuhuzh<td>afagafgadgh</td> </td> </tr> </table> </body> </html>