晚上闲着没事,正好用来整理下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>元素,无论前后