前言
暑假的時(shí)候雖然說(shuō)學(xué)習(xí)過(guò)一遍jQuery了佛南，但只是眼過(guò)一遍，熟悉了基本的使用并沒(méi)有做記錄表牢，趁著學(xué)校這兩天學(xué)校運(yùn)動(dòng)會(huì)放假隙咸，決定整理一篇jQuery的筆記沐悦，方便以后復(fù)習(xí),以上均通過(guò)w3school學(xué)習(xí)。
課程章結(jié)
jQuery介紹
關(guān)鍵詞：簡(jiǎn)介五督、安裝藏否、語(yǔ)法、選擇器充包、事件副签、名稱沖突
- 簡(jiǎn)介：jQuery是一個(gè)JavaScript函數(shù)庫(kù),它的宗旨是“write less遥椿，do more”,也就是一個(gè)輕量級(jí)的"寫(xiě)的少，做的多"的JavaScript庫(kù)淆储。
- 安裝：
- 下載jQuery到本地冠场，從本地載入
- 引用CDN中加載jQuery
- 使用以下代碼可以加載CDN，使用引用CDN的方式有一個(gè)很大的優(yōu)勢(shì)就是許多用戶在訪問(wèn)其他站點(diǎn)的時(shí)候已經(jīng)加載過(guò)jQuery本砰，結(jié)果就是當(dāng)這些人訪問(wèn)站點(diǎn)時(shí)碴裙，會(huì)直接從緩存中加載jQuery，從而減少加載時(shí)間点额。而且舔株，大多數(shù)CDN都可以確保用戶在請(qǐng)求文件時(shí)，從最近的服務(wù)器上返回響應(yīng)还棱，從而提高加載速度载慈；
<head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> </head> - 語(yǔ)法：
- jQuery的基本語(yǔ)法是
$(selector).action()- 美元符號(hào)定義 jQuery
- 選擇符（selector）"查詢"和"查找" HTML 元素
- action()函數(shù) 執(zhí)行對(duì)元素的操作
- 為了防止文檔在完全加載（就緒）之前運(yùn)行 jQuery 代碼，
$(document).ready(function(){});將jQuery函數(shù)寫(xiě)在這個(gè)函數(shù)中
- jQuery的基本語(yǔ)法是
- 選擇器
- 常見(jiàn)的選擇器有以下幾種：
- 元素選擇器：
$('p') - id選擇器：
$('#id') - .class選擇器：
$(".class") -
$('p.test')表示選擇類別名為test的p標(biāo)簽 -
$("a[target='_blank']")：表示選取所有target屬性值為_blank的a標(biāo)簽 - 更多可參考jquery選擇器手冊(cè)
- 元素選擇器：
- 常見(jiàn)的選擇器有以下幾種：
- 事件
- jQuery事件處理方法是jQuery的核心函數(shù)珍手，事件處理程序指的是當(dāng)HTML中發(fā)生某些事件所調(diào)用的方法娃肿，也叫作“觸發(fā)”；（通常把jQuery代碼放在<head>部分的事件處理方法中珠十；詳細(xì)的事件參考jQuery事件手冊(cè)
- 可以分為：鼠標(biāo)事件（click），鍵盤(pán)事件(keypress)凭豪，表單事件(submit)焙蹭，文檔/窗口事件(load、scroll)等等
- 實(shí)例:
-
$(this).hide()- 隱藏當(dāng)前元素 -
$("p").hide()- 隱藏所有段落 -
$("p .test").hide()- 隱藏所有 class="test" 的段落 -
$("#test").hide()- 隱藏所有 id="test" 的元素 -
$('p').click(function(){});-點(diǎn)擊p元素執(zhí)行函數(shù)
-
- 名稱沖突
- 由于其他庫(kù)也可能使用$符號(hào)嫂伞，那么就會(huì)引起沖突孔厉，jQuery中使用noConflict()方法來(lái)解決這個(gè)問(wèn)題
- 注意事項(xiàng)
- 把所有的jQuery代碼置于事件處理函數(shù)中；
- 把所有事件處理函數(shù)置于文檔就緒事件處理器中帖努；
- 把jQuery代碼置于單獨(dú)的.js文件中;
- 如果存在名稱沖突撰豺，則重命名jQuery庫(kù)；
示例
<iframe height='265' scrolling='no' title='jQuery1' src='//codepen.io/longtean/embed/vmGQyj/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a >jQuery1</a> by LongTean (<a >@longtean</a>) on <a >CodePen</a>.
</iframe>
jquery效果
關(guān)鍵詞：隱藏顯示拼余、淡入淡出污桦、滑動(dòng)、動(dòng)畫(huà)匙监、stop()凡橱、callback方法、chaining
- 顯示隱藏
- show(),hide(),比如隱藏的使用語(yǔ)法為：
$('selector').hide(speed,callback),其中speed為速度亭姥，callback為完成隱藏動(dòng)作后執(zhí)行的函數(shù)稼钩，另外，toggle()可以顯示和隱藏
- show(),hide(),比如隱藏的使用語(yǔ)法為：
- 淡入淡出
- 有fadeIn(),fadeToggle(),fadeTo(),使用語(yǔ)法同上达罗，fadeTo(speed,opacity,callback)可以改變透明度坝撑。
- 滑動(dòng)
- slideDown(),slideToggle(speed，callback)
- 動(dòng)畫(huà)
- animate()方法,使用語(yǔ)法為
$(selector).animate({params},speed,callback);必需的 params 參數(shù)定義形成動(dòng)畫(huà)的 CSS 屬性,可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"巡李、"fast" 或毫秒,可選的 callback 參數(shù)是動(dòng)畫(huà)完成后所執(zhí)行的函數(shù)名稱抚笔。- 例:點(diǎn)擊按鈕，將div元素向右移動(dòng)250px的同時(shí)击儡，將透明度變?yōu)?.5且高度變?yōu)?50px寬邊為150px
$("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); });- 需要注意的是css屬性名必須像這么寫(xiě)：marginLeft塔沃。。阳谍。駱駝命名法吧
- animate()方法,使用語(yǔ)法為
- stop()
- 用來(lái)在動(dòng)畫(huà)或效果完成前對(duì)他們停止蛀柴，使用語(yǔ)法
$(selector).stop(stopAll,goToEnd);,其中可選參數(shù)stopAll規(guī)定是否應(yīng)該清除動(dòng)畫(huà)隊(duì)列，默認(rèn)是false矫夯，即僅停止活動(dòng)的動(dòng)畫(huà)鸽疾，但允許隊(duì)列中的其他動(dòng)畫(huà)執(zhí)行；可選參數(shù)goToEnd表示是否立即完成當(dāng)前動(dòng)畫(huà)训貌，默認(rèn)為false制肮；
- 用來(lái)在動(dòng)畫(huà)或效果完成前對(duì)他們停止蛀柴，使用語(yǔ)法
- callback()
- 此函數(shù)在當(dāng)前動(dòng)畫(huà)100%完成之后執(zhí)行；因?yàn)镴S語(yǔ)句是逐一執(zhí)行的递沪，為了避免因?yàn)閯?dòng)畫(huà)還沒(méi)執(zhí)行完成而造成動(dòng)畫(huà)與之后的語(yǔ)句之間可能產(chǎn)生的錯(cuò)誤或者頁(yè)面沖突豺鼻，建議以參數(shù)的形式添加Callback函數(shù)；
- chaining
- Chaining允許我們?cè)谝粭l語(yǔ)句中添加多個(gè)方法款慨，例如
$('p').css('color', 'red').slideUp(2000).slideDown(2000);儒飒，這是p元素就會(huì)先改變css樣式，然后收縮檩奠，最后張開(kāi)桩了；
示例
<iframe height='265' scrolling='no' title='jQuery2' src='//codepen.io/longtean/embed/BRKbQv/?height=265&theme-id=0&default-tab=js,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a >jQuery2</a> by LongTean (<a >@longtean</a>) on <a >CodePen</a>.
</iframe>
- Chaining允許我們?cè)谝粭l語(yǔ)句中添加多個(gè)方法款慨，例如
jquery HTML
關(guān)鍵詞：捕獲、設(shè)置埠戳、添加井誉、刪除、css類整胃、css()颗圣、尺寸
- 捕獲
- 操作DOM的常用方法
-
text()- 設(shè)置或返回所選元素的文本內(nèi)容 -
html()- 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記） -
val()- 設(shè)置或返回表單字段的值
-
- 獲取屬性的方法
-
attr()- 用于獲取屬性值
-
- 操作DOM的常用方法
- 設(shè)置
- 設(shè)置內(nèi)容也是用上一節(jié)提到的三個(gè)函數(shù)，不過(guò)需要在括號(hào)中加入需要設(shè)置的內(nèi)容屁使；
- 同時(shí)需要知道欠啤，這三個(gè)jQuery方法都擁有回調(diào)函數(shù)，函數(shù)有兩個(gè)參數(shù)屋灌，分別為被選元素列表中當(dāng)前元素的下標(biāo)以及原始值洁段，text()、html() 以及 val() 的回調(diào)函數(shù)共郭；
- 利用attr()來(lái)設(shè)置屬性時(shí)可以同時(shí)設(shè)置多個(gè)屬性祠丝，屬性之間利用逗號(hào)隔開(kāi)疾呻，此方法同樣具有回調(diào)函數(shù)；
- 添加元素
- 利用jQuery可以很容易的添加新元素写半，具體有如下四個(gè)方法
-
append()- 在被選元素的結(jié)尾插入內(nèi)容或元素 -
prepend()-在被選元素的開(kāi)頭插入內(nèi)容或元素岸蜗； -
after()-在被選元素之后插入內(nèi)容或元素； -
before()-在被選元素之前插入內(nèi)容或元素叠蝇； -
append()和prepend()方法能夠通過(guò)參數(shù)接收無(wú)限數(shù)量的新元素璃岳。可以通過(guò) jQuery 來(lái)生成文本/HTML悔捶，或者通過(guò) JavaScript 代碼和 DOM 元素铃慷。
注意：append()在一個(gè)元素的尾部添加內(nèi)容，不添加新節(jié)點(diǎn)蜕该，而after是在被選元素之后添加內(nèi)容犁柜，添加了新節(jié)點(diǎn)。
-
- 利用jQuery可以很容易的添加新元素写半，具體有如下四個(gè)方法
- 刪除
- 刪除元素和添加元素類似堂淡，有以下幾個(gè)方法
-
remove()-刪除被選元素及其子元素馋缅，括號(hào)中可添加選擇器，用于刪除符合選擇器條件的元素及其子元素绢淀； -
empty()-從被選元素中刪除子元素萤悴；
-
- 刪除元素和添加元素類似堂淡，有以下幾個(gè)方法
- css類
- 利用jQuery可以很容易的操作css元素，主要方法有
-
addClass()-向被選元素添加一個(gè)或多個(gè)類（添加多個(gè)類的時(shí)候類名稱之間用空格隔開(kāi)）皆的； -
removeClass()-從被選元素刪除一個(gè)或多個(gè)類覆履； -
toggle()-對(duì)被選元素添加/刪除類的切換操作；
-
- 利用jQuery可以很容易的操作css元素，主要方法有
- css()
- 設(shè)置或返回被選元素的一個(gè)或多個(gè)樣式屬性祭务，語(yǔ)法為
css('propertyName')如果有多個(gè)滿足被選條件，則只返回第一個(gè)元素的屬性怪嫌； - 如需設(shè)置CSS屬性义锥，則需使用語(yǔ)法為
css('propertyName', 'value')，此時(shí)將所有滿足條件的元素的樣式都設(shè)置成目標(biāo)樣式岩灭；
- 設(shè)置或返回被選元素的一個(gè)或多個(gè)樣式屬性祭务，語(yǔ)法為
- 尺寸
- 通過(guò)jQuery很容易處理元素和瀏覽器窗口的尺寸拌倍，主要的方法如下：
-
width()-設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框和外邊距）噪径，如果對(duì)象為document或者window柱恤，則表示返回HTML文檔或者瀏覽器窗口的寬度和高度；如果在括號(hào)中加入數(shù)字找爱，則表示將對(duì)應(yīng)的尺寸設(shè)置為對(duì)應(yīng)的值梗顺； -
height()-設(shè)置或返回元素的高度（不包括內(nèi)邊距、邊框和外邊距）车摄； -
innerWidth()-返回元素的寬度（包括內(nèi)邊距）寺谤； -
innerHeight()-返回元素的高度（包括內(nèi)邊距）仑鸥； -
outerWidth()-返回元素的寬度（包括內(nèi)邊距和邊框），如果括號(hào)中增加參數(shù)‘true’則表示返回包括內(nèi)外邊距及邊框的寬度变屁； -
outerHeight()-返回元素的高度（包括內(nèi)邊距和邊框）眼俊，如果括號(hào)中增加參數(shù)‘true’則表示返回包括內(nèi)外邊距及邊框的高度；
-
- 通過(guò)jQuery很容易處理元素和瀏覽器窗口的尺寸拌倍，主要的方法如下：
示例
<iframe height='265' scrolling='no' title='jQuery3' src='//codepen.io/longtean/embed/wdWgBE/?height=265&theme-id=0&default-tab=js,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a >jQuery3</a> by LongTean (<a >@longtean</a>) on <a >CodePen</a>.
</iframe>
jQuery遍歷
關(guān)鍵詞：遍歷粟关、祖先疮胖、后代、同胞闷板、過(guò)濾
- 遍歷
- 遍歷用于根據(jù)其相對(duì)于其他元素的關(guān)系來(lái)查找或者選取HTML元素澎灸；
- DOM遍歷：遍歷方法中最大的種類是樹(shù)遍歷
tree-traversal
- 祖先
- 祖先元素包括父元素、祖父元素等等蛔垢，常用的方法為：
-
parent()-返回被選元素的直接父元素击孩； -
parents()-返回被選元素的所有祖先元素，其中甚至包括文檔的根元素鹏漆； -
parentsUntil()-返回介于兩個(gè)給定元素之間的祖先元素巩梢；
-
- 祖先元素包括父元素、祖父元素等等蛔垢，常用的方法為：
- 后代
- 與祖先相對(duì)的，后代指的是子艺玲、孫括蝠、曾孫等，常用的方法為：
-
children()-返回被選元素的直接子元素饭聚； -
find()-返回被選元素的被find的元素忌警，包括所有后代；
-
- 與祖先相對(duì)的，后代指的是子艺玲、孫括蝠、曾孫等，常用的方法為：
- 同胞
- 同胞擁有相同的父元素秒梳，常用的方法為：
-
siblings()：返回所有被選元素的同胞元素法绵； -
next()：返回被選元素的下一個(gè)同胞元素； -
nextAll()：返回被選元素的所有跟隨的同胞元素酪碘； -
nextUntil()：返回介于兩個(gè)給定參數(shù)之間的所有跟隨的同胞元素朋譬； -
prev()：返回被選元素的上一個(gè)同胞元素； -
prevAll():返回被選元素的所有前面的同胞元素兴垦； -
prevUntil()：返回介于兩個(gè)給定參數(shù)之間的所有的同胞元素徙赢；
-
- 同胞擁有相同的父元素秒梳，常用的方法為：
- 過(guò)濾
- 縮小搜索元素的范圍，常用的方位有以下幾種：
-
first()：返回被選元素的首個(gè)子元素探越； -
last()：返回被選元素的最后一個(gè)元素狡赐； -
eq()：返回被選元素中帶有指定索引號(hào)的元素； -
filter()：返回符合匹配標(biāo)準(zhǔn)的元素集合钦幔； -
not()：返回不匹配標(biāo)準(zhǔn)的所有元素集合枕屉；
-
- 縮小搜索元素的范圍，常用的方位有以下幾種：
jquery Ajax
AJAX 是與服務(wù)器交換數(shù)據(jù)的技術(shù)，它在不重載全部頁(yè)面的情況下鲤氢，實(shí)現(xiàn)了對(duì)部分網(wǎng)頁(yè)的更新搀庶。AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）拐纱。
簡(jiǎn)短地說(shuō)，在不重載整個(gè)網(wǎng)頁(yè)的情況下哥倔，AJAX 通過(guò)后臺(tái)加載數(shù)據(jù)秸架，并在網(wǎng)頁(yè)上進(jìn)行顯示。這一章我準(zhǔn)備寫(xiě)一篇專門(mén)的博客來(lái)介紹咆蒿，附上教程ajax教程.
總結(jié)
寫(xiě)了這么多东抹，不僅是一種分享，希望更多地人看到沃测，能對(duì)他們有所幫助缭黔，也是自己的一種總結(jié)，寫(xiě)在筆記本上的筆記會(huì)只屬于自己蒂破，而寫(xiě)在這里的筆記馏谨，屬于我們。
?共勉
