數組下標 新浪 互轉 jquery事件 結果 eap 獲得 isp spa

JQuery知識匯總

一、關於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在不同瀏覽器上的兼容性問題。

二、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>

三、Jquery的簡單語法格式

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

外部創建獨立的js文件時，可以在獨立js文件中調用jquery的各種接口，方法等

jquery代碼多使用"$"符

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

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

也可以簡寫為:

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

四、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);

五、Jquery選擇器

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

（1） 基本選擇器

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

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

2、類選擇器 $(".class名稱");//獲取class為**的節點，獲取後一般為數組形式，對獲取的該目標的操作為集群操作

3 、標簽選擇器 $("input");//獲取頁面中所有的input標簽

4、層級選擇器：

例： $("#box>input")//id為box的節點的所有input孩子節點

（2） 篩選選擇器

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

很多都不是CSS的規範，而是jQuery自己為了開發者的便利延展出來的選擇器

1、基本的篩選選擇器：

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

2、屬性篩選選擇器

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

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

3、子元素篩選選擇器

jquery仍有很多豐富的選擇器，這點也是jquery的特點之一，這裏只選取比較常用和常見的幾種，更多的可以去自己查詢jquery的api

六、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")

七、jquery的節點操作

八、jquery事件

九、jquery動畫

1、隱藏和顯示（.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)

直接提供一個參數，指定要改變的元素的最終效果
2、上卷下來
.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毫秒的延時
3、淡入淡出
.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() 會向元素添加淡出效果。
4、這裏只介紹基本的幾個jquery的動畫方法，僅供入門。

十、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則避免這些問題。

Web前端JQuery基礎