jquery弹窗插件dialog 这几天工作上比较轻松，就想起了要写一个 jQuery 弹窗插件练练手。倒是实现了一些基本的功能，不过依然还有很多不完善的地方。源码可以在我的 github 上进行查看：【github-dialog】使用new $.wz.Dialog()即能调用出默认的窗口，同时，还对外提供了多个参数进行定制化：{ "width": "400", // 宽度 "height": "300", // 高度 "location": "center", // center, topleft(lefttop), topright(righttop), bottomleft(leftbottom), bottomright(rightbottom) "shade": true, // 是否需要遮罩 "shadeClose": true, // 点击遮罩是否关闭弹窗 "btn": [], // 要显示的按钮 {name:"确定" //按钮名称, close:false //点击后是否关闭弹窗, action:function(){} // 点击按钮要执行的方法} "ease": "fade", // 显示和隐藏形式 "title": "提示框", // 弹窗标题 "content": "内容加载中...", // 弹窗内容 "countdown": 0 // 倒计时的时间，若小于等于0则表示不启动倒计时 } 我们来看下面的几个例子： 例子 1 # 创建一个弹窗，内容是“hello world”，同时还有两个按钮，确定按钮不能关闭弹窗，取消按钮可以关闭弹窗。new $.wz.Dialog({ content: "hell world", btn: [ { name: "确定", close: false, // 不关闭弹窗 action: function () { alert("确定按钮"); }, }, { name: "取消", action: function () { alert("取消按钮"); }, }, ], }); 运行 例子 2 # 创建一个弹窗，不要遮罩，右上角弹出new $.wz.Dialog({ content: "hell world", shade: false, location: "topright", // 'righttop' btn: [ { name: "确定", }, ], }); 运行 例子 3 # 创建一个弹窗，点击遮罩时不能关闭弹窗，采用倒计时关闭弹窗new $.wz.Dialog({ content: "hell world", shadeClose: false, countdown: 5, // 大于0则启动倒计时，否则关闭 }); 运行 总结 # 在编写这个插件的过程中学到了很多的东西，没写的时候觉得写插件挺容易，可是真写起来发现就不是那么回事了。既然是插件，那就要考虑到通用的情况，把各种可能使用到的情况都考虑进去。不过依然还有很多改进的地方，比如： 在没有传入 title 的情况，应该默认隐藏 title 没有考虑IE6的兼容性 可能造成全局变量的污染，插件里是直接对.wz_dialog的 jQuery 元素进行操作的，若页面中存在相同的元素，则会受到这个插件的影响。 我会持续完善的，也希望各位能提出意见或建议。

jQuery中的工具方法$.isFunction, $.isArray(), $.isWindow() 在javascript 中对变量类型的判断中，我们讲解了了 jQuery 中$.type()实现的原理。当然，jQuery 除了提供$.type的工具方法外，还提供了几个其他的工具方法：$.isFunction(), $.isArray(), $.isWindow(), $.isNumeric()等。这几个方法从方法名上就能看出其用途来，下面我们来一一讲解这几个方法在 jQuery(2.1.2)中实现的内部细节。 1. $.isFunction() # $.isFunction()是用来判断变量是否为 function 类型，我们通过几个例子来看看：$.isFunction(123); // false $.isFunction(true); // false $.isFunction([1, 2]); // false $.isFunction(function () {}); // true function func() {} var sfunc = function () {}; $.isFunction(func); // true $.isFunction(sfunc); // true 从上面的例子中能够看到，在$.isFunction(param)中，若传入的 param 是 function 类型，则返回 true；其他的类型则返回 false。查看 jQuery 的源码我们可以看到，$.isFunction()也是通过$.type()实现的：isFunction: function(obj) { return jQuery.type(obj) === "function"; } 2. $.isArray() # $.isArray()是用来判断变量是否为 array 类型。同样，我们也通过几个例子来看看$.isArray 的用法：$.isArray(123); // false $.isArray(true); // false $.isArray([1, 2]); // true $.isArray(new Array(3, 4)); // true 无论是 array 的字面量还是使用new关键词创建的变量，都能使用$.isArray()判断其是 array 类型。在 jQuery 源码中，$.isArray 调用的就是原生 Array 提供的 isArray 方法。因为在高版本的浏览器中，已经给原生 JavaScript 提供了一个isArray方法用来判断变量是否为 array 类型。isArray: Array.isArray; 3. $.isWindow() # $.isWindow()是用来判断当前变量是否为window，如：$.isWindow(window); // true $.isWindow([]); // false $.isWindow(null); // false 在 jQuery 源码中：isWindow: function(obj) { return obj != null && obj === obj.window; } 他是通过判断 obj 是否有 window 属性，来判断 obj 是否为 window 对象。因为 window 对象里有一个属性 window，就是他自己，因此：window.window===window，同样的：window.window.window.window === window; 可以一直循环下去。而代码里为什么要先判断一下 obj 是否为 null 呢？因为在判断 null 或 undefined 是否有 window 属性时，代码会抛出异常：Uncaught TypeError: Cannot read property 'window' of null。因此，为了防止代码错误，首先判断变量是否为 null，若为 null，则它肯定不是 window 对象，直接返回 false；否则再判断这个变量有没有 window 属性。 4. $.isNumeric() # $.isNumeric()是用来判断当前变量是否为数字类型，可是为什么我不使用$.type()=="number"来判断呢。我们先来看几个官方的例子：$.isNumeric('-10'); // true $.isNumeric(16); // true $.isNumeric(0xff); // true $.isNumeric('0xFF'); // true $.isNumeric('8e5'); // true (exponential notation string) $.isNumeric(3.1415); // true $.isNumeric(+10); // true $.isNumeric(0144); // true (octal integer literal) $.isNumeric(''); // false $.isNumeric({}); // false (empty object) $.isNumeric(NaN); // false $.isNumeric(null); // false $.isNumeric(true); // false $.isNumeric(Infinity); // false $.isNumeric(undefined); // false 使用$.isNumeric()能够判断出**"-10"**, **"0xFF"**这样字符串类型的数字，而$.type()则会将其解析为 string 类型。在 jQuery 源码中，是这样判断变量类型的：isNumeric: function(obj) { // parseFloat NaNs numeric-cast false positives (null|true|false|"") // ...but misinterprets leading-number strings, particularly hex literals ("0x...") // subtraction forces infinities to NaN // adding 1 corrects loss of precision from parseFloat (#15100) return !jQuery.isArray( obj ) && (obj - parseFloat( obj ) + 1) >= 0; } 首先判断其变量是否为 array 类型，若是则直接返回 false。可是为什么要先判断变量是否为 array 类型呢？因为**[123]**这样类型的数组是可以直接进行减法运算的，同时也能通过 parseFloat(["123"])转换为数字：[100] - (60)[100] - // 40 [60]; // 40 parseFloat([123]); // 123 parseFloat(['345']); // 345 因此不能直接通过 parseFloat()转换，然后判断。首先得判断这个变量是否为数组；若不是才进行下一步的判断：obj - parseFloat(obj) + 1 >= 0; 纯数字，字符串类型的数字，0 开头的数字（8 进制），0x 开头的数组（16 进制）等，都能通过 parseFloat()正常进行转换为 10 进制的数字。经过上面表达式的运算，肯定是大于 0 的。可是为什么要加上 1 呢？代码里也解释了，通过 parseFloat()转换到，会造成精度丢失的问题，因此+1 后，运算结果更加的准确。而其他类型的通过 parseFloat()转换后得到的是NaN，NaN 无论通过怎样的运算，都是不能跟 0 比较的，返回 false。在 jQuery 之前的版本（如 2.0.2）中：isNumeric: function(obj) { return !isNaN( parseFloat(obj) ) && isFinite( obj ); } 我们可以发现，使用这样的代码$.isNumeric([123])运行后，得到的 true，而实际上，它是个数组类型。不过还好，在后续的版本已经修复了。 5. $.isEmptyObject() # $.isEmptyObject()不是用来判断变量的类型了，而是判断一个 object 类型是否为空，不包含任何属性。从 jQuery 1.4 开始，这个方法既检测对象本身的属性，也检测从原型继承的属性（因此没有使用 hasOwnProperty）。参数应当是一个普通的 JavaScript 对象， 对于其他类型的对象（DOM 元素，原始 strings/numbers，host 对象）在跨浏览器中可能无法提供一致的结果。$.isEmptyObject({ name: 'wenzi' }); // false $.isEmptyObject({}); // true function Person() { this.name = 'wenzi'; } $.isEmptyObject(new Person()); // false function Student() {} Student.prototype.name = 'wenzi'; $.isEmptyObject(new Student()); // false 我们能够看到，不论是对象本身的属性，还是 prototype 上的属性，只要存在，都会返回 false。isEmptyObject: function(obj) { var name; for ( name in obj ) { return false; } return true; } 在 jQuery 中，是通过for~in进行检测的。因为 for~in 也是能循环到 prototype 上的属性的，若进入到循环中，则说明 obj 存在属性，发挥 false；否则返回 true。 6. 总结 # jQuery 中还提供了很多各种各样的工具方法，让我们在编写 js 代码时更加的方便。以后有机会时再总结其他的工具方法。

使用CSS3实现圆形进度条 一般我们见到的进度条通常都是矩形的，从左往右开始推进，直到 100%；但是很少有圆形的进度条，本篇文章稍微讲解下如何使用 CSS3 实现圆形进度条。若是只要实现一个圆环的话，我们都能写出来，用border和border-radius就能画出来：.demo { width: 200px; height: 200px; border: 20px solid green; box-sizing: border-box; border-radius: 50%; } 但是这样的圆环不能动啊，而且能产生进度条效果的一个重要的因素就是得从 0 开始变化，而不是一个完整的圆环在旋转，这是没有意义的。首先说下我实现的思路： 把整个圆环分成左右两部分； 左右两部分都有半个圆环在旋转，比如先让右边的半圆环，旋转到正好接住了左半部分，然后左边的半圆环开始旋转。 1. 画右半圆环 # 我们先来设计下右半部分吧，html 结构如下： 里面的.rightcircle是半个圆环，样式如下：.right { position: relative; width: 100px; height: 200px; overflow: hidden; } .rightcircle { width: 200px; height: 200px; border: 20px solid transparent; border-radius: 50%; position: absolute; box-sizing: border-box; top: 0; right: 0; border-top: 20px solid green; border-right: 20px solid green; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); /* 旋转45度 */ } 当我们把这些样式写完的时候，看到的是这个样子的，因为使用的是 div 的上半边界和右半边界，因此需要旋转一下，才能正好是我们看到的半圆环： 因为外层的 div 有一个overflow:hidden属性，我们先把这个半圆旋转到 div 的另一边隐藏了，然后再慢慢改变这个半圆环的角度，让它显示出来不就行了。稍微计算下就可以知道，-135deg正好能隐藏在外层 div 的左半部分，即：.rightcircle { width: 200px; height: 200px; border: 20px solid transparent; border-radius: 50%; box-sizing: border-box; position: absolute; top: 0; right: 0; border-top: 20px solid green; border-right: 20px solid green; transform: rotate(-135deg); /* 旋转45度时正好能显示半个圆，旋转-135度，正好能隐藏半个圆 */ } 20160226 更新这个-135deg 是怎么得出来的呢，我们来看下面的这张图：矩形的上边界和右边界正好是对应这上图圆形的上半部分和右半部分，旋转到左侧正好隐藏的话，那就是逆时针旋转-135deg 2. 为半圆添加动画 # 好了，半个圆已经隐藏住了，那么我们应该让它慢慢出来了，给.rightcircle添加一个动画：animation。/* 这里仅考虑webkit内核的情况，您可以写完整了 */ .rightcircle { -webkit-animation-name: circle_right; /* 动画名称 */ -webkit-animation-duration: 5s; /* 完成一个动画需要的时间 */ -webkit-animation-timing-function: linear; /* 动画播放的方式，linear是匀速变化 */ -webkit-animation-iteration-count: infinite; /* 动画播放的次数，infinite是无限次数 */ } @-webkit-keyframes circle_right { 0% { transform: rotate(-135deg); } 100% { transform: rotate(45deg); } } 那么左半部分就正好相反喽，这里我就不写了，你可以尝试着写一下。 3. 大功告成 # 好了，让我们把左半部分和右半部分拼接起来：.circle_process { position: relative; width: 199px; height: 200px; } .circle_process .wrapper { width: 100px; height: 200px; position: absolute; top: 0; overflow: hidden; } .circle_process .right { right: 0; } .circle_process .left { left: 0; } .circle_process .circle { width: 200px; height: 200px; border: 20px solid transparent; border-radius: 50%; box-sizing: border-box; position: absolute; top: 0; transform: rotate(-135deg); } .circle_process .rightcircle { border-top: 20px solid green; border-right: 20px solid green; right: 0; -webkit-animation: circle_right 5s linear infinite; } .circle_process .leftcircle { border-bottom: 20px solid green; border-left: 20px solid green; left: 0; -webkit-animation: circle_left 5s linear infinite; } @-webkit-keyframes circle_right { 0% { -webkit-transform: rotate(-135deg); } 50%, 100% { -webkit-transform: rotate(45deg); } } @-webkit-keyframes circle_left { 0%, 50% { -webkit-transform: rotate(-135deg); } 100% { -webkit-transform: rotate(45deg); } } 大功告成。 4. 额外功能 # 我们已经实现了一个圆形进度条，利用这个，我们可以实现一个小闹钟：function getTime() { var date = new Date(); var second = date.getSeconds(); var rightcircle = document.getElementById("rightcircle"); var leftcircle = document.getElementById("leftcircle"); var show = document.getElementById("show"); show.innerHTML = second; if (second

js中的内部属性与delete操作符 在讲解Configurable之前，我们首先来看一道面试题：a = 1; console.log( window.a ); // 1 console.log( delete window.a ); // true console.log( window.a ); // undefined var b = 2; console.log( window.b ); // 2 console.log( delete window.b ); // false console.log( window.b ); // 2 从上面的这道题可以看出两个的区别：在没有使用var声明变量时，使用delete关键词是可以进行删除的，再次获取时值就是undefined了；在使用var声明的变量，使用delete是不能删除的，再获取时值依然是2。 1. delete操作符 # 使用delete删除变量或属性时，删除成功返回true，否则返回false。如上面的例子中，delete无法删除变量a时，则返回false；而delete能成功删除变量b，则返回true。除了上述的两种情况，还有其他的各种常用变量也有能被delete删除的，也有不能被删除的。我们先不管delete这些变量时，为什么会产生这样的结果，这里只看他的返回值：删除delete数组中其中的一个元素：// 使用for~in是循环不到的，直接忽略到该元素 // 使用for()可以得到该元素，但是值是undefined var arr = [1, 2, 3, 4]; console.log( arr ); // [1, 2, 3, 4] console.log( delete arr[2] ); // true，删除成功 console.log( arr ); // [1, 2, undefined, 4] 删除function类型的变量：// chrome 不能删除；火狐可以删除 function func(){ } console.log( func ); console.log( delete func ); console.log( func ); 删除function.length，该length是获取形参的个数：function func1(a, b){ } console.log( func1.length ); // 2 console.log( delete func1.length ); // true，删除成功 console.log( func1.length ); // 0 删除常用变量：console.log( delete NaN ); // false，删除失败 console.log( delete undefined );// false console.log( delete Infinity ); // false console.log( delete null ); // true，删除成功 删除prototype，而不是删除prototype上的属性：function Person(){ } Person.prototype.name = "蚊子"; console.log( delete Person.prototype ); // false，无法删除 console.log( delete Object.prototype ); // false 删除数组和字符串的length时：var arr = [1, 2, 3, 4]; console.log( arr.length ); // 4 console.log( delete arr.length ); // false，删除失败 console.log( arr.length ); // 4 var str = 'abcdefg'; console.log( str.length ); // 7 console.log( delete str.length ); // false，删除失败 console.log( str.length ); // 7 删除obj中的属性时：var obj = {name:'wenzi', age:25}; console.log( obj.name ); // wenzi console.log( delete obj.name ); // true，删除成功 console.log( obj.name ); // undefined console.log( obj ); // { age:25 } 删除实例对象中的属性时，从以下的输出结果可以看出，使用delete删除属性时，删除的仅仅是实例对象本身的属性，而不能删除prototype上的属性，即使再删一次也是删除掉不的；若要删除prototype上的属性的属性或方法，只能是：delete Person.prototype.name：function Person(){ this.name = 'wenzi'; } Person.prototype.name = '蚊子'; var student = new Person(); console.log( student.name ); // wenzi console.log( delete student.name ); // true，删除成功 console.log( student.name ); // 蚊子 console.log( delete student.name ); // true console.log( student.name ); // 蚊子 console.log( delete Person.prototype.name );// true，删除成功 console.log( student.name ); // undefined 2. js的内部属性 # 在上面的例子中，有的变量或属性能够删除成功，而有的变量或属性则无法进行删除，那是什么决定这个变量或属性能不能被删除呢。ECMA-262第5版定义了JS对象属性中特征（用于JS引擎，外部无法直接访问）。ECMAScript中有两种属性：数据属性和访问器属性。 2.1 数据属性 # 数据属性指包含一个数据值的位置，可在该位置读取或写入值，该属性有4个供述其行为的特性： configurable:表示能否使用delete操作符删除从而重新定义，或能否修改为访问器属性。默认为true; Enumberable:表示是否可通过for-in循环返回属性。默认true; Writable:表示是否可修改属性的值。默认true; Value:包含该属性的数据值。读取/写入都是该值。默认为undefined；如上面实例对象Person中定义了name属性，其值为’wenzi’,对该值的修改都反正在这个位置 要修改对象属性的默认特征（默认都为true)，可调用Object.defineProperty()方法，它接收三个参数：属性所在对象，属性名和一个描述符对象（必须是：configurable、enumberable、writable和value，可设置一个或多个值）。如下：var person = {}; Object.defineProperty(person, 'name', { configurable: false, // 不可删除，且不能修改为访问器属性 writable: false, // 不可修改 value: 'wenzi' // name的值为wenzi }); console.log( person.name); // wenzi console.log( delete person.name ); // false，无法删除 person.name = 'lily'; console.log( person.name ); // wenzi 可以看出，delete及重置person.name的值都没有生效，这就是因为调用defineProperty函数修改了对象属性的特征；值得注意的是一旦将configurable设置为false，则无法再使用defineProperty将其修改为true（执行会报错：Uncaught TypeError: Cannot redefine property: name）; 2.2 访问器属性 # 它主要包括一对getter和setter函数，在读取访问器属性时，会调用getter返回有效值；写入访问器属性时，调用setter，写入新值；该属性有以下4个特征： [[Configurable]]:是否可通过delete操作符删除重新定义属性； [[Numberable]]:是否可通过for-in循环查找该属性； [[Get]]:读取属性时自动调用，默认：undefined; [[Set]]:写入属性时自动调用，默认：undefined; 访问器属性不能直接定义，必须使用defineProperty()来定义，如下：var person = { _age: 18 }; Object.defineProperty(person, 'isAdult', { Configurable : false, get: function () { if (this._age >= 18) { return true; } else { return false; } } }); console.log( person.isAdult ); // true 不过还是有一点需要额外注意一下，Object.defineProperty()方法设置属性时，不能同时声明访问器属性（set和get）和数据属性（writable或者value）。意思就是，某个属性设置了writable或者value属性，那么这个属性就不能声明get和set了，反之亦然。如若像下面的方式进行定义，访问器属性和数据属性同时存在：var o = {}; Object.defineProperty(o, 'name', { value: 'wenzi', set: function(name) { myName = name; }, get: function() { return myName; } }); 上面的代码看起来貌似是没有什么问题，但是真正执行时会报错，报错如下： Uncaught TypeError: Invalid property. A property cannot both have accessors and be writable or have a value 对于数据属性，可以取得：configurable,enumberable,writable和value；对于访问器属性，可以取得：configurable,enumberable,get和set。由此我们可知：一个变量或属性是否可以被删除，是由其内部属性Configurable进行控制的，若Configurable为true，则该变量或属性可以被删除，否则不能被删除。可是我们应该怎么获取这个Configurable值呢，总不能用delete试试能不能删除吧。有办法滴！！ 2.3 获取内部属性 # ES5为我们提供了Object.getOwnPropertyDescriptor(object, property)来获取内部属性。如：var person = {name:'wenzi'}; var desp = Object.getOwnPropertyDescriptor(person, 'name'); // person中的name属性 console.log( desp ); // {value: "wenzi", writable: true, enumerable: true, configurable: true} 通过Object.getOwnPropertyDescriptor(object, property)我们能够获取到4个内部属性，configurable控制着变量或属性是否可被删除。这个例子中，person.name的configurable是true，则说明是可以被删除的：console.log( person.name ); // wenzi console.log( delete person.name ); // true，删除成功 console.log( person.name ); // undefined 我们再回到最开始的那个面试题：a = 1; var desp = Object.getOwnPropertyDescriptor(window, 'a'); console.log( desp.configurable ); // true，可以删除 var b = 2; var desp = Object.getOwnPropertyDescriptor(window, 'b'); console.log( desp.configurable ); // false，不能删除 跟我们使用delete操作删除变量时产生的结果是一样的。 3. 总结 # 别看一个简简单单的delete操作，里面其实包含了很多的原理！

angular初探 AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。跟着教程学习了几天，给我的感觉就是：不用自己再显式的用 js 给 DOM 元素绑定事件，只需添加一个 angular 特有的字段即可；像是使用后端语言那样对 DOM 进行操作，比如循环输出数组中的元素；自己写一个控制器，就能对页面进行操作。AngularJS 使用了不同的方法，它尝试去补足 HTML 本身在构建应用方面的缺陷。AngularJS 通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如： 使用双大括号语法进行数据绑定； 使用 DOM 控制结构来实现迭代或者隐藏 DOM 片段； 支持表单和表单的验证； 能将逻辑代码关联到相关的 DOM 元素上； 能将 HTML 分组成可重用的组件。 1. AngularJS 简介 # AngularJS 通过 ng-directives 扩展了 HTML。 ng-app 指令定义一个 AngularJS 应用程序。ng-app 指令标记了 AngularJS 脚本的作用域，在中添加 ng-app 属性即说明整个都是 AngularJS 脚本作用域。开发者也可以在局部使用 ng-app 指令，如，则 AngularJS 脚本仅在该 div 中运行。 ng-model 指令把元素值（比如输入域的值）绑定到应用程序。 ng-bind 指令把应用程序数据绑定到 HTML 视图。 1.1 一个简单的数据绑定 # 实时的实现输入框的值 angular 在上面的程序中，实现了在输入框中输入一个值，能马上在 p 标签中显式出来。ng-mdel指令把输入域的值绑定到应用程序变量 username，ng-bind指令把应用程序变量 username 绑定到某个段落（上面的 p 标签）的 innerHTML 上。如果去掉 html 标签上的ng-app，则功能失效 1.2 一个简单的循环输出 # 在我们使用后端语言模板的时候，通常会使用循环输出一些类似的数据。angular 也有这样的功能： angular name:{{ item.name }} age:{{ item.age }} 首先我们使用ng-init初始化一组数据 data，然后使用ng-repeat对 data 进行循环输出。ng-repeat放在哪个标签上，就是对这个标签进行循环，这里循环的是 li 标签；其中的每一项就是item，然后可以通过item.name，item.age输出 name 和 age 的值。当然，还可以不使用ng-init初始化数据，直接对数组进行循环： angular name:{{ item.name }} age:{{ item.age }} 1.3 AngularJS 过滤器 # 过滤器可以使用一个管道字符（|）添加到表达式和指令中。AngularJS 过滤器可用于转换数据： currency：格式化数字为货币格式； filter：从数组项中选择一个子集； lowercase：格式化字符串为小写； orderBy：根据某个表达式排列数组； uppercase：格式化字符串为大写 过滤器的简单使用： 大写：{{ 'wenzi'|uppercase }} 小写：{{ 'Country'|lowercase }} name:{{ item.name }} age:{{ item.age }} 1.4 控制器 # AngularJS 控制器 控制 AngularJS 应用程序的数据。ng-controller指令定义了应用程序控制器： angular {{ name }} {{ age }} {{ male }} var app = angular.module('myApp', []); // 定义Person控制器 app.controller('Person', function($scope){ $scope.name = 'wenzi'; $scope.age = 24; $scope.male = 'male'; }) angular 使用$scope对象来调用控制器，控制器的$scope 用来保存 angularJS model（模型）的对象。控制在作用域中创建了三个属性：name, age, male。控制器中还可以添加方法：app.controller("Person", function ($scope) { $scope.name = "wenzi"; $scope.age = 24; $scope.male = "male"; // 获取当前时间 $scope.getTime = function () { return new Date().getTime(); }; }); 1.5 HTTP # angular 中的$http是一个用于读取 web 服务器上数据的服务。$http.get(url)获取链接 url 中返回的数据： name:{{item.name}} age:{{item.age}} sex:{{item.sex}} var app = angular.module("myApp", []); // $http的用法跟$.ajax用法很相似 app.controller("getJson", function ($scope, $http) { $http.get("./interface.php").success(function (data) { $scope.result = data; }); }); 2. 为 DOM 添加属性 # angular 能通过ng-*为 DOM 添加属性，如： 指令值说明 ng-disabledboolean添加disabled属性 ng-showboolean显示HTML元素 ng-hideboolean隐藏HTML元素 ng-click定义angular点击事件 如下面的代码简单的介绍了这些指令的使用：点击 要隐藏的元素 现在我们来写个稍微有点复杂的程序： {{ count }} 点击+1 隐藏|显示 {{ count }} var app = angular.module("myApp", []); app.controller("toggleController", function ($scope) { $scope.myVar = false; $scope.toggle = function () { $scope.myVar = !$scope.myVar; }; }); 3. 一个 angular 应用 # 学了一些东西，让我们来写一个小的 web 应用，能记录输入框的剩余字数，能获取和删除输入框的内容【查看演示】： angular 我的笔记 保存 清除 剩余字数：100 var app = angular.module('myApp', []); app.controller('textController', function($scope){ $scope.message = ''; $scope.save = function(){ alert( $scope.message ); } $scope.left = function(){ return 100 - $scope.message.length; } $scope.reset = function(){ $scope.message = ''; } })