huihui10086-CSDN博客

转载前端不为人知的一面———前端冷知识集锦

今天在前端群里看到这样一篇博文，感觉不错于是转过来和大家分享：原文地址：http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html前端已经被玩儿坏了！像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了，像用||操作符给变量赋默认值也是人尽皆知的旧闻了，今天看到Quora上

2015-07-14 11:33:55 720

转载前端工程师修炼之道（转载）

前端简介Web前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过5年。Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。随着人们对用户体验的要求越来越高，前端开发的技术难度越来越大，Web前端开发工程师这一职业终于从设计和制作不分的局面中独立出来。早期的前端其实就是Table布局，后来发展到所谓的Div + CSS网站重构，再到现在的让人眼花

2015-06-25 19:33:42 2812 1

原创 js编译与执行顺序

JavaScript是一种描述型脚本语言，它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。如果你不能理解javaScript语言的运行机制，或者简单地说，你不能掌握javascript的执行顺序，那你就犹如伯乐驾驭不了千里马，让千里马脱缰而出，四处乱窜。那么JavaScript是怎么来进行解析的吗？它的执行顺序又是如何的呢？在了解这些之前，

2015-11-20 09:26:18 8993 2

原创 css的架构

关于如何处理网站的CSS，各个网站做法都不一样，这随着网站的性质及大小不同，公司前人留下的规范不同，以及CSS工程师的眼界不同而有所不同。由于我从业经历有限，所知甚浅，只能说些肤浅业余的内容，不准确之处欢迎指出。就CSS文件而言，有的网站分为header.css, body.css, footer.css，不做评价；有的分为reset.css, main.css, content.cs

2015-10-28 15:06:15 729

原创 jquery插件开发基础知识点

学习了一段时间的jquery，感觉已经是时候开始更进一步啦，于是开始学习并尝试开发jquery插件，扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识，最佳做法和常见的陷阱。一、入门编写一个jQuery插件开始于给jQuery.fn加入新的功能属性，此处添加的对象属性的名称就是你插件的名称：.代码如下:

2015-10-08 11:38:12 459

原创 frame实现部分刷新

