JavaScript 作用域和作用域链

作用域就是变量或者函数可访问的范围,它分为全局作用域和本地作用域。全局作用域:所有属于浏览器 window 对象的变量或者函数都归属于全局作用域。本地作用域:以函数为边界的区块,也可以理解成除了全局作用域,其它的都可以看作是局部作用域,而全局作用域和本地作用域就组成了一条作用域链。 我们可以看看下面这个例子来具体说明什么是全局作用域,什么是局部作用域: <script> // 定义全局变量...

2017
02-27

JavaScript 闭包(Closure)

闭包是什么?为什么要用到闭包?这些问题想必你已经听过不少了,特别是如果你面试前端开发的时候,这是你怎么也躲不过的话题。现在我们来看看闭包到底是什么东西。 什么是闭包? 闭包就是有权访问另一个函数作用域内数据资源(变量、函数)的函数。至于闭包有什么用,下面我们会说到。现在我们要了解闭包,我们得先来明白有关于闭包的一些名词。 相关名词 作用域:就是可访问数据资源(变量、函数)的...

2017
02-24

网站代码高亮插件 prettify.js

作为前端开发者,代码是你躲也躲不开的,下面就教你如何在自己的网站里给所有代码块添加高亮效果。而这篇文章要给你介绍的就是这样一个代码高亮插件 prettify.js 。 这个插件的作用方法也非常简单,你只需要引用相关文件,然后再启用它就可以。 <!-- 引入 CSS 文件 --> <link href="prettify.min.css" rel="stylesheet"> <!-- 引入 JS 文件 --> <script src="jquery.min.js">&l...

2017
02-20

AngularJS ng-repeat 数据遍历详解

AngularJS 中的ng-repeat 估计你见得不少了。这个东东其实也非常的简单:遍历数据。下面我们变来看看这个ng-repeat 到底可以为我们做些什么。这是本文所写到的例子的在线 Demo:http://yunkus.com/demo/angularjs/ng-repeat/。 基本结构 HTML 结构 <!DOCTYPE html> <html ng-app="yk"> <head> <meta http-equiv="Content-type" content="text/html;charset=utf-8"> ...

2017
01-25

AngularJS ng-style 添加样式详解

AngularJS 里的 ng-style 在平时的项目用也常有用到,一般都是用来通过条件判断然后显示指定的样式。本文我们变来看看这个 ng-style 怎么用,能做什么。下面我们先把基本的HTML 结构和数据准备好。在看代码之前你可以先来看看本文的在线 Demo :http://yunkus.com/demo/angularjs/ng-style/。 HTML 代码 <!DOCTYPE html> <html ng-app="yk"> <head> <meta http-equiv="Content-t...

2017
01-25

AngularJS checkbox 完美实现全选反选功能

刚站的全选反选相信你已经见过不少了,现在我们来看看在 AngularJS 中是如何实现的。下面会给出两个例子,一个是最简单的全选,反选;一个是接近完美的全选反选功能。 你可以先看看本文的 Demo 来预热下:http://yunkus.com/demo/angularjs/checkbox/ 下面直接贴出代码,HTML 代码有点多,但你也不用怕,因为来来去去也就那么几个东西了。现在你可以淡定的开始你的看码之旅了。 HTML代码 <!DOCTYPE html...

2017
01-21

AngularJS 与本地存储 LocalStorage 应用实例

这篇文章是一个关于AngularJS 与本地存储 LocalStorage 配合使用的一个应用实例,里面涉及到的东西也不少,但关键是它们都很简单,你可以不费吹灰之力就能把它人拿下,不信,你试试!废话不多说,直接上代码。你也可以先去品尝一下 AngularJS 与本地存储 LocalStorage 应用实例 Demo:http://yunkus.com/demo/angularjs/localstorage/。戴好安全带,网速有点快。 HTML代码 <!DOCTYPE html> <html...

2017
01-16

AngularJS 数据遍历 angular.foreach()

数据遍历对于前端来说,已经用得不少了,在AngularJS中也一样,我们很多时候需要这么做以达到操作数据的目的。下面我们就来看一个简单的例子。如果你觉得看代码不过瘾,你可以先去观摩下本例子的 Demo:http://yunkus.com/demo/angularjs/foreach/ 基本例子 HTML 代码 <!DOCTYPE html> <html ng-app="yk"> <head> <meta http-equiv="Content-type" content="text/html;chars...

2017
01-14

AngularJS 表单元素操作汇总

本文主要是把AngularJS 里有关表单元素操作的东西整理出来,比如操作input输入框、select下拉框。费话不多说,我们直接进主题。 如果你觉得下面的代码没意思,你也可以直接点这里感受Demo的威力:http://yunkus.com/demo/angularjs/form/ 基本代码结构 HTML代码 <!DOCTYPE html> <html ng-app="yk"> <head> <meta http-equiv="Content-type" content="text/html;charset=utf...

2017
01-14

AngularJS filter 用法

Angular 里的filter(过滤器)方法可以让你筛选出符合条件的数据。对数据操作有一定要求的网站来说,filter 相当的体贴(如果你的网站是用filter来开发的话)。 Angular 内置了一些常用的过滤器:currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序),共九种。除了内置的过滤器外,你还可以自定义过...

2017
01-06