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实现自定义对话框的代码
Jun 15 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
javascript实现2048游戏示例
May 04 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
小程序实现单选多选功能
Nov 04 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
Vue表单控件数据绑定方法详解
Feb 05 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 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开发过程中常用函数收藏
2009/12/14 PHP
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
培养自己的php编码规范
2015/09/28 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
Python新手学习装饰器
2020/06/04 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
演讲稿怎么写才完美
2014/01/02 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
环境日宣传活动总结
2014/07/09 职场文书
生产操作工岗位职责
2014/09/16 职场文书
js不常见操作运算符总结
2021/11/20 Javascript
电频谱管理的原则是什么
2022/02/18 无线电
Python中的socket网络模块介绍
2022/07/23 Python