zoukankan      html  css  js  c++  java
  • 使用原生js 实现点击消失效果

    JQ版

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>菜鸟教程(runoob.com)</title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(document).ready(function () {
                $("p").click(function () {
                    $(this).hide();
                });
            });
        </script>
    </head>
    
    <body>
        <p>如果你点我,我就会消失。</p>
        <p>继续点我!</p>
        <p>接着点我!</p>
    </body>
    
    </html>

    JS版

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>菜鸟教程(runoob.com)</title>
    
    </head>
    
    <body>
        <p>如果你点我,我就会消失。</p>
        <p>继续点我!</p>
        <p>接着点我!</p>
    
        <script>
            // 使用原生js 实现点击消失效果
            window.onload = function () {
    
                var ppp = document.getElementsByTagName("p");
                console.log(ppp)
                if (ppp.length > 0) {
                    for (var i = 0; i < ppp.length; i++) {
                        console.log(ppp[i])
                        ppp[i].addEventListener("click", function () {
                            this.hidden = true;
                        });
                    }
                }
    
            }
        </script>
    </body>
    
    </html>

    有时间再详细说一下js的事件冒泡和事件捕获。

  • 相关阅读:
    文本字符集转换
    添加HP消息队列
    fedora19/opensuse13.1 配置svn client
    前端html---介绍前端,标签,列表
    数据分析1
    项目流程
    git 使用
    mongo基础
    linux上面pycharm汉化
    pythonNet 09协程
  • 原文地址:https://www.cnblogs.com/rongyao/p/11111428.html
Copyright © 2011-2022 走看看