JQuery官方網站
1、JQuery概念
A、Jquery是一個優秀的Javascript框架。它是輕量級的js庫 ，它兼容CSS3，還兼容各種瀏覽器，jQuery2.0及后續版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML documents、events、實現動畫效果，並且方便地為網站提供AJAX交互。jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html里面插入一堆js來調用命令了，只需定義id即可。
B、JavaScript的缺點:控件的操作方式不統一，不同瀏覽器容易出觀兼容問題。為了簡化操作，出現了許多對JavaScript封裝的函數庫比如Prototype、JQuery等。
C、JQuery的優點:小巧、方便、功能強大。插件豐富、開源、免費。
D、VS在VS2010中已經實現自動完成功能，VS2008需要安裝VSSP1補丁和VS90SP1-KB958502-X86補丁才能更好的支持，然后引用jquery-1.4.1.js，jquery-1.4.1-vsdoc.js放在同目錄下，VS2008中才會有自動提示和自動完成功能。
E、JQuery文件說明:
jquery-1.4.2.js是JQuery主文件。
jquery-1.4.2.min.js是壓縮板JQuery主文件。
jquery-1.4.2-vsdoc.js是JQuery在VS中的自動提示功能。
2、JQuery之Ready
A、JQuery的read和Dom onload的區別:onload是所有Dom元素創建完畢觸發，而ready則是Dom元素創建完就觸發，這樣可以提高網頁的響應速度。
3、JQuery內置函數
A、$.map(array, function)函數:對數組array中每個元素調用function函數逐個處理，function函數處理返回一個新的數組。如:
var array = [3, 6, 9];
var arrary2 = $.map(array, function(item) { return item * 2 });
for (var i = 0; i < arrary2.length; i++) {
alert(arrary2[i]);
};
或: alert(arrary2);
注: $.map函數不能處理dictionary風格的數組。
B、$.each(array, function)對array每個元素進行處理，但沒有返回值。
var array = ["TOM", "湯姆", "Jerry", "傑瑞"];
$.each(array, function() { alert(this); });
或:
var dict = { "TOM": 20, "Jerry": 50 };
$.each(dict, function(key, value) { alert(key + "=" + value); });
4、JQuery對象與Dom對象
A、JQuery對象是通過對Dom對象的封裝產生的對象。
B、Dom對象要想通過JQuery進行操作，需要先轉換成JQuery對象。
$(‘#div1’).html等價於:document.getElementByid(‘div1’).innerHTML;
$(‘#div1’)得到的是JQuery對象，JQuery對象可以調用JQuery對象封裝的方法，不能調用Dom對象的方法，Dom對象也不能調用JQuery對象的方法。
C、將Dom對象轉換成JQuery對象的方法，$(Dom對象)。當調用JQuery沒有封裝的方法時必須用Dom對象，轉換方法:var docobj = jqobj[0]或var domobj=jqobj.get(0)。
D、樣式的修改：
JQuery修改樣式方法:$(“#div1”).css(“background”, “red”);
JQuery獲得樣式的方法:$(“#div1”).css(“background”);
修改value值方法:
JQuery修改value方法: $(“#div1”).val(“Dragon”);
JQuery獲得value方法: $(“#div1”).val();
5、JQuery選擇器
A、JQuery選擇器用於查找滿足條件的元素，比如可以使用$(“#控件id”)來根據控件id獲得控件的JQuery對象。相當於getElementByid。
B、$(“TagName”)來獲取所有指定簽名的JQuery對象，相當於getElementsByTagName。
C、CSS選擇器，同時選擇擁有某個樣式的多個元素:
$(“.text”).click(function(){alert($(this).text();)});
D、多條件選擇器:$(“p,div,span.menuitem”),同時選擇p標簽、div標簽和擁有menuitem樣式的span標簽。
E、層次選擇器:
1、$(“div li”)獲取div下的所有li標簽(后代，子、子的子標簽…)。
2、$(“div > li”)獲取div下的直接li子標簽。
3、$(“.menuitem + div”)獲取樣式名為menuitem之后的第一個div標簽。
4、$(“.menuitem ~ div”)獲取樣式名為menuitem之后的所有div標簽。
6、JQuery隱式迭代
A、注:如果用隱式迭代就會不容易發現錯誤。
$(function(){
var elements = $(“#btn1”);
If (elements.length <= 0){
alert(“沒有找到提定對象”);
return;
}
elements.mouseover(function(){ alert(“找到了”)});
7、節點遍歷
A、next()方法用於獲取節點之后的挨着的第一個同輩標簽，$(“.menuitem”).next(“div”)、nextAll()方法用於獲取節點之后的所有同輩標簽。
B、siblings()方法用於獲取所有同級標簽。
8、鏈式編程
A、JQuery可以實現鏈式編程
9、JQuery過濾選擇器
A、:first選擇第一個標簽。$(“div:first”)選取第一個<div>。
B、:last選取最后一個標簽。$(“div:last”)選取最后一個<div>。
C、:not選取不滿足選擇器條件的標簽。$(“input:not(.myclass)”)選取樣式名不是myclass的<input>標簽。
D、:even、:odd，選取索引是奇數、偶數的標簽:$(“input:event”)選取索引是奇數的<input>。
E、:eq、:gt、:lt選取索引等於、大於、小於索引序號的標簽，比如$(“input:lt(1)”)選取索引小於1的<input>。
F、$(“:header”)選取所有的h1…h6標簽。
G、$(“div:animated”)選取正在執行動畫的<div>標簽。
10、屬性過濾選擇器
A、$(“div[id]”)選取有id屬性的<div>。
B、$(“div[title=test]”)選取title屬性為“text”的<div>。
C、$(“div[title!=test]”)選取title屬性不為“text”的<div>。
11、表單對象選擇器
A、$(“#form1:enabled”)選取id為form1的表單內所有啟用的標簽。
B、$(“#form1:disabled”)選取id為form1的表單內所有禁用的標簽。
C、$(“#form1:checked”)選取所有選中的標簽。(checkBox)。
D、$(“#form1:selected”)選取所有選中的選項標簽。(下拉列表)。
12、JQuery的Dom操作
A、使用html()方法讀取或設置標簽的innerHTML:
alert($“a:first”).html());
$(“a:first”).html(“hello”);
B、使用text()方法讀取或設置標簽的innerText:
alert($(“a:first”).text());
$(“a:first”).text(“hello”);
C、使用att()方法讀取或設置標簽的屬性:
alert($(“a:first”).attr(href”));
$(“a:first”).attr(“href”, http://www.rupeng.com);
D、使用removeAttr刪除屬性。
13、動態創建Dom節點
A、使用$(html字符串)來創建Dom節點，返回一個JQuery對象，然后調用append方法將新創建的節點添加到Dom中
var link = $(“<a href=’http://www.baidu.com’>百度</a>”);
$(“div:first”).append(link);
Append方法用來在標簽的末尾追加標簽。
prepend在標簽的開始添加標簽。
after在標簽之后添加標簽。
before在標簽之前添加標簽。
14、刪除節點
A、remove()刪除選擇的節點。
如:清空ul中的項。$(“ul li.testitem”).remove();刪除ul下的li id=testitem的標答。
B、remove()方法返回值是被刪除的節點對象，還可以繼續使用刪除的節點。
var lis = $(“#ulsite li”).remove();
$(“#ulsite2”).append(lis);
C、empty()是將節點清空。
15、設定按鈕的啟用時間
<script type=“text/javescript”>
var leftseconds = 10
var intervalid;
$(function(){
$(“#btnReg”).attr(“disabled”,true);
Intervalid = setInterval(“countDown()”,1000);
}
Function CountDown(){
if(leftseconds <= 0){
$(“#btnReg”).val(“同意”);
$(“#btnReg”).attr(“disabled”,false);
clearIntervalid(Intervalid);
return;
}
Leftseconds--;
$(“#btnReg”).val(“請仔細閱讀”+ Leftseconds + “”);
}
</script>
16、樣式操作
A、獲取樣式attr(“class”)，設置樣式attr(“class”, “myclass”)。
B、追加樣式addclass(“myclass”)。
C、移除樣式removeclass(“myclass”)。
D、切換樣式togleclass(“myclass”)。如果存在則去掉樣式，如果不存在則添加。
E、判斷樣式是否存在:hasclass(“myclass”)。
17、RadioButton操作
A、取RadioButton選中值:
$(“input[name=gender]:checked”).val()
<input id= “radio1” checked= “checked” name= “gender” type= “radio” value= “男” />男
<input id= “radio2” checked= “checked” name= “gender” type= “radio” value= “女” />女
<input id= “radio3” checked= “checked” name= “gender” type= “radio” value= “未知” />未知
B、設置RadioButton選中值:
$(“input[name=gender]”).val([“女”]);
18、事件
A、JQuery中事件的綁定:$(“#btn”).bind(“click”,function(){})。
JQuery用$(“#btn”).click(function(){})來簡化。
B、調用事件對象的stopPropagation()方法終止事件冒泡。
C、阻止默認行為: 比如超鏈接點擊后會轉向新的鏈接。如果想阻止默認行為只要調用事件對象的preventDefault()方法。
D、屬性:pageX、pageY、target獲得觸發事件的元素（冒泡的起始,和this不一樣）。
which如果是鼠標事件獲得按鍵(1左鍵，2中鍵，3右鍵)。
altKey、shiftKey、ctrlKey獲得alt、shift、ctrl是否按下，為bool值。
keyCole、charCode屬性發生事件時的keyCode、charCode。
E、移除事件綁定:unbind()方法即可移除元素上綁定的事件，如果bind(“click”)則移除click事件的綁定。
F、一次性事件:如果綁定的事件只想執行一次隨后立即unbind可以使用one()方法進行綁定。
19、動畫
A、show、hide()方法用於顯示、隱藏標簽。用toggle()方法在顯示、隱藏之間切換。
$(“:button[value=show]”).click(function(){$(“div”).show();});
$(“:button[value=hide]”).click(function(){$(“div”).hide();});
B、show、hide可以帶參數使用。fast(200毫秒)、normal(400毫秒)、slow(600毫秒)。
20、JQuery cookie
A、使用方法:
1、添加對jquery.cookie.js引用。
2、設置,$.cookie(‘名字’, ‘值’)。cookie中保存的值是文本。
3、讀取,var v = $.cookie(‘名字’)
B、$.cookie(‘名字’, ‘值’,{expires:7,path:’/’,domain:’baidu.com’,secure:true});
expires 保存的天數。
path 設置網站那些目錄下的文件可以讀取。
domain 保存的是哪個域名的。
21、JQueryUI
22、JQuery輔助工具
A、DebugBar
B、IE開發人員工具