移动端js事件、zeptojs、swiper、bootstrap、正则表达式、前端性能优化

移动端场景下的js事件,制作移动端特效常用的js库,介绍移动端常用开发框架Bootstrap

一、移动端js事件

移动端的操作方式和PC端是不同的,移动端主要用手指操作,所以有特殊的touch事件,touch事件包括如下几个事件:

1、touchstart:   //手指放到屏幕上时触发
2、touchmove:   //手指在屏幕上滑动式触发
3、touchend:   //手指离开屏幕时触发
4、touchcancel:   //系统取消touch事件的时候触发,比较少用

移动端一般有三种操作,点击、滑动、拖动,这三种操作一般是组合使用上面的几个事件来完成的,所有上面的4个事件一般很少单独使用,一般是封装使用来实现这三种操作,可以使用封装成熟的js库

二、zeptojs

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。Zepto的一些可选功能是专门针对移动端浏览器的;它的最初目标是在移动端提供一个精简的类似jquery的js库

zepto官网:Zepto.js: the aerogel-weight jQuery-compatible JavaScript library
zepto中文api:http://www.css88.com/doc/zeptojs_api/
zepto包含很多模块,默认下载版本包含的模块有Core, Ajax, Event, Form, IE模块,如果还需要其他的模块,可以自定义构建。
zepto自定义构建地址:http://github.e-sites.nl/zeptobuilder/

三、swiper

swiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件,一般用来触屏焦点图、触屏整屏滚动等效果。 swiper分为2.x版本和3.x版本,2.x版本支持低版本浏览器(IE7),3.x放弃支持低版本浏览器,适合应用在移动端

2.x版本中文网址:Swiper2|Swiper中文网
3.x版本中文网地址:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

swiper使用方法:

<script type="text/javascript" src="js/swiper.min.js"></script><!--如果页面引用了jquery或者zepto,就引用 swiper.jquery.min.js,它的容量比swiper.min.js<script src="path/to/swiper.jquery.min.js"></script>
-->......
<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
......<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">slider1</div><div class="swiper-slide">slider2</div><div class="swiper-slide">slider3</div></div><div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>
</div><script> 
var swiper = new Swiper('.swiper-container', {pagination: '.swiper-pagination',prevButton: '.swiper-button-prev',nextButton: '.swiper-button-next',initialSlide :1,paginationClickable: true,loop: true,autoplay:3000,autoplayDisableOnInteraction:false
});
</script>

swiper使用参数:

  1. initialSlide:初始索引值,从0开始
  2. direction:滑动方向 horizontal | vertical
  3. speed:滑动速度,单位ms
  4. autoplay:设置自动播放及播放时间
  5. autoplayDisableOnInteraction:用户操作swipe后是否还自动播放,默认是true,不再自动播放
  6. pagination:分页圆点
  7. paginationClickable:分页圆点是否点击
  8. prevButton:上一页箭头
  9. nextButton:下一页箭头
  10. loop:是否首尾衔接

 四、bootstrap

简单、直观、强悍的前端开发框架,让web开发更迅速、简单。 来自Twitter,是目前很受欢迎的前端框架之一。 Bootrstrap是基于HTML、CSS、JavaScript的,让书写代码更容易。 移动优先,响应式布局开发。

bootstrap中文网址:Bootstrap中文网

bootstrap 容器

  • container-fluid 流体
  • container:1170、970、750、100%
<div class="container-fluid">流体容器</div>
<div class="container">响应式固定容器</div>

bootstrap响应式查询区间:

  1. 大于等于768
  2. 大于等于992
  3. 大于等于1200

bootstrap 栅格系统:bootstrap将页面横向分为12等分,按照12等分定义了适应不同宽度等分的样式类,这些样式类组成了一套响应式、移动设备优先的流式栅格系统:

  1. col-lg- 大于1200排成一行,小于1200分别占一行
  2. col-md- 大于992排成一行,小于992分别占一行
  3. col-sm- 大于768排成一行,小于768分别占一行
  4. col-xs- 始终排列成一行
