溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1、$.extend() 函數用于將一個或多個對象的內容合并到目標對象。
注意：(1)、 如果只為$.extend()指定了一個參數，則意味著參數targetObj被省略。此時，targetObj就是jQuery對象本身。通過這種方式，我們可以為全局對象jQuery添加新的函數。
(2)、 如果多個對象具有相同的屬性，則后者會覆蓋前者的屬性值。
2、$.extend( targetObj , object1 , object2 ... )
上面是將object1,object2...合并到targetObj中,返回值為合并后的targetObj，由此可以看出該方法合并后，是修改了targetObjt的結構的。如果想要得到合并的結果卻又不想修改targetObj的結構，可以如下使用：
var targetObj = $.extend( {}, object1,object2... );//也就是將"{}"作為targetObj參數，然后將合并結果返回給targetObj了
3、$.extend( object1 ) //省略targetObj參數，如果省略了targetObj，則該方法就只能有一個obj參數，也就是將object1合并到jquery的全局對象中去
4、$.fn.extend(src); //該方法將src合并到jquery的實例對象中去
<!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">
/*方法一:通過$.extend()來擴展jQuery
在jQuery命名空間或者理解成jQuery身上添加了一個靜態方法
所以我們調用通過$.extend()添加的函數時直接通過$符號調用（$.myfunction()）
而不需要選中DOM元素($('#example').myfunction())。
這種方式用來定義一些輔助方法是比較方便的。比如一個自定義的console，輸出特定格式的信息，
定義一次后可以通過jQuery在程序中任何需要的地方調用它。
*/
$.extend({
sayHello:function(name){
alert("hello"+ (name ? name : "jim"));
}
});
//$.sayHello("xiao");
/*方法二:通過$.fn 向jQuery添加新的方法
基本上就是往$.fn上面添加一個方法，名字是我們的插件名稱。然后我們的插件代碼在這個方法里面展開。
在插件名字定義的這個函數內部，this指代的是我們在調用該插件時，用jQuery選擇器選中的元素，
一般是一個jQuery類型的集合。比如$('a')返回的是頁面上所有a標簽的集合，且這個集合已經是jQuery包裝類型了，
也就是說，在對其進行操作的時候可以直接調用jQuery的其他方法而不需要再用美元符號來包裝一下。
*/
$.fn.colorRed = function(){
this.css("color","red"); ////在這個方法里面,this指的是用jQuery選中的元素，不需要加$
this.each(function(){ //this指代jQuery選擇器返回的集合,在each方法內部，this指帶的是普通的DOM元素了，如果需要調用jQuery的方法那就需要用$來重新包裝一下。
$(this).append($(this).attr("href"));
})
}
/*調用的時候，要先獲取jquery對象，然后調用插件方法，不是直接colorRed("a")，切記！*/
//$("a").colorRed();
//給jq插件提供參數
$.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; 加上這個就是true了
//可以合并起來寫
/*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，因為沒有return this，所以想鏈式調用是不行的
//面向對象的插件開發
① 類：一類具有相同特征(屬性)和行為(方法)的集合。
② 對象：從類中，拿出具有確定屬性值和方法的個體。
a.類是抽象的，對象是具體的(類是對象的抽象化，對象是類的具體化)
b.創建類和對象的步驟
①創建一個類(構造函數)：類名必須使用大駝峰法則，即每個單詞的首字母必須大寫。
②通過類，實例化(new)出一個對象。
③注意事項
>>>通過類名，new出一個對象的過程，叫做“類的實例化”
>>>類中的this，會在實例化的時候，指向新new出的對象。所以，this.屬性 this.方法，實際上是將屬性和方法綁定在即將new出的對象上面。
function Obj(name){ //構造函數
this.name = name
this.showName = function(){//寫this.showName，是為了后面可能有多個對象調用這個方法，以示區分。
alert(this.name);
}
}
var p1 = new CreatePerson('小明'); //p1代表的是新創建出來的對象，其實和this是一個東西
p1.showName(); //小明 等價于：this.showName();
var p2 = new CreatePerson('小強');
p2.showName(); //小強
alert( p1.showName == p2.showName ); //false new出來的2個不同的對象
>>>在類中，要調用自身屬性，必須使用this.屬性名、如果直接使用變量名，則無法訪問對應的屬性。
>>>類名必須使用大駝峰法則，注意與普通函數的區別。
c.JavaScript中的this指向問題
>>>誰最終調用函數，this就指向誰！
>>> this指向誰，不應該考慮函數在哪聲明，而應該考慮函數在哪調用！！
>>> this指向的，永遠只可能是對象，不可能是函數！！
>>> this指向的對象，叫做函數的上下文context，也叫函數的調用者。
>>> 通過函數名()調用的，this永遠指向window通過
>>> 函數作為數組的一個元素，用數組下標調用，this指向這個數組
>>> 通過對象.方法調用的，this指向這個對象
>>> 函數作為window內置函數的回調函數使用，this指向window。比如setTimeout、setInterval等
>>> 函數作為構造函數，使用new關鍵字調用，this指向新new出的對象
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")
}
})
}; //這種函數聲明是賦值寫法，最后需要加分號**;**
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
});免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
