zoukankan      html  css  js  c++  java
  • JavaScript 杂记

    // version 1.0.0 create 2017-05-22
    /**
     * JavaScript 运算符
     */
    // instanceof
    var box = {
        color: "red"
    };
    box instanceof Array; // false
    var box = [1, 2];
    box instanceof Array; // true
    
    /**
     * JavaScript 函数
     */
    // 用变量初始化函数
    var box = function(num1, num2) {
        return num1 + num2;
    };
    box(1, 2); // 3
    
    // 函数可以传递函数
    function mySum(num) {
        return 10 + num;
    }
    function box(mySum, num) {
        return mySum(num);
    }
    box(mySum, 10); // 20
    
    // 函数递归 arguments.callee()
    function box(num) {
        if (num == 1) {
            return 1;
        } else {
            return num * arguments.callee(num - 1);
        }
    }
    box(5); // 120
    
    // apply()
    function box(name, age) {
        return name + age;
    }
    function sum(name, age) {
        // this表示window作用域
        // []表示传递的参数 可以用arguments代替
        // box.apply(this, [name, age]) 等价于 box.apply(this, arguments)
        return box.apply(this, [name, age]);
    }
    // box.length 表示函数接收的参数个数
    box.length; // 2
    sum("test", 18); // "test18"
    
    // call()
    function box(name, age) {
        return name + age;
    }
    function sum(name, age) {
        return box.call(this, name, age);
    }
    sum("test", 18); // "test18"
    
    var color = "红色";
    var box = {
        color: "蓝色"
    };
    function sayColor() {
        return this.color;
    }
    sayColor.call(window); // "红色"
    sayColor.call(box); // "蓝色"
    
    /**
     * JavaScript 变量
     */
    // 全局变量 也是window的属性
    var color = 'red';
    this.color; // "red"
    window.color; // "red"
    
    window.color = 'green';
    this.color; // "green"
    color; // "green"
    
    // 局部变量
    var box = {
        color: 'blue',
        getColor: function() {
            // this是box对象
            return this.color;
        }
    };
    box.color; // "blue"
    box.getColor(); // "blue"
    window.color; // "green"
    window.box.color; // "blue"
    // this是window对象
    this.color; // "green"
    this.box.getColor(); // "blue"
    
    /**
     * JavaScript 作用域
     */
    function box() {
        var outer = "box内全局作用域"; 
        (function() {
            // 自我执行的匿名函数 私有作用域
            var inner = "box内局部作用域";
            console.log("in outer: " + outer); // in outer: box内全局作用域
            console.log("in inner: " + inner); // in inner: box内局部作用域
        })();
        console.log("out outer: " + outer); // out outer: box内全局作用域
        console.log("out inner: " + inner); // Uncaught ReferenceError: inner is not defined
    }
    box();
    
    function Box() {
        // Box 私有变量
        var age = 100;
        // Box 私有函数
        function run() {
            return "运行中";
        }
        // Box 对外可见的公有接口
        this.publicFun = function() {
            return age + run();
        }
    }
    var box = new Box();
    box; // Box {publicFun: function(), __proto__: Object}
    box.publicFun(); // "100运行中"
    
    // if(){} for(){} 函数的()和{}没有封闭作用域 其中定义的变量为全局变量
    var color = "red";
    console.log(color); // red
    console.log(box); // undefined
    if (true) {
        var color = "yellow";
        var box = "circle";
    }
    console.log(color); // yellow
    console.log(box); // circle
    
    var i = -1;
    console.log(i); // -1
    console.log(j); // undefined
    for(var i = 0, j = 0; i < 1; i++, j++){
        console.log(i); // 0
        console.log(j); // 0
    }
    console.log(i); // 1
    console.log(j); // 1
    
    // JavaScript Array 对象
    var box = [5, 3, 4, 2, 1];
    // sort() 按字母顺序对数组中的元素进行排序
    box.sort(); // [1, 2, 3, 4, 5]
    // push() 向数组的末尾添加一个或更多元素,并返回新的长度。
    box.push(6); // 6
    box; // [1, 2, 3, 4, 5, 6]
    
    /**
     * JavaScript 操作 DOM 对象
     */
    /*
     * 文档对象模型(Document Object Model,简称DOM)
     */
    // 确认对话框 有确定和取消两个按钮
    if (confirm("请选择!")) {
        console.log("刚刚你选择的是确定按钮");
    } else {
        console.log("刚刚你选择的是取消按钮");
    }
    // 输入提示框
    // 第一个参数是说明文字 第二个参数是默认值 返回结果是输入的内容
    var box = prompt("请输入一个数字", 0);
    if (box) {
        console.log("你刚刚输入的内容是: " + box);
    } else if (box == null) {
        console.log("你刚刚取消了输入!");
    } else if (box == "") {
        console.log("你刚刚什么也没有输入!");
    } else {
        console.log("你怎么进来的?");
    }
    // 打印
    print();
    
    /*
     * 重要事项:请不要混淆方法 Window.open() 与方法 Document.open(),这两者的功能完全不同。
     * 为了使您的代码清楚明白,请使用 Window.open(),而不要使用 open()。
     * window.open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
     * window.open(URL, name, features, replace)
     * URL 一个可选的字符串,声明了要在新窗口中显示的文档的 URL。如果省略了 URL 这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档。
     * name 一个可选的字符串,该字符串是一个由逗号分隔的特征列表,该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用。在这种情况下,features 将被忽略。
     * features 一个可选的字符串,声明了新窗口要显示的标准浏览器的特征。如果省略该参数,新窗口将具有所有标准特征。
     * replace 一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。true - URL 替换浏览历史中的当前条目。false - URL 在浏览历史中创建新的条目。
     */
    /*
     * 窗口特征(Window Features)
     * channelmode=yes|no|1|0    是否使用剧院模式显示窗口。默认为 no。
     * directories=yes|no|1|0    是否添加目录按钮。默认为 yes。
     * fullscreen=yes|no|1|0    是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
     * height=pixels    窗口文档显示区的高度。以像素计。
     * left=pixels    窗口的 x 坐标。以像素计。
     * location=yes|no|1|0    是否显示地址字段。默认是 yes。
     * menubar=yes|no|1|0    是否显示菜单栏。默认是 yes。
     * resizable=yes|no|1|0    窗口是否可调节尺寸。默认是 yes。
     * scrollbars=yes|no|1|0    是否显示滚动条。默认是 yes。
     * status=yes|no|1|0    是否添加状态栏。默认是 yes。
     * titlebar=yes|no|1|0    是否显示标题栏。默认是 yes。
     * toolbar=yes|no|1|0    是否显示浏览器的工具栏。默认是 yes。
     * top=pixels    窗口的 y 坐标。
     * width=pixels    窗口的文档显示区的宽度。以像素计。
    */
    
    // 打开一个新的浏览器窗口并且返回这个窗口 这个新窗口里面什么也没有
    var box = window.open();
    box; // Window {...}
    // 父页面操作子窗口
    box.alert("我是父页面操作子窗口弹出来的");
    // 给这个新窗口定义一个名字
    box.name = "newWindowTest";
    // 在这个新窗口中打开百度首页
    window.open("http://www.baidu.com/", "newWindowTest");
    // 在父页面直接打开腾讯首页
    window.open("http://www.qq.com/", "_parent");
    // 在新窗口打开网易
    window.open("http://www.sina.com.cn/", "_blank", "width=200,height=100", false);
    
    // 子窗口操作父窗口
    // 没有测试成功
    /*
    Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.
     */
    window.opener.document.write("子窗口控制该语句在父窗口输出");
    window.parent.document.write("子窗口控制该语句在父窗口输出");
    
    // screenLeft 和 screenTop 属性返回窗口相对于屏幕的 X 和 Y 坐标。
    // screenX 和 screenY 属性返回窗口相对于屏幕的 X 和 Y 坐标。
    // 所有主流浏览器都支持 screenLeft 和 screenTop 属性,Firefox 除外。
    // 所有主要浏览器都支持 screenX 和 screenY 属性,Internet Explorer 除外。
    // 兼容问题解决方案
    var leftX = typeof window.screenLeft == 'number' ? window.screenLeft: window.screenX;
    var topY = typeof window.screenTop == 'number' ? window.screenTop: window.screenY;
    // Internet Explorer 下运行
    leftX; // 6
    topY; // 60
    typeof window.screenLeft; // "number"
    typeof window.screenX; // "number"
    window.screenLeft; // 6
    // window.screenX 在 IE 中类型也为 number 但是获取的值 不正确
    // 所以只能判断 window.screenLeft 的类型是否为 number
    window.screenX; // 0
    // Firefox 下运行
    leftX; // 21
    topY; // 193
    typeof window.screenLeft; // "undefined"
    typeof window.screenX; // "number"
    window.screenLeft; // undefined
    window.screenX; // 21
    
    // innerWidth    返回窗口的文档显示区的宽度。不包含工具条与滚动条。
    // innerHeight    返回窗口的文档显示区的高度。不包含工具条与滚动条。
    // 所有主流浏览器都支持 innerWidth 和 innerHeight 属性。IE 8 及更早 IE版本不支持这两个属性。
    /*
     * compatMode 标准兼容模式
     * BackCompat:标准兼容模式关闭。BackCompat 对应 quirks mode 怪异模式。
     * 宽度 document.body.clientWidth; 高度 document.body.clientHeight;
     * CSS1Compat:标准兼容模式开启。CSS1Compat 对应 strict mode 严格模式。
     * 宽度 document.documentElement.clientWidth; 高度 document.documentElement.clientHeight;
     * 历史原因 早期的浏览器 Netscape 4 和 Explorer 4 对 CSS 进行解析时,并未遵守 W3C 标准,这时的解析方式就被我们称之为 quirks mode(怪异模式),但随着 W3C 的标准越来越重要,众多的浏览器开始依照 W3C 标准解析 CSS,仿照 W3C 标准解析 CSS 的模式我们叫做 strict mode(严格模式) 
     */
    // chrome 中运行
    window.innerWidth; // 428
    window.innerHeight; // 909
    document.documentElement.clientWidth; // 428
    document.documentElement.clientHeight; // 909
    document.body.clientWidth; // 428
    document.body.clientHeight; // 909
    document.compatMode; // "BackCompat"
    // IE11 中运行
    window.innerWidth; // 1010
    window.innerHeight; // 26
    document.documentElement.clientWidth; // 1010
    document.documentElement.clientHeight; // 26
    document.body.clientWidth; // 1010
    document.body.clientHeight; // 26
    document.compatMode; // "BackCompat"
    // IE8 中运行
    window.innerWidth; // undefined
    window.innerHeight; // undefined
    document.documentElement.clientWidth; // 1007
    document.documentElement.clientHeight; // 23
    document.body.clientWidth; // 994
    document.body.clientHeight; // 0
    document.compatMode; // "CSS1Compat"
    
    // 兼容问题解决方案
    var width = window.innerWidth;
    var height = window.innerHeight;
    if (typeof width != 'number') {
        // IE 8 及更早 IE 版本
        if (document.compatMode == 'CSS1Compat') {
            // 标准兼容模式开启
            width = document.documentElement.clientWidth;
            height = document.documentElement.clientHeight;
        } else {
            // 标准兼容模式关闭
            width = document.body.clientWidth;
            height = document.body.clientHeight;
        }
    }
    // chrome 中运行
    width; // 428
    height; // 909
    
    // IE11 中运行
    width; // 1010
    height; // 26
    
    // IE8 中运行
    width; // 1007
    height; // 23
    
    // outerWidth 属性设置或返回窗口的外部宽度,包括所有的界面元素(如工具栏/滚动)。
    // outerHeight 属性设置或返回一个窗口的外部高度,包括所有界面元素(如工具栏/滚动条)。
    // 所有主流浏览器都支持 outerWidth 和 outerHeight 属性。IE 8 及更早 IE 版本不支持该属性。
    // chrome 中运行
    window.outerWidth; // 795
    window.outerHeight; // 665
    
    // IE11 中运行
    window.outerWidth; // 1023
    window.outerHeight; // 529
    
    // window.screen 用户屏幕的信息 可以省略window前缀
    window.screen;
    // 可用的屏幕宽度
    screen.availWidth; // 1280
    // 可用的屏幕高度
    screen.availHeight; // 944
    // 屏幕宽度
    screen.width; // 1280
    // 屏幕高度
    screen.height; // 1024
    
    var myWindow = window.open('', '', 'width=200,height=200');
    // window.moveTo(x, y) 可把窗口的左上角移动到一个指定的坐标(x,y)。
    myWindow.moveTo(100, 100);
    // window.resizeTo(width, height) 调整窗口大小为指定宽高
    myWindow.resizeTo(500, 500);
    
    var myWindow = window.open('', '', 'width=200,height=200');
    // window.moveBy(x, y) 可把窗口的左上角移动到一个指定的坐标(x,y)。
    myWindow.moveBy(100, 100);
    // window.resizeBy(width, height) 根据指定的像素来调整窗口的大小。
    // width 必需。要使窗口宽度增加的像素数。可以是正、负数值。
    // height 可选。要使窗口高度增加的像素数。可以是正、负数值。
    myWindow.resizeBy(100, 100);
    
    // setTimeout() 超时调用 只执行依次
    // 第一个参数是需要执行的代码,可以是字符串,它能自动解析。
    // 第二个参数是间隔时间,单位为毫秒。
    
    // 不容易扩展
    setTimeout("console.log('Lee')", 2000); // Lee
    // 封装行不好
    function box() {
        console.log('Lee');
    }
    setTimeout(box, 2000); // Lee
    // 推荐
    setTimeout(function() {
        console.log('Lee');
    }, 2000) // Lee
    
    // 返回值是超时调用的ID
    var box = setTimeout(function() {
        console.log('Lee');
    }, 5000)
    // 取消超时调用 在五秒之内取消调用 将不再输出 Lee
    clearTimeout(box);
    
    // setInterval() 间歇调用 每设定时间后调用一次
    // 返回值是间歇调用的ID
    var box = setInterval(function() {
        console.log('Lee');
    }, 1000) // 见下
    /*
    Lee
    Lee
    Lee
    ...
    */
    //取消间歇调用 取消之后不再调用
    clearInterval(box);
    
    // window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。对象在编写时可不使用 window 这个前缀。
    location === window.location; // true
    window.document.location === window.location; // true
    
    window.location;
    
    // 重定向到百度首页
    location = "http://www.baidu.com";
    location.href = "http://www.baidu.com";
    location.assign("http://www.baidu.com");
    location.replace("http://www.baidu.com");
    
    // location.href 切换后,产生历史记录,可以退回到原页面。
    // location.replace 切换后,不产生历史记录,不可以退回到原页面。
    
    // window.history 对象包含浏览器的历史。window.history 对象在编写时可不使用 window 这个前缀。
    window.history;
    // 前一条历史记录
    history.back();
    // 后一条历史记录
    history.forward();
    // 历史记录条数
    history.length;
    // 寻找指定的历史记录
    history.go(10);
    
    // window.navigator 对象包含有关访问者浏览器的信息。window.navigator 对象在编写时可不使用 window 这个前缀。
    navigator;
    
    /*
     * 浏览器渲染引擎(又称排版引擎或内核)
     * 1.1 Trident [?tra?dnt] 又称为MSHTML。IE内核。
     * 1.2 EdgeHTML Edge内核。
     * 2. Gecko [?gek??] Firefox内核。
     * 3. Presto [?prest??] Opera前期内核(已废弃),Opera现已改用Blink内核。从下面的测试看Opera的内核是 Webkit。
     * 4. Blink 由Google和Opera开发,由webkit衍生而来。Chrome 和 Opera 内核。从下面的测试看Chrome的内核是 Webkit。
     * 5. Webkit Safari内核。从下面的测试看 Webkit 也是 Opera 和 Chrome 的内核。
     *    Webkit 包含两块内容
     *    1. WebCore 关于浏览器渲染引擎的,是由KDE所开发的KHTML的衍生产品。
     *    2. JSCore 关于脚本处理的,是由KDE所开发的KJS的衍生产品。
     */
    // 用户代理字符串
    navigator.userAgent; // 见下
    // Opera
    // "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36 OPR/44.0.2510.1449"
    
    // Chrome
    // "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.75 Safari/537.36"
    
    // Safari
    // "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2"
    
    // Firefox
    // "Mozilla/5.0 (Windows NT 6.1; rv:53.0) Gecko/20100101 Firefox/53.0"
    
    // Edge
    // "Mozilla/5.0 (Windows NT 6.1; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E; rv:11.0) like Gecko"
    // IE8
    // "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E)"
    
    // window.opera opera5开始有的一个脚本object,一个boolean的值,用来检察浏览器是否是opera。
    // 没有测试成功
    
    // 系统
    navigator.platform;
    
    // 插件
    navigator.plugins;
    navigator.plugins.length;
    
    // MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。
    // IE浏览器不支持
    navigator.mimeTypes;
    navigator.mimeTypes.length;
    
    // window.Node 节点类型值 1元素 2属性 3文本 对象在编写时可不使用 window 这个前缀。
    window.Node; // function Node() { [native code] }
    Node.ELEMENT_NODE; // 1
    Node.ATTRIBUTE_NODE; // 2
    Node.TEXT_NODE; // 3
    
    // window.document 对象在编写时可不使用 window 这个前缀。
    // 在百度运行
    window.document; // #document
    document.title; // "百度一下,你就知道"
    document.URL; // "https://www.baidu.com/"
    document.domain; // "www.baidu.com"
    // 服务器端上一个URL
    document.referrer; // ""
    // 在百度>新闻运行
    window.document; // #document
    document.title; // "百度新闻搜索——全球最大的中文新闻平台"
    document.URL; // "http://news.baidu.com/"
    document.domain; // "news.baidu.com"
    // 服务器端上一个URL
    document.referrer; // "https://www.baidu.com/"
    
    // 状态栏默认值
    window.defaultStatus = "默认状态";
    // 状态栏设置值
    window.status = "状态";
    
    window.find("盒子"); // true
    
    window.onload = function() {
        // 页面加载完成后自动执行代码
    }
    
    var all = document.getElementsByTagName("*");
    console.log(all.length); // 见下
    // chrome
    // 11
    // ie11
    // 11
    // ie8 浏览器多一个节点是把<!DOCTYPE html>文档声明也算进去了
    // 12
    // Firefox/53.0
    // 11
    // 火狐浏览器的firebug打开后,会自动生成一个div,所以获取的标签会多一个 测试不成功 或许是低版本
    
    var li = document.getElementsByTagName("li");
    console.log(li.length); // 2
    console.log(li[0]); // <li>no1</li>
    console.log(li.item(0)); // <li>no1</li>
    console.log(li.item(0).innerHTML); // no1
    
    var box = document.getElementById("box");
    // 获取标签的文本,包含HTML标签
    console.log(box.innerHTML); // 我是一个盒子
    // 赋值
    box.innerHTML = "";
    console.log(box.innerHTML); // 空白
    // 获取style属性中的color值
    console.log(box.style.color); // red
    // 在chrome浏览器中运行的输出结果
    // 其他浏览器中会有差异
    console.log(box.getAttribute('style')); // color:red;
    
    console.log(box.getAttribute('class')); // box
    // class为保留字 用className代替class
    console.log(box.className); // box
    
    console.log(box.getAttribute("onclick")); // hello()
    
    box.removeAttribute("style");
    
    box.setAttribute("style", "color:blue;");
    
    // 获取元素节点的类型值
    console.log(box.nodeType); // 1
    console.log(box.getAttributeNode('style').nodeType); // 2
    console.log(box.firstChild.nodeType); // 3
    
    // 获取元素节点的标签名
    console.log(box.tagName); // DIV
    console.log(box.nodeName); // DIV
    console.log(box.getAttributeNode('style').nodeName); // style
    console.log(box.firstChild.nodeName); // #text
    
    // 获取文本节点的文本内容
    console.log(box.nodeValue); // null
    console.log(box.getAttributeNode('style').nodeValue); // color:blue;
    console.log(box.firstChild.nodeValue); // 我是一个盒子
    
    // NodeList集合 返回当前节点的所有子节点
    console.log(box.childNodes); // [text]
    
    // 获取第一个子节点
    console.log(box.firstChild); //  "我是一个盒子"
    console.log(typeof box.firstChild); // object
    
    // 获取最后一个子节点
    console.log(box.lastChild); // "我是一个盒子"
    console.log(typeof box.lastChild); // object
    
    // 返回文档对象 也就是根节点
    console.log(box.ownerDocument); // #document
    // 父节点 
    console.log(box.parentNode); // <body>...</body>
    // 前一个兄弟节点
    console.log(box.previousSibling); // #text
    // 后一个兄弟节点
    console.log(box.nextSibling); // #text
    // 集合数组 保存这个元素节点的属性列表
    console.log(box.attributes); // NamedNodeMap {0: class, 1: id, 2: name, 3: onclick, 4: style, length: 5}
    console.log(box.attributes[0]); // class="box"
    console.log(box.attributes['id']); // id="box"
    // 创建一个文本节点
    var text = document.createTextNode("测试");
    // 创建一个p节点
    var p = document.createElement("p");
    // 把文本添加到p节点里
    p.appendChild(text);
    // 添加到box的子节点列表的最后
    box.appendChild(p);
    // 在box前面添加一个节点p
    box.parentNode.insertBefore(p, box);
    var span = document.createElement('span');
    // 把文本添加到span节点里
    span.appendChild(text);
    // 把p标签替换成span标签
    box.parentNode.replaceChild(span, p)
    // true 克隆标签和其内容 false 只克隆标签
    var clone = box.previousSibling.cloneNode(true);
    box.appendChild(clone);
    var clone = box.previousSibling.cloneNode(false);
    box.appendChild(clone);
    box.removeChild(box.firstChild);
    // 获取文本并过滤掉html
    box.innerText; // "我是一个盒子"
    box.outerText; // "我是一个盒子"
    // 获取文本不过滤HTML
    box.innerHTML; // "<span>我是一个盒子</span>"
    box.outerHTML; // "<div class="box" id="box" name="box" style="color:red;" onclick="hello()"><span>我是一个盒子</span></div>"
    
    
    // normalize() 方法移除空的文本节点,并连接相邻的文本节点。不知道怎么测试
    box.normalize();
    
    var box = document.getElementById("box");
    box.childNodes; // ["我是一个盒子"]
    box.childNodes.length; // 1
    // 把前三个字符分离出来成一个新的节点
    box.childNodes[0].splitText(3); // "个盒子"
    box.childNodes; // ["我是一", "个盒子"]
    box.childNodes.length; // 2
    
    var box = document.getElementById("box");
    box.childNodes; // ["我是一个盒子"]
    // 把前三个字符删除
    box.childNodes[0].deleteData(0, 3);
    box.childNodes; // ["个盒子"]
    
    var box = document.getElementById("box");
    box.childNodes; // ["我是一个盒子"]
    // 在第一个字符前面插入hello
    box.childNodes[0].insertData(0, 'Hello');
    
    
    var box = document.getElementById("box");
    box.childNodes; // ["我是一个盒子"]
    // 把第0个到2个替换成miss
    box.childNodes[0].replaceData(0, 2, 'miss');
    box.childNodes; // ["miss一个盒子"]
    
    var box = document.getElementById("box");
    box.childNodes; // ["我是一个盒子"]
    // 获取第0个到2个字符
    box.childNodes[0].substringData(0, 2); // "我是"
    box.childNodes; // ["我是一个盒子"]
    
    // 每次刷新,都让box处于可见范围内
    box.scrollIntoView();
    
    // children会忽略文本节点
    box.children; // ["<span>我是一个盒子</span>", "<span></span>"]
    box.children.length; // 2
    
    // childNodes不忽略文本节点
    box.childNodes; // ["  我是一个盒子  ", "<span>我是一个盒子</span>", "  我是一个盒子  ", "<span></span>", "    "]
    box.childNodes.length; // 5
    
    // 不忽略文本节点
    var p = box.firstChild; // "  我是一个盒子  "
    
    // 忽略文本节点
    var pp = box.firstElementChild; // "<span>我是一个盒子</span>"
    
    // 判定 box 是不是 p 的父节点
    box.contains(p); // true
    box.contains(pp); // true
    // 火狐旧版本不支持contains() 创建了自己的方法 compareDocumentPosition(); 没有测试 
    
    document.write("测试完成");
    
    // 快速定位到指定位置进行调试
    debugger;
    
    /**
     * 通过身份证号码获取生日信息
     */
    function getBirthdayFromID(no){
        var year,month,day;
        if(no.length == 15){
            // 身份证为15位 7-12位出生年月日 比如670401代表1967年4月1日
            year = '19' + no.substr(6,2);
            month = no.substr(8,2);
            day = no.substr(10,2);
        } else if(no.length == 18){
            // 身份证为18位 7-14位出生年月日 比如19670401代表1967年4月1日
            year = no.substr(6,4);
            month = no.substr(10,2);
            day = no.substr(12,2);
        }
        return year + "-" + month + "-" + day;
    }
    
    /**
     * 获取光标所在对象的位置
     */
    function getCursorPosition() {
        
        var position = {top:0, left:0};
        
        var e = window.event;
    
        position.left = e.clientX - e.offsetX + (document.body.scrollLeft || document.documentElement.scrollLeft);
    
        position.top = e.clientY - e.offsetY + (document.body.scrollTop || document.documentElement.scrollTop);
        
        return position;
        
        /*
         * e.clientX 鼠标指针位置相对于窗口客户区域的 x 坐标。
         * e.clientY 鼠标指针位置相对于窗口客户区域的 y 坐标。
         * e.offsetX 鼠标指针位置相对于触发事件的对象的 x 坐标。
         * e.offsetY 鼠标指针位置相对于触发事件的对象的 y 坐标。
         * document.body.scrollLeft 屏幕滚动的 x 坐标,使用默认dtd。
         * document.documentElement.scrollLeft 屏幕滚动的 x 坐标,使用http://www.w3.org/TR/html4/loose.dtd。
         * document.body.scrollTop 屏幕滚动的 y 坐标,使用默认dtd。
         * document.documentElement.scrollTop 屏幕滚动的 y 坐标,使用http://www.w3.org/TR/html4/loose.dtd。
         * 
         * var myDivObj = document.getElementById("myDiv");
         * myDivObj.style.left = position.left;
         * myDivObj.style.top = position.top;
         * 
         * position:absolute;
         */
    }
  • 相关阅读:
    Oracle查看所有表空间使用情况
    Oracle版本信息查看
    Windows 7关闭和开启系统休眠
    ORACLE 创建表空间
    sp_helpdb使用
    SQL SERVER的数据类型
    博客园开通啦
    http keep alive
    android开发学习
    http与html
  • 原文地址:https://www.cnblogs.com/pumushan/p/6732757.html
Copyright © 2011-2022 走看看