第一章 開始Jquery
1 資源
下載jquery源代碼 http://docs.jquery.com/Downloading_jQuery
2 調用
使用<script type="text/javascript" src="lib/jquery.js"></script> 根據個人jquery.js文件的路徑不同改變 src的值
如果你使用外部文件custom.js調用jquery，使用<script type="text/javascript" src="lib/custom.js"></script>
同樣是根據路徑的不同更改src
使用$(document).ready(function(){ //your code });包含jquery代碼
3 jquery 官方網站 http://jquery.com/
4 jquery 中文社區 http://bbs.jquery.org.cn/frame.php?frameon=yes&referer=http%3A//bbs.jquery.org.cn/thread-8-1-1.html
http://bbs.51js.com/viewthread.php?tid=79244
5 $()函數是一個工廠即工廠函數，是一個基本的創建塊，選擇文檔的一部分，即得到的是一個元素
a tag name : $("p");
an ID : $("#some-id");
a class : $(".some-class");
獲得子節點元素: $("#some-id > li ");
給不含某個類名的其他的標籤付class ：$("#some-id li:not(.some-class)").addClass("some-other-class");
就是給li標籤中class不是some-class的定義一個class some-other-class
當存在多個Js庫的時候$()標籤可能會產生誤解，因爲其是js通用的標籤，這時要使用jQuery代替$
6 添加類 $("").addClass("類名"); 刪除類$("").removeClass("類名");
7 jQuery 允許我們確定函數調用的時間，DOM 被加載後才調用。使用$(document).ready() 結構，不需要等圖像加
載。
8 如何學習
初學，動手要勤於動腦(光看).
以demo爲藍本，一點一點的改，確保每一部修改都能運行。 一段時間後，你就會逐步掌握了。
不要急，初學任何東西都是這樣的！
第二章 選擇器-得到你想要的
1 css選擇器
參見第一章中的 5
2 Xpath路徑選擇器
1）得到具有某個屬性的標籤：$('a[@title]'); 得到函數屬性title的a標籤
2）得到具有某個標籤的標籤：$('div[ol]'); 用來得到含有ol標籤的div標籤
3）正則表達式：
已知標籤的開頭：$('a[@href^="malito:"]'); 得到href屬性以mailto:開頭的a標籤
已知標籤的末尾：$('a[@href$=".pdf"]');得到href屬性以.pdf爲結束的a標籤
已知標籤中的任意位置含有的字符 ：$('a[@href*="mysit.com"]');得到href屬性中含有mysite.com字符的a標籤
3 自定義選擇器
1）得到一個對象或數組中的第二項：$('div.horizontal:eq(1)');得到樣式class爲horizontal的所有標籤集合中的第二項
2) 得到任何div的父親的第一個孩子：$('div:nth-child(1)'); ??
4 樣式化交替的行
：odd 奇數行 $("tr:odd").addClass('some-class1') 給tr標籤中的奇數行賦予樣式some-class1
：even 偶數行 $("tr:even").addClass('some-class2') 給tr標籤中的偶數行賦予樣式some-class2
注意，在一個頁面中如果有超過一個表格的話，或許這不是我們想看到的結果。例如，既然
在這個表格的最後一行有一個灰藍的背景，那 麼在下一個表格的第一行將會有一個灰黃的背
景。在第7章我們會研究如何避免這類問題。
:contains("string") 得到含有的字符串的標籤的文本 $('td.contains("Henry")').addClass("some-class") 得到文本中含有Henry字符串的td標籤,然後將some-class對應的樣式賦給它
5 DOM遍歷方法
參見書上的示例
$("th").parent().addClass("heading_line");
$("tr:not([th]):odd").addClass('odd');
$("tr:not([th]):even").addClass('even');
$('td:contains("Henry")').next().addClass('highlight')?
1) 得到父節點：$("th").parent() 例：設置單獨的行，利用單獨行的子標籤的找到其標籤 即 $("th").parent().
addClass("some-class")；增加類名到達樣式特殊化的效果
2) 得到特殊行以外的兄弟節點：使用not([]) 例 ：排除統一標籤的特殊行 $("tr:not([th])");
3) 得到下一個兄弟節點 ：使用.next() 例 ：參見上面
4) 得到一個標籤後面的兄弟節點：使用.sibling(); 例 ：$('td:contains("Henry")').siblings().addClass('highlight')?
5) gt()和eq(); 例 ：$('td').parent().find('td:gt(0)') .addClass('highlight')? 得到td父標籤，然後找到父標籤的td
子標籤，並過濾掉第一個td子標籤，$('td:contains("Henry")').parent().find('td:eq(1)').addClass( 'highlight')
這個是得到上面所描述的第二個td子標籤
6 訪問DOM元素
1) get():得到元素，相當於document.getElementById() 如果要訪問第一個元素用.get(0),如果有多個元素的話使用.
get(index)來選擇，如果我們想知道 id 爲#myelement 的元素的 tag name 的話，可以用：$('#myelement').
get(0).tagName,爲了方便可以使用如下的方式$('#myelement')[0],同上面是一樣的
第三章 事件——扣動扳機
3.1 在頁面加載後執行任務
1 $(document).ready(function(){}); 使用這個在頁面加載的時候執行js語句，相當於window.onload，可執行多個
函數 function aa(){} function bb(){} $(document).ready(function(){aa();bb()})是有效的
3.2 簡單的事件
1 對於JS的綜合的考慮：遵循漸進增強的原則，頁面的樣式轉換器應該能夠在javascript無效時隱藏起來，甚至跟好的是，
能夠通過鏈接，到當前頁面的替代版本而能起到應有的作用
2 書上是通過一個改變樣式的示例來闡述如何執行一個事件，具體的請參考書
3 .bind() : 執行事件的函數 示例：$(document).ready(function(){$(#id).bind('click',function(){
$('body'.addClass('some-class');)});});
可以捆綁多個觸發事件，這個示例是通過事件來改變不同的樣式，可以添加也可以刪除removeClass('some-class');
jquery有簡寫的方法，就是不用.bind直接接事件 ，$('#id').click(function(){});這種方式是比較常用的
4 環境關鍵字this :當觸發任何事件的時候（這裏是onclick事件）,關鍵字this引用的都是攜帶相應行爲的dom元素，這個
就相當於，我們在html中使用的<a id="alist" oncclick="change('this')">的效果是相同的
5 書上通過環境關鍵字this，簡化了jquery代碼 ，並使用多個函數中具有相同功能的代碼歸併在一個函數中，具體的流程參
見書上29-32頁
3.3 複合事件
1 Jquery中自定義的事件處理程序.ready() , .toggle() , .hover() 後兩個成爲複合事件處理程序
3.3.1 顯示和隱藏內容特性
1 兩個函數 .toggle()和toggleClass() ，toggle()可以執行兩種交替的樣式變換，如果只是隱藏最好的方法是使用後者
示例：$('#id').toggle(function(){$('#id/.class').addClass('hidden')},function(){$('#id/.class').removeClass('hidden')};,)
$('#id').click(function(){$('#id/class').toggleClass('hidden')};) toggleClass方法是自動檢查該類是否存在，存在刪除，不存在添加，這個方法是很好用的
3.3.2
1 jquery實現的點擊觸發事件的標籤可以不被限制在a標籤和button按鈕的範圍，也就是說div標籤也是可以執行.
toggle()方法的，還可以執行toggleClass();和.hover()，就像是鼠標劃過一樣
2 .hover() 示例：類似.toggle() 也是有兩個函數 $('#id').hover(function(){$('#id/.class').addClass('class')},function(){$('#id/.class').removeClasss('class')});
3.3.3 事件撲獲和事件冒泡機制，jquery會在事件冒泡階段註冊事件處理程序,首先相應事件的是最具體的元素，然後會向上冒泡到最外層的父元素。
3.3.4 .hover()可以解決事件冒泡機制帶來的錯誤，所以使用.hover來代替mouseout();mouseover();
3.4 限制和終止事件
1 當使用onclick處理事件時，有必要對事件的作用範圍進行限制.這時就要給事件函數傳遞一個參素就是event事件類
2 event.target：事件目標。這個事件的目標可以確定點擊事件賦予的元素即$('#id')...中的id,而不會產生冒泡的事件，
避免其他的元素相應這個事件
實例：$('#div-id').click(function(event){if(event.target==this){(摺疊的效果)}})就 是說在沒有 這個判讀的時候，div-id代表的標籤下的所有的元素標籤都可以執行摺疊的效果，加上這個就可以控制 只 有點擊id爲div-di的標籤是才能執行摺疊的的效果
3 event.stopPropagation():避免所有的元素都相應這個事件
4 阻止默認事件操作，使用preventDefault();和返回false:,默認事件操作是指比如，點擊a按鈕轉到相應的鏈接，提交表
單submint,轉向到action指定的頁面
5 事件傳播和默認操作是相互獨立的兩套機制，stopPropagation();是阻止事件傳播，而preventDefault()是阻止默認
操作的執行，而返回false是兩者的結合；
6 unbind：反綁定，即接觸事件操作，有利於控制冒泡。反綁定簡寫的方式現在不在使用
7 .one()函數不好用
8 .trigger()：程序加載是執行的事件處理程序，在這裏就是，當頁面信息加載完成後執行摺疊頁面的效果
示例：$('#id').trigger('click');這裏的id要和事件加載的id值保持一致$('#id').click();
簡寫：事件觸發函數沒有任何的參數，即$('#id').click();
第四章 效果—爲操作添加藝術性
4.1 修改內聯css
1 .css:讀取已經存在的樣式和添加樣式，如果不是動態的改變樣式的值的情況下，添加固定的樣式類則和使用.addClass
是一樣的，如果需要添加不斷更新的類的屬性的時候需要使用.css
示例：$('#id').css('property','value'); 多個屬性$('#id').css({'property':'value','property1','vlaue1'})
以後每章具體的示例參見手冊 .css('cursor','pointer')
2 parseFloat()：從字符串中讀取數字
示例 paresFloat("a2355",10)= 2355;這裏面的10含義是確保爲十進制數
3 slice()：從指定的位置開始讀取字符串
4 $('#id')[0].id：得到的是指定元素的id的值,因爲使用$('#id')是創建一個jquery對象，所以要使用下標值
5 書上的示例在ie中是無效的？？
4.2 基本的隱藏和顯示
1 .hide()：隱藏元素下的內容
示例 $('#id').hide();
2 .show()：顯示內容
示例 $('#id').show();
4.3 速度和效果
1 速度參數：.show('slow') .show('normal') .show('fast') 速度分別是0.6 0.4 0.2 秒，也可以使用具體的秒數，但 要注意不能加引號，.show(850) ，show和hide會同事修改多個樣式，包括高度，寬度和不透明度
2 淡入淡出：.fadeIn('slow') 淡入 fadeOut(2000) 淡出
4.4 多重效果
1 fadeIn和fadeOut:不透明度
2 fadeTo:不透明度 示例fadeTo('slow',0.5),將不透明減退到0.5
3 slideDown()和slideUp()：高度，slideUp('slow');向上摺疊
4 animate():多重效果的自定義動畫，包含四個參數，a:屬性和樣式映射，類似.css()，b:速度參數，c：可選的緩動類型
d：可選的回調函數，參數可以是任意的組合
5 通過CSS設置定位：在沒有設置position的值時，所有的塊級元素默認的css定位屬性都是static,這個屬性明確的告訴我 們在改變元素的定位屬性，即使用position:定義位置，之前試圖移動他們是沒有作用的
參見示例
6 w3c中的css規範中的盒模型可以在http://www.w3.org/TR/REC-CSS2/box.html 中找到
7 獲得各種寬度：.width(),按鈕的寬度：$button.width(),邊界的寬度：.css('paddingLeft'),.css('paddingRight')，
邊的寬度：.css('borderRightWidth'),.css('borderLeftWidth');
4.5 併發和排隊
1 排隊效果就是使用.鏈接各種效果 ：示例 .padeTo('slow',0.5).slideUp('slow')
2 對於非效果方法，排隊的效果並不適用於他們，如.css('backgroundColor','#f00');無論放在哪都會先執行
3 對於非效果方法，是同時發生的
4 回調函數：可以使用回調函數來排列非效果方法
5 得到一個元素的兄弟節點，$(this).next();
6 在使用$(this).next.slideShow('slow',function(){ 在這裏面再次使用$(this)時就是代表的是兄弟節點})，如果不想
是兄弟節點，那麼就要在外面將$(this)賦予一個變量後再使用，var $thisPara =
$(this)(如果要想在ie中好用 ，就要現定義$thisPara=Object();,後在賦值就好用了),$thisPara.next.slideShow
('slow',function(){這時使用$thisPara就不是兄弟節點了})
第五章 DOM操作——基於命令改變頁面
1 在網頁中創建元素，屬性和文本
5.1 操作屬性
1 .each()：類似for循環，方法帶有index參數，類似循環計數器，
示例：$('#id').each(function(index){$(this).attr({'id','id'+index})})
2 .text()：獲取文本屬性的值
示例：$('#id a').text();
3 $('div.chapter a[@href*=wikipedia]').each()：這個是更確定作用的範圍，具體的含義參看第二章
4 .attr()：添加屬性，示例 .attr({'rel','external'})
5.2 插入新元素
1 $()：這個工廠方法的用處是在括號中的元素如果存在則，讀取，如果不存在則創建新的元素。
如：$(<a href="http://www.sina.com">aa</a>)
2 .insertAfter(),after(),insertBefore(),before() ：用於插入新元素，insertAfter()和after()的不同之處是
$('<a href="#top">back to top </a>').insertAfter('div.chapter p');
$('div.chapter p').after('<a href="#top">back to top </a>');
可以看到只是位置的不同，但就是這個不同在實現連綴其他方法的操作中，前者是對a元素做更多的操作，後者是對所選
擇的元素進行連綴操作，所以方便還是前者。
3 eq()和gt()：gt和eq的區別是gt作用於給定位置之後的元素，eq作用於當前元素
5.3 移動元素
1 什麼叫隱式迭代
2 使用insertAfter和insertBefore插入，移動元素，那麼註腳的次序就會被顛倒 參見示例，這兩個插入都是在div標籤之
外，即<div></div>+insertAfter之後
3 $A.appendTo('#id')：將內容插入到指定的元素中，即在div標籤裏面
$A.append('B')：也是將內容插入到指定的元素中，兩者的區別是前者是把A追加到#id中，後者是相反，把B追加到A
中，實際上執行的是appendChild操作，添加爲最後一個子結點
4 $a.prependTo($b)：將a的內容移動到b標籤中
$a.prepend($b) ：將b的內容移動到a標籤中，相當於appendChild();添加爲第一個子節點
5.4 包裝元素
1 $a.wrap(<li></li>)：將內容a裝入標籤li中，即在$a的外層添加一個標籤，例如可以是div,參見示例
5.5 複製元素
1 $a.clone().$b：將a複製到b處
2 $a.clone(false).$b：只會複製標籤元素a裏面的文本內容將不會複製
3 5.5.2 1 ：使用樣式定位元素內容
4 .prependTo()和.prepend()參見5.3
5 $a.find('b')：找到正在處理的元素a的後代元素的好方法,b可以是標籤，id，class值
6 $a.html('b')：使用b替換a標籤中的所有的內容,不能用於xml文檔
7 $a.b.end().appendTo(c)：end()是結束所有的進階，回到最原始的處理元素，a,一般用作將a元素處理一系列操作
後，插入到c的子元素中
8 $a.text() ：得到元素a中所有的文本，取出html標籤
5.6 DOM操作方法的歸納
1 $('p').empty()：刪除元素中所有的子節點
2 $a.text('b') ：使用文本b替換a元素中的內容
3 $a.remove()：刪除a標籤及其所有的子結點，$a.remove('.class')：刪除a標籤中類是class的元素及其所有的子結點
第六章 AJAX 讓網站與時俱進
6.1 基於請求加載數據
1 $a.load('b')：加載數據，引入html文件片段，b可以是函數，是一個Html文件的ur，a是引入的標籤
2 $.each()：這個和$a.each()的區別是後者只能迭代和執行jquery對象的函數，前者可以用於迭代任何對象和數組
3 $.getJSON()：讀取json文件，產生一個回調函數得到Json文件裏面的數據，然後使用$.each()來取得輸出的內容，只
是有一個問題在文件當中得到的始終不是一個json格式，而是把其當作字符串來處理，就是沒有實現書上
面的示例
4 $.getScript('b')：得到調用的b.js文件
5 $.get()：用get方式請求裝入頁面.主要是讀取xml文件和向php文件中傳遞值和讀取回調函數
6.2 選擇數據格式
1 數據格式共有四種：就是6.1 中的 1 3 4 5具體採用何種方式要符合你的應用
2 應用：
html 片段：是最簡單的，在不需要與其他應用程序共享數據的情況下使用
json：在性能和文件的大小上具有優勢，易於重用。
javascript：對數是不推薦使用的，優勢是可以將很少用到的行爲提取到外本文件中去，減少加載的頁面的代碼量
xml：具有非常強大的可移植性，如果未知遠程應用程序的時候，XML可提供很好的互操作性，缺點是過於龐大
6.3 向服務器傳遞數據
1 執行GET請求，就是在按鈕或鏈接處，調用目標php文件的時候，在url的後面添加上？para參數，然後通過$.get()方法 傳遞參數給php文件，示例中使用的是$.get()方法，也可以把結果組織成json使用$.getJSON()的方法
2 執行post請求：1）可以與$.get()互換 2）使用$.load（）方法簡化，因爲其默認的傳遞方式就是post,示例中的.load
()方法沒有解決 rerurn false的問題
3 關於form的操作
1) $a.submit()：對提交表單的事件進行操作，類似於$a.click()
2) .val()：獲取input標籤中的value的值，如果裏面有參數那麼就是替換input中的value的值
3) .serialize()：將input元素的內容連接成一個請求字符串，示例中還是有些問題
對form的操作還是選用form.js插件
6.4 關注請求
1 $a.ajaxStart()：在AJAX開始執行是調用的函數
2 $a.ajaxStop()：在AJAX最後一次請求活動結束時調用的函數
3 頁面加載緩慢時候的處理，即先顯示一個加載信息的圖示，還有加載過後的顯示信息的效果見示例
6.5 AJAX和事件
1 當再給頁面中的h3 標籤設置點擊高亮的時候，由加載產生的字典標題的標籤也是h3,但點擊時並不會產生高亮的效果，
這是因爲在加載時字典的詞條還不是DOM的一部分，因此不會爲他們綁定事件處理程序，解決，綁定的元素單獨綁定自
己的事件處理函數，也就是說將事件處理函數設置成一個獨立的函數，在頁面顯示和頁面加載的內容裏面都調用這個函數
就可以了
2 以上說明了如果只是給頁面的時間單獨增加事件的話，頁面加載的內容在相同的情況下是不會執行此事件的。
3 雙觸發情況，就是有時在點擊h3標籤的時候會兩次觸發綁定事件這樣就不會有效果產生，具體的解釋參見書92頁，解決
見4
4 限定事件綁定函數的作用域：$()函數可以接收兩個參數，第二個用於限定搜索範圍的dom節點，在綁定事件中使用這一
特性，就可以避免多事件綁定問題具體參見示例
5 利用事件冒泡來解決3的問題：就是在他們的父標籤中加入綁定事件程序，然後在限制可以使用這個事件的子元素，利用
的是if($(event.target).is('h3')){} 來操作，注意$(event.target)和.is();
6.6 安全限制：沒有看
第七章 表格操作
1 tr:odd和tr:even：前者代表第偶數個tr標籤，後者代表第奇數個tr標籤，可以用來設置具有交替效果的實現，不一定就
是tr標籤，其他的任何標籤都可以，這樣很方面產生交替的效果
2 排序一般的是使用.sort()函數，比較複雜沒有做完，包括很多的效果比如分頁等等
3 如果tr是不規則的排列的話就要使用a:not([d])了將不規則的a元素的子元素d排除在外，a元素的其他子元素正常應用類
4 三種背景色
1） $a.not('[b]')：a元素中除去子元素b的其他子元素
2） .each(function(index){})：使用each內建的索引，就是遍歷所有符合條件的元素，然後給每一個元素都賦予下標索
引
3） 將三種背景色的class寫成數組，然後使用index % 3 取模的方式，作爲數組的下標，在交替的時候都會採用索引除以
基數取模的方式，來實現效果
5 三行一組的交替背景色
1） 如果不是規則的使用索引，就要自定義一個索引控制標籤，來產生效果
2） 同樣是使用取模的方式來實現效果
6 行的高亮
1）主要是使用的標籤排除，和toggleClass,removeClass,each 有問題效果沒有實現,只是第一行出現了效果
7 提示信息
1）鼠標點擊的位置成手掌狀，只需在.click()之前加上$a.addClass('pointer').click()即可，充分利用.符號式
2) var dd=function(event){} event代表的是事件執行的元素
3）event.pageX：是元素當前x軸的位置，event.pageY是元素當前y軸的位置，xm=event.pageX-5就是代表在鼠標
左邊5像素，ym=event.pageY+20,就是代表在鼠標下方20像素,注意在ie和firfox下的兼容問題 ，參見示例，另外一點也很重要，同樣是參見示例。
4）$("<div class="tooltip">Click from d echi </div>")appendTo('body'); 可以使用這個語句直接把內容添加到body的最後面
5）.hover(over,our)：這個函數是鼠標的事件，前一個是鼠標懸停在對象上面執行的函數，後一個函數是鼠標移出這個對
象執行的函數
6）.mousemove(function)：當鼠標移動時觸發的事件,function代表的是觸發的函數，執行的效果就是當鼠標移動的時
候，效果也是隨之移動
7）a.call('object,para')：a可以是函數對象也可以是類對象，此方法是把a賦予對象object，如果a是函數對象，那麼在
類object中執行函數a,如果a是類對象，那麼a中所有的方法在object中都是可以調用的，就相當於object是類a的繼
承，para是a中需要用到的參數
