web前端开发
关注
分享
扫一扫
文章平均质量分 68
web_xyk
这个作者很懒，什么都没留下…
展开
-
前端性能优化
Web 指标是Google 开创的一项新计划，旨在为网络质量信号提供统一指导，这些信号对于提供出色的网络用户体验至关重要。Google 提供了许多性能测量和性能报告工具。一些开发者对这些工具的使用十分在行，而另一些开发者则发现大量的工具和指标令人应接不暇。我们想了解提供给用户的体验质量，并非需要成为性能专家。Web 指标计划旨在简化场景，帮助网站专注于最重要的指标，即核心 Web 指标。原创 2023-09-28 15:03:10 · 391 阅读 · 0 评论 -
获取浏览器窗口相对于屏幕的位置，获取可视窗口的宽高、元素的样式或伪元素的样式
获取浏览器窗口相对于屏幕的位置 var leftPos = typeof window.screenLeft === "number" ? window.screenLeft : window.screenX, topPos = typeof window.screenTop === "number" ? window.screenTop : win...原创 2018-02-23 09:59:29 · 875 阅读 · 0 评论 -
css媒体查询，响应式布局，web设计之@media screen
Media Queries：其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。那么，Media Queries是如何工作的？两种方式：一、直接在link中判断设备的尺寸，然后引用不同的css文件：< link rel = "stylesheet" type = "text/css" href ...转载 2015-06-12 15:29:19 · 511 阅读 · 0 评论 -
webpack4
安装如果需要使用 webpack 4，则需要从 next 分支上安装：// yarnyarn add webpack@next webpack-cli --dev// npm npm install webpack@next webpack-cli --save-dev不完全迁移指北环境不再支持 Node.js 4。根据 package.json 配置, Node.js 的最低支持版本为 ...转载 2018-04-17 11:09:27 · 1034 阅读 · 1 评论 -
css3动画贝塞尔曲线cubic-bezier，css3动画的五种情况
当大家开始做css3动画的时候，了解贝塞尔曲线就成了不可或缺的。“贝赛尔曲线”是由法国数学家Pierre Bézier所发明，由此为计算机矢量图形学奠定了基础。它的主要意义在于无论是直线或曲线都能在数学上予以描述。这里主要说贝塞尔曲线在css3中的运用，三次方公式，四个点确定 三阶贝塞尔曲线由四个点确定，那么css3的贝塞尔函数cubic-bezier(x1,y1,x2,y2)只有两...原创 2018-04-21 12:09:22 · 11045 阅读 · 0 评论 -
移动端 viewport
width：设置layout viewport 的宽度，为一个正整数，使用字符串”width-device”表示设备宽度initial-scale： 设置页面的初始缩放值，为一个数字，可以带小数minimum-scale： 允许用户的最小缩放值，为一个数字，可以带小数maximum-scale： 允许用户的最大缩放值，为一个数字，可以带小数heigh：t 设置layout viewport 的高...原创 2018-04-14 10:46:29 · 200 阅读 · 0 评论 -
shim和polyfill
shim是一个库，它将一个新的api引入到一个旧的环境，而且紧靠旧环境中已有的手段一个polyfill就是一个用在浏览器API上的shim.我们通常的做法是先检查当前浏览器是否支持某个API，如果不支持的话就加载对应的polyfill.然后新旧浏览器就都可以使用这个API了...原创 2018-02-23 17:31:11 · 269 阅读 · 0 评论 -
正则括号，正则手机号校验，整数、两位小数正则
* 零次或多次匹配+ 一次或多次？ 0次或1一次匹配在正则表达式中有3种类型的括号:方括号 "["、圆括号"("和花括号"{" 。方括号"[" 内是需要匹配的字符，花括号"{" 内是指定匹配字符的数量。圆括号"(" 则是用来分组的。插入符号 "^" 表示正则式的开始。美元符号"$" 表示正则式的结束。下表按从高到低的顺序包含了正则表达式运算符的优先原创 2018-02-23 10:27:11 · 411 阅读 · 0 评论 -
js 给元素绑定回车事件
经常会看到登录页面输入完账户密码,回车就登录了.实现方法:1.jquery方法$("#focus")为获取id为focus的元素$("#focus").keypress(function(event){ if(event.which === 13) { //点击回车要执行的事件 }})2.js方法var focus = document....原创 2015-11-27 15:41:29 · 8101 阅读 · 0 评论 -
新一代的前端存储方案--indexedDB
indexedDB是浏览器端存储大量数据的方法，它创造的数据可以查询，并且可以离线使用。基于实物操作的key-value型前端数据库1.创建一个indexedDB数据库 const request = indexedDB.open('myDatabase','1') indexedDB.open()创建一个indexedDB数据库，open方法可以接受两个参数 ...原创 2018-06-02 09:26:25 · 579 阅读 · 0 评论 -
position的8种定位方式
position定位的八种方式：一、常见/用的四种1.staticpositon定位的默认值，没有定位2.relative生成相对定位的元素，相对于其正常位置进行定位，一般在子元素设置absoute定位时，给父元素设置relative元素的位置通过top、right、bottom、left控制，其值的定位起点都是是父元素左上角(这点和absoute、fixed不一...原创 2018-09-18 15:31:52 · 30914 阅读 · 6 评论 -
内存泄露和javaScript的内存管理机制
1.内存泄漏（Memory Leak）是指程序中己动态分配的堆内存由于某种原因程序未释放或无法释放，造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃等严重后果2.javaScript的内存管理机制内存基元在变量（对象，字符串等等）创建时分配，然后在他们不再被使用时“自动”释放,后者被称为垃圾回收(GC:Garbage Collecation)3.垃圾回收方法1....原创 2018-09-12 18:34:33 · 357 阅读 · 0 评论 -
H5实现多图上传与预览，图片压缩上传
H5多图上传，并实现压缩(可根据实际情况选择对多大的图片进行压缩，本例为大于512KB的进行压缩)和预览<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>H5多图压缩上传与预览</title&g原创 2018-08-23 18:05:47 · 4019 阅读 · 1 评论 -
创建百度地图，多个地址切换
1.先注册百度账号2.登录百度地图开放平台 点击跳转登录3.申请秘钥 地址引入地图js文件时最后的 ak即自己申请的秘钥,记得更换<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="...原创 2018-07-19 18:05:30 · 1376 阅读 · 0 评论 -
实现dtGrid列总计功能
先看效果 1.在jquery.dtGrid.js中添加根据列id计算列总计代码1.新增总计列id数组$.fn.DtGrid.defaultOptions = { grid : { lang : 'en', totalCountColById:[], //新增总计列id数组，格式为数组，支持多列总计 ajaxLoad : true, loadAll...原创 2018-07-19 16:50:32 · 891 阅读 · 0 评论 -
js代码执行过程，js预编译，变量声明提升，函数体整体提升
js代码执行过程1.先扫描全局语法是否有错误，有错则报错并停止扫描2.无错则进行预编译过程 创建全局GO对象 global object 对var声明的变量进行声明提升但不赋值,放入GO对象中 对函数体整体进行提升，放入GO对象中3.函数执行时 创建AO对象 activation object 找形参和变量声明，将变量和形参名作为AO属...原创 2018-02-23 11:56:59 · 807 阅读 · 1 评论 -
微信小程序开发中的一些问题总结，无法跳转，input组件变高等
1.在代码正常执行的情况下wx.navigateTo或者wx.redirectTo跳转页面不生效 查看要跳转的页面是否是tabBar即tab栏中的页面，如果是需要用wx.swicthTab方法2.在反复保存调试的时候input等组件会出现突然变高的情况正常： 这是开发者工具渲染时的问题导致的，在真机上没有出现这个问题。可以忽略3.持续更新中......原创 2018-03-02 09:32:46 · 827 阅读 · 0 评论 -
git安装与使用
在Windows上安装Git在Windows上使用Git，可以从Git官网直接下载安装程序，（网速慢的同学请移步国内镜像），然后按默认选项安装即可。安装完成后，在开始菜单里找到“Git”->“Git Bash”，打开弹出下面的窗口，就说明Git安装成功了：安装完成后，还需要最后一步设置，在命令行输入（设置全局的默认用户名和邮箱账号，也可以根据不同的项目使用不同的用户名和Email地址）：gi...原创 2018-02-23 10:37:10 · 373 阅读 · 0 评论 -
图片上传预览，图片上传之前本地预览
HTML5 file API可以让图片在上传之前直接在浏览器中显示，通常使用FileReader方法，代码示意如下：<!DOCTYPE><html><head><meta charset="utf-8"><style>.imgCom{ width: 300px; height: 300px; bor...原创 2018-02-23 17:27:19 · 678 阅读 · 0 评论 -
微信小程序自定义公用提示弹层
微信小程序自定义的toast样式比较单一，而且不一定符合每个人的需求。比如以下这几种或者其他样式在小程序中实现上面的方法并不难，难点主要是如何实现像普通html中那样定义一个公用方法，然后每个页面都能复用。下面具体说明如何实现上图中的提示样式一、先上已经做好的项目结构，showToast文件夹即公用的提示文件，包含wxml, js，wxss三个文件1. showToast.wx...原创 2018-02-27 12:07:07 · 9517 阅读 · 0 评论 -
js重写toFixed方法（兼容负数），js四舍五入保留小数不准确
最近因为项目经常要用到四舍五入保留两位小数，但是toFixed()方法却经常出现不正确的情况，即四舍六入五凑偶（4以下舍去，6以上进位，5只有前面一位是偶数的时候才进位，奇数不进位）最重要的是网上搜出来的方法都是针对正数的，对于负数还是存在问题，在这里进行了补充自己写了一个方法：Number.prototype.toFixed = function (s) { var ...原创 2016-08-09 17:42:30 · 6291 阅读 · 5 评论 -
js获取windows操作系统版本
var userAgentInfor = navigator.userAgent.toLowerCase(), windowsVersion = userAgentInfor.substr(userAgentInfor.indexOf('windows nt ') + 11,4), nameVersion;switch(windowsVersion){ case原创 2016-08-09 17:27:23 · 2130 阅读 · 0 评论 -
css伪类选择器及其兼容性
常用的几个选择子元素的伪类选择器：1. :first-child (兼容性：对于 IE8 及更早版本的浏览器中的 :first-child，必须声明 。)匹配选中元素的第一个元素，如图2. :last-child (兼容性:ie9以下不支持)匹配选中元素的最后一个元素，如图3. :nth-child(n) (兼容性:ie9以下不支持)原创 2016-07-08 18:03:15 · 3750 阅读 · 0 评论 -
web移动端知识和资源链接
今天在w3cfuns上面看到这个关于移动端知识的整理，感觉不错就转一下。原页面链接（移动端web整理）。下面是知识的列表，原页面每条都有链接，详细请查看原页面内容。http://www.cnblogs.com/PeunZhang/p/3407453.html#question_20meta基础知识H5页面窗口自动调整到设备宽度，并禁止用户缩放页面忽略将页面中的数字识别为电话转载 2015-09-05 15:56:54 · 461 阅读 · 0 评论 -
关于包含块（containing block）的理解
概念：元素的尺寸和位置的计算往往是由该元素所在的包含块决定的，包含块就是为它里面包含的元素定位提供一个初始位置，它是一片长方形的区域。一般元素用到position定位时，因需要确定定位的初始位置，就需要清楚什么是包含块。（为便与理解，个人做了简单的描述，不一定是标准解释）。包含块：1、在HTML中，html元素就是一个包含块（即初始包含块）。2、如果元素的定位（position）为：relativ...原创 2015-04-22 15:25:49 · 1567 阅读 · 0 评论 -
JSON.parse()和JSON.stringify()
JSON.parse() 用于从一个字符串中解析出json数据，如：var str = '{"ie":"兼容ie8+(ie8 标准模式)"}';console.log(JSON.parse(str))输出： { ie: "兼容ie8+(ie8 标准模式)",} JSON.stringify() 用于把json数据转换成字符串，如：var obj = {a:1,...原创 2015-08-12 10:09:28 · 435 阅读 · 0 评论 -
盒模型（Box model）
概念：首先我们都知道网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性，这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。为什么用到盒模型：不同的盒模型计算出的盒子宽高不同，所以在网页布局的时候要清楚用的是哪个...原创 2015-05-02 16:42:39 · 517 阅读 · 0 评论 -
函数式编程
1. 大多数有用的纯函数必须至少传入一个参数2. 有用的纯函数一定会返回一些东西3. 纯函数对于相同的输入总会有相同的输出4. 纯函数没有副作用5. 函数式编程通过递归来做循环function sumRange(start,end,acc){ if(start > end){ return acc; }else{ return sumRange(sta...原创 2018-02-23 10:34:17 · 147 阅读 · 0 评论 -
ajax异步模式下实现同步和等待loading效果（jQuery同步Ajax带来的UI线程阻塞问题及解决办法）
在与后台实现数据交互时经常会遇到一种这样的情况：1.需要用一个ajax请求后台数据，并且要在获取到数据之后再渲染到页面，这个时候就必须用同步（async:false）。2.然而在这个时候就会有另一种情况，当ajax的请求花费的时间比较长的时候需要一个loading层来显示等待状态3.这个时候beforeSend是没有效果的，即使把loading的代码写在ajax之前也不行。4.原因...原创 2016-11-25 14:47:50 · 22585 阅读 · 12 评论 -
WEB标准系列-HTML元素嵌
让我们先了解下W3C在最新的HTML5规范中对元素的分类方式：如上图，元素的分类不再是块元素或内联元素这样来分类（其实从来就没有这样分），而是按照如下分类来分：Flow（流式元素）、Heading（标题元素）、Sectioning（章节元素）、Phrasing（段落元素）、Embedded（嵌入元素）、Interactive（交互元素）、Metadata（元数据元素）。Flow（流式元素）在应用程...转载 2016-07-08 09:26:19 · 506 阅读 · 0 评论 -
js获取子元素，原生获取子元素
js原生获取子节点:1.封装成公用方法,以便于复用.function deleteTextNode(id) {var _elem = document.getElementById(id), _child = _elem.childNodes, i = 0; for (; i < _child.length;...原创 2015-11-27 15:26:53 · 3959 阅读 · 0 评论 -
js原生选择器的兼容性
个人对一些常用的js原生选择器做了兼容性测试（主要针对ie5以上），而对于 更新到41.0.2版本的FF 、45.0.2版本的Google来说基本上不用考虑以下所述内容的兼容性。总结如下：1. document.getElementById("")无兼容性问题,在当下浏览器环境中可以放心使用。2.getElementsByTagName("")无兼容性问题,在当下浏览器环境中可以放心使用。3.do...原创 2015-10-24 14:52:09 · 728 阅读 · 0 评论 -
jqGrid怎么设置初始化页面时不加载数据（不向服务器请求数据）
最近做一些表格一直用到jqGrid，今天遇到一个问题：1.就是页面加载的时候数据不显示，点击搜索才根据请求从服务器返回并显示内容.2.默认不从服务器请求数据（不然在开发者工具下会显示请求不到数据的报错）通常的解决方法就是直接给$("#jqGridTable").jqGrid({})套一个function，但个人感觉这并不是最好的方法。我建议可以用：1.初始化$("#jqGri...原创 2015-08-25 16:03:30 · 10058 阅读 · 1 评论 -
js 不同页面间传递值并取值，html不同页面间数据传递
以前没用到过页面间传递参数再从后台获取数据，自己总结了一些。先说需求：现在有页面pageA.html 和页面pageB.html，页面pageA.html中有一事件，当这个事件触发时会打开页面pageB.html。而且页面pageB.html中的一些内容需要根据pageA.html 中的一些值来判断显示哪些内容或者做一些操作。方法一：(1) pageA.html 中的事件为 windo...原创 2015-08-22 09:51:23 · 20127 阅读 · 1 评论 -
jQuery length和size()的区别
jQuery length和size()区别总结如下：1.length是属性，size()是方法。2.如果你只是想获取元素的个数，两者效果一样既 $("img").length 和 $("img").size() 获取的值是一样的；但是如果是获取字符串的长度就只得用length, 如 $("#text").val().length 从上可以看出size()是调用length属性实现的，而且在jqu...转载 2015-08-14 09:31:30 · 489 阅读 · 0 评论 -
BFC（Block Formatting Context），块级格式上下文，清除浮动原理
BFC（Block Formatting Context）：块级格式上下文，它是指一个独立的块级渲染区域，只有块级元素(Block-level BOX)参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。相应的还用IFC（行内元素上下级）等。Formatting Context：指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。...原创 2015-05-02 17:18:25 · 494 阅读 · 0 评论