一、jQuery引用
方法一、<head><script src="jQuery"></script></head>
方法二、<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
二、jQuery 語法
基礎語法是：$(selector).action()
---美元符號定義 jQuery
---選擇符（selector）“查詢”和“查找” HTML 元素
---jQuery 的 action() 執行對元素的操作
示例
$(document).ready(function(){ ---防止文檔在完全加載之前運行jQuery代碼
$(botton).onclick(function(){
$(this).hide() - 隱藏當前元素
$("p").hide() - 隱藏所有段落
$(".test").hide() - 隱藏所有 class="test" 的所有元素
$("#test").hide() - 隱藏所有 id="test" 的元素
});
});
三、jQuery選擇器
1、jQuery元素選擇器
jQuery 使用 CSS 選擇器來選取 HTML 元素。
$("p") 選取 <p> 元素。
$("p.intro") 選取所有 class="intro" 的 <p> 元素。
$("p#demo") 選取所有 id="demo" 的 <p> 元素。
2、jQuery屬性選擇器
jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。
3、jQuery CSS選擇器
$('"p").css("background-color","red");
四、事件函數
jQuery 事件
Event 函數
綁定函數至
$(document).ready(function)
將函數綁定到文檔的就緒事件（當文檔完成加載時）
$(selector).click(function)
觸發或將函數綁定到被選元素的點擊事件
$(selector).dblclick(function)
觸發或將函數綁定到被選元素的雙擊事件
$(selector).focus(function)
觸發或將函數綁定到被選元素的獲得焦點事件
$(selector).mouseover(function)
觸發或將函數綁定到被選元素的鼠標懸停事件
五、JQuery隱藏與顯示
1、語法
$("selector").hide(speed,callback); //speed:顯示隱藏的速度，slow,fast或毫秒
$("selector").show(speed,callback); //callback:顯示或隱藏後執行的函數名
$(selector).toggle(speed,callback); //切換顯示和隱藏
六、jQuery淡入淡出
$(selector).fadeIn(speed,callback); //用於淡入已隱藏的元素。
$(selector).fadeOut(speed,callback); //淡出顯示的元素。
$(selector).fadeToggle(speed,callback); //淡入淡出
fadeTo() 方法允許漸變為給定的不透明度（值介於 0 與 1 之間）。
$(selector).fadeTo(speed,opacity,callback);
七、jQuery上下滑動
$(selector).slideDown(speed,callback); \\向下滑動元素
$(selector).slideUp(speed,callback); \\向上滑動元素
$(selector).slideToggle(speed,callback); \\向上及向下滑動元素
八、jQuery動畫
$(selector).animate({params},speed,callback);
--params參數定義形成動畫的CSS屬性
***如需對位置進行操作，要先把元素的CSS position屬性設置為relative\fixed\absolute****
實例：
$("button").click(function(){
$("div").animate({
left:'250px'
opacity:'0.5' ---透明度
height:'+=150px' ----相對應用，在原先基礎上
width:'toggle' --預設值，hide\show\toggle
//隊列animate
var div=$("div")
div.animate({CSS屬性},speed,callback);//
div.animate({CSS屬性},speed,callback);
})
}
九、停止動畫stop()
$(selector).stop(); --停止當前動畫，繼續下一個動畫
$(selector).stop(true); ----停止所有動畫
$(selector).stop(true,true); ----停止動畫完成當前動畫
十、callback的用法
實例
$("p").hide(1000,function(){alert("test");});
十一、jQuery方法、動作連接用法
$(selector).css("color","red").slideUp(100).slideDown(100); ---每個方法可換行，中途不要用分號
十二、jQuery 獲取與設置
實例： alert("html:" + $(selector).html());
十二、使用回調函數設置
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
$("button").click(function(){ --同時設置多個屬性值
$("#w3s").attr({
"href" : "http://hovertree.com/menu/jquery",
"title" : "HoverTree jQuery Tutorial"
});
});
十三、在被選元素的位置插入內容
append() - 在被選元素的結尾插入內容
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素之後插入內容
before() - 在被選元素之前插入內容
function afterText()
{
var txt1="<b>I </b>"; // 以 HTML 創建新元素
var txt2=$("<i></i>").text("love "); // 通過 jQuery 創建新元素
var txt3=document.createElement("big"); // 通過 DOM 創建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在 img 之後插入新元素
}
十四、jQuery刪除元素
remove() ----刪除被選中的元素
empty() ----刪除被選中的元素的子元素
$("p").remove(“.cl”) ---刪了“p”中class為cl的元素
十五、jQuery --獲取並設置CSS類
$(selector).addClass("CSS類名") ---設置多個CSS類以空格隔開
$(selector).removeClass("CSS類名") ---移除CSS類
$(selector).css("propertyname") ----返回CSS屬性的值
$(selector).css("propertyname","value") ----設置CSS屬性的值
$(selector).css({"propertyname":"value1","propertyname":"value"}); ---設置多個CSS屬性值
十六、jQuery 尺寸
jQuery width() 和 height() 方法
$(selector).width() 方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距）
$(selector).height() 方法設置或返回元素的高度（不包括內邊距、邊框或外邊距）
jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的寬度（包括內邊距）。
innerHeight() 方法返回元素的高度（包括內邊距）。
jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。
outerHeight() 方法返回元素的高度（包括內邊距和邊框）。
outerWidth(true) 方法返回元素的寬度（包括內邊距、邊框和外邊距）。
outerHeight(true) 方法返回元素的高度（包括內邊距、邊框和外邊距）。
十七、jQuery 遍歷
-祖先---可直接在parent().css屬性
$("span").parent(); 返回被選元素的直接父元素
$("span").parents(); ------返回被選元素的所有祖先元素
$("span").parents("ul"); ----返回所有 <span> 元素的所有祖先，並且它是 <ul> 元素
$("span").parentsUntil("div"); ---返回介於兩個給定元素之間的所有祖先元素
十八、jQuery遍歷--後代
$("selector").children() -------返回被選元素的所有直接子元素
$("div").children("p.1");-----返回類名為 "1" 的所有 <p> 元素，並且它們是 <div> 的直接子元素
$("div").find("*"); -----返回<div>的所有後代
$("div").find("span"); -----返回屬於 <div> 後代的所有 <span> 元素
十九、jQuery遍歷--同胞
$("h2").siblings(); ---返回 <h2> 的所有同胞元素
$("h2").siblings("p"); ---返回屬於 <h2> 的同胞元素的所有 <p> 元素
$("h2").next(); --返回被選元素的下一個同胞元素
$("h2").nextAll(); ---返回 <h2> 的所有跟隨的同胞元素
$("h2").nextUntil("h6");---返回介於 <h2> 與 <h6> 元素之間的所有同胞元素：
prev(), prevAll() & prevUntil() 方法 ---返回為上一個，上面的所有，兩個元素之間的同胞元素
二十、jQuery遍歷--過濾
$("div p").first();-----選取首個 <div> 元素內部的第一個 <p> 元素
$("div p").last(); -----選擇最後一個 <div> 元素中的最後一個 <p> 元素：
$("p").eq(1); -----選取第二個 <p> 元素（索引號 1）;第一個為0
$("p").filter(".intro"); ----返回帶有類名 "intro" 的所有 <p> 元素
$("p").not(".intro"); ----返回不帶有類名 "intro" 的所有 <p> 元素
二十一、AJAX
是與服務器交換數據的藝術，它在不重載全部頁面的情況下，實現了對部分網頁的更新。
二十二、AJAX load()
$(selector).load(URL,data,callback); --從服務器加載數據，並把返回的數據放入被選元素中
$("#div1").load("demo_test.txt #p1"); --把 "demo_test.txt" 文件中 id="p1" 的元素的內容，加載到指定的 <div> 元素中
下例在 load() 方法完成後顯示一個提示框。如果 load() 方法已成功，則顯示“外部內容加載成功！”，而如果失敗，則顯示錯誤
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部內容加載成功！");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
二十三、jQuery get()和post()方法
用於通過HTTP GET 或POST請求從服務器請求數據
$.get(URL,callback);
----面的例子使用 $.get() 方法從服務器上的一個文件中取回數據
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
$.post(URL,data,callback);