JQuery学习笔记 选择器 序

关于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].onclick=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.onclick=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（第二版）》