jQuery學習筆記

jQuery

• 提升業務編程能力

  • JQ中提供了不少的方法（基本都兼容），咱們可使用這些方法快速開發項目

  • JQ中有的方法提供的思想可讓咱們把項目實現得更優化

• 提升JS基礎以及一些高級編程思想

  • 分析JQ源碼，學習裏面類庫封裝的思想和一些方法實現的原理

  • 有時間把JQ中提供的經常使用方法都去實現一遍，提升本身的編程能力

1.jQuery的原理

• jquery-1.xxx: 專門爲PC端誕生的類庫，兼容全部的瀏覽器

• jquery-2.xxx: 當初是爲了移動端而準備的，因此IE低版本瀏覽器通常不兼容，可是這個版本針對移動端的事件等操做也不是特別完善，被Zepto這個類庫取代了

jQuery充分利用了JS中函數的三種特性：普通函數、類、普通對象；jQuery就是這個類，在外面使用的$和jQuery是一個東西，jQuery中提供的方法分爲兩部分：寫在原型上的方法和寫在jQuery私有屬性上的方法；建立jQuery實例的時候，會返回一個類數組（它也是jQuery實例），這個類數組是jQuery本身去建立的，裏面有一些本身特定的屬性

//jQuery核心原理
(function(){
    var version="1.11.3",
    jQuery=function(selector,context){
        return jQuery.fn.innt(selector,context);
    };
    
    jQuery.fn=jQuery.prototype={
        //...
        init:function(selector,context){
            
        }
    };
    
    jQuery.ajax=function(){};
    
    window.jQuery=window.$=jQuery;
    
})();

• jQuery對象和JS對象相互轉換

//jQuery對象轉換成JS對象
var $obj=$("*");
$obj[0];  //-->JS對象
$obj.get(0);  //-->JS對象
$obj.eq(0)  //-->這個獲取的是jQuery對象

//JS對象轉換成jQuery對象
var obj=document.getElementsByTagName("*");
$(obj);  //-->jQuery對象

• extend

在jQuery對象上和jQuery實例上都有這個方法，而且都是同一個方法，可是這兩個方法執行時其this指向不同，也就是說extend所擴展的方法所在的擴展位置不同

$.extend({
    aa:function(){}
});
$.aa();
//->aa擴展到jQuery的屬性上了：完善類庫，提供一些經常使用的操做方法，例如，數組去重...

$.fn.extend({
    bb:function(){}
});
$([select]).bb();
//-->bb擴展到jQuery的原型上了：擴展插件，例如，選項卡、輪播圖、登陸、驗證...

2.jQuery的經常使用方法

• 1）選擇器

CSS選擇器有哪些，jQuery選擇器基本上就有哪些：#ID、.class、tagName、*、selector,selector、parent offspring、parent>child、:first、:last、:not、:contain、:eq、:gt、:lt、:text...

• 2）核心方法

  • $([selector|node|function],[context])

  • $([html])

  • each(callback)

  • get()

  • index()

  • length

  • context

  • selector

  • noConflict()

  • extend()

• 3）屬性方法

  • attr()：設置或獲取自定義屬性值，獲取的值是字符串類型的

  • removeAttr()

  • prop()：操做的是元素的內置屬性

  • addClass()

  • removeClass()

  • hasClass()

  • toggleClass()

  • html()：獲取或設置元素的innerHTML

  • text()：獲取或設置元素的innerText

  • val()：獲取或設置元素的value值

• 4）CSS方法

  • css()

  • offset()：當前元素距離body的偏移：{top:xxx,left:xxx}

  • position()：當前元素距離父級已定位參照物的偏移

  • scrollTop() / scrollLeft()：獲取或者設置滾動值

  • height() / width()：設置或獲取元素的寬高

  • innerWidth() / innerHeight()：獲取元素的clientHeight/clientWidth

  • outerWidth() / outerHeight()：獲取元素的offsetHeight/offsetWidth

• 5）DOM操做方法

  • append()

  • appendTo()

  • prepend()

  • prependTo()

  • insertBefore() / insertAfter()

  • clone()

  • remove()

• 6）篩選方法

  • eq()

  • filter()：同級篩選

  • children()：子級篩選

  • find()：後代篩選

  • first() / last()

  • not()

  • slice()

  • next() / prev()

  • nextAll() / prevAll()

  • sibings()

  • add()

  • contents()

• 7）動畫方法

  • animate()

  • stop()

  • finish()

  • show() / hide() / toggle()

  • fadeIn() / fadeOut() / fadeToggle()

  • sliceDown() / sliceUp() / scliceToggle()

  • delay()

• 8）事件方法

  • on() / off()：解決jQuery事件的一切需求，其它方法也是從這個方法裏擴展的

  • bind() / unbind() / trigger()

  • one()

  • live() / delegate()

  • click()/hover()/mouseover()...

• 9）工具方法

  • callbacks()

  • makeArray()

  • toArray()

  • parseJSON()

  • parseXML()

  • type()

  • isFunction()

  • trim()

  • param()

//只要當前頁面的HTML結構加載完成，就會執行回調函數，並且在一個頁面中能夠執行屢次
$(document).ready(function(){
    //<javascript code>

});

$(function(){});  //這種方式和上面的方式同樣，沒有區別