JQuery 选择器

<script type="text/JavaScript">
	function test(){
		alert("JavaScript demo");
	}
</script>

<p onclick="test();">点击我</p>

   像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥，因为它并没有将网页内容和行为分离，所以才有JQuery选择器的学习。

例：

	<p class="demo">点击我</p>

	<script type="text/JavaScript">
		$(".demo").click(function(){	//给class为demo的元素添加行为
			alert("demo的单击事件！");
		})
	</script>

   JQuery中涉及操作CSS样式的部分比单纯的CSS功能更为强大，并且，拥有跨浏览器的兼容性。


JQuery 选择器的优点：

  1、简洁的写法
$("#ID")用来代替document.getElementById("ID")函数，即通过ID获取元素。
$("TagName")用来代替document.getElementByTagName("TagName")函数，即通过标签名获取HTML元素。

  2、支持css1到css3选择器
在JQuery中，开发人员可以放心地使用JQuery选择器而无需考虑浏览器是否支持这些选择器。

  3、完善的处理机制

$("#tt").css("color","red"); 

	f($("#tt")){
	    //do something
	}

if($("#tt").length>0){
	//do something
}

	if($("#tt")[0]){
		//do something
	}

	<p>测试1</p>
	<p>测试2</p>

	实现步骤：
		1)获取所有的<p>元素
		2)对<p>元素进行循环(因为获取的是数组对象)
		3)给每个<p>元素添加行为事件

	JavaSript代码如下：
		 //获取网页中所有的p元素
		 var items = document.getElementByTagName("p");
		 for(var i = 0;i<=items.length;i++){
			//由于获取的是数组对象，因此需要挨个把它循环出来
			items[i].onclick = function(){	//给每个对象添加onclick事件
				//do something
			}
		 }

HTML代码如下：

	<table id="tb">
		<tbody>
			<tr>
				<td>第一行</td>
				<td>第一行</td>
			</tr>
			<tr>
				<td>第二行</td>
				<td>第二行</td>
			</tr>
			<tr>
				<td>第三行</td>
				<td>第三行</td>
			</tr>
			<tr>
				<td>第四行</td>
				<td>第四行</td>
			</tr>
			<tr>
				<td>第五行</td>
				<td>第五行</td>
			</tr>
			<tr>
				<td>第六行</td>
				<td>第六行</td>
			</tr>
		</tbody>	
	</table>

步骤实现如下：

1)根据表格id获取表格

2)在表格内获取<tbody>元素

3)在<tbody>元素下获取<tr>元素

4)循环输出获取的<tr>元素

5)对<tr>元素的索引值除以2并取模，然后根据奇偶设置不同的背景色。

JavaSript代码如下：

	//获取id为tb的元素(table)
	var item=document.getElementById("tb");
	//获取表格第一个tbody元素
	var tbody=document.getElementByTagName("tbody")[0];
	//获取tbody元素下的所有tr元素
	var trs = document.getElementByTagName("tr");
	//循环trs元素
	for(var i=0;i<trs.length;i++){
		if(i%2==0){
			//改变符合条件的tr元素的背景色
			trs[i].style.backgroundColor="#888";
		}
	}

HTML代码如下：

	<input type="checkbox" value="1" name="check" checked/>
	<input type="checkbox" value="2" name="check"/>
	<input type="checkbox" value="3" name="check" checked/>
	<input type="button" value="你选中的个数" id="btn"/>

实现步骤：

1)新建一个空数组

2)获取所有name为"check"的多选框

3)循环判断多选框是否被选中，如果被选中则添加到数组里。

4)获取输出按钮，然后为按钮添加onclick事件，输出数组的长度即可。

JavaSript代码如下：

	//获取id为btn的元素(button)
	var btn = document.getElementById("btn");
	//给元素添加onclick事件
	btn.onclick = function(){	
		//创建一个数组对象
		var arrays = new Array();
		//获取name为check的一组元素(checkbox)
		var items = document.getElementsByName("check");
		//循环这组数据
		for(i=0;i<items.length;i++){
			//判断是否选中
			if(items[i].checked){
				//把符合条件的数据添加到数组中
				arrays.push(items[i].value);
				//push()是JavaScript数组中的方法
			}
		}
		alert("选中的个数为："+arrays.length);
	}

    上面的几个例子都是用传统的JavaSript方法进行操作，编写很枯燥名称也冗长，然而在JQuery中，类似的这些操作则是非常简洁。

使用JQuery选择器来实现上面的3个示例：

示例1：给页中的所有<p>元素添加onclick事件。

	//获取页面中的所有<p>元素，给每一个<p>元素添加onclick事件
	$("p").click(function(){
		//doing something
	})

示例2：使一个特定的表格隔行变色。

$("#tb tbody tr:even").css("backgroundColor","#6699cc")

示例3：对多选框进行操作，输出选中的多选框的个数。

var length=$("input[name='check']:checked").length;