front_end_fan-CSDN博客

原创《jQuery技术内幕》

2017年8月初，我买了本书《jQuery技术内幕：深入解析jQuery架构设计与实现原理》高云著。作者不愧是阿里的资深前端，即使我结合网上各种解读，也只勉强看懂前3章。因为第四章开始讲的选择器sizzle的时候，我的内心真的很崩溃。以下为引用某大神的原话：“今年2月20日买的书，今天是5月26，三个月来，除了周末休息一天，如果没有特殊情况，我都会每晚花两个小时看这本书，以及查各种与jque

2017-09-15 16:39:46 643

原创读《jQuery技术内幕》（03）

jQuery构造函数init参数分析（一）在我的上一篇随笔里面分析了jQuery的构造函数，jQuery对象中有一个原型方法init才是是真正的构造函数，通过init的原型对象跟jQuery的原型对象保持引用关系使得init的实例可以正常调用jQuery的原型方法，就好像是jQuery的实例一样。下面就来看看

2017-09-15 14:38:19 264

原创读《jQuery技术内幕》（02）

在我的上一篇文章里面阐述了jQuery的大致框架，知道了所有代码都是写在了一个自调用匿名函数里面，并且传入了window对象，源码是这样的：(function( window, undefined ) {...})( window ); 我们通过alert(jquery) 知道它是一个对象，那么这个对象是怎么构造出来的呢？我们使用$(document)类似的写法获取元素，就好像直接调用了普通的方

2017-09-15 13:59:19 356

原创读《jQuery技术内幕》（01）

第一章总体架构1、设计理念jQuery的理念就是“写更少的代码，做更多的事”，而且做到代码的高度兼容性。2、总体架构大致可以分为三个部分：构造模块，底层支持模块和功能模块。 3、使用自调用匿名函数 (function( window, undefined ) {...})(window) 这里先分析一下匿名函数：匿名函数的作用是创建一块封闭区域，外面不能够访问里面的变量和方法

2017-09-15 13:52:22 517

原创 ES6常用命令

1、模板语言 ·· （反引号，就是键盘左上角数字 1 旁边的那个键）代替字符串拼接，变量也很好用 1）var str= · a; b; · 等价于 var str = “a” ; str += b; 2)变量

2017-09-15 10:25:59 669

原创 ES6学习笔记（一）

如何将ES6的新语法，运用到编码实践之中，与传统的JavaScript语法结合在一起，写出合理的、易于阅读和维护的代码。多家公司和组织已经公开了它们的风格规范，具体可参阅jscs.info，下面的内容主要参考了Airbnb的JavaScript风格规范。块级作用域（1）let取代var ES6提出了两个新的声明变量的命令： let 和 const 。其中， let 完全可以取代 va

2017-09-15 09:10:36 515

原创手机/移动前端开发需要注意的20个要点

前言移动前端开发正逐渐步入前端技术的主流，事实上跟在一般的pc上，并不需要你掌握额外的技术，然而你在pc web上那一套在多数情况下并不适用于手机web，你必须知道这其中的注意点。当然移动web给人的感觉是一个拼h5和css3的阵地，这里面有足够高大上的技术等着你去驾驭，在这方面，你可以欣喜地说：让ie见鬼去吧。 1、首先我们来看看webkit内核中的一些私有的meta标签

2017-09-14 14:22:31 373

原创 tab切换——点击

前言如果只用到id选择器，可以不引入jq，自己仿照jq封装一个简单的id选择器方法$()。 function $(id){ return typeof id ==="string"?document.getElementById(id):id;}代码<!doctype html><html lang="'en"><head> <meta charset="UTF-8">

2017-09-14 11:24:33 332

原创 jQuery点击空白处隐藏弹出层

前言一款jQuery点击空白处隐藏弹出层网页特效，点击按钮弹出层、点击页面空白处弹出层消失JS代码。主要功能是点击按钮弹出层显示,然后通过点击页面任意位置都能关闭弹出层显示效果,主要是$(document).click的操作应用。方法一<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>front

2017-09-14 11:02:50 659

原创 js拖动窗口

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;padding:0} #main{ position: absolute; width: 2

2017-09-14 10:35:19 383

原创 JavaScript中call和apply的使用

在ES3中给Function的原型定义了2个方法，分别是Function.prototype.call和Function.prototype.apply，在我们的项目开发中，尤其是在一些函数式风格的代码编写过程中，call和apply的作用显得格外重要。下面就让我们来看看这两个方法的作用吧！call和apply的区别Function.prototype.call和Function.prototy

