移动WEB特效开发
一、觸摸事件:
1.touchstart:手指剛接觸屏幕時(shí)觸發(fā)。
2.touchmove:手指在屏幕上移動(dòng)時(shí)觸發(fā)。
3.touchend:手指移開屏幕時(shí)觸發(fā)。
eg: var span = document.getElementsByTagName(“span”)[0];
var div = document.getElementsByTagName(“div”)[0];
//手指剛放上去執(zhí)行的事件
span.addEventListener(‘touchstart’,function(){
div.style.display=“block”;
},false);
二、addEventListener:
1.是一個(gè)偵聽事件并處理事件的函數(shù)
2.有三個(gè)參數(shù),第一個(gè)是事件類型,第二個(gè)是執(zhí)行的函數(shù),第三個(gè)是事件捕獲(true和false)
三、Zepto框架:
1.Zepto是一個(gè)輕量級(jí)的針對(duì)現(xiàn)代高級(jí)瀏覽器的JavaScript庫
2.Zepto.js是專門為現(xiàn)代智能手機(jī)瀏覽器推出的Javascript框架
3.設(shè)計(jì)目的是提供jQuery類似的API
4.觸摸屏的事件
四、引入zepto的環(huán)境:
五、zepto和jQuery的區(qū)別:
1.zepto不支持IE瀏覽器
2.添加ID的時(shí)候,jQuery不會(huì)生效,而zepto會(huì)生效。
3.使用jQuery執(zhí)行l(wèi)oad事件的處理函數(shù)不會(huì)執(zhí)行,而zepto的會(huì)執(zhí)行。
4.事件委托區(qū)別
5.zepto會(huì)返回包含盒子的邊距以及邊框的寬度,而jquery只返回盒子的寬度。
6.offset的區(qū)別,zepto的值有l(wèi)eft,top,width,heigth,jQuery的值有width和height。
7.zepto的each方法只能遍歷數(shù)組,不能遍歷json。
六、zepto和jQuery相同的方法或?qū)傩?#xff1a;
1.():語法,zepto(function(():語法,zepto(function(():語法,zepto(function(){
代碼
})
2.創(chuàng)建元素以及屬性:
eg: var $li = $(“
- li標(biāo)簽
- ”,{
id:“l(fā)i1”,
css:{color:“red”}
}); $li.appendTo($('body')); 3.addClass:給指定的元素添加樣式eg:$("#div1").addClass("bigFont"); 4.attr:獲取或者設(shè)置元素的屬性,如果只有一個(gè)參數(shù)的話,是獲取,如果有兩個(gè)參數(shù)的話,是設(shè)置。如果value的值是null的話,移除該屬性。 eg: //使用attr獲取和設(shè)置input的屬性 alert($("input").attr("value")); //設(shè)置 $("input").attr("type","button"); //移除屬性 $("input").attr("value",null); 5.has:判斷當(dāng)前的zepto對(duì)象里面是否包含其他元素。 6.hasClass:判斷當(dāng)前的zepto里面是否包含其他的樣式,如果有返回true,否則返回false。 7.toggle:顯示或隱藏匹配的元素。 8.toggleClass:在匹配的元素上添加一個(gè)或多個(gè)樣式類。如果有該樣式,就刪除,如果沒有就添加。 9.closest:從元素本身開始,逐級(jí)向上級(jí)元素匹配,并返回最先匹配的祖先元素。
總結(jié)
- 上一篇: 好玩的Scratch
- 下一篇: 电脑一直配置windowsupdate失