移动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:从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。
相关文章
|
3月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
178 3
|
30天前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
|
2月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
203 45
|
2月前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
36 7
|
2月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
|
2月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
44 2
|
2月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
58 1
|
2月前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。
|
2月前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
74 2
|
3月前
|
设计模式 测试技术 持续交付
开发复杂Web应用程序
【10月更文挑战第3天】开发复杂Web应用程序
47 2