平时积累的一点东西

本文从ITeye导入

 

*
*                         ☆★☆★☆★☆★☆★☆JavaScript草稿集☆★☆★☆★☆★☆★☆
*
*                                               By 靖鸣君

★JQuery★<!--<script type="text/javascript" src="http:code.jquery.com/jquery-latest.js"></script>-->

★★★★★★★★公共部分★★★★★★★★
    function printf(obj) {
        document.write(obj + "<br />");
    }

    function $(obj) {
        return document.getElementById(obj);
    }
    function forEach(obj) {
        for (m in obj) {
            printf(m + ':' + obj[m]);
        }
    }
★★★★★★★★注释方式★★★★★★★★★
    *
    *    <![CDATA[
    *        
    *    ]]>
    


★★★★★★★★alertBox★★★★★★★★
    function alertBox() {
        "use strict";
        var coverLayer = document.createElement("div");
        var contentLayer = document.createElement("div");
        coverLayer.setAttribute("id", "coverLayer");
        contentLayer.setAttribute("id", "contentLayer");
        contentLayer.innerHTML = "<p style='text-align:center; color:white; font-size:40px;'>Huazhong University Of Science And Technology</p>";
        document.body.appendChild(coverLayer);
        document.body.appendChild(contentLayer);
    }
    window.onload = alertBox;



★★★★★★★★基本数据类型★★★★★★★★
    var x = parseFloat("20.33");
    var y = parseInt("11", 8);
    var z = Math.sin(Math.PI / 2);
    var s = "this is a string.";
    var a = [1, 2, 4, 3];
    var o = {first: 1, second: 2, third: 3};
    var result = o.valueOf();
    printf(result + "<br />");
    printf(1 + "2" + "<br />"); 12
    printf((a instanceof Array) + "<br />");
    printf((a.constructor) + "<br />");
    printf(o.hasOwnProperty("first") + "<br />");



★★★★★★★★arguments数组★★★★★★★★
    function plus(x, y, z) {
        "use strict";
        if (arguments.length !== 3) {
            throw new Error(arguments.callee);
        }
        return x + y + z;
    }
    plus(2, 3);
    printf(plus(2, 3, 4));
    var cal = {
        x: 1,
        y: 2,
        f: function () {
            "use strict";
            return this.x + this.y;
        }
    };
    printf(cal.f() + "<br />");

★★★★★★★★函数call和apply★★★★★★★★
        function fCall(x, y) {
            return x + y;
        }
        var res = fCall.call(cal, 1, 2);
        var res1 = fCall.apply(cal,[6, 9]);
        printf(res + "<br />");
        printf(res1 + "<br />");

