js(jQuery)tips
一:页面加上$(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的更多相关文章
- js(jQuery)获取自定义data属性的值
有时候因为需要在标签上设置自定义data属性值, <div class="col-sm-6 col-md-4" id="get_id" data-c_id ...
- js (jQuery)分组数据
function getobjArr (data) { var result = []; data.HELMET.system = '系统分类' // console.log(data) $.each ...
- 前端总结·基础篇·JS(四)异步请求及跨域方案
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- 玩转Node.js(四)-搭建简单的聊天室
玩转Node.js(四)-搭建简单的聊天室 Nodejs好久没有跟进了,最近想用它搞一个聊天室,然后便偶遇了socket.io这个东东,说是可以用它来简单的实现实时双向的基于事件的通讯机制.我便看了一 ...
- 玩转Node.js(一)
玩转Node.js(一) 在说Node.js之前,我们先来说说js,如果你也曾开发过前端,那么你一定接触到了这个叫JavaScript有趣的东西,而对于JavaScript,你只会基本的操作——为we ...
- Vue.js+vue-element搭建属于自己的后台管理模板:什么是Vue.js?(一)
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言 本教程主要讲解关于前端Vue.js框架相关技术知识,通过学习一步一步学会搭建属于自己的后台管理模板,并 ...
- Sping MVC不使用任何注解处理(jQuery)Ajax请求(基于XML配置)
1. Spring Spring框架是一个轻量级的解决方案,是一个潜在的一站式商店,用于构建企业就绪的应用程序.Spring框架是一个Java平台,为开发Java应用程序提供全面的基础架构支持.Spr ...
- Struts2处理(jQuery)Ajax请求
1. Ajax Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)时一种创建交互式网页应用的网页开发技术,它并不是一项新的技术,其产生 ...
- Servlet处理(jQuery)Ajax请求
1. jQuery jQuery是一个JavaScript函数库,极大的简化了JavaScript编程,很容易学习.jQuery是目前最流行的开源js框架,并且提供了大量的扩展. 2. Aja ...
随机推荐
- php foreach 报 “Cannot create references to elements of a temporary array expression”
今天在项目中用php foreach数据库查询结果时,为了方便没有判断数据是否存在,直接用(array)强制转换数据时,刚开始网页始终打不开,就报502,一头懵,突然间php报“Cannot crea ...
- Java软件编码规范要求
1.一个类对应一个文件,文件名与类名保持一致 虽然一个“.java”源文件可以有多个类(不是内部类),但是不提倡那么写.
- Effective C++(10) 重载赋值操作符时,返回该对象的引用(retrun *this)
问题聚焦: 这个准则比较简短,但是往往就是这种细节的地方,可以提高你的代码质量. 细节决定成败,让我们一起学习这条重载赋值操作符时需要遵守的准则吧. 还是以一个例子开始: Demo // 连锁赋值 x ...
- 随手记C#资料
1.where T: new()where后的称为泛型约束,这里约束泛型参数T必须具有无参的构造函数 2.判断路径是本地路径还是网址 private static bool IsLocalPath(s ...
- Python学习---django之ORM语法[对象关系映射]180124
ORM语法[对象关系映射] ORM: 用面向对象的方式去操作数据库的创建表以及增删改查等操作. 优点:1 ORM使得我们的通用数据库交互变得简单易行,而且完全不用考虑该死的SQL语句.快速开发. 2 ...
- Python学习---Django的基础学习
django实现流程 Django学习框架: #安装: pip3 install django 添加环境变量 #1 创建project django-ad ...
- Python实例---三级菜单的实现[low]
# version: python3.2.5 # author: 'FTL1012' # time: 2017/12/7 09:16 menu = { '陕西': { '西安': { '未名区': [ ...
- January 01 2017 Week 1st Sunday
This is a new year. A new beginning. And things will change. 新一年,新开始,新气象. Hey Hey Hey. I can see my ...
- 《java编程思想》有必要买吗
<java编程思想>有必要买吗 1.看到过好多个这样的提问,其实我一般真的不那么容易分享自己的这点心得的,这是第一次回答这样的“推荐书籍”方面的问题. 我买编程方面的书籍,有一个非常清晰. ...
- 几个第三方yum源
1.repoforge 官方网站:http://repoforge.org/ 2.epel http://fedoraproject.org/wiki/EPEL 3.Remi http://rpms. ...