javaSript是一門(mén)編程語(yǔ)言，jQuery是javaSript中的一個(gè)庫(kù)，jquery是JavaScript中的一個(gè)子集。通過(guò)使用jQuery框架中的一些接口，我們可以更方便的實(shí)現(xiàn)一些網(wǎng)頁(yè)操作。比起直接使用原生接口，jQuery框架優(yōu)點(diǎn)多多。
原生js代碼繁瑣，代碼量大，實(shí)現(xiàn)動(dòng)畫(huà)復(fù)雜。
window.onload()函數(shù)只能在JavaScript中使用一次，但是$(document).ready()可以出現(xiàn)多次。（這兩個(gè)函數(shù)都是用來(lái)表示等頁(yè)面加載完成后，使用JavaScript腳本命令） $(document).ready()可以簡(jiǎn)化寫(xiě)為$(function(){}) $(document).ready()在DOM樹(shù)構(gòu)建完成后就可以執(zhí)行 文檔加載步驟如下：
1. 解析HTML結(jié)構(gòu)
2. 加載外部腳本和樣式表文件
3. 解析并執(zhí)行腳本代碼
4. DOM樹(shù)構(gòu)建完成
5. 加載圖片等外部文件
6. 頁(yè)面加載完成
使用window.onload或者是$(document).ready()可以使我們的代碼放在html任意位置都會(huì)等待頁(yè)面加載完成后再被調(diào)用。如果不使用該函數(shù)，代碼塊正好放在head標(biāo)簽中，那么頁(yè)面還沒(méi)有加載完，就會(huì)調(diào)用js腳本。
我們從jquery官網(wǎng)下載好jquery文件，然后通過(guò)外部樣式引入這個(gè)庫(kù)文件就可以在js腳本中使用。
示例：<script src="jquery-3.3.1.js"></script>
jquery選擇器的語(yǔ)法和css選擇器語(yǔ)法一樣
| 類型 | 示例 | 作用 |
|---|---|---|
| id選擇器 | $('#wrapper') | 選擇指定id的標(biāo)簽 |
| 類選擇器 | $('.box') | 選擇class的標(biāo)簽 |
| 標(biāo)簽選擇器 | $('ul') | 選擇指定的標(biāo)簽 |
| 通配符選擇器 | $('*') | 選擇所有標(biāo)簽 |
| 類型 | 示例 | 作用 |
|---|---|---|
| 后代選擇器 | $('div p') | 選擇div下所有p |
| 子代選擇器 | $('div>p') | 選擇div的兒子中的p |
| 毗鄰選擇器 | $('div+p') | 選擇div同級(jí)后面緊貼著的p |
| 兄弟選擇器 | $('div~p') | 選擇div同級(jí)后面所有的p |
| 類型 | 示例 | 作用 |
|---|---|---|
:first | $('li:first') | 獲取第一個(gè)li標(biāo)簽 |
:last | $('li:last') | 獲取最后一個(gè)li標(biāo)簽 |
:odd | $('li:odd') | 獲取索引為奇數(shù)的li標(biāo)簽 |
even | $('li:even') | 獲取索引為偶數(shù)的li標(biāo)簽 |
eq(index) | $('li:eq(1)) | 獲取索引為index的li標(biāo)簽 |
gt(index) | $('li:gt(1)) | 獲取索引大于index的li標(biāo)簽 |
lt(index) | $('li:lt(1)) | 獲取索引小于index的li標(biāo)簽 |
| 類型 | 示例 | 作用 |
|---|---|---|
| 標(biāo)簽[屬性名] | $('p[class]') | 獲取所有含該屬性的元素 |
| 標(biāo)簽[屬性名=值] | $('p[class=what]') | 獲取特定屬性是某個(gè)特定值的元素 |
| 標(biāo)簽[屬性名^=值] | $('p[class^=what]') | 獲取特定屬性是以某個(gè)特定值開(kāi)頭 |
| 標(biāo)簽[屬性名!=值] | $('p[class!=what]') | 獲取特定屬性不是某個(gè)特定值、或者不包含該屬性的元素 |
| 標(biāo)簽[屬性名$=值] | $('p[class$=name]') | 獲取特定屬性以特定值結(jié)尾的元素 |
| 標(biāo)簽[屬性名*=值] | $('p[class *='name']') | 獲取特定屬性中包含特定值的元素 |
| 類型 | 示例 | 作用 |
|---|---|---|
| .eq(index) | $('li').eq(1) | 獲取索引為1的li元素 |
| .first() | $('li').first() | 獲取第一個(gè)li元素 |
| .last() | $('li').last() | 獲取最后一個(gè)li元素 |
| .parent() | $('span').parent('.p1') | 選擇父親元素 |
| .siblings() | $('.list').sibling('li') | 查找所有兄弟元素 |
| .find() | $('div').find('button') | 查找所有后代元素 |
| .hasClass() | $('div').hasClass('button') | 是否含有某一標(biāo)簽,返回布爾值(true/false) |
| .children() | $('div').children('button') | 獲取匹配元素的子元素集合 |
| .prev() | $('div').prev('button') | 獲取匹配元素同級(jí)的前一個(gè)元素 |
| .prevAll() | $('button').prevAll('div') | 查找當(dāng)前元素之前的所有同輩元素 |
直接使用$(DOM對(duì)象)
示例:
var oDiv = document.getElementsByTag('div');$(oDiv) //即轉(zhuǎn)換成jQuery對(duì)象示例: $('div')[0]或者$('div').get(0)即可將jquery對(duì)象轉(zhuǎn)換為DOM對(duì)象
| 函數(shù)名 | 作用 |
|---|---|
| show(speed,callback) | 顯示標(biāo)簽(向下,向右增大) |
| hide(speed,callback) | 隱藏標(biāo)簽(向上,向左減小) |
| toggle(speed,callback) | 顯示隱藏開(kāi)關(guān)，如果標(biāo)簽可見(jiàn),則隱藏標(biāo)簽；反之標(biāo)簽不可見(jiàn),則顯示標(biāo)簽 |
注意：speed參數(shù)是控制標(biāo)簽顯示/隱藏的速度，可選slow,normal,fast或者直接輸入以毫秒為單位的數(shù)字；callback是回調(diào)函數(shù)，執(zhí)行完動(dòng)畫(huà)，調(diào)用的函數(shù)。toggle只能控制標(biāo)簽的顯隱,不能使用回調(diào)函數(shù)。
| 函數(shù)名 | 作用 |
|---|---|
| slideDown(speed,callback) | 顯示標(biāo)簽(向下增大) |
| slideUp(speed,callback) | 隱藏標(biāo)簽(向上減小) |
| slideToggle(speed,callback) | 顯示隱藏開(kāi)關(guān)，如果標(biāo)簽可見(jiàn),則隱藏標(biāo)簽；反之標(biāo)簽不可見(jiàn),則顯示標(biāo)簽 |
| 函數(shù)名 | 作用 |
|---|---|
| fadeIn(speed,callback) | 顯示標(biāo)簽(淡入) |
| fadeOut(speed,callback) | 隱藏標(biāo)簽(淡出) |
| fadeTo(speed,opacity,callback) | 調(diào)整到指定不透明度 |
| fadeToggle(speed,callback) | 開(kāi)關(guān)控制淡入淡出 |
首先,三組都是通過(guò)控件的display屬性來(lái)達(dá)到控制顯隱的效果。show,slide,這兩組都是通過(guò)控制標(biāo)簽的width和height來(lái)達(dá)到動(dòng)畫(huà)效果，fadeIn通過(guò)控制opacity不透明度來(lái)達(dá)到動(dòng)畫(huà)的效果。
| 函數(shù)名 | 作用 |
|---|---|
| click(function) | 添加標(biāo)簽單擊事件 |
| hove(function1,function2) | 添加鼠標(biāo)懸浮標(biāo)簽事件，function1代表鼠標(biāo)懸浮執(zhí)行時(shí)間，function2代表鼠標(biāo)離開(kāi)標(biāo)簽事件。等同于mouseenter和mouseleave合集 |
| mouseover(function) | 鼠標(biāo)移上去時(shí)候 |
| mouseout(function) | 鼠標(biāo)移出時(shí) |
| mouseenter(function) | 鼠標(biāo)移入時(shí) |
| mouseleave(function) | 鼠標(biāo)移除時(shí) |
用于創(chuàng)建自定義動(dòng)畫(huà)函數(shù)
示例:$('#he').animate({left:'300px'})
注意：params:動(dòng)畫(huà)終值屬性集合(用大括號(hào)括起來(lái)),speed動(dòng)畫(huà)速度，callback回調(diào)函數(shù)。
停止在指定元素上正在運(yùn)行的動(dòng)畫(huà)
示例:$('#he').stop();
注意:clearQueue為true清空隊(duì)列，立即結(jié)束動(dòng)畫(huà);
gotoEnd讓當(dāng)前正在執(zhí)行的動(dòng)畫(huà)立即完成，并且重設(shè)show和hide的原始樣式，調(diào)用回調(diào)函數(shù)等
用來(lái)做延遲操作,傳入毫秒數(shù)
示例:$('#he').animate({left:'800px'},2000).delay(1000).animate({top:'300px'});
注意:這些函數(shù)都可以通過(guò)點(diǎn).連接起來(lái)，按順序調(diào)用，這種調(diào)用方式稱之為鏈?zhǔn)秸{(diào)用
jQuery屬性操作模塊分為四部分:html屬性操作、DOM屬性操作、類樣式操作、值屬性操作。
可以獲取或修改html標(biāo)簽屬性
獲取值
傳入一個(gè)需要獲取的屬性參數(shù)
示例:$('div').attr('id')
設(shè)置值
傳入兩個(gè)參數(shù)設(shè)置一個(gè)值，或者設(shè)置多個(gè)值將多個(gè)鍵值對(duì)由大括號(hào)括起來(lái)當(dāng)一個(gè)參數(shù)傳入
示例一:$('#box').attr('class','wrapper');
示例二：$('#box').attr({'class':'123','name':'aaa'});
注意：在示例二中，大括號(hào)括起來(lái)的鍵值對(duì)，鍵可以不用引號(hào)引起來(lái)，值必須有引號(hào)引起來(lái)
刪除匹配元素一個(gè)指定的屬性
示例:$('p').removeAttr('id');
可以獲取或修改DOM屬性，用法等同于attr()
獲取值
示例:$('p').prop('name');
設(shè)置值
示例一:$('p').prop('name',2);
示例二:$('p').prop({'name':2})
示例:$('p').removeProp('name')
為每個(gè)元素添加指定的類名,若要添加多個(gè)類名用空格隔開(kāi)
示例一:$('#he').addClass('wrapper');
示例二:$('#he').addClass('wrapper1 box2')
從所匹配的元素中刪除全部或指定的類
示例一:$('#he').removeClass('wrapper1') 刪除wrapper1
示例二:$('#he').removeClass(); 刪除全部類
開(kāi)關(guān),若該標(biāo)簽有這個(gè)類就刪除，沒(méi)有則添加這個(gè)類
示例一:$('#he').toggleClass('changeColor');
使用attr()設(shè)置類時(shí),不能追加類屬性，只會(huì)覆蓋掉原來(lái)的類屬性；使用addClass()會(huì)在不改變?cè)瓉?lái)類的基礎(chǔ)上添加一個(gè)類，刪除類同理;
獲取或設(shè)置選中標(biāo)簽的內(nèi)容,設(shè)置值時(shí)將會(huì)被解析為HTML語(yǔ)言
獲取值
示例:$('p').html()
設(shè)置值
示例:$('p').html('<a href="#">what</a> fk?')
獲取或設(shè)置元素中包括文本的內(nèi)容，設(shè)置時(shí)僅會(huì)被解析為純文本
獲取值
示例:$('p').text()
設(shè)置值
示例:$('p').text('what fk?')
在獲取值時(shí),html()會(huì)將內(nèi)容中標(biāo)簽讀出來(lái)，而text()會(huì)忽視標(biāo)簽，讀取純文本;
例如:p標(biāo)簽中文本為<span>12</span>34，html()讀出來(lái)的效果是<span>12</span>34,而text()讀出來(lái)的效果是1234
在設(shè)置值時(shí),html()會(huì)將字符串解析為html語(yǔ)言,然后顯示出來(lái),而text()僅僅將其解析為純文本顯示;
例如:同樣設(shè)置'<a href="#">what</a> fk?'這一段內(nèi)容,html()顯示出來(lái)的是帶有超鏈接的what fk,而text()顯示出來(lái)的是'<a href="#">what</a> fk?'
也就是說(shuō):值中含有標(biāo)簽時(shí)，text()不會(huì)渲染出標(biāo)簽元素,只會(huì)將標(biāo)簽代碼原封不動(dòng)的顯示出來(lái)
見(jiàn)關(guān)于input的value用法
| 函數(shù)名 | 使用方法 | 示例 | 作用 |
|---|---|---|---|
| append() | 父元素.append(子元素) | $('div').append('<a href="#">百度</a>') | 在父元素里面追加子元素標(biāo)簽 |
| appendTo() | 子元素.appendTo(父元素) | $('<a href="#">新浪</a>').appendTo($('div')) | 在父元素里面追加子元素標(biāo)簽 |
| prepend() | 父元素.prepend(子元素) | $('ul').prepend("<li>我是誰(shuí)？</li>") | 將子元素標(biāo)簽追加到父元素內(nèi)的第一個(gè)位置 |
| prependTo() | 父元素.prependTo(父元素) | $('p').prependTo($('ul')); | 將子元素標(biāo)簽追加到父元素內(nèi)的第一個(gè)位置 |
| after() | 父元素.after(子元素) | $('p').after($('ul')); | 在父元素的后面插入子元素 |
| insertAfter() | 父元素.insertAfter(父元素) | $('p').insertAfter($('ul')); | 在父元素的后面插入子元素 |
| before() | 父元素.before(子元素) | $('p').before($('ul')); | 在父元素的前面插入子元素 |
| insertBefore() | 父元素.insertBefore(父元素) | $('p').insertBefore($('ul')); | 在父元素的前面插入子元素 |
注意:
1. 他是jQuery方法,所有調(diào)用時(shí)務(wù)必保證轉(zhuǎn)換為jquery對(duì)象$()
2. 父元素是jquery對(duì)象，子元素可以使字符串,DOM對(duì)象,jquery元素
3. append()和appendTo()方法就父子元素位置不同，功能相同。
4. 如果子元素是頁(yè)面上某個(gè)標(biāo)簽,則相當(dāng)于移動(dòng)操作
clone()
克隆匹配這些DOM元素，并選中這些克隆的副本。
可以傳入一個(gè)布爾值,為true時(shí)，將該標(biāo)簽的事件也克?。J(rèn)不克?。?
示例:$('#btn3').clone(true).insertAfter($('p'));
replaceWith()
選擇器.repalceWith(內(nèi)容)
示例：$('#btn').replaceWith("<a href='#'>我是替換后的標(biāo)簽</a>>");
注意:內(nèi)容替換選擇器，內(nèi)容可以是DOM,jquery,字符串。
replaceAll()
內(nèi)容.replaceAll(選擇器)
示例:$('p').replaceAll($('ul'));
注意:這兩個(gè)函數(shù)區(qū)別只是內(nèi)容和選擇器位置不同
empty() 清空
清空被選元素的內(nèi)容
示例：$('ul').empty() 會(huì)清空ul中所有內(nèi)容（相當(dāng)于html(”)）
remove() 刪除
會(huì)刪除被選元素，事件也沒(méi)了
示例：$('ul').remove() 會(huì)刪除ul標(biāo)簽和標(biāo)簽的內(nèi)容
detach() 刪除并返回
會(huì)刪除被選元素，但是會(huì)返回刪除的元素，事件會(huì)保留
示例：var $btn = $('button').detach() 將頁(yè)面上的button全部刪除，返回給變量btn
| 函數(shù)名 | 功能 |
|---|---|
| position() | 獲取匹配元素相對(duì)于父元素的偏移位置,返回一個(gè)對(duì)象,對(duì)象中有l(wèi)eft，top兩個(gè)屬性 |
| offset() | 獲取匹配元素相對(duì)于瀏覽器左上角偏移位置,同樣有l(wèi)eft,top兩個(gè)屬性 |
| scrollTop() | 獲取元素相對(duì)于滾動(dòng)條頂部的偏移像素值 |
| scrollLeft() | 獲取元素相對(duì)于滾動(dòng)條左側(cè)的偏移像素值 |
| innerHeight() | 獲取內(nèi)部區(qū)域高度(內(nèi)容高+padding) |
| innerWidth() | 獲取內(nèi)部區(qū)域?qū)?內(nèi)容寬+padding) |
| outHeight() | 獲取外部區(qū)域高(內(nèi)容高+padding+border) |
| outWidth() | 獲取外部區(qū)域?qū)?內(nèi)容寬+padding+border) |
| width() | 獲取或設(shè)置內(nèi)容寬 |
| height() | 獲取或這是內(nèi)容高 |
當(dāng)元素滾動(dòng)時(shí),調(diào)用的方法
示例:
$(function () { $(document).scroll(function () { console.log($(document).scrollTop()); console.log($(document).scrollLeft()); });獲取瀏覽器滾動(dòng)時(shí)的top和left
在DOM中用onScroll(),在jquery中用scroll()方法監(jiān)聽(tīng)滾動(dòng)條。
HTML中與JavaScript交互是通過(guò)事件來(lái)交互的。
事件流就是從頁(yè)面中接受事件的順序
DOM2級(jí)事件流包括三個(gè)階段
1. 事件捕獲階段
2. 處于目標(biāo)階段
3. 事件冒泡階段
addEventListener()
DOM事件監(jiān)聽(tīng)器
參數(shù)一事件名，參數(shù)二function，參數(shù)三bool值（捕獲階段為true,冒泡階段為false）
document代表整個(gè)html
document.documentElement代表<html>標(biāo)簽
document.document.body代表<body>標(biāo)簽
例如一個(gè)id為btn的按鈕設(shè)置click事件，document對(duì)象首先接受到click事件，然后按照dom樹(shù)依次傳到btn。而事件冒泡過(guò)程是由具體元素接受，向上傳到document。
| 屬性 | 作用 |
|---|---|
| e.type | 獲取事件的類型 |
| e.target | 獲取事件發(fā)生的DOM對(duì)象 |
| e.pageX和e.pageY | 獲取光標(biāo)相對(duì)頁(yè)面的x的坐標(biāo)和y的坐標(biāo) |
| e.which | 獲取事件的左中右鍵，鍵盤(pán)事件獲取鍵盤(pán)按鍵 |
示例:
$("#btn").click(function (e) { console.log("type:"+e.type); console.log("target:"+ e.target); console.log("page.x:"+ e.pageX+" page.y:"+ e.pageY); console.log("which:"+ e.which);});顯示結(jié)果：
type:clicktarget:[object HTMLButtonElement]page.x:42 page.y:233which:1jquery不支持事件捕獲
一般來(lái)說(shuō)父子盒子都設(shè)置一個(gè)click事件,單擊子盒子事件,則父子兩個(gè)盒子事件一起觸發(fā)。
原因:子盒子處于click冒泡階段后,父盒子隨之也處于click冒泡階段,由內(nèi)而外,最終傳到DOM.
解決辦法:阻止事件冒泡。阻止子盒子事件冒泡，父盒子就接受不到冒泡,即只觸發(fā)子盒子事件。
示例:
$('#box #p1').click(function (e) { e.stopPropagation(); console.log('我是p標(biāo)簽');});$('#box').click(function () { console.log('我是div標(biāo)簽');})像超鏈接a標(biāo)簽，都有默認(rèn)click事件，form表單的submit有默認(rèn)submit事件。
示例:
<--標(biāo)簽內(nèi)容--><a >我是一個(gè)超鏈接</a> //jquery內(nèi)容 $('a').click(function (e) { e.preventDefault();})即便我們給a標(biāo)簽設(shè)置了鏈接，由于我們?cè)赾lick事件中設(shè)置了阻止默認(rèn)事件，導(dǎo)致a標(biāo)簽不能跳轉(zhuǎn)。
綜上，還有另一種方法既可以阻止默認(rèn)事件，也可以阻止冒泡
示例:
$('#p1 a').click(function (e) { return false;})通過(guò)return false即可
將元素和事件綁定時(shí)，有bind(),on()兩種方法
bind()
示例一:$('#box').bind('click',function(){})
綁定多個(gè)事件時(shí)，事件之間用空格隔開(kāi)
示例二:
$(".box").bind('click mouseleave', function () { alert("已經(jīng)綁定了好幾個(gè)事件")})綁定多個(gè)不同的事件時(shí)，可以使用鍵值對(duì)的方式
示例三:
$(".box").bind({'click':sayhi,'mouseout':sayhello});function sayhi(){ alert('hi');}function sayhello(){ alert('hello');}示例:
$('.box').bind('myHover', function (e) { alert('看看這就執(zhí)行了');}); $('.box').trigger('myHover');注意:
1. 自定義事件不能自動(dòng)觸發(fā)，只有使用trigger()方法時(shí)才能觸發(fā)。
2. trigger()方法第二個(gè)參數(shù)是一個(gè)參數(shù)數(shù)組,傳入?yún)?shù)后,自定義事件方法就必須要用相應(yīng)數(shù)目的形參來(lái)接受
3. 綁定事件僅對(duì)該行代碼前面的元素有效，后面新加入的元素不會(huì)觸發(fā)該綁定事件。舉一個(gè)例子，若在代碼后父盒子中添加一個(gè)子盒子，父盒子事件對(duì)子盒子無(wú)效。也就是說(shuō)動(dòng)態(tài)生成的元素不能直接添加對(duì)象里面的時(shí)間也不能發(fā)生。
on()
既然子盒子做不了，將事件交給父盒子取做。
語(yǔ)法:父標(biāo)簽.on(“事件名”,”需要綁定的選擇器”,fn回調(diào)函數(shù));
示例:
$('ul').on("click","li", function () { console.log($(this).index());});$("ul").append("<li>我是動(dòng)態(tài)創(chuàng)建的元素</li>")unbind()傳入需要移除的事件名,不傳入?yún)?shù)時(shí)，移除所有事件
示例:$("#box").unbind("mouseout");
只能移除bind()綁定的對(duì)象
例如：hover()事件是由mouseenter()和mouseleave事件合成的
hover()第一個(gè)參數(shù)移入函數(shù)，第二個(gè)移出函數(shù)
| 屬性 | 功能 |
|---|---|
| click() | 單擊事件 |
| dblclick() | 雙擊事件 |
| mousedown()/up() | 鼠標(biāo)按下/彈起觸發(fā)事件 |
| mousemove() | 鼠標(biāo)移動(dòng)事件 |
| mouseover()/out() | 鼠標(biāo)移入/移出 |
| mouseenter()/leave() | 鼠標(biāo)進(jìn)入/離開(kāi)觸發(fā)事件 |
| focus()/blur() | 鼠標(biāo)聚焦/失去焦點(diǎn)觸發(fā)事件 |
| keydown()/up | 鍵盤(pán)按下/彈起事件 |
雙擊會(huì)觸發(fā)一次雙擊事件和兩次單擊事件，所以一般不會(huì)對(duì)一個(gè)盒子既設(shè)置單擊事件又設(shè)置雙擊事件
假設(shè)子盒子設(shè)置鼠標(biāo)移入移出事件，mouseover()/mouseout()在父盒子子盒子之間都會(huì)觸發(fā)；而mouseenter()/mouseleave()僅僅在父盒子觸發(fā)。
舉一個(gè)例子：
子盒子設(shè)置mouseover()/mouseout()，那么鼠標(biāo)從父盒子移入子盒子，會(huì)觸發(fā)父盒子的置mouseover()和子盒子的mouseout()。
子盒子設(shè)置mouseenter()/mouseleave()，那么鼠標(biāo)從父盒子移入子盒子，兩個(gè)事件都不會(huì)觸發(fā)；僅僅在鼠標(biāo)移入移出父盒子會(huì)觸發(fā)這兩個(gè)事件。
通常用在鼠標(biāo)拖拽動(dòng)作上
| 屬性 | 功能 |
|---|---|
| change() | 表單元素發(fā)生改變時(shí)觸發(fā)事件 (此事件僅限于input) |
| select() | 文本元素發(fā)生改變時(shí)觸發(fā)事件（僅限于input中type=text或者textarea） |
| submit() | 表單元素發(fā)生改變時(shí)觸發(fā)事件 |
注意:
1. select()方法僅對(duì)文本元素有效，對(duì)其他元素?zé)o效。在文本被選中時(shí)觸發(fā)
2. submit()事件是form表單中submit按鈕的默認(rèn)事件,默認(rèn)提交表單。通過(guò)設(shè)置該函數(shù)，可以設(shè)置在提交前觸發(fā)的事件(當(dāng)然，也可以通過(guò)阻止默認(rèn)提交表單事件)，該函數(shù)與服務(wù)端有很大掛鉤
AJAX = 異步的javascript和XML（Asynchronous Javascript and XML），即在不重載整個(gè)網(wǎng)頁(yè)情況下，通過(guò)后臺(tái)加載數(shù)據(jù)，將其顯示在網(wǎng)頁(yè)上。
從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中。
示例：$("selector").load(url,data,callback);
注意：
selector：選擇器
url：url地址
data：鍵值對(duì)集合
callback：回調(diào)函數(shù)集合
示例:
$('#btn').click(function(){ //只傳一個(gè)url，表示在id為#new-projects的元素里加載index.html $('#new-projects').load('./index.html');})異步加載json數(shù)據(jù)，并對(duì)數(shù)據(jù)進(jìn)行解析，顯示到頁(yè)面上
語(yǔ)法:$.getJSON(url,[data],[callback])
$.get() 方法請(qǐng)求從服務(wù)器上請(qǐng)求數(shù)據(jù)
語(yǔ)法:$.get(URL,callback)
post()方法多用于以POST方式向服務(wù)器發(fā)送數(shù)據(jù)，服務(wù)器接收到數(shù)據(jù)之后，進(jìn)行處理，并將處理結(jié)果返回頁(yè)面
語(yǔ)法：$.post(URL,data,callback);
$.ajax();
具體參數(shù):
1. url ： 要求為String類型的參數(shù)，（默認(rèn)為當(dāng)前頁(yè)地址）發(fā)送請(qǐng)求的地址。
2. type:默認(rèn)為get，有g(shù)et和post兩種方法
3. timeout:超時(shí)時(shí)間
4. async:默認(rèn)true異步，有同步異步兩種方法
5. cache:默認(rèn)true，是否從瀏覽器加載緩存
6. data:要求為Object或String類型的參數(shù)，發(fā)送到服務(wù)器的數(shù)據(jù)。data為需要發(fā)送的值，以鍵值對(duì)形式。
7. dataType:要求為string類型的參數(shù)，預(yù)期服務(wù)器返回的數(shù)據(jù)類型。作為回調(diào)函數(shù)的參數(shù)可用類型：xml，html，script，json，jsonp，text。相當(dāng)于，想要什么類型數(shù)據(jù)就指定什么類型。發(fā)過(guò)來(lái)就轉(zhuǎn)換成什么類型的
8. script：返回純文本JavaScript代碼。
9. beforeSend： 要求為Function類型的參數(shù)，發(fā)送請(qǐng)求前調(diào)用函數(shù)。
10. success:data為成功時(shí)返回的對(duì)象，F(xiàn)unction類型的參數(shù)。
11. error:data為失敗時(shí)返回的對(duì)象，F(xiàn)unction類型的參數(shù)。
聯(lián)系客服
