方法一

<!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. 【淘宝客】根据淘客联盟精选清单（淘宝天猫内部优惠券）随机显示淘宝天猫优惠券dome

    也许大家在生活中经常淘宝看到[淘宝天猫内部优惠券]的网站,或者在微博中经常有博主发券,让大家生活中购物便宜许多,作为一个站长,我们也希望自己的网站也能有这样的一个功能,现在就分享给大家,还是免后台哦. ...

  2. vue项目中解决type=”file“ change事件只执行一次的问题

    问题描述 在最近的项目开发中遇到了这样的一个问题,当我上传了一个文件时,我将获取到的文件名清空后,却无法再次上传相同的文件 <template> <div class="h ...

  3. 论文笔记(2)：A fast learning algorithm for deep belief nets.

    论文笔记(2):A fast learning algorithm for deep belief nets. 这几天继续学习一篇论文,Hinton的A Fast Learning Algorithm ...

  4. new/delete和malloc/free的比较

    从C++角度上说,使用new分配堆空间可以调用类的构造函数,而malloc()函数仅仅是一个函数调用,它不会调用构造函数,它所接受的参数是一个unsigned long类型.同样,delete在释放堆 ...

  5. Python并发编程之从生成器使用入门协程（七）

    大家好,并发编程 进入第七篇. 从今天开始,我们将开始进入Python的难点,那就是协程. 为了写明白协程的知识点,我查阅了网上的很多相关资料.发现很难有一个讲得系统,讲得全面的文章,导致我们在学习的 ...

  6. Spring的两种任务调度Scheduled和Async

    Spring提供了两种后台任务的方法,分别是: 调度任务,@Schedule 异步任务,@Async 当然,使用这两个是有条件的,需要在spring应用的上下文中声明<task:annotati ...

  7. PHP异步请求

    正常情况下,PHP都是同步请求,脚本右上而下依次执行,必须等上一步请求好了,才能进行下一步操作,这种效率在某些时候是不必要的,如发送邮件等操作,是可以异步处理的. PHP异步也很不少插件,我们使用的是 ...

  8. .Net Core vs .Net Framework 如何为一个应用程序选择一个运行时

    .Net Core是下一件大事吗?我已经使用了一段时间了,我倾向认为它是.事实上,我们推测,在2018年,对这项技术熟练的开发人员将会有巨大的需求.但是它和.Net Framework的区别是什么?你 ...

  9. width和max-width的用处

    width默认是auto啊,你设置max-width相当于没设置width,它按默认值auto自然就是图片宽度咯.max-width很多的场景都是和width配合用的:比如设置一个标签,width是( ...

  10. canvas绘制形状

    栅格 之前简单模板中有个宽/高150px的canvas元素.如下图所示,canvas元素默认被网格所覆盖.通常来说网格中的一个单元相当于canvas元素中的一像素.栅格的起点为左上角(坐标为(0,0) ...