2017年08月_front_end_fan

12月 11月 10月 09月 08月 07月 06月

转载我对知乎前端相关问题的十问十答

之前知乎上有不少同行邀请我回答一些前端相关问题，但是，大家都知道了，要认真回答一个问题是需要大量时间和精力的，对于还在不断学习积累阶段的我，时不时分散原本的精力，打乱自己原本的节奏，实际上是一件不划算的事情。就好像邮件或者微信，来一条信息，你就去看一下，时间和精力都会大大分散，工作和学习效率必然会大打折扣。所以我的策略是一段时间后专门花时间统一处理，这样时间利用率会更高，投入产出比会更大。对于知乎上

2017-08-24 15:56:12 1790

原创实用插件（五）弹出操作提示框artdialog

注意事项：因为artdialog的布局方式是tabble>table,所以自己的项目要是也有table必须要给个class或者id，以免自己的样式影响到弹出框样式(artdialog的html布局图见文章末尾！)（by wangxiaozan）artDialog是一个精巧的web对话框组件，压缩后只有十多KB，并且不依赖其他框架。在页面head引入artDialog，注意如果文件带有skin参数将

2017-08-17 15:11:55 1128

原创实用插件（四）图片上传前预览插件

注：该插件app项目，pc项目都可使用1、由于插件为轻量级，直接附上源码和demo<!doctype html><html><head><meta charset="utf-8"><title>jQuery图片上传前预览</title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><styl

2017-08-04 15:09:36 2297

原创实用插件（三）通讯录插件

1、下载：点我下载 2、使用：引入1个css文件，2个js文件<link href="css/style.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="js/zepto.js"></script><script type="text/javascript" src="js/city.js" s

2017-08-04 14:50:07 2524

原创实用插件（二）图片全屏预览插件——PhotoSwipe

注：该插件app项目，pc项目都可使用1、下载：先下载插件压缩包免费下载2、使用：步骤：1、html结构： <ul id="gallery" class="upload-pics gallery"> <li><a href="../../images/p1.png"> <img src="../../images/p1.png" /></a></li

2017-08-04 14:42:01 2263

原创实用插件（一）日历插件——My97DatePicker

1、下载：My97DatePicker组件包免费下载 2、使用：步骤 1. 把My97DatePicker文件夹拷贝到项目根目录下 2. body前面引入一个css文件：<link rel="stylesheet" href="skin/default/datepicker.css"/>body前面引入后面一个js文件：<script type="text/javascript"

2017-08-04 14:23:05 5990 1

原创 JS nodeType返回类型

JS nodeType返回类型前几天朋友正好问道这个 js的nodeType是个什么概念（做浏览器底层的）正好遇到这篇文章可以向大家解释下将HTML DOM中几个容易常用的属性做下记录：nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。nodeName 属性含有某个节点的名称。元素节点的 nodeName 是标签名称属性节点的 nodeName 是属性名

2017-08-29 12:06:45 344

原创 html5实现贪吃蛇小游戏

实现技术：h5的canvas+原生js可直接复制，查看效果<!doctype html><html><head><meta charset="utf-8"><title>html5实现贪吃蛇小游戏</title><style>#myCanvas { box-shadow: 0 0 6px #000;}</style></head><body><br/><br/><br/

2017-08-29 10:11:13 16863 10

原创键盘按钮keyCode大全

数字键盘上的键的键码值(keyCode)功能键键码值(keyCode)按键键码按键键码按键键码按键键码0968104F1112F71181979105F2113F8119298*106F3114F9120399+107F4115F101214100Enter108F5116F111225101-

2017-08-29 08:57:42 1794

原创 jQuery的7个同级选择器

jQuery的同级选择器有七个，其中最常用的是next()和prev()，使用时要避免跟after()和before()混淆。前者是获取元素，后者是往指定位置插入值。通过下面的demo可以清楚的了解这7个同级选择器：<!doctype html><html><head><meta charset="utf-8"><title>jQuery遍历之同级遍历</title><script src

2017-08-29 08:25:27 11871

原创设置title的样式

浏览器默认的titele样式不能修改，实际上是模拟title的样式直接上demo：<!doctype html><html><head><meta charset="utf-8"><title>jQuery跟随提示信息</title><script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><styl

2017-08-28 17:38:35 17991

原创 $.browser 和 $.support

