自定义属性index

dom自定义属性兼容 index值获取

function getIndex(Eve,obj){ for(var i = 0;i<obj.length;i++){ obj[i].setAttribute("index",i);//设置自定义属性的值 } if(window.addEventListener){ obj[0].parentNode.addEventListener(Eve,function(e){ alert(e.target.getAttribute("index")); },fals

JS初学之-自定义属性（索引值）

重点:1.添加索引值的作用:建立匹配.对应的关系. 比如:使每一个按钮对应数组里的每一张图,arrImg[this.index]. 2.不要在for循环的函数里面使用i. 3.添加索引值的方法aBtn[i].index=i;//索引值给每一个li添加了自定义属性index为i,它的作用是一旦和其他数组相匹配,就可以找到相应数组里的东西代码示例: for(var i=0;i<aLi.length;i++){ aLi[i].index=i; //索引值给每一个li添加了自定义属性index为

自定义属性--JavaScript

1 - 获取属性值 element.属性获取属性值 element.getAttribute('属性') 区别: element.属性 --获取内置属性(元素本身自带的属性) element.getAttribute('属性'); --主要获得自定义的属性(标准) 程序员自定义的属性 code-1: <div id="demo" index="1" class="nav"></div> <script> va

Javascript学习记录——原生JS实现旋转木马特效

昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个功能全部完善(死了太多脑细胞~~). 接下来直接进入主题哈~(主要讲解JS,所以对其中的HTML及CSS不做详细说明.) 首先是HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset

javascript中DOM部分基础知识总结

1.DOM介绍 1.1 DOM概念文档对象模型(Document Object Model),它定义了访问和处理HTML文档的标准方法.现在我们主要接触到的是HTML DOM. HTML文档中的每个成分都是一个节点.HTML文档中的所有节点组成了一个文档树(节点树).HTML文档中的每个元素.属性.文本等都代表着树中的一个节点.树起始于文档节点,并由此继续延伸枝条,直到处于这棵树最低级别的所有文本节点为止.学习DOM,就是学习一些操作页面元素的API(方法).下图表示一个文

js手风琴图片切换实现原理及函数分析

关键词: js手风琴 js百叶窗 js百页窗实现原理解读使用两层for循环实现, 第一层有三个功能,分别给第个li: 添加索引预设位置添加事件第二层有两个功能,整理图片位置: 鼠标的li,以及前面那些li的位置鼠标后面那些li的位置 HTML/CSS 解读:略 HTML/CSS代码: <!-- Author: XiaoWen Create a file: 2016-12-14 09:41:11 Last modified: 2016-12-15 12:56:23 Start to w

JS初学之-选项卡（图片切换类）

初学选项卡,主要问题卡在了索引值上面,花了较长的时间学习. 索引值其实很好理解,就是为每一个元素用JS的方法添加一个属性,即自定义属性. 在for循环里的函数里用i,会直接弹出这个数组的length,而不是按照数组顺序走,这个原因我们会在学习作用域时学习到,现基于此问题,解决的方法就是为每一个元素添加一个自定义属性index,这个自定义属性一旦和数组匹配,就可以找到相应数组里的东西. 代码解释:aLi[i].index=i; //为每一个Li添加一个自定义属性index等于i,也就是说每一

HTML5之拖拽(兼容IE和非IE)

前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实证明真的很好用哦.保存数据的方法有了,然后开始"探索"如何用html(5)和js来实现拖拽的效果,由于H5给了比较规范的实现方式,所以在Chrome中轻松实现,万恶的IE(很少骂IE)竟然不兼容,NONONONO,心塞,只好用了两种方式分别实现拖拽效果.(其实两种方式内的代码很相似,唯一不

js对象系列【二】深入理解js函数，详解作用域与作用域链。

这次说一下对象具体的一个实例:函数,以及其对应的作用域与作用域链.简单的东西大家查下API就行了,这里我更多的是分享自己的理解与技巧.对于作用域和作用域链,相信绝大多数朋友看了我的分享都能基本理解,少数人看完之后再努力思考思考,基本也就懂了.最后说一下,不合理的地方,欢迎批评指正. 函数调用跳过基本的函数定义,直接说函数调用,js中的函数调用有以下四种方式: 1.直接调用 2.作为对象的方法调用当作为对象调用时,这里的this指向调用方法的对象,而我们所说的链式调用即是在函数内部作用域的最后

第一节 JavaScript概述

第一节 JavaScript概述 JavaScript:其实就是对HTML+CSS静态页面进行样式修改,使其实现各种动态效果. 编写JS脚本基本步骤: 1. HTML+CSS静态布局: 2. 确定要修改的属性: 3.确定用户做哪些操作,即事件(产品样式): 4.在事件中,用JS来修改页面元素的样式. 特效实现原理:响应用户操作,对页面元素(标签)进行某种动态效果的实现. 函数简介: 基本形式为“function 函数名(){……}”,把JS从标签中放入函数里,类似与CSS中的class 函数的定

js焦点轮播图

汇集网上焦点轮播图的实现方式,自己试了下,不过鼠标悬浮停止动画和鼠标离开动画播放好像没生效,不太明白,最后两行代码中,为什么可以直接写stop和play.不用加括号调用函数么?求懂的大神指点! 所用知识点: 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法(可以用js实现一个假图的制作.不过说实话一直理解不了假图的作用原理) <style> * { margin: 0; padding: 0; } a { text-decoration: none; }

JS实现焦点图轮播效果

大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到欣慰 ! 好吧,其实说白了就是穷,就是没钱,就是不能好好地任性,所以只能先去慕课网找教程学习把它给做出来! OK,首先将HTML结构搭建好先: <div id="container"> <div id="list" style="left:

JavaScript基础 -- 焦点图轮播(转载)

首先将HTML结构搭建好: <div id="container"> <div id="list" style="left: -600px;"> <img src="img/5.jpg" alt="1"/> <img src="img/1.jpg" alt="1"/> <img src="img/2.jp

jQuery模仿ToDoList实现简单的待办事项列表

功能:在文本框中输入待办事项按下回车后,事项会出现在未完成列表中:点击未完成事项前边的复选框后,该事项会出现在已完成列表中,反之亦然:点击删除按钮会删除该事项:双击事项可以修改事项的内容.待办事项的数据是保存到本地存储的(localStorage),就算关闭页面再打开,数据还是存在的(前提是要用相同浏览器). ToDoList链接:ToDoList—最简单的待办事项列表先把css样式以及js文件引入进来,jQuery文件要写在你自己的js文件上边 <link rel="styleshee

妙味课堂——JavaScript基础课程笔记

集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热身课程写JS的步骤先实现布局想出实现原理了解JS语法希望把某个元素移除的实现 display: none; 显示为无 visibility: hidden; 隐藏 width \ height 透明度 left \ top 拿与背景色相同的div盖住该元素利用margin值 …… 获取元

js实现完整轮播

1.封装一个简单的动画函数 function animate(obj,target,callback){ clearInterval(obj.timer);//清除定时器防止定时器重复添加 obj.timer=setInterval(function(){ var step=(target-obj.offsetLeft)/10; //定义一个步长,实现速度变化 step=step>0 ? Math.ceil(step) : Math.floor(step); //解决取整问题的bug if(ob

前端Web APIS

day01 - Web APIs 学习目标: 能够通过ID来获取元素能够通过标签名来获取元素能够通过class来获取元素能够通过选择器来获取元素能够获取body和html元素能够给元素注册事件能够修改元素的内容能够区分innerText和innerHTML的区别能够修改像div这类普通元素的属性能够修改表单元素的属性能够修改元素的样式属性 1.1. Web API介绍 1.1.1 API的概念 API(Application Programming Interface,应用程序编程接口)是一些预

WebApis中DOM操作的基本案例

1.1. 排他操作 1.1.1 排他思想如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法: 所有元素全部清除样式(干掉其他人) 给当前元素设置样式 (留下我自己) 注意顺序不能颠倒,首先干掉其他人,再设置自己 <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> &l

EXT.NET 使用总结（2） ---TreePanel(带右键菜单，节点自定义属性)

TreePanel(带右键菜单,节点自定义属性) 其实这个树控件也挺好用的.http://www.ztree.me/v3/main.php#_zTreeInfo html <ext:Panel ID="ContentPanel" runat="server" Width="960" MinHeight="560" Height="560" Border="false" Closab

HTML5自定义属性之data-*

HTML5 增加了一项新功能是自定义数据属性 ,也就是 data-* 自定义属性.在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放.当然高级浏览器下可通过脚本进行定义和数据存取.在项目实践中非常有用. <input type="button" value="按钮" data-index="10" data-index-color="red" > 在开始之前我们先来

巴特西