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>
HTML 练习绑定onclick事件的更多相关文章
- Android：后台给button绑定onClick事件、当返回项目到手机页面时提示是否退出APP
上一篇文章我们学习了android通过findViewById的方式查找控件,本章将了解button控件,及btton如何绑定控件. 通过android的ui设计工具设计一个登录页面: <Rel ...
- 在js中绑定onclick事件为什么不加括号，在html代码中必须要加？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 问题解决：在js中绑定onclick事件为什么不加括号，在html代码中必须要加？（转载）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- element onclick 动态创建元素并绑定onclick事件
<html> <head> <meta charset="UTF-8"> <title>b</title> <sc ...
- JS中的onclick事件
原文链接:https://segmentfault.com/q/1010000007955542?_ea=1503986 我自己做了一下测试. 这个是在html里面直接绑定onclick事件,我打印了 ...
- 给js创建的一个input数组绑定click事件
<html> <body> <input type="button" name="input[]" value="按钮1 ...
- Jquery 移除 html中绑定的onClick事件
HTML绑定示例: <button class="edit" onClick="showTurnEdit(this)">编辑</button& ...
- 使用jquery移除前面通过onclick绑定的元素的事件，然后重新绑定别的函数来执行onclick事件。
http://caibaojian.com/css3/experience/bugs.htm 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件. ...
- js click 与 onclick 事件绑定,触发与解绑
click 与 onclick 1.onclick 事件会在对象被点击时发生. <input id="btn1" type="button" onclic ...
随机推荐
- webpack，配置，上手，例子
1.webpack是什么? 2.为什么要用webpack? 3.怎么用webpack? webpack是什么? 答:webpack是前端模块化应用和开发的打包工具,解决前端模块依赖的工具.打包所有的脚 ...
- Java并发包之同步队列SynchronousQueue理解
1 简介 SynchronousQueue是这样一种阻塞队列,其中每个put必须等待一个take,反之亦然.同步队列没有任何内部容量,甚至连一个队列的容量都没有.不能在同步队列上进行peek,因为仅在 ...
- Linux时间子系统之（六）：POSIX timer
专题文档汇总目录 Notes:首先讲解了POSIX timer的标识(唯一识别).POSIX Timer的组织(管理POSIX Timer).内核中如何抽象POSIX Timer:然后分析了POSIX ...
- JavaScript-通过原型继承一个对象
<script> //通过原型继承一个对象 //inherit()返回了一个继承原自原型对象P的属性的新对象 //這裡使用ECMAScript5中的object.create()函數(如果 ...
- 在不重装系统的情况下创建Linux的Swap分区
本文由荒原之梦原创,原文链接:http://zhaokaifeng.com/?p=649 操作环境: CentOS 7 操作背景: 本文中使用的CentOS Linux系统在安装的时候没有创建Swap ...
- 【SpringMVC】从Fastjson迁移到Jackson，以及对技术选型的反思
为什么要换掉fastjson 直接原因是fastjson无法支持注解形式的自定义序列化和反序列化,虽然其Github上的Wiki上说明是支持的.但是实测结果表明:Test类的序列化被fastjson的 ...
- [ Java面试题 ]数据库篇
基本表结构: student(sno,sname,sage,ssex)学生表 course(cno,cname,tno) 课程表 sc(sno,cno,score) 成绩表 teacher(tno,t ...
- Vue路由学习心得
GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍 1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...
- 关于ftp用户连接时出现500 OOPS: cannot change directory的解决办法
RHEL5 中配置好后,今天想在XP下用ftp连接虚拟机中的linux,但ftp连接的时候会出现 "500 OOPS:cannot change directory:/root" ...
- hibernate关系映射
多对一:比如多个订单对应同一个用户,需要在订单表中添加一个用户的属性 订单类: private Integer orderId; private Date createTime; private Us ...