您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。