2015-02-07——js笔记

示例1：

var abc;

console.log(abc === undefined);
        console.log(abc === null);
        console.log(typeof abc === undefined);
        console.log(typeof abc === 'undefined');

　　 => true;

　　 => false;

　　 => true;

示例2：

var ceshi = document.getElementById('ceshi');
       ceshi.abc = '1111';
       var abc = '2222';
       function ceshiListener() {
           alert(this.abc);
       }
       ceshi.addEventListener('click', ceshiListener, false);

=> 1111

PS：测试结果，在W3C标准中，侦听器的this的执行环境为被侦听对象。

示例3：

var ceshi = document.getElementById('ceshi');
       ceshi.abc = '1111';
       var abc = '2222';
       function ceshiListener() {
           alert(this.abc);
       }
       ceshi.attachEvent('onclick', ceshiListener);

=> 2222

PS：测试结果，在IE10及以下版本中，侦听器的this的执行环境为window。但在IE11中已不支持attachEvent。

示例4：

指定MSIE标准的事件侦听器中this的执行环境,解决示例3中的问题。

要素：1、将原函数传递给被侦听节点对象某成员。2、注意MSIE标准，不自动传递事件对象window.event给侦听器

示例代码：

node['abc'] = listener; //改变this执行环境

node['delegate'] = function () {

node['abc'](window.event); //针对IE不自动传递事件对象给侦听器

};

node.attachEvent('onclick', node['delegate']);

示例5：

var ceshi = 1;
       function abc(ceshi) {//传入的参数名为特殊的局部变量
           ceshi = 2; //局部变量
           alert(ceshi);
       }
       abc();
       alert(ceshi);

=> 2

=> 1

PS：传入同名参数，可截断作用域链。不影响上级变量，上级变量也不自动传入。

示例6：

全局替换

var a = 'dede';
       var b = a.replace(/d/g, '-');
       alert(a);
       alert(b);

=> dede

=> -e-e

示例7：

关于转义

字符串中，一个\代表转义，单个\可直接忽视。两个\\，输出\。转义不能转义的字符时，转义失败，但\并不输出。

正则表达式中，一般情况下，对于-，转义字符\，可加可不加，出于良好的语义，最好加上。

示例代码：

var abc = 'my\-class\-abc';
        var ceshi = abc.replace(/\-/g, '\\-');
        alert(abc);
        alert(ceshi);

=> my-class-abc

=> my\-class\-abc

var abc = 'my-class-abc';
        var ceshi = abc.replace(/\-/g, '\\-');
        alert(abc);
        alert(ceshi);

=> my-class-abc

=> my\-class\-abc

var abc = 'my\-class\-abc';
        var ceshi = abc.replace(/-/g, '\\-');
        alert(abc);
        alert(ceshi);

=> my-class-abc

=> my\-class\-abc

示例8：

改变函数执行环境

示例代码：

function changeFuncEnv(obj, func) {

return function () {//不用function包装，会立刻执行func函数。且不可接受自定义参数。

func.apply(obj, arguments);

}

示例9：

得到浏览器宽高

示例代码：

function getBorwerSize() {
            var w3cDom = document.documentElement;
           return {
               'width': window.innerWidth || (w3cDom && w3cDom.clientWidth) || document.body.clientWidth,
               'height': window.innerHeight || (w3cDom && w3cDom.clientHeight) || document.body.clientHeight
           };
        }

示例10：

基本的nodeType

ELEMENT_NODE: 1,
       ATTRBUTE_NODE: 2,
       TEXT_NODE: 3,
       CDATA_SECTION_NODE: 4,
       ENTITY_REFERENCE_NODE: 5,
       ENTITY_NODE: 6,
       PROCESSING_INSTRUCTION_NODE: 7,
       COMMENT_NODE: 8,
       DOCUMENT_NODE: 9,
       DOCUMENT_TYPE_NODE: 10,
       DOCUMENT_FRAGMENT_NODE: 11,
       NOTATION_NODE: 12

示例11：

线性遍历节点

function walkDOMLinear(node, func) {
           node = node || doucment;
           var nodes = node.getElementsByTagName('*');
           for (var i = 0; i < nodes.length; i++) {
               func.call(nodes[i]);
           }
       }

示例12：

深度递归遍历节点

function walkDOMRecursive(node, depth, func) {
           var root = node || window.document;
           var node = root.firstChild;
           func.call(root, depth++);
           if (node) {
               walkDOMRecursive(node, depth, func);
               node = node.nextSibling;
           }
       }

示例13：

深度递归遍历节点属性（未验证）

function walkDOMAttrRecursive(node, depth, func) {
           var root = node || window.document;
           var node = root.firstChild;
           if (root.attributes) {
               for (var i = 0; i < root.attributes.length; i++) {//将属性节点视为普通节点，遍历
                    func(root.attributes[i], depth);
               }
           }

　　　　depth++;
           while (node) {
               walkDOMAttrRecursive(node, depth, func);
               node = node.nextSibling;
           }
       }

巴特西

2015-02-07——js笔记

最新文章

热门文章