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 removeChild 使用注意事项
Apr 11 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
微信小程序自定义组件
Aug 16 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
layui表格数据复选框回显设置方法
Sep 13 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 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
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
火车头采集器3.0采集图文教程
2007/03/17 PHP
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
php入门之连接mysql数据库的一个类
2012/04/21 PHP
轻松实现php文件上传功能
2017/02/17 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
原生js获取left值和top值的三种方法
2017/08/02 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
python实现的解析crontab配置文件代码
2014/06/30 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
python3正则模块re的使用方法详解
2020/02/11 Python
Python通过format函数格式化显示值
2020/10/17 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
巴西本土电商平台:Americanas
2020/06/21 全球购物
期末自我鉴定
2014/01/23 职场文书
毕业生自荐书
2014/02/02 职场文书
学生党支部先进事迹
2014/02/04 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书