一:页面加上$(function(){***内容***})与不加的区别

1、这个是DOM加载完之后再加载JS代码,你的JS如果放在文档后面可能一样,但是如果你要是把JS放在head里面就有差别了(放在head里面的时候加上jquery包围 会正确执行,而不加上则会导致执行时没有找到相应dom而出错)。

2、如果不用,可能导致文档没有加载完毕就执行了代码,导致代码执行不正确。

二:self,this

1、self: 这个非常简单。我们知道,打开任何一个网页,浏览器会首先创建一个窗口,这个窗口就是一个window对象,也是js运行所依附的全局环境对象和全局作用域对象。self 指窗口本身,它返回的对象跟window对象是一模一样的。也正因为如此,window对象的常用方法和函数都可以用self代替window。举个例子,常见的写法如“self.close();”,把它放在<a>标记中:“<a href="javascript:self.close();">关闭窗口</a>”,单击“关闭窗口”链接,当前页面关闭。

2、this: this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时);

三:事件绑定:bind-live-delegate-on

1、bind

$( "#members li a" ).bind( "click", function( e ) {} );
$( "#members li a" ).click( function( e ) {} );

优点:
·这个方法提供了一种在各种浏览器之间对事件处理的兼容性解决方案;
·非常方便简单的绑定事件到元素上;
·.click(), .hover()...这些非常方便的事件绑定,都是bind的一种简化处理方式;
·对于利用ID选出来的元素是非常好的,不仅仅是很快的可以hook(挂钩)上去(因为一个页面只有一个id),而且当事件发生时,handler(处理器)可以立即被执行(相对于后面的live, delegate)实现方式;

缺点:
·它会绑定事件到所有的选出来的元素上;
·它不会绑定到在它执行完后动态添加的那些元素上;
·当元素很多时,会出现效率问题;
·当页面加载完的时候,你才可以进行bind(),所以可能产生效率问题;

2、live

$( "#members li a" ).live( "click", function( e ) {} );
$( "#members li a" ).click( function( e ) {} );

优点:
·这里仅有一次的事件绑定,绑定到document上而不像.bind()那样给所有的元素挨个绑定;
·那些动态添加的elemtns依然可以触发那些早先绑定的事件,因为事件真正的绑定是在document上;
·你可以在document ready之前就可以绑定那些需要的事件;

缺点:
·从1.7开始已经不被推荐了,所以你也要开始逐步淘汰它了;
·Chaining没有被正确的支持;

