柚子快報(bào)邀請(qǐng)碼778899分享：ajax jQuery學(xué)習(xí)

http://yzkb.51969.com/

jQuery的介紹

學(xué)習(xí)目標(biāo)

能夠知道jQuery的作用及優(yōu)點(diǎn)

1. jQuery的定義

jQuery是對(duì)JavaScript的封裝，它是免費(fèi)、開(kāi)源的JavaScript函數(shù)庫(kù)，jQuery 極大地簡(jiǎn)化了 JavaScript 編程。

2. jQuery的作用

jQuery和JavaScript它們的作用一樣，都是負(fù)責(zé)網(wǎng)頁(yè)行為操作，增加網(wǎng)頁(yè)和用戶(hù)的交互效果的，只不過(guò)jQuery簡(jiǎn)化了JavaScript編程，jQuery實(shí)現(xiàn)交互效果更簡(jiǎn)單。

3. jQuery的優(yōu)點(diǎn)

jQuery兼容了現(xiàn)在主流的瀏覽器，增加了程序員的開(kāi)發(fā)效率。jQuery簡(jiǎn)化了 JavaScript 編程，代碼編寫(xiě)更加簡(jiǎn)單。

4. 小結(jié)

jQuery是一個(gè)免費(fèi)、開(kāi)源的JavaScript函數(shù)庫(kù)jQuery的作用和JavaScript一樣，都是負(fù)責(zé)網(wǎng)頁(yè)和用戶(hù)的交互效果。jQuery的優(yōu)點(diǎn)就是兼容主流瀏覽器，代碼編寫(xiě)更加簡(jiǎn)單。

jQuery的用法

學(xué)習(xí)目標(biāo)

能夠知道jQuery的引入方式能夠說(shuō)出兩種jQuery入口函數(shù)的寫(xiě)法

1. jQuery的引入

2. jQuery的入口函數(shù)

我們知道使用js獲取標(biāo)簽元素，需要頁(yè)面加載完成以后再獲取，我們通過(guò)給onload事件屬性設(shè)置了一個(gè)函數(shù)來(lái)獲取標(biāo)簽元素，而jquery提供了ready函數(shù)來(lái)解決這個(gè)問(wèn)題，保證獲取標(biāo)簽元素沒(méi)有問(wèn)題，它的速度比原生的 window.onload 更快。

入口函數(shù)示例代碼:

入口函數(shù)的簡(jiǎn)寫(xiě)示例代碼:

3. 小結(jié)

引入jQuery獲取標(biāo)簽元素需要在入口函數(shù)來(lái)完成，它的速度比原生的 window.onload 更快 jQuery入口函數(shù)有兩種寫(xiě)法: // 完整寫(xiě)法

$(document).ready(function(){

...

});

// 簡(jiǎn)化寫(xiě)法

$(function(){

...

});

jQuery選擇器

學(xué)習(xí)目標(biāo)

能夠使用jQuery選擇器獲取標(biāo)簽元素

1. jQuery選擇器的介紹

jquery選擇器就是快速選擇標(biāo)簽元素，獲取標(biāo)簽的，選擇規(guī)則和css樣式一樣。

2. jQuery選擇器的種類(lèi)

標(biāo)簽選擇器類(lèi)選擇器id選擇器層級(jí)選擇器屬性選擇器

示例代碼:

$('#myId') //選擇id為myId的標(biāo)簽

$('.myClass') // 選擇class為myClass的標(biāo)簽

$('li') //選擇所有的li標(biāo)簽

$('#ul1 li span') //選擇id為ul1標(biāo)簽下的所有l(wèi)i標(biāo)簽下的span標(biāo)簽

$('input[name=first]') // 選擇name屬性等于first的input標(biāo)簽

說(shuō)明: 可以使用length屬性來(lái)判斷標(biāo)簽是否選擇成功, 如果length大于0表示選擇成功，否則選擇失敗。

$(function(){

result = $("div").length;

alert(result);

});

3. 小結(jié)

jQuery選擇器就是選擇標(biāo)簽的標(biāo)簽選擇器是根據(jù)標(biāo)簽名來(lái)選擇標(biāo)簽類(lèi)選擇器是根據(jù)類(lèi)名來(lái)選擇標(biāo)簽id選擇器是根據(jù)id來(lái)選擇標(biāo)簽層級(jí)選擇器是根據(jù)層級(jí)關(guān)系來(lái)選擇標(biāo)簽屬性選擇器是根據(jù)屬性名來(lái)選擇標(biāo)簽

?

選擇集過(guò)濾

學(xué)習(xí)目標(biāo)

能夠使用選擇器進(jìn)行標(biāo)簽過(guò)濾

1. 選擇集過(guò)濾的介紹

