三 .DOM,樣式操作
1.隱藏顯示
show
恢復(fù)對象集合中每個元素默認(rèn)的‘display’值、如果你用hide將元素隱藏,用該屬性可以將其顯示。相當(dāng)于去掉了display:none'
hide
Hide elements in this collection by setting their display CSS property to none.
通過設(shè)置CSS的屬性display 為 none 來京對象集合中的元素隱藏。
toggle
toggle([setting])
顯示或隱藏匹配元素。如果setting為true,相當(dāng)于show方法。如果setting為false。相當(dāng)于hide方法。
2.Css屬性修改
$('ul .aa').css('color','');
括號里面第一個是要給當(dāng)前元素添加的樣式,第二個是要給的value,當(dāng)value為空的時候,會移除標(biāo)簽本身的樣式,前提是ul下面類名為aa的子元素
本身是粉顏色,當(dāng)我添加了css樣式color,'' 樣式移除。
四,輔助函數(shù)
is
//用is判斷l(xiāng)i的父元素是不是ul
if($('li').parent().is('ul')){}
五,zepto的核心功能
1. zepto 事件機(jī)制
//通過on綁定了一個點擊事件
$('button').on('click',function(){
alert(1);
})
//通過off移除綁定的點擊事件
$('button').off();
//one只綁定一次事件
$('button').one('mouseover',function(){
alert(1);
})
六,動畫效果
animate() 執(zhí)行定義的動畫。
這個方法通過改變樣式將原有的樣式改變成新的樣式。CSS屬性值是逐漸改變的,這樣就可以創(chuàng)建動畫效果。
只有數(shù)字值可創(chuàng)建動畫(比如 "margin:30px")。字符串值無法創(chuàng)建動畫(比如 "background-color:red")。
語法 1
$(selector).animate(styles,speed,easing,callback)
styles 必須,定義產(chǎn)生動畫的效果
speed 可選,定義動畫的速度,默認(rèn)為‘normal’ 值(毫秒,'slow','normal','fast')
easing 可選。規(guī)定在不同的動畫點中設(shè)置動畫速度的 easing 函數(shù)。內(nèi)置的 easing 函數(shù):swing,linear
callback 可選 animate函數(shù)執(zhí)行完之后執(zhí)行的函數(shù)。
語法 2
$(selector).animate(styles,options)
styles 必須,定義產(chǎn)生動畫的效果
options 規(guī)定動畫的額外選項,speed 設(shè)置動畫速度,easing 規(guī)定使用的easing函數(shù),callback回調(diào)函數(shù) . . .
Zepto 與 jquery 的不同
DOM操作
1.Jquery 操作ul元素時,添加id不會生效
2.Zepto操作ul元素時,添加id會生效
Box-sizing計算
1.Zepto 由 盒模型(box-sizing)決定
2.Jquery 會忽略盒模型,始終返回內(nèi)容區(qū)域的寬/高(不包含padding,border)
offset
1.zepto返回top|left|width|height
2.JQuery返回width|height
咨詢熱線
010-85377344
135-21581588
微信客服
QQ客服
3026106565 點擊咨詢