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 prototype原型操作笔记
Dec 07 Javascript
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
jQuery实现滚动效果
Nov 17 jQuery
AngularJs分页插件使用详解
Jun 30 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 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图像处理函数大全(推荐收藏)
2013/07/11 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
JavaScript Archive Network 集合
2007/05/12 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
Python实现数据库并行读取和写入实例
2017/06/09 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
numpy中的高维数组转置实例
2018/04/17 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
JAVA代码查错题
2014/10/10 面试题
宣传稿格式范文
2015/07/23 职场文书
趣味运动会标语口号
2015/12/26 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书