2015年07月_huihui10086

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

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

2015-07-14 11:33:55 727

原创使用less开发css

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

2015-07-30 15:00:22 1576

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

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

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

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

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

2015-07-27 13:05:05 732

原创完美的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 2458

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

原创 jQuery.outerWidth() 函数详解

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

2015-07-20 13:50:37 1747

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

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

2015-07-20 09:58:36 713

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

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

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

2015-07-16 14:09:39 1577

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

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

2015-07-16 10:38:58 945

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

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

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

2015-07-15 15:00:06 1662 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 4734

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

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

2015-07-14 17:31:22 12343 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 1942

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

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

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

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

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

2015-07-07 17:39:39 4620

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

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

2015-07-07 14:25:49 1407

转载缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解

Lazy Load 这个 jQuery 插件，是用来缓冲加载图片的插件。如果一篇文章很长有很多图片的话，下载图片就需要很多时间。而这款插件，会检测你的滚动情况，只有你要看到那个图片的时候，它才会从后台请求下载图片，然后显示出来。使用这个插件，可以在需要显示图片的时候，才下载图片，所以可以减少服务器的压力，避免不必要的资源下载。如果一个人不看下面的图片，那加载下面的图片就是一种浪费。

2015-07-06 14:32:12 473

原创 javascript函数之splice()定义和使用

splice()是js中用于处理数组的一个常用函数。定义和用法splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。注释：该方法会改变原始数组。语法arrayObject.splice(index,howmany,item1,.....,itemX)参数描述index必需。整数，规定添

2015-07-05 20:31:28 802

原创 js监听浏览器滚轮事件

今天看了一篇关于使用css3方法实现整屏滚动效果的博客，发现里面用到了监听滚轮事件的js代码，于是翻了翻资料，进行了一下学习与总结：下面是实现整屏切换的代码： body, html{ padding: 0; margin: 0; } body, ht

2015-07-03 14:57:07 2965

原创 jquery实现图片预加载

//图片预加载 $.preloadImages = function() { for (var i = 0; i < arguments.length; i++) { var img = $("").attr("src", arguments[i]); } } $.preloadImages("image1.jpg","image2.jpg"); $('#conta

2015-07-02 19:09:08 664

原创 js面试题之数组去重和快速排序

数组去重和快速排序这两个问题是在公司面试web前端常见的两个基础js问题，博主在阿里面试时就遇到过这个问题，现在我讲讲我知道的解决这两个问题的代码答案。（ps：这两个题目都有好多种解决方案，大家可以先了解自己容易掌握的方法，然后再去网上找到最有效率的方法去了解其中的原理）数组去重：Array.prototype.unique=function(){ var n=[];//一个

2015-07-01 14:29:20 3733

Edward的web前端修炼之路