今日看到之前写的一段js代码,关于导航部分鼠标放上去变类,鼠标离开等效果

前端代码

<div class="con12">
<div class="left">
<ul id="liu">
<li class="chang02">长双歧杆菌</li>
<li class="chang01">短双歧杆菌</li>
<li class="chang01">乳双歧杆菌</li>
<li class="chang01">嗜酸乳杆菌</li>
<li class="chang01">罗伊氏乳杆菌</li>
<li class="chang01">鼠李糖乳杆菌</li>
</ul>
</div> <div class="right"> <div class="show">
<div class="title">
<span class="one">长双歧杆菌</span>  <span class="two">Bifidobacterium longum</span>  <span class="three">11.5亿 CFU/小袋</span>
</div>
<div class="des">
可降低肠道 pH,抑制致病菌的生长繁殖,达到调节肠道菌群失调和改善肠道微环境的效果<span class="biao">[7]</span>。
</div>
<div class="desimg">
<img src="img/des01.jpg">
</div>
</div> <div class="show none">
<div class="title">
<span class="one">短双歧杆菌</span>  <span class="two">Bifidobacterium breve</span>  <span class="three">11亿 CFU/小袋</span>
</div>
<div class="des">
拥有较强的抗酸能力与粘附力,黏附在肠道细胞膜上,能有效阻止致病菌的入侵,给宝宝一个健康的肠道<span class="biao">[8,9]</span>。
</div>
<div class="desimg">
<img src="img/duansuangqi.jpg">
</div>
</div> <div class="show none">
<div class="title">
<span class="one">乳酸双歧杆菌</span>  <span class="two">Bifidobacterium lactis</span>  <span class="three">12亿 CFU/小袋</span>
</div>
<div class="des">
乳双歧杆菌能增强宝宝的细胞免疫和体液免疫功能,提高宝宝的免疫力,让宝宝少生病<span class="biao">[10]</span>。
</div>
<div class="desimg">
<img src="img/rusuangqi.jpg">
</div>
</div> <div class="show none">
<div class="title">
<span class="one">鼠李糖乳杆菌</span>  <span class="two">Lactobacillus rhamnosus</span>  <span class="three">6.5亿 CFU/小袋</span>
</div>
<div class="des">
参与宝宝消化道内菌群调节, 排除宝宝体内毒素,维持宝宝肠道健康<span class="biao">[11]</span>。
</div>
<div class="desimg">
<img src="img/shulitang.jpg">
</div>
</div> <div class="show none">
<div class="title">
<span class="one">罗伊氏乳杆菌</span>  <span class="two">Lactobacillus reuteri</span>  <span class="three">1亿 CFU/小袋</span>
</div>
<div class="des">
增加肠道固水物质——短链脂肪酸的含量,软化大便,并且有很强的粘附能力,对改善肠道黏膜免疫功能,提高宝宝免疫力具有积极的作用<span class="biao">[12]</span>。
</div>
<div class="desimg">
<img src="img/luoyishi.jpg">
</div>
</div> <div class="show none">
<div class="title">
<span class="one">嗜酸乳杆菌</span>  <span class="two">Lactobacillus acidophilus</span>  <span class="three">8亿 CFU/小袋</span>
</div>
<div class="des">
发酵后形成乳酸,帮助宝宝消化肠胃内的食物,提高钙、磷、铁的利用率,并且对其他乳杆菌和双歧杆菌在肠道的增殖具有积极作用<span class="biao">[13,14]</span>。
</div>
<div class="desimg">
<img src="img/sishuanru.jpg">
</div>
</div> </div>
</div>

  js代码

window.onload=function(){
var one = document.getElementById('liu');
var oPoint = one.getElementsByTagName('li');
var div = document.getElementsByClassName('show'); var lilen = oPoint.length;
for (var i = 0; i < lilen; i++) {
oPoint[i].index = i;
oPoint[i].onmouseover = function (){
for (var j = 0; j <lilen; j++) {
oPoint[j].className = "chang01";
div[j].className += " none";
} oPoint[this.index].className = "chang02";
div[this.index].className = "show";
} }
}

  其中,看到

oPoint[i].index = i;
一时之间想不明白,大体好像是关于js的闭包知识,查找资料
https://segmentfault.com/a/1190000002805295

