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实现ASP分页函数 HTML分页函数
Sep 22 Javascript
基于jQuery的简单九宫格实现代码
Aug 09 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
详解如何使用router-link对象方式传递参数?
May 02 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+ajax实现图片文件上传功能实例
2014/06/17 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
从零学Python之入门(三)序列
2014/05/25 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
python命令行参数用法实例分析
2019/06/25 Python
flask 实现token机制的示例代码
2019/11/07 Python
Python笔记之facade模式
2019/11/20 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
公关关系专员的自我评价分享
2013/11/20 职场文书
电视节目策划方案
2014/05/16 职场文书
本科应届生自荐信
2014/06/29 职场文书
公司领导班子对照材料
2014/08/18 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
五年级作文之劳动作文
2019/11/12 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python