JavaScript例子1-给网页中所有<p>元素添加onclick事件

最新推荐文章于 2022-08-26 20:08:54 发布
最新推荐文章于 2022-08-26 20:08:54 发布
阅读量313 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/ZHOUVIP/p/7295010.html
版权 
 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="utf-8" />
 6         <title></title>
 7         <script type="text/javascript">
 8             window.onload = function() {
 9                 var items = document.getElementsByTagName("p");
10                 for(var i = 0; i < items.length; i++) {
11                     items[i].onclick = function() {
12                         alert("suc!");
13                     }
14                 }
15 
16             };
17         </script>
18     </head>
19 
20     <body>
21         <p>测试1</p>
22         <p>测试2</p>
23 
24     </body>
25 
26 </html>

 

转载于:https://www.cnblogs.com/ZHOUVIP/p/7295010.html

weixin_30876945
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生JS操作网页给p元素添加onclick事件及表格隔行变色
01-19
1. 给网页中的所有p元素添加onclick事件： 代码如下: <%@ page contentType=”text/html; charset=UTF-8″ pageEncoding=”UTF-8″%> <html> <head> <title>Insert title here</title> <!– [removed][removed]–> [removed] [removed]=function(){ var items=document.getElementsByTagNa
js给网页中所有p元素添加onclick事件
wu_xiao_qing的博客
04-15 1万+
var p=document.getElementsByTagName("p");     alert(p.length);      for(var i=0;i      {       p[i].onclick=function(){       alert("")       }      }
html中p标签隔行换色,原生JS操作网页给p元素添加onclick事件及表格隔行变色
weixin_39832348的博客
06-29 314
1. 给网页中的所有p元素添加onclick事件：复制代码 代码如下:Insert title herewindow.onload=function(){var items=document.getElementsByTagName("p");for(i=0;iitems[i].onclick=function(){alert("单击成功...");}}}测试段落一...测试段落二...测试段落三...
jQuery学习基础理论（二）
墨笙弘一
09-20 438
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"> <title>JQuery选择器</title> <script type="te
js基础知识示例1----给网页的所有p元素添加onclick元素 fl ch2 28
vvvbird的专栏
09-24 526
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-e
JavaScript onclick事件使用方法详解
11-20
JavaScript中的`onclick`事件是网页交互的核心组成部分，它允许开发者定义当用户点击DOM元素时执行的特定功能。本文将深入探讨`onclick`事件的工作原理、使用方法以及几个实用示例。 `onclick`事件是一个内联事件...
在点击div中的p时，如何阻止事件冒泡
08-31
描述中给出了一个具体的示例，包含HTML、CSS和JavaScript代码，其中`<div>`和`<p>`元素都绑定了`onclick`事件，点击`<p>`时，由于事件冒泡，会导致同时弹出两个警告框，分别显示`'b'`和`'a'`。 为了解决这个问题，...
jquery动态添加带有样式的HTML标签元素方法
10-18
jQuery简化了与DOM的交互，使得我们可以轻松地为元素添加事件监听器，如`onclick`，并且提供了诸如`append()`、`parent()`和`remove()`等便捷的方法，以提高开发效率。 总结起来，这个功能的核心在于使用jQuery的`...
Javascript中innerHTML用法实例分析
12-01
在这个例子中，当用户点击"innerHTML的使用"按钮时，`t()`函数会被执行，原有的`<div id="container">`内的`<ul>`列表将被`<p>哈哈哈哈</p>`替换。这展示了innerHTML属性如何方便地动态修改页面内容。 在实际开发中...
javascript例子教程20120614.docx
09-30
本文将深入探讨JavaScript在网页交互中的几种常见应用，包括修改HTML元素的class属性、页面重定向、弹出窗口以及使用JavaScript对象作为关联数组。 首先，我们来看如何使用JavaScript修改HTML元素的class属性。在...
jQuery
qq_50748038的博客
08-26 6355
jQuery事件的基本使用绑定和解绑，事件委托和jQuery中插入内容、克隆节点的方法，了解jQuery静态方法在数组和对象上的操作以及字符串操作
前端----通过js给相同class的元素添加事件
nO0b
10-10 2万+
写网页时我们可能一组元素增加一个相同的事件, 比如下图的下拉菜单中每项都有一个鼠标悬停事件和鼠标悬出事件(onmouseover和onmouseout事件) 不会的同学可以看看介绍这两个事件的一个小实例博客 https://blog.csdn.net/q5706503/article/details/82843997 效果很简单, 鼠标指到选项时背景色变成灰色,悬出时背景色再变白, ...
jQuery练习1--给网页中所有的 <p> 元素添加 onclick 事件
hacket
10-30 6338
1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 html> 3 head> 4 title>exe_1.htmltitle> 5 meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6
js为li列表添加点击事件
热门推荐
caoPengFlying的博客
11-09 5万+
今天看到一个面试题目//html代码 <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> //js代码 var oli = document.getElementsByTagName("li"); for(var i=0; i<oli.length; i++){
js动态添加点击事件的两种方法
h0713的博客
07-25 2万+
js动态添加点击事件或其他事件（这里以点击事件为例） 第一种：加载 js文件时自动添加，这种方法可以免去html元素内的onclick等属性一长串的字符，也方便一些像我这样初级的查看源代码时找不着北； 但缺点是只能在页面启动时加载一次（不知道这样表述准不准确，反正我能懂就好了），想要灵活的添加移除还不方便，案例代码如下： var redmove=document.getElementById("rolemove"); redmove.addEventListener('click',function(){…
js给指定的所有元素添加事件
I AM COMING BACK...
07-21 871
document.querySelectorAll('div').forEach(item => { item.addEventListener('click', event => { //alert(item.innerHTML); //handle click 。。。。。 。。。。。 })
JQuery 动态生成元素添加点击事件
sayyy的专栏
11-26 7946
页面代码 <html> ... <body> <div id="divBox"></div> <script> $(function(){ $("#divBox").append("<img class='preview_image' src='/img/preview1.jpg' />"); $("#divBox").append("<img class='preview_image' src='/img/pre
js给具有多个class属性的元素添加点击事件
卫可冬的博客
12-23 4630
元素： <button class="c-btn query">查询</button> 方法1： $('.c-btn.query').click(function () { query(); } 方法2： $("body").on('click','.c-btn.query',function () { query(); }); 方法1有时候不奏效，可以选择方法2...
给dom元素添加事件的监听
weixin_43694639的博客
02-23 6936
一、addEventListener给dom元素添加事件的监听有两种方式 1.用匿名函数方式添加事件的监听 例 &amp;lt;head lang=&quot;en&quot;&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp
根据要求，补充代码： <body> <h3>JavaScript DOM事件的简单应用</h3> <hr /> <p id="p1"> 这是一个段落元素。 </p> <!--按钮元素--> <button onclick=" " /在此处添加代码>点击此处更改段落内容</button> <script> function change(){/在此处添加代码 ; } </script> </body>
最新发布
05-28
<h3>JavaScript DOM事件的简单应用</h3> <hr /> <p id="p1"> 这是一个段落元素。 </p> <!--按钮元素--> <button onclick="changeContent()">点击此处更改段落内容</button> <script> function ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值