1.jquery特殊效果:
fadeIn() 淡入? ? ? ? fadeOut() 淡出
fadeToggle() 切換淡入淡出
hide() 隱藏元素? ? ? ? ?show() 顯示元素
toggle() 依次展示或隱藏某個(gè)元素
slideDown() 向下展開(kāi)? ? slideUp() 向上卷起
slideToggle() 依次展開(kāi)或卷起某個(gè)元素
eg: $btn.click(function(){
? ? ? ? $('#div1').fadeIn(1000,'swing',function(){
? ? ? ? ? ? alert('done!');
? ? ? ? });
? ? });
2.jquery鏈?zhǔn)秸{(diào)用:jquery對(duì)象的方法會(huì)在執(zhí)行完后返回這個(gè)jquery對(duì)象特姐,所有jquery對(duì)象的方法可以連起來(lái)寫
$('#div1') // id為div1的元素
.children('ul') //該元素下面的ul子元素
.slideDown('fast') //高度從零變到實(shí)際高度來(lái)顯示ul元素
.parent()? //跳到ul的父元素,也就是id為div1的元素
.siblings()? //跳到div1元素平級(jí)的所有兄弟元素
.children('ul') //這些兄弟元素中的ul子元素
.slideUp('fast');? //高度實(shí)際高度變換到零來(lái)隱藏ul元素
3.jquery動(dòng)畫:通過(guò)animate方法可以設(shè)置元素某屬性值上的動(dòng)畫黍氮,可以設(shè)置一個(gè)或多個(gè)屬性值唐含,動(dòng)畫執(zhí)行完成后會(huì)執(zhí)行一個(gè)函數(shù)
$('#div1').animate({
? ? width:300,
? ? height:300
},1000,swing,function(){
? ? alert('done!');
});
4.尺寸相關(guān)、滾動(dòng)事件
1沫浆、獲取和設(shè)置元素的尺寸?
width()捷枯、height() 獲取元素width和height
innerWidth()、innerHeight()? 包括padding的width和height?
outerWidth()专执、outerHeight()? 包括padding和border的width和height?
outerWidth(true)淮捆、outerHeight(true)? 包括padding和border以及margin的width和height
2、獲取元素相對(duì)頁(yè)面的絕對(duì)位置? ?offset()
3本股、獲取可視區(qū)高度 $(window).height();
4攀痊、獲取頁(yè)面高度? ?$(document).height();
5、獲取頁(yè)面滾動(dòng)距離??$(document).scrollTop()? ?$(document).scrollLeft();
6拄显、頁(yè)面滾動(dòng)事件??$(window).scroll(function(){ ......})
5.實(shí)例??1苟径、層級(jí)菜單? ?2、選項(xiàng)卡? 3躬审、置頂菜單?
4蟆盐、滾動(dòng)到頂部? ? ?5、手風(fēng)琴效果? ?6蹬碧、無(wú)縫滾動(dòng)?