front_end_fan-CSDN博客

原创设置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 18078

原创 $.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 453

原创 js正则表达式语法

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

2017-08-28 13:43:12 262

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

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

2017-08-25 17:21:20 258

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

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

2017-08-25 16:49:04 374

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

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

2017-08-25 16:47:32 250

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

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

2017-08-25 16:42:46 195

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

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

2017-08-25 16:39:54 233

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

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

2017-08-25 16:35:34 226

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

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

2017-08-25 16:33:44 215

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

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

2017-08-25 16:30:17 213

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

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

2017-08-25 16:27:27 218

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

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

2017-08-25 16:23:54 195

原创职业规划

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

2017-08-24 17:18:43 439

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

2017-08-24 16:46:37 460

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

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

2017-08-24 15:03:35 1645

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

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

2017-08-24 14:47:34 840

转载 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 1182 3

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

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

2017-08-23 14:33:13 8245

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

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

2017-08-23 14:09:14 209

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

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

2017-08-23 14:06:03 683

原创 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 306

转载 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 678

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

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

2017-08-22 10:09:30 4120

翻译盘点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 331

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

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

2017-08-22 08:56:06 748

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

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

2017-08-22 08:27:32 914

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

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

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

原创 CSS3 Generator在线工具

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

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

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

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

2017-08-21 10:26:47 1173

原创最新App、手机网站尺寸规范—移动设备界面UI设计尺寸规范

app项目的一大难点就是，样式要兼容各种屏幕大小

2017-08-21 10:15:33 7576

原创 jQuery选择器总结

[javascript] view plain copy print?jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素，返回div元素数组

2017-08-18 15:54:57 176

转载手机浏览器javascript事件及css总结

1. viewport：也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;实际上我们可以操作的属性有4 个：[html] view plain copy print?width - // viewp

2017-08-18 14:49:22 1054

原创怎样使用CSS设置文字之间的距离？

答：常用 letter-spacing:1px; 使用css样式属性letter-spacing: +距离数值+html单位如letter-spacing:15px; 即设置了字与字距离间隔15px（像素）。例子：CSS 代码：.w3cschool{letter-spacing:15px;} 完整HTML 代码：<!DOCTYPE html> <html> <head>

2017-08-18 08:54:58 1975

原创手机端简单js拖拽效果

网上找了好多js实现拖拽效果的demo，但是这是唯一的一个能够实现手机端的拖拽效果，至于android、iphone、华为等手机上的app是否能够正常拖拽，有待测试。先保存下来：<!doctype html><html><head> <meta charset='utf-8' /> <meta name="viewport" content="

2017-08-17 11:11:00 3139

原创 table中tr间距的设定

border-collapse:separate; border-spacing:0 10px;table中的tr的默认display:table-row，虽然可以修改为display：block但是就失去了tr特有的显示效果，如(td自动对齐)；并且在tr中对起设定padding是有用的，可以增加内边距，但是设定margin是没有用的，tr的外间距依然是0；解决方案：css的两个属性：bo

2017-08-15 15:44:38 2221

转载页面重绘和回流以及优化

在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。1. 浏览器把获取到的HTML代码解析成1个DOM树，HTML中的每个tag都是DOM树中的1个节点，根节点就是我们常用的document对象。DOM树里包含了所有HTML标签，包括displa

2017-08-11 15:12:43 316

转载 javascript深入理解js闭包

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。Js代码　　var n=999;　　function f1(){　　　　alert(n)

2017-08-11 15:03:43 174

原创 jQuery插件开发（二）jQuery.fn方法

jQuery为开发插件提拱了两个方法，分别是： jQuery.fn.extend(object);jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。jQuery.fn.extend(object);给jQuery对象添加方法。 fn 是什么东西呢。查看jQuery代码，就不难发现。 jQue

2017-08-11 14:58:16 414

原创 jQuery插件开发（一）

1，开始可以通过为jQuery.fn增加一个新的函数来编写jQuery插件。属性的名字就是你的插件的名字： jQuery.fn.myPlugin = function(){ //开始写你的代码吧！ }; 但是，那惹人喜爱的美元符号哪里去了？她就是jQuery，但是为了确保你的插件与其他使用哪里去了？她就是jQuery，但是为了确保你的插件与其他使用的库不冲突，最好使用一个

2017-08-11 14:49:07 294