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

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

2017-02-22 10:36 441 查看

<!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");
//        }
//    }
$("p").click(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";
//        }
//    }
$("#tb tbody tr:even").css("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+"个");
//    }
$("#btn").click(function(){
var items= $("input[name='check']:checked");
alert("选中了"+items.length+"个");
});
</script>
</body>
</body>
</html>

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

标签： jQuery 选择器

相关文章推荐

新的分享

章节导航

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

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