移动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.():语法,zepto(function(():语法,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:从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/325673.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

面试过程中千万不要犯这 5 点低级错误

转载自 面试过程中千万不要犯这 5 点低级错误 最近你面了几家公司了?都拿到多少offer了?如果你还没有拿到心仪的offer的话,想想自己是不是在面试中犯了错误,踩中面试官雷区了。 姑且不说面试迟到、仪容问题、简历作假等所有人…

Mybatis框架的连接池配置

xml配置&#xff1a;<?xml version"1.0" encoding"UTF-8"?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"><configuration><envir…

ASP.NET Core开发之HttpContext

ASP.NET Core中的HttpContext开发&#xff0c;在ASP.NET开发中我们总是会经常用到HttpContext。 那么在ASP.NET Core中要如何使用HttpContext呢&#xff0c;下面就来具体学习ASP.NET Core HttpContext。 注入HttpContextAccessor ASP.NET Core中提供了一个IHttpContextAcces…

移动WEB页面开发

一、如今的移动行业&#xff1a; 1.移动互联网的发展 2.智能手机迅速发展 3.移动WEB应用的发展 4.移动端的开发需求逐年增加 二、移动网页开发和pc网页开发的区别&#xff1a; 1.终端设备及浏览器 2.分辨率 3.视口 4.输入特性&#xff1a; 鼠标、键盘 触摸 三、PC端开发浏览器:…

数据库事务的四大特征

什么是事务&#xff1f; 事务&#xff1a;是数据库操作的最小工作单元&#xff0c;是作为单个逻辑工作单元执行的一系列操作&#xff1b;这些操作作为一个整体一起向系统提交&#xff0c;要么都执行&#xff0c;要么都不执行&#xff1b;事务是一组不可再分割的操作集合&#…

.NET的一点历史故事:Novell的崩溃和Xamarin的重生

Novell 是一家神奇的技术公司&#xff0c;它自行开发和收购了很多不错的软件和标准&#xff0c;涵盖 NetWare、IPX、WordPerfect、Quattro Pro&#xff0c;Unix&#xff0c;SUSE和Mono。它曾有心挑战微软的霸权&#xff0c;最后不免以失败收场&#xff0c;但在开源运动的发展历…

两步验证杀手锏:Java 接入 Google 身份验证器实战

转载自 两步验证杀手锏&#xff1a;Java 接入 Google 身份验证器实战 什么是两步验证&#xff1f; 大家应该对两步验证都熟悉吧&#xff1f;如苹果有自带的两步验证策略&#xff0c;防止用户账号密码被盗而锁定手机进行敲诈&#xff0c;这种例子屡见不鲜&#xff0c;所以苹…

JS删除之前弹出一个带有确认和取消按钮的提示框confirm()

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><meta http-equiv"Content-Type" content"text/html; charsetUTF-8"><title>添加删除记录…

马戏团表演

一、控制结构&#xff1a; 1.顺序结构 2.选择结构 3.循环结构 二、顺序结构&#xff1a; 1.含义&#xff1a;程序从上到下执行&#xff0c;在编程中&#xff0c;一般都是从第一行代码开始往下执行&#xff0c;在scratch中&#xff0c;从第一个积木开始往下执行。 三、流程图&am…

剑英的区块链学习手记(一)

开篇布拉拉 因为参与了小蚁的c#智能合约编译器的开发&#xff0c;让我第一次近距离接触到区块链技术。 以前我对区块链技术的了解&#xff0c;只知道有一种叫做比特币的玩意儿&#xff0c;以前有同事在几百块一个比特币的时候屯了一批&#xff0c;后来价格炒高了&#xff0c;…

C++比较两个字符串是否完全相同

在写程序的过程中&#xff0c;经常会遇到要比较两个字符串是否相等的情况。如果要比较的对象是char字符串&#xff0c;则利用 int strcmp(const char s1,const char* s2) 当s1 < s2时&#xff0c;返回为负数&#xff1b; 当s1 s2时&#xff0c;返回值 0&#xff1b; 当s1 &…

跟我学 Java 8 新特性之 Stream 流(五)映射

转载自 跟我学 Java 8 新特性之 Stream 流&#xff08;五&#xff09;映射 经过了前面四篇文章的学习&#xff0c;相信大家对Stream流已经是相当的熟悉了&#xff0c;同时也掌握了一些高级功能了&#xff0c;如果你之前有阅读过集合框架的基石 Collection 接口&#xff0c;是…

JS中DOM节点的CRUD

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><script type"text/javascript">window.onload function(){//获取body标签//var body document.getElementsByTagName("body")[…

深入.net框架

一、.net框架&#xff1a; 1.基础框架 2.运行环境 3.强大的类库 二、.net的两个重要组件 1.CLR&#xff1a;公共语言运行时 2.框架类库 三、CLR里面包含&#xff1a; 1.CLS&#xff1a;公共语言规范&#xff0c;包括了几种面向对象的编程语言的通用功能 2.CTS&#xff1a;通用系…

.NET Core 2.0体验

.NET Core 2.0预览版及.NET Standard 2.0 Preview 这个月也就要发布了。具体相关信息可以查看之前的文章.NET Core 2.0及.NET Standard 2.0。 今天来实际体验.NET Core 2.0&#xff0c;正式版发布还需要一段时间。 .NET Core 2.0 本文使用的是 nightly .NET Core 2.0 runtim…

跟我学 Java 8 新特性之 Stream 流(四)并行流

转载自 跟我学 Java 8 新特性之 Stream 流&#xff08;四&#xff09;并行流 随着对流API认识的慢慢深入&#xff0c;本章我们要讨论的知识点是流API里面的并行流了。 在开始讨论并行流之前&#xff0c;我先引发一下大家的思考&#xff0c;就你看到这篇文章的时间&#xff…

运算和统计

一、变量&#xff1a; 1.是一种内容不固定的项&#xff0c;数据内容会因程序的运行而改变。 2.将变量存在计算机内存中&#xff0c;便于程序调用 3.变量有变量类型、变量名和值。 二、变量的类型&#xff1a; 1.字符串类型&#xff1a;存储姓名&#xff0c;性别&#xff0c;一句…

JS浏览器加载一个页面的过程

加载过程->从上向下逐行进行加载 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><script type"text/javascript">/** 浏览器在加载一个页面时&#xff0c;是按照自上向下的顺序加载的&…

MyBatis第四天(多表查询)

地址&#xff1a;引用MyBatis第四天&#xff08;多表查询&#xff09;