正式学习jQuery选择器

摘要 先看看用传统的JavaScript方法获取页面中的元素，然后给元素添加行为事件的例子。 一 给网页中的所有p元素添加onclick事件。 p测试1/p p测试2/p var items = document.getElementsByTagName(p);//获取页面中的所有p元素 for(var i=0;i items.length;i++){ //

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

一 给网页中的所有

元素添加onclick事件。

测试1

 

测试2

   

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

二 使一个特定的表格隔行变色。

                                                                         

第一行	第一行
第二行	第二行
第三行	第三行
第四行	第四行
第五行	第五行
第六行	第六行

 

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元素 的背景色.  
}  
}

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

 
 
 

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代码中的元素并对其进行简单的操作。为了能更清晰、直观地讲解选择器，首先需要设计一个简单的页面，里面包含各种