[JS] JavaScript由浅入深(1) 基本特性

1.全局变量的特性:

  在函数体内直接写的变量(未用var标志)自动升级为全局变量。

        (function func() {
            i = 100;
        }());
        alert(i);

  非常不建议不写var.

        var num = 1;
        (function func() {
            i = 100;
        }());
        delete i;
        delete num;
        if (typeof i != "undefined") alert(i);
        if (typeof num != "undefined") alert(num);

  

 

2.DOM操作

  a.什么是DOM(Document Object Model),文档对象模型。包括元素节点,文本节点,属性节点和注释节点。

  b.DOM操作:

        HTML:write(),innerHTML,innerText,getElementById()

        CSS:

    <div>text</div>
    <script>
        var e = document.getElementsByTagName('div')[0];
        e.style.background = 'blue';
    </script>

        Event:事件有4种添加方式。

        所有事件:事件

 

3.异常:

try {
     throw 'exception happend';
} catch (e) {
      alert(e);
} 

  

4.类型:

  JS中5种基本类型:string number boolean undefined null  和一个复杂类型:object

  注意:

    typeof null 是object。

    因为null类型只有一个值null,null即代表一个类型,又代表一个空对象的指针。

    因为undefined类型只有一个值undefined,undefined代表一个类型,又代表一个未定义的变量.

  

    typeof Object 是function

    Object Function String都是构造函数。(推荐以后构造函数名Pascal命名,方法Camel命名)

 

5.内置对象

  JS中有7个Number String Date Array Boolean Math RegExp默认构造函数。通过new关键字,可以定义对应的对象。

    注意:

    prototype是用来向对象添加属性和方法。

    constructor是指向函数本身的指针。

 

6.事件

事件流:

  事件流是指在页面中接受事件的顺序。

  事件冒泡指从最具体的节点到最不具体的节点,事件捕获和事件冒泡完全相反。

事件对象:

  触发DOM事件时,会产生事件对象。

  type:事件类型      target:相当于sender      stopPropagation():阻止事件冒泡    preventDefault():阻止事件默认行为(如:a标签默认点击跳转事件)

添加事件:

  addEventListener(事件名,函数,是否冒泡)

  attachEvent(on事件名,函数)

  on事件 = 函数

a.直接在html上

    <div onclick="func()">text</div>
    <script>
          function func() {
            //todo
          }
    </script>

b.DOM0级处理

    <div >text</div>
    <script>
        var e = document.getElementsByTagName('div')[0];
        e.onclick = func;
        function func() {
            //todo
        }
    </script>

c.DOM2级处理

    <div >text</div>
    <script>
        var e = document.getElementsByTagName('div')[0];
        e.addEventListener('click', func);
        function func() {
            //todo
        }
    </script>

d.IE8以下

    <div >text</div>
    <script>
        var e = document.getElementsByTagName('div')[0];
        a.attachEvent('onclick', func);
        function func() {
            //todo
        }
    </script>

  

 

7.BOM

  BOM(BrowserObjectModel)浏览器对象模型。

  包括:windowtiminghistorylocationscreen

window:

  window对象代表浏览器窗口。DOM节点属于window对象的一个属性。所有的全局变量自动成为window对象的一个属性。

timing:

    <div>text</div>
    <div>text</div>
    <script>
        setInterval(function () {
            var e = getDivs()[0];
            e.innerHTML = new Date().toLocaleString();
        }, 500);

        setTimeout(function() {
            var e = getDivs()[1];
            e.innerHTML = new Date().toLocaleString();
        }, 500);

        function getDivs() {
            return document.getElementsByTagName('div');
        }
    </script>

 

8.DOM控制HTML:

  增:document.createElement(tagName);

  删:element.removeChild(element);

  改:element.setAttribute(attrName, attrValue);

  查:

    document.getElementById(elementId);     element.parentNode;    element.childNodes;

    document.getAttribute(attrName);

 

9.prototype(原型)

   除了基本类型外,都有prototype属性。

   prototype(包括原型链)中的属性会直接继承到对象上。

  

10.call和apply

  当用call和apply调用方法时,方法中的this可以由我们指定。

        function func(a, b) {
            this.sum = a + b;
            return this;
        }
        var o1 = {};
        var o2 = {};
        func.call(o1, 3, 5);
        func.apply(o2, [3, 4]);
        alert(o1.sum);
        alert(o2.sum);

 

时间:

  GMT(Greenwich Mean Time)——格林尼治标准时间,世界基准时间

  UTC 这几个字母是英文Coordinated Universal Time 和法语Temp UniverselleCoordinee 的混合体。世界时。原子时。

 

posted @ 2015-07-08 16:19  Never、C  阅读(718)  评论(2编辑  收藏  举报