Jquery选择器练习（一）

Example 1 遍历CheckBox控件，输出选中个数

<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="checkbox" value="4" name="check"   />

/*example 1 遍历标签*/
var GetCheckBoxNum = function() {
	var arr = new Array();
	var ckx = document.getElementsByName("check");
	for (var i = 0; i < ckx.length; i++) {
		if (ckx[i].checked) {

			arr.push(ckx[i]);
		}
	}
	alert(arr.length);
}
var $GetCheckBoxNum = function() {
	var arr = new Array();
	$("input[type=checkbox]").each(function(index) {
		if ($(this).is(":checked")) {
			arr.push($(this));
		}
	});
	alert(arr.length);
}

Example 2 设置表格序号为偶数的行的背景颜色

<table id="tab">
	<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>
	</tbody>
</table>

/*example 2 遍历标签*/
var ChangeTableBgColor = function() {
	var myTab = document.getElementById("tab");
	var tbody = myTab.getElementsByTagName("tbody")[0];
	var trs = tbody.getElementsByTagName("tr");
	for (var i = 0; i < trs.length; i++) {
		if (i % 2 == 0) {
			trs[i].style.background = "#000";
		}
	}
}
var $ChangeTableBgColor = function() {

	/*
	 $("#tab tr").css("background",function(index,oldClass){
	 if(index%2==0)
	 {
	 $(this).css("background-color","#000");
	 }
	 });
	 */
	$("#tab tr").addClass(function(index, oldClass) {
		if (index % 2 == 0) {
			$(this).css("background-color", "#000");
		}
	})
}

Example 3 遍历所有P元素，绑定onclick事件

<p>测试1</p>
<p>测试2</p>
<p>测试3</p>
<p>测试4</p>
<p>测试5</p>

/*example3 遍历标签*/
var GetAllPElement = function() {
	var ps = document.getElementsByTagName("p");
	for (var i = 0; i < ps.length; i++) {
		ps[i].onclick = function() {
			alert(this.innerHTML);
		}
	}
}
var $GetAllPElement = function() {
	$("p").each(function() {
		//$(this).bind('click',showText);
		$(this).click(function() {
			alert($(this).html());
		});
	});
}