前端基础

深入理解 Javascript 事件模型

最近在看《Secrets of the JavaScript Ninja, Second Edition》这本书,看到第十三章"Surviving Events"觉得写得非常好,所以在这里提炼总结一下,文中还穿插了自己的一些理解,如果有理解错误的地方……你是没法给我留言的,因为暂时还没有评论功能╮( ̄▽ ̄)╭ 在一个页面的生命周期中,主要分为两个阶段: Page building Event handling Page building 阶段发生在刚打开页面时,浏览器会解析 HTML 形成 DOM

前端基础

行盒(line box)垂直方向的属性详解:从font-size、line-height到vertical-align

视觉格式化模型 在一个文档中,每个元素都被表示为0、1或多个矩形的盒子。确定这些盒子的尺寸, 属性 --- 像它的颜色,背景,边框方面 --- 和位置是渲染引擎的目标。① 在CSS中,使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边:外边距边, 边框边, 内填充边 与 内容边。① 盒的种类又分为:块级盒和行内级盒。如下② 一些附加概念: 块容器盒:直接包含的全部是块级盒的盒子称为块容器盒,它本身可能不是块级盒,比如非替换行内块及非替换表格单元格,不是块级盒。 块盒:同时是块容器盒的块级盒称为块盒。 匿名块盒:

前端基础

CSS绝对定位的原点:是在border上、padding上还是在content上?