<style type="text/css">div[class*='col-']{background-color:cyan;border:1px solid #ddd;height:50px;}
</style>......
<div class="container"><div class="row"><div class="col-lg-3">col-lg-3</div><div class="col-lg-3">col-lg-3</div><div class="col-lg-5">col-lg-5</div><div class="col-lg-1">col-lg-1</div></div><br><br><div class="row"><div class="col-md-3">col-md-3</div><div class="col-md-3">col-md-3</div><div class="col-md-3">col-md-3</div><div class="col-md-3">col-md-3</div></div><br><br><div class="row"><div class="col-sm-3">col-sm-3</div><div class="col-sm-3">col-sm-3</div><div class="col-sm-3">col-sm-3</div><div class="col-sm-3">col-sm-3</div></div><br><br><div class="row"><div class="col-xs-3">col-xs-3</div><div class="col-xs-3">col-xs-3</div><div class="col-xs-3">col-xs-3</div><div class="col-xs-3">col-xs-3</div></div>
</div>

列偏移

  1. col-lg-offset-
  2. col-md-offset-
  3. col-sm-offset-
  4. col-xs-offset-

bootstrap 按钮:btn 声明按钮,btn-default 默认按钮样式,btn-primay、btn-success、btn-info、btn-warning、btn-danger、btn-link、btn-lg、btn-md、btn-xs、btn-block 宽度是父级宽100%的按钮、active、disabled、btn-group 定义按钮组

<!-- 一般按钮组 -->
<div class="btn-group"><input type="button" name="" value="按钮一" class="btn btn-primary"><input type="button" name="" value="按钮二" class="btn btn-warning"><input type="button" name="" value="按钮三" class="btn btn-danger">
</div><!-- 通栏按钮组 如果用input标签做按钮,需要将它用 btn-group的容器包起来  -->
<div class="btn-group btn-group-justified"><div class="btn-group"><input type="button" name="" value="按钮一" class="btn btn-primary"></div><div class="btn-group"><input type="button" name="" value="按钮二" class="btn btn-warning"></div><div class="btn-group"><input type="button" name="" value="按钮三" class="btn btn-danger"></div>
</div><!-- 通栏按钮组,如果用a标签做按钮,就不用上面的结构,直接写  -->
<div class="btn-group btn-group-justified"><a href="#" class="btn btn-primary">按钮一</a><a href="#" class="btn btn-default">按钮二</a><a href="#" class="btn btn-default">按钮三</a>
</div>

bootstrap 表单

  1. form 声明一个表单域
  2. form-inline 内联表单域
  3. form-horizontal 水平排列表单域
  4. form-group 表单组、包括表单文字和表单控件
  5. form-control 文本输入框、下拉列表控件样式
  6. checkbox checkbox-inline 多选框样式
  7. radio radio-inline 单选框样式
  8. input-group 表单控件组
  9. input-group-addon 表单控件组物件样式
  10. input-group-btn 表单控件组物件为按钮的样式
  11. form-group-lg 大尺寸表单
  12. form-group-sm 小尺寸表单
<!--  表单  -->
<form role="form"><div class="form-group form-group-lg"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"></div><div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-default">Submit</button>
</form><!--  表单控件组  -->
<div class="input-group"><input type="text" class="form-control"><span class="input-group-addon">@</span>
</div><!--  表单控件组  -->
<div class="input-group"><input type="text" class="form-control"><span class="input-group-btn"><button class="btn btn-default" type="button">Go!</button></span>
</div>

bootstrap 图片:img-responsive 声明响应式图片

bootstrap 字体图标:通过字体代替图标,font文件夹需要和css文件夹在同一目录

bootstrap 导航条

  1. navbar 声明导航条
  2. navbar-default 声明默认的导航条样式
  3. navbar-inverse 声明反白的导航条样式
  4. navbar-static-top 去掉导航条的圆角
  5. navbar-fixed-top 固定到顶部的导航条
  6. navbar-fixed-bottom 固定到底部的导航条
  7. navbar-header 申明logo的容器
  8. navbar-brand 针对logo等固定内容的样式
  9. nav navbar-nav 定义导航条中的菜单
  10. navbar-form 定义导航条中的表单
  11. navbar-btn 定义导航条中的按钮
  12. navbar-text 定义导航条中的文本
  13. navbar-left 菜单靠左
  14. navbar-right 菜单靠右
<!-- 可伸缩菜单 data-target="#.." 需要加#  -->
<div class="navbar navbar-inverse navbar-static-top "><div class="container"><div class="navbar-header"><button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="#" class="navbar-brand">LOGO</a></div><div class="collapse navbar-collapse" id="mymenu"><ul class="nav navbar-nav"><li class="active"><a href="#">首页</a></li><li><a href="#">公司新闻</a></li><li><a href="#">行业动态</a></li></ul><form class="navbar-form navbar-right"><div class="form-group"><div class="input-group"><input type="text" class="form-control"><span class="input-group-btn"><button class="btn btn-default" type="button">Go!</button></span></div>    </div></form></div></div>
</div>

路径导航

<ol class="breadcrumb"><li><a href="#">Home</a></li><li><a href="#">Library</a></li><li class="active">Data</li>
</ol>

巨幕

<div class="jumbotron"><div class="container">...</div>
</div>

bootstrap 模态框

  1. modal 声明一个模态框
  2. modal-dialog 定义模态框尺寸
  3. modal-lg 定义大尺寸模态框
  4. modal-sm 定义小尺寸模态框
  5. modal-header
  6. modal-body
  7. modal-footer
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">大弹出框按钮</button><div class="modal fade" id="mymodal"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header">大尺寸弹出框</div><div class="modal-body">模态框主体</div><div class="modal-footer"><button type="button" class="btn btn-default"  data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div>
</div>

bootstrap 下拉菜单

1、dropdown-toggle
2、dropdown-menu

<div class="row">            <div class="dropdown"><div class="btn btn-primary  dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></div><ul class="dropdown-menu"><li><a href="#">菜单一</a></li><li><a href="#">菜单二</a></li><li><a href="#">菜单三</a></li></ul></div>
</div>

bootstrap 隐藏类

1、hidden-xs
2、hidden-sm
3、hidden-md
4、hidden-lg

五、正则表达式

正则表达式:能让计算机读懂的字符串匹配规则

正则表达式的写法:
        var re=new RegExp('规则', '可选参数');
        var re=/规则/参数;

规则中的字符

  1. 普通字符匹配:如:/a/ 匹配字符 ‘a’,/a,b/ 匹配字符 ‘a,b’
  2. 转义字符匹配:
    1. \d 匹配一个数字,即0-9
    2. \D 匹配一个非数字,即除了0-9
    3. \w 匹配一个单词字符(字母、数字、下划线)
    4. \W 匹配任何非单词字符。等价于[^A-Za-z0-9_]
    5. \s 匹配一个空白符
    6. \S 匹配一个非空白符
    7. \b 匹配单词边界
    8. \B 匹配非单词边界
    9. . 匹配一个任意字符
var sTr01 = '123456asdf';
var re01 = /\d+/;
//匹配纯数字字符串
var re02 = /^\d+$/;
alert(re01.test(sTr01)); //弹出true
alert(re02.test(sTr01)); //弹出false

量词:对左边的匹配字符定义个数

  • ? 出现零次或一次(最多出现一次)
  • + 出现一次或多次(至少出现一次)
  • * 出现零次或多次(任意次)
  • {n} 出现n次
  • {n,m} 出现n到m次
  • {n,} 至少出现n次

任意一个或者范围

  • [abc123] : 匹配‘abc123’中的任意一个字符
  • [a-z0-9] : 匹配a到z或者0到9中的任意一个字符

限制开头结尾

  • ^ 以紧挨的元素开头
  • $ 以紧挨的元素结尾

修饰参数:

  • g:global,全文搜索,默认搜索到第一个结果接停止
  • i:ingore case,忽略大小写,默认大小写敏感

常用函数

  1. test用法:正则.test(字符串) 匹配成功,就返回真,否则就返回假
  2. replace用法:字符串.replace(正则,新的字符串) 匹配成功的字符去替换新的字符

正则默认规则
匹配成功就结束,不会继续匹配,区分大小写

var sTr01 = 'abcdefedcbaCef';
var re01 = /c/;
var re02 = /c/g;
var re03 = /c/gi;var sTr02 = sTr01.replace(re01,'*');
var sTr03 = sTr01.replace(re02,'*');
var sTr04 = sTr01.replace(re03,'*');
alert(sTr02); // 弹出 ab*defedcbaCef
alert(sTr03); // 弹出 ab*defed*baCef
alert(sTr04); // 弹出 ab*defed*ba*ef

常用正则规则

//用户名验证:(数字字母或下划线6到20位)
var reUser = /^\w{6,20}$/;//邮箱验证:        
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;//密码验证:
var rePass = /^[\w!@#$%^&*]{6,20}$/;//手机号码验证:
var rePhone = /^1[3458]\d{9}$/;

 六、前端性能优化

从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量,所有前端性能优化很重要

前端性能优化分为如下几个方面:

代码部署:

  1. 代码的压缩与合并
  2. 图片、js、css等静态资源使用和主站不同域名地址存储,从而使得在传输资源时不会带上不必要的cookie信息。
  3. 使用内容分发网络 CDN
  4. 为文件设置Last-Modified、Expires和Etag
  5. 使用GZIP压缩传送
  6. 权衡DNS查找次数(使用不同域名会增加DNS查找)
  7. 避免不必要的重定向(加"/")

编码

  1. html:
    1. 使用结构清晰,简单,语义化标签
    2. 避免空的src和href
    3. 不要在HTML中缩放图片
  2. css:
    1. 精简css选择器
    2. 把CSS放到顶部
    3. 避免@import方式引入样式
    4. css中使用base64图片数据取代图片文件,减少请求数,在线转base64网站:图片在线转换Base64,图片编码base64
    5. 使用css动画来取代javascript动画
    6. 使用字体图标
    7. 使用css sprite(雪碧图)
    8. 使用svg图形
    9. 避免使用CSS表达式
    10. 避免使用css滤镜
body{background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" );  
}

javascript:

  1. 减少引用库的个数
  2. 使用requirejs或seajs异步加载js
  3. JS放到页面底部引入
  4. 避免全局查找
  5. 使用原生方法
  6. 用switch语句代替复杂的if else语句
  7. 减少语句数,比如说多个变量声明可以写成一句
  8. 使用字面量表达式来初始化数组或者对象
  9. 使用innerHTML取代复杂的元素注入
  10. 使用事件代理(事件委托)
  11. 避免多次访问dom选择集
  12. 高频触发事件设置使用函数节流
  13. 使用Web Storage缓存数据

 学习导航:http://www.xqnav.top

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

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

相关文章

前缀和 求数列的子序列的K倍区间

(直接截图比复制文字要好多了) 不会做的时候我去看了之前做的关于这道题目的笔记&#xff0c; &#xff08;Ak 1&#xff09;% k 1 &#xff08;Ak 1 Ak&#xff09;% k 1 只要发现了同余数的情况就说明有一个区间满足了题目的要求。 这个方法的精妙之处就在于前缀和包括了…

嵌入式Linux driver开发实操(二十一):linux device driver basic设备驱动程序基础

linux的架构框图: 内核空间是内核(即操作系统的核心)执行(即运行)并提供其服务的地方。 用户空间是执行用户应用程序的地方。 内核模块是可以根据需要加载和卸载到内核中的代码片段。它们扩展了内核的功能,而无需重新启动系统。自定义代码可以通过两种方法添加到Linux内…

C++ —— 继承

什么是继承&#xff1f; 继承是指一种代码可以被复用的机制&#xff0c;在一个类的基础上进行扩展&#xff0c;产生的新类叫做派生类&#xff0c;被继承的类叫基类。&#xff08;也可称为子类和父类&#xff09; 继承的写法&#xff1a; class B : 继承方式 A (…

Java高级阶段面试题库(Redis数据库、MQ消息队列、kafka、SpringBoot + SpringCloud、MySQL、JVMJUC、其它)

文章目录 1. Redis数据库篇(忽略)1.1 简单介绍一下redis1.2 单线程的redis为什么读写速度快?1.3 redis为什么是单线程的?1.4 redis服务器的的内存是多大?1.5 为什么Redis的操作是原子性的&#xff0c;怎么保证原子性的&#xff1f;1.6 你还用过其他的缓存吗&#xff1f;这些…

学习Django

1.python安装是会有几个主要目录&#xff1a; 2.如果某个路径加入了环境变量&#xff0c;那么在命令行直接输入他下面的文件就能找到&#xff0c;不用输入完整路径 2.过程 &#xff08;1&#xff09;安装 &#xff08;2&#xff09;建项目 在终端&#xff1a; &#xff08;…

快速回复app是什么样

在电商领域&#xff0c;掌握一些必备的软件工具是提高工作效率、优化运营流程以及提升用户体验的关键。本文将为您介绍做电商必备的几个软件&#xff0c;帮助您更好地开展电商业务。 ​ 快速回复APP&#xff1a;重新定义沟通效率 在快节奏的现代社会中&#xff0c;人们对于沟通…

ZeRO论文阅读

一.前情提要 1.本文理论为主&#xff0c;并且仅为个人理解&#xff0c;能力一般&#xff0c;不喜勿喷 2.本文理论知识较为成体系 3.如有需要&#xff0c;以下是原文&#xff0c;更为完备 Zero 论文精读【论文精读】_哔哩哔哩_bilibili 二.正文 1.前言 ①为什么用该技术&…

性能测试工具一——gprof(采样测试与插桩测试结合的混合测试)

gprof只适用于Linux平台&#xff0c;不支持MacOS和Windows。 使用前提&#xff1a;在编译指令中加入-pg即可。也可添加其它编译选项&#xff0c;但-pg是核心&#xff0c;-Og -g -pg或-D NDEBUG -Og -g -pg。 例如在Makefile中g -Og -g -pg。或在CMakeLists.txt中set(CMAKE_CX…

Linux网络设置

将Linux主机接入到网络&#xff0c;需要配置网络相关设置 一般包括&#xff1a;主机名&#xff1b;IP/netmask&#xff1b;路由&#xff1a;默认网关&#xff1b;DNS服务器&#xff1a;主DNS服务器&#xff0c;次DNS服务器&#xff0c;第三个DNS服务器 网卡的配置文件在&…

java:观察者模式

java&#xff1a;观察者模式 1 前言 观察者模式&#xff0c;又被称为发布-订阅&#xff08;Publish/Subscribe&#xff09;模式&#xff0c;他定义了一种一对多的依赖关系&#xff0c;让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时&#xff0c;会通知所…

C语言-atoi函数的使用和实现

atoi是C语言中常见的函数。大家可能对于他不太熟悉&#xff0c;其主要还是因为学校可能没有讲到。其实有很多函数像atol、atof都是一样的&#xff0c;本篇文章以atoi为例&#xff0c;剩余大家如果感兴趣可以再去了解。 目录 1.函数介绍 2.代码演示 3.atoi函数的模拟实现 4…

【Pyhton爬虫实战】爬取京东商城的商品信息

爬取京东商城的商品信息&#xff0c;并将数据以Dataframe形式展示 from selenium.webdriver import Chrome, ChromeOptions import re import pymysql from selenium.webdriver.common.by import By import collections import pandas as pdclass Spider():def __init__(self)…

百面算法工程师 | 卷积基础知识——Convolution

目录 8.1 图像卷积过程 8.2 卷积层基本参数 8.3 卷积后图像的长和宽大小的计算方式 8.4 卷积神经网络中的权重共享 8.5 上采样中的反卷积 8.6 空洞卷积 8.7 深度可分离卷积 8.8 为什么可分离卷积中Depthwise卷积后还要进行pointwise卷积 8.9 分组卷积 Group Conv 8.1…

2024年最重要的AI趋势

2022年是生成式AI在公众意识中爆发的一年&#xff0c;2023年是它开始在商业世界扎根的一年。因此&#xff0c;2024年将是关乎AI未来关键的一年&#xff0c;因为研究人员和企业都在寻求&#xff1a;如何将这一技术上的进化飞跃最实际地融入我们的日常生活。 生成式AI的进化与计…

5分钟快速搭建k8s集群1.29.x

配置主机名和hosts 配置主机名 hostnamectl set-hostname node1 hostnamectl set-hostname node2 hostnamectl set-hostname node3 vim /etc/hosts 172.19.35.202 node1 172.19.35.203 node2 172.19.35.204 node3 测试 hostname ping -c 3 node2 配置时间同步 关闭防火墙 sys…

AI视频教程下载:ChatGPT个人生产力提升指南

在本课程中&#xff0c;您将学习如何成功地将ChatGPT融入您的工作和生活&#xff0c;以优化您的社交媒体内容并扩展您的业务。 您将学习如何使用ChatGPT自动创建、校对、总结和翻译文本&#xff0c;以及如何与机器人沟通以实现您的目标。 您还将学习如何创建jQuery代码、编程…

倪海厦是怎么去思考问题的(一)下

1《天纪》是自然法则 2自然法则是个《真理》 3《真理》不需要再证实 4《真理》没有二元对立 紧接着第三点&#xff1a;真理不需要再去证实。现在有很多的人呢&#xff0c;看书学习&#xff0c;自认为自己很聪明&#xff0c;总要去证实一些东西。证明谁的说法是错的&#xff…

麒麟龙芯loongarch64 electron 打包deb包

在麒麟龙芯&#xff08;loongarch64&#xff09;电脑上 使用electron 开发桌面应用。之前用electron-packager 打包出来的是文件夹 是 unpack 包。现在需要打包deb包&#xff0c;依据开发指南开始打包。 在项目文件夹下 打开终端 输入 npm run packager 先打包unpack包 然后…

信创测试究竟是什么?与性能测试的差别是什么?

信创测试和性能测试在多个方面存在显著的区别。 首先&#xff0c;信创测试是一个更为全面和系统的测试过程&#xff0c;它主要针对信创工程项目中的产品、系统等进行测试和验证&#xff0c;以确保其自主可控和满足性能要求。这包括适配测试、功能测试、性能测试、安全测试、兼…

Day40 网络编程(二) InetAddress类, Socket ,TCP编程,UDP编程

Day40 网络编程&#xff08;二&#xff09; InetAddress类, Socket ,TCP编程&#xff0c;UDP编程 文章目录 Day40 网络编程&#xff08;二&#xff09; InetAddress类, Socket ,TCP编程&#xff0c;UDP编程一、 InetAddress类二、 Socket三、TCP编程四、UDP编程 一、 InetAddre…