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 相关文章推荐
JQuery 常用操作代码
Mar 14 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
Sep 26 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
js实现无缝滚动图
Feb 22 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
简单的React SSR服务器渲染实现
Dec 11 Javascript
js中数组常用方法总结(推荐)
Apr 09 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
批量修改RAR文件注释的php代码
2010/11/20 PHP
php中rename函数用法分析
2014/11/15 PHP
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
python 写的一个爬虫程序源码
2016/02/28 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
python使用Tesseract库识别验证
2018/03/21 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
python获取url的返回信息方法
2018/12/17 Python
python实现可变变量名方法详解
2019/07/01 Python
django解决订单并发问题【推荐】
2019/07/31 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
python定义具名元组实例操作
2021/02/28 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
关于Java String的一道面试题
2013/09/29 面试题
工业自动化专业毕业生推荐信
2013/11/18 职场文书
半年思想汇报
2013/12/30 职场文书
迎接领导欢迎词
2014/01/11 职场文书
科技工作者先进事迹
2014/08/16 职场文书
防灾减灾标语
2014/10/07 职场文书
污染环境建议书
2015/09/14 职场文书
升学宴家长答谢词
2015/09/29 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python