選擇集過(guò)濾就是在選擇標(biāo)簽的集合里面過(guò)濾自己需要的標(biāo)簽

2. 選擇集過(guò)濾的操作

has(選擇器名稱(chēng))方法，表示選取包含指定選擇器的標(biāo)簽eq(索引)方法，表示選取指定索引的標(biāo)簽

has方法的示例代碼:

eq方法的示例代碼:

3. 小結(jié)

選擇集過(guò)濾可以使用has方法和eq方法來(lái)完成jquery給標(biāo)簽設(shè)置樣式使用css方法

?

選擇集轉(zhuǎn)移

學(xué)習(xí)目標(biāo)

能夠說(shuō)出2種選擇集轉(zhuǎn)移方法

1. 選擇集轉(zhuǎn)移介紹

選擇集轉(zhuǎn)移就是以選擇的標(biāo)簽為參照，然后獲取轉(zhuǎn)移后的標(biāo)簽

2. 選擇集轉(zhuǎn)移操作

$('#box').prev(); 表示選擇id是box元素的上一個(gè)的同級(jí)元素$('#box').prevAll(); 表示選擇id是box元素的上面所有的同級(jí)元素$('#box').next(); 表示選擇id是box元素的下一個(gè)的同級(jí)元素$('#box').nextAll(); 表示選擇id是box元素的下面所有的同級(jí)元素$('#box').parent(); 表示選擇id是box元素的父元素$('#box').children(); 表示選擇id是box元素的所有子元素$('#box').siblings(); 表示選擇id是box元素的其它同級(jí)元素$('#box').find('.myClass'); 表示選擇id是box元素的class等于myClass的元素

選擇集轉(zhuǎn)移的示例代碼:

3. 小結(jié)

prev() 表示獲取上一個(gè)同級(jí)元素prevAll() 表示獲取上面所有同級(jí)元素next() 表示獲取下一個(gè)同級(jí)元素nextAll() 表示獲取下面所有同級(jí)元素parent() 表示獲取父元素children() 表示獲取所有的子元素siblings() 表示獲取其它同級(jí)元素find("選擇器名稱(chēng)") 表示獲取指定選擇器的元素

?

獲取和設(shè)置元素內(nèi)容

學(xué)習(xí)目標(biāo)

能夠知道獲取和設(shè)置元素內(nèi)容的操作

1. html方法的使用

jquery中的html方法可以獲取和設(shè)置標(biāo)簽的html內(nèi)容

示例代碼:

說(shuō)明:

給指定標(biāo)簽追加html內(nèi)容使用append方法

2. 小結(jié)

獲取和設(shè)置元素的內(nèi)容使用: html方法給指定元素追加html內(nèi)容使用: append方法

?

獲取和設(shè)置元素屬性

學(xué)習(xí)目標(biāo)

能夠知道獲取和設(shè)置元素屬性的操作

1. prop方法的使用

之前使用css方法可以給標(biāo)簽設(shè)置樣式屬性，那么設(shè)置標(biāo)簽的其它屬性可以使用prop方法了。

示例代碼:

這是一個(gè)鏈接

說(shuō)明:?獲取value屬性和設(shè)置value屬性還可以通過(guò)val方法來(lái)完成。

2. 小結(jié)

獲取和設(shè)置元素屬性的操作可以通過(guò)prop方法來(lái)完成獲取和設(shè)置元素的value屬性可以通過(guò)val方法來(lái)完成，更加簡(jiǎn)單和方便

?

?

jQuery事件

學(xué)習(xí)目標(biāo)

能夠說(shuō)出兩個(gè)常用的jQuery事件

1. 常用事件

click() 鼠標(biāo)單擊blur() 元素失去焦點(diǎn)focus() 元素獲得焦點(diǎn)mouseover() 鼠標(biāo)進(jìn)入（進(jìn)入子元素也觸發(fā)）mouseout() 鼠標(biāo)離開(kāi)（離開(kāi)子元素也觸發(fā)）ready() DOM加載完成

示例代碼:

說(shuō)明:

this指的是當(dāng)前發(fā)生事件的對(duì)象，但是它是一個(gè)原生js對(duì)象$(this) 指的是當(dāng)前發(fā)生事件的jquery對(duì)象

2. 小結(jié)

jQuery常用事件:

click() 鼠標(biāo)單擊blur() 元素失去焦點(diǎn)focus() 元素獲得焦點(diǎn)mouseover() 鼠標(biāo)進(jìn)入（進(jìn)入子元素也觸發(fā)）mouseout() 鼠標(biāo)離開(kāi)（離開(kāi)子元素也觸發(fā)）ready() DOM加載完成

?

?

事件代理

學(xué)習(xí)目標(biāo)

能夠知道事件代理的使用方式

1. 事件代理介紹