2017-09-14 10:09:47 274

原创 JavaScript中this关键字的使用

相信大家在学习JavaScript的时候，this关键字总是会让大家感到很困惑，下面就来给大家详细的介绍有关this的一些知识点。this在JavaScript中this总是指向一个对象，而具体指向的那个对象是在运行代码时基于函数的执行环境动态绑定的，而不是函数在声明时的环境。this的指向问题在JavaScript中出去特殊的with和eval之外，具体到实际运用中一般包括以下四种情况：

2017-09-14 10:05:40 378

原创 slice、substr、substring区别

一、正数参数含义上的区别。var strValue = "javascript programing";alert(strValue.slice(3)); //"ascript programing"alert(strValue.substring(3)); //"ascript programing"alert(strValue.substr(3));

2017-09-14 09:53:46 1028

原创 js实现前端数据分页

效果图： <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>前端数据分页</title> <style> *{padding:0;margin:0;list-style:none;text-decoration: none;} #job_box{width:1000

2017-09-14 09:38:40 15355 2

原创漂亮的css文字效果

效果图：css文字效果* { padding: 0; margin: 0; text-align: center;}body { padding-bottom: 200px;}div { font-size: 36px;}.header-item { line-height: 4;}.box1 { co

2017-09-14 09:25:40 7132

原创 8款纯CSS3搜索框

效果图： 8款纯CSS3搜索框 * { box-sizing: border-box; } body { margin: 0; padding: 0; backgroun

2017-09-14 08:52:54 9082

原创 2017前端面试题（含答案）

1.一些开放性题目 1.自我介绍：除了基本个人信息以外，面试官更想听的是你与众不同的地方和你的优势。 2.项目介绍 3.如何看待前端开发？ 4.平时是如何学习前端开发的？ 5.未来三到五年的规划是怎样的？ position的值， relative和absolute分别是相对于谁进行定位的？ absolute :生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来

2017-09-13 18:23:25 2360

原创 jQuery滑动tab选项卡

先上最终效果:需求分析: 1.选项卡菜单数量不固定，菜单内容不固定，导致了单个菜单和整体的宽度都是未知的， 2.第一个需求导致滑块宽度也是不固定的 3.为了让交互效果更好，滑块需要添加过度动画对滑块的需求导致滑块和菜单的html结构必须分离，并使用了jQuery的offset方法获取并设置位置，所有的div都使用了相对定位。本案例的TAB选项卡可以比较方便的拓展、重复使用，只需修改少量值就

2017-09-13 18:15:38 2294

转载那些年我看的前端书籍

下面详细统计一下自己这三年来看过的前端领域书籍。以下书籍大部分都是看完的。有的看了很多遍了。有的看了一遍就不想再翻了。有的看了自己感兴趣的章节。有几本是英文原版，啃得很费劲。只要是书嘛，质量肯定参差不齐，只要是翻译的书，英文原版我也尝试去找了，还好，大部分网上也都有。有的译者水平可以，有的不是很认真。国内的书相对来说，看得不是那么多，水平各异，不予评价。有哪些特别值得推荐的，还

2017-09-13 17:15:43 2195

原创读《JavaScript 标准参考教程（alpha）阮一峰》（下）

24.说说下列属性的具体含义？window.screenX window.screenXwindow.innerWidth window.innerHeightwindow.outerWidth window.outerHeightwindow.pageXOffset window.pageYO

2017-09-13 15:24:03 958

原创读《JavaScript 标准参考教程（alpha）阮一峰》（中）

12.js正则表达式有哪些操作方法？正则常用的修饰符？test()exec()字符串对象的正则：match()search()replace()split()正则常用的修饰符：g，i，m13.谈谈下列js正则表达式的区别？贪婪模式和非贪婪模式？捕获组和非捕获组？先行断言和先行否定断言？/^abc/ 匹配以abc开头的字符/[^abc]/ 表示除了a、b、c之外的所有其他字符。

2017-09-13 14:28:33 1870

原创读《JavaScript 标准参考教程（alpha）阮一峰》（上）

想要知道下列问题的答案，就去看看这本书吧！1.怎么获取数据类型？ typeof xxx xxx instanceof Array Array.isArray(xxx)2.字符串和数组的api区别？字符串本质是类数组对象，字符串为只读，只能用length访问长度，[key]来取值，不能修改，不能使用slice(),forEach()...等数组API.3.原生js

2017-09-12 17:37:02 2746

原创使用CSS3制作倾斜导航条和毛玻璃效果

导航条对于每一个Web前端攻城狮来说并不陌生，但是毛玻璃可能会相对陌生一些。简单的说，毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理。这种效果对用户来说是十分具有视觉冲击力的。本次分享的主题：通过CSS3来制作类似下面的导航条和毛玻璃效果。导航条是梯形形状的。背景区域的毛玻璃效果。把导航条和毛玻璃效果在一篇文章中分享其实是有原因的。因为这两个效果的实现离不开一个重要的思想。用语言来描述

2017-09-12 12:29:26 2668

原创手机网站表层div滑动，导致底层body滑动（touchmove的阻止）

案例描述body很长，可以滑动，body头部有一个模拟下拉的选择框。下拉选择有滚动轴，如下图。我给body一个overflow：hidden和高度是没有用的。手机网站上背景还是可以滑动，然后我给body一个touchmove的preventdefault()阻止事件，body滑动阻止了，PC上面是可以了，但是手机上面滑动div还是会导致底部body的滑动，我给div 一个阻止冒泡的事件stopPr

2017-09-12 10:14:43 2348

原创 css中伪元素before或after中content的特殊用法attr

前言今天主要讲讲用纯css制作精美的半边文字和鼠标移上去显示tip的效果！知识点回顾关于伪类及伪元素，我前面文章已经经过。content除了上面的用法之外，还可以如下写：content: attr(data-haorooms);获取哪个属性。我们就是利用这个知识点。纯css制作精美鼠标移上去显示tips效果看如下案例：html代码如下：<div class="haorooms">

2017-09-12 09:11:42 7013

原创 html5自带表单验证体验优化及提示气泡修改

html5自带表单验证很多朋友进行表单验证的时候，都是自己用jquery或者js手工验证，或者用一下jquery插件进行验证。因为大家觉得html5自带验证不是很好！其实，现在html5自带表单验证，目前已经蛮强大了。我们来看下我用纯html5写的一个表单验证吧！体验一下！大家觉得这个效果怎么样呢？这个效果的精华是加了三个图片！.myform select:required,.myform

2017-09-12 08:05:49 2220

原创 jquery监听事件的另一种写法及最简单的jquery拖拽

前言思考一下，我们自己可以写出拖拽效果吗？可以的话，大概需要多少行代码？当然还要考虑代码的复用性。引子——关于jquery的某些写法我先不对监听事件做解释，我们先来看下jquery的一些写法吧！我们最常用的是jquery的css()方法，相信大家都会用！假如用css设置一个属性，我们写法如下：$("#front_end_fan").css("width","100px");假如多个属性呢？我们写法如

2017-09-11 14:12:51 1845

原创 textarea还剩余字数统计

以后再写页面上的js代码，一定要考虑复用性。比如封装好一个方法，其他地方要能够直接使用就像是下面的代码：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>textarea还剩余字数统计</title> <style type="text/css"> body,a{ font-size:

2017-09-11 13:50:16 1241

原创 css扫光效果总结，css文字扫光，css图片扫光

前言我录制的慕课网视频一直没有上线，慕课网的消息说是可能加入就业课程或者系列课程。有可能年底上线，我等的花儿都谢了！因此，我昨天在看慕课网时，发现他们确实改版了，实战页面有图片扫光效果，地址我就不列了！感觉这个效果还蛮不错，其实，我之前也做过类似的效果。今天借着这个引子，来和大家一起探讨一下图片的扫光效果吧！思路其实扫光的思路都是一样的，不外乎是表层一个动态的光，从左往右进行一个动画运动！但

2017-09-11 10:52:27 3303

原创谈谈css的伪类和伪元素

前言今天主要谈谈css的伪类和伪元素。伪类和伪元素的理解官方解释伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。我自己的理解：伪类，类，class是一个类，就类似class

2017-09-11 10:42:21 613

原创一些html5表单知识及EventUtil对象完善

前言这部分主要讲讲表单知识！表单知识1、Html5的autofocus属性。有个这个属性，我们不用js就能自动把焦点移动到相应的字段。例如：<input type="text" value="" autofocus />2、获取选择的文本今天我主要说一下如何获取文本框中选择的数值。html5中增加了两个属性：selectionStart，selectionEnd，可以获取开始的选

2017-09-11 10:31:25 409

转载 canvas绘制圆环进度条出现模糊效果解决方案

问题近期用canvas绘制了圆环进度条，但是进度条出现周围模糊的现象，针对这种现象，网上搜了搜，有人提问，但是貌似没有很好的解决方案，针对这种情况，提出几种解决方案，仅供参考！模糊效果如下：解决方案针对这种情况，我提出几种解决思路。一、运用hidpi-canvas-polyfill 的js进行解决HiDPI Canvas Polyfill 是针对设备提出的canvas高清解决方案，首先引入

2017-09-11 10:13:59 2102

转载 css中box-shadow的应用技巧

前言去年我在慕课网上录制的js/jquery各种宽高的理解和应用，迟迟没有上线，近期得到慕课网的消息说是该套课程已经纳入慕课网教学体系，可能和整套体系一起上线。哎，还是期待一下吧！另外，我博客迟迟没有内容的“前端资料库”，近期已经准备了20%，总有一天会和大家见面！最后一个消息是，我在慕课网录制的新的课程《html5左侧导航菜单》已经录制完毕，目前正在安排上线中~~新课程中提及手机端导航按钮“三

2017-09-11 10:06:36 325

转载 css的变量和继承

前言朋友，百姓网前端架构师css魔法的《css揭秘》，已经出版发行，并赠送了我一本。看了一下这本书，确实有很多css技巧。让你会有蛮大的收获，在这里帮他宣传一下！今天所说的案例呢，也是部分借鉴这本书的。今天和大家聊聊css变量和继承！有人会说，css怎么会有变量和继承？你是说的css处理器吧！不是，我说的是纯css，其实，css也在努力融入各种预处理器的特性和写法，甚至有些属性比预处理器更加强

2017-09-11 10:02:34 422

原创 javascript闭包的理解（二）

javascript闭包是javascript的难点，很多人对js闭包不是很理解，我对js闭包一开始也是云里雾里，大公司的面试和转正考试都会考察对闭包理解。如何理解javascript的闭包呢？下面我们一起来学习一下：闭包的含义和理解通俗地讲，JavaScript 中每个的函数都是一个闭包，但通常意义上嵌套的函数更能够体现出闭包的特性，请看下面这个例子：var generateClosur

2017-09-11 09:15:14 275

原创 javascript闭包入门理解（一）

前言闭包确实是js的难点和重点。先来个最简单的入门。案例首先看下闭包的一个简单案例function A(){ function B(){ console.log("Hello haorooms!"); } return B;}var c = A();c();//Hello haorooms!这个例子是一个比较简单的闭包，解释如下：(1)定义了一个普

2017-09-11 08:58:44 373

原创分享几个前端干货，面试经常提

前言今天，分享几个小知识，算是干货吧！前端面试中也经常会问及，不过问及的几率相对较少。我个人认为，面试中你把基础的知识打好，就可以无敌！哪些基础知识呢？例如：js的继承、js函数等等，万变不离其宗，都是这些的扩展及应用。这些知识理解透彻了，再加一些面试技巧就可以了！一、怎么让Chrome支持小于12px 的文字？这个我们在做移动端的时候，设计师图片上的文字假如是10px，我们实现在网页上之后。

2017-09-08 17:38:32 3430

原创前端性能优化补充篇

前端性能优化是一个不断追求的过程，前面的文章虽然讲解了一些性能优化，但是关于性能优化的路还有很长，很多东西都没有提及。今天，我在前面的基础之上，再来简单总结一些常用的性能优化方式。运算符1、使用运算符时，尽量使用+＝，－＝、*＝、\=等运算符号，而不是直接进行赋值运算。2、位运算。当进行数学运算时位运算较快，位运算操作要比任何布尔运算或算数运算快，如取模，逻辑与和逻辑或也可以考虑用位运算来替

2017-09-08 15:32:56 243

原创 js/jquery各种宽高的理解和应用

前言前面我有一篇文章，介绍js和jquery的高度，http://blog.csdn.net/qq_39198420/article/details/77862730 下面来抛砖引玉，简单的把“js/jquery各种宽高的理解和应用”再来说一下！window相关的宽高window是可以省略的，直接与window挂钩的宽高有如下几个！window.innerWidthwindow.innerHe

2017-09-08 15:07:44 247

原创谈谈inline-block的几个神奇的用法

前言inline-block，我们平时用的很多，最普通的用法就是几个div在一行中显示，我们用display:inline-block。今天之所以写这篇文章，主要是写inline-block的几个比较奇特的用法。实现div宽度根据内容自适应我们知道div是块级元素，假如我们不设置宽度，那么div的宽度默认是100%；问：要想div宽度根据内容自适应怎么办？请看下面代码：<div class=

2017-09-08 14:51:34 380