jQuery 从 1.9 版开始，移除了 $.browser 和 $.browser.version ，取而代之的是 $.support 。在更新的 2.0 版本中，将不再支持 IE 6/7/8。以后，如果用户需要支持 IE 6/7/8，只能使用 jQuery 1.9。如果要全面支持 IE，并混合使用 jQuery 1.9 和 2.0，官方的解决方案是：?123456<!--[if lt

2017-08-28 17:03:02 425

原创 js正则表达式语法

1. 正则表达式规则1.1 普通字符字母、数字、汉字、下划线、以及后边章节中没有特殊定义的标点符号，都是”普通字符”。表达式中的普通字符，在匹配一个字符串的时候，匹配与之相同的一个字符。举例1：表达式 “c”，在匹配字符串 “abcde” 时，匹配结果是：成功；匹配到的内容是：”c”；匹配到的位置是：开始于2，结束于3。（注：下标从0开始还是从1开始，因当前编程语言的不同而可能不

2017-08-28 13:43:12 256

原创 jQuery源码学习笔记（10）

jQuery的each迭代器 jQuery的each方法从使用上就要分2种情况：☑ $.each()函数☑ $(selector).each().each()函数和.each()函数和(selector).each()是不一样的，后者是专门用来遍历一个jQuery对象的，是为jQuery内部服务的。$.e

2017-08-25 17:21:20 246

原创 jQuery源码学习笔记（09）

回溯处理的设计在这一小节我将会带领你们了解jQuery对DOM进行遍历背后的工作机制，这样可以在编写代码时有意识地避免一些不必要的重复操作，从而提升代码的性能。关于jQuery对象的包装var $aaron = $("aaron");通过对sizzle的分析，我们可以得知Query选择器最

2017-08-25 16:49:04 352

原创 jQuery源码学习笔记（08）

插件接口的设计如果jQuery没有插件接口的设计，那么他就像个光杆司令没有兵，就是没有手下，只有自己一个封闭的城堡。因此jQuery城堡需要设计一个大门 - 插件接口，从而打开大门开始招兵买马。当然jQuery除了获得“开发者社区”的大力支持外，也有很多大公司纷纷对它投出了橄榄枝，这也是它成功的

2017-08-25 16:47:32 238

原创 jQuery源码学习笔记（07）

方法链式调用的实现 jQuery的核心理念是Write less,Do more(写的更少,做的更多)，那么链式方法的设计与这个核心理念不谋而合。那么从深层次考虑这种设计其实就是一种Internal DSL。DSL是指Domain Specific Language，也就是用于描述和解决特定领域问题的

2017-08-25 16:42:46 182

原创 jQuery源码学习笔记（06）

静态与实例方法共享设计保留上一节分割出2个构造器的疑问，我们先看看jQuery在接口的设计：遍历方法：$(".aaron").each() //作为实例方法存在$.each() //作为静态方法存在这是最常见的遍历方法，第一条语句是给有指定的上下文调用的，就是(“.aaron”)获

2017-08-25 16:39:54 221

原创 jQuery源码学习笔记（05）

jQuery多库共存处理多库共存换句话说可以叫无冲突处理。总的来说会有2种情况会遇到： 1、太火热，jQuery采用太火热，jQuery采用作为命名空间，不免会与别的库框架或者插件相冲突。 2、jQuery版本更新太快，插件跟不上，导致不同版本对插件的支持度不一样。出于以上的原因，jQuery给出了解决

2017-08-25 16:35:34 216

原创 jQuery源码学习笔记（04）

jQuery中ready与load事件 jQuery有3种针对文档加载的方法$(document).ready(function() { // ...代码...})//document ready 简写$(function() { // ...代码...})$(document).loa

2017-08-25 16:33:44 200

原创 jQuery源码学习笔记（03）

jQuery的类数组对象结构为什么是类数组对象呢？很多人迷惑的jQuery为什么能像数组一样操作，通过对象get方法或者直接通过下标0索引就能转成DOM对象。首先我们看jQuery的入口都是统一的$, 通过传递参数的不同，实现了9种方法的重载：1. jQuery([selector,[context]])2.

2017-08-25 16:30:17 200

原创 jQuery源码学习笔记（01）

jQuery整体架构任何程序代码不是一开始就复杂的，成功也不是一躇而蹴的，早期jQuery的作者John Resig在2005年提议改进Prototype的“Behaviour”库时，只是想让其使用更简单才发布新的jQuery框架。起初John Resig估计也没料想jQuery会如此的火热。我们可以看到从发布

2017-08-25 16:27:27 211

原创 jQuery源码学习笔记（02）

立即调用表达式任何库与框架设计的第一个要点就是解决命名空间与变量污染的问题。jQuery就是利用了JavaScript函数作用域的特性，采用立即调用表达式包裹了自身的方法来解决这个问题。jQuery的立即调用函数表达式的写法有三种：写法1：(function(window, factory) { fac

2017-08-25 16:23:54 183

原创职业规划

一、前景前端这个行业未来几十年的前景，我不得而知，就像金融危机爆发前夜无人预知一样。但是，html,css,js作为简单实用的技术，它们的使用我相信只会越来越普遍。因为这是事物普遍发展的规律，越是简单的东西越是容易普及化，大众化。即使未来随着互联网行业的发展，web不复存在，web前端的岗位不复存在，html,css,js作为简单实用的技术也会应用于其他领域。所以，自己不该有多余的后顾

2017-08-24 17:18:43 426

转载我的十年前端路

一直以来都有很多人问我有什么学习技巧。问这种问题的人实际上已经隐隐透露出想走捷径的心理，我往往并不看好这类人最后成长的高度。从学习前端到现在已经过去10年了，要问有什么技巧，其实并没有，无非就是勤奋与坚持。我就简单说说我最近的生活状态吧，或许对有些小伙伴的迷茫或疑惑有所启示。早上9点多起床，平均10点整到办公室。周末不加班，平时加班，项目紧的时候平均9~10点离开公司，这个点车少，半小时就可以到家；

2017-08-24 16:46:37 408

转载 HTML5按钮元素新属性formaction,formenctype等简介

一、<button>等元素新增HTML5属性 – form在过去，表单元素<form>和表单提交需要的一些控件元素（如<input>，<select>）在DOM结构上必须是父子关系，但是在HTML5背景下，表单元素和控件元素可以是在页面文档的任何位置，这种特性的实现就是通过使用form属性。关于HTML5新增的form属性，我在六年前就介绍过，不过那篇文章是使用<textarea>元素示意的。您可以

2017-08-24 15:03:35 1594

转载 CSS百分比padding实现比例固定图片自适应布局

一、CSS百分比padding都是相对宽度计算的在默认的水平文档流方向下，CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的，这个和top, bottom等属性的百分比值不一样。这么设计的原因在我的新书（应该不出几个月就要出版了）中会有说明，这里不展开。对于padding属性而言，任意方向的百分比padding都现对于宽度计算可以让我们轻松实现固定比例的块级容器，举个例

2017-08-24 14:47:34 821

转载 iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案

[阅读原文](http://efe.baidu.com/blog/mobile-fixed-layout/) 移动端业务开发，iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。但是 fixed 元素在有软键盘唤起的情况下，会出现许多莫名其妙的问题。这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。iOS下的 Fix

2017-08-24 14:35:12 1143 3

原创 css让footer始终位于页面的最底部

提出问题：怎么让footer定位在页面底部，要求主体内容少的时候footer在可视化窗口的最下方，主体内容非常多的时候 footer在主体内容的下面？尝试解决：方法1.如果把footer直接放在主体内容后面，让主体撑开把footer撑到下面去，主体内容多了可以，但是内容少了的话，footer撑不起来就会显示在中间很难看方法2.如果直接把footer悬浮起来固定在屏幕最下

2017-08-23 14:33:13 8119

原创正则表达式入门知识摘要

正则表达式在不同的环境下的有些方面的表现是不相同的， .Net Framework 2.0下正则表达式的测试工具Regex Tester是个绿色软件。其他可用的测试工具有RegexBuddy和Javascript正则表达式在线测试工具。元字符表1.常用的元字符代码说明.匹配除换行符以外的任意字符/w匹配字母或数字或下划线或汉字/s匹配任意的空白符/d匹配数字/b匹配单

2017-08-23 14:09:14 200

原创溢出文本显示为省略号的效果及其text-overflow:ellipsis;的使用

语法： text-overflow : clip | ellipsis 参数： clip : 　不显示省略标记（…），而是简单的裁切 ellipsis : 　当对象内文本溢出时显示省略标记（…）说明：设置或检索是否使用一个省略标记（…）标示对象内文本的溢出。 text-overflow:ellipsis属性在FF中是没有效果的。示例： div { text-overflow : clip; }

2017-08-23 14:06:03 662

原创 CSS选择符权重、CSS Sprite技术和CSS hack

一、在实际使用中，使用类要注意：多用组合，少用继承。上下margin重合问题：margin是个特殊的样式，相邻的margin-left和margin-right是不会重合的，但相邻的margin-top和margin-bottom会产生重合。如果不确定模块的上下margin特别稳定，最好不要将它写到模块的类里，而是使用类的组合，单独为上下margin挂用于边距的原子类（如mt10/mb20）模块最

2017-08-23 13:39:11 295

转载 CSS3阴影 box-shadow的使用和技巧总结

text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS3的普及，这一特殊效果使用越来越普遍。基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径

2017-08-22 10:33:24 670

原创移动Web开发图片自适应两种常见情况解决方案

提出问题：手机端项目里图片想要全屏查看有个技术难点，就是图片居中问题。华为手机低版本andriod系统不支持使用负外边距或者-50%的写法，而且图片宽高如果超出手机屏幕尺寸，怎样把图片适当的缩小，再把图片居中显示？回答：如果想不用图片预览插件的话，可以使用如下的第二种js方法。本文主要说的是Web中图片根据手机屏幕大小自适应居中显示，图片自适应两种常见情况解决方案。开始吧在做配合手机客户端的We

2017-08-22 10:09:30 4084

翻译盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

Ⅰ.绝对定位居中(Absolute Centering)技术我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS:[css] view plain copy print?.Absolute-Center { margin: auto; position: absolute; t

2017-08-22 09:06:38 306

转载 javascript——touch事件介绍与实例演示

前言诸如智能手机和平板电脑一类的移动设备通常会有一（capacitive touch-sensitivescreen），以捕捉用户的手指所做的交互。随着移动网络的发展，其能够支持越来越复杂的应用，web开发者需要一种方法来处理这些事件。例如，几乎所有的快节奏游戏都需要玩家一次按下多个按钮，这种方式，在触摸屏情况下，意味着多点触摸。 Apple在iOS 2.0中引入了触摸事件API，An

2017-08-22 08:56:06 688

转载移动端:active伪类无效的解决方法

：active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式。最常用于锚点<a href=”#”>这种情况，一般主流浏览器下也支持其他元素，如button等。在多按键的鼠标系统中，：active只适用于主按键，目前的大部分情况都是左键即主键。该伪类下定义的CSS样式只在按下鼠标按钮与释放鼠标按钮之间的短暂瞬间被触发显示。使用键盘的tab键也可以触发:active状态。说到：active

2017-08-22 08:27:32 881

原创 jQuery实现水平和垂直居中

实现div的实现水平和垂直居中，使用css有好多方法，这里不赘述。但是有些属性像是margin-left:-50%;这样的属性在华为手机的低版本上无法识别。解决办法：jQuery实现水平和垂直居中 $(".mydiv").css({ position: "absolute", left: ($(window).width() - $(".mydiv"

2017-08-21 16:23:03 5586 1

原创 CSS3 Generator在线工具

相信有不少人在写CSS3新属性的时候否会遇到这样的问题：1、这个是不是新属性，有些属性搞不清是不是css3新增的？ 2、确定了是css3新增的属性，但是为了解决浏览器兼容性问题，应该加哪些前缀？ 3、css3新属性毕竟用的不是很多，有时候会忘记或者敲错时至今日，我才发现一款在线工具，以上问题都可以迎刃而解。—— CSS3 Generator有了CSS3 Generator，妈妈再也不用担心我的C

2017-08-21 15:13:40 3887 1

原创 bootstrap3学习:响应式布局layout

1、像素宽度分类在bootstrap的v3版本中，已经将各种媒介分为4种像素宽度类型：xs：extra small 特别窄屏幕，默认指浏览器像素宽度小于768pxsm：small 窄屏幕，默认指浏览器像素宽度大于等于768pxmd：middle 中等宽度屏幕，默认值指浏览器像素宽度大于等于992pxlg：large 大屏幕，默认值指浏览器像素宽度大于等于1200px这四种屏幕宽度对应的尺寸缩写死

2017-08-21 10:26:47 1138