【笔记】js获取当前点击元素的索引

最新推荐文章于 2023-08-01 23:53:41 发布
最新推荐文章于 2023-08-01 23:53:41 发布
阅读量321 收藏 1
点赞数
原文链接：http://www.cnblogs.com/stitchgogo/p/5966352.html
版权

以前用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>

 

转载于:https://www.cnblogs.com/stitchgogo/p/5966352.html

weixin_30561177
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript学习笔记之内置对象
11-30
在这个学习笔记中，我们将探讨JavaScript的内置对象，主要包括Window、Screen、Location、History等，它们都是JavaScript环境中非常重要的组成部分。 首先，Window对象是JavaScript的核心，它代表了浏览器的窗口。...
关于JS中this的几种方式
CherryLee_1210的博客
11-04 612
首先关于this的指向问题，关于this我们得分为非严格模式和非严格模式。 在JS非严格模式下 给元素的某一个事件绑定方法，当事件触发，方法执行的时候，绑定的这个方法中的this一般是当前操作的这个DOM元素。 oBox.onclick=function(){ //=>当绑定的方法执行，方法中的this:oBox //=>如何让绑定的方法执行： //1、手动点击oBox,经由
在JS函数里，如何获取调用函数的当前元素DOM
qq_39704803的博客
04-22 6069
一般可以通过触发元素事件，通过$(this)获取当前元素dom，从而进行相应操作。 例： $("#id").on("click",function(){ console.log( $(this).html()); }) 但如果是通过调用方法，对当前元素dom进行操作，$(this)就不行了。最后通过以下方法解决。 <button type="button" class="b...
js获取元素的方法
zybijiso666的博客
08-01 4582
getElementsByClassName()方法返回一个包含了所有指定类名的子元素的类数组对象，作为nodeList对象。documentElement是整个节点树的根节点，即html标签 HTML文档返回对象为HTML元素。getElementsByTagName()方法返回一个动态的包含所有指定标签名的元素的。(documentElement是一个会返回文档对象的根元素的只读属性)documentElement属性以一个元素对象返回一个文档的文档元素。如果HTML元素缺失，返回值为null。
javascript获取点击元素对象
m0_56726855的博客
09-21 6946
获取当前鼠标点击的HTML元素对象 ，可用于判断点击菜单外元素是否为下拉按钮元素实现点击下拉菜单外区域关闭下拉菜单。 实现代码 window.onclick = function (e) { // 获取点击元素对象 var element = document.elementFromPoint(e.clientX,e.clientY); // 获取点击元素的类名并弹窗显示 alert(element.classList); } 测试代码及效果 <...
js获取点击的dom
ndkfa的博客
04-24 3034
表示最初被点击的元素。如果需要获取点击的父级元素（如点击了某个按钮，而不只是该按钮内的文本），则可以使用。注意，这两个方法需要在绑定事件的元素上调用，而不能在。如果需要取消默认行为，则可以使用。如果需要停止事件冒泡，可以使用。，它们指向绑定事件的元素。在事件函数的参数中，
JavaScript 学习笔记（十一）
10-29
### JavaScript 学习笔记（十一）：深入理解 Document 对象 #### 一、Document 对象概述 在继续探讨 `document` 对象之前，我们先简要回顾一下 `document` 在 Web 开发中的重要性。`document` 对象代表当前加载在...
JavaScript学习笔记之JS对象
10-24
Date对象用于处理日期和时间，可以创建日期对象来获取当前日期和时间，也可以创建特定的日期对象。创建Date对象时，如果不提供任何参数，就会获取当前的日期和时间。使用英文-数值格式或数值格式可以创建特定日期的...
Javascript基础笔记
最新发布
08-22
JavaScript 基础笔记 JavaScript 是一种高级的、动态的、基于对象的脚本语言，主要用于客户端的脚本编程。下面是 JavaScript 基础笔记的知识点总结： JS 的位置 * 行内式 JS：直接在 HTML 文件中编写 JavaScript ...
JavaScript学习笔记（一）
01-08
- **数组操作**：数组可以通过下标访问元素，`arr.push()`用于添加元素至末尾，`arr.pop()`移除末尾元素，`arr.indexOf(item)`查找元素索引等。 这些基础知识构成了JavaScript编程的基础，后续的学习会涉及更多...
vue.js click点击事件获取当前元素对象的操作
12-28
Vue.js可以传递$event对象 <body id=app> 点击当前行文本 li2 li3 [removed] new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { say: function(msg, event) { //获取点击对象 var el = event.currentTarget; al
JavaScript获取点击元素
码上暴富
04-13 1402
【代码】JavaScript获取点击元素。
JS—获取当前点击的dom元素
热门推荐
Poppy_LYT的博客
08-13 1万+
JS—获取当前点击的dom元素 <button @click=“getDom”> getDom (e) { let aaa = e.target }
js获取当前点击的元素
qq_43654065的博客
05-25 1万+
方法一 <div class="test" onclick="fun(event)"></div> function fun(e){ var tar = e.target console.log(tar) } 方法二 <div class="test" onclick="fun(this)"></div> function fun(obj){ console.log(obj) } ps： onclick事件要定义在全局作用域，不能包裹在win
JavaScript：获取当前事件的元素
1111111111
03-04 4678
1、在监听事件里加入$event参数。 <div ref="cell" style="width: 75px;" @click="downloadData(items.filePath)" @mouseenter="mouseEnter(items.filePath,$event)" @mouseleave="mouseLeave($event)"> {{items.value}} </div>
js 获取dom元素的八种方法
技术的搬运工
03-28 1万+
1、通过css选择器获取一个元素（querySelector）2、通过选择器获取一组元素（querySelectorAll）方法一样，只是可以获取css选择器匹配的。如果你需要返回所有的元素，请使用。方法仅仅返回匹配指定选择器的。
js获取当前点击元素的索引
慢才后生
11-14 1万+
以ul下的li元素为例；获取li的索引，代码如下： &amp;amp;amp;amp;amp;amp;amp;lt;ul id=&amp;amp;amp;amp;amp;amp;quot;list&amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;li&amp;amp;amp;amp;amp;amp;amp;g
js 获得当前 点击 的元素对象
fghfghhgjgj的博客
11-05 2343
js 获得当前 点击 的元素对象： <body> /*传入参数this即可获取当前点击的对象*/ <span id="demo" onclick="capture(this)">点我</span> </body> <script> function capture(data) { console.log(data.id); alert(data.innerText
JS_vue js获取鼠标点击元素对象，vue js点击获取当前元素内容
小歪博客
05-07 1555
js点击获取当前元素内容 .html <div onclick="getEvent(event)">click</div> .js function getEvent(event){ console.log('当前元素对象',event) console.log('当前元素',event.target) console.log('当前元素内容',e.target.innerHTML) } vue点击获取当前元素内容 有时候要获取所点击元素的内容文本等信息 可以在点击事件里
JavaScript全笔记：数组操作与遍历详解
例如，`if (typeof(err[i]) == "number")`用来检查当前元素是否为数字类型。 本笔记涵盖了JavaScript中数组的基本概念、创建方法、操作技巧以及常见遍历策略，这对于理解JavaScript编程中的数组处理非常重要。无论...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值