1 jQuery介紹
1.1 JS類庫
- JavaScript 庫封裝了很多預(yù)定義的對象和實用函數(shù)。能幫助使用者建立有高難度交互客戶端頁面, 并且兼容各大瀏覽器击吱。
1.2 當(dāng)前流行的 JavaScript 庫有：
- jQuery ，最流行
- EXT_JS遥昧，2.0開始收費
- Dojo 覆醇，很多js單獨文件，優(yōu)化：打包炭臭。（常見：開發(fā)小圖標(biāo)永脓，一張圖片）
- Prototype，對js擴展鞋仍，框架開發(fā)常摧。
- YUI(Yahoo! User Interface) ，taobao之前使用威创。
- 淘寶UI：http://docs.kissyui.com/
- Bootstrap落午，來自 Twitter，是目前很受歡迎的前端框架肚豺。Bootstrap 是基于 HTML板甘、CSS、JAVASCRIPT 的详炬，它簡潔靈活盐类，使得 Web 開發(fā)更加快捷寞奸。基于jQuery 一個UI工具
1.3 jQuery介紹
- JQuery是繼prototype之后又一個優(yōu)秀的Javascript庫在跳。它是輕量級的js庫 枪萄，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）猫妙，jQuery2.0及后續(xù)版本將不再支持IE6/7/8瀏覽器瓷翻。jQuery使用戶能更方便地處理HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）、events割坠、實現(xiàn)動畫效果齐帚，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個比較大的優(yōu)勢是彼哼，它的文檔說明很全对妄，而且各種應(yīng)用也說得很詳細(xì)，同時還有許多成熟的插件可供選擇敢朱。jQuery能夠使用戶的html頁面保持代碼和html內(nèi)容分離剪菱，也就是說，不用再在html里面插入一堆js來調(diào)用命令了拴签，只需要定義id即可孝常。
- 輕量級：依賴程序少，占用的資源的少
- 特點：js代碼和html代碼分離
- jQuery已經(jīng)成為最流行的javascript庫蚓哩，在世界前10000個訪問最多的網(wǎng)站中构灸，有超過55%在使用jQuery。
- 由美國人John Resig在2006年1月發(fā)布
- jQuery是免費岸梨、開源的
- jQuery分類：
WEB版本：我們主要學(xué)習(xí)研究
UI版本：集成了UI組件
mobile版本：針對移動端開發(fā)
qunit版本：用于js測試的
1.4 版本介紹
1.5 優(yōu)點
核心理念是write less,do more(寫得更少,做得更多)
輕量級：源碼1.11.js大小是286kb冻押，壓縮班1.11.min.js大小是94.1k。如果使用GZIP壓縮更小盛嘿。
兼容各種瀏覽器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）
jQuery的語法設(shè)計可以使開發(fā)者更加便捷
例如操作文檔對象洛巢、選擇DOM元素、制作動畫效果次兆、事件處理稿茉、使用Ajax以及其他功能
jQuery能夠使用戶的html頁面保持代碼和html內(nèi)容分離
不用再在html里面插入一堆js來調(diào)用命令了，只需要定義id即可
jQuery提供API讓開發(fā)者編寫插件芥炭，有許多成熟的插件可供選擇
文檔說明很全
2 基本語法
2.1 jQuery語法
<script type="text/javascript">
//js 執(zhí)行時漓库，有加載順序
/* jQuery獲得數(shù)據(jù)
* * 語法：$("選擇器") == jQuery("選擇器")
*
*/
var username = $("#username");
// * val()函數(shù) 用于獲得 value屬性的值
alert(username.val());
</script>
2.2 jQuery對象和dom對象轉(zhuǎn)換
<script type="text/javascript">
//1 使用javascript獲得value值
var username = document.getElementById("username");
//alert(username.value);
//2 將 dom對象 轉(zhuǎn)換 jQuery對象
// * 語法：$(dom對象)
// * 建議：jQuery對象變量名，建議為$開頭
var $username = $(username);
// alert($username.val());
//3 將 jQuery對象 轉(zhuǎn)換 dom對象
//3.1 jQuery對象內(nèi)部使用【數(shù)組】存放所有的數(shù)據(jù)园蝠，可以數(shù)組的下標(biāo)獲让燧铩（索引）
var username2 = $username[0];
alert(username2.value);
//3.2 jQuery提供函數(shù) get() 轉(zhuǎn)換成dom對象
var username3 = $username.get(0);
alert(username3.value);
</script>
3 選擇器
3.1 基本【掌握】
#id ， id選擇器彪薛，<xxx id=""> 通過id值獲得元素
element茂装，標(biāo)簽選擇器怠蹂，<xxx> 通過標(biāo)簽名獲得元素
.class ，類選擇器少态，<xxx class=""> 通過class值獲得元素城侧。注意：使用點開頭
s1,s2,... 多選擇器，將多個選擇器的結(jié)果添加一個數(shù)組中彼妻。
--------------------------------------------
* 所有
3.2 層級
A B 嫌佑，獲得A元素內(nèi)部所有的B后代元素。（爺孫）
A > B 侨歉，獲得A元素內(nèi)部所有的B子元素屋摇。（父子）
A + B ，獲得A元素后面的第一個兄弟B幽邓。（兄弟）
A ~ B 炮温，獲得A元素后面的所有的兄弟B。（兄弟）
3.3 基本過濾
- 過濾選擇器格式 “：關(guān)鍵字”
:first , 第一個
:last ,最后一個
:eq(index) 颊艳，獲得指定索引
:gt(index) 大于
:lt(index) 小于
:even 偶數(shù)茅特，從 0 開始計數(shù)忘分。例如：查找表格的1棋枕、3、5...行（即索引值0妒峦、2重斑、4...）
:odd 奇數(shù)
:not(selector) 去除所有與給定選擇器匹配的元素
------------------------------
:header 獲得所有標(biāo)題元素。例如：<h1>...<h6>
:animated 獲得所有動畫
:focus 獲得焦點
3.4 內(nèi)容過濾
:empty 當(dāng)前元素是否為空（是否有標(biāo)簽體--子元素肯骇、文本）
:has(...) 當(dāng)前元素窥浪，是否含有指定的子元素
:parent 當(dāng)前元素是否是父元素
:contains( text ) 標(biāo)簽體是否含有指定的文本
3.5 可見性過濾[掌握]
:hidden 隱藏。特指 <xxx style="display:none;"> 笛丙，獲得 <input type="hidden">
:visible 可見（默認(rèn)）
3.6 屬性【掌握】
[屬性名] 獲得指定的屬性名的元素
[屬性名=值] 獲得屬性名 等于 指定值的 的元素【1】
[屬性名!=值] 獲得屬性名 不等于 指定值的 的元素
[as1][as2][as3].... 復(fù)合選擇器漾脂，多個條件同時成立。類似 where ...and...and【2】
---------------------------------------
[屬性名^=值] 獲得以屬性值 開頭 的元素
[屬性名$=值] 獲得以屬性值 結(jié)尾 的元素
[屬性名*=值] 獲得 含有屬性值 的元素
3.7 子元素過濾
:nth-child(index) 胚鸯，獲得第幾個孩子骨稿，從1開始。
:first-child 姜钳， 獲得第一個孩子
:last-child 坦冠， 獲得最后孩子
:only-child ， 獲得獨生子
3.8 表單過濾
:input 所有的表單元素哥桥。（<input> / <select> / <textarea> / <button>）
:text 文本框<input type="text">
:password 密碼框<input type=" password ">
:radio 單選<input type="radio">
:checkbox 復(fù)選框<input type="checkbox">
:submit 提交按鈕<input type="submit">
:image 圖片按鈕<input type="image" src="">
:reset 重置按鈕<input type="reset">
:file 文件上傳<input type="file">
:hidden 隱藏域<input type="hidden"> ,還可以獲得<xxx style="display:none">
其他值：<br> <option> ,存在瀏覽器兼容問題
:button 所有普通按鈕辙浑。 <button > 或 <input type="button">
3.9 表單對象屬性過濾【掌握】
:enabled 可用
:disabled 不可用。<xxx disabled="disabled"> 或<xxx disabled=""> 或 <xxx disabled>
:checked 選中（單選框radio拟糕、復(fù)選框 checkbox）
:selected 選擇（下拉列表 select option）
4 屬性和CSS
4.1 屬性【掌握】
attr(name) 獲得指定屬性名的值
attr(key ,val ) 給一個指定屬性名設(shè)置值
attr(prop ) 給多個屬性名設(shè)置值判呕。參數(shù)：prop json數(shù)據(jù)
{k : v , k : v , .....}
removeAttr(name) 移除指定屬性
4.2 CSS類
- <xxx class="a b c d my ">
addClass("my") 追加一個類
removeClass("my") 將指定類移除
toggleClass("my") 如果有my將移除倦踢，如果沒有將添加。
4.3 HTML代碼/文本/值【掌握】
val() 獲得value的值
val(text) 設(shè)置value的值
html() 獲得html代碼佛玄，含有標(biāo)簽
html(...) 設(shè)置html代碼硼一，如果有標(biāo)簽，將進(jìn)行解析梦抢。
text() 獲得文本值般贼，將標(biāo)簽進(jìn)行過濾
text(...) 設(shè)置文本值，如果有標(biāo)簽奥吩，將被轉(zhuǎn)義 --> < < & & > <
4.4 CSS
- <xxx style="key:value; key:value; ">
css(name) 獲得指定名稱的css值
css(name ,value) 設(shè)置一對值
css(prop) 設(shè)置一組值
4.5 位置
offset() 獲得坐標(biāo) 哼蛆， 返回JSON對象，{"top":200, "left" : 100}
offset(...) 設(shè)置坐標(biāo)霞赫。例如：$(this).offset({"top":0 , "left" : 0})
scrollTop() 垂直滾動條 滾過的距離
scrollLeft() 水平滾動條 滾過的距離
4.6 尺寸
height([...]) 獲得 或 設(shè)置 高度
width([...])獲得 或 設(shè)置 寬度
5 文檔處理
5.1 內(nèi)部插入【掌握】
A.append(B) 將B插入到A的內(nèi)部后面（之后的串聯(lián)操作腮介，操作A）
<A>
....
<B></B>
<A>
A.prepend(B) 將B插入到A的內(nèi)部前面
<A>
<B></B>
....
<A>
--------------------------------------------
A.appendTo(B) 將A插入到B的內(nèi)部后面 （之后的串聯(lián)操作，操作A）
A.prependTo(B) 將A插入到B的內(nèi)部前面
5.2 外部插入【掌握】
A.after(B) , 將B插入到A后面（同級）
<A></A>
<B></B>
A.before(B) 端衰，將B插入到A前面
<B></B>
<A></A>
-----------------------------------
A.insertAfter(B) , 將A插入到B后面（同級）
<B></B>
<A></A>
A.insertBefore(B) 將A插入到B前面
<A></A>
<B></B>
5.3 刪除[掌握]
empty() 清空標(biāo)簽體
remove() 刪除當(dāng)前對象叠洗。如果之后再使用，元素本身保留旅东，綁定事件 或 綁定數(shù)據(jù) 都會被移除
detach() 刪除當(dāng)前對象灭抑。如果之后再使用，元素本身保留抵代，綁定事件 或 綁定數(shù)據(jù) 都保留
- 綁定數(shù)據(jù)
data(name) 獲得
data(name,value) 設(shè)置
5.4 復(fù)制
clone() 克隆
even ：指示事件處理函數(shù)是否會被復(fù)制腾节。V1.5以上版本默認(rèn)值是：false
5.5 替換
A.replaceWith(B) ，使用A將B替換掉
A.replaceAll(B) 荤牍，使用B將A替換掉
5.6 包裹
A.wrap(B) 案腺，使用B將每一個A進(jìn)行包裹（多個B）
<B><A></A></B>
<B><A></A></B>
A.wrapAll(B) ，使用B將所有A進(jìn)行包裹（一個B）
<B>
<A></A>
<A></A>
</B>
A.wrapInner(B) ,使用B將每一個A的標(biāo)簽體包裹康吵。
<A><B>劈榨。。晦嵌。</B></A>
<A><B>同辣。。耍铜。</B></A>
A.unwrap() 邑闺，將A的父元素刪除，自己留著
