HTML 练习绑定onclick事件
2024-03-08 17:50:26
方法一
<!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>
最新文章
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（20）-权限管理系统-根据权限获取菜单
- 高级javascript---变量作用域
- 会话状态已创建一个会话 ID，但由于响应已被应用程序刷新而无法保存它
- ubuntu14.04下的NVIDIA Tesla K80显卡驱动的安装教程
- mongodb 监控分析命令
- BASE64Decoder 编码（sun.jar）
- 图表框架HelloCharts（2）柱状图
- 架设wordpress再vps上的 一些感想总结
- Pyhton 操作MySQL数据库
- web.config中的profile
- Android下按钮的使用方法
- ASP.NET MVC4中使用NHibernate
- CSAPP：第十章 系统级I/O
- Spring Security登陆
- 【ApplicationContext】通过实现ApplicationContextAware接口获取bean
- rabbitmq 生产环境配置
- Java 8新特性之接口改善（八恶人-1）
- 注册Goole 账户 成功注册
- iOS开发——iOS7（及以后版本） SDK自带二维码（含条形码）扫码、二维码生成
- The transaction associated with this command is not the connection's active transaction