事件代理就是利用事件冒泡的原理(事件冒泡就是事件會(huì)向它的父級(jí)一級(jí)一級(jí)傳遞),把事件加到父級(jí)上，通過(guò)判斷事件來(lái)源，執(zhí)行相應(yīng)的子元素的操作，事件代理首先可以極大減少事件綁定次數(shù)，提高性能；其次可以讓新加入的子元素也可以擁有相同的操作。

事件冒泡代碼:

說(shuō)明:

當(dāng)點(diǎn)擊子元素div，它的點(diǎn)擊事件會(huì)向它父元素傳遞，也會(huì)觸發(fā)了父元素的點(diǎn)擊事件，這就是事件冒泡。

2. 事件代理的使用

一般綁定事件的寫(xiě)法:

$(function(){

$ali = $('#list li');

$ali.click(function() {

$(this).css({background:'red'});

});

})

• 1
• 2
• 3
• 4
• 5

事件代理的寫(xiě)法

$(function(){

$list = $('#list');

// 父元素ul 來(lái)代理 子元素li的點(diǎn)擊事件

$list.delegate('li', 'click', function() {

// $(this)表示當(dāng)前點(diǎn)擊的子元素對(duì)象

$(this).css({background:'red'});

});

})

• 1
• 2
• 3
• 4
• 5

delegate方法參數(shù)說(shuō)明:

delegate(childSelector,event,function)

childSelector: 子元素的選擇器event: 事件名稱(chēng)，比如: 'click'function: 當(dāng)事件觸發(fā)執(zhí)行的函數(shù)

3. 小結(jié)

事件代理就是使用父元素來(lái)代理子元素的事件，好處是減少事件的綁定次數(shù)，提高性能。使用場(chǎng)景當(dāng)多個(gè)相同的子元素綁定同一個(gè)事件，可以使用事件代理。事件代理使用是使用delegate方法來(lái)完成

?

JavaScript對(duì)象

學(xué)習(xí)目標(biāo)

能夠知道JavaScript對(duì)象有兩種創(chuàng)建方式

1. JavaScript對(duì)象的介紹

JavaScript 中的所有事物都是對(duì)象：字符串、數(shù)值、數(shù)組、函數(shù)等都可以認(rèn)為是對(duì)象，此外，JavaScript 允許自定義對(duì)象，對(duì)象可以擁有屬性和方法。

2. JavaScript創(chuàng)建對(duì)象操作

創(chuàng)建自定義javascript對(duì)象有兩種方式:

通過(guò)頂級(jí)Object類(lèi)型來(lái)實(shí)例化一個(gè)對(duì)象通過(guò)對(duì)象字面量創(chuàng)建一個(gè)對(duì)象

Object類(lèi)創(chuàng)建對(duì)象的示例代碼:

對(duì)象字面量創(chuàng)建對(duì)象的示例代碼:

說(shuō)明:

調(diào)用屬性和方法的操作都是通過(guò)點(diǎn)語(yǔ)法的方式來(lái)完成，對(duì)象的創(chuàng)建推薦使用字面量方式，因?yàn)楦雍?jiǎn)單。

3. 小結(jié)

創(chuàng)建自定義javascript對(duì)象有兩種方式:

Object字面量

?

json

學(xué)習(xí)目標(biāo)

能夠知道json的格式

1. json的介紹

json是 JavaScript Object Notation 的首字母縮寫(xiě)，翻譯過(guò)來(lái)就是javascript對(duì)象表示法，這里說(shuō)的json就是類(lèi)似于javascript對(duì)象的字符串，它同時(shí)是一種數(shù)據(jù)格式，目前這種數(shù)據(jù)格式比較流行，逐漸替換掉了傳統(tǒng)的xml數(shù)據(jù)格式。

2. json的格式

json有兩種格式：

對(duì)象格式數(shù)組格式

對(duì)象格式:

對(duì)象格式的json數(shù)據(jù)，使用一對(duì)大括號(hào)({})，大括號(hào)里面放入key:value形式的鍵值對(duì)，多個(gè)鍵值對(duì)使用逗號(hào)分隔。

對(duì)象格式的json數(shù)據(jù):

{

"name":"tom",

"age":18

}

格式說(shuō)明:

json中的(key)屬性名稱(chēng)和字符串值需要用雙引號(hào)引起來(lái)，用單引號(hào)或者不用引號(hào)會(huì)導(dǎo)致讀取數(shù)據(jù)錯(cuò)誤。

數(shù)組格式:

數(shù)組格式的json數(shù)據(jù)，使用一對(duì)中括號(hào)([])，中括號(hào)里面的數(shù)據(jù)使用逗號(hào)分隔。

數(shù)組格式的json數(shù)據(jù):

["tom",18,"programmer"]