★★★★★★★★类和继承★★★★★★★★
    function people(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    people.prototype.info = function () {
        printf("My name is " + this.name + ", I'm " + this.age + " years old." + "<br />");
    }
    var humen = new people("Lijing", 19, "man");
    humen.info();



★★★★★★★★IE4 && IE5 没有apply函数，利用prototype来构造这样的原型函数★★★★★★★★
    if (!Function.prototype.apply) {
        Function.prototype.apply = function (object, parameters) {
            var f = this;
            var o = object || window;
            var args = patameters || [];
            
            o._$_apply_$_ = f;
            
            var stringArgs = [];
            
            for (var i = 0; i < args.length; i++) {
                stringArgs[i] = "args[" + i + "]";
            }
            
            var arglist = stringArgs.join(",");
            var methodcall = "o._$_apply_$_(" + arglist + ");";
            var result = eval(methodcall);
            
            delete o._$_apply_$_;
            
            return result;
        };
    }



 ★★★★★★★★类属性,类方法,类私有成员,子类与超类★★★★★★★★
    function Rectangle(width, height) {
        this.width = width;
        this.height = height;
    }
    Rectangle.prototype.area = function () {
        return this.width * this.height;
    }
    function PositionRectangle(x, y, w, h) {
        Rectangle.call(this, w, h);
        this.x = x;
        this.y = y;
    }

    PositionRectangle.prototype = new Rectangle();
    delete PositionRectangle.prototype.width;
    delete PositionRectangle.prototype.height;
    PositionRectangle.prototype.constructor = PositionRectangle;

    var r = new PositionRectangle(2, 2, 2, 2);
    printf(r.area());
    printf(r instanceof PositionRectangle && r instanceof Rectangle && r instanceof Object);

    注：可以使用call和apply来调用被覆盖的函数
    such as: Circle.prototype.toString.apply(this);

★★★★★★★★非继承的扩展★★★★★★★★
    function borrowMethods(borrowFrom, addTo) {
        var from = borrowFrom.prototype;
        var to = addTo.prototype;
        for (m in from) {
            if (from[m] != "function") continue;
            to[m] = from[m];
        }
    }


★★★★★★★★确定对象类型★★★★★★★★

    △ typeof null → "object";
       typeof undefined → "undefined";
       typeof 数组 → "object";
       typeof 函数 → "function"
        
    △ instanceof 和构造函数 constructor 
      【特点：他们只能允许根据已经知道的类来进行测试对象，无法用于检查未知的对象】
        
    △ 用Object.toString()测试对象的类型
        
    △ 鸭子类型识别（Duck Typing）



★★★★★★★★渐变效果★★★★★★★★

    function setOpacity(obj, val) {
        if (document.documentElement.filters){
            obj.style.filter = "alpha(opacity=" + val + ")";
        }else {
            obj.style.opacity = val / 100;
        }
    }

    function fadeIn(obj) {
        var val = 10;
        var t = setInterval(function(){
                if (val >= 100) {
                    clearInterval(t);
                }
                setOpacity(obj, val);
                val += 10;
            }, 250);
    }

        ★★  fadeIn($("changeBox"));

        
    function setWidth(obj, val) {
        obj.style.width = parseInt(val) + "px";
    }
    function setHeight(obj, val) {
        obj.style.height = parseInt(val) + "px";
    }
    function slide(obj) {
        var val = 0;
        var t = setInterval(function(){
                if (val >= 300) {
                    clearInterval(t);
                }
                setWidth(obj, val);
                setHeight(obj, val);
                val += 10;
            }, 80);
    }

        ★★  slide($("changeBox"));

        
    function setTop(obj, val) {
        obj.style.top = parseInt(val) + "px";
    }
    function setLeft(obj, val) {
        obj.style.left = parseInt(val) + "px";
    }
    function move(obj) {
        var val = 0;
        var t = setInterval(function(){
                if (val >= 300) {
                    clearInterval(t);
                }
                setTop(obj, val);
                setLeft(obj, val);
                val += 10;
            }, 80);
    }

        ★★  move($("changeBox"));


★★★★★★★★正则表达式★★★★★★★★
    正则表达式中的特殊符号有  ^    $    .    *    +    ?    =    !    |    \    /    ()    []    {}    
    
    *|------------------------------------------------------------
    *  |    [...]        括号内任意字符
    *  |    [^...]        非上
    *  |    .            除换行符和其他Unicode行终止符之外的任意字符
    *  |    \w            任何ASCII单字字符
    *  |    \W            非上
    *  |    \s            任何Unicode空白
    *  |    \S            非上
    *  |    \d            任何ASCII数字，等价于[0-9]
    *  |    \D            非上
    *  |    \b            匹配一个词语的边界
    *  |    \B            非上
    *  |    {n, m}        匹配至少 n 至多 m 次
    *  |    {n,}        匹配至少 n 次
    *  |    {n}            匹配恰好 n 次
    *  |    ?            匹配前一项0或1次
    *  |    +            匹配前一项1次或多次
    *  |    *            匹配前一项0次或多次
    *  |    ^            匹配字符串开头
    *  |    $            匹配字符串结尾
    *  |    i            忽略大小写
    *  |    g            全局匹配
    *  |    m            多行匹配
    *  |-------------------------------------------------------------
    

    var text = "JavaScript is not Java, thanks god, that is true! Java is not Javascript!!";
    var url = "http:www.baidu.com/pic.html"
    var Reg = /java/gi;
    var RegUrl = /(\w+):\/\/([\w.]+)\/(\S*)/;
    var res = url.match(RegUrl);
    var res = text.replace(/Java/gi, "JAVA");
    var res = Reg.exec(text);
    var res = Reg.test(text);
    printf(text);
    printf(res);


★★★★★★★★drag拖动★★★★★★★★

    var box = document.getElementById("box");
    var drag = {
        start: function(evt) {
            var e = window.event || evt;
            box.startX = e.clientX - box.offsetLeft;
            box.startY = e.clientY - box.offsetTop;
            document.onmousemove = drag.ondrag;
            document.addEventListener ? document.addEventListener("mouseup",drag.stop,false) : document.attachEvent("onmouseup",drag.stop);
        },
        ondrag: function(evt) {
            var e = window.event || evt;
            with(box.style) {
                position = "absolute";
                left = e.clientX - box.startX + "px";
                top = e.clientY - box.startY + "px";
            };
        },
        stop: function() {
            document.onmousemove = "";
            document.detachEvent ?  document.detachEvent("onmouseup",drag.start) : document.removeEventListener("mouseup",drag.start,false);
        },
        init: function() {
            box.addEventListener ? box.addEventListener("mousedown",drag.start,false) : box.attachEvent("onmousedown",drag.start);
        }
    }
    drag.init();


★★★★★★★★浏览器Location和History★★★★★★★★
Location: protocol + host + pathname + search
printf(document.location == document.URL); true

在大多数情况下，document.location和location.href是相同的，但是，当存在服务器重定向时，
document.location包含的是装载的URL，而location.href包含的则是原始请求的文档的URL

    |-------self, window
    |
    |-------navigator
    |
    |-------frames[]        |------forms[]--------elments[]------options[]
    |                       |
    |-------location        |------anchors[]
    |                       |
    |-------document--------|------links[]
    |                       |
    |-------history         |------images[]
    |                       |
    |-------screen          |------applets[]


for(m in navigator){printf(m + ":" + screen[m]);}

    printf(window.screenX);
    printf(window.screenY);
    printf(window.outerWidth);
    printf(window.outerHeight);
    printf(window.innerWidth);
    printf(window.innerHeight);
    以上属性IE7下没有
    printf("");
    printf(screen.width);
    printf(screen.height);
    printf(screen.availWidth);
    printf(screen.availHeight);


    子窗口和父窗口的相互控制
    function openWin() {
        childWin = window.open("javascript:'<h1>hello</h1>'", "newWin", "height=0,width=0");
        var val = 0;
        var t = setInterval(function(){
            if (val > 400){
                clearInterval(t);
            }
            childWin.resizeTo(val,val);
            childWin.moveTo(val,val);
            val += 10;
        },100);
        childWin.opener.focus();
        childWin.opener.close();
    }
    function closeWin() {
        childWin.close();
    }
    
    document.onclick = openWin;
    document.onkeydown = closeWin;


★★★★★★★★ERROR提示★★★★★★★★

    window.onerror = function (msg, url, line) {
        alert("Wow..my gosh!!! You got an error.\n\n" + "【Error】: " + msg + "\n【url】: " + url + "\n【line】: " + line);
    }


★★★★★★★★document★★★★★★★★

    帧结构演示
    <html>
    <frameset cols="200,*">
      <frame src="./gustbook.html">
      <frame src="/gustbook.html" name="view_frame">
    </frameset> 
    </html>


    function w() {
        printf("something");
    }
    setTimeout(w,1000); 覆盖原来的文本
    注：一个文档绝不应该从时间句柄中调用他自己的write()方法


    ★document.open
    功能：打开一个新文档，并擦除当前文档的内容。
    语法：document.open(mimetype,replace)
    参数：

    mimetype：可选。规定正在写的文档的类型。默认值是"text/html"。 
    replace：可选。当此参数设置后，可引起新文档从父文档继承历史条目。 
    注1：open()方法将擦除当前HTML文档的内容，开始一个新的文档，新文档用write()方法或writeln()方法编写。
    注2：调用open()方法打开一个新文档并且用write()方法设置文档内容后，必须记住用close()方法关闭文档，并迫使其内容显示出来。

    注3：属于被覆盖的文档的一部分的脚本或事件句柄不能调用该方法，因为脚本或事件句柄自身也会被覆盖。
    
    ★document.close
    功能：close()方法可关闭一个由open()方法打开的输出流，并显示选定的数据。
    语法：document.close()
    参数：无。

    注：该方法将关闭open()方法打开的文档流，并强制地显示出所有缓存的输出内容。如果您使用write()方法动态地输出一个文档，必须记住当你这么做的时候要调用close()方法，以确保所有文档内容都能显示。

    ★一旦调用了close()，就不应该再次调用write()，因为这会隐式地调用open()来擦除当前文档并开始一个新的文档。


★★★★★★★★节点类型★★★★★★★★

    |--------------------------------|
    |      接口            nodeType值 |
    |--------------------------------|
    |    Element                1    |
    |    Text                3       |
    |    Document            9       |
    |    Comment                8    |
    |    DocumentFragment    11      |
    |    Attr                2       |
    |--------------------------------|


★★★★★★★★document.documentElement★★★★★★★★
 引用的是 html
appendChild(), insetBefore(), replaceChild()
可以用document.createDocumentFragment()来创建一个DocumentFragment

    function reverse(n) {
        var f = document.createDocumentFragment();
        while (n.lastChild) f.appendChild(n.lastChild);
        n.appendChild(f);
    }


★★★★★★★★查询选定的文本★★★★★★★★

    function getSelectedText() {
        if (window.getSelection) {
            return window.getSelection().toString();
        }else if (document.getSelection) {
            return document.getSelection();
        }else {
            return document.selection.createRange().text;
        }
    }
    function start() {
        var text = getSelectedText();
        if (text) {
            $("changeBox").innerHTML = text;
            window.open("http:www.baidu.com/s?wd=" + encodeURIComponent(text));
        }
    }
    if (!document.all) {
        window.onmouseup = start;
    }else {
        document.attachEvent("onmouseup", start);
    }


    var o = $("changeBox");
    printf(o.offsetTop);
    printf(o.offsetLeft);
    printf(o.clientWidth);
    printf(o.clientHeight);
    printf(o.scrollTop);
    printf(o.scrollLeft);
    printf(o.offsetWidth);
    printf(o.offsetHeight);

★★★★★★★★Key Event and Mouse Event★★★★★★★★
    屏蔽右键菜单,可以应用到任何一个区域
    oncontextmenu="window.event.returnValue=false"
    document.onmousedown = function (e) {
        var e = window.event || e;
        if (e.button == 0) {
            document.body.style.background = "red";
        }else if (e.button == 1) {
            document.body.style.background = "blue";
        }else {
            document.body.style.background = "yellow";
        }
    }

    document.onkeydown = function (e) {
        var e = window.event || e;
        if (e.shiftKey) {
            alert("shift");
        }if (e.ctrlKey) {
            alert("ctrl");
        }else if (e.altKey) {
            alert("alt");
        }else {
            alert("others");
        }
    }



★★★★★★★★合成事件★★★★★★★★
    Document.createEvent()创建, Event.initEvent(), UIEvent.initEvent(), MouseEvent.initEvent.initMouseEvent()初始化
    dipatchEvent方法来分派事件
    IE中，使用Document.createEventObjec来创建一个新的事件对象。然后使用目标元素的fireEvent()方法来分派他
    var DataEvent = {};
    DataEvent.send = function (target, datatype, data) {
        if (typeof target == "string") target = $(target);
        if (document.createEvent) {
            var e = createEvent("Events");
            e.initEvent("dataavailable", true, false);
        }else if (document.createEventObject) {
            var e = document.createEventObject();
        }else return;
        e.datatype = datatype;
        e.data = data;
        if (target.dispatchEvent) target.dispatchEvent(e);
        else if (target.fireEvent) target.fireEvent("ondataavailable", e);
    };
    DataEvent.receive = function (target, handler) {
        if (typeof target == "string") target = $(target);
        if (target.addEventListener) target.addEventListener("dataavailable", handler, false);
        else if (target.attachEvent) target.attachEvent("ondataavaliable", handler);
    }

★★★★★★★★IE支持客户端永久性★★★★★★★★

    var username = "hustskyking";
    var password = "psw";
    var memory = $("changeBox");
    memory.style.behavior = "url('#default#userData')";
    memory.setAttribute("username", username);
    memory.setAttribute("password", password);
    memory.save('myPersistentData');
    
    var now = (new Date()).getTime();
    var expires = now + 10*24*60*60*1000;
    memory.expires = (new Date(expires)).toUTCString();


    var memory = $("changeBox");
    memory.load("myPersistentData");
    alert(memory.getAttribute("username"));
        

★★★★★★★★AJAX★★★★★★★★
    function loadXMLDoc()
    {
        var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        xmlhttp.
        xmlhttp.onreadystatechange = function ()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                $("changeBox").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "response.php?func=" + printf("Instead of origin HTML"), true);
        xmlhttp.send();
    }
    window.onclick = loadXMLDoc;



    function createXHR() {
        var aVersions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0"];
        for (var i = 0; i < aVersions; i++) {
            try {
                var oXHR = new ActiveXObject(aVersions[i]);
                return oXHR;
            }catch(oError){
                不执行任何操作
            }
        }
        throw new Error("MSXML is not installed.");
    }