用了那么久的绝对定位,却一直没在意一个问题,就是绝对定位的原点,究竟是在盒模型的哪一处。今天想到这个问题,直接搜索没有找到标准文档,也没有搜索到相关的问题,于是决定自己动手实现一下看看,并把这个结果发出来让搜索引擎的内容变得更充实点。 代码 <div id="d1"> <div id="d2"></div> </div> body { background-color: black;

前端基础

重置表单中的文件上传控件(file input)的方法

方法一: 调用所在 form 表单的 reset 方法,这个方法的缺点是会把整个表单重置,需要存储表单的状态,再回填回去 方法二: 使用jQuery,代码为: $("#id").replaceWith($('#id').clone(true)) 说明:此方法为网络上找到的,经测试链式写法无效。改成分步的写法仍然无效,只有在控制台分步去写才生效 方法三: 根据上述方法,换了一个思路,直接去改变input元素的type,代码为: $('#id').attr(

前端基础

URI编码时遇到特殊字符的处理方式

今天遇到一个问题,在向一个地址发起get请求时,某个参数是这种形式:foo=xx&&yyyy,其中"&&"是参数值的一部分,在调用这个接口时,后台收到的参数值不正确,变成了这种形式: name: xx (empty) yyyy: 这个传递的参数是encodeURI处理过的,本以为encodeURI后就万无一失了,不过从请求参数来看,encodeURI并不能应对这种情况,出现这个错误可以观察出来,是因为:当遇到第一个&时,被解析为一个新的参数,于是第一个参数foo的值为xx,由于第一个&

前端基础

相对于父元素的fixed定位的实现

问题描述 之前在项目中,遇到了一个场景,需要实现相对于父元素的fixed定位:在父元素内拖动滚动条时,"fixed"定位的元素不能滑动,在外层拖动滚动条时,父元素及父元素内的所有元素跟着一起滑动。但是position: fixed是相对于窗口进行的定位,不能直接实现我们需要的效果。在网上搜索看到一个还不错的解决方案,不过利用了CSS3的transform,兼容性不是很好。 解决思路 👇这是我们希望的效果,但是没法直接实现 我们想让特定子元素相对于父元素"fixed"定位,也就是说,剩余的子元素不定位。那我们可以分开来想,如果添加一个祖先元素assistor,有两个祖先元素,一个用于辅助定位,一个用于包裹不定位的内容,这个问题不就解决了吗。

前端基础

兼容IE8的flash上传框架"uploadify"自定义上传按钮样式的办法

(uploadify版本:3.2.1 ) 因为公司业务的原因,所做的项目需要兼容IE8,因此做的上传插件无奈选择的是基于flash的uploadify。 由于是基于flash的,所以使用过程中,难以给上传按钮自定义样式,但原来的样式实在不好看,是这样的,或者和项目的UI风格不搭,于是就要想办法自定义一下,最终折腾出了一个兼容性很好的可行方案。以下为解决问题的过程记录和最终方案: 思路一(不可行): 类似于H5的自定义上传控件,将uploadify上传空间的按钮隐藏,自己做一个好看的按钮BTN,在点击这个BTN的时候,用JS控制模拟触发uploadify上传按钮的点击事件,从而完成点击上传的过程,这个想法很美好,可是在实践中发现uploadify的上传按钮是无法模拟触发点击事件的,它是一个这样的object元素,百度谷歌都查了一遍,得出的结论是如果flash插件没有提供模拟click的接口,那JS是无法模拟点击事件的,只有用户真正地去点击才行。所以,这个方法就宣布失败了。

前端基础

select制作分层级目录,让select显示和可下拉选择的"不一样"

今天遇到一个特殊的select问题,需求是这样的:每次点击这个select时,根据选择的option的值做出相应的处理并返回新的select,option内容。所以大致思路是给这个select绑定change事件,然后根据新的值的不同触发change事件,做出相应的处理。 但是这里有一个问题就是,如果被选择的值是原来的第一个值,那么是不会触发select的change事件的,如果需求是:即使值不变,只要选择了就要做出响应,那这时候就会遇到问题。这时候可以这么处理: <select> <option value="" style="display:none;">1</option&

前端基础

父窗口,子窗口之间的JS"通信"方法

今天需要在iframe内做一个弹窗,但使用弹窗组件的为子窗口,所以弹窗只在子窗口中显示掩膜层和定位,这样不符合需求。 后来晓勇哥指点,了解到一个以前一直没关注到的东西,每个窗口的全局变量,其实都存在对应窗口的window对象下,因此只要取到某个窗口的window对象,就可以取得该窗口的全部全局变量,因此就有了父、子窗口之间的JS通信的方法。 子调用父 parent.xx // 父窗口的xx变量或方法 top.xx // 顶层窗口的xx变量或方法 父调用子 document.querySelector('iframe').contentWindow.xx // 父窗口的xx变量或方法

前端基础

图片和文字水平对齐的方法

写页面的时候,经常遇到一个小图标图片需要和文字放在一起,包裹在一个父容器中,但是图片总是顶部和父容器顶端靠在一起,这样就导致图片总是比文字高上一点,这个问题遇到了很多次,之前没有进行总结,总是花式地把它们对齐在一起,比如手动调整margin-top,写定像素,把他们调到水平对齐,但这样既不优雅,也不安全,比如当高度为百分比或者em/rem时,margin-top的值也要以相同的形式去写,但是这种形式,是不够绝对精确的。 所以在此记录下我现在和以后使用过的“较优雅且安全的”图片和文字水平对齐的方法: 对图片设置vertical-align: text-bottom;

前端基础

javascript中关于深复制与浅复制的问题

在javascript中,变量的类型分为基本类型和引用类型。 对于基本类型的变量来说,值的复制以及作为函数参数实参传递的过程都是值的复制传递,换句话说,是会在内存中开辟出一个新空间用于存放新的值的。这样当对新的值进行操作的时候,不会对原来的值造成影响; 而对于引用类型的变量来说,值的复制以及作为函数参数实参传递都是内存指针的传递,就是说,即使存放在一个新变量中,如果新变量的值发生变化,那么原来的引用类型的值也会跟着产生变化 对于这种引用类型的变量的值的复制,我们称为**"浅复制",就是说只是把变量的内存指针传递到了新变量中。有时候,这对我们操作引用类型的变量和参数的传递是不利的,因此,我们需要有办法进行"深复制"**,就是说在引用变量赋值时,除了传递值给新变量以外,还要开拓出一片新的内存空间用于存放这些值,这样新的变量的变化不会对原来引用类型的变量造成影响。 几种简单但有局限的方法: JSON.

前端基础

原生JS中apply()方法的一个值得注意的用法

今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { "length": 5, "0": 'eat', "1": 'play' });//得到ary = ['eat', 'play', undefined*3] 在这个用法中,apply的第一个参数为null,第二个参数是一个包含length字段的对象,查了MDN中apply的用法后发现,当apply的第一个参数为null或者undefined时,指向的为window或者global这个全局对象,

前端基础

关于“float”的一次探索--遇到了一个span元素可以设置宽高引发的思考

起初,这个问题和float还有设置宽高之间是没有任何关联的,一开始这是一个关于height和line-height的问题,目的是为了探究一下这两者之间的关系,但是在学习的过程中,我翻之前写的代码,发现有一个内联元素<span>竟然可以设置宽高,即使在我特地加上display: inline;的情况下依然可以设置宽高。(写这篇文章的时候已经忘记了具体场景了,只是把原因记录了下来)。对这个反常的现象,我很好奇,所以开始了“探索与发现”之旅。 首先我想搜的是,内联元素为什么可以设置宽高,于是找到了这篇文章:jlds123 - 《为何img、input等内联元素可以设置宽、高》。在这个文章里提出了一个我之前没有了解到的概念:替换元素和非替换元素,于是我开始搜索替换元素和非替换元素的概念。 替换元素:

前端基础

去除INLINE-BLOCK之间的间隙

在使用display: inline-block;时,这些inline-block之间会有间隙,根据无双 - 《去除inline-block元素间的空隙》的说法,这个间隙是4px或者8px的距离(与浏览器有关),如果间隙是确定的,那根据这个我们就可以用CSS来避免这个间隙。根据之前的经验,也发现了可以通过改变HTML代码的结构来规避这个信息。 假设<ul>之间的<li>都是inline-block,最早我的做法是直接不换行,把所有标签连着写: <ul> <li>这里是文字内容<

前端基础

JQUERY中.ATTR()和.PROP()的区别

之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop()。而在学习JS的时候,只有一种方法elemObj.getAttribute()。刚开始知道这两个jQuery方法都可以取得元素的属性值的时候,我觉得很奇怪,以为随着jQuery版本更新造成的历史遗留方法,所以花时间查了查attribute和property的区别,发现原来这两个其实是有区别的。其间我主要参考了这两篇文章: JavaScript中的property和attribute介绍--脚本之家 jquery中attr和prop的区别--〖芈老头〗的技术空间 property property是元素的固有属性,本身就拥有的,是写在HTML标准里的元素的属性。 attribute attribute是我们自己定义的元素的属性,是没写在HTML标注中的,而是我们需要的时候自己进行定义的。 在了解了这两点的前提下,就可以对jQuery里的这两种方法的区别进行探讨了。对于元素本身固有的属性,我们应该用elemJobj.prop()方法进行取值,

前端基础

《HTML5秘籍》学习总结--2016年7月24日

前段时间因为工作中看到同事使用了一个type为date的<input>元素,直接就形成了一个日期选择的表单控件,当时觉得很神奇,以为是什么插件,就问了同事是怎么做出来的,同事告诉我这是HTML5的新控件类型。于是这件事让我决定先好好学习下HTML5新标准相对于HTML4时代有什么不同,其实刚开始学习前端的时候,在知乎社区就了解到了,这是前端界未来很有发展潜力的新标准,正是HTML5让WEBAPP变得更有实现的机会以及让flash慢慢走衰……由于自身水平的不足,我选择的是看一本关于H5的书,因为书会介绍更多的来龙去脉和发展历史,对于我这种新人来说更具有启发性。我看的是Matthew MacDonald的《HTML5秘籍》。 这张图是我目前学习和了解到的H5的一部分基础知识点,里面没有学习到太多H5的两个很重要的部分,一个是离线应用,一个是canvas绘图,canvas绘图上是浅尝辄止,稍做了一些了解。这两个部分没有花时间,第一因为自己耐心不足,第二是因为工作中一段时间内可能都还用不到,没有实际的需求,怕这两个对我目前来说算复杂的部分学了以后搁置久了也会忘了,