JQuery庫的基礎用法
JQuery的定義:
jQuery是一個快速、簡潔的JavaScript框架,是繼Prototype之後又一個優秀的JavaScript程式碼庫(或JavaScript框架)。
jQuery設計的宗旨是“write Less,Do More”,即倡導寫更少的程式碼,做更多的事情。
jQuery 優點:
它封裝JavaScript常用的功能程式碼,提供一種簡便的JavaScript設計模式,優化HTML文件操作、事件處理、動畫設計和Ajax互動。
極大地簡化了 JavaScript 程式設計。jQuery 庫可以通過一行簡單的標記被新增到網頁中。
jQuery庫包含以下功能:
1、html,的元素選取
2、html的,元素操作
3、html dom,遍歷和修改
4、js,特效和動畫效果
5、css,操作
6、html,事件操作
7、ajax,非同步請求方式
提示
jQuery 語法使用:
通過 jQuery,您可以選取(查詢,query) HTML 元素,並對它們執行"操作"(actions)。
jQuery 語法是通過選取 HTML 元素,並對選取的元素執行某些操作。
基礎語法: $(selector(選擇器)).(行為)action()
美元符號用來定義 jQuery
選擇符(selector)用來“查詢"和"查詢” HTML 元素
jQuery 的 action() 執行對元素的操作事件
jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。
<!--匯入jQuery程式碼庫-->
<script type="text/javascript" src="js/jquery-2.1.0.js">
/*為了保證js和jq的程式碼能夠同時使用,所以獨立開一個scrpt*/
</script>
<!--jq的文件載入事件-->
<script>
/*js版的載入方式*/
onload = function(){
alert("我被載入了1");
}
/*jq的載入方式*/
jQuery(document).ready(function(){
alert("我被載入了1");
});
/*簡寫方式*/
$(document).ready(function(){
alert("我被載入了2");
});
/*終極簡寫方式*/
$(function(){
alert("我被載入了3");
});
</script>
如果在文件沒有完全載入之前就執行函式,操作可能失敗。
jQuery選擇器jQuery選擇器允許您對HTML元素組或單個元素進行操作。
jQuery選擇器基於元素的id、類、型別、屬性、屬性值等"查詢"(或選擇)HTML元素。
它基於已經存在的CSS選擇器,除此之外,它還有一些自定義的選擇器。
jQuery中所有選擇器都以美元符號開頭:$ (function(){// 開始寫 jQuery 程式碼...});如果在文件沒有完全載入之前就執行函式,操作可能失敗。
jQuery 選擇器jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。
#jQuery的元素轉換
##示例程式碼
<script>
function changeJs(){
var div1 = document.getElementById("div1");
div1.innerHTML = "JS成功修改了程式碼";
//js物件轉換為jq的物件
$(div1).html("JQ成功修改了程式碼");
// div1.html("JS成功修改了程式碼");
}
$(function(){
//給bt2新增點選事件
$("#bt2").click(function(){
//找到div2
$("#div2").html("是JQ進行的內容的改變");
//將jq的物件轉換成js的物件
var $div = $("#div2");
//獲取jq物件的具體元素,賦值給js變數轉換為js物件
//var jsDiv = $div.get(0);
var jsDiv = $div[0];
jsDiv.innerHTML = "jq物件轉換為js物件成功";
});
});
</script>
#id 選擇器
jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。
頁面中元素的 id 應該是唯一的,所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。
通過 id 選取元素語法如右側所示:KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲test") ........…(".test")
$("*"),選取所有元素
$(this),選取當前 HTML 元素
$(“p.intro”),選取 class 為 intro 的
元素
$(“p:first”),選取第一個
元素
$(“ul li:first”),選取第一個
元素的第一個
元素
$(“ul li:first-child”),選取每個
元素的第一個
元素
$("[href]"),選取帶有 href 屬性的元素
$(“a[target=’_blank’]”),選取所有 target 屬性值等於 “_blank” 的 元素
$(“a[target!=’_blank’]”),選取所有 target 屬性值不等於 “_blank” 的 元素
$(":button"),選取所有 type=“button” 的 元素 和 元素
$(“tr:even”),選取偶數位置的 元素
$(“tr:odd”),選取奇數位置的 元素
#JQ的開發步驟
1. 匯入相關的JQ的庫
2. 完成文件載入事件 $(function)
3. 確定相關的事件源
4. 確定事件源所操作的事件
5. 確定事件的響應行為
#jQuery的動畫效果
## 示例程式碼
<script>
$(function(){
//顯示圖片
//給btn1新增點選事件
$("#btn1").click(function(){
//$("#img1").show(5000);
//$("#img1").fadeIn(5000);
$("#img1").slideDown(1000);
});
//隱藏圖片
$("#btn2").click(function(){
//$("#img1").hide(5000);
//$("#img1").slideUp(2000);
$("#img1").animate({width:"20%",opacity:"0.3"},1000)
});
});
</script>
##使用jQuery寫出一個帶動畫的自動顯示和隱藏的廣告的功能
<script>
//顯示廣告
function showAD(){
$("#img1").slideDown(2000);
setTimeout("hideAD()",2000);
}
//隱藏廣告
function hideAD(){
$("#img1").slideUp(2000);
}
$(function(){
setTimeout("showAD()",2000);
});
</script>
</head>
<body>
<img src="img/1.jpg" id="img1" style="display: none;" width="300px"/>
</body>
#jQuery的選擇器:
## 什麼選擇器?
jQuery的選擇器和CSS的選擇器基本一致,都是為了更加精確的匹配到某個元素
## 基本選擇器
- 標籤選擇器:以標籤名作為參考
- 類選擇器:以.類名開頭
- ID選擇器:以#ID名開頭
- 萬用字元選擇器:以*代表全部選擇器
- 多層選擇器:選擇器,選擇器
### 示例程式碼
<script>
$(function(){
//找出id為two的元素
$("#btn1").click(function(){
$("#two").css("background-color","paleturquoise");
});
//找出mini類的所有元素
$("#btn2").click(function(){
$(".mini").css("background-color","paleturquoise");
});
//找出所有div元素
$("#btn3").click(function(){
$("div").css("background-color","paleturquoise");
});
//找出所有元素
$("#btn4").click(function(){
$("*").css("background-color","paleturquoise");
});
//找出mini類和span類的元素
$("#btn5").click(function(){
$(".mini,span").css("background-color","paleturquoise");
});
});
</script>
##層級選擇器
- 子代選擇器:選擇器1 > 選擇器2
- 後代選擇器:選擇器1 選擇器2
- 相鄰兄弟選擇器:選擇器1 + 選擇器2:找出離本身最近的一個弟弟元素
- 找出所有弟弟選擇器?:選擇器1 ~ 選擇器2:找出所有的弟弟
###示例程式碼
<script>
$(function(){
//找出body下面的子div
$("#btn1").click(function(){
$("body > div").css("background-color","paleturquoise");
});
//找出body下面的所有div
$("#btn2").click(function(){
$("body div").css("background-color","paleturquoise");
});
//找出id為one的相鄰兄弟div
$("#btn3").click(function(){
$("#one+div").css("background-color","paleturquoise");
});
//找出id為two的所有弟弟div
$("#btn4").click(function(){
$("#two~div").css("background-color","paleturquoise");
});
});
</script>
獨立檔案中使用 jQuery 函式,如果您的網站包含許多頁面,並且您希望您的 jQuery 函式易於維護,那麼請把您的 jQuery 函式放到獨立的 .js 檔案中。
jQuery 事件
jQuery 是為事件處理特別設計的。
頁面對不同訪問者的響應叫做事件。
事件處理程式指的是當 HTML 中發生某些事件時所呼叫的方法。
例項:
在元素上移動滑鼠。
選取單選按鈕
點選元素
在事件中經常使用術語"觸發"(或"激發")例如: “當您按下按鍵時觸發 keypress(按鍵響應) 事件”。
常見 DOM 事件:
滑鼠事件:
click(單擊)
dblclick(雙擊滑鼠)
mouseenter(滑鼠移入),mouseleave(滑鼠移出)
mousedown(按下滑鼠按鍵),mouseup(鬆開滑鼠按鈕)
hover()方法用於模擬游標懸停事件,當滑鼠移動到元素上時,會觸發指定的第一個函式(mouseenter),當滑鼠移出這個元素時,會觸發指定的第二個函式(mouseleave)。
鍵盤事件:keypress(按鍵響應),keydown(按鍵按下),keyup(按鍵恢復)
表單事件:submit(提交),change(更換),focus(焦點), blur(失去焦點)
文件/視窗事件: load(負荷),resize(調整尺寸), scroll(文字框中的起始滾動行), unload(解除安裝)
fadeOut(淡出時間)
在 jQuery 中,大多數 DOM 事件都有一個等效的 jQuery 方法。
(document).ready()方法允許我們在文件完全載入完後執行函式。
jQuery效果−隱藏和顯示隱藏、顯示、切換,滑動,淡入淡出,以及動畫。slow(緩慢的),可用作動作時間
jQueryhide(spaad)和show(spaad):通過jQuery,您可以使用"hide(隱藏)"和"show(顯示)"方法來隱藏和顯示HTML元素。speed引數規定隱藏/顯示的速度,可以取以下值:"slow(緩慢的)"、"fast(快速的)"或毫秒,可選的callback引數是隱藏或顯示完成後所執行的函式名稱
jQuerytoggle(切換):通過jQuery,您可以使用toggle()方法來切換hide()和show()方法。
jQuery效果−淡入淡出通過jQuery,您可以實現元素的淡入淡出效果。
jQuery擁有下面四種fade方法:fadeIn(),用於淡入已隱藏的元素。fadeOut(),用於淡出顯示的元素。fadeToggle(),可以在fadeIn()與fadeOut()方法之間進行切換。
fadeTo(),允許漸變為給定的不透明度(值介於0與1之間)。
jQuery效果−滑動通過jQuery,您可以在元素上建立滑動效果。
jQuery擁有以下滑動方法:slideDown(),用於向下滑動元素。
slideUp(),用於向上滑動元素。
slideToggle(),可以在slideDown()與slideUp()方法之間進行切換。
如果元素向下滑動,則slideToggle()可向上滑動它們。
如果元素向上滑動,則slideToggle()可向下滑動它們。
jQuery效果−動畫jQueryanimate()方法允許您建立自定義的動畫。
語法: (document).ready() 方法允許我們在文件完全載入完後執行函式。
jQuery 效果- 隱藏和顯示隱藏、顯示、切換,滑動,淡入淡出,以及動畫。slow(緩慢的),可用作動作時間
jQuery hide(spaad) 和 show(spaad):通過 jQuery,您可以使用 "hide(隱藏)" 和 "show(顯示)" 方法來隱藏和顯示 HTML 元素。speed 引數規定隱藏/顯示的速度,可以取以下值:"slow(緩慢的)"、"fast(快速的)" 或毫秒,可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱
jQuery toggle(切換):通過 jQuery,您可以使用 toggle() 方法來切換 hide() 和 show() 方法。
jQuery 效果 - 淡入淡出通過 jQuery,您可以實現元素的淡入淡出效果。jQuery 擁有下面四種 fade 方法:fadeIn(),用於淡入已隱藏的元素。fadeOut(),用於淡出顯示的元素。
fadeToggle(),可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
fadeTo(),允許漸變為給定的不透明度(值介於 0 與 1 之間)。
jQuery 效果 - 滑動通過 jQuery,您可以在元素上建立滑動效果。
jQuery 擁有以下滑動方法:slideDown(),用於向下滑動元素。
slideUp(),用於向上滑動元素。
slideToggle(),可以在 slideDown() 與 slideUp() 方法之間進行切換。
如果元素向下滑動,則 slideToggle() 可向上滑動它們。
如果元素向上滑動,則 slideToggle() 可向下滑動它們。
jQuery 效果- 動畫jQuery animate() 方法允許您建立自定義的動畫。
語法:(document).ready()方法允許我們在文件完全載入完後執行函式。
jQuery效果−隱藏和顯示隱藏、顯示、切換,滑動,淡入淡出,以及動畫。
slow(緩慢的),可用作動作時間。
jQueryhide(spaad)和show(spaad):通過jQuery,您可以使用"hide(隱藏)"和"show(顯示)"方法來隱藏和顯示HTML元素。
speed引數規定隱藏/顯示的速度,可以取以下值:"slow(緩慢的)"、"fast(快速的)"或毫秒,可選的callback引數是隱藏或顯示完成後所執行的函式名稱。
jQuerytoggle(切換):通過jQuery,您可以使用toggle()方法來切換hide()和show()方法。
jQuery效果−淡入淡出通過jQuery,您可以實現元素的淡入淡出效果。
jQuery擁有下面四種fade方法:fadeIn(),用於淡入已隱藏的元素。
fadeOut(),用於淡出顯示的元素。fadeToggle(),可以在fadeIn()與fadeOut()方法之間進行切換。fadeTo(),允許漸變為給定的不透明度(值介於0與1之間)。
jQuery效果−滑動通過jQuery,您可以在元素上建立滑動效果。
jQuery擁有以下滑動方法:slideDown(),用於向下滑動元素。
slideUp(),用於向上滑動元素。
slideToggle(),可以在slideDown()與slideUp()方法之間進行切換。
如果元素向下滑動,則slideToggle()可向上滑動它們。
如果元素向上滑動,則slideToggle()可向下滑動它們。
jQuery效果−動畫jQueryanimate()方法允許您建立自定義的動畫。
語法:(selector).animate({params},speed,callback),必需的 params 引數定義形成動畫的 CSS 屬性。
預設情況下,所有 HTML 元素都有一個靜態位置,且無法移動,如需對位置進行操作,要記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute!
jQuery animate() - 使用相對值,也可以定義相對值(該值相對於元素的當前值)。需要在值的前面加上 “+=” 或 “-=” 。
jQuery animate() - 使用預定義的值,您也可以把屬性的動畫值設定為 “show”、“hide” 或 “toggle” 。
jQuery animate() - 使用佇列功能,預設地,jQuery 提供針對動畫的佇列功能。
這意味著如果您在彼此之後編寫多個 animate() 呼叫,jQuery 會建立包含這些方法呼叫的"內部"佇列。然後逐一執行這些 animate 呼叫。
jQuery 停止動畫
jQuery stop() 方法用於在動畫或效果完成前對它們進行停止。
jQuery stop() 方法,jQuery stop() 方法用於停止動畫或效果,在它們完成之前,stop() 方法適用於所有 jQuery 效果函式,包括滑動、淡入淡出和自定義動畫。
語法:(selector).stop(stopAll,goToEnd);可選的stopAll引數規定是否應該清除動畫佇列。
預設是false,即僅停止活動的動畫,允許任何排入佇列的動畫向後執行。
可選的goToEnd引數規定是否立即完成當前動畫。預設是false。
因此,預設地,stop()會清除在被選元素上指定的當前動畫。
jQueryCallback(回撥函式)方法Callback函式在當前動畫100許多jQuery函式涉及動畫。
這些函式也許會將speed或duration作為可選引數。例子: (selector).stop(stopAll,goToEnd);可選的 stopAll 引數規定是否應該清除動畫佇列。預設是 false,即僅停止活動的動畫,允許任何排入佇列的動畫向後執行。可選的 goToEnd 引數規定是否立即完成當前動畫。預設是 false。因此,預設地,stop() 會清除在被選元素上指定的當前動畫。
jQuery Callback(回撥函式) 方法Callback 函式在當前動畫 100% 完成之後執行。許多 jQuery 函式涉及動畫。這些函式也許會將 speed 或 duration 作為可選引數。例子:(selector).stop(stopAll,goToEnd);可選的stopAll引數規定是否應該清除動畫佇列。預設是false,即僅停止活動的動畫,允許任何排入佇列的動畫向後執行。可選的goToEnd引數規定是否立即完成當前動畫。預設是false。因此,預設地,stop()會清除在被選元素上指定的當前動畫。
jQueryCallback(回撥函式)方法Callback函式在當前動畫100許多jQuery函式涉及動畫。這些函式也許會將speed或duration作為可選引數。例子:(“p”).hide(“slow”)
speed 或 duration 引數可以設定許多不同的值,比如 “slow”, “fast”, “normal” 或毫秒。
jQuery - 鏈(Chaining)
通過 jQuery,可以把動作/方法連結在一起。
Chaining 允許我們在一條語句中執行多個 jQuery 方法(在相同的元素上)。
jQuery 方法連結:直到現在,我們都是一次寫一條 jQuery 語句(一條接著另一條)。
不過,有一種名為連結(chaining)的技術,允許我們在相同的元素上執行多條 jQuery 命令,一條接著另一條。
提示: 這樣的話,瀏覽器就不必多次查詢相同的元素。
如需連結一個動作,您只需簡單地把該動作追加到之前的動作上。
如果需要,我們也可以新增多個方法呼叫。
提示:當進行連結時,程式碼行會變得很長。不過,jQuery 語法不是很嚴格;您可以按照希望的格式來寫,包含換行和縮排。
jQuery 會拋掉多餘的空格,並當成一行長程式碼來執行上面的程式碼行。
jQuery - 獲取內容和屬性
jQuery 擁有可操作 HTML 元素和屬性的強大方法。
jQuery DOM 操作:
jQuery 中非常重要的部分,就是操作 DOM 的能力,jQuery 提供一系列與 DOM 相關的方法,這使訪問和操作元素和屬性變得很容易。
DOM = Document Object Model(文件物件模型)
DOM 定義訪問 HTML 和 XML 文件的標準:“W3C 文件物件模型獨立於平臺和語言的介面,允許程式和指令碼動態訪問和更新文件的內容、結構以及樣式”。
獲得內容 - text()、html() 和 val():
三個簡單實用的用於 DOM 操作的 jQuery 方法:
text() - 設定或返回所選元素的文字內容
html() - 設定或返回所選元素的內容(包括 HTML 標記)
val() - 設定或返回表單欄位的值
attr(“要獲取的屬性”) - 方法用於獲取屬性值
jQuery - 設定內容和屬性
設定內容 - text()、html() 和 val()
text() - 設定或返回所選元素的文字內容
html() - 設定或返回所選元素的內容(包括 HTML 標記)
val() - 設定或返回表單欄位的值
。。。。。。。。。。。。。。。。。。
text()、html() 以及 val() 的回撥函式:
text()、html() 以及 val(),同樣擁有回撥函式。回撥函式有兩個引數:被選元素列表中當前元素的下標,以及原始(舊的)值。然後以函式新值返回您希望使用的字串。
attr() 方法也用於設定/改變屬性值。attr() 方法也允許您同時設定多個屬性。
attr(),也提供回撥函式。回撥函式有兩個引數:被選元素列表中當前元素的下標,以及原始(舊的)值。然後以函式新值返回您希望使用的字串。
jQuery - 新增元素
通過 jQuery,可以很容易地新增新元素/內容。
新增新內容的四個 jQuery 方法:
append() - 在被選元素的結尾插入內容,(仍然該元素的內部),可無限追加。
prepend() - 在被選元素的開頭插入內容,可無限追加。
after() - 在被選元素之後插入內容
before() - 在被選元素之前插入內容
jQuery - 刪除元素
通過 jQuery,可以很容易地刪除已有的 HTML 元素。
可使用以下兩個 jQuery 方法:
remove() - 刪除被選元素(及其子元素),remove() 方法也可接受一個引數,允許您對被刪元素進行過濾,該引數可以是任何 jQuery 選擇器的語法。
empty() - 從被選元素中刪除子元素
jQuery - 獲取並設定 CSS 類
通過 jQuery,可以很容易地對 CSS 元素進行操作。
jQuery 擁有若干進行 CSS 操作的方法:
addClass() - 向被選元素新增一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對addClass()和removeClass() 的切換
jQuery css() 方法
css() - 設定或返回被選元素的一個或多個樣式屬性
如需返回指定的 CSS 屬性的值,請使用如右所示語法:css("(屬性名)propertyname")。
如需設定指定的 CSS 屬性,請使用如右所示語法:css("(屬性名)propertyname","(值)value")。
如需設定多個 CSS 屬性,請使用如下語法:css({“propertyname”:“value”,“propertyname”:“value”,…})。
jQuery 尺寸
通過 jQuery,很容易處理元素和瀏覽器視窗的尺寸。
jQuery 提供多個處理尺寸的重要方法:
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
jQuery width() 和 height() 方法:
width() 方法設定或返回元素的寬度(不包括內邊距,邊框或外邊距)。
height() 方法設定或返回元素的高度(不包括內邊距,邊框或外邊距)。
jQuery innerWidth() 和 innerHeight() 方法:
innerWidth() 方法返回元素的寬度(包括內邊距,不包括外邊距)。
innerHeight() 方法返回元素的高度(包括內邊距,不包括外邊距)。
jQuery outerWidth() 和 outerHeight() 方法:
outerWidth() 方法返回元素的寬度(包括內邊距和邊框)。
outerHeight() 方法返回元素的高度(包括內邊距和邊框)。
jQuery 遍歷:
jQuery 遍歷,意為"移動",用於根據其相對於其他元素的關係來"查詢"(或選取)HTML 元素。以某項選擇開始,並沿著這個選擇移動,直到抵達您期望的元素為止。
遍歷 DOM:jQuery 提供了多種遍歷 DOM 的方法,遍歷方法中最大的種類是樹遍歷(tree-traversal)。
jQuery 遍歷 - 祖先:
祖先是父、祖父或曾祖父等等,通過 jQuery,您能夠向上遍歷 DOM 樹,以查詢元素的祖先。
這些 jQuery 方法很有用,它們用於向上遍歷 DOM 樹:
parent()方法,返回被選元素的直接父元素,該方法只會向上一級對 DOM 樹進行遍歷。
parents()方法,返回被選元素的所有祖先元素,它一路向上直到文件的根元素 ()。
parentsUntil()方法,返回介於兩個給定元素之間的所有祖先元素。
jQuery 遍歷 - 後代:
後代是子、孫、曾孫等等,通過 jQuery,您能夠向下遍歷 DOM 樹,以查詢元素的後代。
下面是用於向下遍歷 DOM 樹的 jQuery 方法:
children()方法,返回被選元素的所有直接子元素,該方法只會向下一級對 DOM 樹進行遍歷。
find()方法,返回被選元素的後代元素,一路向下直到最後一個後代。
jQuery 遍歷 - 同胞(siblings):
同胞擁有相同的父元素,通過 jQuery,您能夠在 DOM 樹中遍歷元素的同胞元素。
在 DOM 樹中水平遍歷,有許多有用的方法讓我們在 DOM 樹進行水平遍歷:
siblings() 方法,返回被選元素的所有同胞元素。
next()方法,返回被選元素的下一個同胞元素,該方法只返回一個元素。
nextAll()方法,返回被選元素的所有跟隨的同胞元素。
nextUntil()方法,返回介於兩個給定引數之間的所有跟隨的同胞元素。
prev(),prevAll(),prevUntil()方法,工作方式與上面的方法類似,只不過方向相反而已:它們返回的是前面的同胞元素(在 DOM 樹中沿著同胞之前元素遍歷,而不是之後元素遍歷)。
jQuery 遍歷- 過濾:
縮小搜尋元素的範圍:
三個最基本的過濾方法是:first(), last() 和 eq(),它們允許您基於其在一組元素中的位置來選擇一個特定的元素。
其他過濾方法,比如 filter() 和 not() 允許您選取匹配或不匹配某項指定標準的元素。
first()方法,返回被選元素的首個元素。
last()方法,返回被選元素的最後一個元素。
eq()方法,返回被選元素中帶有指定索引號的元素,索引號從 0 開始,因此首個元素的索引號是 0 而不是 1。
filter()方法,允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除,匹配的元素會被返回。
not()方法,返回不匹配標準的所有元素,提示:not() 方法與 filter() 相反。
jQuery - AJAX(建立互動式 Web 應用程式而無需犧牲瀏覽器相容性的流行方法)
AJAX 是與伺服器交換資料的技術,它在不過載全部頁面的情況下,實現了對部分網頁的更新。
AJAX = 非同步 JavaScript 和 XML(Asynchronous JavaScript and XML),簡短地說,在不過載整個網頁的情況下,AJAX 通過後臺載入資料,並在網頁上進行顯示。
jQuery 提供多個與 AJAX 有關的方法。
通過 jQuery AJAX 方法,您能夠使用 HTTP Get 和 HTTP Post 從遠端伺服器上請求文字、HTML、XML 或 JSON - 同時您能夠把這些外部資料直接載入網頁的被選元素中。
jQuery - AJAX load() 方法:
jQuery load() 方法是簡單但強大的 AJAX 方法,load() 方法從伺服器載入資料,並把返回的資料放入被選元素中。
語法:$(selector).load(負荷)(URL(地址),data(資料),callback)。
必需的 URL 引數規定您希望載入的 URL。
可選的 data 引數規定與請求一同傳送的查詢字串鍵/值對集合。
可選的 callback 引數是 load() 方法完成後所執行的函式名稱。
responseTxt - 包含呼叫成功時的結果內容
statusTXT - 包含呼叫的狀態
xhr - 包含 XMLHttpRequest 物件
jQuery - AJAX get() 和 post() 方法:
jQuery get() 和 post() 方法用於通過 HTTP GET 或 POST 請求從伺服器請求資料。
HTTP 請求:GET vs. POST:
兩種在客戶端和伺服器端進行請求-響應的常用方法是:GET 和 POST。
GET - 從指定的資源請求資料
POST - 向指定的資源提交要處理的資料
GET 基本上用於從伺服器獲得(取回)資料。註釋:GET 方法可能返回快取資料。
POST 也可用於從伺服器獲取資料。不過,POST 方法不會快取資料,並且常用於連同請求一起傳送資料。
.get()方法通過HTTPGET請求從伺服器上請求資料,語法: .get() 方法通過 HTTP GET 請求從伺服器上請求資料,語法:.get()方法通過HTTPGET請求從伺服器上請求資料,語法:.get(URL,callback),必需的 URL 引數規定您希望請求的 URL,可選的 callback 引數是請求成功後所執行的函式名。
.post()方法通過HTTPPOST請求向伺服器提交資料,語法: .post() 方法通過 HTTP POST 請求向伺服器提交資料,語法:.post()方法通過HTTPPOST請求向伺服器提交資料,語法:.post(URL,data,callback),必需的 URL 引數規定您希望請求的 URL。可選的 data 引數規定連同請求傳送的資料。
可選的 callback 引數是請求成功後所執行的函式名。
jQuery - noConflict(無抵觸) 方法
如何在頁面上同時使用 jQuery 和其他框架?
jQuery 和其他 JavaScript 框架:
正如您已經瞭解到的,jQuery 使用 $ 符號作為 jQuery 的簡寫。
noConflict() 方法,會釋放對 $ 識別符號的控制,這樣其他指令碼就可以使用它了,您也可以建立自己的簡寫。noConflict() 可返回對 jQuery 的引用,您可以把它存入變數,以供稍後使用。
如果你的 jQuery 程式碼塊使用 $ 簡寫,並且您不願意改變這個快捷方式,那麼您可以把 $ 符號作為變數傳遞給 ready 方法。這樣就可以在函式內使用 $ 符號了 - 而在函式外,依舊不得不使用 “jQuery”。
JSONP(跨域) 教程
Jsonp(JSON with Padding) 是 json 的一種"使用模式",可以讓網頁從別的域名(網站)那獲取資料,即跨域讀取資料。
為什麼我們從不同的域(網站)訪問資料需要一個特殊的技術(JSONP )呢?這是因為同源策略。
同源策略,它是由Netscape提出的一個著名的安全策略,現在所有支援JavaScript 的瀏覽器都會使用這個策略。