jquery插件編寫

1、$.extend() 函數(shù)用于將一個(gè)或多個(gè)對(duì)象的內(nèi)容合并到目標(biāo)對(duì)象。
注意：(1)、如果只為$.extend()指定了一個(gè)參數(shù)，則意味著參數(shù)targetObj被省略。此時(shí)，targetObj就是jQuery對(duì)象本身。通過這種方式，我們可以為全局對(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了

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站建設(shè)、成都網(wǎng)站制作、福清網(wǎng)絡(luò)推廣、微信小程序、福清網(wǎng)絡(luò)營銷、福清企業(yè)策劃、福清品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供福清建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.rwnh.cn

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">

            /*方法一:通過$.extend()來擴(kuò)展jQuery
                   在jQuery命名空間或者理解成jQuery身上添加了一個(gè)靜態(tài)方法
                   所以我們調(diào)用通過$.extend()添加的函數(shù)時(shí)直接通過$符號(hào)調(diào)用（$.myfunction()）
                   而不需要選中DOM元素($('#example').myfunction())。
                   這種方式用來定義一些輔助方法是比較方便的。比如一個(gè)自定義的console，輸出特定格式的信息，
                   定義一次后可以通過jQuery在程序中任何需要的地方調(diào)用它。
            */
            $.extend({
                sayHello:function(name){
                    alert("hello"+ (name ? name : "jim"));
                }
            });
            //$.sayHello("xiao");

            /*方法二:通過$.fn 向jQuery添加新的方法
                    基本上就是往$.fn上面添加一個(gè)方法，名字是我們的插件名稱。然后我們的插件代碼在這個(gè)方法里面展開。
                    在插件名字定義的這個(gè)函數(shù)內(nèi)部，this指代的是我們?cè)谡{(diào)用該插件時(shí)，用jQuery選擇器選中的元素，
                    一般是一個(gè)jQuery類型的集合。比如$('a')返回的是頁面上所有a標(biāo)簽的集合，且這個(gè)集合已經(jīng)是jQuery包裝類型了，
                    也就是說，在對(duì)其進(jìn)行操作的時(shí)候可以直接調(diào)用jQuery的其他方法而不需要再用美元符號(hào)來包裝一下。
            */
            $.fn.colorRed = function(){
                this.css("color","red");  ////在這個(gè)方法里面,this指的是用jQuery選中的元素，不需要加$
                this.each(function(){  //this指代jQuery選擇器返回的集合,在each方法內(nèi)部，this指帶的是普通的DOM元素了，如果需要調(diào)用jQuery的方法那就需要用$來重新包裝一下。
                    $(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了
                //可以合并起來寫
                /*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è)單詞的首字母必須大寫。
                        ②通過類，實(shí)例化(new)出一個(gè)對(duì)象。
                        ③注意事項(xiàng)
                                >>>通過類名，new出一個(gè)對(duì)象的過程，叫做“類的實(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)建出來的對(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出來的2個(gè)不同的對(duì)象
                                >>>在類中，要調(diào)用自身屬性，必須使用this.屬性名、如果直接使用變量名，則無法訪問對(duì)應(yīng)的屬性。
                                >>>類名必須使用大駝峰法則，注意與普通函數(shù)的區(qū)別。
                        c.JavaScript中的this指向問題
                                >>>誰最終調(diào)用函數(shù)，this就指向誰！
                                >>> this指向誰，不應(yīng)該考慮函數(shù)在哪聲明，而應(yīng)該考慮函數(shù)在哪調(diào)用?。?                                >>> this指向的，永遠(yuǎn)只可能是對(duì)象，不可能是函數(shù)??！
                                >>> this指向的對(duì)象，叫做函數(shù)的上下文context，也叫函數(shù)的調(diào)用者。
                                >>> 通過函數(shù)名()調(diào)用的，this永遠(yuǎn)指向window通過
                                >>> 函數(shù)作為數(shù)組的一個(gè)元素，用數(shù)組下標(biāo)調(diào)用，this指向這個(gè)數(shù)組
                                >>> 通過對(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
            });

當(dāng)前標(biāo)題：jquery插件編寫
文章出自：http://www.rwnh.cn/article48/psjdep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、虛擬主機(jī)、軟件開發(fā)、ChatGPT、品牌網(wǎng)站建設(shè)、

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

jquery插件編寫