前端文章
关注
分享
扫一扫
文章平均质量分 64
Alcantara6
多多分享交流技术细节
展开
-
正常文档流block、inline、inline-block元素与浮动框之间的位置关系
今天在群里面回答了一个问题：起初以为是外层元素也浮动的缘故：又思考了一下，突然想到正常文档流下的块状元素的文本内容会避开浮动元素所处的空间。行内元素与文本内容是一个性质，也会避开。input、button是行内块状元素。按照提问者的描述，应该就是这个原因。行内块状元素也会避开浮动元素所处的空间！！！原创 2017-10-09 20:39:35 · 1270 阅读 · 0 评论 -
用jQuery编写放大镜效果以及图片异步加载的测试
自创jQuery放大镜效果，主要运用offset()、width()、height()、e.pageX、e.pageY等关于位置的方法。核心思想：缩略图的尺寸与放大图尺寸的比值 = 放大镜相对缩略图的坐标X(或Y)/放大图相对包裹它的外框坐标X(或Y)的比值其中有几个关键点需要注意，还有两个bug，调试过程没少为此绞尽脑汁，算是从坑里爬出来，最终得到这样一套程序。问题值得思考、研究和总结，...原创 2017-09-27 22:10:07 · 530 阅读 · 0 评论 -
【干货】前端重要概念精炼总结--持续更新
1. Q: JavaScript脚本放在哪里 A: 放在header中的脚本，在页面加载之前就被装载，待调用（例如事件），类似函数声明；放在body中的脚本，在页面加载完成后就执行，类似于执行一个函数。原创 2018-01-17 19:34:53 · 479 阅读 · 0 评论 -
debug过程中对加载顺序、对象属性、Vue数据传递和计算属性等问题的总结
异步加载JavaScrip脚本放在<head>内：文档页面加载之前装载（不执行代码， 需调用才执行或事件触发执行）。脚本放在<body>内：当页面被加载时执行，用来动态生成页面的一些内容。增加延迟脚本defer属性 ** – 只适用外部脚本文件 – 立即下载，但延迟执行，</html>标签之后执行 – 多个原创 2018-03-11 16:08:27 · 1695 阅读 · 0 评论 -
【更新--多行多列解决方案】不定高多栏设置等高的方法（正padding+负margin）
多栏布局有很多方法，但大多都针对的是已经固定设置各栏高度（height属性）的布局。对于定宽不定高的多栏布局，各栏的高度根据文字自适应，导致其高度不一。那如何设置其高度，使得各栏的高度都统一为文字最多的那一栏的高度呢？如图： 目标→ 方法一：表格table布局此方法，table的父元素height为默认的auto，根据table-cell的内容自适应，满足等高。原创 2017-08-19 20:27:01 · 1318 阅读 · 1 评论 -
HTML attribute特性和DOM property属性的区别
attr——映射到propHTML标签的属性——初始状态 checked 是个布尔值，只要存在该属性即为true checked=”checked”或checked=其它任意数据类型（false、空字符串）， 赋的只是字面量，不改变本身的属性值trueprop——不会影响attrDOM元素的特性——实时状态 <input>标签里有checked， prop的值即为tr...原创 2018-03-24 00:05:48 · 1223 阅读 · 1 评论 -
[JavaScript]元素尺寸定位总结[含兼容性、文档模式测试]
1. 基本概念相对于定位了的父容器注意不含滚动条宽度相当于content+padding注意不含滚动条宽度注意不含border相对定义了relative的父容器，以子元素margin左上角，父元素padding左上角为准offsetWidthclientWidthscrollWidt原创 2018-04-15 00:28:06 · 394 阅读 · 0 评论 -
addEventListener事件监听使用匿名函数作为回调函数的问题
addEventListener事件监听绑定匿名函数，不能用removeEventListener解除绑定，JS认为这不是对应的那个函数。因此，如果多次执行addEventListener（例如addEventListener事件绑定写在在mousemove事件内），使用匿名函数作为回调函数就是进行了多个函数的绑定，触发事件时会执行多次；具名函数则是绑定的唯一这个函数，触发时只执行一次。...原创 2018-06-01 13:22:14 · 3461 阅读 · 0 评论 -
JS原生数组迭代方法的应用
原生JS的数组迭代方法应用非常广，相比于for循环遍历，代码结构简单、规整，但使用也要非常注意。 以下是本人学习过程中对数组迭代方法的典型应用。1. map()和forEach()方法填坑。 这是Vue获取API新闻列表中的代码片段，计算属性processedPosts，对原始数组results添加imgUrl。 map()方法 forEach()原创 2018-01-18 02:18:41 · 397 阅读 · 0 评论 -
从jQuery的remove()和原生JS的removeChild()方法再观jQuery对象和DOM对象的关系
jQuery对象是通过jQuery包装DOM对象后产生的对象。jQuery的remove()方法和原生js的removeChild()方法都是从DOM中删除节点，方法的返回值是：1. remove()方法：返回一个指向已被删除的节点的引用，这个节点元素还可以使用；2. removeChild()方法：删除的节点仍然存在于内存，只是没有添加到当前文档的DOM树中。可以总结为：remove()方法移除...原创 2018-01-23 00:57:10 · 11436 阅读 · 0 评论 -
关于圣杯布局和双飞翼布局的思路和细节
今天晚上从网上资源学习了圣杯布局和双飞翼布局。因为之前一段时间对CSS的布局有过比较系统的学习，所以对这两个布局模式理解起来还是较为简单。学习和使用行业精英总结出来并在行内广泛使用的方法（或者说框架）是简单的事情，但是学的过程还是要从其根源进行理解、分析，有助于拓展自己的思维，进而更深入地学习、理解、运用CSS，避免形成拿来主义的习惯。总结起来，圣杯布局和双飞翼布局的构造思路如下：原创 2017-08-15 23:29:09 · 692 阅读 · 0 评论 -
开始记录我Web前端自学之路了，希望与大家分享交流
从5月份开始自学，基本上把所有的业余时间用在学习上。 期间也遇到一些坎坷，但总的说来，能够一直坚持下来，说明对编程还是有足够的兴趣，我将继续疯狂学习下去。在这里分享我的学习心得，希望与大家互相交流，学到更多东西。从今天开始我将陆续把已经学习总结的干货和接下来的学习过程记录发表在博客上，请大家多多指教。原创 2017-08-15 22:49:26 · 404 阅读 · 0 评论 -
关于嵌套absolute布局的padding-bottom问题
流动布局时父元素含有50px的padding，因为子元素溢出，所以padding-bottom没有表现出来。但实际上，子元素为了保证处于父盒子的content之中，已经把父盒子撑开了。只是因为这里强制对父盒子设置了高度，所以子元素溢出。 我们将滚动条拉到底部，可以发现子元素确实仍在父元素的padding之内。因此可以说：流动布局时，父元素设置了固定原创 2017-09-08 18:58:50 · 2788 阅读 · 0 评论 -
关于JavaScript函数的参数按值传递而不是按引用传递的分析
这是个人自制的分析图，针对《JavaScript高级程序设计》第4.1.3节的例子，讲得非常精辟，但讲得还不是特别细，本人细细读了好多遍，按个人的理解做成以下图谱。 作为新手理解定有片面肤浅之处，望阅者多多指教。原创 2017-09-12 19:55:52 · 479 阅读 · 0 评论 -
阻止事件冒泡和围绕.on()方法 [.selector]事件委托中冒泡情况的探讨
2019-7-23更新：1. document和body代理事件，在某些浏览器无效，目前发现在微信浏览器无效。2. 前端使用模板引擎渲染的节点，可能滞后与事件的绑定，因此这种情况下最适合事件代理。一、事件冒泡和阻止事件冒泡事件冒泡是JavaScript的核心概念之一，它的原理很简单，但真正应用起来还是有不少的坑。这里说一说关于阻止事件冒泡的本质。我们都知道阻止事件冒泡...原创 2017-10-04 23:02:15 · 2759 阅读 · 0 评论 -
jQuery实现轮播效果及stop()和is(:animated)的用法区别
对《锋利的jQuery》中的案例进行了改编和自创。本项目总结出以下知识点和技巧：一、轮播图的编程逻辑滚动式:1. mouseenter/mouseover移动（1） 获得鼠标移到的tab序号（2） 获得当前高亮的tab序号（利用filter(":has(.chos)")筛选和index()方法获得序号）计算出即将展示图片的位置，计算出移动时间获得当前高亮的tab序号...原创 2017-10-11 21:43:30 · 915 阅读 · 0 评论 -
[JavaScript，ES6]函数声明提升和预解析的总结和试验
1. 变量的声明被提前到作用域顶部，赋值保留在原地2. 函数声明整个“被提前” （且后面不再重新“赋值”）3. 函数表达式时，只有变量“被提前”了，函数没有“被提前”4. 在块中定义的函数声明或函数表达式，只会提升其声明部分，也就是只提升变量名，不提升函数的定义哦。不要在块中声明函数！5.如果在提升的时候发生重命名了怎么办？ 首先还是都会提升（函数声明整个“被提前”，且后原创 2017-12-09 18:42:31 · 1307 阅读 · 0 评论 -
浏览器中的 ES6 module 实现
捣腾了一晚上，发现在浏览器实现ES6 module必须，使用firefox54以上和chrome60以上，并且chrome仍然有问题，跨域报错，得放在服务器下，firefox可以实现。文章转载至众成翻译-文蔺http://www.zcfy.cc/article/ecmascript-modules-in-browsers-2744.htmlES6 的模块特性转载 2017-12-13 00:27:10 · 1636 阅读 · 0 评论 -
[Vue]不能使用索引直接修改数组，但可以使用索引更新对象数组内的属性
由于 JavaScript 的限制，Vue 不能检测以下变动的数组当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue当你修改数组的长度时，例如：vm.items.length = newLength可以使用Vue.set和javascript方法splice(Array.prototype.splice)实现，触发状态更新。原创 2017-12-02 01:33:04 · 7599 阅读 · 0 评论 -
Vue2.0使用axios引入本地JSON文件踩的坑
今天学习Vue2.0使用axios引入本地JSON文件踩的坑。1.如何引入axios，import、prototype 本地JSON文件需放在static文件夹之下。（以及图片文件）。参见http://blog.youkuaiyun.com/Mr_YanYan/article/details/787830912.response是个Object对象，但是response.data才是本地原创 2017-12-28 01:30:29 · 18372 阅读 · 1 评论 -
nvm-windows安装踩坑
nvm的目录不能带有空格，例如Program Files如果你是第一次下载，在use之前，C:\dev目录下是没有nodejs这个文件夹的，在输入比如： nvm use 5.11.0 之后，你会发现，C:\dev目录下多了一个nodejs文件夹，这个文件夹不是单纯的文件夹，它是一个快捷方式，指向了 C:\dev\nvm 里的 v5.11.0 文件夹。nodejs在windows下的...原创 2019-07-29 20:09:53 · 1238 阅读 · 0 评论