1. 记得使用 $(document).ready

如果你的代码是操作某个DOM元素的,则记得把代码放到


  1. $(document).ready(function () { ... });

代码块内,或者把它放在HTML代码的末尾。当只有一个 function() 传递给 $() 的时候, $(function () {}) 与 $(document).ready(function () {}) 意思一样。

2. 使用 $.noConflict(); 或者给 jQuery 重命名,如:$jq

如果你的代码与另一个使用 $ 语法的框架冲突,则记得使用 $.noConflict(); 方法,并且把代码


  1. $(document).ready(function () {

修改为:


  1. jQuery(function ($) {

或者你也可以定义 $jq = jQuery.noConflict(); ,然后使用 $jq 。

3. 缓存jQuery对象并尽量使用链式操作

调用jQuery的 $() 方法的非常消耗资源的,重复调用它则会非常低效。要避免这样的情况:


  1. $('.test').addClass('hello');
  2. $('.test').css('color', 'orange');
  3. $('.test').prop('title', 'Hello world');

应该用一个变量把jQuery对象缓存下来:


  1. var $test = $('.test');
  2.  
  3. $test.addClass('hello');
  4. $test.css('color', 'orange');
  5. $test.prop('title', 'Hello world');

或者,更好的情况是使用链式操作减少重复:


  1. $('.test').addClass('hello').css('color', 'orange').prop('title', 'Hello world');

同时,很多函数支持把多个值放入一个对象,然后调用一次来改变多个值,如:


  1. $('.test').css('color', 'orange').css('background-color', 'blue');

可以替换为:


  1. $('.test').css({ 'color': 'orange', 'background-color': 'blue' });

4. 变量命名规则

jQuery变量一般用 $ 开头,以便和普通的JavaScript变量区分开来。


  1. var $this = $(this);

5. 了解DOM的属性和方法

jQuery的其中一个目标就是抽象DOM,了解DOM的属性是非常有用的。学习jQuery最常犯的一个错误就是不学习DOM属性而使用jQuery访问DOM的属性。


  1. $('img').click(function () {
  2. $(this).attr('src'); // Bad!
  3. });

上面的代码中, this 指向的是 click 事件中绑定的元素。这段代码执行缓慢而且冗长。下面的代码可以实现相同的功能,并且代码更短、执行更快、可读性更强:


  1. $('img').click(function () {
  2. this.src; // Much, much better
  3. });

6. 惯用语法创建元素

虽然下面两段代码功能基本相同,语法也没有错误,但是更推荐第一种写法 :


  1. $('<p>', {
  2. text: 'This is a ' + variable,
  3. "class": 'blue slider',
  4. title: variable,
  5. id: variable + i
  6. }).appendTo(obj);

相比之下,一个字符串拼接起来的则看起来可读性更差:


  1. $('<p class="blue slider" id="' + variable + i + '" title="' + variable + '">This is a ' + variable + '</p>').appendTo(obj);

7. 动画事件的回调函数

假设你希望点击一个段落的时候,慢慢的隐藏元素,之后删除页面上的该DOM元素。你可能会使用链式操作这么写:


  1. $("p").click(function(e) {
  2. $(this).fadeOut("slow").remove();
  3. });

该例子中, remove() 方法会在 fadeOut() 动画执行完之前就执行,影响渐隐的效果而使元素直接消失。相反的,你应该使用回调函数:


  1. $("p").click(function(e){
  2. $(this).fadeOut("slow", function(){
  3. $(this).remove();
  4. });
  5. });

fadeOut() 的第二个参数是一个匿名函数,只会在 fadeOut() 动画执行完之后执行一次。这样就可以实现渐隐的效果,然后删除元素。

稳定

产品可用性高于99.9%

贴心

全国7*24小时客服热线

专业

产品经理在线技术支持

快速

快速上线运营快

承诺

我们选择声誉

坚持

10年专注高端品质开发
  • 返回顶部