在给src特性复制的同时会下载一个图像，这意味着甚至无需将该图像添加到页面中
基于图像实现跨域通信
*
*       启动并连续向服务器发送骑牛的最佳方式是什么？在有些情况下，最好是从服务器与载入一些信息，
* 以便能够快读相应用户的操；而在另外一些情况下，你可能想在不同的时间间隔内，向服务器发送
* 数据或者从服务器接收数据。


    var oImg = document.createElement("img");
    oImg.onload = function() {
        alert("Image is ready");
    }
    oImg.src = "./images/001.gif";
    document.body.appendChild(oImg);

    function createIFrame(){
        var oframe = document.createElement("iframe");
        oframe.name = "myIFrame";
        oframe.id = "myIFrame";
        oframe.style.cssText = "height:500px; width:400px; border:none";
        oframe.src = "http:jqueryui.com/demos/droppable/accepted-elements.html";
        document.body.appendChild(oframe);
    }
    createIFrame();



面向对象的Javascript
1.公共成员
function Customer() {
    this.firstName = "John";
    this.lastName = "Smith";
    this.getFullName = function () {
        return this.firstName +  " " + this.lastName;
    }
}
var john = new Customer();

2.私有变量
function Customer(firstName, lastName) {
    var _firstName = firstName;
    var _lastName = lastName;
    this.getFullName = function () {闭包
        return _firstName +  " " + _lastName;
    }
}

prototype属性
扩展类的定义
如果在prototype属性所引用的对象里没有找到，它会到这个引用对象的prototype属性里查找，如此递归查询。
Customer.prototype.getFullName = function () {
    return this.firstName + " " + this.lastName;
}

面向对象编程和继承
function Partner() {
    this.partnerId = "";
}
Partner.prototype = new Customer();

与上等价
Partner.prototype = {
    firstName: "",
    lastName: ""
}


★★★★★★★★Cookie★★★★★★★★
function setCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function deleteCookie(name) {
    setCookie(name,"",-1);
}