移动WEB特效开发

简介: 移动WEB特效开发

一、触摸事件:

1.touchstart:手指刚接触屏幕时触发。

2.touchmove:手指在屏幕上移动时触发。

3.touchend:手指移开屏幕时触发。

eg: var span = document.getElementsByTagName(“span”)[0];

var div = document.getElementsByTagName(“div”)[0];

//手指刚放上去执行的事件

span.addEventListener(‘touchstart’,function(){

div.style.display=“block”;

},false);

//手指移开的事件
    span.addEventListener('touchend',function(){
      div.style.display="";
    },false);

二、addEventListener:

1.是一个侦听事件并处理事件的函数

2.有三个参数,第一个是事件类型,第二个是执行的函数,第三个是事件捕获(true和false)

三、Zepto框架:

1.Zepto是一个轻量级的针对现代高级浏览器的JavaScript库

2.Zepto.js是专门为现代智能手机浏览器推出的Javascript框架

3.设计目的是提供jQuery类似的API

4.触摸屏的事件

四、引入zepto的环境:


五、zepto和jQuery的区别:

1.zepto不支持IE浏览器

2.添加ID的时候,jQuery不会生效,而zepto会生效。

3.使用jQuery执行load事件的处理函数不会执行,而zepto的会执行。

4.事件委托区别

5.zepto会返回包含盒子的边距以及边框的宽度,而jquery只返回盒子的宽度。

6.offset的区别,zepto的值有left,top,width,heigth,jQuery的值有width和height。

7.zepto的each方法只能遍历数组,不能遍历json。

六、zepto和jQuery相同的方法或属性:

1.( ) : 语 法 , z e p t o ( f u n c t i o n ( ():语法,zepto(function(():zepto(function(){

代码

})

2.创建元素以及属性:

eg: var $li = $(“

  • li标签
  • ”,{
    id:“li1”,
    css:{color:“red”}
    });
$li.appendTo($('body'));
3.addClass:给指定的元素添加样式
  eg:$("#div1").addClass("bigFont");
4.attr:获取或者设置元素的属性,如果只有一个参数的话,是获取,如果有两个参数的话,是设置。如果value的值是null的话,移除该属性。
eg:
//使用attr获取和设置input的属性
alert($("input").attr("value"));
//设置
$("input").attr("type","button");
//移除属性
$("input").attr("value",null);
5.has:判断当前的zepto对象里面是否包含其他元素。
6.hasClass:判断当前的zepto里面是否包含其他的样式,如果有返回true,否则返回false。
7.toggle:显示或隐藏匹配的元素。
8.toggleClass:在匹配的元素上添加一个或多个样式类。如果有该样式,就删除,如果没有就添加。
9.closest:从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。
目录
相关文章
|
23天前
|
监控 JavaScript 前端开发
《理解 WebSocket:Java Web 开发的实时通信技术》
【4月更文挑战第4天】WebSocket是Java Web实时通信的关键技术,提供双向持久连接,实现低延迟、高效率的实时交互。适用于聊天应用、在线游戏、数据监控和即时通知。开发涉及服务器端实现、客户端连接及数据协议定义,注意安全、错误处理、性能和兼容性。随着实时应用需求增加,WebSocket在Java Web开发中的地位将更加重要。
|
1月前
|
Web App开发 前端开发 开发工具
介绍Web开发的基础知识
介绍Web开发的基础知识
29 7
|
1月前
|
存储 资源调度 应用服务中间件
浅谈本地开发好的 Web 应用部署到 ABAP 应用服务器上的几种方式
浅谈本地开发好的 Web 应用部署到 ABAP 应用服务器上的几种方式
27 0
|
1月前
|
存储 前端开发 JavaScript
从前端到后端,探索现代Web开发技术
本文探索了现代Web开发技术的各个方面,包括前端和后端开发以及多种编程语言的应用。通过对JavaScript、Java、Python、C、PHP和Go等语言的介绍,深入探讨了前端和后端开发的基本原理和常用工具。同时,还涵盖了数据库技术在Web开发中的重要性和应用场景。无论你是初学者还是有经验的开发者,本文都能为你提供全面的视角和实用的知识,帮助你在Web开发领域取得更好的成果。
|
1月前
|
缓存 关系型数据库 API
后端开发:构建高效、可扩展的Web应用程序的关键
后端开发:构建高效、可扩展的Web应用程序的关键
22 0
|
3天前
|
设计模式 存储 前端开发
Java从入门到精通:2.2.1学习Java Web开发,了解Servlet和JSP技术,掌握MVC设计模式
Java从入门到精通:2.2.1学习Java Web开发,了解Servlet和JSP技术,掌握MVC设计模式
|
8天前
|
JSON Java fastjson
Spring Boot 底层级探索系列 04 - Web 开发(2)
Spring Boot 底层级探索系列 04 - Web 开发(2)
16 0
|
8天前
|
安全 编译器 PHP
PHP 8.1版本发布:引领Web开发新潮流
PHP编程语言一直是Web开发的主力军,而最新发布的PHP 8.1版本则为开发者们带来了更多创新和便利。本文将介绍PHP 8.1版本的主要特性,包括更快的性能、新的语言功能和增强的安全性,以及如何利用这些功能来提升Web应用程序的质量和效率。
|
12天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
12天前
|
前端开发 数据挖掘 API
使用Python中的Flask框架进行Web应用开发
【4月更文挑战第15天】在Python的Web开发领域,Flask是一个备受欢迎的轻量级Web框架。它简洁、灵活且易于扩展,使得开发者能够快速地构建出高质量的Web应用。本文将深入探讨Flask框架的核心特性、使用方法以及在实际开发中的应用。