jQuery學(xué)習(xí)心得總結(jié)(必看篇)

字號(hào):


    下面小編就為大家?guī)硪黄猨Query學(xué)習(xí)心得總結(jié)(必看篇)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。
    jQuery 對(duì)象
    •jQuery 對(duì)象就是通過 jQuery 包裝 DOM 對(duì)象后產(chǎn)生的對(duì)象。
    •jQuery 對(duì)象是 jQuery 獨(dú)有的。
    •只有 jQuery 對(duì)象才能使用 jQuery 的方法,在 jQuery 對(duì)象中無法使用 DOM 對(duì)象的任何方法,反之 DOM 對(duì)象也無法使用任何 jQuery 的方法。
    •約定:如果獲取的是 jQuery 對(duì)象,那么要在變量前面加上 $
    •jQuery 對(duì)象中封裝了多個(gè) DOM 對(duì)象,同時(shí) jQuery 對(duì)象是類數(shù)組對(duì)象
    •數(shù)組與類數(shù)組對(duì)象的區(qū)別
    1.數(shù)組的類型是Array
    2.類數(shù)組對(duì)象的類型是 Object
    DOM 對(duì)象轉(zhuǎn) jQuery 對(duì)象
    •使用 $()將 DOM 對(duì)象包裝起來,就可以轉(zhuǎn)換成 jQuery 對(duì)象
    var item = document.getElementsByTagName('ul')[0], // DOM對(duì)象
      $item = $(item); // jQuery對(duì)象
    jQuery 對(duì)象轉(zhuǎn)換為 DOM 對(duì)象
    jQuery 對(duì)象通過 jQuery 提供的 get(index)方法,得到對(duì)應(yīng)的 DOM 對(duì)象
    var $ul = $('ul'),
      ul = $ul.get(0);
    jQuery 對(duì)象是一個(gè)類數(shù)組對(duì)象,可以通過 [] 方式,得到對(duì)應(yīng)的 DOM 對(duì)象。
    類數(shù)組對(duì)象
    類數(shù)組對(duì)象本質(zhì)就是一個(gè)對(duì)象,只不過存儲(chǔ)方式類似于數(shù)組的結(jié)構(gòu)
    •arguments 對(duì)象 ---- 接受函數(shù)實(shí)參的個(gè)數(shù)
    •jQuery 對(duì)象 ---- 底層就是 dom 對(duì)象
    屬性
    •length 屬性(數(shù)組的長(zhǎng)度 | 元素的個(gè)數(shù))
    方法
    •get(index):根據(jù) index 放回對(duì)應(yīng)的 dom 對(duì)象
    •eq(index):根據(jù) index 返回對(duì)應(yīng)的 jQuery 對(duì)象
    •index():查找元素的索引值
    ready 和 onlaod 的區(qū)別
    ready
    1.具有簡(jiǎn)寫方式
    2.在一個(gè) HTML 頁面中允許出現(xiàn)多個(gè)
    3.加載完 DOM 結(jié)構(gòu)就執(zhí)行
    4.執(zhí)行速度快
    onload
    1.沒有簡(jiǎn)寫方式
    2.在一個(gè) HTML 頁面中只能使用一個(gè)
    3.需要等頁面所有資源加載完才執(zhí)行
    4.執(zhí)行速度比 ready 慢
    jQuery 動(dòng)畫
    基本隱藏、顯示效果
    •show()/ hide()
    $('div').show(1000).hide(1000);
    若是對(duì)同一個(gè) jQuery 對(duì)象使用,可以采用鏈?zhǔn)讲僮鳌?BR>    滑動(dòng)式動(dòng)畫效果
    •slideDown()/ slideUp()
    $('div').slideUp(1000).slideDown(1000);
    淡入淡出
    •fadeIn()淡入
    •fadeOut()淡出
    $('div').fadeIn(1000).fadeOut(1000);
    并發(fā)和排隊(duì)效果
    •并發(fā)效果:設(shè)置多個(gè)動(dòng)畫同時(shí)執(zhí)行
    •排隊(duì)效果:設(shè)置多個(gè)動(dòng)畫,按照先后順序依次執(zhí)行
    jQuery 插件
    jQuery 插件的作用
    •擴(kuò)展 jQuery 的功能
    •呈現(xiàn)組件化特點(diǎn)
    日期插件 - layDate插件
    •layDate初步使用
    1.引入 laydate.js
    2.laydate(options)
    開發(fā)插件
    全局函數(shù)
    全局函數(shù),實(shí)際上就是 jQuery 本身的方法。
    jQuery 內(nèi)置的一些功能是通過全局函數(shù)實(shí)現(xiàn)的。
    •比如$.ajax()就是典型的全局函數(shù)
    向 jQuery 命名空間添加一個(gè)函數(shù),只需要將這個(gè)新函數(shù)指定為 jQuery 本身的一個(gè)屬性
    $.globalFunction = function(){
      // todo...
    };
    可以通過 jQuery.globalFunction()或者 $.globalFunction()來調(diào)用
    當(dāng)需要添加多個(gè)函數(shù)可以使用$.extend()函數(shù)
    $.extend({
      functionOne: function(){
        // todo...
      },
      functionTwo: function(){
        // todo...
      }
    });
    通過上述代碼可以添加全局函數(shù),但是代碼存在有關(guān)命名空間的風(fēng)險(xiǎn)
    我們可以把屬于一個(gè)插件的所有全局函數(shù)封裝到一個(gè)對(duì)象
    $.plugins = function(){
      functionOne: function(){
        // todo...
      },
      functionTwo: function(){
        // todo...
      }
    };
    通過上述代碼,其實(shí)是為全局函數(shù)創(chuàng)建了另一個(gè)方法 --- plugins
    functionOne 和 functionTwo 已經(jīng)成為 plugins 對(duì)象的屬性。
    $.plugins.functionOne();
    $.plugins.functionTwo();
    添加 jQuery 實(shí)例對(duì)象的方法
    $.fn.method = function(){};對(duì)象方法的環(huán)境
    在任何插件方法內(nèi)部,關(guān)鍵字 this 引用的都是當(dāng)前調(diào)用方法的 jQuery對(duì)象,因此可以在 this 上面調(diào)用任何內(nèi)置的 jQuery 方法。
    方法連綴
    通過 return this 來實(shí)現(xiàn)鏈?zhǔn)讲僮?BR>    以上這篇jQuery學(xué)習(xí)心得總結(jié)(必看篇)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考