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 相关文章推荐
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 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面向对象的使用教程 简单数据库连接
2006/11/25 PHP
关于php连接mssql:pdo odbc sql server
2011/07/20 PHP
PHP内核探索:变量概述
2014/01/30 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
python提取内容关键词的方法
2015/03/16 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
Python随机数random模块使用指南
2016/09/09 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
python使用knn实现特征向量分类
2018/12/26 Python
美国NBA官方商店:NBA Store
2019/04/12 全球购物
LINUX下线程,GDI类的解释
2016/12/14 面试题
应届生新闻编辑求职信
2013/11/19 职场文书
《会变的花树叶》教学反思
2014/02/10 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
经营场所使用证明
2015/06/19 职场文书
Python Django获取URL中的数据详解
2021/11/01 Python
mysql全面解析json/数组
2022/07/07 MySQL