<!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()与快捷处理的区别、的更多相关文章

  1. 超链接a标签的属性target的可选值有哪些以及区别

    超链接a标签的属性target的可选值有哪些以及区别 1.<a target="_blank"></a> 2.<a target="_par ...

  2. target，currentTarget和this三者的区别

    target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的 ...

  3. html中的a标签的target属性的四个值的区别？

    target属性规定了在何处打开超链接的文档. 如果在一个 <a> 标签内包含一个 target 属性,浏览器将会载入和显示用这个标签的 href 属性命名的.名称与这个目标吻合的框架或者 ...

  4. 超链接a的target属性

    <a>标签的target意思很明确就是在哪里打开目标文档. 第一种情况: 默认情况:当我们没有设置超链接属性target的value值时默认是_self,即<a target=&qu ...

  5. android 中targetSdkVersion和与target属性的区别

    AndroidMenifest.xml中targetSdkVersion和project.properties中的target属性的区别      在AndroidMenifest.xml中,常常会有 ...

  6. 转-超链接a的target属性

    超链接a的target属性 <a>标签的target意思很明确就是在哪里打开目标文档. 第一种情况: 默认情况:当我们没有设置超链接属性target的value值时默认是_self,即&l ...

  7. 【详细解析】MySQL索引详解（ 索引概念、6大索引类型、key 和 index 的区别、其他索引方式）

    [详细解析]MySQL索引详解( 索引概念.6大索引类型.key 和 index 的区别.其他索引方式) MySQL索引的概念: 索引是一种特殊的文件(InnoDB数据表上的索引是表空间的一个组成部分 ...

  8. targetSdkVersion和与target属性的区别

    参考:http://blog.csdn.net/dai_zhenliang/article/details/8175781 AndroidMenifest.xml中targetSdkVersion和p ...

  9. python中一些相似用法的区别：index()和find()，dict[]和get()

    index和find在字符串中的区别: index()方法和find()方法相似,唯一的区别就是find方法不包含索引值会返回-1,而index()不包含索引值会抛出异常   同样的:获取字典dict ...

随机推荐

  1. SolrCloud分布式集群部署步骤

    Solr及SolrCloud简介 Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成 ...

  2. 用Windows PowerShell 控制管理 Microsoft Office 365

    如果想要通过PowerShell控制管理Office365,首先要安装Microsoft Online Services Sign-In Assistant 7.0,链接如下 Microsoft On ...

  3. (zhuan) Deep Reinforcement Learning Papers

    Deep Reinforcement Learning Papers A list of recent papers regarding deep reinforcement learning. Th ...

  4. virtual file system (VFS)

    http://www.ibm.com/developerworks/library/l-virtual-filesystem-switch/ http://www.ibm.com/developerw ...

  5. IE弹出窗口显示URL地址栏

    工具-->Internet 选项-->安全-->自定义级别-->允许网站打开没有地址栏或状态栏的窗口-->禁止

  6. python3验证码机器学习

    python3验证码机器学习 文档结构为 -- iconset -- ... -- jpg -- captcha.gif -- py -- crack.py 需要的库 pip3 install pil ...

  7. [转]libevent简介和使用

    libevent是一个基于事件触发的网络库,memcached底层也是使用libevent库. 总体来说,libevent有下面一些特点和优势:* 事件驱动,高性能:* 轻量级,专注于网络: * 跨平 ...

  8. spring mvc中使用freemark的一点心得

    参考文档: FreeMarker标签与使用 连接http://blog.csdn.net/nengyu/article/details/6829244 freemarker学习笔记--指令参考: ht ...

  9. combox 同时写入和获取 text ，value

    c# combox 同时写入和获取 text ,value 2007-10-10 16:33:44|  分类: c# 知识|举报|字号 订阅     public class ComboBoxItem ...

  10. [转载]jQuery1.9完全删除live事件

    其实关于live被删除的事件早就在1.7.2版本以后就有通知过了 不过在官方一直提倡使用.on代替.live的过程中 .live事件一直沿用 今天更新了 看下jQuery1.9的相关信息 发现api中 ...