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());
});
});
}