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