点击 li ，输出被点击 li的内容，6种方法 let，this，设置属性，DOM对象，闭包，jq。

最新推荐文章于 2023-10-26 14:03:34 发布

礼小七

最新推荐文章于 2023-10-26 14:03:34 发布

阅读量487

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/lixiaoqidecsdn/article/details/121243261

版权

JavaScript 事件处理闭包点击事件作用域

关键词由CSDN通过智能技术生成

<body>
    <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <script src="js/jquery-1.11.1.js"></script>

    <script>
        var lis = document.querySelectorAll('ul li')
        //.var 声明最终都打印10------错误示例--------------------------------------------
        /*      for (var i = 0; i < lis.length; i++) {
                 lis[i].onclick = function () {
                     //   console.log(i);
                 }
             } */
        //for循环执行完之后打印，只会打印最后一个


        //1.用let关键字.块级作用域--------------------------------------·········
        /*     for (var i = 0; i < lis.length; i++) {
                lis[i].onclick = function () {
                    //   console.log(i);
                }
            } */
        //2解决 this对象-------------------------------------------------······
        /*    for (var i = 0; i < lis.length; i++) {
               lis[i].onclick = function () {
                   // console.log(this.innerHTML);
               }
           } */
        //3.设置属性--------------------------------------------···················
        //setAttribute() 方法添加指定的属性，并为其赋指定的值。
        //getAttribute() 方法返回指定属性名的属性值。
        //document.getElementsByTagName("INPUT")[0].setAttribute("type","button");
        /*     for (var i = 0; i < lis.length; i++) {
                lis[i].setAttribute('index', i)
                lis[i].onclick = function () {
                    // console.log(this.getAttribute('index'));
                }
            } */
        //4.dom对象看成一个普通对象，通过.的方式------------------------············
        /*   lis[i].index = i
          lis[i].onclick = function () {
              //  console.log(this.index);
          } */
        //5闭包 ----------------------------------------------------------------
        /*      for (var i = 0; i < lis.length; i++) {
                 (function (index) {
                     lis[i].onclick = function () {
                      //   console.log(index);
                     }
                 })(i)
     } */
        //6.jq解决
      // $('ul li').on('click', function () {
        //   console.log($(this).index());
      // })
    </script>
</body>

礼小七

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击 li ，输出被点击 li的内容，6种方法 let，this，设置属性，DOM对象，闭包，jq。

<body> <ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> ...
复制链接

扫一扫