把當年的學習筆記發給大家看看，希望大家都能養成良好的學習方法。
從此開始我的JQuery學習歷程，首先說下自己的學習心得，“不懂就學，不會就抄，會了就總結”。現在便是該總結的時候了，這是一個很重要的習慣，只有總結了纔算沒有白學。我媳婦說凡事不能半途而廢嘛。呵呵。。。費話不多說了，首先講下JQuery….
一。 JQuery的作用與規範
jQuery是javascript的一個框架，JQuery可以取代javascript更輕鬆地完成編程任務，有時可以將代碼精簡爲一兩行。
書寫JQuery時應該注意一些編程規範，最主要是要使用自己的命名空間來防止和其它程序的衝突，最好將代碼組織爲整潔而有條理的模塊。
二。 選擇和過濾
顧名思義就是通過jQuery找到HTML中的具體DOM元素或元素集。只有找到相應的DOM元素並將其轉換爲對象纔可以對其進行操作。JQuery提供了一系列的方法來選擇和過濾DOM中的元素。
例一：
var tmpExample = {
ready : function(){
$(‘input#tmpDialogueOpen’).click(
function($e){
$e.preventDefault();
$(‘div#tmpDialogue’).addClass(‘tmpDialogueOn’);
}
);
$(‘input#tmpDialogueClose’).click(
function($e){
$e.preventDefault();
$(‘div#tmpDialogue’).removeClass(‘tmpDialogueOn’);
}
);
}
};
$(document).ready(tmpExample.ready);
首先創建了一個字面對象tmpExample，其中包含一個ready方法。最後用$(document).ready(tmpExample.ready);當文檔加載完成後執行tmpExample對象的ready方法。這是一種寫法。也可寫成：
$(document).ready(
function(){
……………..
};
)
意思就是$(document)對象掛構了一個ready事件，當文檔準備好後事件被觸發，執行下面的回調函數function.
裏面的$(‘input#tmpDialogueOpen’)即將id爲tmpDialogueOpen的input元素，將其變成一個jquery對象。
‘input#tmpDialogueOpen’就是最普通的像CSS一樣的選擇元素或元素集的方法，然後在該對象後掛構一個click點擊事件，當事件被觸發就執行下面回調函數。$e爲事件對象，指的是click事件本身，$e.preventDefault();是阻止click事件的默認動作發生。然後爲’div#tmpDialogue’添加一個樣式類名爲tmpDialogueOn。
從這裏我們可以看出來，jquery的格式無非就是，用$()將DOM元素變成對象，然後在對象後掛構事件，事件裏面一般傳遞一個用於執行動作的回調函數。即： 對象.事件(動作); 哈哈，這樣看來jquery也沒什麼呀，不像剛開始看的時候那麼亂和複雜了。
選擇元素或元素集，就是根用CSS一樣的呀，這些可以參考下CSS教程，我瞭解的也不全，以後看看這方面的書吧，順便學下CSS。
知道怎麼選擇DOM元素或元素集了，那麼接下來學習怎麼過濾DOM元素的選擇集。jquery提供了很多方法用來過濾，很簡單隻要記住這些方法就行了，
(1) find() 在選擇集中查找指定元素。
Example:
$(‘ul#tmpFavorites’).find(‘li’).addClass(‘tmpFound’); //選擇ID爲tmpFavorites的UL下面的所有li元素。
(2) siblings() 兄弟 查找元素的兄弟節點。
Example:
$(‘ul#tmpPlaces li.tmpExampleCity’).siblings(‘.tmpRealmOfMen’).addClass(‘tmpSiblings’); //選擇id爲tmpPlaces的UL下面class爲tmpExampleCity的兄弟節點，在兄弟節點裏找到類名爲tmpRealmOfMen的兄弟元素。
(3) next() prev() nextAll() prevAll() 下一個，上一個，後面所有的， 前面所有的 （元素）
Example:
$(‘ul#tmpFavorites’).next().addClass(‘tmpFound’); //取id爲tmpFavorites的ul的下一個元素
$(‘ul#tmpFavorites’).prev().addClass(‘tmpFound’); //取id爲tmpFavorites的ul的上一個元素
$(‘ul#tmpFavorites’).nextAll().addClass(‘tmpFound’); //取id爲tmpFavorites的ul的下面所有的元素
$(‘ul#tmpFavorites’).prevAll().addClass(‘tmpFound’); //取id爲tmpFavorites的ul的上面所有的元素
(4) parents() parent() 父輩們 父親 （元素） 查找元素的所有父輩節點。 查找元素的父親節點。
Example:
$(‘li.tmpExampleCity’).parents(‘div#tmpPlacesWrapper’).addClass(‘tmpParent’); //查找類名爲tmpExampleCity的li元素的所有父輩節點裏面id爲tmpPlacesWrapper的div元素。
$(‘li.tmpExampleCity’).parent().addClass(‘tmpParent’); //查找類名爲tmpExampleCity的li元素的父親節點，
(5) children() 兒子 選取一個元素的子元素。
Example:
$(‘ul’).children().addClass(‘tmpChild’); //查找ul的所有子元素。
(6) not() 反選元素
Example:
$(‘li’).not(‘li.tmpThreeStooges’).addClass(‘tmpFunny’); //查找所有LI裏面類名不爲tmpThreeStooges的所有元素。
(7) slice() 片段 選取元素集中的片段子集
Example:
$(‘li’).slice(0, 4).addClass(‘tmpFunny’); //查找所有li裏面的第1個到第4個元素。
$(‘li’).slice(5).addClass(‘tmpFunny’); //查找所有li裏面的第5個元素後面的所有元素。
(8) add() 加一個元素或元素集。 就是並集求和
Example:
$(‘ul#tmpMarx li’).add(‘ul#tmpAbbot li’).addClass(); //查找’ul#tmpMarx li’ + ‘ul#tmpAbbot li’ 的所有元素
(9) eq() 等於，就是從結果集中選擇特定元素。
example:
$(‘ul li’).eq(3).addClass(‘tmpQueen’); //查找ul下面所有LI中編號爲3的li，即第一4個li元素。
好了，基本的就是這些方法了，其它的具體的可以參考Jquery手冊。從這又可以把上面總結的加深一點，jquery的結構就是 對象.過濾.事件(對象.過濾.操作) 還有要指當前事件就用$e（也可以自己定義）,要指當前元素對象就用$(this),嘿嘿。從這看是不是Jquery很簡單了，還提供了很多簡單的方法，難怪會把javascript變得更簡單呢，本人思想一直就是化繁爲簡，怎麼簡單怎麼搞，相信以後的程序會越來越簡單呀，對於PHP我一直都是流水線似的寫程序，不會方法也不會對象，學了會JQuery發現要使程序變得簡單清晰還是少不了這些東西，以後要加緊學習怎麼搞PHP的面象對象了。
好了，講了選擇和過濾元素和元素集，那下面就是掛構事件了。
三，事件。
對於事件，jquery不僅簡化了提供了很多方法，還處理了一些跨瀏覽器不兼容的現象和一些限制，對於不兼容不用提了，肯定是很鬱悶的一個東西了，
限制比如像傳統的事件模型只能掛構一個事件，W3c事件模型可以掛構多個事件。還有this關鍵字在一般的事件模型中都是指當前元素對象，而在IE裏面則是指window對象，因爲IE不支持W3c事件模型，它用的是Microsoft JScript事件模型，對於不同的事件模型掛構事件的方法也不一樣，然而Jquery在這些方面都有處理和統一。
jquery掛構事件的方法有兩種，一種是bind()方法綁定事件，二種是直接使用事件方法就可以綁定，比如。click() 等， 如果是模擬執行，則直接調用事件方法就可以。
來總結下事件方法：
(1) bind() //綁定事件方法。
Example:
$(document).bind(
‘ready’,
function(){
$(‘div’).bind(
‘mouseover’,
function(){
$(this).addClass(‘tmpExampleOver’);
}
)
};
)
先是對象.bind()綁定方法，其中傳入兩個參數，一個是要綁定的事件，二個是事件執行的回調函數。 即：對象.bind(‘事件’，動作 )
(2) 事件方法，
1， mouseover() //當鼠標移到上面時。
Example:
$(‘div’).mouseover(
function(){ $(this).addClass(‘tmpExampleOver’); }
)
2， mouseout() //當鼠標移走時。
Example:
$(‘div’).mouseout(
function(){ $(this).addClass(‘tmpExampleOver’); }
)
3， click() //當鼠標點擊時。
Example:
$(‘div’).click(
function(){ $(this).addClass(‘tmpExampleOver’); }
)
4， toggle() //當鼠標交互點擊時。
Example:// 因爲是交易動作，所以點一下執行第一個function再點一下執行下個 function,這樣交替執行，還可以有很多個function,做爲參數。
$(‘div’).toggle(
function(){ $(this).addClass(‘tmpExampleOver’); }
function(){ $(this).removeClass(‘tmpExampleOver’); }
)
5， hover() //mouseover()和mouseout()方法的交互動作，此方法和toggle()方法一樣也是交互性的。
6， focus() 得到焦點時
7, blur() 失去焦點時
可以看到，這裏直接用事件方法加在對象後面，而省略了bind()這步操作，這就又簡化了吧。
(3) 觸發事件
jquery提供了一個trigger()方法來觸發事件，也可直接寫事件方法不要參數來了觸發事件。
Example:
$(document).ready(
function(){
$(‘input’).focus(
function(){ $(this).addClass(‘tmpFocused’); }
);
$(‘input’).blur(
function(){ $(this).removeClass(‘tmpFocused’); }
);
$(‘input’).trigger(‘focus’); //此處的trigger()即爲觸發事件，觸發上面的focus事件，當網頁加載後立即執行focus事件
這裏也可以用 $(‘input’).focus(); 這種形式直接觸發。
}
)
好了，事件也就是這些了，其實最簡單就是一個方法掛構在一個對象上，方法裏面的參數是要執行的動作。
知道了元素集對象，事件，那接下來就是事件要執行的操作了。也就是對DOM元素內容和屬性的操作。
四，操縱內容和屬性
這一部分也是jquery最核心的動作部分，前面所學的都是爲了執行這些操作，Jquery提供了很多方法來滿足我們的需要，所以內容相對比較多吧。
(1) 設置和訪問屬性 attr()
attr()有四種使用的方式：
1， $(this).attr(‘id’); 則是獲得屬性id的值，
2， $(this).attr(‘id’,'tmpExample’); 則是設置屬性id的值班爲tmpExample
3， $(this).attr( 通過傳入一個對象字面量作爲參數，設置多個屬性的值。
{
id: ‘tmpExample’,
title: ‘xxxxx’,
href: ‘http://www.example.com’
}
);
4， $(this).attr( 通過傳入一個回調函數來設置屬性的值。
‘id’,
function()
{ return ‘tmp’ + $(this).text(); }
);
(2) 操縱類名。 addClass() hasClass() removeClass()
(3) 操縱HTML和文本內容
1, html() 設置或獲取一個或多個元素的HTML內容。
$(this).html(‘sssssssssssssssssssssss<i>ggggggggg</i>’);
2, text() 設置或獲取一個或多個元素的文本內容。
$(this).text(‘sssssssssssssssssssssss<i>ggggggggg</i>’);
html(”) text(”) 如果不加字符串參數，則爲刪除內容。
3, append() prepend() 將內容添加到當前元素的子節點之前或之後。
$(this).append(‘sssssssssssssssssssssss<i>ggggggggg</i>’); //當前元素子節點後插入引號內的內容
$(this).prepend(‘sssssssssssssssssssssss<i>ggggggggg</i>’); //當前元素子節點前插入引號內的內容
4, after() before() 將內容添加到當前元素節點的之前或之後。
$(this).after(‘sssssssssssssssssssssss<i>ggggggggg</i>’); //當前元素之後插入引號內的內容
$(this).before(‘sssssssssssssssssssssss<i>ggggggggg</i>’); //當前元素之前插入引號內的內容
5, insertAfter() insertBefore() 將一個選擇集中的元素插入到另一個選擇集中的元素之前或之後。
$(this).insertAfter(‘div#tmpExample’); //將當前元素的內容插入到id爲tmpExample的DIV之後。
$(this).insertBefore(‘div#tmpExample’); //將當前元素的內容插入到id爲tmpExample的DIV之前。
6, wrap() wrapAll() wrapInner() 將一個或多個元素包裝在另外的元素中。
$(this).wrap(‘<div></div>’); //wrap()是將選擇集中的元素分別包裝到div中。如果有4個元素，那4個元素每個外面加上一個DIV。
$(this).wrapAll(‘<div></div>’); //將當前選擇集的元素全部包裝在一個DIV中。
$(this).wrapInner(‘<div></div>’); //wrapInner()如wrap()相似是分別包裝，只是它是把內容分別包裝到div中。
(4) 替換元素
1， replaceWith(); //用傳入的內容參數替換選擇元素的內容。
$(this).replaceWith(‘<p>ffffffffffffffffffffff</p>’); //用<p>ffffffffff</p>替換$(this)的內容。
2， replaceAll(); //用選擇元素的內容替換傳入元素的內容。
$(p).replaceAll(this); //用P元素中的內容替換this當前元素中的內容。
(5) 移除內容 empty() remove()
(6) 克隆內容
clone() 克隆複製內容的元素以及其所有子節點， 如果傳入參數clone(true)還可以克隆其中的事件處理函數。
OK，常用的操作方法也就這些，在實際應用中多加使用就會熟練了。接下來該幹什麼呢，恩，玩了一天，接着來，發現總不想學習，很鬱悶。。。。。。
五，數組和迗代
看這節的名字都有點害怕，感覺很難的樣子。怎麼辦？那就讓我們來化繁爲簡吧，
這節肯定是講數組的，還有遍歷數組這些東西的，以前要遍歷都是用的FOR循環，比較麻煩，現在JQuery用於遍歷數組的方法是：
(1) each() 數組和選擇集的遍歷
1， 怎麼用：兩種方式，1， $(數組).each(操作); 2， $.each(數組，操作);
Example:
$(document).ready(
function(){
var $items = ['john','paul','george','ringo'];
$($items).each( //這裏是第一種形式，
function(){
$(‘ul’).append(“<li>” + this + “</li>”); //每一次循環去的數組中的當前值都可以用this代替
}
);
}
)
Example:
$(document).ready(
function(){
var $items = ['john','paul','george','ringo'];
$.each(
['john','paul','george','ringo'], 這裏是第二種形式，直接將數組做爲一個參數。
function(){
$(‘ul’).append(“<li>” + this + “</li>”); //每一次循環去的數組中的當前值都可以用this代替
}
);
}
)
現在遍歷數組是不是也很簡單了。
2， 變量作用域
這裏提到了一個變量作用域，在js中變量作用域是：如果一個變量在函數，對象，閉包外定義，它就是個全局變量，
如果在函數內定義，前面加上var就是局部變量，前不不加var就是全局變量。
3， 還有for循環裏有break跳出循環，continue跳出當前輪循環，在each裏怎麼寫呢，
return(false); 等價於 break;
return(true); 等價於 continue;
4， each()方法不僅可以遍歷數組，也同樣可以遍歷元素集，同上面一樣，其中this爲遍歷的當前元素，對元素進行操作就$(this)將元素變成對象就可以了。
上面講的都是each()方法，下面還有很多方法，
(2) filter() grep() 對選擇擇集進行過濾 對數組進行過濾
filter() 對選擇擇集進行過濾—對選擇集中的每個元素執行一次過濾
$(‘li’).filter(‘.xxx’); //直接過濾
$(‘li’).filter( function(){ return $(this).hasClass(‘xxx’) } ); //通過回調函數過濾
grep() 對數組進行過濾 它只能使用$.grep這種形式，而不能用$($array).grep()這種是無效的。
$array1 = $.grep(
$arr,
function($value, $key){
return( $value.indexOF(‘you’) != -1 ); //這裏返回的是true就將元素保留在數組中，返回false就將元素移除。
}
)
(3) 映射選擇集或數組 map()
映射：對於一個集合中的值，修改其中一個或多個值，從而創建一個新的集合。在映射過程中不會移除集合中的任何元素。
對象.map(動作);
上面不管是遍歷，過濾還是映射都是屬於循環處理，下面來看一些處理數組的實用方法。
$makeArray(data) 將任何數據轉換爲一個真正的數組。
$.inArray(needle,haystack) 在haystack數組中查找指定元素needle，返回第一次匹配時元素在數組中的索引。
$.merge(first,second) 將second數組合交到first數組中。
$.unique(array) 從數組中移除重複的值。
get() 將一個選擇集轉換成一個新數組。
concat() 將兩個數組連接爲一個新數組。
ok,這部分就這些了，其實也不難吧。呵呵。。。。。。。。。。。。。。。。。。。。。。。。。
六 css
(1) css() 用來訪問和設置css樣式，像傳統js裏面的style一樣。
作用：返回選擇集中第一個匹配元素的一個屬性值。
爲一個或多個元素設置一個或多個屬性值。
$(‘div’).css(‘backgroundColor’);
$(‘div’).css(‘backgroundColor’,'red’);
$(‘div’).css(
{
backgroundColor:’red’,
border:’1px solid red’,
padding:’5px’
}
);
(2) outerWidth() outerHeight() 獲得一個元素的寬和高，寬和高包括border和padding的寬度。
$(‘div’).outerWidth(); //獲得div的寬
$(‘div’).outerWidth({margin:true}); //獲得div包括margin的寬。 google瀏覽器不支持outerWidth()方法
七， ajax
這一節相信對於後臺程序員都是很重要的一節，現在使用無刷新與服務器交互在實際應用中也是越來越多，因爲它將頁面程序變得更像桌面應用程序一樣。jquery將原本很複雜的ajax變得更加簡潔，對實際工作很有幫助。
1， 首先我們要像服務器發送數據請求，在HTTP協議下，有兩種方法即， GET POST。
區別：GET方法是通過url傳遞數據的，用戶可見，長度受url長度限制，但效率要高。POST是通過數據包發送，要比GET容量大，用戶不可見。如果用於獲得數據用GET就好，用於修改數據等用POST比較好。
2， 其次是我們在請求中傳遞數據的格式，ajax傳遞數據的格式主要有 XML,JSON,HTML這三種，當然還有其它的格式。
3， 然後是我們ajax的具體寫法，像很多方法一樣，jQuery提供了三種方法，$.get() $.post() load()
$.方法( ‘請求的頁面鏈接’ ， 發送的數據， 處理響應回調函數，傳遞的數據格式 );
Example:
$.get( //可以是$.get,$.post,$.getJSON()最後一個方法跟get方法一樣，就是可以省略最後一個參數。直接傳JSON格式的
‘Example.php’, //url
{xxxxx:’yyyyy’}, //發送的數據，用對象字面量表式，不發送數據可以省略。
function($xml){ }, //服務器響應並返回數據後的回調函數，對數據進行處理。
‘xml’ //返回的數據格式，可以是xml,json,html。。等等
);
load()方法可以簡單的在元素上返回html片段，可以省略後面的所有參數(也可不省略)，只要一個請求的URL即可。
$(‘div’).load(‘Example.php’);
另外處理xml數據的時候可以像處理DOM元素一樣， $($xml).find(‘sss’).text()這樣去處理。 處理json格式的時候，可以用$json.title用點連接即可。
四，serialize()
JQuery還提供了一個方法serialize()用於從各個輸入元素找到正確的名稱和值，並將其格式化爲查詢字符串。即獲得所有表單中的數據。
$(‘form:input’).serialize() 用它來獲得表單的值做爲發送的數據，也就是第二個參數。
好，主要要學習的是這些內容了，其它的還有效果什麼的，不用說了，可以自己瞭解一下，還有插件，jqueryUI庫，提供了很多強大的功能效果，都可以去了解一下，以上僅爲本人學習所用。不全的地方以後也可以慢慢增加。到此貧道也算是功德圓滿，目前階段JQUERY築基期。