第二讲 jQuery的选择器

要想出色的使用jQuery，我们做的第一件事就是找到我们要操作的元素。那么怎样找呢？在jQuery中共提供了二十多种查找元素的方法，现在就让我为大家一一介绍给大家吧！

1.CSS选择器

基本选择器的常用方式：

$(“ 标签名 ”); —— 查找所有的标签元素

$(“ .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>