index()、e.target.value、on()与快捷处理的区别、
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head> <body>
<div id="n1">
<div id="n2">
<span id="n3"></span>
<ul id="n4">
<p></p><p>p</p>
<li id="n5">item1</li>
<li id="n6">item2</li>
<li id="n7">item3</li>
</ul>
<span id="n8"></span>
</div>
</div>
<script>
// index() 中如果无参数,则返回li在同辈参数中索引位置
console.log($("li").index()) //2因为前面有两个p,index值从0开始计算
// 如果前后都传入jquery对象作为参数,那么就代表是返回
// 第二个参数依据第一个参数的索引位置,且第二个属于第一个,否则返回-1,例如此时在ul以依据查找#n5索引位置
console.log($("li").index($("#n7"))) //2
console.log($("ul").index($("#n5"))) //-1 console.log($("span").index($("#n8"))) //1
// 返回结果值同上面,
// 此用法和上不同之处在于:被查找元素传入jquery对象,为依据的元素传入DOM对象,此句翻译为
// 第一个参数依据第二个DOM的索引位置,且第一个属于第二个
console.log($("#n8").index("span"))
</script>
</body> </html>
e.target.value
target定义:
target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。
语法:
event.target
event.target.nodeName //获取事件触发元素标签name(li,p...)
event.target.id //获取事件触发元素id
event.target.className //获取事件触发元素classname
event.target.innerHTML //获取事件触发元素的内容(li)
等。。。
this 与 e.target区别:
简单来说,this会冒泡。e.target不冒泡就是指向事件触发的dom。
this就是指向当前事件所绑定的元素,
e.target指向事件执行时鼠标所点击区域的那个元素。
容易搞不懂的地方是,初学者会认为当前事件所绑定的元素不就是鼠标所点击的那个元素嘛,这时候就要看看事件绑定的元素内部有没有子元素了,如果有子元素的话e.target指向这个子元素,如果没有,e.target和this都指向事件所绑定的元素。
事件委托:原生js
事件委托就是事件目标自身不处理事件,而是把处理任务委托给其父元素或者祖先元素,甚至根元素(document)。
使用事件委托时,如果目标元素上的其他事件处理程序使用.stopPropagation()阻止了事件传播,那么事件委托就会失效。
on
多个事件绑定同一个函数
$("#elem").on("mouseover mouseout",function(){ });
通过空格分离,传递不同的事件名,可以同时绑定多个事件
多个事件绑定不同函数
$("#elem").on({
mouseover:function(){},
mouseout:function(){},
});
通过空格分离,传递不同的事件名,可以同时绑定多个事件,每一个事件执行自己的回调方法
将数据传递到处理程序
function greet( event ) {
alert( "Hello " + event.data.name ); //Hello 慕课网
}
$( "button" ).on( "click", {
name: "慕课网"
}, greet );
可以通过第二参数(对象),当一个事件被触发时,要传递给事件处理函数的
index()、e.target.value、on()与快捷处理的区别、的更多相关文章
- 超链接a标签的属性target的可选值有哪些以及区别
超链接a标签的属性target的可选值有哪些以及区别 1.<a target="_blank"></a> 2.<a target="_par ...
- target,currentTarget和this三者的区别
target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的 ...
- html中的a标签的target属性的四个值的区别?
target属性规定了在何处打开超链接的文档. 如果在一个 <a> 标签内包含一个 target 属性,浏览器将会载入和显示用这个标签的 href 属性命名的.名称与这个目标吻合的框架或者 ...
- 超链接a的target属性
<a>标签的target意思很明确就是在哪里打开目标文档. 第一种情况: 默认情况:当我们没有设置超链接属性target的value值时默认是_self,即<a target=&qu ...
- android 中targetSdkVersion和与target属性的区别
AndroidMenifest.xml中targetSdkVersion和project.properties中的target属性的区别 在AndroidMenifest.xml中,常常会有 ...
- 转-超链接a的target属性
超链接a的target属性 <a>标签的target意思很明确就是在哪里打开目标文档. 第一种情况: 默认情况:当我们没有设置超链接属性target的value值时默认是_self,即&l ...
- 【详细解析】MySQL索引详解( 索引概念、6大索引类型、key 和 index 的区别、其他索引方式)
[详细解析]MySQL索引详解( 索引概念.6大索引类型.key 和 index 的区别.其他索引方式) MySQL索引的概念: 索引是一种特殊的文件(InnoDB数据表上的索引是表空间的一个组成部分 ...
- targetSdkVersion和与target属性的区别
参考:http://blog.csdn.net/dai_zhenliang/article/details/8175781 AndroidMenifest.xml中targetSdkVersion和p ...
- python中一些相似用法的区别:index()和find(),dict[]和get()
index和find在字符串中的区别: index()方法和find()方法相似,唯一的区别就是find方法不包含索引值会返回-1,而index()不包含索引值会抛出异常 同样的:获取字典dict ...
随机推荐
- C++结构、共用体、枚举
一.结构 结构是C++OOP的基石.学习有关结构的知识僵尸我们离C++的核心OOP更近. 结构是用户定义的类型,同一个结构可以存储多种类型数据,这使得将一个事物的不同属性构成一个对象成为了可能.另外C ...
- servlet有关概念
关于servlet的概念 URL.URN与URi HTTP GET请求,POST请求(区别.适用) 编码 动态网页(GCI.PHP.ASP.JSP等)与静态网页 Model2 静态网页:指的是请求服务 ...
- SDDC-SDN-SDS
SDDCSDNSDS软件定义存储是一个较大的行业发展趋势,这个行业还包括软件定义网络(SDN)和软件定义数据中心(SDDC). SDDC依赖于虚拟化和云计算技术, SDDC的目标是虚拟化数据中心的一切 ...
- ProcessOn
1.地址:http://www.processon.com/ 2.简介:在线创作流程图.BPMN.UML图.UI界面原型设计.iOS界面原型设计等. 3.优势:无需安装,简单易用.可以替代VISO,学 ...
- Ubuntu16.04 安装配置Caffe
Caffe已经是第三次安装配置了,为什么是第三次呢?因为我实在是低估了深度学习对于硬件的要求.第一次我在自己笔记本上配置的单核,CPU only ... 结果是,样例数据跑了4小时,这还怎么玩?第二 ...
- 调试腾讯微博 win8 版 共享失败的问题
我是社交控,喜欢分享内容.分享到 腾讯微博时总失败,心想不能就这么算了,要看看异常的细节. 在VS 2012里,我选择 Debug > Debug Installed App Package, ...
- [PHP] - Laravel - 用户登陆中间件
前言 Laravel 4中,可以使用Route::filter,而在Laravel 5中,没有了filter.php文件,官方建议使用中间件做. 下面是用户登陆的测试例子,涉及到的一些方法和使用,先参 ...
- MySQL服务 - MySQL列类型、SQL模式、数据字典
MySQL列类型的作用: 列类型可以简单理解为用来对用户往列种存储数据时做某种范围"限定",它可以定义数据的有效值(字符.数字等).所能占据的最大存储空间.字符长度(定长或变长). ...
- [platform]Device和Driver注册顺序
1. 设备和驱动注册,无论谁先谁后,都可以通过查询总线进行匹配 设备挂接到总线上时,与总线上的所有驱动进行匹配(用bus_type.match进行匹配),如果匹配成功,则调用bus_type.prob ...
- Python的第六天
常用模块的学习 一.time & datetime模块 时间相关的操作,时间有三种表示方式: 时间戳 1970年1月1日之后的秒,即:time.time() 格式化 ...