jQuery应用总结

ecah();

$(".class")each(function(i){

   var node = $(this); 

});

var arr = []; //var arr = new Array();

data = [{"name":"xx"，"age":"12"},{"name":"xxx","age":"14"}];

$.each(data,function(i,val){

  arr.push({name:val["name"],age:val["age"]});

});

extend();

//更改jquery全局函数

$(function(&){

  $.extend({

     check:function(a,b){

         return a>b?1:2;

   }

});

})(jQuery)//匿名函数

var index = $.check(1,3);

jQuery.fn.extend({

    check:function(){

       return this.each(function(){

           this.checked=true;

       });

   }

});

$("input['type=checkbox']").check();

插件创建以及使用

jQuery 库是专为加快 JavaScript 开发速度而设计的。通过简化编写 JavaScript 的方式，减少代码量。使用 jQuery 库时，您可能会发现您经常为一些常用函数重写相同的代码。

jQuery 插件允许您使用自定义代码扩展 jQuery 库；您可以对一些重复性函数使用插件。例如，很多插件可供幻灯片、下拉菜单和折叠菜单所用。

jQuery 是一个可扩展 JavaScript 语言的库。当您创建一个 jQuery 插件时，本质上是在扩展这个 jQuery 库。要真正了解插件如何扩展 jQuery 库需要对 JavaScript prototype 属性有一个基本了解。尽管不直接使用，但是 JavaScript prototype 属性可通过 jQuery 属性 fn 在后台使用，这是原生 JavaScript prototype 属性的一个 jQuery 别名。

要使用 fn 属性创建一个新 jQuery 插件，只需要为 fn 属性分配一个插件名，并将其指向一个充当构造函数的新函数，类似于纯 JavaScript。清单 1 中的代码显示了如何定义一个名为 accordion 的新 jQuery 插件，其方法是通过使用 jQuery 对象和 fn 属性，并将其分配给一个新的构造函数。

清单 1. 定义一个名为 accordion 的新 jQuery 插件

jQuery.fn.accordion = function() {

  // Add plugin code here

};

清单 1 展示了创建 jQuery 插件的一种方法；该示例没有什么功能性错误。但是，创建一个 jQuery 插件所推荐的方法是，先创建一个允许使用美元符号 ($) 的包装器函数。在默认情况下，美元符号可能与其他 JavaScript 框架发生冲突，如果将插件包装在一个函数中，就不会出现冲突。清单 2 中的示例代码显示如何将一个包装器函数应用到一个 jQuery 插件定义中。

清单 2. 在一个包装器函数中包装一个名为 accordion 的新 jQuery 插件

(function($) {

  $.fn.accordion = function() {

    // Add plugin code here

  };

})(jQuery);

在清单 2 中，jQuery 关键字被应用到包装器函数中，这允许您在插件中使用美元符号，就像使用 fn 属性时那样。包装器函数就绪后，就可以在整个插件的任何地方使用美元符号代替 jQuery 关键字，不会干扰其他第三方插件。该选项提供了一种方法使我们可以在开发整个插件中编写较少的代码，并且有助于您的插件代码保持整洁，易于维护。

jQuery 的一个优势是允许您使用任何类型的选择器。但是，必须记住，您的插件可以处理几种不同的元素类型。使用 this 关键字允许您的插件应用于相关函数，通过循环实现每个元素的访问，而不考虑元素类型。如果在 each 循环前使用 return 关键字，就可以使用您的插件维护链接性。清单 3 显示了分配给一个函数处理程序且与 return 关键字相结合的 each 循环。

清单 3. 在 each 循环之前使用 return 关键字

(function($) {

  $.fn.accordion = function() {

    return this.each(function() {

      // Using return allows for chainability

    });

  };

})(jQuery);

应用参考

(function($) {   $.fn.accordion = function(options) {     return this.each(function() {       var dts = $(this).children('dt');       dts.click(onClick);       dts.each(reset);     });           function onClick() {       $(this).siblings('dt').each(hide);       $(this).next().slideDown('fast');       return false;     }       function hide() {       $(this).next().slideUp('fast');     }       function reset() {       $(this).next().hide();     }   } })(jQuer