发表于 | 阅读次数

ECMAScript 中有两种属性：数据属性和访问器属性。

数据属性

数据属性包含一个数据值的位置。在这个位置可以读取和写入值。

Configurable：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，默认值为 true。
Enumerable：表示能否通过 for-in 循环返回属性。默认值为 true。
Writable：表示能否修改属性的值。默认值为 true。
Value：包含这个属性的数据值。默认值为 undefined。

要修改属性默认的特性，必须使用 ECMAScript 5的 Object.defineProperty() 方法。这个方法接收三个参数：属性所在的对象、属性的名字和一个描述符对象。其中，描述符对象的属性必须是：configurable、enumerable、writable 和 value。

阅读全文 »

发表于 | 阅读次数

css 动画可以产生多种效果，先简单介绍下 animation 的使用。

animation 属性

animation 属性是如下属性的简写属性：animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction 和 animation-fill-mode。

animation 需要调用 @keyframes 产生动画效果，看个实例

阅读全文 »

发表于 | 阅读次数

什么是正则表达式

Regular Expression 使用单个字符串来描述，匹配一系列符合某个句法规则的字符串。

简单说就是按照某种规则去匹配符合条件的字符串。

字面量

1
var reg = /\bis\b/;
2
'This is a dog.where is she'.replace(reg,'Is');
3
"This Is a dog.where is she"
4
var reg = /\bis\b/g;
5
'This is a dog.where is she'.replace(reg,'Is');
6
"This Is a dog.where Is she"
阅读全文 »

发表于 | 阅读次数

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。用来序列化对象、数组、数值、字符串、布尔值和 null 。JSON 不支持 JavaScript 中的特殊值 undefined、symbol、变量、函数、对象实例。

简单值

简单值：表示字符串、数值、布尔值和 null。

1
// 有效的JSON数据
2
5
3
"Hello World"

JavaScript 字符串与 JSON 字符串的最大区别在于，JSON 字符串必须使用双引号（单引号会导致语法错误）。

阅读全文 »

发表于 | 阅读次数

2005年，Jesse James Garrett 发表了一篇在线文章，题为”Ajax：A new Approach to Web Applications“。他在这篇文章里介绍了一种技术，用他的话说，就叫 Ajax，是对 Asynchronous JavaScript + XML 的简写。这一技术能够向服务器请求额外的数据而无须重载（刷新）页面，会带来更好的用户体验。

XMLHttpRequest 对象

Ajax 技术的核心是 XMLHttpRequest 对象，这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。

responseText：作为响应主体被返回的文本。
responseXML：如果响应的内容类型是”text/xml“或”application/xml“，这个属性中保存包含着响应数据的 XML DOM 文档。
status：响应的 HTTP 状态。
statusText：HTTP 状态的说明。

阅读全文 »

发表于 | 阅读次数

原型

了解原型链，我们先了解下原型

  1. 所有的对象都有toString()、valueOf()、constructor、hasOwnProperty()等
  2. 所有的数组都是有对象应该有的属性
  3. 所有的数组都有push()、shift()、join()、slice()、splice()等
  4. var array = [] 应该有数组共有的所有属性
1
var array = []
阅读全文 »

发表于 | 阅读次数

全局上下文

在全局运行上下文中，this指全局对象。

1
console.log(this.document === document); // true
2
console.log(this === window); // true

函数上下文

DOM事件处理函数中的 this

通常来说，this 的值是触发事件的元素的引用。

1
button.addEventListener('click',function(e){
2
    console.log(this === e.currentTarget); // true
3
})
阅读全文 »

发表于 | 阅读次数

在 HTML 中，表单是由 form 元素来表示的，而在 JavaScript 中，表单对应的则是 HTMLFormElement 类型。HTMLFormElement 的属性和方法。

acceptCharset: 服务器能够处理的字符集；等价于 HTML 中的 accept-charset 特性。
action: 接受请求的 URL；等价于 HTML 中的 action 特性。
elements: 表单中所有控件的集合（HTMLCollection）。
enctype: 请求的编码类型；等价于 HTML 中的 enctype 特性。
length: 表单中控件的数量。
method: 要发送的 HTTP 请求类型，通常是”get”或”post”；等价于 HTML 的 method 特性。
name: 表单的名称；等价于 HTML 的 name 特性。
reset(): 将所有表单域重置为默认值。
submit(): 提交表单。
target: 用于发送请求和接收响应的窗口名称；等价于 HTML 的 target 特性。

阅读全文 »

发表于 | 阅读次数

手机上没有console.log 方法，做了个console.log 方法

1
<style>
2
#console{
3
  background:#ccc;
4
  position:absolute;
5
  bottom:0;
6
  left:0;
7
  height:100px;
8
  width:100%;
9
}
10
</style>
11
<script>
12
  var div = document.createElement('div'); 
13
  div.id = 'console'; 
14
  document.body.appendChild(div);
15
  console.log = function(thing){
16
    div.innerText = JSON.stringify(thing);
17
  }
18
</script>
阅读全文 »

发表于 | 阅读次数

event.target指向引起触发事件的元素
event.currentTarget则是事件绑定的元素

看个例子

1
<style>
2
body {
3
  padding: 25px;
4
}
5
#outer {
6
  float: left;
7
  padding: 50px;
8
  margin: 0 0 25px;
9
  background-color: #086FA1;
10
}
11
12
#inner {
13
  width: 100px;
14
  height: 100px;
15
  background-color: #3CA0D0;
16
}
17
18
</style>
19
<div id="outer">
20
  <div id="inner"></div>
21
</div>
22
<script>
23
    var outer = document.getElementById('outer');
24
    var inner = document.getElementById('inner');
25
    outer.addEventListener('click',function (event){
26
       console.log('event.target.id:'+event.target.id);
27
       console.log('event.currentTarget.id:'+ event.currentTarget.id); 
28
    })
29
</script>
阅读全文 »