zoukankan      html  css  js  c++  java
  • HTML 练习绑定onclick事件

    方法一

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <p onclick="func1(this)">hello p</p>
    
    <script>
        function func1(self){
            alert(self.innerHTML);
        }
    
    </script>
    </body>
    </html>
    

    方法二

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <p id="p1">hello p</p>
    </body>
    <script>
        var ele = document.getElementById("p1")
        ele.onclick=function (){
            alert(this.innerHTML)
        }
    
    </script>
    </html>
    

    方法三

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <p class="p">hello p1</p>
    <p class="p">hello p2</p>
    </body>
    <script>
        var ele = document.getElementsByClassName("p")[0];
        ele.onclick=function(){
            alert(this.innerHTML)
        }
    </script>
    </html>
    

    方法四

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-3.3.1.min.js"></script>
        <script>
            function f(){
                $("p").css("color","red")
            }
        </script>
    </head>
    <body>
    <p onclick="f()">hello world</p>
    </body>
    </html>
    

    方法五

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-3.3.1.min.js"></script>
    </head>
    <body>
    <p>hello world</p>
    </body>
    <script>
    $("p").click(function(){
        $(this).css("color","red")
    })
    </script>
    </html>
    
  • 相关阅读:
    mysql案例 ~ 监控以及如何避免从库延迟问题
    mysql基础~开发规范
    k8s系列~mgr的应用
    k8s系列~docker mysql
    常用知识点(一)
    Windows下查看进程状态/信息
    Lua入门(一)
    Lua简介
    .NET&C#的异常处理
    数据库中的锁
  • 原文地址:https://www.cnblogs.com/klvchen/p/10537666.html
Copyright © 2011-2022 走看看