js实现点击每个li节点,都弹出其文本值及修改


Posted in Javascript onDecember 15, 2016

点击每个li节点,都弹出其文本值

1,获取所有的li节点

var liNodes=document.GetElementsByTagName("li");

2,使用for循环进行遍历,得到每一个li节点

for(var i=0;i<liNodes.length;i++){
alert(i);
}

3,为每一个li节点添加onclick响应函数

liNodes[i].onclick=function(){   }

4,在响应函数中获取当前节点的文本值

this 为正在响应事件的那个节点

alert(this.firstChild.nodeValue);

点击每个li节点,若li节点的文本值没有^^开头,加上;有,则去除

var liNodes=document.getElementsByTagName("li");//获取
for(var i=0;i<liNodes.length;i++){//遍历
liNodes[i].onclick=function(){//响应
var val=this.firstChild.nodeValue;
var reg=/^\^{2}/g;//全局正则
if(reg.test(val)){//判断
val=val.replace(reg,"");

}
else{

 val="^^"+val; 
}
firstChild.nodeValue=val;

}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js技巧--转义符&quot;\&quot;的妙用
Jan 09 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
BootStrap中
Dec 10 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 #Javascript
js代码实现下拉菜单【推荐】
Dec 15 #Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 #Javascript
JavaScript常见的五种数组去重的方式
Dec 15 #Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 #Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 #Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 #Javascript
You might like
PHP输出一个等腰三角形的方法
2015/05/12 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
python dlib人脸识别代码实例
2019/04/04 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
pytorch forward两个参数实例
2020/01/17 Python
英国二手物品交易网站:Preloved
2017/10/06 全球购物
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
毕业生就业推荐信范文
2013/12/01 职场文书
租房协议书范本
2014/04/09 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
委托函范文
2015/01/29 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python
python 安全地删除列表元素的方法
2022/03/16 Python
Python开发五子棋小游戏
2022/05/02 Python