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 ...
随机推荐
- CSS定位使用方法
.box0 { width: 200px; height: 200px; position: relative; background: #cfa } .box0-1,.box0-2 { width: ...
- DX11 Without DirectX SDK--04 使用DirectX Tool Kit帮助开发
回到 DirectX11--使用Windows SDK来进行开发 DirectX Tool Kit下载 DirectX Tool Kit是一个包含许多类的集合,用于为公共Windows平台编写Dire ...
- Java中的queue和deque对比详解
队列(queue)简述 队列(queue)是一种常用的数据结构,可以将队列看做是一种特殊的线性表,该结构遵循的先进先出原则.Java中,LinkedList实现了Queue接口,因为LinkedLis ...
- Socket TCP/UDP
TCP TCPClient package com.tcp; import java.io.*; import java.net.*; class TCPClient { public static ...
- S7-200与SMART 200之间进行数据通讯与监控
S7-200与SMART 200之间进行数据通讯与监控 准备物品:S7-200PLC.SMART200.SCANET模块*2.交换机*1.网线若干. (连接示意图一) 1.在STEP7-MircoWi ...
- Hexo的更新 主题的更换
1:HEXO更新 ①hexo generate ②hexo deploy 2: HEXO主题的更换,①找到主题的github地址后 进入自己的HEXO文件夹然后 git clone xxxx(地址) ...
- 你不知道的JavaScript--Item4 基本类型和基本包装类型（引用类型）
1.基本类型和引用类型 基本的数据类型有5个:undefined,boolean,number,string,null typeof null; //"object" typeof ...
- 监听Web容器启动与关闭
在Servlet API 中有一个 ServletContextListener 接口,它能够监听 ServletContext 对象的生命周期,实际上就是监听 Web 应用的生命周期. 要监听web ...
- session会话管理
session会话和cookie一起被称为会话跟踪技术,主要通过保存在服务器端的session数据和客户端浏览器的cookie数据共同完成用户访问服务器的足迹记录. 1. 什么是会话 会话sessio ...
- GitHub 系列之「怎样使用 GitHub？」
1.写在前边的话,为什么要写CitHub? 跟朋友在交流的时候听到求职的时候发现有些公司要附Github帐号,一个优秀的 GitHub 账号当然能让你增色不少.自己之前听说过,但没有花时间研究,最后花 ...