jQuery选择器(一)

晚上闲着没事，正好用来整理下jQuery的选择器，毕竟没有总结就不算学习嘛。

首先，对事件处理、遍历DOM和Ajax操作，都依赖于选择器。

1.CSS选择器

要使用某个HTML元素，就先要找到它，而css选择器比较简单，不废话，主要常用的有 文档元素做选择符、ID做选择符、class做选择符，举例：

文档元素：

li{

　　font-size:13px;

}

a{

　　text-decoration:none;

}

ID方式：

#txtName{

　　font-size:13px;

}

Class方式：

.info{

font-size:13px;

}

Table.tr.td{

font-size:13px;

}

上面的最常用到的，另外还有：

//多个选择符应用同样的样式

div,td,p.a{

font-size:13px;

}

//元素的任意后代元素

#sure  a{

color:blue;

}

上面的我所列举的样式选择器，是现在几乎全有浏览器都支持的，其他的，就不再举例了。

2．jQuery选择器

jQuery的行为规则，必须在获取到元素后才能生效。

<div class=”btn” id=”save”>确定</div>

<script type=”text/javascript”>

$(“.btnSave”).click(function(){

alert(‘被点到了’);

});

</ script>

其中的$(“.btnSave”)就是通过class来获取元素的，因为这个class很可能有多个，而ID是唯一的，所以通常用ID进行选择，选择的方式是:

$(“#save”).click(function(){

alert(‘被点到了’);

});

实现的效果是一样的，还可以用div的onclik()事件：

<div class=”btn” id=”save” onclick=”sure()”>确定</div>

<script type=”text/javascript”>

Function sure(){

alert(‘被点到了’);

}

</ script>

大家会发现jQuery会比JS的写法简洁些，下面我就着重总结些选择器吧。

$(“#ID”) 等效于 document.getElementById(“ID”)

$(“标签元素”) 等效于document.getElementByTagName(“标签元素”)

$(“.txt”) 选取所有的class为txt的元素

$(“p”)选取所有的p标签

$(“*”)选取所有的元素

$(“div p td.text”)选取所有的<div>,<p>以及calss为test的<td>标签元素

如果用上面选择器改变元素样式的话，写法：

$(“#ID”).css(“background”,”#666666”);

$(“div p”)选取所有的DIV里的<p>标签元素//选择的是后代的元素

$(“div > p”)选取<div>下，元素名<p>的子元素（请注意和上面的区别）

$(“#test + td”) 等同于 $(“.test ”).next()  选取紧接着id为test的下一个<td>

$(“#text”).nextAll()选取id为test后面的所有同辈<td>元素

$(“#text”).siblings(“td”) 选取id为test的所有同辈<td>元素，无论前后