为了账号安全,请及时绑定邮箱和手机立即绑定

jquery插件编写

标签:
AngularJS


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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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

            });

©著作权归作者所有:来自51CTO博客作者xxxpjgl的原创作品,如需转载,请注明出处,否则将追究法律责任


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消