jQuery學習筆記2

1. CSS模塊

  * style樣式

    * css(styleName): 根據樣式名獲得對應的值

    * css(styleName, value): 設置一個樣式

    * css({多個樣式對}): 設置多個樣式

  * 位置座標

    * offset(): 讀/寫當前元素座標(原點是頁面左上角)

    * position(): 讀當前元素座標(原點是父元素左上角)

    * scrollTop()/scrollLeft(): 讀/寫元素/頁面的滾動條座標

  * 尺寸

    * width()/height(): width/height

    * innerWidth()/innerHeight(): width + padding

    * outerWidth()/outerHeight(): width + padding + border

2. 篩選模塊

  * 過濾

    * 在jQuery對象內部的元素中找出部分匹配的元素, 並封裝成新的jQuery對象返回

    * first()

    * last()

    * eq(index)

    * filter(selector): 對當前元素提要求

    * not(selector): 對當前元素提要求, 並取反

    * has(selector): 對子孫元素提要求

  * 查找

    * 查找jQuery對象內部的元素的子孫/兄弟/父母元素, 並封裝成新的jQuery對象返回

    * children(selector): 子元素

    * find(selector): 後代元素

    * preAll(selector): 前的全部兄弟

    * siblings(selector): 全部兄弟

    * parent(): 父元素

3. 文檔處理(CUD)模塊

  * 增長

    * append() / appendTo(): 插入後部

    * preppend() / preppendTo(): 插入前部

    * before(): 插到前面

    * after(): 插到後面

  * 刪除

    * remove(): 將本身及內部的孩子都刪除

    * empty(): 掏空(本身還在)

  * 更新

    * replaceWith()

  

4. 事件模塊

  * 綁定事件

    * eventName(function(){})

    * on('eventName', function(){})

    * 經常使用: click, mouseenter/mouseleave mouseover/mouseout focus/blur

    * hover(function(){}, function(){})

  * 解綁事件

    * off('eventName')

  * 事件委託

    * 理解: 將子元素的事件委託給父輩元素處理

      * 事件監聽綁定在父元素上, 但事件發生在子元素上

      *　事件會冒泡到父元素

      * 但最終調用的事件回調函數的是子元素: event.target

    * 好處

      * 新增的元素沒有事件監聽

      * 減小監聽的數量(n==>1)

    * 編碼

      * delegate(selector, 'eventName', function(event){}) // 回調函數中的this是子元素

      * undelegate('eventName')

  * 事件座標

     * event.offsetX: 原點是當前元素左上角

     * event.clientX: 原點是窗口左上角

     * event.pageX: 原點是頁面左上角

  * 事件相關

    * 中止事件冒泡: event.stopPropagation()

    * 阻止事件的默認行爲: event.preventDefault()