javascript笔记

函数的两个附件参数：this 和 arguments

this 的值取决于调用的模式

函数的四种调用模式

1.方法调用模式

　　当函数是对象的一个属性时，那么该函数就是该对象的方法，this指向/绑定到该对象。

2.函数调用模式

　　当函数不是对象的一个属性时，那么该函数的this指向全局对象window，（程序设计的一个错误），在对象里面可以使用变量存储this对象来操作。

3.构造器调用模式

　　function Person(name){
　　this.name = name
　　　　}
　　var a = new Person('lisq')
这里this就指向a

4.Apply调用模式

主要有2个参数，跟call一样，第一个参数是（this指向的对象）[如果为null，则是当前调用对象本身，但如果指定了对象，那就是指定的对象]，第二个参数为数组参数，call的为普通参数，这是跟apply调用不同的地方。

如果this指向对象，其实就是构造模式来，如果是null，则是函数调用模式。

function MyObject(name){ 
    this.name=name || 'MyObject'; 
    this.value=0; 
    this.increment=function(num){ 
    this.value += typeof(num) === 'number' ? num : 0; 
 }; 
     this.toString=function(){ 
 return '[Object:'+this.name+' {value:'+this.value+'}]'; 
 } 
     this.target=this; 
 } 
 function getInfo(){ 
     return this.toString(); 
 } 
 var myObj=new MyObject(); 
 alert(getInfo.apply(myObj));//[Object:MyObject {value:0}],this指向myObj ，其实就是构造模式嘛，指向调用者
 alert(getInfo.apply(window));//[object Window],this指向window ，其实就是函数调用模式嘛 ，试试把window换成null试试，调用者也是window哦！！

如果你还不明白，查看http://www.jb51.net/article/29260.htm

HTML DOM

一、节点

节点类型

只有前几个有用

1.Node.ELEMENT_NODE 元素节点,为1

2.Node.ATTRIBUTE_NODE 属性节点,为2

3.Node.TEXT_NODE 文本节点,为3

可以通过 node.type == 1||2||3 来判断所获得节点是什么类型

节点的属性方法

nodeName

nodeValue

nodeType

owerDocument

firstChild

lastChild

chidNodes

previousSibling

nextSibling

attributes

hasChidNodes()

appendChild(node)

removeChild(node)

replaceChild(newNode,oldNode)

insertBefore(newNode,refNode)

处理特殊

getNamedItem(name)

removeNameItem(name)

setNamedItem(name)

item(pos)

访问指定节点

1.getElementByTagName()

2.getElementByName()

3.getElementById()

创建节点

1.createElement()

2.createTextNode()

3.appendChild()

4.createDocumentFragment()

操作节点

1.removeChild()

2.replaceChild()

3.insertBefore()

节点关系
// 父节点
someNode.parentNode
// 子节点
someNode.childNodes
// 子节点个数
someNode.childNodes.length
// 第一个子节点
someNode.firstChild
// 最后个子节点
someNode.lastChild
// 上一个同胞节点
someNode.previousSibling
// 下一个同胞节点
someNode.nextSibling

// 仅元素节点 IE9 / chrome / firefox

// 子节点个数
someNode.childElementCount
// 第一个子节点
someNode.firstElementChild
// 最后个子节点
someNode.lastElementChild
// 上一个同胞节点
someNode.previousElementSibling
// 下一个同胞节点
someNode.nextElementSibling
操作节点
// 向节点的子节点列表的末尾添加新的子节点
someNode.appendChild(newchild)
// 在已有的子节点前插入一个新的子节点
someNode.insertBefore(newchild, refchild)
// 将某个子节点替换为另一个
someNode.replaceChild(new_node, old_node)
// 从子节点列表中删除某个节点
someNode.removeChild(node)
// 创建指定的节点的精确拷贝
someNode.cloneNode(include_all)

二、Style css样式对象

①单样式

Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问Style 对象。

使用Style 对象属性的语法：

document.getElementById("id").style.property="值"

Style 对象的属性：

②多样式

cssText

cssText属性可以为某个元素书写一个新的Css样式．可以批量更改元素的各个外观属性．

区别

