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 相关文章推荐
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
iView框架问题整理小结
Oct 16 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 Javascript
小程序实现列表倒计时功能
Jan 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
提升PHP执行速度全攻略
2006/10/09 PHP
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
PHPMailer发送邮件
2016/12/28 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
javascript实现连续赋值
2015/08/10 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
html5定位并在百度地图上显示的示例
2014/04/27 HTML / CSS
HTML5图片预览实例分享
2014/06/04 HTML / CSS
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
金融专业个人的自我评价
2013/10/18 职场文书
2014年自我评价
2014/01/04 职场文书
财务会计人员求职的自我评价
2014/01/13 职场文书
写给女生的道歉信
2014/01/14 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
高中生物教学反思
2016/02/20 职场文书
python元组打包和解包过程详解
2021/08/02 Python
Python+pyaudio实现音频控制示例详解
2022/07/23 Python