方法一

<!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>

HTML 练习绑定onclick事件的更多相关文章

  1. Android：后台给button绑定onClick事件、当返回项目到手机页面时提示是否退出APP

    上一篇文章我们学习了android通过findViewById的方式查找控件,本章将了解button控件,及btton如何绑定控件. 通过android的ui设计工具设计一个登录页面: <Rel ...

  2. 在js中绑定onclick事件为什么不加括号，在html代码中必须要加？

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 问题解决：在js中绑定onclick事件为什么不加括号，在html代码中必须要加？（转载）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. element onclick 动态创建元素并绑定onclick事件

    <html> <head> <meta charset="UTF-8"> <title>b</title> <sc ...

  5. JS中的onclick事件

    原文链接:https://segmentfault.com/q/1010000007955542?_ea=1503986 我自己做了一下测试. 这个是在html里面直接绑定onclick事件,我打印了 ...

  6. 给js创建的一个input数组绑定click事件

    <html> <body> <input type="button" name="input[]" value="按钮1 ...

  7. Jquery 移除 html中绑定的onClick事件

    HTML绑定示例: <button class="edit" onClick="showTurnEdit(this)">编辑</button& ...

  8. 使用jquery移除前面通过onclick绑定的元素的事件，然后重新绑定别的函数来执行onclick事件。

    http://caibaojian.com/css3/experience/bugs.htm 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件. ...

  9. js click 与 onclick 事件绑定,触发与解绑

    click 与 onclick 1.onclick 事件会在对象被点击时发生. <input id="btn1" type="button" onclic ...

随机推荐

  1. hdu-3071 Gcd & Lcm game---质因数分解+状态压缩+线段树

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3071 题目大意: 给定一个长度为n的序列m次操作,操作的种类一共有三种 查询 L :查询一个区间的所 ...

  2. Netflix性能监控工具Vector

    简介: Vector是Netflix开源的主机级性能监控框架,向每位工程师的浏览器提供精心挑选的高分辨率系统和应用程序指标. 登录到系统并从shell运行大量命令是一种选择,但是通常涉及的复杂性可能成 ...

  3. 结构化您的Python工程

    我们对于"结构化"的定义是您关注于怎样使您的项目最好地满足它的对象性,我们 需要去考虑如何更好地利用Python的特性来创造简洁.高效的代码.在实践层面, "结构化&qu ...

  4. getopts的使用

    getopts的使用 语法格式:getopts [option[:]] [DESCPRITION] VARIABLE option:表示为某个脚本可以使用的选项 ":":如果某个选 ...

  5. kafka实战

    1.       kafka介绍 1.1.       主要功能 根据官网的介绍,ApacheKafka®是一个分布式流媒体平台,它主要有3种功能: 1:It lets you publish and ...

  6. Java与Kotlin, 哪个是开发安卓应用的首选语言？

    Java是很多开发者创建安卓应用的首选语言.但它在 Android 界的领导地位正受到各种新语言的挑战,Kotlin就是其一.虽然Kotlin最近才开始受到热捧,但有为数不少的人相信 Kotlin 在 ...

  7. Python logger 没打出行数

    # !/user/bin/python # -*- coding: utf-8 -*- ''' subprocess : 需要在linux平台上测试 shell logging ''' import ...

  8. java Queue中 add/offer，element/peek，remove/poll区别

    转自https://blog.csdn.net/u012050154/article/details/60572567 java Queue中 add/offer,element/peek,remov ...

  9. MAC下Intellij IDEA常用快捷键

    alt+f7 : 查找在哪里使用 command+alt+f7 : 这个是查找选中的字符在工程中出现的地方,可以不是方法变量类等,这个和上面的有区别的 command+F7 : 可以查询当前元素在当前 ...

  10. 在docker上运行.net core程序

    一.安装docker及镜像 1.在centos上安装docker,命令如下: # yum install docker 2.让docker随机启动: # service docker start# c ...