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控制css中的float的代码
Aug 16 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
详解Vue3中对VDOM的改进
Apr 23 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
JavaScript 反射学习技巧
Oct 16 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
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
php设计模式  Command(命令模式)
2011/06/17 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
php正则表达式学习笔记
2015/11/13 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
javascript比较文档位置
2008/04/08 Javascript
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
在Python中使用异步Socket编程性能测试
2014/06/25 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
简单说说tomcat的配置
2013/05/28 面试题
北京华建集团SQL面试题
2014/06/03 面试题
化工专业个人的求职信范文
2013/11/28 职场文书
家长对老师的感言
2014/03/11 职场文书
元旦晚会感言
2014/03/12 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
python代码实现扫码关注公众号登录的实战
2021/11/01 Python