关于jQuery选择器 序
熟练地操作选择器可以达到事半功倍的效果。
jQuery选择器的写法和CSS选择器的写法非常像是,不过两者的作用效果不同,CSS选择器找到元素后是添加样式,而jQuery选择器找到元素后是添加行为。jQuery中设计操作CSS样式的部分比单纯的CSS功能更为你强大,并且拥有跨浏览器的兼容性。
jQuery选择器的优势
1、写法简洁。用$("#id")即可代替document.getElementById("id");
2、支持CSS1到CSS3
3、完善的处理机制,不仅简洁,还能避免某些错误
<div>test</div>
<script type="text/javascript">
document.getElementById("tt").style.color="red";
</script>
运行上面的代码,程序报错,因为没有id为tt的元素
改进后:
<div>test</div>
<script type="text/javascript">
var ele = document.getElementById("tt");
if(ele){
ele.style.color="red";
}
</script>
这样就可以避免报错,但因为每次都要写代码判断,会做重复的工作,并不是很好。改用jQuery:
<div>test</div> <script type="text/javascript"> $("#tt").css("color","red");//无需判断$("tt")的存在 </script>
有了这个预防措施,即使以后因为某种原因删除网页上某个以前使用过的元素,也不用担心这个网页的Javascript代码会报错。
需要注意的是,$("#tt")获取的永远是对象,即使网页上没有此元素。因此当要用jQuery检查某个元素在网页上是否存在时,不能用if($("#tt")){},
而应该获取到元素的长度来判断,代码如下:
if($("#tt").length>0){...}
或者转换成DOM对象
if($("#tt")[0]){...}
正式开始jQuery的选择器之前,先看看传统的javascript的几组例子
1、给网页中所有<p>元素添加onclick事件
<p>测试1</p>
<p>测试2</p>
var items = document.getElementsByTagName("p");
for(var i=0;i<items.length;i++){
items[i].οnclick=function{
...
}
}
2、是特定的表格隔行变色
<table id="tb">
<tbody>
<tr><td>第1行</td><td>第1行</td></tr>
<tr><td>第2行</td><td>第2行</td></tr>
<tr><td>第3行</td><td>第3行</td></tr>
<tr><td>第4行</td><td>第4行</td></tr>
<tr><td>第5行</td><td>第5行</td></tr>
<tr><td>第6行</td><td>第6行</td></tr>
</tbody>
</table>
var item = document.getElementById("tb");
var tbody = document.getElementsByTagName("tbody")[0];
var trs = tbody.getElementsByTagName
for(var i=0;i<trs.length;i++){
if(i%2==0){
trs[i].style.backgroundColor="#888";
}
}
3、对多选框进行操作,输出选中的多选框的个数
<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"/> var btn = document.getElementById("btn"); btn.οnclick=function(){ var arrays = new Array(); var items = document.getElementsByTagName("check"); for(var i=0;i<items.length;i++){ if(items[i].checked){ arrays.push(item[i].value); } } alert("选中的个数为:"+arrays.length); }
-----总结自《Jquery(第二版)》