2010-04-09 11:02 style、currentStyle、getComputedStyle区别介绍样式表有三种方式

      内嵌样式（inline Style） ：是写在Tag里面的，内嵌样式只对所有的Tag有效。

     内部样式（internal Style Sheet）：是写在HTML的<head></head>里面的，内部样式只对所在的网页有效。

      外部样式表（External Style Sheet）：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。

     最常用的是style属性，在JavaScript中，通过document.getElementById(id).style.XXX就可以获取到XXX的值，但意外的是，这样做只能取到通过内嵌方式设置的样式值，即style属性里面设置的值。

   解决方案：引入currentStyle,runtimeStyle,getComputedStyle

   style                标准的样式！可能是由style属性指定的！ 
     runtimeStyle    运行时的样式！如果与style的属性重叠，将覆盖style的属性！
    currentStyle   指 style 和 runtimeStyle 的结合！

    通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了（仅限IE）

   如：document.getElementById("test").currentStyle.top

   要兼容FF，就得需要getComputedStyle 出马了

   注意:getComputedStyle是firefox中的，

           currentStyle是ie中的.

比如说

<style>

     #mydiv {

            width : 300px;

     }

</styke>

则:

var mydiv = document.getElementById('mydiv');

if(mydiv.currentStyle) {

      var width = mydiv.currentStyle['width'];

      alert('ie:' + width);

} else if(window.getComputedStyle) {

      var width = window.getComputedStyle(mydiv , null)['width'];

      alert('firefox:' + width);

}

另外在FF下还可以通过下面的方式获取

document.defaultView.getComputedStyle(mydiv,null).width

window.getComputedStyle(mydiv , null).width

三、EVENT 事件

1.事件捕获

从触发事件源向改事件源的最低层捕获事件

2.事件冒泡

从最低层元素上最顶层元素触发事件

3.事件目标（事件对象javascript的一种结构）

传入event事件对象

event.target == this 来判断是否为当前触发事件对象

事件委托就是利用上面所说的

html结构为：
ul > li > a

$('ul').click(function(event){
     var target = event.target;
     $(target).toggleClass('active');
 });

阻止事件冒泡

event.stopPropagation()

阻止默认事件

event.preventDefault()

键码转化

document.onkeydown = keyDown
浏览器执行该语句时，无论按下键盘上的哪个键，都将执行KeyDown函数；
function keyDown(e)
变量e表示发生击键事件；
IE：event.keyCode
FF：e.which
获取该键的索引值；
String.fromCharCode()
将索引值转化成该键的字母或数字值；

======== 
document.onkeydown = keyDown;
        function keyDown(e){
            var e = e || event,
                keycode = e.which || e.keyCode,
                keyname = String.fromCharCode(keycode);
            document.getElementsByName("keycode")[0].value = keycode;
            document.getElementsByName("keyname")[0].value = keyname;
        }

javaScript数组去重函数

unique 函数算法：

将 [数组元素类型+数组元素值] 作为 temp 对象的下标，对象中拥有相同下标的元素将被覆盖，

最终将 temp 对象中拥有不同下标的元素 push 到数组 newArray 并返回！

Array.prototype.unique = function(){
            var newArray = [],
                temp = {};
            for(var i = 0; i < this.length; i++){
                temp[typeof(this[i])+this[i]] = this[i];
            }
            for(var j in temp){
                newArray.push(temp[j]);
            }
            return newArray;
        };
        function newArray(){
            var arrayData = document.getElementById("arrayData");
            arrayData.value = arrayData.value.split(",").unique();
            alert("数组去重成功！");
        }

js去左右空格

第一种：这种是大多数人都会写的，也是流传最多的代码了吧？

JavaScript代码
String.prototype.trim = function() {  
    //return this.replace(/[(^\s+)(\s+$)]/g,"");//會把字符串中間的空白符也去掉  
    //return this.replace(/^\s+|\s+$/g,""); //  
    return this.replace(/^\s+/g,"").replace(/\s+$/g,"");  
}  
第二种：来自motools：

JavaScript代码
function trim(str){  
    return str.replace(/^(\s|\xA0)+|(\s|\xA0)+$/g, '');  
}  
第三种：这是jQuery的，jquery的方法类似于第一种：

JavaScript代码
function trim(str){  
    return str.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,'');  
}  
 

第四种是来自所摘博客中最写的：Steven Levithan 在进行性能测试后提出了在JS中执行速度最快的裁剪字符串方式，在处理长字符串时性能较好：

JavaScript代码
function trim(str){  
    str = str.replace(/^(\s|\u00A0)+/,'');  
    for(var i=str.length-1; i>=0; i--){  
        if(/\S/.test(str.charAt(i))){  
            str = str.substring(0, i+1);  
            break;  
        }  
    }  
    return str;  
}

...等待更新