![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
Razas
这个作者很懒,什么都没留下…
展开
-
事件委托
一、原生JS事件委托1.1 兼容写法 二、jQuery事件委托//->删除事件,事件委托$('#myBannerItemList').on("click", ".myDeleteBtn", function (event) { //->获取属性值 var $myItemID = event.target.attributes['my-item-id'...原创 2018-11-27 02:52:20 · 113 阅读 · 0 评论 -
解决移动端REM布局页面跳动的方案
一、将REM.js 提到要加载的CSS之前原来是这样的HTML://-> 在页面最底部引入<script src="../../js/user/user.js"></script></body> JS://-> 动态设置REM~function () { var desW = 640, //设计稿宽度 ...原创 2018-11-28 16:07:36 · 564 阅读 · 0 评论 -
解决H5页面无法滚动
问题一: 在苹果手机可以,但安卓手机不可以。H5页面没有使用任何滚动插件,比如: iscroll.min.js 或者 Better Scroll。这里是因为:* { touch-action: none;}这段代码,会导致安卓手机H5页面无法滚动,而苹果手机可以。 使用 iscroll.min.js 或者 Better Scroll 也没用。将这段代码去掉即...原创 2018-12-02 00:15:17 · 9901 阅读 · 0 评论 -
性能优化之 - 按需加载
按需加载是网站性能优化立竿见影的其中一项,按需加载可以了解为 当用户触发某个动作的时候,才去主动的请求资源,这样带来的优化好处:减少了HTTP请求,节省带宽,让页面首屏的内容更快展现在用户的视线范围内,可见极大提高了用户体验。触发的动作有很多,如鼠标点击,拉动页面滚动条,鼠标经过等等。其中比较重要的是拉动页面滚动条的按需加载。一、图片按需加载<img src="伪装的图片" w...原创 2018-12-27 12:44:35 · 291 阅读 · 0 评论 -
原生javascript - 图片滚动按需加载
图片滚动按需加载:在某个区域的图片(自定义的范围,一般是首屏以下的区域),拉动滚动,图片出现在可视范围才开始加载,目的是减少请求,减耗带宽,提高首屏的呈现速度,让用户第一时间看到网页内容,留下美好的第一印象。讲解:(一)需要按需加载的img标签,图片的真实地址保存到自定义的属性里,如 'data-src' ,那么src属性用一张1像素透明的图片(二)把某范围内的img标签元素保存到数组...原创 2018-12-27 13:57:22 · 155 阅读 · 0 评论 -
js实现滚动条滚动到页面底部继续加载
这是个完整的例子:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{原创 2018-12-27 17:59:21 · 1492 阅读 · 0 评论 -
js 元素进入可视区域 加载数据
参考博客:一、js可视区域加载:getBoundingClientRect方法原创 2018-12-27 18:11:29 · 947 阅读 · 0 评论 -
事件对象及兼容处理
一、什么是事件?事件分为两部分:1) 行为本身:浏览器天生就赋予其的行为,onclick、onmouseover、(onmouseenter),onmouseout(onmouseleave),onmousemove,onmouseup,onmousedown,onmousewheel(鼠标滚轮滚动行为),onscroll(滚动条滚动行为),onresize(window.onresize...原创 2019-01-10 18:41:34 · 556 阅读 · 0 评论 -
事件对象及兼容处理
一、什么是事件?//1.什么是事件?//->事件分为两部分://1)行为本身:浏览器天生就赋予其的行为 onclick、onmouseover、(onmouseenter)//onmouseout(onmouseleave)、onmousemove、onmouseup、onmousedown、onmousewheel//(鼠标滚轮滚动行为)、onscroll(滚动条滚动行为)、...原创 2019-01-11 18:01:00 · 226 阅读 · 1 评论 -
事件对象及兼容处理
一、什么是事件?//1.什么是事件?//->事件分为两部分://1)行为本身:浏览器天生就赋予其的行为 onclick、onmouseover、(onmouseenter)//onmouseout(onmouseleave)、onmousemove、onmouseup、onmousedown、onmousewheel//(鼠标滚轮滚动行为)、onscroll(滚动条滚动行为)、...原创 2019-01-11 18:07:06 · 153 阅读 · 0 评论 -
事件的传播机制
一、事件的传播机制以点击事件为例<div id="outer"> <div id="inner"> <div id="center"> </div> </div></div><script>原创 2019-01-12 17:54:26 · 411 阅读 · 0 评论 -
让元素垂直水平居中的方法
一、使用positionCSS <style>html, body { width: 100%; height: 100%; overflow: hidden; background: #EEEEEE;}.box { position: absolute; top:0; left:0; right:0;...原创 2018-11-17 16:13:00 · 114 阅读 · 0 评论 -
前端性能优化
一、节流和防抖二、本地存储原创 2018-11-16 22:29:50 · 74 阅读 · 0 评论 -
匿名函数的作用域问题
题目一:1. window全局作用域预解释var money;匿名函数的function在全局作用域下是不进行预解释的2. 代码从上到下执行money = "1000"; //给money变量赋值匿名函数之自执行函数:定义和执行一起完成了3. 自执行函数的私有作用域预解释:var money;return后面的代码不参与预解释。return后面跟着的,都是我...原创 2018-09-12 17:06:42 · 545 阅读 · 0 评论 -
数组展平
1.普通方法var arr = [[1], [[2,3], 4], [5,6,7]];function fMd(arr) { var result = []; function f(arr) { for (var i=0; i<arr.length;i++) { console.log(arr[i]); //[1] [[2,3...原创 2018-09-13 04:17:13 · 231 阅读 · 0 评论 -
《JavaScript经典面试题》第1道:用typeof来判断对象的潜在陷阱
1. JavaScript中的null 也被认为是对象let num = null;console.log(typeof num === "object"); //true同时检查 num 是否为 null, 就可以很容易地避免问题console.log((num !== null) && (typeof num === "object")); // fal...转载 2018-09-23 18:32:02 · 161 阅读 · 0 评论 -
预解释
JS中的数据类型:1.基本数据类型:number、string、boolean、null、undefined2.引用数据类型object ( 包含 {} 、[]、/^/、Date) 、function 基本数据类型和引用数据类型的本质区别:基本数据类型是按照值来操作的,而引用数据类型是按照引用地址来操作的。var num = 12; ...原创 2018-09-14 15:54:23 · 102 阅读 · 0 评论 -
iscroll
iscroll 一般用于区域滚动。比如:头部一直固定在顶部。然后,内容区域滚动。H5在移动端的话, position:fixed; 很多移动端浏览器都不兼容。position:fixed; 在移动端不兼容。在移动端开发中,使用position:fixed; 固定定位,很多的手机都支持不好,尤其是在定位的区域还需要输入内容调取虚拟键盘的时候,会出现很多很多的问题。解决这个问题...原创 2018-11-13 16:17:21 · 486 阅读 · 0 评论 -
webapp的架构方式
一、构建REM一般设计稿的宽度,使用640px, 那么字体14px 就可以写成 .28rem 。而header高度44px 可以写成 .88rem。html 的 font-size 设为100px,是因为浏览器最小为12px,设为10px的话,会不准确。index.less@import (reference) "public"; /*-- reference 表示只把publ...原创 2018-11-13 17:55:59 · 930 阅读 · 0 评论 -
事件委托
1原创 2018-11-15 17:01:07 · 87 阅读 · 0 评论 -
使用EJS(模板引擎)动态绑定页面中的数据
前端主要的绑定页面中的数据的方式有两种:1.JS代码中进行字符串拼接 2.使用模板引擎(Mustache.js 或者 ejs.js) 来动态绑定页面中的数据 一、JS代码中进行字符串拼接 这种方式属于完全的前后端分离,在JS中获取到服务器端返回的数据后,把之前在HTML页面中写好的标签,一句句的复制到JS中,用字符串拼接的方式,把标签和数据拼接在一起,最后再把拼接完成的字符串...原创 2018-11-12 10:59:15 · 2836 阅读 · 0 评论 -
Zepto.js 使用手册
Zepto.js 被誉为移动端的小型 jQuery, 用法和 jQuery 差不多。一、AJAX1、传统的字符串拼接方式<script charset="UTF-8" type="text/javascript" src="js/zepto.min.js"></script><script> function bindHTML(data)..原创 2018-11-12 17:54:17 · 3054 阅读 · 0 评论 -
常见开发模式: 单例模式
一、Zepto.js的AJAX常见开发模式这种是单例模式//->MATCH INFOvar matchRender = (function () { var $matchInfo = $('.matchInfo'), //获取容器 $matchInfoTemplate = $('#matchInfoTemplat...原创 2019-03-01 19:21:45 · 282 阅读 · 0 评论