最近在找新的实习工作，所以面试了很多的公司，各个公司的面试问题基本相同，但也会针对自己公司要使用的产品技术来问一些有针对性的问题，例如下面一题，实现类似微信页面中，底部4个按钮，点击之后，底部按钮不刷新，但是上面的内容要相应的进行刷新。解决这个问题有很多方法，我想到了两个，一个是ajax，一个就是框架（frame），最后决定选择使用frame，接下来看部分核心代码： * {

2015-09-22 15:28:53 1982

原创 Angular.js初体验

首先什么是 AngularJS？"AngularJS 是专门为应用程序设计的 HTML。"AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。AngularJS 把应用程序数据绑定到 HTML 元素。AngularJS 可以克隆和重复 HTML 元素。AngularJS 可以隐藏和显示 H

2015-09-10 11:02:59 730

原创 jq优化法则25条

1. 从Google Code加载jQueryGoogle Code上已经托管了多种JavaScript类库，从Google Code上加载jQuery比直接从你的服务器加载更有优势。它节省了你服务器上的带宽，能够很快的从Google的内容分布网络(CDN)上加载JS类库。更重要的是，如果用户访问那些发布在Google Code上的站点后它会被缓存下来。这样做很有意义。有多少站点使用了没有

2015-09-06 16:47:35 704

原创 js实现表格的排序功能

之前的阿里线上笔试最后一道就是实现表格的排序功能，但当时由于时间有限没能完成，于是今天趁着午休时间完成了这个功能。下面附上代码（有注释）：（该功能是完成了对age的升序（从小到大）的排序） Document table { border: 1px solid #ccc; width: 1000px; margin: 20px auto; borde

2015-09-06 14:59:15 7099

原创很火的ES5（js数组函数）初体验

今早看到一篇关于一道面试题（原文链接），发现评论区有人使用ES5中的方法来解决，我发现此方法比传统的js方法更简单于是查找了相关资料加以了解。 ES5中新增的不少东西，了解之对我们写JavaScript会有不少帮助，比如数组这块，我们可能就不需要去有板有眼地for循环了。ES5中新增了写数组方法，如下：forEach (js v1.6)map (js v1.6)filter

2015-09-05 11:04:01 1401

原创 js核心--------作用域链了解

最近公司事情少，于是今天花了一上午时间去学习有关js函数作用域的知识点，查看了很多资料并且写了一些简单的demo加以验证与学习，接下来我为大家分享总结一下我一上午的有关作用域链的成果：当定义一个函数时（注意，是定义的时候就开始了），它实际上保存一个作用域链。当调用这个函数时，它创建一个新的对象来储存它的参数或局部变量，并将这个对象添加保存至那个作用域链上，同时创建一个新的更长的表示函数

2015-09-01 14:12:23 1126

原创 html5 本地存储----localstorage初体验

HTML5虽未来到其鼎盛时期，但这并不妨碍我们在实际项目中渐进使用HTML5的一些特性。就我所做的项目而言，应用的HTML5相关特性有：data-自定义属性、placeholder、以及email类型input文本框。最近了解了一下html的本地存储功能（例如cookies和localstorage），今天主要要和大家分享的是localstorage的一些基础常识：废话不多说直接上代码（有

2015-08-31 11:24:48 864 1

原创 css3 flex流动自适应响应式布局样式类

今天在做一个水平居中的div内部元素贴边水平均匀布局（有点绕，直接看图吧），一开始使用的都是一些比较常用的css+html方法来实现布局，感觉这样很死板（在多增加一个div，并未div设置相应的一个负的margin-left，此值需要通过计算得到），于是便想到了css3的flex流式布局，于是上网找了一些资料：1、css3 flex一旦一个容器赋予了disp

2015-08-28 15:44:27 5699 1

原创 js基础及面试重点--------this

this的查找this的查找是很多人迷茫的一点，也似乎有很多人抱有this不稳定这样的看法，实在令人无语。this的查找可以说是3种对象查找中最为简单的，因为其实this对象的确定根本没有一个“查找”的过程。首先，this对象只会在一个函数中需要确定，如果是在全局域下，this永远为Global对象，在浏览器中通常就是window对象。而在javascript中，函数的调用一共有4种方式：

2015-08-24 11:35:25 1407

原创 jquery有用却不常用的方法分享

工具方法$.isArray(obj); //检测一个对象是否是数组$.isFunction(obj); //检测一个对象是否是函数$.trim(str); // 去除string 的空格$.( value, array [, fromIndex ] )$.inArray(value, array); // 返回value 在array 中的下标，如果没有找到则返回-1$.in

2015-08-21 14:33:56 850

原创对比jQuery和AngularJS的不同思维模

对比jQuery和AngularJS的不同思维模Question假设我已经熟悉了如何使用jQuery来开发客户端应用，我现在打算使用AngularJS。请描述一下有那些思维模式方面的东西需要转变吗？下面是举出一些具体的问题，用来帮助你回答我的这个问题：我应该以何种不同的方式来架构和设计客户端web应用？最大的不同点是什么？我应该停止使用哪些东西；又应该开始使用哪些东

2015-08-18 16:17:22 767

原创 js为字符串编码

js 提供了两组函数来进行字符串的编码与解码：escape（）与unescape（），decodeURI()与encodeURI();JavaScript escape() 函数定义和用法escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。语法escape(string)参数描述

2015-08-17 14:25:09 1561

原创子元素设置margin-top，父元素也受影响

这个问题困惑了很久，虽然没有大碍早就摸出来怎么搞定它，但始终不明白原因出在哪里，如果只是IE有问题我也不会太在意，可问题是所有上等浏览器都表现如此，这样叫我怎能安心？今天总算下狠心查出来怎么回事，居然是CSS2.1盒模型规范……虽然很别扭，非常别扭的规定。问题如下，两层Div结构，Outer Div属性为“margin:0 auto”，本该紧贴外框顶部的，如果没有Inner Div，或者没

2015-08-10 15:19:54 1059

原创 html5 canvas 实现简易马祖小游戏

参考妙趣课堂的视频，做了这个游戏，通过这个游戏可以了解到canvas的强大。废话不多说，直接上代码。html代码：马祖 css代码：这里我用的是less@black:#000;@white:#fff;* { margin: 0; padding: 0;}body { background-color:@black;}#box {

2015-08-10 11:28:43 1595

原创 html canvas 常用api基础

HTML 5 Canvas 参考手册元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。本手册提供完整的 getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。浏览器支持Intern

2015-08-09 15:06:30 807

原创视差滚动---parallax.js

最近在看视差滚动的原理和实现方法。最简单的是使用css的属性background-attachment: fixed || scroll || local,使用这个便可以实现简单的视差滚动效果，但是想完成一些更加炫酷的效果。就得使用js啦，其中最简单的莫过于使用parallax。js插件。下面有个使用该插件的html代码（ps：这个代码是从网上扒的，里面的一些js的引用还有图片

2015-08-05 14:34:29 6589

原创 js闭包初体验

对于js的闭包，一直以来只有书面上的了解，却从来没有在实战中使用，最近两天看了很多关于js的博客，了解了一些js闭包的作用，于是有了以下的代码：闭包演示 p {background:gold;} function init() { var pAry = document.getElementsByTagName("p"); var Ar

2015-08-03 09:50:06 561

原创使用less开发css

最近在和小伙伴讨论如何高效的编写css代码的问题，于是我们想到了使用css的预处理语言。例如（less，sass等）。最后我们决定使用less（相对于其他css预处理语言更简单，语法更接近css）。先说说什么是less?简单的说，你可以在你的css文件中使用变量、函数等方式来编写你的css。less具有哪些功能？混入(Mixins)——class中的cl

2015-07-30 15:00:22 1557

原创阿里面试题---------关于html标签中物理标记和逻辑标记区别

关于html标签中物理标记和逻辑标记区别因为两者所达到的效果一样，所以人们就没有太在意这两个到底有什么区别，那么今天我来告诉大家，是有区别的。它们的区别就再于一个是物理标记（实体标记），一个是逻辑标记。什么是物理标记？什么是逻辑标记？物理元素所强调的是一种物理行为，比如说我把一段文字用b标记加粗了，我的意思是告诉浏览器应该给我加粗了显示这段文字，从单词的语义也可以分析得

2015-07-29 11:13:20 2207 3

原创 jquery 事件冒泡的介绍以及如何阻止事件冒泡

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理,挺起来感觉这么不可思议，接下来为大家解除疑惑什么是JS事件冒泡？在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那

2015-07-27 13:05:05 713

原创完美的jquery事件绑定方法on()

在讲on()方法之前，我们先讲讲在on()方法出现前的那些事件绑定方法：.live()jQuery 1.3新增的live()方法，用法如下：$("#info_table td").live("click",function(){/*显示更多信息*/});这里的.live()方法会把click事件绑定到$(document)对象，而且只需要给$(documen

2015-07-23 14:40:24 2444

原创 canvas初体验

第一次尝试使用canvas来做一个有关验证码的效果接下来直接上代码，代码里有注释便于大家理解：@charset "utf-8";/* CSS Document */body{background:url(images/img10.jpg) no-repeat fixed;}body,form,ul,ol,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,tab

2015-07-22 10:09:36 817

原创 jQuery.outerWidth() 函数详解

outerWidth()函数用于设置或返回当前匹配元素的外宽度。外宽度默认包括元素的内边距(padding)、边框(border)，但不包括外边距(margin)部分的宽度。你也可以指定参数为true，以包括外边距(margin)部分的宽度。如下图：如果你要获取其它情况的宽度，请使用width()和innerWidth()，你可以点此查看三者之间的区别。该函数属于jQuery对象(实例

2015-07-20 13:50:37 1698

原创 JS的基础类型与引用类型

js两种类型：1. ECMAScript变量包含两种不同类型的值：基本类型值、引用类型值；2. 基本类型值：指的是保存在栈内存中的简单数据段；3. 引用类型值：指的是那些保存在堆内存中的对象，意思是，变量中保存的实际上只是一个指针，这个指针执行内存中的另一个位置，由该位置保存对象；两种访问方式：4. 基本类型值：按值访问，操作的是他们实际保存

2015-07-20 09:58:36 701

原创 js正则表达式--验证表单

检测手机号码：/0?(13|14|15|18)[0-9]{9}/检测用户名：（数字，英文，汉字，下划线，中横线）：/^[A-Za-z0-9_\-\u4e00-\u9fa5]+$/密码：（数字，英文，下划线，中横线）/^[A-Za-z0-9_-]+$/身份证：/\d{17}[\d|x]|\d{15}/非空：/^\S+$/IP地址：/((?:(?:25[0-5]|2[0-4]\d|

2015-07-17 14:22:02 891

原创 js面试题--js的继承

js是门灵活的语言，实现一种功能往往有多种做法,ECMAScript没有明确的继承机制，而是通过模仿实现的，根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现方式可以实现多继承)实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值Js代码 function P

2015-07-16 14:09:39 1564

原创字体图标你还不知道你就out啦

背景：作为一个web前端工程师，怎么可以不知道字体图标这种高大上的东西那！！？首先，我们先恶补下什么是字体图标：用字体文件取代图片文件，来展示图标、特殊字体等元素的方法。优点：加载文件体积小统一展示风格，使用方法通过font-size，color就能自由变化大小，修改颜色，就像控制文字一样简单可以添加一些视觉效果如：阴影、旋转、透明度兼容IE6后

2015-07-16 10:38:58 933

原创 js面试题--------JS中数字和字符,布尔类型相加相减问题

JS中数字和字符相加相减问题 var a = 100; var b = "100"; alert(b- a); alert(typeof (b- a)); alert(a + b - a); alert(typeof (a + b - a)); alert(a + b); alert(ty

2015-07-16 09:58:19 4402

原创 event.currentTarget与event.target的区别介绍

event.currentTarget与event.target的区别想大家在使用的时候不是很在意，本文以测试代码来讲解它门之间的不同。即，event.currentTarget指向事件所绑定的元素，而event.target始终指向事件发生时的元素。翻译的不专业，好拗口啊，还是直接上测试代码吧： click here! $('#wrapper').click(function

2015-07-15 15:00:06 1648 3

原创 js获取事件源及触发该事件的对象

如何获取事件源及触发该事件的对象，方法有很多，js中可以通过event来实现，下面有个不错的示例，感兴趣的朋友可以参考下：function myfunction(event) { event = event ? event : window.event; var obj = event.srcElement ? event.srcElement : event.target; //这时o

2015-07-15 14:22:16 4711

原创移动端js手指滑动事件初体验

今天在公司遇到做一个移动端手指滑动的效果，刚开始用了swiper.js插件发现效果不好（文字存在模糊效果）。后来查了一些资料，自己手写了一个使用原生js写的滑动效果。下面直接上代码： Document #id { width: 1150px; height: 150px; background: r

2015-07-14 17:31:22 12317 1

转载 jQuery powerSwitch万能slide(切换)插件

jQuery powerSwitch万能slide(切换)插件by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=3758测试页面、demo页面、API文档测试页面: http://rawgithub.com/zhangxinxu/powerSwi

2015-07-12 20:02:29 1922

原创 js方法fromCharCode（）实现中文字输出

fromCharCode（）定义和用法fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。语法String.fromCharCode(numX,numX,...,numX)参数描述numX必需。一个或多个 Unicode 值，即要创建的字符串中的字符的 Unicode 编码。

2015-07-08 23:14:33 12856 3

转载 web前端程序猿的福音----使用font-awesome代替icon小图标

1. 引言网页小图标到处可见，如果一个网页都是干巴巴的文字和图片，而没有小图标，会显得非常简陋。下面的小图标，你是不是会经常用到？你可能说——“我们用的都是彩色的，不是黑白的”——别着急，下面会讲到。因为它们也可以变为彩色的。黑白的也好，彩色的也罢，如果用传统的“css + 图片”的方式来制作这些icon，我估计你至少得雇佣一个专业的设计师吧。一般的程序猿，包括前端

2015-07-07 17:39:39 4598

原创 jq仿京东图片放大效果

今天在公司接到任务做一个商品图片放大的效果，于是查了很多资料花了一下午时间写了一个jq插件，废话不多说直接上代码我已经写了大量注释，大家可以自己看看。(function($){ $.fn.jqueryzoom = function(options){ var settings = { xzoom: 200,//宽度 yzoom: 200,//高度 offset

2015-07-07 14:25:49 1391

空空如也

空空如也