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