JS如何给ul下的所有li绑定点击事件,点击使其弹出下标和内容
这是一个非常常见的面试题,出题方式多样,但考察点相同,下面我们来看看这几种方法:
方法一:
var itemli = document.getElementsByTagName("li"); for(var i = 0; i<itemli.length; i++){ itemli[i].index = i; //给每个li定义一个属性索引值 itemli[i].onclick = function(){ alert(this.index+this.innerHTML); } }
方法二:
var itemli = document.getElementsByTagName("li"); for(var i = 0; i<itemli.length; i++){ (function(n){ itemli[i].onclick = function(){ alert(n+itemli[n].innerHTML); } })(i) }
方法三:
var itemli = document.getElementsByTagName("li"); for(var i = 0; i<itemli.length; i++){
itemli[i].onclick = function(n){
return function(){
alert(n+itemli[n].innerHTML);
}
}(i)
}
方法四:
$("ul li").click(function(){
var item = $(this).index(); //获取索引下标 也从0开始
var textword = $(this).text(); //文本内容
alert(item+textword);
})
上面这四种方法都可以实现循环绑定,但是我们知道,频繁的操作DOM是非常消耗性能的,如果有1000个li,怎么办呢?我们还有另一种思路,事件代理,又称事件委托。简单的来讲就是利用JS中事件的冒泡属性,把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。下面我们来看看。
方法五(JS事件代理):
var ul = document.querySelector("ul");
ulItem.onclick = function (e) {
e = e || window.event; //这一行及下一行是为兼容IE8及以下版本
var target = e.target || e.srcElement;
if (target.tagName.toLowerCase() === "li") {
var li = this.querySelectorAll("li");
index = Array.prototype.indexOf.call(li, target);
alert(target.innerHTML + index);
}
}
上述代码中,为什么需要 “index = Array.prototype.indexOf.call(li,target);” 这样使用数组的indexOf方法呢,这是因为querySelectorAll方法获取到的元素列表不是数组,和函数的arguments一样是一种类数组类型,不可以直接使用数组的方法。
方法六(jQuery事件代理):
$(document).ready(function () {
$("ul").on("click", function (event) {
var target = $(event.target);
alert(target.html() + target.index())
});
JS如何给ul下的所有li绑定点击事件,点击使其弹出下标和内容的更多相关文章
- jquery获取ul下的所有li个数
通过jquery获取ul下所有li的个数(eg) $("ul li").length 通过jquery设置标签css的样式(eg)$("#div").css({ ...
- JS 循环给li绑定参数不同的点击事
以下内容纯属个人理解,不正确的地方还请大神留言,不胜感激! 源代码:(按个人方式选用一种即可) <ul> <li>1</li> <li>2</li ...
- js弹出div层内容(按回退键关闭div层及遮罩)
<!--弹出的div列表对应的详情--> <div id="newhtml" class="white_content"> <di ...
- jquery 判断ul下是否存在li
$("ul").has("li").length > 0;$("ul > li").length > 0;$(" ...
- 2018.7.6 js实现点击事件---点击小图出现大图---时间定时器----注册表单验证
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- js验证前后密码是否一致,为什么当我输入不一致密码时,不会弹出警告啊
<form name="form" action="#"><input type="password" id=" ...
- 遍历ul下的li,点击弹出li的索引
首先我们需要一个html结构 <div > <ul> <li>a</li> <li>a</li> <li>a< ...
- 通过jquery获取ul中第一个li的属性
当加载列表时,默认希望选中第一条.top_menu 为ul的ID 通过 $("#top_menu li:first") 就可以获取到 ul下第一个li标签.然后就可以利用 例如 修 ...
- 用mobiscroll.js的treelist实现弹出下拉效果
首先跟上次说的一样, 第一步:引入js.css样式 1)mobiscroll-2.13.2.full.min.css 2)jquery.min.js 3)mobiscroll-2.13.2.full. ...
随机推荐
- arcgis版接合图表5.2 免费软件,支持国家2000坐标系,ArcGIS10.0,ArcGIS10.1,ArcGIS10.2都可以使用
下载地址:http://files.cnblogs.com/gisoracle/jionmap52.rar 1. 国家2000,西安80,北京54.坐标系的接合图表生成.根据经纬度范围,坐标 ...
- JS高级程序设计第三版——基本概念
前言:任何语言的核心都必然会描述这门语言最基本的工作原理.而描述的内容通常都要设计这门语言的语法.操作符.数据类型.内置功能等用于构建复杂解决方案的基本概念. 语法: 1. 区分大小写: 2. 标 ...
- c++类模板成员函数报错
类模板成员函数要不就在类模板中实现,要不就和类模板写在同一个文件中. 否则然会出现下面错误: >main.obj : error LNK2019: 无法解析的外部符号 "public: ...
- js判断一个对象是否为数组
1,真正的数组的判断方法 javascript中最简单的声明数组方法为: var a = []; 判断是否为数组的最直接的方法为: 复制代码 代码如下: a instanceof Array //tr ...
- 华为OJ-表示数字
要求:将一个字符中所有出现的数字前后加上符号"*",其他字符保持不变 #include<iostream> #include<string> using n ...
- npm 安装axios和使用增删改查
1:安装axios(建议安装淘宝镜像) npm install axios 2:项目导入 npm install --save axios vue-axios 3:页面导入 import axios ...
- GCO团队合作
队名:GCO 队员: B20150304116谢冰媛 (组长) B20150304401王粲 B20150304115钟玺琛 B20150304226梁天海 ...
- python入门18 继承和多态
继承:子类继承父类的属性和方法 class 子类名(父类1,父类2) 多态:子类重写父类的方法 判断对象是否是某个类的实例: isinstance(object,class) 父类-汽车类 #co ...
- Jmeter入门9 __digest函数 jmeter字符串连接与登录串加密应用
登录请求中加密串是由多个子串连接,再加密之后传输. 参数连接:${var1}${var2}${var3} 加密函数:__digest (函数助手里如果没有该函数,请下载最新版本的jmeter5 ...
- Git 还没push 前可以做的事(转)
Git 版本控制系統(3) 還沒 push 前可以做的事 转载:http://ihower.tw/blog/archives/2622 這一集要講的是:還沒 push 前可以做的壞事,也就是 re ...