jquery 插件开发

// jquery 开发插件
// 向jquery 的命名空间中添加一个函数，只需将这个新函数指定为 jquery 对象的一个属性：
/*
jQuery.globalFunction = function(){
    alert("this is one lin3615");
};
*/
// 这样可以在包含上面的代码文件中调用这个插件：
//jQuery.globalFunction(); 或者写成 $.globalFunction();
// ==================================

//可以同时添加多个函数
/*
jQuery.functionOne = function(){
    alert("this is one function");
};

jQuery.functionTwo = function(){
    alert("this is two function");
};
*/
// 引用时: $.functionOne();  $.functionTwo();
// =====================================

// 可以用 $.extend() 函数来使函数更清晰
/*
$.extend({
    functionOne: function(){
        alert("this is 1111");
    },

    functionTwo: function(){
        alert("this is 2222");
    }
});
*/
// 调用时: $.functionOne();  $.functionTwo();
// ===============================

// 以上的方法会面临命名冲突的风险，为了避免这个问题，最好是把属于一个插件的所有全局函数都封装到一个对象中：
/*
jQuery.myPlugin = {
    functionOne: function(){
        alert("this is myPlugin 1111");
    },

    functionTwo: function(){
        alert("this is myPlugin 2222");
    }
};
*/
//这样就创建了另一个命名空间--jQuery.myPlugin.尽管从某种程度上仍然可以称为“全局函数”，但它们实际上已经变成了 myPlugin  对象的方法了，而 myPlugin 对象则是全局 jQuery 对象的一个属性。因此，在调用这些函数时，必须包含插件的名称：
// $.myPlugin.functionOne(); $.myPlugin.functionTwo();
// ======================

// 创建实用方法
/*
jQuery.sum = function(array){
    var total = 0;
    jQuery.each(array, function(index, value){
        total += value;
    });
    return total;
};
*/
// 调用时: alert($.sum(arr)); 其中 arr = new Array(....)
// ======================

//添加jQuery 对象方法
// jquery 中大多数内置的功能都是通过其对象的方法提供的，而且这些方法也是插件的关键，增加扩展是以 jQuery.fn 对象来实现的， jQuery.fn 对象是 jQuery.prototype 别名，使用 别名是出于简洁的考虑。
/*
jQuery.fn.myMethod = function(){
    alert("this is myMethod");
};
*/
// 调用时 $('div').myMethod(); 由于没有在任何地方用到匹配的 DOM  节点，所以一个合理的实例方法应该包含对它的环境的操作
// =================

// 对象方法的环境
// 在任何插件方法内部，关键字 this 引用的都是当前的 jQuery 对象，因而，可以在 this  上面调用任何内置的 jQuery 方法，或者提取它包含的 DOM 节点并操作该节点,也可以增加连缀方法
/*
jQuery.fn.swapClass = function(class1, class2) {
  return this.each(function() {
    var $element = jQuery(this);
    if ($element.hasClass(class1)) {
      $element.removeClass(class1).addClass(class2);
    }
    else if ($element.hasClass(class2)) {
      $element.removeClass(class2).addClass(class1);
    }
  });
};
*/
// 调用时 $('li').swapClass("class1", "class2").css('text-decoration', 'underline'); 在对象方法体内，关键字 this 引用的是一具 jQuery 对象，但每次调用的 .each() 方法中，this 引用的则是一个 DOM 元素.
// ==================
//显示，隐藏，淡入，淡出效果插件开发
jQuery.fn.slideFadeOut = function(speed, callback){
    return this.animate({
        height: 'hide',
        opacity: 'hide'
    }, speed, callback);
};

jQuery.fn.slideFadeIn = function(speed, callback){
    return this.animate({
        height: 'show',
        opacity: 'show'
    }, speed, callback);
};

jQuery.fn.slideFadeToggle = function(speed, callback){
    return this.animate({
        height: 'toggle',
        opacity: 'toggle'
    }, speed, callback);
};
//调用


$(document).ready(function() {
  $('#out').click(function() {
    $('p').slideFadeOut('slow');
    return false;
  });
  $('#in').click(function() {
    $('p').slideFadeIn('slow');
    return false;
  });
  $('#toggle').click(function() {
    $('p').slideFadeToggle('slow');
    return false;
  });
});

// ===================
// 别名 $ 的使用， jQuery 插件不能假设 $ 有效，相反，每次都应该使用完整的 jquery名称，为了在插件的内部中使用有效的 $, 可以这样简写 (function($){//code})(jQuery); 这个包装函数接受一个参数，我们为这个参数传递的是全局的 jQuery 对象.由于参数被命名为 $ ,因此在这个函数的内部可以使用 $ 别名而不会冲突.