以前用jq 做过图片切换 滑动之类的特效现在想用js 试试是怎么一回事

jq图片切换的思路是用index()函数获取当前点击的按钮的索引然后根据索引值将对应索引的图片显示出来

于是查了一下js 是如何获取index的如下：

js代码

var ul = document.getElementById("list");

           var ul_child = ul.getElementsByTagName('li');

           for (var i = 0; i < ul_child.length; i++) {

               ul_child[i].index = i;

               ul_child[i].onclick = function(){

                   var j = this.index;

    　               alert("元素索引为" +this.index);

html代码

<body>

        <ul id="list">

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

        </ul>

</body>

【笔记】js获取当前点击元素的索引的更多相关文章

  1. js获取当前点击元素的索引

    以ul下的li元素为例:获取li的索引,代码如下: <ul id="list"> <li></li> <li></li> ...

  2. vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字

    点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...

  3. 获取id 获取当前点击元素节点的任意 属性

    <a id="haveproces" onclick="fnProces(event)" dataid="{{x.id}}" clas ...

  4. js 获取当前点击的标签

  5. 通过this获取当前点击选项相关数据

    很多时候jquery只能或者应该回去一个集合.然后通过this获取触发时间的对象及相关属性 this.jq('#needsType').on("click", ".sel ...

  6. vue.js之获取当前点击对象(其实是套着vue的原生javascript吧，笑😊)

    转载请注明出处:http://www.cnblogs.com/meng1314-shuai/p/7455575.html 熟悉jquery的小伙伴应该都知道jquery获取当前点击对象是有多么的粗暴, ...

  7. vue中怎么实现获取当前点击对象this

    应用场景 在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示2行超出显示点击查看更多,,要点击查看更多对当前的这条评论进行全部评论展示! 问题描述 要是在传统的点击事件 ...

  8. jq获取当前点击的li是ul中的第几个？

    <script> var navulsize = $('.navul li').size();            var navulwidth = $('.navul li').wid ...

  9. jquery中获取当前点击对象

    jquery中获取当前点击对象的简单方法就是,在点击事件click中传入event对象 click(function(event)); 调用当前对象就是$(event.target);

随机推荐

  1. Oracle Flashback 闪回

    Oracle 的闪回技术是一种数据恢复技术,仅能对用户逻辑错误进行恢复, 闪回针对的是提交commit的事务,没有提交的事务,使用rollback 1.闪回版本查询 Flashback Version ...

  2. 【异常】No ManagedConnections available within configured blocking timeout

    Caused by: org.jboss.util.NestedSQLException: No ManagedConnections available within configured bloc ...

  3. 解决nginx中proxy_pass到tomcat的session丢失问题

    之前在配置tomcat的时候都是一个项目对应一个tomcat,也就是一个端口.最近需要把两个项目整合到同一个tomcat中,通过配置nginx让两个域名指向同一tomcat的不同项目.整合完毕后发现其 ...

  4. 移动web前端下拉刷新效果

    直接复制粘贴 放在页面中即可 <script> window.onload = function(){ window.addEventListener('touchstart', touc ...

  5. .net工具

    程序名称 作者 说明 文件结构与元数据查看看 AssemblyView1.0   可以查看.net平台下exe,dll源代码的类结构,比如变量,属性,函数,事件的定义. Anakrino   源代码开 ...

  6. js获取浏览器高度

    常用: JS 获取浏览器窗口大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 获取窗口宽度 if (window.innerWidth) winWidth = ...

  7. 常用的107条Javascript

    1.         document.write( " "); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document- >html- >( ...

  8. 微信第三方平台定时接收component_verify_ticket

    背景: 获取第三方平台令牌(component_access_token),增加了component_verify_ticket参数.component_verify_ticket由公众平台每隔10分 ...

  9. Python实战 :2017国考职业表excel转数据库，再查询生成excel

    最近看2017年国考的职业表,多而杂,不好过滤我想要的信息,特此把它转成Sqlite3数据库,再从数据库里把查询结果导出成excel,方便找职业. (后附上整套代码) 环境:python2.7   x ...

  10. awk使用shell变量

    awk使用shell变量  (可以计算浮点数) 其实在awk里,是不能直接使用shell变量的 方法是:awk -v 选项让awk 里使用shell变量 TIME=60 awk -v time=&qu ...