正式学习jQuery选择器_H5之家 - 中国HTML5教程资源分享第一站

先看看用传统的JavaScript方法获取页面中的元素，然后给元素添加行为事件的例子。

一给网页中的所有<p>元素添加onclick事件。

<p>测试1</p>
<p>测试2</p>

var items = document.getElementsByTagName("p");//获取页面中的所有p元素
for(var i=0;i < items.length;i++){ //循环
    items[i].onclick = function(){ //给每一个p添加onclick事件
        //doing something...
        alert("suc!");
    }
}

二使一个特定的表格隔行变色。
<table id="tb">
    <tbody>
        <tr><td>第一行</td><td>第一行</td></tr>
        <tr><td>第二行</td><td>第二行</td></tr>
        <tr><td>第三行</td><td>第三行</td></tr>
        <tr><td>第四行</td><td>第四行</td></tr>
        <tr><td>第五行</td><td>第五行</td></tr>
        <tr><td>第六行</td><td>第六行</td></tr>
    </tbody>
</table>

var item = document.getElementById("tb");         //获取id为tb的元素(table)
var tbody = item.getElementsByTagName("tbody")[0]; //获取表格的第一个tbody元素
var trs =   tbody.getElementsByTagName("tr");           //获取tbody元素下的所有tr元素
for(var i=0;i < trs.length;i++){//循环tr元素
    if(i%2==0){        //取模. (取余数.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1)
        trs[i].style.backgroundColor = "#888"; // 改变符合条件的tr元素的背景色.
    }
}

三对多选框进行操作，输出选中的多选框的个数。

<input type="checkbox" value="1" name="check" checked="checked"/>
<input type="checkbox" value="2" name="check" />
<input type="checkbox" value="3" name="check" checked="checked"/>
<input type="button" value="你选中的个数" id="btn"/>

btn.onclick = function(){                  //给元素添加onclick事件
    var arrays = new Array();              //创建一个数组对象
    var items = document.getElementsByName("check"); //获取name为check的一组元素(checkbox)
    for(i=0; i < items.length; i++){ //循环这组数据
        if(items[i].checked){      //判断是否选中
            arrays.push(items[i].value); //把符合条件的添加到数组中. push()是javascript数组中的方法.
        }
    }
    alert( "选中的个数为："+arrays.length );
}

上面的几个例子都是用传统的JavaScript方法进行操作，中间使用了getElementByld()、getElementsByTagName()和getElementsByName()等方法，然后动态地给元素添加行为或者样式。这些虽然都是JavaScript中最简单的操作，但不断重复使用getElementByld()和getElementsByTagName()等冗长而难记的名称，使越来越多的开发人员歼始厌倦这种枯燥的写法，并且有时候为了获取网页中的某个元素，需要编写很多的getElementByld()和getElementsByTagName()方法。然而在jQuery中，类似的这些操作则是非常简洁。

下面学习如何使用jQuery获取这些元素。

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。在下面的章节中将分别用不同的选择器来查找HTML代码中的元素并对其进行简单的操作。为了能更清晰、直观地讲解选择器，首先需要设计一个简单的页面，里面包含各种<div>元素和<span>元素，然后使用jQuery选择器来匹配元素并调整它们的样式。

<div class="one" id="one" >
d为one,class为one的div
    <div class="mini">class为mini</div>
</div>

<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
    <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>

然后用CSS对这些元素进行初始化大小和背景颜色的设置，CSS代码如下：

div,span,p {
width:140px;
height:140px;
margin:5px;
background:#aaa;
order:#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;
}

一、基本选择器

基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。在网页中，每个id名称只能使用一次，class允许重复使用。

基本选择器的介绍说明如下表所示。

选择器描述返回示例

#id 根据给定的id匹配一个元素单个元素 $("#test")选取id为test的元素

.class 根据给定的类名匹配元素集合元素 $(".test")选取所有class为test的元素

element 根据给定的元素名匹配元素集合元素 $("p")选取所有的<p>元素

* 匹配所有元素集合元素 $("*")选取所有的元素