由于時(shí)間緊任務(wù)急撇贺,我必須馬上把前端這套東西流程走通赌莺,為了第一步能先看懂師兄們寫的項(xiàng)目代碼,我開始了jQuery的學(xué)習(xí)松嘶。艘狭。。
jQuery簡(jiǎn)單介紹
簡(jiǎn)介
jQuery是繼Prototype后的又一個(gè)優(yōu)秀的JavaScript庫翠订,是一個(gè)創(chuàng)建于2006年的開源項(xiàng)目巢音。它憑借簡(jiǎn)潔的語法、跨平臺(tái)的兼容性尽超,極大簡(jiǎn)化了開發(fā)人員遍歷dom文檔港谊、html文檔、操作dom橙弱、處理事件歧寺、執(zhí)行動(dòng)畫和開發(fā)ajax的操作。
jQuery強(qiáng)調(diào)寫得少棘脐,做得多斜筐。它獨(dú)特的選擇器、鏈?zhǔn)讲僮髦臁⑹录幚頇C(jī)制和封裝完善的ajax都是其他js庫望塵莫及的顷链。
優(yōu)勢(shì)
輕量級(jí)、強(qiáng)大的選擇器屈梁、出色的DOM封裝嗤练、可靠的事件處理機(jī)制、完善的Ajax在讶、出色的瀏覽器兼容性煞抬、鏈?zhǔn)讲僮鞣椒ā⒇S富的插件支持构哺、隱式迭代革答。
配置環(huán)境
不需要特別安裝战坤,只要在頁面<head>標(biāo)簽內(nèi)寫一行標(biāo)簽引入即可,此方法是在百度上調(diào)用jquery残拐。
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
或者采用本地存放jquery方法:在jquery官網(wǎng)下載一個(gè)jquery.js文件途茫,放在本地項(xiàng)目所在webroot的js文件夾內(nèi),再在<head>標(biāo)簽內(nèi)寫一行標(biāo)簽:
<script type="text/javascript" src="jquery.js"></script>
代碼風(fēng)格
鏈?zhǔn)讲僮黠L(fēng)格
- 對(duì)于同一個(gè)對(duì)象不超過3個(gè)操作的溪食,可以寫在一行
- 對(duì)于同一個(gè)對(duì)象較多操作囊卜,建議每一行寫一個(gè)操作
- 對(duì)于多個(gè)對(duì)象少量操作,可以每個(gè)對(duì)象寫一行错沃,如果涉及子元素边败,可以適當(dāng)縮進(jìn)
jQuery對(duì)象和DOM對(duì)象
DOM:document object model 文檔對(duì)象模型
jQuery對(duì)象:通過jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。jQuery對(duì)象是jQuery獨(dú)有的捎废,jQuery對(duì)象可以使用jQuery里的方法。
$("#foo").html();
等同于
document.getElementById("foo").innerHTML;
在jQuery對(duì)象中無法使用DOM對(duì)象的任何方法致燥。DOM對(duì)象也不能使用jQuery里的方法登疗。
jQuery對(duì)象和DOM對(duì)象的相互轉(zhuǎn)換
獲取jQuery對(duì)象:var $variable = jQuery 對(duì)象;
獲取DOM對(duì)象:var variable = DOM 對(duì)象;
1、 jQuery對(duì)象-->DOM對(duì)象
[index]和get(index)
- [index]方法
var $cr = $("#cr");
var cr = $cr[0];
```-
- get(index)方法
var $cr = $("#cr");
var cr = $cr.get(0);
2嫌蚤、DOM對(duì)象--> jQuery對(duì)象
var cr = document.getElementById("cr");
var $cr = $(cr);
- 平時(shí)用到的jQuery對(duì)象都是通過$()函數(shù)制造出來的辐益,$()函數(shù)是jQuery對(duì)象的制造工廠。
#### jQuery選擇器
選擇器是jQuery的根基脱吱,對(duì)事件處理智政、遍歷DOM、Ajax操作都依賴于選擇器箱蝠。
##### 一续捂、CSS選擇器
要使某個(gè)樣式應(yīng)用于特定的HTML元素,需要找到該元素宦搬,在CSS中牙瓢,執(zhí)行這一任務(wù)的表現(xiàn)規(guī)則稱為CSS選擇器。
|選擇器|語法|描述|示例|
|:--|:--|:--|:--|
|標(biāo)簽選擇器|E{<br/> CSS規(guī)則<br/>}<br/>|以文檔元素作為選擇符|a{<br/> font-size:14px;<br/>}|
|ID選擇器|#{<br/> CSS規(guī)則<br/>}|以文檔元素的唯一標(biāo)識(shí)符ID作為選擇符|#note{<br/> font-size:14px;<br/>}|
|類選擇器|E.className{<br/> CSS規(guī)則<br/>}|以文檔元素的class作為選擇符|div.note{<br/> font-size:14px;<br/>}|
|群組選擇器|E1,E2,E3{<br/> CSS規(guī)則<br/>}|多個(gè)選擇符應(yīng)用同樣的樣式規(guī)則|td,p,a{<br/> font-size:14px;<br/>}|
|后代選擇器|E F{<br/> CSS規(guī)則<br/>}|元素E的任意后代元素F|#links a{<br/> font-size:14px;<br/>}|
|通配選擇器|*{<br/> CSS規(guī)則<br/>}|以文檔的所有元素作為選擇符|*{<br/> font-size:14px;<br/>}|
這就尷尬了间校,回車的代碼都顯示出來了矾克,下次還是粘貼表格圖片好了。br是回車的意思憔足。
幾乎所有主流瀏覽器都支持上面這些選擇器胁附。此外CSS還有偽類選擇器、子選擇器滓彰、臨近選擇器和屬性選擇器控妻,但主流瀏覽器并不支持所有CSS選擇器~~
##### 二、jQuery選擇器
jQuery選擇器完全繼承了CSS風(fēng)格揭绑,可以便捷迅速的找出特定的DOM元素饼暑,無需擔(dān)心瀏覽器是否支持這一選擇器,jQuery的行為都必須在獲取到元素后才能生效。
**jQuery選擇器的優(yōu)勢(shì)**
- 簡(jiǎn)潔的寫法
`比如:用$("#ID")代替document.getElementById()函數(shù)`
- 支持CSS1到CSS3選擇器
- 完善的處理機(jī)制
即使用jQuery獲取網(wǎng)頁中不存在的元素也不會(huì)報(bào)錯(cuò)~
**jQuery選擇器**
- 基本選擇器
最常用弓叛、最簡(jiǎn)單的選擇器彰居。通過id、class撰筷、標(biāo)簽名等來查找DOM元素陈惰。在網(wǎng)頁中,每個(gè)id只能用一次毕籽,class可以重復(fù)使用抬闯。
![基本選擇器.png](http://upload-images.jianshu.io/upload_images/3194437-e65454196c993553.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 層次選擇器
如果想通過DOM元素之間的層次關(guān)系來獲取特定元素,如后代元素关筒、子元素溶握、相鄰元素和同輩元素等,那么需要用層次選擇器蒸播。
![層次選擇器.png](http://upload-images.jianshu.io/upload_images/3194437-d22423bdc2d380fb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 過濾選擇器(基本過濾選擇器睡榆、內(nèi)容過濾選擇器、可見性過濾選擇器袍榆、屬性過濾選擇器胀屿、子元素過濾選擇器、表單對(duì)象過濾選擇器)
過濾選擇器是通過特定過濾規(guī)則來篩選所需的DOM元素包雀,選擇器以:開頭宿崭。
1、基本過濾選擇器
![基本過濾選擇器.png](http://upload-images.jianshu.io/upload_images/3194437-ddb6a1bd9854e375.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
2才写、內(nèi)容過濾選擇器
![內(nèi)容過濾選擇器.png](http://upload-images.jianshu.io/upload_images/3194437-117e3b25c6291c89.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
3葡兑、可見性過濾選擇器
![可見性過濾選擇器.png](http://upload-images.jianshu.io/upload_images/3194437-5ae089bd11d57148.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
4、屬性過濾選擇器
它的過濾規(guī)則是通過元素的屬性來獲取相應(yīng)的元素赞草。
![屬性過濾選擇器.png](http://upload-images.jianshu.io/upload_images/3194437-79e6394dd6d46f67.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
5铁孵、子元素過濾選擇器
需要注意父元素和子元素的區(qū)分。
![子元素過濾選擇器.png](http://upload-images.jianshu.io/upload_images/3194437-5d32d3712baf3bed.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
6房资、表單對(duì)象屬性過濾選擇器
此屬性主要對(duì)所選擇的表單元素進(jìn)行過濾蜕劝。.
![表單對(duì)象過濾選擇器.png](http://upload-images.jianshu.io/upload_images/3194437-4495001092c17929.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 表單選擇器
它可以方便的獲取到表單的某個(gè)或某類型的元素。
![表單選擇器.png](http://upload-images.jianshu.io/upload_images/3194437-880d30f3f0ca61b3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
##### 三轰异、jQuery選擇器注意事項(xiàng)
1岖沛、選擇器中含有特殊符號(hào)
- 含有"·"、"#"搭独、"("婴削、"]"等特殊字符:
在特殊符號(hào)前加"\\"
- 屬性選擇器的@符號(hào)問題:
由于jQuery版本問題,如果屬性選擇器前面有@牙肝,則去掉
2唉俗、選擇器中含有空格的注意事項(xiàng)
多一個(gè)少一個(gè)空格會(huì)得到不同結(jié)果嗤朴,這點(diǎn)需要注意