1 使用JQuery的ready处理器

如果你的代码操作DOM,则需要DOM加载完成后再运行代码。推荐使用如下的第一种写法,第二种写法在JQuery3.x中已经不推荐使用了。

$(function () {
/* 你的代码 */
}); //或者
$(document).ready(function () {
/* 你的代码 */
});

2 用noConflict()避免冲突并定义别名

如果你的jQuery代码与其它使用$符号作为别名的类库冲突,则使用noConflict()方法定义别名。

$jq = jQuery.noConflict();
$jq(function () {
/* 你的代码 */
}

3 缓存JQuery对象及链式调用

调用jQuery选择器函数$()代价较大,反复调用效率更低。

3.1 错误的方式

//错误
$('#list li').addClass('strong');
$('#list li').css('color', 'red');

3.2 缓存JQuery对象

//正确
var $li = $('#list li');
$li.addClass('strong');
$li.css('color', 'red');

3.3 链式调用

//正确
$('#list li').addClass('strong').css('color', 'red');

4 JQuery变量命名习惯

jQuery包装变量通常以$开头,以区别于标准JavaScript对象。

//良好的命名习惯
var $li = $('#list li');

5 利用DOM原生的属性和函数

虽然jQuery的目标之一是对DOM进行抽象,但利用DOM原生的属性和函数效率更高。在不了解DOM的情况下学习jQuery的人中最常犯的错误之一就是利用jQuery访问元素的属性。

5.1 冗长而缓慢

$('img').click(function () {
$(this).attr('src');
});

5.2 简洁而快速

$('img').click(function () {
this.src;
});

6 创建元素的通用语法

6.1 创建元素通用语法方式

$('<p>', {
text: p_text,
"class": 'red',
title: p_title,
id: p_id
}).appendTo("#myDiv");

6.2 字符串拼接方式

$('<p class="red" id="'+p_id+'" title="'+p_title+'">'+p_text+'</p>').appendTo(#myDiv);

虽然上述两种方式语法正确,功能相同,但是第一种方式更好。第二种字符串拼接的方式可读性差,也更脆弱。

第一种方式对特殊字符的输入是十分强大的。但第二种方式效率较第一种方式更好一些。

JQuery最佳实践及常见错误(转自 简书)的更多相关文章

  1. 【转】jQuery最佳实践

    上周,我整理了<jQuery设计思想>. 那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery".今天的文章则是更进一步,讲解"如何用好jQu ...

  2. JQuery系列(7) - JQuery最佳实践

    上篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery".今天的文章则是更进一步,讲解"如何用好jQuery". 我主要参考了Addy Osman ...

  3. 7 个 jQuery 最佳实践

    前言 随着富网络应用(rich web applications)数量的增长,以及用户对快速交互响应的高期望,开发者开始使用JavaScript库来快速高效的完成一些重复性的工作.这其中最流行的Jav ...

  4. jQuery最佳实践(转载)

    本文转载于阮一峰的博文. 上周,我整理了<jQuery设计思想>. 那篇文章是一篇入门教程,从设计思想的角度,讲解“怎么使用jQuery”.今天的文章则是更进一步,讲解“如何用好jQuer ...

  5. jQuery最佳实践:如何用好jQuery

    一.用对选择器 在jQuery中,你可以用多种选择器,选择同一个网页元素.每种选择器的性能是不一样的,你应该了解它们的性能差异. (1)最快的选择器:id选择器和元素标签选择器 举例来说,下面的语句性 ...

  6. jQuery最佳实践(不断更新中...)

    1. 处理cdn失效 <script type="text/javascript" src="http://xxx.com/jquery.min.js " ...

  7. Go语言最佳实践——异常和错误

    Go语言将错误和异常两者区分对待. 1.Go语言中处理错误的惯用法是将错误以函数或者方法最后一个返回值的形式将其返回,并总是在调用它的地方检查返回的错误值. 2.对于“不可能发生的事情”称为异常,可使 ...

  8. jQuery最佳实践

    1:事件的委托处理(Event Delegation) javascript的事件模型,采用"冒泡"模式,也就是说,子元素的事件会逐级向上"冒泡",成为父元素的 ...

  9. 免费稳定图床最佳实践:PicGo+GitHub+jsDeliver 极简教程

    一.下载 PicGo PicGo 是啥?顾名思义,它是一个快速上传图片并获取 图片 URL 链接的工具. 目前支持七牛.腾讯云.阿里云和 GitHub 等图床.该工具代码已在 GitHub 开源,读者 ...

随机推荐

  1. 【字符串哈希】bzoj3916 [Baltic2014]friends

    枚举断点,哈希判断. #include<cstdio> using namespace std; typedef unsigned long long ull; ull hs,hs1,hs ...

  2. 【置换群】CH Round #63 - OrzCC杯#2省选热身赛 exchange

    第一问置换群裸题. 第二问单独考虑某个循环,任意交换两个元素,稍微画一下就会发现,把该循环拆成了2个,剩下所需的交换次数减少了1,也就是说,第一步我们任意交换,都能够保证交换次数最少.于是一个循环的答 ...

  3. 【kruscal】【最小生成树】【并查集扩展】bzoj3714 [PA2014]Kuglarz

    ORZ:http://www.cnblogs.com/zrts/p/bzoj3714.html #include<cstdio> #include<algorithm> usi ...

  4. 1.2(Spring MVC学习笔记) Spring MVC核心类及注解

    一.DispatcherServlet DispatcherServlet在程序中充当着前端控制器的作用,使用时只需在web.xml下配置即可. 配置格式如下: <?xml version=&q ...

  5. Exercise01_09

    public class S{ public static void main(String[] args){ double w=4.5; double h=7.9; double d; double ...

  6. Scala零基础教学【102-111】Akka 实战-深入解析

    第102讲:通过案例解析Akka中的Actor运行机制以及Actor的生命周期 Actor是构建akka程序的核心基石,akka中actor提供了构建可伸缩的,容错的,分布式的应用程序的基本抽象, a ...

  7. Mac Sublime Text 3 配置Python环境及安装插件

    一.下载安装Sublime Text 3 官网下载地址:http://www.sublimetext.com/3 二.配置Python开发环境 1.点击右下角,选择python 2.添加编译环境pyt ...

  8. java-List集合遍历,删除或增加特定的元素

    1.for(int i=0; i<list.size(); i++) 2.for(Object object : list)  实质调用的 list.iterator() 3.list.iter ...

  9. IntelliJ IDEA下Maven控制台出现中文乱码问题解决

    Setting->maven->runner: VMoptions: -Dfile.encoding=GB2312 不一定有效,要不断的尝试.

  10. [干货]2017已来,最全面试总结——这些Android面试题你一定需要

        地址.http://blog.csdn.net/xhmj12/article/details/54730883 相关阅读: 吊炸天!74款APP完整源码! [干货精品,值得收藏]超全的一线互联 ...