成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

可想實現(xiàn)一個自己的簡單jQuery庫？(十二，完結(jié)篇)

ivan_qhz / 1495人閱讀

摘要：新增事件部分講完了后我們最后實現(xiàn)個方法關(guān)于就常用的就種一個是取值一個是賦值我們通過判斷的個數(shù)是取值還是賦值賦值很容易我們就用最簡單的辦法直接設(shè)置如果是取值那我們就要做個判斷因為和的取法是不一樣的還有一種可能性是當(dāng)元素的為的時候直接取是取不

Lesson-11

新增width,height,extend

事件部分講完了后,我們最后實現(xiàn)3個方法.

width : function(w) {
    if(arguments.length == 1) {
        for (var i = 0; i < this.length; i++) {
            this[i].style.width = w + "px";
        }
    } else {
        if (this[0].document === doc ) {
            return this[0].innerWidth;
        } else if (this[0].nodeType === 9 ){
            return document.documentElement.clientWidth;
        } else {
            return parseInt(getComputedStyle(this[0],null)["width"]);
        }
    }
},

關(guān)于width(),height()就常用的就2種,一個是取值,一個是賦值.

我們通過判斷arguments的個數(shù),是取值還是賦值.

賦值很容易,我們就用最簡單的辦法,直接設(shè)置.

如果是取值,那我們就要做個判斷,因為window,和document的取法是不一樣的.

還有一種可能性是,當(dāng)dom元素的display為none的時候,直接取是取不到的.在這我就不做處理了.大家思考一下可以自己嘗試.

思路是把dom設(shè)置為position:absolute;visible:hidden;然后取,在設(shè)置回去.

同理height方法也是如此.我就直接給出代碼了

height : function(h) {
    if(arguments.length == 1) {
        for (var i = 0; i < this.length; i++) {
            this[i].style.height = h + "px";
        }
    } else {
        if(this[0].document === doc ) {
            return this[0].innerHeight;
        } else if (this[0].nodeType === 9 ){
            return document.documentElement.clientHeight;
        } else {
            return parseInt(getComputedStyle(this[0],null)["height"]);
        }
    }
}

兩者幾乎相同只是改了API,其實完全可以封裝為一個方法復(fù)用.

jQuery之所以那么廣受大眾所愛,還一個非常重要的就是他的extend方法.如果沒有了他,將不會有現(xiàn)在那么多jQuery插件的誕生

在此,我們就實現(xiàn)一個非常簡單的淺拷貝.(然而jQuery的extend非常強大)

Kodo.prototype.extend = Kodo.extend = function() {
    var options = arguments[0];
    for( var i in options) {
        this[i] = options[i];
    }
};

這個方法我們不僅要能拓展靜態(tài)方法,也要能拓展實例方法.

所以 Kodo.prototype.extend = Kodo.extend = 直接這樣寫了.

里面內(nèi)容過于簡陋就不過多講解了 :)

然后我們就能這樣拓展我們的插件了

f.prototype.extend({  //實例方法
    alert : function(msg) {
        alert(msg)
    }
});
f.extend({ //靜態(tài)方法
    alert : function(msg) {
        alert(msg)
    }
});

f.alert("123");//調(diào)用
f("div").alert("123");//調(diào)用

其實jQuery還有很多別的部分,比如隊列,動畫,異步.都是一些非常值得自己去實踐嘗試的.

但至此,我們的小輪子基本也就完結(jié)了

另外的手勢番外篇,本想直接集成在這里面.如果有大眾所需,我就繼續(xù)更下去

您連11節(jié)的課程都有耐心看完,何必不順手點下右上角的star呢? >.<

github地址: https://github.com/MeCKodo/forchange/tree/master/lessonn-11
可想實現(xiàn)一個自己的簡單jQuery庫？(十)：http://segmentfault.com/a/1190000004028806

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78184.html

相關(guān)文章

  • 可想實現(xiàn)一個自己的簡單jQuery庫？(十二，完結(jié)篇)

    摘要：新增事件部分講完了后我們最后實現(xiàn)個方法關(guān)于就常用的就種一個是取值一個是賦值我們通過判斷的個數(shù)是取值還是賦值賦值很容易我們就用最簡單的辦法直接設(shè)置如果是取值那我們就要做個判斷因為和的取法是不一樣的還有一種可能性是當(dāng)元素的為的時候直接取是取不 Lesson-11 新增width,height,extend 事件部分講完了后,我們最后實現(xiàn)3個方法. width : function(w) ...

    joyqi 評論0 收藏0

  • JavaScript專題系列20篇正式完結(jié)！

    摘要：寫在前面專題系列是我寫的第二個系列，第一個系列是深入系列。專題系列自月日發(fā)布第一篇文章，到月日發(fā)布最后一篇，感謝各位朋友的收藏點贊，鼓勵指正。 寫在前面 JavaScript 專題系列是我寫的第二個系列，第一個系列是 JavaScript 深入系列。 JavaScript 專題系列共計 20 篇，主要研究日常開發(fā)中一些功能點的實現(xiàn)，比如防抖、節(jié)流、去重、類型判斷、拷貝、最值、扁平、柯里...

    sixleaves 評論0 收藏0

  • 可想實現(xiàn)一個自己的簡單jQuery庫？(三)

    摘要：這個版本新增這個選擇元素的方法還是比較常用的首先我們需要一個來過濾我們需要的上面那段比較簡單就是普通的過濾下元素看下方法的源碼就知道我傳入數(shù)組對象的個對象然后取它的下一個同輩元素直接返回方法同理這段是取到第一個父元素由于返回的不是原生的對 Lesson-2 這個版本新增 next(),prev(),parent(),parents() 這4個選擇元素的方法還是比較常用的 首先我們需要...

    xiaoxiaozi 評論0 收藏0

發(fā)表評論

0條評論

ivan_qhz

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<