JS18-解决案例中this、for、for...in的问题

<div>我是div</div><ul><li index="1">我是第一个</li><li index="2">我是第二个</li><li index="3">我是第三个</li><li index="4">我是第四个</li>
</ul><script>// 解决demo中的一些问题// 1, onclick 中 关于this的问题// 给所有的li标签,添加点击事件// 输出不同的具体内容var oLis = document.querySelectorAll('li');// 方法1 , forEach()循环// forEach 是一个特殊的循环// 每次都建立一个不同的,特殊的变量,存储的是相互不影响的,独立的数据// 因此,item变量,可以在点击事件中直接使用// item.getAttribute('index')   this.getAttribute('index')// oLis.forEach(function(item){//     item.onclick = function(){//         // 事件中//         // itme可以直接使用,获取触发点击事件的标签的属性//         console.log( item.getAttribute('index') );//     }// })// 法法2 , for循环  for...in// for循环只有一个变量,存储数据是重复赋值// 最终调用的是 循环变量的最终数据// 点击事件中,必须要使用this  this.getAttribute('index')// 如果使用 oLis[i].getAttribute('index') 会报错// // for(var i = 0 ; i <= oLis.length-1 ; i++){//     oLis[i].onclick = function(){//         // 事件中//         console.log( this.getAttribute('index') );//     }// }// 总结// 在循环遍历中,因为 forEach  和  for / for...in// 在存储变量上的区别// 给伪数组中的标签对象添加事件时// 在事件中:  forEach      可以使用 参数1 , 也可以使用this//          for/for...in  只能使用this方法,不能使用 伪数组[下标]// 问题2://    不使用标签本身定义的属性值,就使用索引下标是不是可行?// 咱们现在的demo还比较简单,数据都是我们本地设定的数据// 而不是数据库的数据// 今后数据库的数据,比较复杂,在标签中定义的也不是索引下标// 会是数据库中,数据的一些,其他属性// 这个属性与索引下标就没有关系了,就不能使用索引下标替换// oLis.forEach(function(item,key){//     item.onclick = function(){//         // 没有使用标签本身定义的属性的属性值//         // 使用的是索引下标//         console.log(key+1);//     }// })// 给同一个标签,添加多个类型相同的事件,// 只会执行最后一个事件// 原理:后定义的事件会覆盖,先定义的事件// 如果非要定义多个类型相同的事件// 咱们之后讲var oDiv = document.querySelector('div');// oDiv.onclick = function(){//     console.log('我是第一个点击事件触发的程序');// }// oDiv.onclick = function(){//     console.log('我是第二个点击事件触发的程序');// }// 之后会详细讲oDiv.addEventListener('click' , function(){console.log('我是第一个')})oDiv.addEventListener('click' , function(){console.log('我是第二个')})

JS18-解决案例中this、for、for...in的问题相关推荐

mysql load会锁表吗_Mysql必读MySQL中由load data语句引起死锁的解决案例
<MysqL必读MysqL中由load data语句引起死锁的解决案例>要点: 本文介绍了MysqL必读MysqL中由load data语句引起死锁的解决案例,希望对您有用.如果有疑问,可 ...
java json循环引用_填坑，解决json对象循环引用，在复杂案例中的应用
// 这是Kotlin代码,Java也是一样原理,都是用@JsonView实现单向透明.// 原理:使用@JsonView和withView(JvXxx) 让jackson从某一方向扫描时,直接忽略某 ...
SAP中外协加工收货与反冲消耗数量不一致的产生原因分析和解决案例二
笔者之前写过一篇博客梳理了一个如下主题的案例 SAP中外协加工收货与反冲消耗数量不一致的产生原因分析和解决案例https://blog.csdn.net/lj663/article/details/1 ...
[Python人工智能] 七.什么是过拟合及dropout解决神经网络中的过拟合问题
从本专栏开始,作者正式开始研究Python深度学习.神经网络及人工智能相关知识.前一篇文章通过TensorFlow实现分类学习,以MNIST数字图片为例进行讲解:本文将介绍什么是过拟合,并采用drop ...
数据结构之并查集：并查集解决案例， Python——21
并查集解决案例畅通工程案例问题介绍: 某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇.省政府"畅通工程"的目标是使全省任何两个城镇间都可以实现交通 ...
面试官：怎么解决MySQL中的死锁问题？
咱们使用 MySQL 大概率上都会遇到死锁问题,这实在是个令人非常头痛的问题.本文将会对死锁进行相应介绍,对常见的死锁案例进行相关分析与探讨,以及如何去尽可能避免死锁给出一些建议. 话不多说,开整! ...
mysql 数据库连接不够_(二)：MySQL数据库连接不够用(TooManyConnections)问题的一次分析和解决案例...
# (二):MySQL数据库连接不够用(TooManyConnections)问题的一次分析和解决案例最近,项目中遇到了数据库连接不够的问题. **异常信息** com.mysql.jdbc.exc ...
计算机技术应用于教学案例,中职计算机教学中案例教学方法的运用
1案例教学法的含义及可行性 1.1案例教学法的含义随着信息技术的快速发展,案例教学法在计算机专业中的应用日益广泛.案例教学方法指的是以教学目标和教学内容为依据,老师与学生之间.学生与学生之间围绕案例 ...
文件fluent_Win10 中解决FLUENT中UDF 的方法
关于Win7 中FLUENT 无法编译UDF 的问题,我之前已经探索过了,并给出了一种笨拙但可靠的编译方法,SDK 解决FLUENT 中udf 编译问题.但经过热(xin)心(ji)网(ru)友(fe ...
rest接口案例_REST和平：微服务与现实案例中的整体
rest接口案例 by RDX 由RDX REST和平:微服务与现实案例中的整体 (REST in Peace: Microservices vs monoliths in real-life exa ...

JS18-解决案例中this、for、for...in的问题

JS18-解决案例中this、for、for...in的问题相关推荐

最新文章

热门文章