首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

JS-制作网页特效——选项卡效果(水平,点击

//总结:这个样式的思维很重要,以前刚开始做,想的都是,怎么获取到自己点击的是哪一个li,然后给他以对应的div样式。后来发现难点是,怎么找到另外两个没有被点击li和他们对应的div。...具体原理明白就是说不出来,反正就是死记硬背知道这种方式,是用来对一个获取到的数组进行重新从零开始编号就对了,以方便下边获取他的下标索引对齐进行对应的操作 tapLi[i].onclick = function...li下标(即一个数字),这个数字再搭配tapDiv[]的方式,自然就是获取和当前li对应的div了,因为div的下标也是从0开始共三个数的。...li下标     }   } } 1 2 window.onload = function() { 3

3.4K90

javaScript事件委托

比如点击事件、鼠标移入/移出事件等。事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行。 2、DOM 事件流:冒泡事件流、捕获事件流。 3、DOM 事件模型:捕获、目标、冒泡。...举个例子:现在页面上有个 ul,ul 里有三个 li,通过循环给每个 li 添加点击事件,发现三个 li 到可以正常触发点击事件了,然后通过 js 代码在 ul 里插入(append)两个 li, 再试着点击所有...li,发现前面三个 li 正常触发点击事件,后面新添加的两个 li 无法正常触发点击事件。...四、事件委托怎么获取元素下标(索引值): 利用数组方法indexOf查询当前li下标: var ul = document.querySelector("ul"); ul.onclick = function...,target); alert("所点击 li下标是:" + index); } } 上述代码中,为什么需要 “index = Array.prototype.indexOf.call

1K50

理解JavaScript的闭包

我们知道,我们在执行函数的时候,会创建一个新的作用域,称为私有作用域,当函数执行完毕之后为了节约内存JS引擎会将这个私有作用域会被销毁,定义在私有作用域的函数和变量都会被清除。...匿名执行函数 dom1 dom2 dom3 上面的html代码中,我们设定了一个常见的需要,我们需要当我们点击...li元素的时候,获取当前li元素的下标,因为根据li元素的名称可以获取li元素的理解,所以我们的需求可以抽象: 获取li元素的集合 遍历集合给每个元素绑定click事件 获取当前的元素下标index即可...; i++) { doms[i].onclick = function() { alert(i) } } 当时我们点击DOM元素的时候,发现这个是行不通的方案,我们每次获取到的下标都是...参考 你不知道的javaScript(上)

67530

JS数组中那些你知道或不知道

JS数组中那些你知道或不知道的 首发:krissarea.gitee.io 作者:陈大鱼头 github: KRISACHAN JS中的Array ecma-262中的定义:Array对象是一种特殊对象...从这句话我们可以知道,当我们构造一个指定长度的 Array 时,由于有长度,所以会开辟相应下标的空间,但是因为该下标并没有元素,所以就会返回empty,任何原因构造数组元素失败时,都会返回一个empty...首先我们要知道,在 JS 中类型转换只有三种情况,分别是: 转换为布尔值 转换为数字 转换为字符串 转换为原始类型 对象在转换类型的时候,会执行原生方法ToPrimitive。...关于API使用的一些经验与思考 JS数组自带了很多的方法,在现代工程化数据驱动的理念下,这些方法都是非常重要的。...-- 点击当前li时,当前li文字变色,其余兄弟li变回默认颜色 --> 1 2 <li class

1K10

JS-选项卡制作解释部分

具体原理明白就是说不出来,反正就是死记硬背知道这种方式,是用来对一个获取到的数组进行重新从零开始编号就对了,以方便下边获取他的下标索引对齐进行对应的操作 / / alert(tapLi[i].index.../ 总结:这个样式的思维很重要,以前刚开始做,想的都是,怎么获取到自己点击的是哪一个li,然后给他以对应的div样式。后来发现难点是,怎么找到另外两个没有被点击li和他们对应的div。...具体原理明白就是说不出来,反正就是死记硬背知道这种方式,是用来对一个获取到的数组进行重新从零开始编号就对了,以方便下边获取他的下标索引对齐进行对应的操作 // alert(tapLi[i].index...//总结:这个样式的思维很重要,以前刚开始做,想的都是,怎么获取到自己点击的是哪一个li,然后给他以对应的div样式。后来发现难点是,怎么找到另外两个没有被点击li和他们对应的div。...//alert(this.index);//得到你当前点击li下标 } } } */ --> <!

1.9K20

js与jQuery的区别以及jQuery选择器和方法的使用

Vue.js 目前移动端 微信端用的前端框架最多的 什么情况下用jQuery:中大型网站开发,一些前端框架的基础,比如EasyUI 怎么用:我们今天开始用HBuilder写代码,我们中国人开发的软件呦...文件夹中 4、引入jQuery库文件: 注意:script标签中不要写内容,写jQuery代码就再写一对script标签 js与jQuery代码对比 案例1:点击按钮获取文本框中的值(JS对比jQuery...大家来看 $("#one") 找到id为one的div 接着再修改背景色,直接在后面点,点不出来提示,那么来看一下怎么让他有提示。点击语法提示库,对。选择jquery.2。现在还可以 好歹有点提示了。...(0)").css("background","pink");注意啦,这个地方和其他的不一样居然有参数了,这个参数表示第几行的下标,而且不包括下标表示的行,那么这个效果很明显是大于下标0的行 :lt 小于...我们先给按钮添加一个点击事件,点击按钮获取被选中的单选框的value属性值。

15.3K10

jQuery入门基础——选择器

How:怎么用? 答: What:jQuery是JavaScript的类库,封装了很多js代码。类似java中的类库一样里面一个类中有很多别人写好的功能。90%以上的公司都在用jQuery。...文件夹中 4、引入jQuery库文件: 注意:script标签中不要写内容,写jQuery代码就再写一对script标签 1、代码对比 案例1:点击按钮获取文本框中的值(JS对比jQuery),如下图...大家来看 $("#one") 找到id为one的div 接着再修改背景色,直接在后面点,点不出来提示,那么来看一下怎么让他有提示。点击语法提示库,对。选择jquery.2。现在还可以 好歹有点提示了。...(0)").css("background","pink");注意啦,这个地方和其他的不一样居然有参数了,这个参数表示第几行的下标,而且不包括下标表示的行,那么这个效果很明显是大于下标0的行 :lt 小于...我们先给按钮添加一个点击事件,点击按钮获取被选中的单选框的value属性值。

9.8K20
领券