$(“ 标签名 ”); —— 查找所有的标签元素
$(“ .Class ”); —— 根据Class查找元素
$(“ #ID ”); ——根据ID查找元素
2.次关系查找（父子关系查找）
|
$(“ 标签1 标签2 ”); —— 空格表示，所有的子元素（包括孙子节点） 跟 $(“标签1”).children(“标签2”)作用相同; 示例：$("body div").css("background","#ccc") 改变<body>内所有<div>的背景颜色 |
|
$(“ 标签1 > 标签2 ”); —— “>”表示，标签1的子元素（不包括孙子节点） 示例：$("body>div").css("background","#ccc") 改变<body>内子<div>的背景颜色 |
|
$(“ 标签1 + 标签2 ”); —— “+”表示，同级别的下一个兄弟节点。 跟 $(“标签1”).next (“标签2”)作用相同; 示例：$(".one+div").css("background","#ccc") 改变class为one的下一个<div>的背景颜色 |
|
$(“ 标签1 ~ 标签2 ”); —— “+”表示，同级别的所有兄弟节点。 $(“标签1”).nextAll(“标签2”)作用相同; 示例：$(".one+div").css("background","#ccc") 改变class为one元素后面的所有<div>的背景颜色 |
parent（）—— 唯一父元素。
parents（）—— 祖先元素。
prev（）—— 上一个兄弟元素。
prevAll（）—— 前面所有的兄弟元素。
siblings（）—— 所有同辈元素（前面所有+后面所有）。
2. 使用过滤器的方式查找（带条件的查找）？
基本过滤：（使用下标）
：even —— 偶数个。示例：$("div:even")选取索引是偶数的<input>元素(从0开始)
：odd —— 奇数个。示例：$("div:odd")选取索引是奇数的<input>元素(从0开始)
：eq —— 指定位置。（使用的是下标）示例：$("div:eq(1)")选取索引等于1的<input>元素
：gt —— 大于 示例：$("div:eq(1)")选取索引大于1的<input>元素
：lt —— 小于 示例：$("div:eq(1)")选取索引小于1的<input>元素
内容过滤：（根据内容进行过滤）
：contains（“关键字“） —— 根据关键字进行过滤。 示例：$("div:contains("我")")选取含文本"我"的<div>的元素
：has（指定标签、ID、Class） —— 包含有指定元素的标签对象。 示例：$("div:has(p)")选取含有<p>元素的div元素
基于属性过滤：（使用“[ ]“）
1. [属性名] —— 必须包含指定属性 示例：$("div[id]")选取拥有属性id的元素
2. [属性名=值] —— 必须包含指定属性和值 示例：$("div[title=test]")选取拥有属性title为"test"的<div>元素
3. [属性名=值] [属性名=值] —— 必须包含所有指定属性和值。示例：$("div[title=test][id=testId]")选取拥有属性title为"test"并且属性id为"testId"的<div>元素
特殊属性：
：checked —— 表示获取选中的复选框、单选框。
：selected —— 表示获取下拉列表中选中项。
3. 表单选择器（查找表单元素）？
跟属性选择器类似。（不做解释，详细请见帮助文档）
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script src="../jquery/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ $("table tr").each(function(){ $(this).toggle(function(){ $(this).addClass("highlight"); },function(){ $(this).removeClass("highlight"); }); }); $("#chkAll").click(function(){ $("table tr").addClass("highlight"); }); $("#noChkAll").click(function(){ $(".highlight").removeClass("highlight"); }); $("#inverse").click(function(){ $("table tr").toggleClass("highlight"); }); }); </script> <style type="text/css"> table{ border:1px solid #ccc; border-collapse:collapse; width:100%; line-height:25px; } table td{ border:1px solid #ccc; } .highlight{ background:#CCCCCC; } </style> </head> <body> <div> <input type="button" name="chkAll" id="chkAll" value="全选"/> <input type="button" name="noChkAll" id="noChkAll" value="取消选择"/> <input type="button" name="inverse" id="inverse" value="反选"/> </div> <table> <tr style="background:#666666;"> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> </table> </body> </html>
详细 <!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>选择器</title> <style type="text/css"> div,span,p{ width:140px; height:140px; margin:5px; background:#aaa; border:#000 1px solid; float:left; font-size:17px; font-family:Verdana; } div.mini{ width;55px; height:55px; background-color:#aaa; font-size:12px; } div.hide{ display:none; } </style> <script src="../jquery/jquery-1.7.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ //$("#one").css("background","#bbffaa");//改变id为one的元素的背景颜色 //$(".mini").css("background","#bbffaa");//改变class为mini的元素的背景颜色 //$("div").css("background","#bbffaa");//改变元素名称是div的所有元素的背景颜色 //$("*").css("background","#bbffaa");//改变所有元素的背景颜色 //$("span,#two").css("background","#bbffaa");//改变名称是span和id为two的元素的背景颜色 //$("body div").css("background","#bbffaa");//改变body内所有div的背景颜色 //$("body>div").css("background","#bbffaa");//改变body内子div的背景颜色 //改变class为one的下一个div元素的背景颜色 //$(".one+div").css("background","#bbffaa"); //$(".one").next("div").css("background","#bbffaa"); //改变id为two的元素后面的所有div兄弟元素的背景颜色 //$("#two~div").css("background","#bbffaa") //$("#two").nextAll("div").css("background","#bbffaa"); //$("div:first").css("background","#bbffaa");//改变div元素中的第一个子元素的背景颜色 //$("div:last").css("background","#bbffaa");//改变div元素中的第一个子元素的背景颜色 //$("div:not(.one)").css("background","#bbffaa");//改变class不为one的所有div元素的背景颜色 //$("div:even").css("background","#bbffaa");//改变索引为偶数的div的背景颜色，索引从第一个div（0）开始 //$("div:odd").css("background","#bbffaa");//改变索引为奇数的div的背景颜色，索引从第一个div（0）开始 //$("div:eq(3)").css("background","#bbffaa");//改变索引为3的div的背景颜色，索引从第一个div（0）开始 //$("div:gt(3)").css("background","#bbffaa");//改变索引大于3的div的背景颜色，索引从第一个div（0）开始 //$("div:lt(3)").css("background","#bbffaa");//改变索引小于3的div的背景颜色，索引从第一个div（0）开始 //$(":header").css("background","#bbffaa");//改变所有标题元素的背景颜色 //$(":animated").css("background","#bbffaa");//改变当前正在执行动画元素的背景颜色 }); </script> </head> <body> <div class="One" id="one"> <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> <div class="mini" title="other">class为mini，title为other</div> <div class="mini" title="test">class为mini，title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini，title为tesst</div> </div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为hide的div</div> <div>包含input的type为"hidden"的div<input type="hidden" size="8" /></div> <span id="mover">正在执行动画的span的元素</span> </body> </html>