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>
    
  • 相关阅读:
    网站视频播放器JCPlayer
    常用Linux命令操作
    对词法分析器的了解
    实验二简化版C语言中文理解程序文法
    词法分析
    实验三有穷自动机的构造和识别
    组合数据类型练习,综合练习
    零基础初学者学习编译原理
    用python画五星红旗
    Android环境搭建和编写helloworld
  • 原文地址:https://www.cnblogs.com/klvchen/p/10537666.html
Copyright © 2011-2022 走看看