前端
战血石LoveYY
做最有力量的程序员
展开
-
前端javascript的防抖和节流
一直以来对于防抖和节流的不是很清楚,只是知道他们的作用,今天区分一下概念。节流(throttle)的作用是在用户动作时每隔一定时间执行一次回调。就像水是以水滴的形式流出,水滴只有到一定重量才会有一滴水流出。可以看作是连续做同一件事件后,才执行操作。比如疯狂点击的时候,按钮点击事件只执行一次防抖(debounce)的作用是在让在用户动作停止后延迟一定时间再执行回调。是指频繁触发的情况下,只有足够的空...原创 2018-04-18 16:02:30 · 943 阅读 · 0 评论 -
局部刷新有哪几种方式
关于html的局部操作有哪几种方式一直不懂,现在知道几种就记录几种,以防以后忘记了1.原生js取得dom操作2.iframe或者框架3.ajax局部操作原创 2018-04-11 15:58:16 · 1429 阅读 · 0 评论 -
利用事件委托实现点击li列表
我理解的事件委托就是事件冒泡加事件源,给父类元素绑定事件,来监听子元素的冒泡事件,并找到是哪个子元素(事件源)的事件 点击事件绑定在ul上 var uls=document.getElementsByTagName('ul')[0]; uls.addEventListener('click',function(e){ var event=e||window.event...原创 2018-04-11 14:32:55 · 4259 阅读 · 0 评论 -
原生js实现拖拽
HTML5中有专门的拖拽功能,但是对于原生的js还是比较好奇,就封装了一下 var disX=0,disY=0,dragele,boldown; //按下鼠标和抬起鼠标时间 var downTime,upTime; var drag=document.getElementsByClassName('wapper')[0]; funcdrag(drag); //封装方法 function funcd...原创 2018-04-11 11:37:08 · 176 阅读 · 0 评论 -
js中事件冒泡和事件捕获顺序
当画面元素同时绑定冒泡和捕获事件时,执行顺序是:外层捕获事件,元素绑定顺序决定元素冒泡还是捕获,外层冒泡如下: <div class='container'> <div class='wapper'> <div class='context'> </div> </div> </div> divcon...原创 2018-04-02 17:29:26 · 769 阅读 · 1 评论 -
js中之call调用时this指的是什么
call方法不怎么用,对其也不是很了解,今天测试了一下其中改变this的时候,this到底是什么 var name,age; function Person(name,age){ this.name=name; this.age=age; } function Student(name,age,grade){ Person.call(this,name,age); this...原创 2018-04-02 16:17:31 · 2467 阅读 · 0 评论 -
body默认边距和行内元素之间默认边距
今天想看一下body的默认边距看了一下浏览器,body的默认边距是8px所以在写页面之前都要去掉默认边距*{margin:0; padding:0;}行内元素之间的默认边距是4px另外关于本地图片间距正常,上线后图片又出现4px间距是因为,在服务器发布的时候会压缩代码,将空格去掉,所以在本地的时候需要删除图片间的空格,以及图片之间不要换行显示,或者比线上少4px,发布后服务器图片间距显示正常...原创 2018-04-02 14:36:03 · 2210 阅读 · 0 评论 -
取消事件冒泡
阻止事件冒泡: 1.e.stopPropagation()方法 IE浏览器不可以 2.cancelBbubble=true;属性 IE浏览器代码如下: wapper.onclick=function(event){ console.log('wapper'); //取消冒泡...原创 2018-04-08 13:02:09 · 226 阅读 · 0 评论 -
js加载时间线
创建Document对象,开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段 document.readyState = ‘loading’ 。遇到link外部css,创建线程加载,并继续解析文档。遇到script外部js,并且没有设置async、defer,浏览器加载,并阻塞,等待js加载完成并执行该脚本,然后继续解析文档。遇到scrip...转载 2018-03-30 14:46:52 · 254 阅读 · 1 评论 -
淘宝标题效果
淘宝标题 固定大小 浏览器缩小的时候,两边空白会缩小,缩小到一定程度,中间标题才会缩小 <div id='divpad'></div> <div id='divwapper'> <div id='divcontext'></div> </div> #divwapper{ height:50px; background-c...原创 2018-05-31 14:12:37 · 216 阅读 · 0 评论 -
淘宝页面之网速慢时不加载css
不加载css时,怎么让用户看到链接原理: 有网速时,加载图片 没网速时显示链接文字//方法一,把文字挤出右侧a{display:inlin-block;//如果是div则不用设置height:100px;width:200px;//宽高background-img:url(图片路径);text-indent:200px:white-space:nowarp;overflow:hidde...原创 2018-04-02 14:48:33 · 420 阅读 · 0 评论 -
研究数组和对象的深拷贝 浅拷贝
对于数组的深拷贝,浅拷贝网上的资料比较杂,自己整理一下,如有错误,请指出。首先什么是深拷贝,浅拷贝,大多数的说法是 深拷贝在复制数组的时候,在计算机中新开辟了一块内存,存放新复制的对象。原数组改变不影响复制的数组浅拷贝是只是复制了原数组的引用,两个数组指向同一个地址,改变一个,另一个随着改变。还有一种说法是如果数组中对象包含其他属性,浅复制不会全都复制,深拷贝是全都拷贝了。即:浅拷贝是指拷贝对象时...原创 2018-05-24 16:35:32 · 380 阅读 · 0 评论