之前做小程序开发时，遇到要实现过长文本进行的折叠的效果（类型微信朋友圈那种）。主要交互有三点： 让文本过长时折叠、并显示一个“全文”的点击文本 当用户点击“全文”则会展开被折叠的文本，并切换该按钮为“收起” 对不过长的文本则正常显示 本质上，要实现这个效果得解决两个问题： 判断文本是否过长的标准 文本过长时...

retina屏会以2个（乃至3个）物理像素来显示一个CSS像素（1px），所以在CSS中指定1px的边框实际占据的却是2个以上物理像素，在retina屏用户体验较差。

Flex布局是一种十分灵活方便的布局方式，目前主流的现代浏览器基本都实现了对Flex布局的完全支持。而在微信小程序中，IOS端使用的渲染引擎WKWebView和安卓端使用的X5 ，也都实现了对Flex的支持。所以为了在小程序开发中更方便地布局，有必要来详细了解下Flex布局在小程序的使用。本文将针对Flex布局的各个属性进行介绍，...

所有的web开发者都会很快（或者很痛苦地）意识到Web是一个粗糙的环境，其中最糟糕的一点就是老旧的浏览器。提到“老旧浏览器”，我们脑海中往往复现的就是旧版的IE。但其实老旧浏览器不止这一种，一个一年前的Firefox，比如ESR版本也算得上老旧了。至于移动端，由于有些浏览器和操作系统都不能升级，这就导致了许多老旧的...

FormData对象能让你生成一系列用于XMLHttpRequest发送的键值对。它主要的目的在于发送表单数据，但也能独立用于传输有键形式的数据。其传输的数据格式和表单使用submit()方法、且编码类型为multipart/form-data所发送的数据格式相同。

在[发送表单数据]()一文中，HTML表单可以声明式地发送一个HTTP请求。但表单也可以用JavaScript来准备一个HTTP请求。本文将探索如何做到这点。

在许多情况下，[可用的HTML表单组件]()是不够的。若你想在诸如<select>元素的组件上[应用高级样式]()、或者想定制组件的行为，你就只能选择创建自己的表单组件。

被回调地狱整怕了？快试Promise吧！。Promise的核心思想其实很简单，就是将异步操作结果处理交给Promise对象的方法注册，然后等到异步操作完了再去取用这些处理操作。至于取用哪个处理操作，就得看Promise对象状态了。Promise对象一共有三种状态：Pending（初始状态）、Fulfilled（异步操作成功）、Rejected（异步操作失...

当你需要经常在服务器上校验数据时，在Web页面上的另加校验就有诸多好处。多数情况下，用户会被表单惹恼。而当用户填完表单时就校验数据，既有助于用户立即发现他们犯的错误，也能减少等待HTTP响应的时间、并减少服务器对错误表单输入的处理。本文介绍的，就是如何在表单所在页面对表单数据进行校验。

多数时候，HTML表单的目的只是为了把数据发给服务器，之后服务器再处理这些数据并发送响应给用户。虽然看起来挺简单的，但我们还是得注意一些事情以确保传送的数据不会破坏服务器、或者给你的用户制造麻烦。

jQuery中有两个获取DOM元素属性的方法：prop()和attr()，看似可以互相替换，但若搞不清这两个方法获取的到底是什么“属性”，有时就会出现令人困惑的结果。官方文档中，用了下面的例子来解释这两者的不同：

下面的兼容性表将总结出HTML表单对CSS的支持程度，由于CSS和HTML表单的复杂性，这几个表不能认为是最佳的参考对象。尽管如此，它们也能让你更了解能做什么、不能做什么，这将有助于你学习如何开发。

在本文中，我们将了解如何在HTML表单上使用CSS，为那些难于自定义的表单组件加以样式。如前文所述，文本框和按钮很适合使用CSS，而现在我们得来探索HTML表单样式的那些坑了。

本文中，我们将学习如何使用CSS来让HTML表单看起来更漂亮，这可能需要窍门才能做到。由于历史及技术上的原因，表单组件并不太适合使用CSS；而也正因为有这些困难，许多的开发者会选择[创建定制表单组件]()来获得对外观和体验的控制。然而，在现代浏览器中，网页设计师可以拥有更多对表单元素的控制权了。让我们来深入了...

虽然这里我们只探讨内建表单组件，但由于HTML表单有诸多限制、以及不同浏览器间的实现有很多的不同，故web开发者有时也得构建自定义的表单组件。这部分内容将会在[怎样创建定制表单组件]()一文中详细讨论。

