方法一

<!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. WordPress调用特色图片地址源，去除特色图片img标签其他样式

    我们在制作WordPress主题时候想要给wordpress特色图片,这也是为了更加的美观,但是我们直接使用wordpress特色图片引用代码的时候却发现,出现下面的情况. wordpress特色图片 ...

  2. PAT1049:Counting Ones

    1049. Counting Ones (30) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue The tas ...

  3. 【转】mysql 中int类型字段unsigned和signed的区别

    转自https://www.cnblogs.com/wangzhongqiu/p/6424827.html 用法: mysql> CREATE TABLE t ( a INT UNSIGNED, ...

  4. SSM-MyBatis-12：Mybatis中添加单个对象返回主键id列

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 实体类 public class Book { private Integer bookID; private ...

  5. mongo Shell初体验

    mongo shell是一个MongoDB的交互式JavaScript接口.您可以使用mongo shell来查询和更新数据以及执行管理操作. 打开cmd命令行,输入mongo,就可以进入mongo ...

  6. Android 带你玩转实现游戏2048 其实2048只是个普通的控件

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40020137,本文出自:[张鸿洋的博客] 1.概述 博主本想踏入游戏开放行业,无 ...

  7. 数据分析工具Pandas

        参考学习资料:http://pandas.pydata.org 1.什么是Pandas? Pandas的名称来自于面板数据(panel data)和Python数据分析(data analys ...

  8. Python 列表list

    列表list: [ ] 类似Java中的数组. 通过索引可以取到具体位置上的值. names = ["ZhangYang","WangGui","Li ...

  9. Sql函数笔记一、case when

    Case具有两种格式.简单Case函数和Case搜索函数. 简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END   ...

  10. BZOJ_1925_[Sdoi2010]地精部落_递推

    BZOJ_1925_[Sdoi2010]地精部落_递推 Description 传说很久以前,大地上居住着一种神秘的生物:地精. 地精喜欢住在连绵不绝的山脉中.具体地说,一座长度为 N 的山脉 H可分 ...