第一章 jQuery簡介
1-1 jQuery簡介
1.簡介
2.優(yōu)勢
3.特性與工具方法
1-2 環(huán)境搭建
進入官方網(wǎng)站獲取最新的版本 http://jquery.com/download/ ，這里需要注意 jQuery 分 2 個系列版本 1.x 與 2.x套硼，主要的區(qū)別在于 2.x 不再兼容 IE6勘纯、7俏让、8瀏覽器震叮，這樣做的目的是為了兼容移動端開發(fā)。由于減少了一些代碼拧篮，使得該版本比 jQuery 1.x 更小隐岛、更快。
如果開發(fā)者比較在意老版本 IE 用戶尖昏，只能使用 jQuery 1.9 及之前的版本了仰税。我們這本課程為了兼容性問題，使用的是 1.9 版本抽诉。jQuery 每一個系列版本分為：壓縮版(compressed) 與 開發(fā)版(development)陨簇，我們在開發(fā)過程中使用開發(fā)版（開發(fā)版本便于代碼修改及調(diào)試），項目上線發(fā)布使用壓縮版（因為壓縮版本體積更小迹淌，效率更快）河绽。
jQuery是一個JavaScript腳本庫，不需要特別的安裝唉窃，只需要我們在頁面 <head> 標簽內(nèi)中耙饰，通過 script 標簽引入 jQuery 庫即可。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<title>環(huán)境搭建</title>
</head>
<body>
<script type="text/javascript"> alert($) </script>
</body>
</html>
alert 彈出以上信息句携，說明環(huán)境已經(jīng)搭建成功了榔幸。
1-3 jQueryHelloWorld體驗
當頁面加載完成后，在頁面中以居中的方式顯示“您好矮嫉！通過慕課網(wǎng)學習 jQuery 才是最佳的途徑”字樣削咆。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>第一個簡單的jQuery程序</title>
<style type="text/css">
div{
padding:8px 0px;
font-size:12px;
text-align:center;
border:1px solid #888;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div").html("您好！通過慕課網(wǎng)學習jQuery才是最佳的途徑蠢笋。");
});
</script>
</head>
<body>
<div></div>
</body>
</html>
代碼分析：
$(document).ready 的作用是等頁面的文檔（document）中的節(jié)點都加載完畢后拨齐，再執(zhí)行后續(xù)的代碼，因為我們在執(zhí)行代碼的時候昨寞，可能會依賴頁面的某一個元素瞻惋，我們要確保這個元素真正的的被加載完畢后才能正確的使用厦滤。
1-4 jQuery對象與DOM對象
對于才開始接觸jQuery庫的初學者，我們需要清楚認識一點：
jQuery對象與DOM對象是不一樣的
可能一時半會分不清楚哪些是jQuery對象歼狼，哪些是DOM對象掏导，下面重點介紹一下jQuery對象，以及兩者相互間的轉(zhuǎn)換羽峰。
通過一個簡單的例子趟咆，簡單區(qū)分下jQuery對象與DOM對象：
<p id=”imooc”></p>
我們要獲取頁面上這個id為imooc的p元素，然后給這個文本節(jié)點增加一段文字：“您好梅屉！通過慕課網(wǎng)學習jQuery才是最佳的途徑”值纱，并且讓文字顏色變成紅色。
普通處理坯汤，通過標準JavaScript處理：
var p = document.getElementById('imooc');
p.innerHTML = '您好虐唠！通過慕課網(wǎng)學習jQuery才是最佳的途徑';
p.style.color = 'red';
通過原生DOM模型提供的document.getElementById(“imooc”) 方法獲取的DOM元素就是一個DOM對象，再通過innerHTML與style屬性處理文本與顏色惰聂。
jQuery的處理：
var $p = $('#imooc');
$p.html('您好疆偿！通過慕課網(wǎng)學習jQuery才是最佳的途徑').css('color','red');
通過$('#imooc')方法會得到一個$p的jQuery對象，$p是一個類數(shù)組對象庶近。這個對象里面包含了DOM對象的信息翁脆，然后封裝了很多操作方法，調(diào)用自己的方法html與css鼻种，得到的效果與標準的JavaScript處理結(jié)果是一致的。
通過標準的JavaScript操作DOM與jQuyer操作DOM的對比沙热，我們不難發(fā)現(xiàn)：
通過jQuery方法包裝后的對象叉钥，是一個類數(shù)組對象。它與DOM對象完全不同篙贸，唯一相似的是它們都能操作DOM投队。
通過jQuery處理DOM的操作，可以讓開發(fā)者更專注業(yè)務邏輯的開發(fā)爵川，而不需要我們具體知道哪個DOM節(jié)點有那些方法敷鸦，也不需要關心不同瀏覽器的兼容性問題，我們通過jQuery提供的API進行開發(fā)寝贡，代碼也會更加精短扒披。
1-5 jQuery對象轉(zhuǎn)化成DOM對象
jQuery庫本質(zhì)上還是JavaScript代碼，它只是對JavaScript語言進行包裝處理碟案，為的是提供更好更方便快捷的DOM處理與開發(fā)中經(jīng)常使用的功能颇蜡。我們使用jQuery的同時也能混合JavaScript原生代碼一起使用辆亏。在很多場景中扮叨，我們需要jQuery與DOM能夠相互的轉(zhuǎn)換彻磁，它們都是可以操作的DOM元素，jQuery是一個類數(shù)組對象惦费，而DOM對象就是一個單獨的DOM元素兵迅。
如何把jQuery對象轉(zhuǎn)成DOM對象？
利用數(shù)組下標的方式讀取到jQuery中的DOM對象
HTML代碼
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
JavaScript代碼
var $div = $('div') //jQuery對象
var div = $div[0] //轉(zhuǎn)化成DOM對象
div.style.color = 'red' //操作dom對象的屬性
用jQuery找到所有的div元素（3個）薪贫，因為jQuery對象也是一個數(shù)組結(jié)構(gòu)恍箭，可以通過數(shù)組下標索引找到第一個div元素，通過返回的div對象瞧省，調(diào)用它的style屬性修改第一個div元素的顏色扯夭。這里需要注意的一點是，數(shù)組的索引是從0開始的鞍匾，也就是第一個元素下標是0
通過jQuery自帶的get()方法
jQuery對象自身提供一個.get() 方法允許我們直接訪問jQuery對象中相關的DOM節(jié)點交洗，get方法中提供一個元素的索引：
var $div = $('div') //jQuery對象
var div = $div.get(0) //通過get方法，轉(zhuǎn)化成DOM對象
div.style.color = 'red' //操作dom對象的屬性
其實我們翻開源碼橡淑，看看就知道了构拳，get方法就是利用的第一種方式處理的，只是包裝成一個get讓開發(fā)者更直接方便的使用梁棠。
1-6 DOM對象轉(zhuǎn)化成jQuery對象
相比較jQuery轉(zhuǎn)化成DOM置森，開發(fā)中更多的情況是把一個dom對象加工成jQuery對象。$(參數(shù))是一個多功能的方法符糊，通過傳遞不同的參數(shù)而產(chǎn)生不同的作用凫海。
如果傳遞給$(DOM)函數(shù)的參數(shù)是一個DOM對象，jQuery方法會把這個DOM對象給包裝成一個新的jQuery對象
通過$(dom)方法將普通的dom對象加工成jQuery對象之后男娄，我們就可以調(diào)用jQuery的方法了
HTML代碼
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
JavaScript代碼
var div = document.getElementsByTagName('div'); //dom對象
var $div = $(div); //jQuery對象
var $first = $div.first(); //找到第一個div元素
$first.css('color', 'red'); //給第一個元素設置顏色
通過getElementsByTagName獲取到所有div節(jié)點的元素行贪，結(jié)果是一個dom合集對象建瘫，不過這個對象是一個數(shù)組合集(3個div元素)暖混。通過$(div)方法轉(zhuǎn)化成jQuery對象晾咪，通過調(diào)用jQuery對象中的first與css方法查找第一個元素并且改變其顏色。
第2章 jQuery選擇器
2-1 jQuery選擇器之id選擇器
頁面的任何操作都需要節(jié)點的支撐昼蛀，開發(fā)者如何快速高效的找到指定的節(jié)點也是前端開發(fā)中的一個重點叼旋。jQuery提供了一系列的選擇器幫助開發(fā)者達到這一目的，讓開發(fā)者可以更少的處理復雜選擇過程與性能優(yōu)化详民，更多專注業(yè)務邏輯的編寫沈跨。
jQuery幾乎支持主流的css1~css3選擇器的寫法饿凛，我們從最簡單的也是最常用的開始學起
id選擇器：一個用來查找的ID，即元素的id屬性
$( "#id" )
id選擇器也是基本的選擇器蒙畴，jQuery內(nèi)部使用JavaScript函數(shù)document.getElementById()來處理ID的獲取膳凝。原生語法的支持總是非常高效的上煤，所以在操作DOM的獲取上拴疤，如果能采用id的話盡然考慮用這個選擇器
值得注意：
id是唯一的，每個id值在一個頁面中只能使用一次蜒犯。如果多個元素分配了相同的id罚随，將只匹配該id選擇集合的第一個DOM元素。但這種行為不應該發(fā)生;有超過一個元素的頁面使用相同的id是無效的
2-2 jQuery選擇器之類選擇器
類選擇器瞄勾，顧名思義，通過class樣式類名來獲取節(jié)點
描述：
$( ".class" )
類選擇器趾疚，相對id選擇器來說，效率相對會低一點赡磅，但是優(yōu)勢就是可以多選
同樣的jQuery在實現(xiàn)上焚廊，對于類選擇器，如果瀏覽器支持袒餐，jQuery使用JavaScript的原生getElementsByClassName()函數(shù)來實現(xiàn)的
右邊實現(xiàn)一個原生getElementsByClassName()函數(shù)的實現(xiàn)代碼與jQuery實現(xiàn)代碼的比較
我們不難發(fā)現(xiàn)：
jQuery除了選擇上的簡單卧檐，而且沒有再次使用循環(huán)處理
不難想到$(".imooc").css()方法內(nèi)部肯定是帶了一個隱式的循環(huán)處理，所以使用jQuery選擇節(jié)點佛嬉，不僅僅只是選擇上的簡單，同時還增加很多關聯(lián)的便利操作湾揽，后續(xù)我們還會慢慢的學到其他的優(yōu)勢。
2-3 jQuery選擇器之元素選擇器
元素選擇器：根據(jù)給定（html）標記名稱選擇所有的元素
描述：
$( "element" )
搜索指定元素標簽名的所有節(jié)點戚揭，這個是一個合集的操作。同樣的也有原生方法getElementsByTagName()函數(shù)支持
右邊編輯器代碼所示：
第一組：通過getElementsByTagName方法得到頁面所有的<div>元素
var divs = document.getElementsByTagName('div');
divs是dom合集對象，通過循環(huán)給每一個合集中的<div>元素賦予新的boder樣式
第二組：同樣的效果磁滚，$("p")選取所有的<p>元素，通過css方法直接賦予樣式
2-4 jQuery選擇器之全選擇器（*選擇器）
在CSS中谆沃，經(jīng)常會在第一行寫下這樣一段樣式
* {padding: 0; margin: 0;}
通配符意味著給所有的元素設置默認的邊距耕陷。jQuery中我們也可以通過傳遞選擇器來選中文檔頁面中的元素
描述：
$( "*" )
拋開jQuery饺蔑，如果要獲取文檔中所有的元素猾警，通過document.getElementsByTagName()中傳遞"*"同樣可以獲取到
不難發(fā)現(xiàn)拂蝎，id玄货、class、tag都可以通過原生的方法獲取到對應的節(jié)點惩坑，但是我們還需要考慮一個兼容性的問題，我這里順便提及一下蔓钟，比如:
IE會將注釋節(jié)點實現(xiàn)為元素键俱，所以在IE中調(diào)用getElementsByTagName里面會包含注釋節(jié)點，這個通常是不應該的
getElementById的參數(shù)在IE8及較低的版本不區(qū)分大小寫
IE7及較低的版本中臀玄，表單元素中瓢阴，如果表單A的name屬性名用了另一個元素B的ID名并且A在B之前，那么getElementById會選中A
IE8及較低的版本健无，瀏覽器不支持getElementsByClassName
2-5 jQuery選擇器之層級選擇器
文檔中的所有的節(jié)點之間都是有這樣或者那樣的關系荣恐。我們可以把節(jié)點之間的關系可以用傳統(tǒng)的家族關系來描述，可以把文檔樹當作一個家譜累贤，那么節(jié)點與節(jié)點直接就會存在父子叠穆，兄弟，祖孫的關系了夺溢。
選擇器中的層級選擇器就是用來處理這種關系
子元素 后代元素 兄弟元素 相鄰元素
通過一個列表，對比層級選擇器的區(qū)別
** 仔細觀察層級選擇器之間還是有很多相似與不同點**
層級選擇器都有一個參考節(jié)點
后代選擇器包含子選擇器的選擇的內(nèi)容
一般兄弟選擇器包含相鄰兄弟選擇的內(nèi)容
相鄰兄弟選擇器和一般兄弟選擇器所選擇到的元素，必須在同一個父元素下
2-6 jQuery選擇器之基本篩選選擇器
很多時候我們不能直接通過基本選擇器與層級選擇器找到我們想要的元素孩灯，為此jQuery提供了一系列的篩選選擇器用來更快捷的找到所需的DOM元素尚卫。篩選選擇器很多都不是CSS的規(guī)范鳖链，而是jQuery自己為了開發(fā)者的便利延展出來的選擇器
篩選選擇器的用法與CSS中的偽元素相似，選擇器用冒號“：”開頭痊乾，通過一個列表，看看基本篩選器的描述：
注意事項：
:eq(), :lt(), :gt(), :even, :odd 用來篩選他們前面的匹配表達式的集合元素，根據(jù)之前匹配的元素在進一步篩選谈截，注意jQuery合集都是從0開始索引
gt是一個段落篩選，從指定索引的下一個開始泛啸，gt(1) 實際從2開始
2-7 jQuery選擇器之內(nèi)容篩選選擇器
基本篩選選擇器針對的都是元素DOM節(jié)點，如果我們要通過內(nèi)容來過濾，jQuery也提供了一組內(nèi)容篩選選擇器，當然其規(guī)則也會體現(xiàn)在它所包含的子元素或者文本內(nèi)容上
內(nèi)容過濾器描述如下表：
注意事項：
:contains與:has都有查找的意思煮落，但是contains查找包含“指定文本”的元素害驹，has查找包含“指定元素”的元素
如果:contains匹配的文本包含在元素的子元素中，同樣認為是符合條件的。
:parent與:empty是相反的昼激，兩者所涉及的子元素趟妥，包括文本節(jié)點
2-8 jQuery選擇器之可見性篩選選擇器
元素有顯示狀態(tài)與隱藏狀態(tài)，jQuery根據(jù)元素的狀態(tài)擴展了可見性篩選選擇器:visible與:hidden
描述如下：
這2個選擇器都是 jQuery 延伸出來的夺巩，看起來比較簡單贞让，但是元素可見性依賴于適用的樣式
:hidden選擇器，不僅僅包含樣式是display="none"的元素柳譬，還包括隱藏表單喳张、visibility等等
我們有幾種方式可以隱藏一個元素：
1.CSS display的值是none。
2.type="hidden"的表單元素美澳。
3.寬度和高度都顯式設置為0销部。
4.一個祖先元素是隱藏的，該元素是不會在頁面上顯示
5.CSS visibility的值是hidden
6.CSS opacity的指是0
如果元素中占據(jù)文檔中一定的空間,元素被認為是可見的制跟。
可見元素的寬度或高度舅桩，是大于零。
元素的visibility: hidden 或 opacity: 0被認為是可見的雨膨，因為他們?nèi)匀徽加每臻g布局擂涛。
不在文檔中的元素是被認為是不可見的，如果當他們被插入到文檔中聊记，jQuery沒有辦法知道他們是否是可見的撒妈，因為元素可見性依賴于適用的樣式
2-9 jQuery選擇器之屬性篩選選擇器
屬性選擇器讓你可以基于屬性來定位一個元素恢暖。可以只指定該元素的某個屬性狰右，這樣所有使用該屬性而不管它的值杰捂，這個元素都將被定位，也可以更加明確并定位在這些屬性上使用特定值的元素棋蚌，這就是屬性選擇器展示它們的威力的地方嫁佳。
描述如下：
瀏覽器支持：
[att=val]、[att]谷暮、[att|=val]蒿往、[att~=val] 屬于CSS 2.1規(guī)范
[ns|attr]、[att^=val]湿弦、[att*=val]熄浓、[att$=val] 屬于CSS3規(guī)范
[name!="value"] 屬于jQuery 擴展的選擇器
CSS選擇器無論CSS2.1版本還是CSS3版本，IE7和IE8都支持省撑，webkit、Gecko核心及Opera也都支持俯在，只有IE6以下瀏覽器才不支持
在這么多屬性選擇器中[attr="value"]和[attr*="value"]是最實用的
[attr="value"]能幫我們定位不同類型的元素竟秫，特別是表單form元素的操作，比如說input[type="text"],input[type="checkbox"]等
[attr*="value"]能在網(wǎng)站中幫助我們匹配不同類型的文件
2-10 jQuery選擇器之子元素篩選選擇器
子元素篩選選擇器不常使用跷乐，其篩選規(guī)則比起其它的選擇器稍微要復雜點
子元素篩選選擇器描述表：
注意事項：
1.:first只匹配一個單獨的元素肥败，但是:first-child選擇器可以匹配多個：即為每個父級元素匹配第一個子元素。這相當于:nth-child(1)
2.:last 只匹配一個單獨的元素愕提， :last-child 選擇器可以匹配多個元素：即馒稍，為每個父級元素匹配最后一個子元素
3.如果子元素只有一個的話，:first-child與:last-child是同一個
4.:only-child匹配某個元素是父元素中唯一的子元素浅侨，就是說當前子元素是父元素中唯一的元素纽谒，則匹配
5.jQuery實現(xiàn):nth-child(n)是嚴格來自CSS規(guī)范，所以n值是“索引”如输，也就是說鼓黔，從1開始計數(shù)，:nth-child(index)從1開始的不见，而eq(index)是從0開始的
6.nth-child(n) 與 :nth-last-child(n) 的區(qū)別前者是從前往后計算澳化，后者從后往前計算
2-11 jQuery選擇器之表單元素選擇器
無論是提交還是傳遞數(shù)據(jù)，表單元素在動態(tài)交互頁面的作用是非常重要的稳吮。jQuery中專門加入了表單選擇器缎谷，從而能夠極其方便地獲取到某個類型的表單元素
表單選擇器的具體方法描述：
注意事項：
除了input篩選選擇器己儒，幾乎每個表單類別篩選器都對應一個input元素的type值杖小。大部分表單類別篩選器可以使用屬性篩選器替換幻林。比如 $(':password') == $('[type=password]')
2-12 jQuery選擇器之表單對象屬性篩選選擇器
除了表單元素選擇器外烛愧，表單對象屬性篩選選擇器也是專門針對表單元素的選擇器，可以附加在其他選擇器的后面席纽，主要功能是對所選擇的表單元素進行篩選
表單篩選選擇器的描述：
注意事項：
選擇器適用于復選框和單選框捏悬，對于下拉框元素, 使用 :selected 選擇器
在某些瀏覽器中，選擇器:checked可能會錯誤選取到<option>元素润梯，所以保險起見換用選擇器input:checked过牙，確保只會選取<input>元素
2-13 jQuery選擇器之特殊選擇器this
相信很多剛接觸jQuery的人，很多都會對$(this)和this的區(qū)別模糊不清纺铭，那么這兩者有什么區(qū)別呢寇钉？
this是JavaScript中的關鍵字，指的是當前的上下文對象舶赔，簡單的說就是方法/屬性的所有者
下面例子中扫倡，imooc是一個對象，擁有name屬性與getName方法,在getName中this指向了所屬的對象imooc
var imooc = {
name:"慕課網(wǎng)",
getName:function(){
//this,就是imooc對象
return this.name;
}
}
imooc.getName(); //慕課網(wǎng)
當然在JavaScript中this是動態(tài)的竟纳，也就是說這個上下文對象都是可以被動態(tài)改變的(可以通過call,apply等方法)撵溃，具體的大家可以查閱相關資料
同樣的在DOM中this就是指向了這個html元素對象，因為this就是DOM元素本身的一個引用
假如給頁面一個P元素綁定一個事件:
p.addEventListener('click',function(){
//this === p
//以下兩者的修改都是等價的
this.style.color = "red";
p.style.color = "red";
},false);
通過addEventListener綁定的事件回調(diào)中锥累，this指向的是當前的dom對象缘挑，所以再次修改這樣對象的樣式，只需要通過this獲取到引用即可
this.style.color = "red"
但是這樣的操作其實還是很不方便的桶略，這里面就要涉及一大堆的樣式兼容语淘，如果通過jQuery處理就會簡單多了，我們只需要把this加工成jQuery對象
換成jQuery的做法：
$('p').click(function(){
//把p元素轉(zhuǎn)化成jQuery的對象
var $this= $(this)
$this.css('color','red')
})
通過把$()方法傳入當前的元素對象的引用this际歼，把這個this加工成jQuery對象惶翻，我們就可以用jQuery提供的快捷方法直接處理樣式了
總體：
1.this，表示當前的上下文對象是一個html對象鹅心，可以調(diào)用html對象所擁有的屬性和方法吕粗。
2.$(this),代表的上下文對象是一個jquery的上下文對象，可以調(diào)用jQuery的方法和屬性值旭愧。
第3章 jQuery的屬性與樣式
3-1 attr()與.removeAttr()
每個元素都有一個或者多個特性溯泣，這些特性的用途就是給出相應元素或者其內(nèi)容的附加信息。如：在img元素中榕茧，src就是元素的特性垃沦，用來標記圖片的地址。
操作特性的DOM方法主要有3個用押，getAttribute方法肢簿、setAttribute方法和removeAttribute方法，就算如此在實際操作中還是會存在很多問題，這里先不說池充。而在jQuery中用一個attr()與removeAttr()就可以全部搞定了桩引，包括兼容問題
jQuery中用attr()方法來獲取和設置元素屬性,attr是attribute（屬性）的縮寫，在jQuery DOM操作中會經(jīng)常用到attr()
attr()有4個表達式
attr(傳入屬性名)：獲取屬性的值
attr(屬性名, 屬性值)：設置屬性的值
attr(屬性名,函數(shù)值)：設置屬性的函數(shù)值
attr(attributes)：給指定元素設置多個屬性值收夸，即：{屬性名一: “屬性值一” , 屬性名二: “屬性值二” , … … }
removeAttr()刪除方法
.removeAttr( attributeName ) : 為匹配的元素集合中的每個元素中移除一個屬性（attribute）
優(yōu)點：
attr坑匠、removeAttr都是jQuery為了屬性操作封裝的，直接在一個 jQuery 對象上調(diào)用該方法卧惜，很容易對屬性進行操作厘灼，也不需要去特意的理解瀏覽器的屬性名不同的問題
注意的問題：
dom中有個概念的區(qū)分：Attribute和Property翻譯出來都是“屬性”，《js高級程序設計》書中翻譯為“特性”和“屬性”咽瓷。簡單理解设凹，Attribute就是dom節(jié)點自帶的屬性
例如：html中常用的id、class茅姜、title闪朱、align等：
<div id="immooc" title="慕課網(wǎng)"></div>
而Property是這個DOM元素作為對象，其附加的內(nèi)容钻洒，例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法進行取值或賦值等
獲取Attribute就需要用attr奋姿，獲取Property就需要用prop
3-2 html()及.text()
讀取、修改元素的html結(jié)構(gòu)或者元素的文本內(nèi)容是常見的DOM操作素标，jQuery針對這樣的處理提供了2個便捷的方法.html()與.text()
.html()方法
獲取集合中第一個匹配元素的HTML內(nèi)容 或 設置每一個匹配元素的html內(nèi)容胀蛮，具體有3種用法：
.html() 不傳入值，就是獲取集合中第一個匹配元素的HTML內(nèi)容
.html( htmlString ) 設置每一個匹配元素的html內(nèi)容
.html( function(index, oldhtml) ) 用來返回設置HTML內(nèi)容的一個函數(shù)
注意事項：
.html()方法內(nèi)部使用的是DOM的innerHTML屬性來處理的糯钙，所以在設置與獲取上需要注意的一個最重要的問題，這個操作是針對整個HTML內(nèi)容（不僅僅只是文本內(nèi)容）
.text()方法
得到匹配元素集合中每個元素的文本內(nèi)容結(jié)合退腥，包括他們的后代任岸，或設置匹配元素集合中每個元素的文本內(nèi)容為指定的文本內(nèi)容。狡刘，具體有3種用法：
.text() 得到匹配元素集合中每個元素的合并文本享潜，包括他們的后代
.text( textString ) 用于設置匹配元素內(nèi)容的文本
.text( function(index, text) ) 用來返回設置文本內(nèi)容的一個函數(shù)
注意事項：
.text()結(jié)果返回一個字符串，包含所有匹配元素的合并文本
.html與.text的異同:
.html與.text的方法操作是一樣嗅蔬，只是在具體針對處理對象不同
.html處理的是元素內(nèi)容剑按，.text處理的是文本內(nèi)容
.html只能使用在HTML文檔中，.text 在XML 和 HTML 文檔中都能使用
如果處理的對象只有一個子文本節(jié)點澜术，那么html處理的結(jié)果與text是一樣的
火狐不支持innerText屬性艺蝴，用了類似的textContent屬性，.text()方法綜合了2個屬性的支持鸟废，所以可以兼容所有瀏覽器
3-3 .val()
jQuery中有一個.val()方法主要是用于處理表單元素的值猜敢，比如 input, select 和 textarea。
.val()方法
.val()無參數(shù)，獲取匹配的元素集合中第一個元素的當前值
.val( value )缩擂，設置匹配的元素集合中每個元素的值
.val( function ) 鼠冕，一個用來返回設置值的函數(shù)
注意事項：
- 通過.val()處理select元素， 當沒有選擇項被選中胯盯，它返回null
- .val()方法多用來設置表單的字段的值
- 如果select元素有multiple（多選）屬性懈费，并且至少一個選擇項被選中， .val()方法返回一個數(shù)組博脑，這個數(shù)組包含每個選中選擇項的值
**.html(),.text()和.val()的差異總結(jié)： **
- .html(),.text(),.val()三種方法都是用來讀取選定元素的內(nèi)容憎乙；只不過.html()是用來讀取元素的html內(nèi)容（包括html標簽），.text()用來讀取元素的純文本內(nèi)容趋厉，包括其后代元素寨闹，.val()是用來讀取表單元素的"value"值。其中.html()和.text()方法不能使用在表單元素上,而.val()只能使用在表單元素上君账；另外.html()方法使用在多個元素上時繁堡，只讀取第一個元素；.val()方法和.html()相同乡数，如果其應用在多個元素上時椭蹄，只能讀取第一個表單元素的"value"值，但是.text()和他們不一樣净赴，如果.text()應用在多個元素上時绳矩，將會讀取所有選中元素的文本內(nèi)容。
- .html(htmlString),.text(textString)和.val(value)三種方法都是用來替換選中元素的內(nèi)容玖翅，如果三個方法同時運用在多個元素上時翼馆，那么將會替換所有選中元素的內(nèi)容。
- .html(),.text(),.val()都可以使用回調(diào)函數(shù)的返回值來動態(tài)的改變多個元素的內(nèi)容金度。
3-4 jQuery的屬性與樣式之增加樣式.addClass()
通過動態(tài)改變類名（class）应媚，可以讓其修改元素呈現(xiàn)出不同的效果。在HTML結(jié)構(gòu)中里猜极，多個class以空格分隔中姜，當一個節(jié)點（或稱為一個標簽）含有多個class時，DOM元素響應的className屬性獲取的不是class名稱的數(shù)組跟伏，而是一個含有空格的字符串丢胚，這就使得多class操作變得很麻煩。同樣的jQuery開發(fā)者也考慮到這種情況受扳，增加了一個.addClass()方法携龟，用于動態(tài)增加class類名
.addClass( className )方法
.addClass( className ) : 為每個匹配元素所要增加的一個或多個樣式名
.addClass( function(index, currentClass) ) : 這個函數(shù)返回一個或更多用空格隔開的要增加的樣式名
注意事項：
.addClass()方法不會替換一個樣式類名。它只是簡單的添加一個樣式類名到元素上
簡單的描述下：在p元素增加一個newClass的樣式
<p class="orgClass">
$("p").addClass("newClass")
那么p元素的class實際上是 class="orgClass newClass"樣式只會在原本的類上繼續(xù)增加勘高，通過空格分隔
3-5 jQuery的屬性與樣式之刪除樣式.removeClass()
jQuery通過.addClass()方法可以很便捷的增加樣式骨宠。如果需要樣式之間的切換浮定，同樣jQuery提供了一個很方便的.removeClass()，它的作用是從匹配的元素中刪除全部或者指定的class
.removeClass( )方法
.removeClass( [className ] )：每個匹配元素移除的一個或多個用空格隔開的樣式名
.removeClass( function(index, class) ) ： 一個函數(shù)层亿，返回一個或多個將要被移除的樣式名
注意事項
如果一個樣式類名作為一個參數(shù),只有這樣式類會被從匹配的元素集合中刪除 桦卒。 如果沒有樣式名作為參數(shù)，那么所有的樣式類將被移除
3-6 jQuery的屬性與樣式之切換樣式.toggleClass()
在做某些效果的時候匿又，可能會針對同一節(jié)點的某一個樣式不斷的切換方灾，也就是addClass與removeClass的互斥切換，比如隔行換色效果
jQuery提供一個toggleClass方法用于簡化這種互斥的邏輯碌更，通過toggleClass方法動態(tài)添加刪除Class裕偿，一次執(zhí)行相當于addClass，再次執(zhí)行相當于removeClass
.toggleClass( )方法：在匹配的元素集合中的每個元素上添加或刪除一個或多個樣式類,取決于這個樣式類是否存在或值切換屬性痛单。即：如果存在（不存在）就刪除（添加）一個類
- .toggleClass( className )：在匹配的元素集合中的每個元素上用來切換的一個或多個（用空格隔開）樣式類名
- .toggleClass( className, switch )：一個布爾值嘿棘，用于判斷樣式是否應該被添加或移除
- .toggleClass( [switch ] )：一個用來判斷樣式類添加還是移除的 布爾值
- .toggleClass( function(index, class, switch) [, switch ] )：用來返回在匹配的元素集合中的每個元素上用來切換的樣式類名的一個函數(shù)。接收元素的索引位置和元素舊的樣式類作為參數(shù)
注意事項：
- toggleClass是一個互斥的邏輯旭绒，也就是通過判斷對應的元素上是否存在指定的Class名鸟妙，如果有就刪除，如果沒有就增加
- toggleClass會保留原有的Class名后新增挥吵，通過空格隔開
3-7 jQuery的屬性與樣式之樣式操作.css()
通過JavaScript獲取dom元素上的style屬性重父，我們可以動態(tài)的給元素賦予樣式屬性。在jQuery中我們要動態(tài)的修改style屬性我們只要使用css()方法就可以實現(xiàn)了
.css() 方法：獲取元素樣式屬性的計算值或者設置元素的CSS屬性
獲群鲂佟：
.css( propertyName ) ：獲取匹配元素集合中的第一個元素的樣式屬性的計算值
.css( propertyNames )：傳遞一組數(shù)組房午，返回一個對象結(jié)果
設置：
.css(propertyName, value )：設置CSS
.css( propertyName, function )：可以傳入一個回調(diào)函數(shù)，返回取到對應的值進行處理
.css( properties )：可以傳一個對象丹允，同時設置多個樣式
注意事項：
1.瀏覽器屬性獲取方式不同郭厌，在獲取某些值的時候都jQuery采用統(tǒng)一的處理，比如顏色采用RBG雕蔽，尺寸采用px
2..css()方法支持駝峰寫法與大小寫混搭的寫法折柠，內(nèi)部做了容錯的處理
3.當一個數(shù)只被作為值（value）的時候， jQuery會將其轉(zhuǎn)換為一個字符串萎羔，并添在字符串的結(jié)尾處添加px，例如 .css("width",50}) 與 .css("width","50px"})一樣
3-8 jQuery的屬性與樣式之.css()與.addClass()設置樣式的區(qū)別
對于樣式的設置碳默，我們學了addClass與css方法贾陷，那么兩者之間有什么區(qū)別？
可維護性：
.addClass()的本質(zhì)是通過定義個class類的樣式規(guī)則嘱根，給元素添加一個或多個類髓废。css方法是通過JavaScript大量代碼進行改變元素的樣式
通過.addClass()我們可以批量的給相同的元素設置統(tǒng)一規(guī)則，變動起來比較方便该抒，可以統(tǒng)一修改刪除慌洪。如果通過.css()方法就需要指定每一個元素是一一的修改，日后維護也要一一的修改，比較麻煩
靈活性：
通過.css()方式可以很容易動態(tài)的去改變一個樣式的屬性冈爹，不需要在去繁瑣的定義個class類的規(guī)則涌攻。一般來說在不確定開始布局規(guī)則，通過動態(tài)生成的HTML代碼結(jié)構(gòu)中频伤，都是通過.css()方法處理的
樣式值：
.addClass()本質(zhì)只是針對class的類的增加刪除恳谎，不能獲取到指定樣式的屬性的值，.css()可以獲取到指定的樣式值憋肖。
樣式的優(yōu)先級：
css的樣式是有優(yōu)先級的因痛，當外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同一樣式規(guī)則同時應用于同一個元素的時候岸更，優(yōu)先級如下
外部樣式 < 內(nèi)部樣式 < 內(nèi)聯(lián)樣式
.addClass()方法是通過增加class名的方式鸵膏，那么這個樣式是在外部文件或者內(nèi)部樣式中先定義好的，等到需要的時候在附加到元素上
通過.css()方法處理的是內(nèi)聯(lián)樣式怎炊，直接通過元素的style屬性附加到元素上的
通過.css方法設置的樣式屬性優(yōu)先級要高于.addClass方法
總結(jié)：
1..addClass與.css方法各有利弊谭企，一般是靜態(tài)的結(jié)構(gòu)，都確定了布局的規(guī)則结胀，可以用addClass的方法赞咙，增加統(tǒng)一的類規(guī)則
2.如果是動態(tài)的HTML結(jié)構(gòu)，在不確定規(guī)則糟港，或者經(jīng)常變化的情況下攀操，一般多考慮.css()方式
3-9 jQuery的屬性與樣式之元素的數(shù)據(jù)存儲
html5 dataset是新的HTML5標準，允許你在普通的元素標簽里嵌入類似data-*的屬性秸抚，來實現(xiàn)一些簡單數(shù)據(jù)的存取速和。它的數(shù)量不受限制，并且也能由JavaScript動態(tài)修改剥汤，也支持CSS選擇器進行樣式設置颠放。這使得data屬性特別靈活，也非常強大吭敢。有了這樣的屬性我們能夠更加有序直觀的進行數(shù)據(jù)預設或存儲碰凶。那么在不支持HTML5標準的瀏覽器中，我們?nèi)绾螌崿F(xiàn)數(shù)據(jù)存取? jQuery就提供了一個.data()的方法來處理這個問題
使用jQuery初學者一般不是很關心data方式鹿驼，這個方法是jquery內(nèi)部預用的欲低，可以用來做性能優(yōu)化，比如sizzle選擇中可以用來緩存部分結(jié)果集等等畜晰。當然這個也是非常重要的一個API了砾莱，常常用于我們存放臨時的一些數(shù)據(jù)，因為它是直接跟DOM元素對象綁定在一起的
jQuery提供的存儲接口
jQuery.data( element, key, value ) //靜態(tài)接口,存數(shù)據(jù)
jQuery.data( element, key ) //靜態(tài)接口,取數(shù)據(jù)
.data( key, value ) //實例接口,存數(shù)據(jù)
.data( key ) //實例接口,存數(shù)據(jù)
2個方法在使用上存取都是通一個接口凄鼻，傳遞元素腊瑟，鍵值數(shù)據(jù)聚假。在jQuery的官方文檔中，建議用.data()方法來代替闰非。
我們把DOM可以看作一個對象膘格，那么我們往對象上是可以存在基本類型，引用類型的數(shù)據(jù)的河胎，但是這里會引發(fā)一個問題闯袒，可能會存在循環(huán)引用的內(nèi)存泄漏風險
通過jQuery提供的數(shù)據(jù)接口，就很好的處理了這個問題了游岳，我們不需要關心它底層是如何實現(xiàn)政敢，只需要按照對應的data方法使用就行了
同樣的也提供2個對應的刪除接口，使用上與data方法其實是一致的胚迫，只不過是一個是增加一個是刪除罷了
jQuery.removeData( element [, name ] )
.removeData( [name ] )
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left,
.right {
width: 300px;
height: 120px;
}
.left div,
.right div {
width: 100px;
height: 90px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>jQuery.data()靜態(tài)方法</h2>
<div class="left">
<div class="aaron">
<p>點擊看結(jié)果</p>
<p>jQuery.data</p>
</div>
<div><span></span></div>
</div>
<h2>.data()實例方法</h2>
<div class="right">
<div class="aaron">
<p>點擊看結(jié)果</p>
<p>.data</p>
</div>
<div><span></span></div>
</div>
<script type="text/javascript">
$('.left').click(function() {
var ele = $(this);
//通過$.data方式設置數(shù)據(jù)
$.data(ele, "a", "data test")
$.data(ele, "b", {
name : "慕課網(wǎng)"
})
//通過$.data方式取出數(shù)據(jù)
var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name
ele.find('span').append(reset)
})
</script>
<script type="text/javascript">
$('.right').click(function() {
var ele = $(this);
//通過.data方式設置數(shù)據(jù)
ele.data("a", "data test")
ele.data("b", {
name: "慕課網(wǎng)"
})
//通過.data方式取出數(shù)據(jù)
var reset = ele.data("a") + "</br>" + ele.data("b").name
ele.find('span').append(reset)
})
</script>
</body>
</html>
