jQuery學(xué)習(xí)筆記——簡(jiǎn)介、選擇器

由于時(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)需要注意
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市虫溜,隨后出現(xiàn)的幾起案子雹姊,更是在濱河造成了極大的恐慌,老刑警劉巖衡楞,帶你破解...
    沈念sama閱讀 216,997評(píng)論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件吱雏,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡瘾境,警方通過查閱死者的電腦和手機(jī)歧杏,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,603評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來迷守,“玉大人犬绒,你說我怎么就攤上這事《以洌” “怎么了凯力?”我有些...
    開封第一講書人閱讀 163,359評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)急膀。 經(jīng)常有香客問我,道長(zhǎng)龄捡,這世上最難降的妖魔是什么卓嫂? 我笑而不...
    開封第一講書人閱讀 58,309評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮聘殖,結(jié)果婚禮上晨雳,老公的妹妹穿的比我還像新娘。我一直安慰自己奸腺,他們只是感情好餐禁,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,346評(píng)論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著突照,像睡著了一般帮非。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上讹蘑,一...
    開封第一講書人閱讀 51,258評(píng)論 1 300
  • 那天末盔,我揣著相機(jī)與錄音,去河邊找鬼座慰。 笑死陨舱,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的版仔。 我是一名探鬼主播游盲,決...
    沈念sama閱讀 40,122評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼误墓,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了益缎?” 一聲冷哼從身側(cè)響起谜慌,我...
    開封第一講書人閱讀 38,970評(píng)論 0 275
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎链峭,沒想到半個(gè)月后畦娄,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,403評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡弊仪,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,596評(píng)論 3 334
  • 正文 我和宋清朗相戀三年熙卡,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片励饵。...
    茶點(diǎn)故事閱讀 39,769評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡驳癌,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出役听,到底是詐尸還是另有隱情颓鲜,我是刑警寧澤,帶...
    沈念sama閱讀 35,464評(píng)論 5 344
  • 正文 年R本政府宣布典予,位于F島的核電站甜滨,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏瘤袖。R本人自食惡果不足惜衣摩,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,075評(píng)論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望捂敌。 院中可真熱鬧艾扮,春花似錦、人聲如沸占婉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,705評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽逆济。三九已至酌予,卻和暖如春帮匾,著一層夾襖步出監(jiān)牢的瞬間昏滴,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,848評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工诫欠, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留升薯,地道東北人莱褒。 一個(gè)月前我還...
    沈念sama閱讀 47,831評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像涎劈,于是被迫代替她去往敵國(guó)和親广凸。 傳聞我的和親對(duì)象是個(gè)殘疾皇子阅茶,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,678評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 一、樣式篇 第1章 初識(shí)jQuery (1)環(huán)境搭建 進(jìn)入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,380評(píng)論 0 44
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關(guān)注...
    程序員poetry閱讀 16,643評(píng)論 18 503
  • 環(huán)境搭建 進(jìn)入官方網(wǎng)站獲取最新的版本 http://jquery.com/download/ 谅海,這里需要注意 j...
    阿r阿r閱讀 799評(píng)論 0 7
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式脸哀。設(shè)計(jì)者無需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,335評(píng)論 0 2
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式扭吁。設(shè)計(jì)者無需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性撞蜂。 1....
    LaBaby_閱讀 1,171評(píng)論 0 1