方法一

<!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. webpack,配置,上手,例子

    1.webpack是什么? 2.为什么要用webpack? 3.怎么用webpack? webpack是什么? 答:webpack是前端模块化应用和开发的打包工具,解决前端模块依赖的工具.打包所有的脚 ...

  2. Java并发包之同步队列SynchronousQueue理解

    1 简介 SynchronousQueue是这样一种阻塞队列,其中每个put必须等待一个take,反之亦然.同步队列没有任何内部容量,甚至连一个队列的容量都没有.不能在同步队列上进行peek,因为仅在 ...

  3. Linux时间子系统之(六):POSIX timer

    专题文档汇总目录 Notes:首先讲解了POSIX timer的标识(唯一识别).POSIX Timer的组织(管理POSIX Timer).内核中如何抽象POSIX Timer:然后分析了POSIX ...

  4. JavaScript-通过原型继承一个对象

    <script> //通过原型继承一个对象 //inherit()返回了一个继承原自原型对象P的属性的新对象 //這裡使用ECMAScript5中的object.create()函數(如果 ...

  5. 在不重装系统的情况下创建Linux的Swap分区

    本文由荒原之梦原创,原文链接:http://zhaokaifeng.com/?p=649 操作环境: CentOS 7 操作背景: 本文中使用的CentOS Linux系统在安装的时候没有创建Swap ...

  6. 【SpringMVC】从Fastjson迁移到Jackson,以及对技术选型的反思

    为什么要换掉fastjson 直接原因是fastjson无法支持注解形式的自定义序列化和反序列化,虽然其Github上的Wiki上说明是支持的.但是实测结果表明:Test类的序列化被fastjson的 ...

  7. [ Java面试题 ]数据库篇

    基本表结构: student(sno,sname,sage,ssex)学生表 course(cno,cname,tno) 课程表 sc(sno,cno,score) 成绩表 teacher(tno,t ...

  8. Vue路由学习心得

    GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍  1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...

  9. 关于ftp用户连接时出现500 OOPS: cannot change directory的解决办法

    RHEL5 中配置好后,今天想在XP下用ftp连接虚拟机中的linux,但ftp连接的时候会出现 "500 OOPS:cannot change directory:/root" ...

  10. hibernate关系映射

    多对一:比如多个订单对应同一个用户,需要在订单表中添加一个用户的属性 订单类: private Integer orderId; private Date createTime; private Us ...