<!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. 使用"立即执行函数"（Immediately-Invoked Function Expression，IIFE）

    一.原始写法 模块就是实现特定功能的一组方法. 只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块. function m1(){ //... } function m2(){ // ...

  2. OpenGL投影矩阵

    概述 透视投影 正交投影 概述 计算机显示器是一个2D平面.OpenGL渲染的3D场景必须以2D图像方式投影到计算机屏幕上.GL_PROJECTION矩阵用于该投影变换.首先,它将所有定点数据从观察坐 ...

  3. 百度网盘kbengine - warring项目下载地址

    http://pan.baidu.com/s/1k4J4y 下载解压之后,请看<<使用说明.doc>>,有更新指导

  4. how to use ldid

    1.进入管理员权限 sudo -s 2.赋予app运行权限 chmod -R 777 cellmap.app 3.查看app权限 ldid -e cellmap.app/cellmap 4.打开窗口 ...

  5. 多种姿势破解centos OR readhat enterprises 7.X root密码

    NO:1 启动系统,在grub界面按"e"键,进入编辑模式,找到以"linux16"开始的行,在行尾加入"rd.break",按" ...

  6. CentOS中的常用命令

    1. 网络 1.1 查看所有端口 netstat -ntlp 1.2 查看被打开的端口 netstat -anp 1.3 查看端口占用情况 lsof -i: 或 lsof -i tcp: 2. 硬盘 ...

  7. j技术方案

    采用.net4.0作为基础技术平台,原来是采用.net4.5的,但是后来发现.net4.5不支持Windows Server2003,所以又降为.net4.0. 1.asp.net mvc 4.0 用 ...

  8. MySQL服务 - 客户端工具mysql及mysqladmin使用介绍

    mysql客户端: mysql工具是MySQL官方提供的连接工具,用户可以通过mysql连接到mysqld上进行一系列的SQL操作.mysql工具有两种模式:交互模式和命令行模式.交互模式指令需要连接 ...

  9. win 8 安装 NET framework3.5 方法

    win 8 预装的 NET framework 是 4.5 的,实际上很多程序要求的是 3.5,一般要另从网上下载的才能安装. 这里提供不需要从网上安装 .Net 3.5 的方法: 1.将 win 8 ...

  10. python（29）强大的zip函数

    zip函数:它是python的内建函数,(与序列有关的内建函数有:sorted().reversed().enumerate().zip()),其中sorted()和zip()返回一个序列(列表)对象 ...