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. hihocoder1069 最近公共祖先·三(tarjin算法)(并查集)

    #1069 : 最近公共祖先·三 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上上回说到,小Hi和小Ho使用了Tarjan算法来优化了他们的“最近公共祖先”网站,但是 ...

  2. GetAdaptersInfo获取网卡配置和Ip地址信息

    一台机器上可能不只有一个网卡,但每一个网卡只有一个MAC地址,而每一个网卡可能配置有多个IP地址:如平常的笔记本电脑中,就会有无线网卡和有线网卡(网线接口)两种:因此,如果要获得本机所有网卡的IP和M ...

  3. [LOJ6437]PKUSC

    旋转多边形是没有前途的,我们考虑旋转敌人,那么答案就是所有人的可行区间长度之和除以$2\pi$ 首先对每个敌人找到那些旋转后会落到多边形上的角度,实际上就是圆和一些线段求交,解方程即可,注意判一下落在 ...

  4. 【最短路】【spfa】小vijos P1447 Updown

    小vijos P1447 Updown 背景 开启了升降梯的动力之后,探险队员们进入了升降梯运行的那条竖直的隧道,映入眼帘的是一条直通塔顶的轨道.一辆停在轨道底部的电梯.和电梯内一杆控制电梯升降的巨大 ...

  5. Scala实战高手****第3课:在IDE下开发第一个Scala程序纯傻瓜式彻底透彻解析

  6. python 爬取36K新闻

    代码如下: from urllib import request url = 'http://36kr.com/api/info-flow/newsflash_columns/newsflashes? ...

  7. Linux下使用expect实现跳板机自动跳转/免密登录/自动登录(转)

    shell脚本实现ssh自动登录远程服务器示例: #!/usr/bin/expect spawn ssh root@192.168.22.194 expect "*password:&quo ...

  8. Java使用纯真IP库获取IP对应省份和城市

    原文:http://blog.csdn.net/chwshuang/article/details/78027873?locationNum=10&fps=1 Java使用纯真IP库获取IP对 ...

  9. PostgreSQL on Linux 最佳部署手册

    安装常用包 # yum -y install coreutils glib2 lrzsz mpstat dstat sysstat e4fsprogs xfsprogs ntp readline-de ...

  10. ylbtech-LanguageSamples-Attibutes(特性)

    ylbtech-Microsoft-CSharpSamples:ylbtech-LanguageSamples-Attibutes(特性) 1.A,示例(Sample) 返回顶部 “特性”示例 本示例 ...