發表於   |   分類於

事件流

i> 事件冒泡

IE的事件流叫事件冒泡,即事件最开始有最具体的元素接收，然后逐级传播到较为不具体的节点（文档）。IE9、 Firefox、 Chrome 和 Safari 则将事件一直
冒泡到 window 对象。

1
2
3
4
5
6
7
8
9
10
<!Docuemnt>
<html>
  <head>
      <title>事件冒泡</title>
  </head>
  <body>
      <div>来点死我吧</div>
  </body>
</html>
如果你点击了div，那么事件将会按着 <code>&lt;div&gt;</code>--> <code>&lt;body&gt;</code> --> <code>&lt;html&gt;</code> --> <code>document</code> 这样子传播

i> 事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。如果仍以前面例子的话，顺序会是: document –> <html> –> <body> –> <div>
IE9、 Safari、 Chrome、 Opera和 Firefox 目前也都支持这种事件流模型。

閱讀全文 »

發表於   |   分類於

样式

有三种：通过<link/>包含外部样式表文件、使用<style/>元素定义嵌入式样式、使用style特性定义针对特定元素的样式。

i>访问样式表

任何支持style特性的HTML元素在js中都有一个对应的style属性。

  • 这个style对象是CSSStyleDeclaration的实例，包含着通过HTML的style特性指定的所有样式信息，但不包含其它两种。
  • 在style特性中指定的任何CSS属性都将表现为这个style对象的相应属性。
  • 对于有短横线的css属性名，必须将其转换成骆驼峰大小写形式，才能通过Javscript来访问。
  • 多数都可以转换，其中少数不能： float ===> cssFloat （Firefox、 Safari、 Opera 和 Chrome 都支持这个属性），而IE支持styleFloat
  • 在标准模式下，所有度量值都必须带一个度量单位20px，混杂模式下则不带单位。20
  • 如果没有为元素设置style特性，style对象中会带有一些不能准确的反映这个元素的一些默认值。
閱讀全文 »

發表於   |   分類於

a. 选择符API

Selectors API Level 1 的核心是两个方法： querySelector()和 querySelectorAll()。目前已完全支持 Selectors API Level 1
的浏览器有 IE 8+、 Firefox 3.5+、 Safari 3.1+、 Chrome 和 Opera 10+。

o> querySelector(“css选择符”) —> 返回匹配选择符的第一个元素，若没有匹配返回null。
1
2
3
4
var body = document.querySelector("body");
var myDiv = document.querySelector("#myDiv");
var selected = document.querySelector(".selected");
var img = document.querySelector("img.button");
o> querySelectorAll(“css选择符”) —-> 返回匹配选择符的所有元素， 返回的是一个NodeList的实例。
o> Selectors API Level 2 规范为 Element 类型新增了一个方法 matchesSelector(“CSS 选择符”)。调用元素与该选择符匹配返回true, 否则返回false;
1
2
3
4
5
6
7
8
9
10
11
12
13
function matchesSelector(element, selector){
    if(element.matchesSelector){
        return element.matchesSelector(selector);
    }else if(element.msMatchesSelector){
        return element.msMatchesSelector(selector);
    }else if(element.mozMatchesSelector){
        return element.msMatchesSelector(selector);
    }else if(element.webkitMatchesSelector){
        return element.webkitMatchesSelector(selector);
    }else{
        throw new Error("Not Supported!");
    }
}
閱讀全文 »

發表於   |   分類於

1.节点层次

a.Node类型

JavaScript 中的所有节点类型都继承自 Node 类型.因此所有节点类型都共享着相同的基本属性和方法。
对于元素节点， nodeName中始终保存的都是元素的标签名， 而nodeValue始终为null。

1）.节点关系

每个节点都有一个childNodes属性，其中保存着一个NodeList对象。
NodeList是一组 类数组对象； 用于保存一组有序节点； 有length属性,但是它不是Array的实例；
访问NodeList中的节点：[] 或者是 item()

1
2
3
var firstChildNode = someNode.childNodes[0];
var secondChildNode = someNode.childNodes.item(1);
var count = someNode.childNodes.length;

可以将 NodeList对象 转换成数组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function  coverNodelistToArray( nodes ){
    var array = null;
    try{
        array = Array.prototype.slice.call( nodes, 0 );   // ie8中不能实现， 因此必须手动进行创建数组
    }catch(ex){
        array = new Array();

        for( var i = 0; i < nodes.length; i++ ){
              array.push( nodes[i] );
        }
    }

    return array;
}
node关系图

node关系图
关系指针都是只读的。

閱讀全文 »

發表於   |   分類於

1.递归

递归函数实在一个函数调用名字来调用自身的情况下构成的。经典递归函数：

1
2
3
4
5
6
7
function factorial(num){
    if(num <= 1){
        return 1;
    }else{
        return num * factorial(num-1);
    }
}

虽然看起来没问题，但是

1
2
3
var anotherFactorial = factorial;
factorial = null;
alert(anotherFactorial(5));  // error，因为anotherFactorial函数重的factorial已设置为null。

解决方法： arguments.callee代表正在执行的函数指针,但是在严格模式下会出错。

1
2
3
4
5
6
7
function factorial(num){
    if(num <= 1){
        return 1;
    }else{
        return num * arguments.callee(num-1);
    }
}

解决办法：可以使用命名函数表达式

1
2
3
4
5
6
7
var factorial = (function f(num){
    if(num <= 1){
        return 1;
    }else{
        return num * f(num-1);
    }
});

2. 闭包

闭包是有权访问另外一个函数作用域中变量的函数。常见创建方式就是在一个函数中创建另外一个函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function createComparisonFunction(propertyName) {

    return function(object1, object2){
        var value1 = object1[propertyName];
        var value2 = object2[propertyName];

        if (value1 < value2){
            return -1;
        } else if (value1 > value2){
            return 1;
        } else {
            return 0;
        }
    };
}

当某个函数被调用时，会创建一个执行环境及相应的作用域链。然后使用arguments和其他命名参数来初始化函数活动对象。但在作用域中外部函数活动对象始终处于第二位，外部函数的外部函数的活动对象处于第三位，……直至作为作用于链的全局环境。

發表於   |   分類於

1.原型链

每个构造函数都有一个原型对象，原型对象含有一个指向构造函数的指针，而实例包含一个指向原型对象的内部指针。将原型对象等于另一个类型的实例，那么此时的原型对象将包含一个指向另一个原型的指针，相应地另外一个原型中包含着一个指向另外一个构造函数的指针。假如另一个原型又是另外一个构造函数的实例，将依序前面所述关系，层层递进，就构成了实例与原型的链条。
实现原型代码模式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function SuperType(){
    this.property = true;
}
SuperType.prototype.getSuperValue = function(){
    return this.property;
}

function SubType(){
    this.subProperty = false;
}

SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function(){
   return this.subProperty;
}

var instance = new subType();
alert(instance.getSuperValue()); // true;

閱讀全文 »