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 数组运用实现代码
Apr 13 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
react PropTypes校验传递的值操作示例
Apr 28 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 URL参数获取方式的四种例子
2014/02/28 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
网站上面有这种切换效果
2006/06/26 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
计算机专业推荐信范文
2013/11/27 职场文书
创业计划书的写作技巧及要点
2014/01/31 职场文书
感恩的演讲稿
2014/05/06 职场文书
物流专业自荐信
2014/05/23 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
银行授权委托书范本
2014/10/04 职场文书
财务部岗位职责范本
2015/04/14 职场文书
交流会主持词
2015/07/02 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
Redis分布式锁Redlock的实现
2021/08/07 Redis
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫
Redis 异步机制
2022/05/15 Redis