stopPropagation:(

假设你给一个div设置了hover事件,事件里包括的function所执行的事件要2秒左右才能执行完一次,但你在这两秒里可以hover很多次,电脑就会累计下来,即使你后面鼠标移开了,电脑也会继续运行,直到全部运行完,但你要是加上了stopPropagation,当你的鼠标一一开div,事件就会立即终止,不会你什么都不干,电脑还在运行程序,提高了用户体验


·当使用event.stopPropagation()是没用的,因为都要到达document;
·因为所有的selector/event都被绑定到document, 所以当我们使用matchSelector方法来选出那个事件被调用时,会非常慢;
·当发生事件的元素在你的DOM树中很深的时候,会有performance(性能)问题;

3、delegate

$( "#members li a" ).delegate( "click", function( e ) {} );
$( "#members li a" ).click( function( e ) {} );

优点:
·你可以选择你把这个事件放到那个元素上了;
·chaining被正确的支持了;
·jQuery仍然需要迭代查找所有的selector/event data来决定那个子元素来匹配,但是因为你可以决定放在那个根元素上,所以可以有效的减小你所要查找的元素;
·可以用在动态添加的元素上;

缺点:
·需要查找那个那个元素上发生了那个事件了,尽管比document少很多了,不过,你还是得浪费时间来查找;

4、on

$( "#members li a" ).on( "click", function( e ) {} );
$( "#members li a" ).click( function( e ) {} );

其实.bind(), .live(), .delegate()都是通过.on()来实现的,.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的。

优点:
·提供了一种统一绑定事件的方法;
·仍然提供了.delegate()的优点,当然如果需要你也可以直接用.bind();

缺点:
·也许会对你产生一些困扰,因为它隐藏了一前面我们所介绍的三种方法的细节;

最后结论:

·用.bind()的代价是非常大的,它会把相同的一个事件处理程序hook到所有匹配的DOM元素上;
·不要再用.live()了,它已经不再被推荐了,而且还有许多问题;
·.delegate()会提供很好的方法来提高效率,同时我们可以添加一事件处理方法到动态添加的元素上;
·我们可以用.on()来代替上述的3种方法;

js(jQuery)tips的更多相关文章

  1. js(jQuery)获取自定义data属性的值

    有时候因为需要在标签上设置自定义data属性值, <div class="col-sm-6 col-md-4" id="get_id" data-c_id ...

  2. js (jQuery)分组数据

    function getobjArr (data) { var result = []; data.HELMET.system = '系统分类' // console.log(data) $.each ...

  3. 前端总结·基础篇·JS(四)异步请求及跨域方案

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  4. 玩转Node.js(四)-搭建简单的聊天室

    玩转Node.js(四)-搭建简单的聊天室 Nodejs好久没有跟进了,最近想用它搞一个聊天室,然后便偶遇了socket.io这个东东,说是可以用它来简单的实现实时双向的基于事件的通讯机制.我便看了一 ...

  5. 玩转Node.js(一)

    玩转Node.js(一) 在说Node.js之前,我们先来说说js,如果你也曾开发过前端,那么你一定接触到了这个叫JavaScript有趣的东西,而对于JavaScript,你只会基本的操作——为we ...

  6. Vue.js+vue-element搭建属于自己的后台管理模板:什么是Vue.js?(一)

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言 本教程主要讲解关于前端Vue.js框架相关技术知识,通过学习一步一步学会搭建属于自己的后台管理模板,并 ...

  7. Sping MVC不使用任何注解处理(jQuery)Ajax请求(基于XML配置)

    1. Spring Spring框架是一个轻量级的解决方案,是一个潜在的一站式商店,用于构建企业就绪的应用程序.Spring框架是一个Java平台,为开发Java应用程序提供全面的基础架构支持.Spr ...

  8. Struts2处理(jQuery)Ajax请求

    1. Ajax     Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)时一种创建交互式网页应用的网页开发技术,它并不是一项新的技术,其产生 ...

  9. Servlet处理(jQuery)Ajax请求

    1. jQuery     jQuery是一个JavaScript函数库,极大的简化了JavaScript编程,很容易学习.jQuery是目前最流行的开源js框架,并且提供了大量的扩展. 2. Aja ...

随机推荐

  1. 线性表接口的实现_Java

    线性表是其组成元素间具有线性关系的一种线性结构,对线性表的基本操作主要有插入.删除.查找.替换等,这些操作可以在线性表的任何位置进行.线性表可以采用顺序存储结构和链式存储结构表示. 本接口的类属于da ...

  2. python oop常用术语 继承 多态 封装

    面向对象优点 1.通过封装明确了内外 2.通过继承+多态在语言层面支持了归一化设计 抽象/实现 抽象指对现实世界问题和实体的本质表现,行为和特征建模,建立一个相关的子集,可以用于 绘程序结构,从而实现 ...

  3. centos7上安装python3

    一.安装环境及版本 CentOS 6.5 Python 3.6.1 二.安装依赖包 1.安装静态库 # yum install -y openssl-static 注:如果不安装该静态库,会导致pyt ...

  4. Mycat中间件

    数据库中间件Mycat自我介绍 一.mycat概述 1.功能介绍 mycat一个开源的分布式数据库系统,是一个实现了mysql协议的server前端用户可以把它看成一个数据库代理,用mysql客户端工 ...

  5. [翻译] FSLineChart

    FSLineChart A line chart library for iOS. 一个iOS的线状图控件. Installing FSLineChart - 安装 Add the contents ...

  6. 外部读取Excel的两种方法

    1.使用Epplus读取 下载地址为https://epplus.codeplex.com/,下载文件后引用Epplus.dll文件. 这个类库读取Excel方便快捷,但是它只能读取.xlsx类型的文 ...

  7. flash 动画展示

  8. 深入浅出SharePoint——常用的url命令

    ?&displaymode=design  页面可编辑

  9. January 06 2017 Week 1st Friday

    Victory won't come to me unless I go to it. 胜利是不会向我走来的,我必须自己走向胜利. I wish I can walk from one victory ...

  10. Foj 2296 Alice and Bob(博弈、搜索)

    Foj 2296 Alice and Bob 题意 两个人博弈,规则如下:轮流取0~9中的数字,最后Alice所得的数字个数为1~n中,数位在Alice所取集合中出现奇数次的. 双方想获得尽量多,问A ...