jQuery 語法是為 HTML 元素的選取編制的瘤礁，可以對元素執(zhí)行某些操作唁奢。
基礎(chǔ)語法：$(selector).action()
jQuery庫包含以下特性：
? ??1硼砰、HTML元素選取
????2菲驴、HTM元素操作
????3凄杯、CSS操作
????4、HTML事件函數(shù)
????5菠秒、JavaScript特性和動畫
????6疙剑、HTML DOM遍歷和修改
????7、AJAX
????8践叠、Utilities
美元符號$定義 jQuery? ??
$(this).hide() 演示 jQuery 的 hide() 函數(shù)言缤，隱藏當前的 HTML 元素
$(“p”).hide() 演示jQuery的hide() 函數(shù)，隱藏所有<p>元素
$(“test”).hide() 隱藏所有 class=“test”的元素
$(“#test”).hide() 隱藏 id=“test” 的元素
$(document).ready(function() {
????????$("button").click(function(){
????????????????$("p").hide();
????????});
? ? });
這是為了防止文檔在完全加載（就緒）之前運行 jQuery 代碼
如果在文檔沒有完全加載之前就運行函數(shù)酵熙，操作可能失敗轧简。下面是兩個具體的例子：
* 試圖隱藏一個不存在的元素
* 獲得未完全加載的圖像的大小
jQuery 選擇器
? ??jQuery 元素選擇器和屬性選擇器允許您通過標簽名驰坊、屬性名或內(nèi)容對 HTML 元素進行選擇匾二。選擇器允許您對 HTML ? ? ? ? ? ? ? ?元素組或單個元素進行操作。在 HTML DOM 術(shù)語中：選擇器允許您對 DOM 元素組或單個 DOM 節(jié)點進行操作。 ?
? ? ?$("p.intro") 選取所有 class="intro" 的元素察藐。
? ? ?$("p#demo") 選取所有 id="demo" 的元素皮璧。
jQuery 屬性選擇器
????jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
????$("[href]") 選取所有帶有 href 屬性的元素分飞。
????$("[href='#']") 選取所有帶有 href 值等于 "#" 的元素悴务。
????$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。
????$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結(jié)尾的元素譬猫。
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 參數(shù)規(guī)定效果的時長染服。它可以取以下值："slow"别洪、"fast" 或毫秒。
jQuery 動畫-?animate() 方法用于創(chuàng)建自定義動畫柳刮。
? ??$(selector).animate({params},speed,callback);
????必需的 params 參數(shù)定義形成動畫的 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() - 設(shè)置或返回所選元素的文本內(nèi)容
? ? ? ? html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標記）
? ? ? ? val() - 設(shè)置或返回表單字段的值
jQuery load() 方法
????$(selector).load(URL,data,callback);
????必需的 URL 參數(shù)規(guī)定您希望加載的 URL秉颗。
????可選的 data 參數(shù)規(guī)定與請求一同發(fā)送的查詢字符串鍵/值對集合痢毒。
????$('#test').load('/example/jquery/demo_test.txt');
jQuery - AJAX get() 和 post() 方法
????$.get(URL,callback);
????????必需的 URL 參數(shù)規(guī)定您希望請求的 URL。
????jQuery $.post() 方法
????????$.post(URL,data,callback);
????????可選的 data 參數(shù)規(guī)定連同請求發(fā)送的數(shù)據(jù)蚕甥。
$("button").click(function(){
????? $.post("demo_test_post.asp", {
? ????????? name:"Donald Duck",
? ? ????????city:"Duckburg"
? ????},
????? function(data,status){
? ? ????????alert("Data: " + data + "\nStatus: " + status);
????? });
});
