溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
1、$.extend() 函數(shù)用于將一個(gè)或多個(gè)對(duì)象的內(nèi)容合并到目標(biāo)對(duì)象。
注意：(1)、 如果只為$.extend()指定了一個(gè)參數(shù)，則意味著參數(shù)targetObj被省略。此時(shí)，targetObj就是jQuery對(duì)象本身。通過(guò)這種方式，我們可以為全局對(duì)象jQuery添加新的函數(shù)。
(2)、 如果多個(gè)對(duì)象具有相同的屬性，則后者會(huì)覆蓋前者的屬性值。
2、$.extend( targetObj , object1 , object2 ... )
上面是將object1,object2...合并到targetObj中,返回值為合并后的targetObj，由此可以看出該方法合并后，是修改了targetObjt的結(jié)構(gòu)的。如果想要得到合并的結(jié)果卻又不想修改targetObj的結(jié)構(gòu)，可以如下使用：
var targetObj = $.extend( {}, object1,object2... );//也就是將"{}"作為targetObj參數(shù)，然后將合并結(jié)果返回給targetObj了
3、$.extend( object1 ) //省略targetObj參數(shù)，如果省略了targetObj，則該方法就只能有一個(gè)obj參數(shù)，也就是將object1合并到j(luò)query的全局對(duì)象中去
4、$.fn.extend(src); //該方法將src合并到j(luò)query的實(shí)例對(duì)象中去
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>插件編寫</title>
</head>
<body>
<p>
<a href="javascript:;">鏈接一</a>
<a href="javascript:;">鏈接二</a>
<a href="javascript:;">鏈接三</a>
</p>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
/*方法一:通過(guò)$.extend()來(lái)擴(kuò)展jQuery
在jQuery命名空間或者理解成jQuery身上添加了一個(gè)靜態(tài)方法
所以我們調(diào)用通過(guò)$.extend()添加的函數(shù)時(shí)直接通過(guò)$符號(hào)調(diào)用（$.myfunction()）
而不需要選中DOM元素($('#example').myfunction())。
這種方式用來(lái)定義一些輔助方法是比較方便的。比如一個(gè)自定義的console，輸出特定格式的信息，
定義一次后可以通過(guò)jQuery在程序中任何需要的地方調(diào)用它。
*/
$.extend({
sayHello:function(name){
alert("hello"+ (name ? name : "jim"));
}
});
//$.sayHello("xiao");
/*方法二:通過(guò)$.fn 向jQuery添加新的方法
基本上就是往$.fn上面添加一個(gè)方法，名字是我們的插件名稱。然后我們的插件代碼在這個(gè)方法里面展開。
在插件名字定義的這個(gè)函數(shù)內(nèi)部，this指代的是我們?cè)谡{(diào)用該插件時(shí)，用jQuery選擇器選中的元素，
一般是一個(gè)jQuery類型的集合。比如$('a')返回的是頁(yè)面上所有a標(biāo)簽的集合，且這個(gè)集合已經(jīng)是jQuery包裝類型了，
也就是說(shuō)，在對(duì)其進(jìn)行操作的時(shí)候可以直接調(diào)用jQuery的其他方法而不需要再用美元符號(hào)來(lái)包裝一下。
*/
$.fn.colorRed = function(){
this.css("color","red"); ////在這個(gè)方法里面,this指的是用jQuery選中的元素，不需要加$
this.each(function(){ //this指代jQuery選擇器返回的集合,在each方法內(nèi)部，this指帶的是普通的DOM元素了，如果需要調(diào)用jQuery的方法那就需要用$來(lái)重新包裝一下。
$(this).append($(this).attr("href"));
})
}
/*調(diào)用的時(shí)候，要先獲取jquery對(duì)象，然后調(diào)用插件方法，不是直接colorRed("a")，切記！*/
//$("a").colorRed();
//給jq插件提供參數(shù)
$.fn.setFontSize = function(options){
var defaults = {
"color":"red",
"fontSize":"12px"
}
var settings = $.extend({},defaults,options);
this.css({
"color":settings.color,
"fontSize":settings.fontSize
})
//return this; 加上這個(gè)就是true了
//可以合并起來(lái)寫
/*return this.css({
"color":settings.color,
"fontSize":settings.fontSize
})*/
//先不用管什么return this，先把需要的功能寫好，然后在前面加上return就行了。
}
var obj = $("a").setFontSize({
"color":"blue",
"fontSize":"26px"
});
console.log(obj instanceof jQuery); //false，因?yàn)闆]有return this，所以想鏈?zhǔn)秸{(diào)用是不行的
//面向?qū)ο蟮牟寮_發(fā)
① 類：一類具有相同特征(屬性)和行為(方法)的集合。
② 對(duì)象：從類中，拿出具有確定屬性值和方法的個(gè)體。
a.類是抽象的，對(duì)象是具體的(類是對(duì)象的抽象化，對(duì)象是類的具體化)
b.創(chuàng)建類和對(duì)象的步驟
①創(chuàng)建一個(gè)類(構(gòu)造函數(shù))：類名必須使用大駝峰法則，即每個(gè)單詞的首字母必須大寫。
②通過(guò)類，實(shí)例化(new)出一個(gè)對(duì)象。
③注意事項(xiàng)
>>>通過(guò)類名，new出一個(gè)對(duì)象的過(guò)程，叫做“類的實(shí)例化”
>>>類中的this，會(huì)在實(shí)例化的時(shí)候，指向新new出的對(duì)象。所以，this.屬性 this.方法，實(shí)際上是將屬性和方法綁定在即將new出的對(duì)象上面。
function Obj(name){ //構(gòu)造函數(shù)
this.name = name
this.showName = function(){//寫this.showName，是為了后面可能有多個(gè)對(duì)象調(diào)用這個(gè)方法，以示區(qū)分。
alert(this.name);
}
}
var p1 = new CreatePerson('小明'); //p1代表的是新創(chuàng)建出來(lái)的對(duì)象，其實(shí)和this是一個(gè)東西
p1.showName(); //小明 等價(jià)于：this.showName();
var p2 = new CreatePerson('小強(qiáng)');
p2.showName(); //小強(qiáng)
alert( p1.showName == p2.showName ); //false new出來(lái)的2個(gè)不同的對(duì)象
>>>在類中，要調(diào)用自身屬性，必須使用this.屬性名、如果直接使用變量名，則無(wú)法訪問對(duì)應(yīng)的屬性。
>>>類名必須使用大駝峰法則，注意與普通函數(shù)的區(qū)別。
c.JavaScript中的this指向問題
>>>誰(shuí)最終調(diào)用函數(shù)，this就指向誰(shuí)！
>>> this指向誰(shuí)，不應(yīng)該考慮函數(shù)在哪聲明，而應(yīng)該考慮函數(shù)在哪調(diào)用！！
>>> this指向的，永遠(yuǎn)只可能是對(duì)象，不可能是函數(shù)?。? >>> this指向的對(duì)象，叫做函數(shù)的上下文context，也叫函數(shù)的調(diào)用者。
>>> 通過(guò)函數(shù)名()調(diào)用的，this永遠(yuǎn)指向window通過(guò)
>>> 函數(shù)作為數(shù)組的一個(gè)元素，用數(shù)組下標(biāo)調(diào)用，this指向這個(gè)數(shù)組
>>> 通過(guò)對(duì)象.方法調(diào)用的，this指向這個(gè)對(duì)象
>>> 函數(shù)作為window內(nèi)置函數(shù)的回調(diào)函數(shù)使用，this指向window。比如setTimeout、setInterval等
>>> 函數(shù)作為構(gòu)造函數(shù)，使用new關(guān)鍵字調(diào)用，this指向新new出的對(duì)象
var fullname = 'John Doe';
var obj = {
fullname: 'Colin Ihrig',
prop: {
fullname: 'Aurelio De Rosa',
getFullname: function() {
return this.fullname;
}
}
};
console.log(obj.prop.getFullname());//Aurelio De Rosa
var test = obj.prop.getFullname;
console.log(test()); //John Doe
obj.func = obj.prop.getFullname;
console.log(obj.func()); //Colin Ihrig
var arr = [obj.prop.getFullname,1,2];
arr.fullname = "JiangHao";
console.log(arr[0]()); //JiangHao
</script>
</body>
</html>改編成了jquery插件
(function($){
$.fn.starRating = function(options){
var defaults = {
num:2
}
var settings = $.extend({},defaults,options);
var starLight = function(items,num){
items.each(function(i,elem){
if(i<=num){
$(this).addClass("on");
}else{
$(this).removeClass("on")
}
})
}; //這種函數(shù)聲明是賦值寫法，最后需要加分號(hào)**;**
var init = function(el,num){
var starList = $(el),
items = starList.find(".star-item");
starLight(items,num-1);
starList.on("mouseover",".star-item",function(){
starLight(items,$(this).index())
}).on("click",".star-item",function(){
num = $(this).index();
}).on("mouseout",function(){
starLight(items,num)
})
};
return this.each(function(){
num = settings.num;
init(this,num);
})
}
})(jQuery)
$(".star-list").starRating({
num:3
});免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