一、手寫一個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>