1 乱用选择器

坑人指数:200

JQuery选择器调用代价很大,反复调用效率更低。应采用缓存对象的方法或采用链式调用的方式。

//错误的写法
$("#button").click(function(){
$('#list li').addClass('strong');
$('#list li').css('color', 'red');
});
//正确的写法
$("#button").click(function(){
$lis = $('#list li');
$lis.addClass('strong');
$lis.css('color', 'red');
});
//更好的写法
$("#button").click(function(){
$('#list li').addClass('strong').css('color', 'red');
});

2 全局选择效率低

坑人指数:100

尽量使用上下文(context)查找,避免全局选择的使用。全局选择器会进行整个Doc的查找,效率很低。

//错误的写法
$(".active").method();
//正确的写法
var ul = $("#myList");
$(".active",ul).method();

3 复制匿名函数

坑人指数:50

避免多次复制匿名函数的写法,将匿名函数分离出来,供其它对象多次调用。

//错误的写法
$('#myDiv').click( function(){
//一些操作
});
//正确的写法
function divClickFn(){
//一些操作
}
$('#myDiv').click(function(){
divClickFn();
});

4 误用ajax的complete

坑人指数:30

当用ajax进行数据请求时,避免使用complete回调方法,而应该使用success方法。complete回调在请求成功或失败都会触发。

//错误的写法
$.ajax({
url: "http://tools.42du.cn/jsonp/student/all",
}).complete(function( data ) {
//一些操作
});
//正确的写法
$.ajax({
url: "http://tools.42du.cn/jsonp/student/all",
}).success(function( data ) {
//一些操作
});

5 链式调用的误用

坑人指数:20

采用链式调用的方式会使对象在渐变未完成之前就被移除,即remove方法会在fadeOut方法完成之前调用。当需要第一方法完成之后,再执行第二个方法,请使用回调,即第二种方式。

//错误的写法
$("#myDiv").click(function(e) {
$(this).fadeOut("slow").remove();
});
//正确的写法
$("myDiv").click(function(e){
$(this).fadeOut("slow", function(){
$(this).remove();
});
});

6 事件多次绑定

坑人指数:20

如果你绑定(bind)同一事件多次,响应就会被执行多次。为避免多次执行,请先做事件解绑再重新绑定。

//避免响应多次执行
$("myDiv").unbind("click").bind("click");

7 错误使用this指示符

坑人指数:10

this指示符存在于一定的上下文中的,当上下文变化时this指向不同的对象。如果还想调用原上下文中的this,则需要在原上下文中缓存原this对象($that = $(this))。

//错误的写法
$( "#myList").click( function() {
$(this).method();
$("#myList li").each( function() {
//this并不指向myList
$(this).method2();
})
});

