您的位置：首页 > Web前端 > JQuery

jQuery选择器传统javaScript选择器实例(例子)

2017-02-16 10:48 302 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../jquerysource/jquery.js" type="text/javascript"></script>

</head>
<body>
<p>点击事件1</p>

<p>点击事件2</p>
<br/>
<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>
<tr>
<td>第七行</td>
<td>第七行</td>
</tr>
</tbody>
</table>
<br/>
<input type="checkbox" valu="1" name="check" checked="checked"/>
<input type="checkbox" valu="2" name="check" />
<input type="checkbox" valu="3" name="check" checked="checked"/>
<input type="checkbox" valu="4" name="check"/>
<input type="button" valu="选中的复选框" id="btn"/>
<script type="text/javascript">
//１．给每个p元素添加点击事件
var pList = document.getElementsByTagName("p");//[object HTMLCollection]
for (var i = 0; i < pList.length; i++) {
pList[i].onclick = function () {
alert("1");
}
}
//２．使表格隔行变色
var table1 = document.getElementById("tb");//object HTMLTableElement
var tbodys = table1.getElementsByTagName("tbody");//[object HTMLCollection]
var trs = tbodys[0].getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
if (i % 2 == 0) {
trs[i].style.backgroundColor = "#888";
}
}
//3.输入选中多选框的个数
var btn = document.getElementById("btn");
btn.onclick=function(){
var checks=  document.getElementsByName("check");
var count=0;
for (var i = 0; i < checks.length; i++) {
if(checks[i].checked){
count++;
}
}
alert("选中了"+count+"个");
}
</script>
</body>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

jQuery选择器 传统javaScript选择器实例(例子)

jQuery选择器传统javaScript选择器实例(例子)