jQuery 語法是為 HTML 元素的選取編制的，可以對元素執行某些操作。
基礎語法：$(selector).action()
jQuery庫包含以下特性：
? ??1、HTML元素選取
????2、HTM元素操作
????3、CSS操作
????4、HTML事件函數
????5、JavaScript特性和動畫
????6、HTML DOM遍歷和修改
????7、AJAX
????8、Utilities
美元符號$定義 jQuery? ??
$(this).hide() 演示 jQuery 的 hide() 函數，隱藏當前的 HTML 元素
$(“p”).hide() 演示jQuery的hide() 函數，隱藏所有<p>元素
$(“test”).hide() 隱藏所有 class=“test”的元素
$(“#test”).hide() 隱藏 id=“test” 的元素
$(document).ready(function() {
????????$("button").click(function(){
????????????????$("p").hide();
????????});
? ? });
這是為了防止文檔在完全加載（就緒）之前運行 jQuery 代碼
如果在文檔沒有完全加載之前就運行函數，操作可能失敗。下面是兩個具體的例子：
* 試圖隱藏一個不存在的元素
* 獲得未完全加載的圖像的大小
jQuery 選擇器
? ??jQuery 元素選擇器和屬性選擇器允許您通過標簽名、屬性名或內容對 HTML 元素進行選擇。選擇器允許您對 HTML ? ? ? ? ? ? ? ?元素組或單個元素進行操作。在 HTML DOM 術語中：選擇器允許您對 DOM 元素組或單個 DOM 節點進行操作。 ?
? ? ?$("p.intro") 選取所有 class="intro" 的元素。
? ? ?$("p#demo") 選取所有 id="demo" 的元素。
jQuery 屬性選擇器
????jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
????$("[href]") 選取所有帶有 href 屬性的元素。
????$("[href='#']") 選取所有帶有 href 值等于 "#" 的元素。
????$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。
????$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。
jQuery CSS 選擇器
? ??jQuery CSS 選擇器可用于改變 HTML 元素的 CSS 屬性。
//修改單個屬性
? ??$(“p”).css(“backgroud-color”,”red”);//把所有 p 元素的背景顏色更改為紅色：
//修改多個屬性
$(“p”).css({"propertyname":"value","propertyname":"value",...});
更多的選擇器實例
jQuery 效果
? ??$(selector).fadeIn(speed,callback);
????$(selector).fadeToggle(speed,callback);????
????$(selector).slideDown(speed,callback);
????jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
????可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
jQuery 動畫-?animate() 方法用于創建自定義動畫。
? ??$(selector).animate({params},speed,callback);
????必需的 params 參數定義形成動畫的 CSS 屬性。
實例
$("button").click(function(){
? ? ? ? ? $("div").animate({
? ????????????????? left:'250px',????
? ????????????????? opacity:'0.5',
? ????????????????? height:'150px',
? ????????????????? width:'150px'
????????? });
});
$("button").click(function(){
????? var div=$("div");
????? div.animate({left:'100px'},"slow");
????? div.animate({fontSize:'3em'},"slow");
});
jQuery - Chaining：Chaining 允許我們在一條語句中允許多個 jQuery 方法（在相同的元素上）。
? ??$("#p1").css("color","red").slideUp(2000).slideDown(2000);
jQuery HTML
????????text() - 設置或返回所選元素的文本內容
? ? ? ? html() - 設置或返回所選元素的內容（包括 HTML 標記）
? ? ? ? val() - 設置或返回表單字段的值
jQuery load() 方法
????$(selector).load(URL,data,callback);
????必需的 URL 參數規定您希望加載的 URL。
????可選的 data 參數規定與請求一同發送的查詢字符串鍵/值對集合。
????$('#test').load('/example/jquery/demo_test.txt');
jQuery - AJAX get() 和 post() 方法
????$.get(URL,callback);
????????必需的 URL 參數規定您希望請求的 URL。
????jQuery $.post() 方法
????????$.post(URL,data,callback);
????????可選的 data 參數規定連同請求發送的數據。
$("button").click(function(){
????? $.post("demo_test_post.asp", {
? ????????? name:"Donald Duck",
? ? ????????city:"Duckburg"
? ????},
????? function(data,status){
? ? ????????alert("Data: " + data + "\nStatus: " + status);
????? });
});