在建立HTML表单时，最重要的一件事就是如何用正确的方式构建它。而之所以重要，原因有二：一是保证表单能被正确使用、二是这能保证你的表单是无障碍的（可以被能力不同的人使用）。而正因HTML表单的无障碍性很重要，故在本文中我们将了解如何使一个表单无障碍，这并不很难、只是有几个技巧需要你了解下。

这个系列译自mdn上的一份表单指南，原文详尽阐述了表单相关的基础知识。而表单作为一个经典的页面交互方式，是每个前端工程师绕不开的话题，通过翻译这个系列的文章既是有助于扫清自己的知识盲区，也希望借此能让更多人受惠吧~

我们知道，元素在没有设置宽高的情况下，默认的宽高值都为auto。而这个auto到底是如何让元素自动拥有宽高的呢，也就是说，元素的宽度和高度到底会受到什么因素的影响？本文将通过一个例子来对这一问题一探究竟，HTML结构和初始css如下：

这里没有使用h5的拖动，毕竟原题也是考察借助鼠标事件实现自定义的拖动，所以就借鉴了《js高级程序设计》里的自定义拖动自己封装了个拖动api，当然由于做这个系列题目使用的都是es5的语法，所以IE8往下就兼容不到了（有兴趣的可以自己一试）。

在DOM操作中，我们如果要获取和修改节点的的文本，就离不开textContent或innerText属性。其中textContent作为标准方法，但无奈要IE8+；而innerText属性最近也被火狐支持了，已经成了不是标准的标准（参考）。也就是说，如果只考虑最新浏览器的话这两个方法都是可以使用的，那他们到底使用时有何不同呢？先上代码：

前几天做百度的笔试题，第一题就是关于css优先级的，虽然知道一些规则，但碰上把各条规则相互组合就懵逼了，所以还是得来好好总结一下的。 首要原则 就两条： 优先级高的样式覆盖优先级低的样式 同一优先级的样式，后定义的覆盖先定义的，即后来居上 而至于样式的优先级如何确定，就是接下来要讨论的问题： 多重样式间的...

比较简单的点击事件处理，也就处理点击选择框展示菜单、点击菜单选择、点击页面任意角落隐藏菜单这三件事。这里注意点击选择框展示菜单时一定要阻止冒泡，要不然会冒到顶层元素直接触发隐藏菜单的事件，导致菜单点不出来。

又见导航条，先看下css，这里用的是雪碧图背景做出圆角的效果，虽然是经典的方法、兼容性好，但这种代码写起来实在是有点丑陋。因为需要三层嵌套，分别用背景图绘制左圆角、右圆角和中间背景，导致dom结构变复杂了、更进一步影响js的代码简洁。

略过，不过typeof用来判断数据类型是不太靠谱的，尤其是涉及到引用类型的时候，除非是要检测一个变量是否有定义，否则最好采用Object.prototype.toString方法。

值得注意的一个地方是那个箭头，我这里只是用了简单的字符串替换，而原题用了背景图片移动来实现切换箭头，但是似乎那样做会导致整个容器的左右偏移、效果不是很好。

其实如果只是单纯的DOM操作，元素的name属性看来是个可有可无的东西，其功能完全可以被id和class替代。但现在我知道了，至少对于表单元素，name还是很重要的---指定type的话只是给出个样式而已，没有相同的name怎么能标识操作一类数据的控件呢 ！当然也就不能实现其默认交互效果啦。

主要是切换的判断条件，一开始我还用点击次数的奇偶性来判断-_-||，其实直接检查菜单有没有显示即可。检查的时候有个小trick，初始状态菜单的style属性为空，因为我们接下来要点按钮显示，所以把这种情况和style.display为none的情况归为一类丢到else里最省事。

在页面里，屏幕上光标的样式我们可以用css的'cursor'属性进行定义。一般来讲，只要光标hover到指定的元素上面其样式就会按我们指定的进行显示，但是如果我们指定的元素被其他元素“遮住了”呢？来看看下面这个demo：

做这个汉诺塔游戏的想法，来自于几个月前做百度IFE第一期的一个题目，题目要求在两个容器间实现子元素的相互拖拽效果。当时我就突发奇想：容器看成柱子，子元素看成盘子，再加一点限制底下盘子移动的判断和胜负的判断，不就和经典的汉诺塔游戏没什么两样吗？

在一些应用场合，我们不希望用户能够选择文字。比如在拖动交互中，如果用户能选择元素内部的文字，也就意味着能拖动它们，这样就会干扰对元素的拖动、影响拖动的效果；再如一些网站也会简单地通过禁止用户选择文字以防止用户复制站内文字（只能骗骗小白而已，不知道我们都会F12吗<(￣︶￣)>）。