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 相关文章推荐
用Javascript读取中文COOKIE的解决办法
Feb 15 Javascript
Prototype Number对象 学习
Jul 19 Javascript
通过隐藏option实现select的联动效果
Nov 10 Javascript
jquery如何判断某元素是否具备指定的样式
Nov 05 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
js module大战
Apr 19 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
用PHP读取超大文件的实例代码
2012/04/01 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
php获取微信openid方法总结
2019/10/10 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
Python计算程序运行时间的方法
2014/12/13 Python
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
Python工厂函数用法实例分析
2018/05/14 Python
查看django版本的方法分享
2018/05/14 Python
Python使用re模块验证危险字符
2020/05/21 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
周年庆典邀请函范文
2014/01/23 职场文书
求职简历自我评价范例
2014/03/12 职场文书
大班开学家长寄语
2014/04/04 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS