Web前端JQuery基礎

                                                                   JQuery知識彙總

1、關於Jquery簡介                                                                                                                                                          

         

         jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype以後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨     是「write Less，Do More」，即倡導      寫更少的代碼，作更多的事情。它封裝JavaScript經常使用的功能代碼，提供一種簡便的JavaScript設計模       式，優化HTML文檔操做、事件處理、動畫設計和Ajax交互。

    jQuery的核心特性能夠總結爲：具備獨特的鏈式語法和短小清晰的多功能接口；具備高效靈活的css選擇器，而且可對CSS選擇器進行擴展；擁     有便捷的插件擴展機制和豐富的      插件。jQuery兼容各類主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

       jQuery提供了對基本JavaScript結構的加強，使用jquery能夠省去不少js代碼，使開發更加簡潔，同時也解決了js在不一樣瀏覽器上的兼容性問題。

2、Jquery安裝與在線使用

      jquery的使用主要分爲兩種，下載壓縮包或源文件至本地，而後導入項目中；經過 CDN（內容分發網絡） 引用它（在線，電腦必須聯網）

     （1） 下載 jquery 文件

             下載地址：http://jquery.com/download/

                   下載後 主要有 jquery.js （ 用於測試和開發，未壓縮，是可讀的代碼）和 jquery.min.js（用於實際的網站中，已被精簡和壓 縮。），項目開發進行時建議使用jquery.js文                件，能夠查看源碼；項目完成後建議將jquery.js更換爲jquery.min.js壓縮型文件再進行發佈

     （2） 在線引入jquery文件（CDN方式） 

             幾種經常使用的導入方式：百度、又拍雲、新浪、谷歌和微軟的服務器都存有 jQuery 。

                     從百度導入：<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

                    從又拍雲引入：<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>

                    重新浪引入  ：<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

                    從谷歌引入 ： <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>          

