<!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. subprocess模块

    subprocess的目的就是启动一个新的进程并且与之通信. subprocess模块中只定义了一个类: Popen.可以使用Popen来创建进程,并与进程进行复杂的交互.它的构造函数如下: subp ...

  2. C++ operator 的一种不会的用法

    自认为对C++比较熟悉,突然看到一些奇怪的代码(在看网上下载的代码Sockets): class SocketAddress { public: virtual ~SocketAddress() {} ...

  3. oracle创建删除用户和表空间

    创建用户:sqlplus /nologconn / as sysdba;create user username identified by passwordgreant dba to usernam ...

  4. PHP在yii2中封装SuperSlide 幻灯片编写自己的SuperSlideWidget的例子

    因为近期给朋友公司做个门户网站,把荒置了6.7年的PHP又重新拾起,发现PHP这些年兴旺多了,很多新的东西看的不明不白,研究了几个框架ZendFramework.thinkphp.Symfony.yi ...

  5. JS 进制转换

    十进制转换成其他进制 objectname.toString([radix])   objectname 必选项.要得到字符串表示的对象. radix 可选项.指定将数字值转换为字符串时的进制. 例如 ...

  6. 使用npm安装一些包失败了的看过来（npm国内镜像介绍）

    这个也是网上搜的,亲自试过,非常好用! 镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候配置还在): 1.通过config命令 npm config set reg ...

  7. 双系统 fedora 恢复引导

    因为硬盘坏了,所以买了个固态的用用. 先装windows,再装fedora及常用必备的驱动软件装上. 快要完成了心情都挺好,可是在一次关机时window7关机很慢一直在删索引,我嫌时间太长,直接按电源 ...

  8. Nginx -- Gzip 压缩功能作用

    1.对应的压缩参数说明# 开启gzip压缩功能gzip on; # 设置允许压缩的页面最小字节数,页面字节数从header头的Content-Length中获取.默认值是0,不管页面多大都进行压缩,建 ...

  9. RT-Thread的线程（任务）处理【RT-Thread学习笔记 2】

    RT-Thread中使用线程这个概念,而不是任务.两者相似,我在这里把他的线程当作任务来理解了 1.任务处理: 动态任务相关API 创建任务:rt_thread_create函数,创建任务之后会返回r ...

  10. mongodb配置文件

    启动MongoDB有2种方式,一是直接指定配置参数,二是指定配置文件.这里先介绍配置文件,启动方式如下: 1.mongod --config /etc/mongodb.conf 配置如下: verbo ...