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

最新推荐文章于 2024-05-24 00:34:26 发布

张大仙是个妖怪

最新推荐文章于 2024-05-24 00:34:26 发布

阅读量407

点赞数

分类专栏： # jQuery选择器和DOM操作

本文链接：https://blog.csdn.net/NDKHBWH/article/details/55252792

版权

jQuery选择器和DOM操作专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!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.οnclick=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>

张大仙是个妖怪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器传统javaScript选择器实例(例子)

var table1 = document.getElementById("tb");//object HTMLTableElement var tbodys = table1.getElementsByTagName("tbody");//[object HTMLCollection] var checks= document.getElementsByName("check");//[object HTMLCollection]
复制链接

扫一扫