事件綁定與解綁??? bind/?? ubbind
鼠標(biāo)懸停事件?????? 進(jìn)入mouseover??? ? ? 離開 mouseout
$("d1").mouseover(function(){?
?????? $("#d2").show(1000) });
.mouseout(function(){
??? $("#d2").hide(1000)?? });
隱藏/顯示.hide()隱藏? ? ? ? ? .show()顯示.? ? ? ? ? ? ? ?toggle() 隱藏/顯示 ，切換 ??
$(this).hide()? ? ? ? ? ? ? ? ? ? ? ? ? ? ? .hide()函數(shù),隱藏當(dāng)前的HTML元素
$("p").hide().hide()函數(shù),? ? ? ? ? ? ? 隱藏所有p標(biāo)記元素
#("#ID").hide()? ? ? ? ? ? ? ? ? ? ? ? ? ? 隱藏ID選擇器的 元素
JQ事件:$(document).ready(function)將函數(shù)綁定到文檔的就緒事件（當(dāng)文檔完成加載時(shí)）
$(selector).click(function)? ? ? ? ? ? ?觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的點(diǎn)擊事件
$(selector).dblclick(function)? ? ? ? ?觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的雙擊事件
$(selector).focus(function)? ? ? ? ? ? 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的獲得焦點(diǎn)事件
$(selector).mouseover(function)觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的鼠標(biāo)懸停事件
淡入/淡出 /切換 ? ? ? ? ? ? ? ? ? fadeIn()? ? ? ? ? ? ? ?fadeOut()? ? ? ? ? ? ? ? ??fadeToggle()? ? ? ? ? ?fadeTo()?
???fadeIn()? ? ? ? ? ? ? ?淡入?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$(document).ready(function(){? ? ? ? ?
?fadeOut()? ? ? ? ? ? ?淡出??? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $("button").click(function(){? ? ? ? ? ? ??
?fadeToggle()? ? ? ? ?淡入/淡出切換?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $("#p1").fadeToggle();? ? ? ? ? ? ?
? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$("#p2").fadeToggle("slow");? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$("#p3").fadeToggle(3000);? ? ? ? ? ? });? });
fadeTo()?? ? ? ? ?? 規(guī)定淡出時(shí)的透明度,并不是完全消失?? 0-1
????????????????????????????????????????????$("button").click(function(){? ? ? ? ? ? ? ? ??
? ????????????????????????????????????????????$("#div1").fadeTo("slow",0.15);??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $("#div3").fadeTo("slow",0.7);});
創(chuàng)建滑動(dòng)隱藏消失职辅。? ?slideDown()? 滑動(dòng)向下,彈出? ?slideUp()? ? 滑動(dòng)向上,收回? ? ? slideToggle()滑動(dòng)隱藏消失切換
? ? ? ? ? ????????????????????????????????????????????????????????????????? $(document).ready(function(){? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$("button").click(function(){? ? ? ? ? ? ? ? ? ?
?????????????????????????????????????????????????????????????????????????????????????? ?$(".up").slideToggle("slow");? ? ? ? ? ?});? });? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ????????????????????????????????????????????????????????????????????????????????????????滑動(dòng)彈出,收回切換,? 注意.up的DIV? 的CSS設(shè)置為display:none;
動(dòng)畫效果? ? ? animate()動(dòng)畫效果?? ? ? ? ? ?height:'toggle'? ? ? 定義已經(jīng)設(shè)置好的高度彈出隱藏
? ? ????????????????????????????????????????????????????????????????????????????????? $(document).ready(function(){? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????????????????????????????$("button").click(function(){? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $(".up").animate({? ? ? ? ? 定義動(dòng)畫? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?left:'250px',? ? ? ? ? ? 定義動(dòng)畫距離? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?height:'150px',? ? ? ? ? ? ? 定義動(dòng)畫的大小? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? width:'150px' });? });? });? ? ??
????????????????height/width:+=150px;? ? ? ? 動(dòng)畫可以根據(jù)需要無限制+=150px; 點(diǎn)一下就放一次? ?但是相對于left:250px位置
注: .up需提前設(shè)置樣式,并聲明position:absolute
提示：animate() 方法幾乎可以操作所有的CSS屬性
不過刨裆，需要記住一件重要的事情：當(dāng)使用 animate() 時(shí)，必須使用 paddingLeft 而不是 padding-left它掂，使用 marginRight 而不是 margin-right巴帮，等等。同時(shí)，色彩動(dòng)畫并不包含在核心 jQuery 庫中榕茧。如果需要生成顏色動(dòng)畫垃沦，您需要從 jQuery.com 下載 Color Animations 插件。
jQuery 提供針對動(dòng)畫的隊(duì)列功能雪猪。
這意味著如果您在彼此之后編寫多個(gè) animate() 調(diào)用栏尚，jQuery 會(huì)創(chuàng)建包含這些方法調(diào)用的“內(nèi)部”隊(duì)列。然后逐一運(yùn)行這些 animate 調(diào)用只恨。????????????????????????????????????????????$(document).ready(function(){??
????????????????????????????????????????????????????????$("button").click(function(){? ? var div=$("div");? ? ??
????????????????????????????????????????????????????????????div.animate({left:'100px'},"slow");?
?? ????????????????????????????????????????????????????????????div.animate({fontSize:'3em'},"slow");??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?div.animate({樣式代碼段'},"slow");? });});
滑動(dòng)停止,動(dòng)畫停止.shop()? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????????????? $(".sub").click(function(){? ? ? ? ? ? ? ? ? ??
????????????????????????????????????????????????$(".pop").slideDown(5000);? ?});? ? ? ? ? ? ? ? ? 定義.pop1向下5秒顯示? ? ???
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$("button").click(function(){? ? ? ? ? ? ? ? ? ? 定義.shop點(diǎn)擊停止滑動(dòng)? ??
????????????????????????????????????????????????????????? $(".pop").stop();});});? ? ? ? ? ? ? ? ? ? ? ? ? pop停止滑動(dòng)點(diǎn)擊停止
.shop延伸知識點(diǎn):
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$(document).ready(function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$("#start").click(function(){? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 選擇開始按鈕
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????????$("div").animate({left:'100px'},5000);? ? ? ? ? ? ? ? ? ? ? ? ? 選擇div動(dòng)畫效果 左100px,5秒鐘
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????????? $("div").animate({fontSize:'3em'},5000);? });? ? ? ? ? ? ? ? 選擇div動(dòng)畫效果? 字體大小3em,5秒
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$("#stop").click(function(){? ? ? ? ? ? ? ? ? 選擇停止按鈕
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$("div").stop();?});? ? ? ? ? ? ? ? ? ? ? ? ? ? div停止動(dòng)畫
????????????????????????????????????$("#stopsy").click(function(){? ? ? ? ? ? ? ? 選擇停止所有按鈕
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $("div").stop(true);});? ? ? ? ? ? ? ? ? div停止所有動(dòng)畫(加一個(gè)true)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$("#stopwc").click(function(){? ? ? ? ? ? ? ? 選擇停止所有但要完成按鈕
????????????????????????????????????????????????$("div").stop(true,true);?}); ? ? ? ? ? ? 選的div停止(加2個(gè)true)? ? ? ? ? });
Callback函數(shù)? 在當(dāng)前動(dòng)畫100%完成之后執(zhí)行
????????????????????????????????????????????????$(document).ready(function(){??
????????????????????????????????????????????????????$("button").click(function(){??
????????????????????????????????????????????????????????$("p").hide(1000,function(){??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?alert("The paragraph is now hidden");? ? });? });});? ? ??
? ? ? ? ? ? ?????????????????????????????????當(dāng)動(dòng)畫.hide百分百完成后? 直接啟用下一個(gè)函數(shù)彈出框? ? ? ? ? ? ? ? ?
Chaining? 鏈接技術(shù),? 就是可以吧幾個(gè)JQ調(diào)用連在一個(gè)相同的元素上,共同使用
????????????????????????????????????????????????$(document).ready(function()? {??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$("button").click(function(){??
? ????????????????????????????????????????????????????????$("#p1").css("color","red").slideUp(2000).slideDown(2000);? });?
?? ????????????????????????????????????????????? 點(diǎn)擊bun后? #p1的css字體紅色,? 向上收彈出框2秒鐘后? 译仗，接著向下2秒彈出});
前端小知識：孫魯意博客網(wǎng)站
