JQuery最佳实践及常见错误(转自 简书)
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最佳实践及常见错误(转自 简书)的更多相关文章
- 【转】jQuery最佳实践
上周,我整理了<jQuery设计思想>. 那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery".今天的文章则是更进一步,讲解"如何用好jQu ...
- JQuery系列(7) - JQuery最佳实践
上篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery".今天的文章则是更进一步,讲解"如何用好jQuery". 我主要参考了Addy Osman ...
- 7 个 jQuery 最佳实践
前言 随着富网络应用(rich web applications)数量的增长,以及用户对快速交互响应的高期望,开发者开始使用JavaScript库来快速高效的完成一些重复性的工作.这其中最流行的Jav ...
- jQuery最佳实践(转载)
本文转载于阮一峰的博文. 上周,我整理了<jQuery设计思想>. 那篇文章是一篇入门教程,从设计思想的角度,讲解“怎么使用jQuery”.今天的文章则是更进一步,讲解“如何用好jQuer ...
- jQuery最佳实践:如何用好jQuery
一.用对选择器 在jQuery中,你可以用多种选择器,选择同一个网页元素.每种选择器的性能是不一样的,你应该了解它们的性能差异. (1)最快的选择器:id选择器和元素标签选择器 举例来说,下面的语句性 ...
- jQuery最佳实践(不断更新中...)
1. 处理cdn失效 <script type="text/javascript" src="http://xxx.com/jquery.min.js " ...
- Go语言最佳实践——异常和错误
Go语言将错误和异常两者区分对待. 1.Go语言中处理错误的惯用法是将错误以函数或者方法最后一个返回值的形式将其返回,并总是在调用它的地方检查返回的错误值. 2.对于“不可能发生的事情”称为异常,可使 ...
- jQuery最佳实践
1:事件的委托处理(Event Delegation) javascript的事件模型,采用"冒泡"模式,也就是说,子元素的事件会逐级向上"冒泡",成为父元素的 ...
- 免费稳定图床最佳实践:PicGo+GitHub+jsDeliver 极简教程
一.下载 PicGo PicGo 是啥?顾名思义,它是一个快速上传图片并获取 图片 URL 链接的工具. 目前支持七牛.腾讯云.阿里云和 GitHub 等图床.该工具代码已在 GitHub 开源,读者 ...
随机推荐
- 简单DP【p2642】双子序列最大和
Description 给定一个长度为n的整数序列,要求从中选出两个连续子序列,使得这两个连续子序列的序列和之和最大,最终只需输出最大和.一个连续子序列的和为该子序列中所有数之和.每个连续子序列的最小 ...
- Floyd-弗洛伊德算法
今天,研究一下谁都能看懂的弗洛伊德算法. 首先,弗洛伊德算法是一种利用动态规划的思想寻找给定的加权图中多源点之间最短路径的算法. 这个算法需要一个用到一个二维数组啊a[][],而a[i][j]表示的就 ...
- python 统计发送请求到接收response的时间
由于需要测试请求一个接口所耗用的时间,在网上查找资料也麻烦,所以自己总结一下 找到elapsed 函数 ,按照文档说的是获取请求发出的时间至响应到达经过的时间,,具体用法如下: 执行的结果是 微秒 单 ...
- HashCode()的作用
在实现Hash算法的集合里面,例如HashSet,该集合不能存放相同的数据,HashSet会根据对象的equals()和hashCode()方法来判断要存放的数据是否已经存在.Hash算法把HashS ...
- WebService综述
一.序言 大家或多或少都听过WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多吹嘘和做广告的成分.但是不得不承认的是Web ...
- Problem N: 猴子吃桃
#include<stdio.h> int main() { int n,s,i; while(scanf("%d",&n)!=EOF){ s=; ;i> ...
- Java概述--Java开发实战经典
1)Java有三个发展方向,分别是Java SE,Java EE,Java ME.以下简要介绍. a.Java SE,Java Standard Edition(java标准版),包含了构成java语 ...
- Python的hashlib
Python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. 什么是摘要算法呢?摘要算法又称哈希算法.散列算法.它通过一个函数,把任意长度的数据转换为一个长度固定的数据串(通常用16进制 ...
- php之文件类型解析漏洞防御与攻击
php在处理文件上传时,经常可以用到下面几种方式来判断文件的类型 1.通过文件名后缀,不安全,非常容易欺骗2.通过mime判断,部分类型的文件通过修改文件后缀名,也可以欺骗服务器3.通过头字节判断文件 ...
- JS使用cookie实现DIV提示框只显示一次的方法
本文实例讲述了JS使用cookie实现DIV提示框只显示一次的方法.分享给大家供大家参考,具体如下: 这里运用JavaScript的cookie技术,控制网页上的提示DIV只显示一次,也就是当用户是第 ...