基礎(chǔ)函數(shù)
hide()
隱藏被選元素,與 CSS 屬性 display:none 類似,隱藏的元素不會(huì)被完全顯示(不再影響頁面的布局)
$("button").click(function(){
$("p").hide();
}); 隱藏所有 <p> 元素
show()
顯示隱藏的被選元素。
適用于通過 jQuery 方法和 CSS 中 display:none 隱藏的元素(不適用于通過 visibility:hidden 隱藏的元素)。
$("button").click(function(){
$("p").show();
}); 顯示所有隱藏的 <p> 元素
toggle()
用于在被選元素上進(jìn)行 hide()和 show()之間的切換。
該方法檢查被選元素的可見狀態(tài)。如果一個(gè)元素是隱藏的,則運(yùn)行 show(),如果一個(gè)元素是可見的,則運(yùn)行 hide() - 這會(huì)造成一種切換的效果。
$("button").click(function(){
$("p").toggle();
}); 在所有 <p> 元素上進(jìn)行隱藏和顯示之間的切換
漸變效果函數(shù)
fadeIn()
用于淡入已隱藏的元素。
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
fadeOut()
用于淡出可見元素。
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
fadeTo()
調(diào)整匹配元素的透明度,方法通過匹配元素的不透明度做動(dòng)畫效果(值介于 0 與 1 之間)。
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
fadeToggle()
可以在 fadeIn() 與 fadeOut() 方法之間進(jìn)行切換。
- 如果元素已淡出,則 fadeToggle() 會(huì)向元素添加淡入效果。
- 如果元素已淡入,則 fadeToggle() 會(huì)向元素添加淡出效果。
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
滑動(dòng)效果函數(shù)
slideUp()
用于向上滑動(dòng)元素。
用滑動(dòng)動(dòng)畫隱藏一個(gè)匹配元素,方法將給匹配元素的高度的動(dòng)畫,這會(huì)導(dǎo)致頁面的下面部分滑上去,當(dāng)一個(gè)隱藏動(dòng)畫后,高度值達(dá)到0的時(shí)候,display 樣式屬性被設(shè)置為none,以確保該元素不再影響頁面布局。 display 樣式屬性將被設(shè)置為none,以確保該元素不再影響頁面布局。
$("#filp").click(function(){
$("#panel").slideUp();
});
slideDown()
用于向下滑動(dòng)元素。
用滑動(dòng)動(dòng)畫顯示一個(gè)匹配元素,方法將給匹配元素的高度的動(dòng)畫,這會(huì)導(dǎo)致頁面的下面部分滑下去,彌補(bǔ)了顯示的方式.
$("#filp").click(function(){
$("#panel").slideDown();
});
slideToggle()
可以在 slideDown() 與 slideUp() 方法之間進(jìn)行切換。
- 如果元素向下滑動(dòng),則 slideToggle() 可向上滑動(dòng)它們。
- 如果元素向上滑動(dòng),則 slideToggle() 可向下滑動(dòng)它們。
$("#filp").click(function(){
$("#panel").slideToggle();
});
自定義動(dòng)畫
animate()
用于創(chuàng)建自定義動(dòng)畫。( 默認(rèn)情況下,所有 HTML 元素都有一個(gè)靜態(tài)位置,且無法移動(dòng)。
如需對(duì)位置進(jìn)行操作,要記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute!)
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});
clearQueue()
清除動(dòng)畫隊(duì)列中未執(zhí)行的動(dòng)畫
$("button").click(function(){
$("div").clearQueue();
}); 停止隊(duì)列中的剩余函數(shù)
finish()
停止當(dāng)前動(dòng)畫,并清除動(dòng)畫隊(duì)列中所有未完成的動(dòng)畫,最終展示動(dòng)畫隊(duì)列最后一幀的最終狀態(tài)
stop()
停止當(dāng)前正在運(yùn)行的動(dòng)畫
$("#stop").click(function(){
$("#panel").stop();
});
Ajax
ajax
用于執(zhí)行 AJAX(異步 HTTP)請(qǐng)求。所有的 jQuery AJAX 方法都使用 ajax() 方法,該方法通常用于其他方法不能完成的請(qǐng)求。
$("button").click(function(){
$.ajax({url:"demo_test.txt",success:function(result){
$("#div1").html(result);
}});
}); 使用 AJAX 請(qǐng)求改變 <div> 元素的文本
get
用于使用 HTTP GET 請(qǐng)求從服務(wù)器加載數(shù)據(jù)。
$("button").click(function(){
$.get("demo_test.html",function(data,status){
alert("Data: " + data + "nStatus: " + status);
});
}); 發(fā)送一個(gè) HTTP GET 請(qǐng)求到頁面并取回結(jié)果
$.get("test.php"); 請(qǐng)求 "test.php",但是忽略返回結(jié)果
$.get("test.php", { name:"Donald", town:"Ducktown" }); 請(qǐng)求 "test.php" 并連同請(qǐng)求發(fā)送一些額外的數(shù)據(jù)(忽略返回結(jié)果)
$.get("test.php", { 'colors[]' : ["Red","Green","Blue"] }); 請(qǐng)求 "test.php" 并傳遞數(shù)據(jù)數(shù)組到服務(wù)器(忽略返回結(jié)果)
$.get("test.php", function(data){
alert("Data: " + data);
}); 請(qǐng)求 "test.php" 并提醒請(qǐng)求的結(jié)果:
getJSON
用于使用 AJAX 的 HTTP GET 請(qǐng)求獲取 JSON 數(shù)據(jù)。
$(document).ready(function(){
$("button").click(function(){
$.getJSON("demo_ajax_json.js",function(result){
$.each(result, function(i, field){
$("div").append(field + " ");
});
});
});
}); 使用 Ajax 請(qǐng)求獲取 JSON 數(shù)據(jù),并輸出結(jié)果