• 一、JQ的簡單介紹
  • JQ是js的一個庫，封裝了開發時常用的一些功能，初期學習JQ主要是學習操作DOM的一些方法，調用JQ中封裝的一些API來進行DOM 的操作，大部分都是方法。
  • JQ的兩大特點：
    • 1、鏈式編程，如.show( )和.html( )可以寫成一個.show( ).html( )
    • 2、隱式便利，JQ可以在方法內部進行便利，而不用我們直接便利操作
• 二、使用JQ的幾個步驟
  • 1、引入JQ
  • 2、編寫入口函數，一般有三種寫法，且和JS入口函數不一樣，可以編寫多次，不會出現事件覆蓋的問題
    • $(document).ready(function( ){代碼體};表示文檔加載完畢，不管圖片加載是否完畢即可執行該JQ函數
    • 第二種方法為第一種的簡潔版：$(function( ){代碼體 })
    • $(window).ready(function () {代碼體})；表示必須等到文檔和圖片都加載完畢才可執行該JQ函數
  • 3、代碼事件處理
• 三、JS對象和JQ對象差異
  • 1、獲取方式不同，JS對象一般是使用的是document.getElementBy方法，而JQ則是通過$( )獲得
  • 2、獲得結果不同，JS獲取的對象一般是單個元素或者是偽數組，而JQ獲得的對象則都是數組
  • 3、兩者可以互相轉換，想用哪個的方法則需要轉到對應的對象上去
    • JQ對象轉JS：JQ對象[index]或者JQ對象.get(index)
    • JS對象轉JQ：$(JS對象)
• 四、JS選擇器介紹
  • 1、基本選擇器
    • id選擇：$("#id名")
    • 類選擇器：$(".類名")
    • 標簽選擇器：$("標簽名")
    • 通配符選擇器：$("*")
    • 並集選擇：$("名字，名字")
  • 2、層級選擇器
    • 後代選擇器：$("div li")；選擇div後代中的所有li
    • 子代選擇器：$("div>li");選擇div子代的li
    • 緊鄰選擇器：$("div+li")，選擇div緊鄰的下一個li
    • 兄弟選擇器：$("div～li")，選擇div後面所有的兄弟元素li
  • 3、過濾選擇器
    • 序號選擇器：$("li:eq(index)");選擇索引為index的li標簽，選擇第一個匹配的元素
  • 4、屬性選擇器
    • 選擇包含某項屬性的所有標簽：$("a[href]");所有包含href的a標簽
    • 選擇某項屬性為某值的標簽：$("a[href]=‘XXXX‘");選擇屬性為XXXX的a標簽
    • 選擇屬性不為某值的某標簽，包括沒有該屬性的；$("a[href]！=‘XXXX‘");
  • 5、篩選選擇器（通過方法調用）
    • 查找指定元素的所有後代元素：$("#sk“).find( );查找id為sk的元素的所有後代元素
    • 查找指定元素的所有子代元素：$("#sk“).children( );查找id為sk的元素的所有子代元素
    • 查找制定元素的所有兄弟元素（不包括自己）：$("#sk“).siblings( );
    • 查找指定元素的父元素（親父代）；$("#sk“).parent( );
    • 查找指定元素的第n個元素；$("#sk“).eq ( n );n是索引號，從0開始
• 五、JQ的動畫樣式方法
  • 設置樣式
    • $(‘div‘).css({‘width‘: ‘200px‘, ‘height‘: ‘200px‘,"background-color":‘red‘,‘margin-top‘:‘20px‘})
  • 顯示動畫：$(‘div‘).show(time(毫秒），function（）{ })；若是括號裏面不寫任何東西的話直接顯示，不會延遲；動畫結束之後會直接執行回調函數；
  • 隱藏動畫：$("div“).hide(time(毫秒），function（）{ } );其余和上方一直；
  • 開關式顯示隱藏動畫，其實內部就是先後執行show（ ）方法和hide（ ）方法；$("div“).toggle(time(毫秒），function（）{ } );
  • 滑入動畫，類似於卷簾門：$("div“).slideDown(time(毫秒），function（）{ } );
  • 滑出動畫，$("div“).slideUp(time(毫秒），function（）{ } );
  • 滑入滑出切換效果，$("div“).slideToggle(time(毫秒），function（）{ } );
  • 淡入動畫：$("div“).fadeIn(time(毫秒），function（）{ } );
  • 淡出動畫：$("div“).fadeOut(time(毫秒），function（）{ } );
  • 淡入淡出切換動畫：$("div“).fadeToggle(time(毫秒），function（）{ } );
  • 自定義動畫：$("div“).animate({params},time,callback );
    • 第一個參數params表示要執行動畫的css屬性，必填
    • 第二個參數表示在多少時間內執行完成，選填
    • 第三個callback表示回調函數
  • 停止動畫：$("div“).stop（ var1,var2);
    • 參數var1有True和False兩個選項，true表示後續動畫會執行，false表示後續動畫不執行
    • 參數var2有True和False兩個選項，true表示立即執行完成當前動畫，false表示立即停止當前動畫
    • 若是都不寫默認兩個參數都是false；
    • 我們在可以在一個動畫開始前使用stop（）方法，保證該動畫的執行不會對我們後續代碼產生影響
• 六、JQ的屬性操作
  • html屬性操作，對html文檔中的屬性進行讀取，設置和移除操作。
    • attr（ ）方法
      • 括號裏一個屬性值時表示獲取該屬性： $(‘div‘).attr(‘id‘)
      • 括號裏放對象時設置屬性值：$("div").attr("id","sk")
    • removeAttr( )方法，移除指定的屬性:$("div").removeAttr(‘id name‘)
  • DOM屬性操作：對DOM元素的屬性進行讀取，設置和移除操作.
    • prop( )方法，類似於attr（ ）方法，一般有屬性值為true或者false時可以使用prop（）方法
  • 類樣式操作：是指對DOM屬性className進行添加，移除操作。
    • 為匹配的元素添加類名：$("div").addClass("box1 box2")
    • 為匹配的元素刪除指定的或者所有的類：$("div").removeClass("box1");括號裏面不填則表示移除全部類名
    • 檢查匹配的元素，若存在就刪除一個類，若不存在就添加一個類：$("div").toggleClass("box2" );
  • 值操作：是對DOM屬性value進行讀取和設置操作。
    • html( )方法
      • $("div").html( )獲取該元素內部的所有內容：
      • $("div").html( XXx)替換掉原標簽內部的內容
    • text（）方法與html方法類似，但是它只獲取文本內容，而且替換的時候，括號內部所有的內容都會被當作文本對待，有標簽也不會渲染
    • val（）方法類似上兩者，用於獲取或設置input textarea select等等表單控件的值
• 七、JQ的文檔操作
  • 插入操作
    • $父元素.append(子元素）；在父元素中追加新的子元素，子元素可以是字符串，js對象那個，jq對象
    • $子元素.appendTo(父元素）；子元素追加到父元素中，同樣的；子元素不受限制
    • $父元素.prepen(子元素）：子元素添加到父元素的第一個，前置添加
    • $子元素.prependTo(父元素）；子元素添加到父元素第一個
    • $兄弟元素.after/before(要插入的兄弟元素)；
    • $要插入的兄弟元素.inserAfter/inserBefore(兄弟元素)；
  • 克隆操作：$(選擇器).clone( );
  • 修改操作
    • $(selector).replaceWith(content);將所匹配的元素由content替代，content可以是任意對象
    • $(content).replaceAll(“h2”);將所有的h2標簽替換成content
  • 刪除操作
    • $("div").remove( ),刪除節點，同時刪除事件，即刪除了整個標簽
    • $("div").detach( ),刪除節點，保留事件
    • $("div").empty( ),清除所選節點的所有後代節點
• 八、JQ的位置信息
  • .width( );獲取匹配元素集合中的第一個元素的寬度，與.css(width)的區別在於前者獲取的值沒有單位，後者由單位px；若是在括號裏面加入寬度，則表明為匹配的每一個元素設置寬度
  • .height( );獲取匹配的元素集合中的第一個元素的高度，其余用法與上者相似
  • innerWidth（ ）；獲取匹配元素集合中的第一個元素的計算寬度，包括padding但不包括border；在括號裏面加入數值的話表示為匹配的元素設置值；
  • innerHeight( );獲取匹配元素集合中的第一個元素的計算高度，包括padding但不包括border；在括號裏面寫值表示設定值；
  • outerWidth( );獲取匹配元素集合中第一個元素的計算外部寬度，包括padding，boder和可選的margin，括號裏面寫入bool值的話，表示是否包括magin；加數值的話表面為所有匹配的元素設置外部寬度；
  • outerHeight( );獲取匹配元素集合中第一個元素的計算外部寬度，包括padding，boder和可選的margin，括號裏面寫入bool值的話，表示是否包括magin；加數值的話表面為所有匹配的元素設置外部寬度；
  • offset({ top: 10, left: 30 })；設置匹配的每一個元素相對與文檔的坐標
  • .position( );獲取匹配的第一個元素相對與被定位的最近的一個祖先元素的坐標
  • .scrollLeft( );描述：獲取匹配的元素集合中第一個元素的當前水平滾動條的位置（頁面卷走的寬度;.scrollLeft(20),設置匹配的每一個元素的水平滾動條的位置；
  • .scrollTop( );描述：獲取匹配的元素集合中第一個元素的當前垂直滾動條的位置（頁面卷走的寬度;.scrollLeft(20),設置匹配的每一個元素的垂直滾動條的位置；
• 九、JQ的事件流
  • 事件流描述的是從頁面接收事件的順序
  • addEventListener 是DOM2 級事件新增的指定事件處理程序的操作，這個方法接收3個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值。最後這個布爾值參數如果是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序。
  • document、documentElement和document.body三者之間的關系：
    • document代表的是整個html頁面；
    • document.documentElement代表的是<html>標簽；
    • document.body代表的是<body>標簽；
  • 首先在事件捕獲過程中，document對象首先接收到click事件，然後事件沿著DOM樹依次向下，一直傳播到事件的實際目標，就是id為btn的a標簽。接著在事件冒泡過程中，事件開始時由最具體的元素（a標簽）接收，然後逐級向上傳播到較為不具體的節點（document）。
  • 我們在事件函數裏面return false可以阻止事件冒泡和默認事件；
  • JQ常用事件
    • JQ鼠標的常用事件
      • click；單擊
      • dblclick；雙擊
      • mousedown（）/up（）；鼠標按下
      • mousemove（）；鼠標移動觸發事件
      • mouseover()/moueout();鼠標進入或離開備選元素（或其子元素）時觸發事件
      • mouseenter()/mouseleave( );鼠標進入或離開被選元素時觸發事件
      • focus（）/blur（）；獲取/失去焦點時觸發事件
      • keydown（）/up（ ）；鍵盤按下，彈起時觸發事件
    • JQ表單常用事件
      • change( );表單元素發生改變時觸發事件
        • 此事件只限於input元素，textarea元素，和selecet元素
        • 對於單選多選等選擇框體，在鼠標選擇之後就會觸發，但是對於其他的輸入框，需要失去焦點時才會觸發
      • select（）；文本元素發生改變時觸發，此事件僅限於input；type元素為text和textarea表單元素
      • submit（）；
  • JQ綁定事件
    • bind(type,data,fn)
    • 描述：為每一個匹配元素的特定事件（像click）綁定一個事件處理器函數。
    • 參數解釋：
      • type (String) : 事件類型
      • data (Object) : (可選) 作為event.data屬性值傳遞給事件對象的額外數據對象
      • fn ( Function) : 綁定到每個匹配元素的事件上面的處理函數
    • 解綁事件unbind（）；括號裏面不寫東西，默認解除所有事件綁定
    • 自定義事件：trigger（type，data ）
      • 描述：在每一個匹配的元素上觸發某類事件，它觸發的是由bind()註冊的自定義事件。
      • 參數解釋：
        • type (String) : 要觸發的事件類型
        • data (Array) : (可選)傳遞給事件處理函數的附加參數
    • 一次性事件：one（type,data,fn)；和bind一樣的用法，但是只是會觸發一次
  • JQ事件代理
    • 原理，利用事件冒泡，將事件加到父級上，觸發執行效果
    • 作用：性能更好，對於新創建的元素可以直接擁有事件
    • 語法：on(type,selector,data,fn);
    • 參數解釋
      • type( String) : 一個或多個空格分隔的事件類型
      • selector( String) : 一個選擇器字符串，用於過濾出被選中的元素中能觸發事件的後代元素
      • data: 當一個事件被觸發時，要傳遞給事件處理函數的event.data。
      • fn:回調函數
• 十、ajex
  • 1.url: 要求為String類型的參數，（默認為當前頁地址）發送請求的地址。****
  • 2.type: 要求為String類型的參數，請求方式（post或get）默認為get。註意其他http請求方法，例如put和delete也可以使用，但僅部分瀏覽器支持。****
  • 3.timeout: 要求為Number類型的參數，設置請求超時時間（毫秒）。此設置將覆蓋$.ajaxSetup()方法的全局設置。
  • 4.async: 要求為Boolean類型的參數，默認設置為true，所有請求均為異步請求。如果需要發送同步請求，請將此選項設置為false。註意，同步請求將鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行。
  • 5.cache: 要求為Boolean類型的參數，默認為true（當dataType為script時，默認為false），設置為false將不會從瀏覽器緩存中加載請求信息。
  • 6.data: 要求為Object或String類型的參數，發送到服務器的數據。如果已經不是字符串，將自動轉換為字符串格式。get請求中將附加在url後。防止這種自動轉換，可以查看　　processData選項。對象必須為key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數組，JQuery將自動為不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。****
  • 7.dataType: 要求為String類型的參數，預期服務器返回的數據類型。如果不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，並作為回調函數參數傳遞。可用的類型如下：
    • xml：返回XML文檔，可用JQuery處理。
    • html：返回純文本HTML信息；包含的script標簽會在插入DOM時執行。
    • script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。註意在遠程請求時（不在同一個域下），所有post請求都將轉為get請求。
    • json：返回JSON數據。
    • jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換後一個“?”為正確的函數名，以執行回調函數。
    • text：返回純文本字符串。
  • 8.beforeSend： 要求為Function類型的參數，發送請求前可以修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求。XMLHttpRequest對象是惟一的參數。 function(XMLHttpRequest){ this; //調用本次ajax請求時傳遞的options參數 }
  • 9.complete：要求為Function類型的參數，請求完成後調用的回調函數（請求成功或失敗時均調用）。參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。 function(XMLHttpRequest, textStatus){ this; //調用本次ajax請求時傳遞的options參數 }
  • 10.success：要求為Function類型的參數，請求成功後調用的回調函數，有兩個參數。******
    • (1)由服務器返回，並根據dataType參數進行處理後的數據。
    • (2)描述狀態的字符串。 function(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text等等
  • 11.error: 要求為Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數如下： function(XMLHttpRequest, textStatus, errorThrown){ //通常情況下textStatus和errorThrown只有其中一個包含信息 this; //調用本次ajax請求時傳遞的options參數 }******
  • 12.contentType： 要求為String類型的參數，當發送信息至服務器時，內容編碼類型默認為"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。
  • 13.dataFilter： 要求為Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。 function(data, type){ //返回處理後的數據 return data; }
  • 14.dataFilter： 要求為Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。 function(data, type){ //返回處理後的數據 return data; }
  • 15.global： 要求為Boolean類型的參數，默認為true。表示是否觸發全局ajax事件。設置為false將不會觸發全局ajax事件，ajaxStart或ajaxStop可用於控制各種ajax事件。
  • 16.ifModified： 要求為Boolean類型的參數，默認為false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false，即忽略頭信息。
  • 17.jsonp： 要求為String類型的參數，在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分，例如{jsonp:‘onJsonPLoad‘}會導致將"onJsonPLoad=?"傳給服務器。
  • 18.username： 要求為String類型的參數，用於響應HTTP訪問認證請求的用戶名。
  • 19.password： 要求為String類型的參數，用於響應HTTP訪問認證請求的密碼。
  • 20.processData： 要求為Boolean類型的參數，默認為true。默認情況下，發送的數據將被轉換為對象（從技術角度來講並非字符串）以配合默認內容類型"application/x-www-form-urlencoded"。如果要發送DOM樹信息或者其他不希望轉換的信息，請設置為false。
  • 21.scriptCharset： 要求為String類型的參數，只有當請求時dataType為"jsonp"或者"script"，並且type是GET時才會用於強制修改字符集(charset)。通常在本地和遠程的內容編碼不同時使用

jQuery入門知識點介紹