基於jq插件開發及彈窗實例

基於jq的插件開發是什麼鬼，$.fn是什麼鬼，我在實際工做中也遇到過這個問題，下面就讓咱們一塊兒來看一看這些都是什麼鬼。

首先咱們介紹$.fn。

$.fn是指jquery的命名空間，加上fn上的方法及屬性，會對jquery實例每個有效。
如擴展$.fn.abc(),即$.fn.abc()是對jquery擴展了一個abc方法,那麼後面你的每個jquery實例均可以引用這個方法了.
那麼你能夠這樣子：$("#div").abc();

jQuery爲開發插件提拱了兩個方法，分別是：

jQuery.extend(object);爲擴展jQuery類自己.爲類添加新的方法。
jQuery.fn.extend(object);給jQuery對象添加方法。

fn是什麼東西呢。查看jQuery代碼，就不難發現。

jQuery.fn = jQuery.prototype ={
　　　init: function( selector, context ){//....　
　　　//......
}; 

原來 jQuery.fn =jQuery.prototype.對prototype確定不會陌生啦。
jQuery即是一個封裝得很是好的類，好比咱們用語句　$("#btn1") 會生成一個 jQuery類的實例。

jQuery.extend(object);　爲jQuery類添加添加類方法，能夠理解爲添加靜態方法。如：

$.extend({
　　add:function(a,b){returna+b;}
}); 

便爲　jQuery　添加一個爲add　的　「靜態方法」，以後即可以在引入 jQuery　的地方，使用這個方法了，
$.add(3,4); //return 7

jQuery.fn.extend(object);對jQuery.prototype進得擴展，就是爲jQuery類添加「成員函數」。jQuery類的實例可使用這個「成員函數」。
好比咱們要開發一個插件，作一個特殊的編輯框，當它被點擊時，便alert當前編輯框裏的內容。能夠這麼作：

jQuery代碼

$.fn.extend({
　　alertWhileClick:function(){
　　　　$(this).click(function(){
　　　　alert($(this).val());
　　});
　　}
}); 

$.fn彈窗實例

這裏邊的mPop至關於給jq新加了一個事件。

相似於

jQuery.fn = jQuery.prototype ={
　　　mPop: function( selector, context ){//....　
　　　//......
}; 

使用起來這麼寫 $.fn.mPop();

//彈窗
$.fn.mPop = function(){
        $("body").css("position","relative");
        var sctop =  top.location == self.location ? $(window).scrollTop() : $(parent.window).scrollTop();
        var winW = $(window).width();
        var winH = $(window).height();
        var tcH = $("body").height();
        var w = $(this).innerWidth();
        var h = $(this).innerHeight();
        $(this).css({"left":(winW - w)/2+"px","z-index":"30"});
        var bgdiv = "<div class='bgdiv'></div>";  
        $("body").append(bgdiv);
        if(h>winH){
            $(this).css({"display":"block","top":"0px"})
            }  else{
                $(this).css("display", "block").css({top: ((winH - h) / 2 + sctop) + "px"});
                }  
        $(".bgdiv").css({"width": winW + "px","height": tcH + "px","opacity": .6,"position": "absolute","left": "0","top": "0","z-index": 10,"background-color": "#000","display":"block"});
}

在使用的時候直接用就能夠了

    $('.tanchu').mPop();    
==============================================================

說完$.fn咱們再說說這裏邊的

var sctop = top.location == self.location ? $(window).scrollTop() : $(parent.window).scrollTop();

top.location != self.location 就是說當前窗體的url和父窗體的 url是否是相同

若是相同執行$(window).scrollTop();不一樣$(parent.window).scrollTop()。這個是爲了防止別的網站嵌入你的網站的內容（好比用iframe嵌入的你的網站的頁面）