JQuery踩过的坑,遇到就记下的更多相关文章

  1. web开发实战--弹出式富文本编辑器的实现思路和踩过的坑

    前言: 和弟弟合作, 一起整了个智慧屋的小web站点, 里面包含了很多经典的智力和推理题. 其实该站点从技术层面来分析的话, 也算一个信息发布站点. 因此在该网站的后台运营中, 富文本的编辑器显得尤为 ...

  2. "开发路上踩过的坑要一个个填起来————持续更新······(7月30日)"

    欢迎转载,请注明出处! https://gii16.github.io/learnmore/2016/07/29/problem.html 踩过的坑及解决方案记录在此篇博文中! 个人理解,如有偏颇,欢 ...

  3. 第八篇:web之前端踩的一些坑

    前端踩的一些坑   前端踩的一些坑 本节内容 事件代理 清除标签的所有事件 bootstrap的模态框自定义方法 ajax在django里面实现post提交 ajax提交数据嵌套 1.事件代理 之前写 ...

  4. 《C++之那些年踩过的坑(三)》

    C++之那些年踩过的坑(三) 作者:刘俊延(Alinshans) 本系列文章针对我在写C++代码的过程中,尤其是做自己的项目时,踩过的各种坑.以此作为给自己的警惕. [版权声明]转载请注明原文来自:h ...

  5. 那些移动端web踩过的坑

    原文链接:https://geniuspeng.github.io/2017/08/24/mobile-issues/ 扔了N久,还是捡回来了.好好弄一下吧.刚工作的时候挺忙的,后来不那么忙了,但是变 ...

  6. framework7 总结之前遇到的问题和踩过的坑

    官网上写的案例比较简单明了,我这里就将我使用时踩过的坑做一个总结,与大家共勉! 最近使用framework,基本全靠浏览官方文档,当然,有遇到了许多的错误,开始不知道哪里出问题也很着急,到最后发现问题 ...

  7. 项目中踩过的坑之-sessionStorage

    总想写点什么,却不知道从何写起,那就从项目中踩过的坑开始吧,希望能给可能碰到相同问题的小伙伴一点帮助. 项目情景: 有一个id,要求通过当前网页打开一个新页面(不是当前页面),并把id传给打开的新页面 ...

  8. 【转载】Fragment 全解析(1):那些年踩过的坑

    http://www.jianshu.com/p/d9143a92ad94 Fragment系列文章:1.Fragment全解析系列(一):那些年踩过的坑2.Fragment全解析系列(二):正确的使 ...

  9. Redis Cluster踩过的坑

    Redis Cluster踩过的坑请参考如下链接:http://www.iteye.com/blogs/subjects/Redis_Cluster_Devops

随机推荐

  1. 推荐web前端框架bootstrap

    bootstrap是基于Jquery而开发的一个前端框架. 全中文的学习网站:http://www.runoob.com/bootstrap/bootstrap-tutorial.html 实际上就是 ...

  2. JavaScript和php数组的定义

    JavaScript: var arr=[值1,值2,值3];                     //隐式创建 var arr=new Array(值1,值2,值3);      //直接实例化 ...

  3. 设计模式 - 迭代器模式详解及其在ArrayList中的应用

    基本介绍 迭代器模式(Iterator Pattern)是 Java 中使用最多的一种模式,它可以顺序的访问容器中的元素,但不需要知道容器的内部细节 模式结构 Iterator(抽象迭代器):定义遍历 ...

  4. Shodan使用简述

    申明 本文只做相关介绍,使用者应当严格自律,承诺遵守法律法规     Shodan,一款互联网下的可怕搜索引擎.它的可怕之处在于Shodan可以搜索各种在线的网络设备.比如:摄像头.路由器.打印机.服 ...

  5. linux 二级目录结构

    Linux系统里面目录的顶点都是根 /etc /etc/passwd : Linux用户登陆的文件 /etc/group : 存放Linux用户组的文件 /etc/shadow :存放用户密码的文件 ...

  6. 前端跨域解决方案: JSONP的通俗解说和实践

     对于前端开发者而言,跨域是一个绕不开的话题.只有真正明白了各种方案的工作机制,才能针对性地进行跨域方案选型.本文将以探索者的视角,试图用最通俗的语言对一种"鼎鼎大名"的跨域解决方 ...

  7. 【Netapp】在模拟器中使用disk removeowner报错

    报错信息如下: Cluster2::storage disk*> removeowner NET-1.43 Error: command failed: Disk NET-1.43 is not ...

  8. USACO Training Section 1.1 贪婪的送礼者Greedy Gift Givers

    P1201 [USACO1.1]贪婪的送礼者Greedy Gift Givers 题目描述 对于一群(NP个)要互送礼物的朋友,GY要确定每个人送出的钱比收到的多多少.在这一个问题中,每个人都准备了一 ...

  9. 一个简单的wed服务器SHTTPD(2)———— 客户端请求分析

    //start from the very beginning,and to create greatness //@author: Chuangwei Lin //@E-mail:979951191 ...

  10. 一个简单的wed服务器SHTTPD(1)————命令行和文件配置解析

    开始学习<LInux网络编程>中的综合案例,虽然代码书上有,还是自己打一下加深理解和印象. 主要有两个函数,完成命令行的解析,另一个实现配置文件的解析,注释还是比较丰富的哦. //star ...