zoukankan      html  css  js  c++  java
  • 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;

        =>  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;
                }
            }

  • 相关阅读:
    mysql分表分库 ,读写分离
    二级域名解析设置及Apache 子域名配置
    PHP错误检测
    PHP缓存技术相关
    高并发一些处理办法
    memcached 安装与简单实用使用
    数据库入门
    函数
    结构体 枚举
    c# 6大类集合
  • 原文地址:https://www.cnblogs.com/bugong/p/4280032.html
Copyright © 2011-2022 走看看