jquery中方法扩展 ($.fn & $.extend) 学习笔记

A、$.fn

1、$.fn.method() 函数为jQuery对象扩展一个属性和方法(主要用于扩展方法) ；method 为自定义方法名 （$.fn 等效 $.prototype）

  $.fn.borderSet = function () {
    this.each(function () {
      $(this).css("border", "solid pink 2px");
    });
    return this;
  };
  $.fn.textColor = function ($color) {
    this.each(function () {
      $(this).css("color", $color);
    });
    return this;
  };

  $.fn.textSize = function () {
    this.each(function () {
      $(this).css("font-size", '40px');
    });
    return this;
  };

2、$.fn.extend() 函数为jQuery对象扩展一个或多个实例属性和方法(主要用于扩展方法)

$.fn.extend({
    borderSet: function () {
      this.each(function () {
        $(this).css("border", "solid pink 2px");
      });
      return this;
    },
    textColor: function ($color) {
      this.each(function () {
        $(this).css("color", $color);
      });
      return this;
    },
    textSize: function () {
      this.each(function () {
        $(this).css("font-size", '40px');
      });
      return this;
    }
  });

调用：

$('.test').borderSet();
$('.test').textColor('green');
$('.test').textSize();

 $('.test').borderSet().textColor('green').textSize();//方法包含return this,支持链式调用

B、$.extend

1、$.extend() 函数用于将一个或多个对象的内容合并到目标对象。对象具有相同的属性，则后者覆盖前者的属性值

var obj_1 = {A: 0, B: 9};
var obj_2 = {A: 1, C: 2};
$.extend(obj_1, obj_1);/* obj_2 合并到 obj_1 中 */
console.log(obj_1);
console.log(obj_2);

2、$.extend({}) 为jQuery类扩展方法

  $.extend({
    alertText: function ($text) {
      alert($text);
    }
  });

  $.alertText('this is a test !!!');