zepto .css,zepto的常用方法与操作（二）

三 .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