js闭包讲解的更多相关文章

  1. 简单详细讲解js闭包(看完不懂你砍我!!!)

    <javascript高级程序设计>中闭包的概念: 闭包,其实是一种语言特性,它是指的是程序设计语言中,允许将函数看作对象,然后能像在对象中的操作般在函数中定义实例(局部)变量,而这些变量 ...

  2. js闭包的作用域以及闭包案列的介绍:

    转载▼ 标签: it   js闭包的作用域以及闭包案列的介绍:   首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...

  3. 大部分人都会做错的经典JS闭包面试题

    由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...

  4. Js闭包常见三种用法

        Js闭包特性源于内部函数可以将外部函数的活动对象保存在自己的作用域链上,所以使内部函数的可以将外部函数的活动对象占为己有,可以在外部函数销毁时依然存有外部函数内的活动对象内容,这样做的好处是可 ...

  5. js闭包之初步理解( JavaScript closure)

    闭包一直是js中一个比较难于理解的东西,而平时用途又非常多,因此不得不对闭包进行必要的理解,现在来说说我对js闭包的理解. 要理解闭包,肯定是要先了解js的一个重要特性, 回想一下,那就是函数作用域, ...

  6. (原创)JS闭包看代码理解

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  7. js闭包理解

    js闭包的作用是使函数外可以访问函数内部的变量,是通过 在函数内部 定义 访问函数内变量 的函数实现的,内部的一个函数产生一个闭包 function a() { var i=0; return fun ...

  8. js闭包理解实例小结

    Js闭包 闭包前要了解的知识  1. 函数作用域 (1).Js语言特殊之处在于函数内部可以直接读取全局变量 <script type="text/javascript"> ...

  9. Js闭包的用途

    本来想总结一点JavaScript中的闭包的一些用法,在查资料的时候发现了一篇很好的文章,就转过来收藏了,下面附上传送门: js闭包的用途 ---------sunlylorn 我们来看看闭包的用途. ...

随机推荐

  1. angularjs 设置全局变量(constant)

    转:angularjs自身有二种,设置全局变量的方法,在加上js的设置全局变量的方法,总共有三种.要实现的功能是,在ng-app中定义的全局变量,在不同的ng-controller里都可以使用. 1, ...

  2. python田忌赛马

    一,简介 田忌赛马的故事大家都知道我就不展开说了,田忌能用同全面被碾压的马赢了齐威王(公子),我觉得这是十分具有智慧的.但是,如果说这里的条件改为:1,田忌的马比齐威王同等次的马弱一点但是比齐威王下一 ...

  3. 如何设计一个restful风格的API

    1.API接口应该尽量兼容之前的版本,在URL上应保留版本号,并同时兼容多个版本 2.每一个URI代表一个资源 3.请求方式要与http请求方式一致,GET(获取),POST(新增),PUT(更新全部 ...

  4. BSUIR Open Finals

    A. Game with chocolates 因为差值必须是$P$的幂,故首先可以$O(\log n)$枚举出先手第一步所有取法,判断之后的游戏是否先手必败. 对于判断,首先特判非法的情况,并假设$ ...

  5. module.exports 和 exports(转)

    CommonJS规范规定,每个模块内部,module变量代表当前模块.这个变量是一个对象,它的exports属性(即module.exports)是对外的接口.加载某个模块,其实是加载该模块的modu ...

  6. python全栈开发 * 线程队列 线程池 协程 * 180731

    一.线程队列 队列:1.Queue 先进先出 自带锁 数据安全 from queue import Queue from multiprocessing import Queue (IPC队列)2.L ...

  7. Dynamics 365 解决方案导出报错

    之前导出解决方案异常,按照CRM社区的方法解决成功,但是没有了解原因,今天看到有朋友解答了原因,也分享给大家 先来看看异常 我那时导出的是default解决方案,这是模拟 导出异常 “业务流程错误”- ...

  8. bytes,bytearray

    1.bytes.bytearray ---Python3 引入的! bytes:不可变字节序列,bytearray:字节属组,可变 都是连续的空间. 2.字符串与bytes 字符串是字符组成的有序的序 ...

  9. mac chrome 强制刷新浏览器缓存

    普通刷新 command + r 强制刷新 command + shift + r

  10. API认证&SDK&RESTful

    python API的安全认证   我们根据pid加客户端的时间戳进行加密md5(pid|时间戳)得到的单向加密串,与时间戳,或者其它字段的串的url给服务端. 服务端接收到请求的url进行分析 客户 ...