jQuery基礎知識概述

1.瞭解jQuery

• 是什麼？ ：

  • 一個JS函數庫：write less,do more

  • 封裝簡化DOM操做

• 爲何要用它？：

  • 強大的選擇器：方便快速的查找DOM元素

  • 隱式遍歷：能夠一次操做多個元素

  • 讀寫合一：讀數據/寫數據用的是一個函數

  • 鏈式調用：能夠經過 . 不斷的調用jQuery對象的方法

  • 事件處理

  • DOM操做

  • 樣式操做

  • 動畫

  • 瀏覽器兼容

• 如何使用：

  • 引入jQuery庫

    • 本地引入和CDN遠程引入

  • 使用jQuery

    • 使用jQuery函數：$或jQuery

    • 使用jQuery對象：$xxx(執行$()獲得的)

2.jQuery的兩把利器

• 1.jQuery核心函數

  • 理解：

    • 即：$或jQuery

    • jQuery 定義了這個全局的函數供咱們使用，它既能夠做爲通常函數調用，切傳遞的參數類型不一樣/格式不一樣，功能就徹底不一樣
      也能夠做爲對象調用其定義好的方法，此時$就是一個工具對象

  • 做爲函數調用$( )：

    • 1.參數爲函數：當DOM加載完成後，執行此回調函數

    • 2.參數爲選擇器字符串：查找全部匹配的標籤，並將其封裝成jQuery對象

    • 3.參數爲DOM對象：將DOM對象封裝成jQUERY對象

    • 4.參數爲html標籤字符串（用的少）：建立標籤對象，並封裝成jQuery對象

  • 做爲對象使用$.xxx( )：

    • 發送ajax請求的方法：

      • $.ajax()

      • $.get()

      • $.post()

      • ......

    • 其餘工具方法：

      • $.each():隱式遍歷數組

      • $.trim():去除字符串兩端的空格

      • $.parseJSON()：將JSON格式的字符串轉化爲對應的JavaScript對象

      • ......

• 2 jQuery核心對象

  • 理解：

    • 即：執行jQuery核心函數返回的對象

    • jQuery對象內部包含的是DOM元素對象的僞數組（可能只有一個元素），jQuery對象擁有不少的屬性和方法，讓程序員更方便快捷的操做DOM

  • 屬性/方法：

    • 基本行爲：

      • size()/length:包含的DOM元素個數

      • [index]/get(index):獲得對應位置的元素

      • each():遍歷包含的全部DOM元素

      • index():獲得在所在兄弟元素中的下標

    • 屬性：操做內部標籤的屬性或值

    • CSS:操做標籤的樣式

    • 文檔:對標籤進行增刪改操做

    • 篩選:根據指定的規則過濾內部的標籤

    • 事件:處理事件監聽

    • 效果:實現動畫效果

3.使用jQuery核心函數

• 選擇器

  • 是什麼，怎麼用？

    • 具備特定規則（css選擇器）的字符串

    • 用來查找DOM元素：$(selecter),根據選擇器規則在整個文檔中查找全部匹配的元素的數組，並將其封裝成jQuery對象返回

    • 只有調用$(),並將選擇器做爲參數傳入才能起做用

  • 分類

    • 基本選擇器

      • #id:id選擇器

      • element:元素選擇器

      • .class:屬性選擇器

      • *:任意元素

      • selecter1,selecter2,selecterN:組合選擇器

      • selecter1selecter2selecterN:相交選擇器

    • 層次選擇器--查找子元素，後代元素，兄弟元素的選擇器

      • ancestor descendant 在給定的祖先元素下的後代元素中匹配元素

      • parent>child:在給定的父元素下的子元素中匹配元素

      • prev+:匹配下一個兄弟元素

      • prev~:匹配後面全部兄弟元素

    • 過濾選擇器--在原有選擇器匹配的元素中進一步進行過濾的選擇器

      • :first

      • :last

      • :eq(index)

      • :lt

      • :gt

      • :odd

      • :even

      • :not(selector)

      • :hidden

      • :visible

      • [attrName]

      • [attrName=value]

      • ......

    • 表單選擇器

      • 表單：

        • :input

        • :text

        • :checkbox

        • :radio

        • :checked: 選中的

        • ......

      • 表單對象屬性

        • :enabled

        • :disabled

        • :checked

        • :selected

• 工具

  • $.each():遍歷數組或對象中的數據

  • $.trim():去除字符串兩邊的空格

  • $.type(obj):獲得數據的類型

  • $.isarray():判斷是不是數組

  • $.isFunction:判斷是不是函數

  • ......

• ajax

  • ajax()

  • get()

  • post()

  • ......

