一、手写一个jQuery插件。
例1:封装jQuery对象方法的一个插件(使用jQuery.fn.extend()方法)。
编写 一个color()插件,color()用于返回对象元素的颜色,color("颜色")用于设置对象元素的颜色。
step1:首先,将插件命名为jquery.color.js
step2:编写插件代码如下。
;(function($){
$.fn.extend({
"color":function(value){//value为color()方法的形参
return this.css("color",value);
}
});
})(jQuery);
例2:封装全局函数的插件(使用jQuery.extend()方法)。
新增两个全局函数,用于去除字符串左侧和右侧的空格。
;(function($){
$.extend({
ltrim:function(text){//ltrim为函数名,text为ltrim()方法的形参。
return (text||"").replace(/^\s+/g,"");
}
rtrim:function(text){
return (text||"").replace(/\s+$/g,"");
}
});
})(jQuery);
二、在jquery方法和原型上面添加方法的区别和实现($.extend,$.fn.extend),以及jquery对象的实现(return new jQuery.fn.init)
Q1:区别:
1、两者的主要功能不同:
jQuery.extend(object); 扩展jQuery本身,添加全局函数。
jQuery.fn.extend(object);给jQuery对象添加方法。
2、两者调用方式不同:
jQuery.extend(),一般由传入的全局函数来调用
jQuery.fn.extend(),一般由具体的实例对象来调用
三、jQuery 中 end() 方法的作用
定义:
end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态。
$("p").find("span").css("background-color","pink").end().css("border", "2px red solid");
<p><span>Hello, how are you?</span></p>