實(shí)際開(kāi)發(fā)的json格式比較復(fù)雜,例如:

{

"name":"jack",

"age":29,

"hobby":["reading","travel","photography"]

"school":{

"name":"Merrimack College",

"location":"North Andover, MA"

}

}

3. json數(shù)據(jù)轉(zhuǎn)換成JavaScript對(duì)象

json本質(zhì)上是字符串，如果在js中操作json數(shù)據(jù)，可以將json字符串轉(zhuǎn)化為JavaScript對(duì)象。

示例代碼:

var sJson = '{"name":"tom","age":18}';

var oPerson = JSON.parse(sJson);

// 操作屬性

alert(oPerson.name);

alert(oPerson.age);

4. 小結(jié)

json就是一個(gè)javascript對(duì)象表示法，json本質(zhì)上是一個(gè)字符串。json有兩種格式：1. 對(duì)象格式, 2. 數(shù)組格式

ajax

學(xué)習(xí)目標(biāo)

能夠知道ajax的作用

1. ajax的介紹

ajax 是 Asynchronous JavaScript and XML的簡(jiǎn)寫(xiě)，ajax一個(gè)前后臺(tái)配合的技術(shù)，它可以讓 javascript 發(fā)送異步的 http 請(qǐng)求，與后臺(tái)通信進(jìn)行數(shù)據(jù)的獲取，ajax 最大的優(yōu)點(diǎn)是實(shí)現(xiàn)局部刷新，ajax可以發(fā)送http請(qǐng)求，當(dāng)獲取到后臺(tái)數(shù)據(jù)的時(shí)候更新頁(yè)面顯示數(shù)據(jù)實(shí)現(xiàn)局部刷新，在這里大家只需要記住，當(dāng)前端頁(yè)面想和后臺(tái)服務(wù)器進(jìn)行數(shù)據(jù)交互就可以使用ajax了。

這里提示一下大家,?在html頁(yè)面使用ajax需要在web服務(wù)器環(huán)境下運(yùn)行, 一般向自己的web服務(wù)器發(fā)送ajax請(qǐng)求。

2. ajax的使用

jquery將它封裝成了一個(gè)方法$.ajax()，我們可以直接用這個(gè)方法來(lái)執(zhí)行ajax請(qǐng)求。

示例代碼:

ajax方法的參數(shù)說(shuō)明:

url 請(qǐng)求地址type 請(qǐng)求方式，默認(rèn)是'GET'，常用的還有'POST'dataType 設(shè)置返回的數(shù)據(jù)格式，常用的是'json'格式data 設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù)，沒(méi)有參數(shù)不需要設(shè)置success 設(shè)置請(qǐng)求成功后的回調(diào)函數(shù)error 設(shè)置請(qǐng)求失敗后的回調(diào)函數(shù)async 設(shè)置是否異步，默認(rèn)值是'true'，表示異步，一般不用寫(xiě)同步和異步說(shuō)明

同步是一個(gè)ajax請(qǐng)求完成另外一個(gè)才可以請(qǐng)求，需要等待上一個(gè)ajax請(qǐng)求完成，好比線(xiàn)程同步。異步是多個(gè)ajax同時(shí)請(qǐng)求，不需要等待其它ajax請(qǐng)求完成， 好比線(xiàn)程異步。

ajax的簡(jiǎn)寫(xiě)方式:

$.ajax按照請(qǐng)求方式可以簡(jiǎn)寫(xiě)成$.get或者$.post方式

ajax簡(jiǎn)寫(xiě)方式的示例代碼:

$.get和$.post方法的參數(shù)說(shuō)明:

$.get(url,data,success(data, status, xhr),dataType).error(func) $.post(url,data,success(data, status, xhr),dataType).error(func)

url 請(qǐng)求地址data 設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù)，沒(méi)有參數(shù)不需要設(shè)置success 設(shè)置請(qǐng)求成功后的回調(diào)函數(shù)

data 請(qǐng)求的結(jié)果數(shù)據(jù)status 請(qǐng)求的狀態(tài)信息, 比如: "success"xhr 底層發(fā)送http請(qǐng)求XMLHttpRequest對(duì)象dataType 設(shè)置返回的數(shù)據(jù)格式

"xml""html""text""json"error 表示錯(cuò)誤異常處理

func 錯(cuò)誤異常回調(diào)函數(shù)

3. 小結(jié)

ajax 是發(fā)送http請(qǐng)求獲取后臺(tái)服務(wù)器數(shù)據(jù)的技術(shù)ajax的簡(jiǎn)寫(xiě)方式可以使用$.get和$.post方法來(lái)完成

?

柚子快報(bào)邀請(qǐng)碼778899分享：ajax jQuery學(xué)習(xí)

http://yzkb.51969.com/

推薦文章