3、Jquery的簡單語法格式

       jquery屬於js的輕量級庫，在代碼位置和引入上和js同樣，寫在頁面內都是藉助<script>標籤，標籤內放代碼

       外部建立獨立的js文件時，能夠在獨立js文件中調用jquery的各類接口，方法等

       jquery代碼多使用"$"符

       在傳統js代碼中的window.onload=function(){ //jquer代碼 }用jquery的

       $(document).ready(function(){ // jQuery 代 碼... })代替，

       也能夠簡寫爲:

       $(function(){ //jquery代碼 })，也是通常的開始代碼

4、Jquery對象與DOM對象

        DOM對象 ：

                      Document Object Model for HTML，通俗點說便是javascript進行操做和控制的前端節點，操做包括基礎的獲取節點，增                           （創）刪改查，例：  var dom1  =  document.getElementById("model"); 其中dom1就是DOM對象 

     Jquery對象： 

                       專供jquery調用操做的對象，帶有明確的標誌「$」,jquery對於前端節點的全部操做都基於jquery的對象 

                       例：$dom1 = $(「#model」); 其中$dom1就是jquery對象；  注：jquery語法不可直接操做DOM對象 

     DOM對象與jquery對象的相互轉換：

                 DOM對象轉換爲jquery對象：  

                                 如：var dom = document.getElementsByTagName("div");//DOM對象,獲取頁面全部div標籤（多個，數組形式）

                                       var $dom = $(dom);//轉化爲jquery對象 ,仍爲數組形式，獲取相應對象 可用 $dom[i] 方式

                                       var $first = $dom[0];//獲取第一個div標籤

                 jquery對象轉換爲DOM對象：

 

                                （1）jQuery對象其實是一個數據對象，能夠經過數組下標的方法得到相應的DOM對象。

                                                 如：var $v=$("#v"); //獲得jQuery對象

                                                      var v=$("v")[0];//轉換成DOM對象

 

                                （2）jQuery自己能夠經過.get(index)方法獲得相應的DOM對象

                                                 如：var $v=$("#v"); //獲得jQuery對象

                                                       var v=$v.get(0);

5、Jquery選擇器

      jquery選擇器相對於js更加方便，更加豐富，包含基本的幾大選擇器（id，類，元素，層級，*）及篩選選擇器

         （1） 基本選擇器

                 jquery的節點選擇與css的語法規則同樣，例如id的獲取符號爲#等

                    一、id選擇器  $("#id名稱");//獲取惟一的節點

                    二、類選擇器 $(".class名稱");//獲取class爲**的節點，獲取後通常爲數組形式，對獲取的該目標的操做爲集羣操做

                    3 、標籤選擇器 $("input");//獲取頁面中全部的input標籤

                    四、層級選擇器：

                               

                           例： $("#box>input")//id爲box的節點的全部input孩子節點

         （2） 篩選選擇器

                      不少時候咱們不能直接經過基本選擇器與層級選擇器找到咱們想要的元素，爲此jQuery提供了一系列的篩選選擇器用來更快捷的找到所需的DOM元素。篩選選擇器                            

                    不少都不是CSS的規範，而是jQuery本身爲了開發者的便利延展出來的選擇器         

                          一、基本的篩選選擇器：

                                       

                                例：   $(".div:first")//類爲div節點的第一個節點

                        二、屬性篩選選擇器  

                               

                              根據標籤裏的屬性進行篩選，例：

                                 $("input[type=text]"),$("input[name=password]")......

                    三、子元素篩選選擇器

                               

                 jquery仍有不少豐富的選擇器，這點也是jquery的特色之一，這裏只選取比較經常使用和常見的幾種，更多的能夠去本身查詢jquery的api

6、jquery屬性及樣式

         （1）jquery的屬性添加，好比標籤的id，class，type等屬性

                   主要有.attr()和removeAttr（）兩個方法，attr（）方法主要用於添加屬性，而removeAttr（）方法恰好與attr相對

                   attr()有4個表達式

                             attr(傳入屬性名)：獲取屬性的值

                             attr(屬性名, 屬性值)：設置屬性的值

                             attr(屬性名,函數值)：設置屬性的函數值

                             attr(attributes)：給指定元素設置多個屬性值，即：{屬性名一: 「屬性值一」 , 屬性名二: 「屬性值二」 , … … }

                  removeAttr()刪除方法

                            .removeAttr( attributeName ) : 爲匹配的元素集合中的每一個元素中移除一個屬性（attribute）

         （2）標籤內容的獲取

                   .html()和.text()兩個方法，其中.html()與js中的innerHTML屬性同樣，獲取爲標籤內的頁面內容，.text()則是獲取全部的信息，包括子元素的標籤

                   .val（）專門用來獲取input標籤內的輸入內容

                   

                    html()方法

                                獲取集合中第一個匹配元素的HTML內容 或 設置每個匹配元素的html內容，具體有3種用法：

                                 html() 不傳入值，就是獲取集合中第一個匹配元素的HTML內容
                                 html( htmlString ) 設置每個匹配元素的html內容
                                 html( function(index, oldhtml) ) 用來返回設置HTML內容的一個函數

                   

                    text()方法

                           獲得匹配元素集合中每一個元素的文本內容結合，包括他們的後代，或設置匹配元素集合中每一個元素的文本內容爲指定的文本內容。，具體有3種用法：

                              text() 獲得匹配元素集合中每一個元素的合併文本，包括他們的後代
                              text( textString ) 用於設置匹配元素內容的文本
                              text( function(index, text) ) 用來返回設置文本內容的一個函數

                   

                    val()方法

                        val()無參數，獲取匹配的元素集合中第一個元素的當前值
                        val( value )，設置匹配的元素集合中每一個元素的值
                        val( function ) ，一個用來返回設置值的函數

               

                   .html(),.text()和.val()的差別總結：

                     .html(),.text(),.val()三種方法都是用來讀取選定元素的內容；只不過.html()是用來讀取元素的html內容（包括html標籤），.text()用來讀取元素的純文本內容，包括其後代元素，.val()是用來讀取表單元素的"value"值。其中.html()和.text()方法不能使用在表單元素上,而.val()只能使用在表單元素上；另外.html()方法使用在多個元素上時，只讀取第一個元素；.val()方法和.html()相同，若是其應用在多個元素上時，只能讀取第一個表單元素的"value"值，可是.text()和他們不同，若是.text()應用在多個元素上時，將會讀取全部選中元素的文本內容。
.html(htmlString),.text(textString)和.val(value)三種方法都是用來替換選中元素的內容，若是三個方法同時運用在多個元素上時，那麼將會替換全部選中元素的內容。
.html(),.text(),.val()均可以使用回調函數的返回值來動態的改變多個元素的內容。

          （3）jquery的樣式操做（class的增長刪除更迭）

                           addClass( className ) : 爲每一個匹配元素所要增長的一個或多個樣式名

                           removeClass( [className ] )：每一個匹配元素移除的一個或多個用空格隔開的樣式名

                           toggleClass( className )：在匹配的元素集合中的每一個元素上用來切換的一個或多個（用空格隔開）樣式類名

         （4）jquery的css屬性設置

                          經過JavaScript獲取dom元素上的style屬性，咱們能夠動態的給元素賦予樣式屬性。在jQuery中咱們要動態的修改style屬性咱們只要使用css()方法就能夠實現了

                          css() 方法：獲取元素樣式屬性的計算值或者設置元素的CSS屬性              

                    獲取：

                               .css( propertyName ) ：獲取匹配元素集合中的第一個元素的樣式屬性的計算值
                               .css( propertyNames )：傳遞一組數組，返回一個對象結果

                   設置：

                               css(propertyName, value )：設置CSS
                               css( propertyName, function )：能夠傳入一個回調函數，返回取到對應的值進行處理
                               css( properties )：能夠傳一個對象，同時設置多個樣式

                        例：    css("font-size","15px")                        css("fontSize","0.9em")

7、jquery的節點操做

        

8、jquery事件

        

9、jquery動畫

              一、隱藏和顯示（.hide,.show）

.hide()方法詳解：
讓頁面上的元素不可見，通常能夠經過設置css的display爲none屬性。可是經過css直接修改是靜態的佈局，若是在代碼執 行的時候，通常是經過js控制元素的style屬性，這裏jQuery提供了一個快捷的方法.hide()來達到這個效果
(1) $elem.hide()//最基本用法，將某個元素隱藏
(2) .hide( speed,callback )含參數時
當提供hide方法一個參數時，.hide()就會成爲一個動畫方法。.hide()方法將會匹配元素的寬度，高度，以及不透明度，同時進行動畫操做
例：
$(".box").hide("fast");//將以200毫秒速度消失
speed 主要爲控制隱藏的速度設置，能夠是「fast」「slow」單詞，也能夠是毫秒數。
callback 參數的前提是必須得設置speed參數，callback爲執行後的回調

注意：
jQuery在作hide操做的時候，是會保存自己的元素的原始屬性值，再以後經過對應的方法還原的時候仍是初始值。好比一個元素的display屬性值爲inline，那麼隱藏再顯示時，這個元素將再次顯示inline。一旦透明度達到0，display樣式屬性將被設置爲none，這個元素將再也不在頁面中影響佈局

.show()方法詳解 ：
css中有display:none屬性，同時也有display:block，因此jQuery一樣提供了與hide相反的show方法，show方法的使用幾乎與hide是一致的，hide是讓元素顯示到隱藏，show則是相反，讓元素從隱藏到顯示
(1) $elem.show() //方法與hide恰好相反，將某一被掩藏的元素顯現
(2) .show( speed,callback )含參數時,意義與hide相同，即速度與回調
例： $('elem').hide(3000).show(3000)//先將元素隱藏，後顯現
.toggle()方法詳解：
show與hide是一對互斥的方法。須要對元素進行顯示隱藏的互斥切換，一般狀況是須要先判斷元素的display狀態，而後調用其對應的處理方法。好比顯示的元素，那麼就要調用hide，反之亦然。 對於這樣的操做行爲，jQuery提供了一個便捷方法toggle用於切換顯示或隱藏匹配元素
toggle（）基本操做
這是最基本的操做，處理元素顯示或者隱藏，由於不帶參數，因此沒有動畫。經過改變CSS的display屬性，匹配的元素將被當即顯示或隱藏，沒有動畫。
若是元素是最初顯示，它會被隱藏
若是隱藏的，它會顯示出來
display屬性將被儲存而且須要的時候能夠恢復。若是一個元素的display值爲inline，而後是隱藏和顯示，這個元素將再次顯示inline

提供參數：.toggle( [duration ] [, complete ] )

一樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會發生顯示/隱藏的改變，在改變的過程當中會把元素的高、寬、不透明度進行一系列動畫效果。這個元素其實就是show與hide的方法

直接定位：.toggle(display)

直接提供一個參數，指定要改變的元素的最終效果
二、上卷下來
.slideDown()：用滑動動畫顯示一個匹配元素

.slideDown()方法將給匹配元素的高度的動畫，這會致使頁面的下面部分滑下去，彌補了顯示的方式
常見的操做，提供一個動畫是時間，而後傳遞一個回調，用於知道動畫是何時結束

.slideDown( [duration ] [, complete ] )
持續時間（duration）是以毫秒爲單位的，數值越大，動畫越慢，不是越快。字符串 'fast' 和 'slow' 分別表明200和600毫秒的延時。若是提供任何其餘字符串，或者這個duration參數被省略，那麼默認使用400 毫秒的延時。

具體使用：

$("ele").slideDown(1000, function() {
//等待動畫執行1秒後,執行別的動做....
});
注意：下拉動畫是從無到有，因此一開始元素是須要先隱藏起來的，能夠設置display:none
.slideUp() 動畫方式上卷一個元素直至隱藏
最簡單的使用：不帶參數
$("elem").slideUp();
這個使用的含義就是：找到元素的高度，而後採用一個下滑動畫讓元素一直滑到隱藏，當高度爲0的時候，也就是不可見的時，修改元素display 樣式屬性被設置爲none。這樣就能確保這個元素不會影響頁面佈局了

帶參數：
.slideUp( [duration ] [, easing ] [, complete ] )
一樣能夠提供一個時間，而後可使用一種過渡使用哪一種緩動函數，jQuery默認就2種，能夠經過下載插件支持。最後一個動畫結束的回調方法。
注意：由於動畫是異步的，因此要在動畫以後執行某些操做就必需要寫到回調函數裏面，這裏要特別注意!!!
.slidetoggle()
slideDown與slideUp是一對相反的方法。須要對元素進行上下拉卷效果的切換，jQuery提供了一個便捷方法slideToggle用滑動動畫顯示或隱藏一個匹配元素,具體性質同toggle（）方法一致
基本的操做：slideToggle();
這是最基本的操做，獲取元素的高度，使這個元素的高度發生改變，從而讓元素裏的內容往下或往上滑。

提供參數：.slideToggle( [duration ] ,[ complete ] )
一樣的提供了時間、還有動畫結束的回調。在參數對應的時間內，元素會完成動畫，而後出發回調函數
同時也提供了時間的快速定義，字符串 'fast' 和 'slow' 分別表明200和600毫秒的延時
三、淡入淡出
.fadeOut淡出動畫
fadeOut()函數用於隱藏全部匹配的元素，並帶有淡出的過渡動畫效果
所謂"淡出"隱藏的，元素是隱藏狀態不對做任何改變，元素是可見的，則將其隱藏。

.fadeOut( [duration ], [ complete ] )
經過不透明度的變化來實現全部匹配元素的淡出效果，並在動畫完成後可選地觸發一個回調函數。這個動畫只調整元素的不透明度，也就是說全部匹配的元素的高度和寬度不會發生變化。

字符串 'fast' 和 'slow' 分別表明200和600毫秒的延時。若是提供任何其餘字符串，或者這個duration參數被省略，那麼默認使用400毫秒的延時
.fadeIn()淡入動畫
.fadeIn( [duration ], [ complete ] )
duration：指定過渡動畫運行多長時間(毫秒數)，默認值爲400。該參數也能夠爲字符串"fast"(=200)或"slow"(=600)。
complete: 元素顯示完畢後須要執行的函數。函數內的this指向當前DOM元素。
fadeIn()函數用於顯示全部匹配的元素，並帶有淡入的過渡動畫效果。

注意：
淡入的動畫原理：操做元素的不透明度從0%逐漸增長到100%
若是元素自己是可見的，不對其做任何改變。若是元素是隱藏的，則使其可見
.fadeToggle()切換淡入淡出
函數用於切換全部匹配的元素，並帶有淡入/淡出的過渡動畫效果。
經常使用語法：.fadeToggle( [duration ] ,[ callback] )
可選的 duration 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。 可選的 callback 參數是 fadeToggle完成後所執行的函數名稱。

fadeToggle() 方法能夠在 fadeIn() 與 fadeOut() 方法之間進行切換。若是元素已淡出，則 fadeToggle() 會向元素添加淡入效果。若是元素已淡入，則 fadeToggle() 會向元素添加淡出效果。
四、這裏只介紹基本的幾個jquery的動畫方法，僅供入門。

10、jquery的ajax封裝（使用）

          jquery對ajax進行了封裝，按層次從低到高分依次爲   

                                    最底層封裝： $.ajax()

                                    第二層：$.load(),$.get(),$.post()，此層使用頻率最高

                                    第三層：$.getScript()和$.getJSON()

              這裏由於第二層方法使用頻率最高，這裏只介紹第二層的三個方法

                 （1）$.load(url,data,callback)

                             url : 類型爲String類型，爲請求的URL地址；

                             data（可選參數）:類型爲object，爲發送至服務器端的數據

                             callback（可選參數）： 類型爲function ，請求完成時的回調函數，不管請求成功與否

                         load方法主要用於請求靜態的數據文件，例如不一樣頁面的html文件

                  （2）$.get(url,data,callback,type)

                         url :  類型爲String類型，爲請求的URL地址；    （傳值時也可用？key=value的方式）  

                        data（可選參數）:類型爲object，爲發送至服務器端的數據

                        callback（可選參數）： 類型爲function ，載入成功時回調函數，自動將請求結果和狀態傳遞給該方法，

                                                           function（data，textStatus）{

                                                                        data:  //返回的內容，能夠是xml，JSON，html片斷等

                                                                        textStatus://請求狀態：success，error，timeout，notmodified四種

                                                                   }

                        type（可選參數）：服務器返回內容的格式，有html，json，xml，text等

                （3）$.post( url,data,callback,type)

                        參數及使用與get相同，可是與get相比，仍有如下幾點不一樣

                           1.get請求會將參數放在url後面，在地址欄可見，post則是做爲http請求的消息實體發出去，地址欄不可見

                           2.二者請求的數據量也不相同，get（一般不大於2KB），post則要大的多（理論上無限）

                           3.安全性不一，get方式請求的數據會被瀏覽器緩存，能夠經過查看瀏覽歷史記錄中讀取這些數據，不安全，post則避免這些問題。