4.使用jQuery對象

• jQuery對象使用特色

  • 鏈式調用：調用jQuery對象的任何方法後返回的仍是當前jQuery對象，能夠屢次調用

  • 讀寫合一：讀：內部第一個 DOM元素， 寫:內部全部的DOM元素

• 屬性/文本

  • 操做標籤的屬性, 標籤體文本

    • attr(name) / attr(name, value): 讀寫非布爾值的標籤屬性

    • prop(name) / prop(name, value): 讀寫布爾值的標籤屬性

    • removeAttr(name)/removeProp(name): 刪除屬性

    • addClass(classValue): 添加class

    • removeClass(classValue): 移除指定class

    • val() / val(value): 讀寫標籤的value

    • html() / html(htmlString): 讀寫標籤體文本

• CSS模塊

  • 設置CSS樣式/讀取CSS值

    • css(styleName):讀取css值

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

    • css({多個鍵值對})：設置多個樣式

  • 獲取/設置元素的位置數據

    • offset():相對頁面左上角的座標

    • position():相對於父元素左上角的座標

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

      • 獲得頁面滾動條的scrollTop：
        $(document.body).scrollTop()+$(document.html).scrollTop();

      • 設置頁面滾動條的scrollTop:
        $('body,html').scrollTop(value);

  • 獲取/設置元素的吃寸數據

    • 不包括內邊距和邊框的尺寸

      • height()

      • width()

    • 包括內邊距，但不包括邊框的尺寸

      • innerHeight()

      • innerWidth()

    • 包括內邊距和邊框的尺寸

      • outHeight()

      • outWidth()

• 文檔模塊

  • 添加節點

    • 向當前匹配的全部元素內部的最後/最前面插入指定內容

      • append(content)

      • prepend(content)

    • 將指定內容插入到當前全部匹配元素的最後/最前

      • after(content)

      • before(content)

  • 替換節點

    • replaceWidth(content):用指定內容替換 全部匹配的元素

  • 刪除節點

    • empty():刪除全部匹配元素的子元素(掏空)

    • remove():刪除全部匹配的元素(本身及內部都刪除)

• 篩選模塊

  • 過濾

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

    • first()

    • last()

    • eq(index)

    • filter(selecter)

    • not(selecter)

    • has(selecter)

  • 查找後代/父/兄弟元素

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

    • children():子元素

    • find():後代元素

    • parent():父元素

    • prevAll():前面的全部兄弟元素

    • siblings():全部的兄弟元素

• 事件模塊

  • 綁定事件

    • on('eventName',function(){}):通用的事件綁定方法

    • eventName(function(){})

    • hover(function(){},function(){}):同時綁定鼠標移入和移出事件

  • 解綁事件

    • off('eventName')

  • 事件委託

    • 理解：經過事件冒泡將子元素的事件委託給父元素處理，事件監聽綁定在父元素上，但事件發生在子元素上，最終調用事件回調函數的是子元素：event.target

    • 綁定事件委託監聽

      • delefate(selecter(子元素)，'eventName',function(event){})

    • 解綁事件監聽

      • undelegate('eventName')

  • 相關知識

    • 事件座標

      • 相對可視窗口左上角：event.clientX/eventclientY
        *相對頁面左上角：event.pageX/event.pageY

      • 相對當前元素左上角：event.offsetX/event.offsetY

    • 阻止事件冒泡：event.stopPropagation();

    • 取消事件的默認行爲：event.preventDefault();

• 動畫效果

  • 滑動動畫

    • 不斷改變元素的高度來實現

    • slideDown():帶動畫的展開

    • slideUp():帶動畫的收縮

    • slideToggle():切換展開和收縮

  • 淡出淡入動畫

    • 不斷改變元素的透明度來實現

    • fadeIn():帶動畫的顯示

    • fadeOut():帶動畫的隱藏

    • fadeToggle():帶動畫的切換顯示和隱藏

  • 顯示/隱藏

    • show():顯示

    • hide():隱藏

    • toggle():切換顯示隱藏

  • 自定義動畫

    • animate({結束時的樣式}，time，function(){}) :自定義動畫效果

    • stop():中止動畫

• jQuery插件

  • 擴展插件

    • 擴展jQuery插件的工具方法

      $.extend({
        xxx.function(){}
      })
      $.xxx()

    • 擴展jQuery對象的方法

      $.fn.extend({
        xxx:function(){}
      })
      $().xxx()

  • jQuery插件

    • 理解：基於jQuery編寫的擴展庫

    • 網址：http://plugins.jquery.com/

    • jQuery UI: http://jqueryui.com/