js回顾

关于js执行顺序，对于主动获取文档的js需要放到文档后面，或者定义在onload属性方法里面。

1.嵌入js的3种方式：

2.数值类型，包括正数和小数

3.创建未赋值的变量是undefined，

4.document.write()和writeln()区别是：

writeln()只是在源码上换行，网页显示上并不换行，只是有空格相隔开

5.write和innerHTML的区别：

write会让内容全部重写，针对是整个文档内容，并且插入的内容支持js脚本
innerHtml：针对是某个标签内容，一般浏览器插入的内容不支持js

6.正则：

test():匹配返回true
exec():返回比配的字符串，
都可以重复调用多次匹配，需要加标识符g(比如全局匹配a的正则：/a/g
还有忽略大小写的标识符：i
多行匹配：m(需要匹配字符串中有换行符，没有这个标识符，会被认为都是一行

7.数组：

数组是可变长度的以及元素可以是不同类型的
定义数组不用指定长度，和类型，比如：new Array();
并且没有取值没有越界异常，只是返回undefined

8.typeof:获取类型；instance of:判断是否是实例

9.for in

//循环对于数组得到是下标：
a=["a","b","c",1,3,4,3];
    for(n in a){
        myPrint(n + ":-----------:" + a[n]);
    }

0:-----------:a
1:-----------:b
2:-----------:c
3:-----------:1
4:-----------:3
5:-----------:4
6:-----------:3

//对于对象的属性得到是属性的名字，获取值通过o[i]
o = {
        name : "cm",
        age : 33,
        sex : "男"
    }
    for (i in o) {
        myPrint(i + ":----"+o+"-------:" + o[i]);
    }

name:----[object Object]-------:cm
age:----[object Object]-------:33
sex:----[object Object]-------:男

10.with语句简化对象重复书写（document.write())：

with (document) {
        write("1");
        write("2");
        write("3");
    }

11.函数的三种定义：

//1.命名函数
function myf() {
        myPrint("命名函数");
    }
//2.匿名函数
    myf2 = function() {
        myPrint("匿名函数");
    }
//3.构造函数函数（F大写，最后一个参数是函数体，其他参数可以是函数参数也可以省略    
myf3=new Function("myPrint('构造函数')");
//这种方式可以执行字符串的函数体

12.返回一个函数再调用：

function reMyf() {
    alert("哈哈");
    return function() {
        myPrint("返回一个函数");
    }
}
r=reMyf();
r();

13.函数的3种调用方式：

//1.直接调用，window.可以省略，效果一样
function myf(name) {
    myPrint(name);
}
window.myf("1");
myf("1");
//2,3区别是方法名和参数方式有点差异
//2.call
myf.call(window,"call");
//3.apply
myf.apply(window,["apply"]);

call/apply这种方式的可以用来执行一个未知的函数

function myCall(arg,f){
    f.call(window,arg);
}
//这样
myCall("咿呀",function(name){
alert("我是一个未知函数--"+name);
});
//或者
function f(name){
alert("我是一个未知函数2--"+name);
}
myCall("咿呀",f);

14.date对象：（特别注意，月份的数值0-11；星期的数值0-6，并且0是周日开始）

d=new Date(2017,6,7,16,33,33);
alert(d.toString());
myPrint(d.toLocaleString());

15.对象的3种定义方式：

//1.构造函数方式
function Student(name,age){
    c=":c";//有点像私有成员，因为在外面获取不到该属性
    this.name=name;
    this.age=age;
    this.info=function(){
        alert(name+":"+age+":"+Student.b+c);
    }
    this.a=33;
    Student.b=44;//相当静态成员变量
    //相当静态方法
    Student.info2=function(){
        alert(name+"-:-"+age+":"+Student.b);
    }
}
s=new Student("w",3);
alert(s.c)//undefined
s.info();
alert(s.a);
alert(Student.b);//直接通过类名调用
Student.info2();

//2.利用Object对象的方式
s=new Object();
s.name="wc";
s.age=2;
s.i=function(){
    alert("i");
}
function fo(){
    alert("fo");
}
s.i2=fo;
s.i();
s.i2();

//3.json对象的属性名，可使用冒号也可以不用
student = {
    name : "ww",
    i : function() {
        alert("json");
    }
}
student.i();

16.获取对象属性值的两种方式：

student = {
    name : "ww",
    i : function() {
        alert("json");
    }
}
 //1.通过点
alert(student.name);
//2.通过["属性名称"]，for in循环就是通过这种方式获得属性值
alert(student['name']);

 BOM（浏览器对象，但是并没有标准化）

window：js的顶层对象，包括的属性：

document：窗口中装载的html文档
location：文档的url
navigtor:当前浏览器以及属性，名称版本平台等
screen:屏幕对象，大小
history:历史记录

window常用方法：

alert();//警告
confirm();//确认
prompt();//提示输入
关闭窗口，滑动窗口，设置定时器，打开窗口

history方法：

history.back();
history.forward();
history.go();

location方法：位置信息

screen方法：屏幕信息

DOM

1.文档由3种节点组成：

标签，文本，属性

2.获取节点：

1.通过名字获取节点
2.通过位置关系获取节点

//（注意得到是数组）只有一个，获取第一个
document.getElementsByTagName("table")[0[;
//根据id得到唯一一个
var ta = document.getElementById("ta");

补充：关于获取文档节点注意几点：

a.获取的文档节点是否已经加载完成

b.根据位置关系获取的节点，特别是换行符也是作为节点出现的，有些标签是显示效果是可以自动换行的，但是源码中格式化的时候也是有换行的。

对于主动执行js,获取节点前，需要确保文档已经加载：
1.将该js写在html文档下面
2.将该js写在onload事件中（window.onload=function(){...}）

补充：设置获取文本值只有少部分标签通过text(比如：option），一般都可以采用innerHTML方式(而且很多是必须的，比如：table ,row cell。

2.1根据位置获取节点：

var fdiv = document.getElementById("fdiv");
fdiv.parentNode;//父节点
fdiv.previousSibling;//上一个兄弟节点（nextSibling下一个兄弟节点）
fdiv.firstChild;//第一个子节点
fdiv.lastChild);//最后一个子节点
fdiv.childNodes);//所有子节点
fdiv.firstChild.nextSibling;//第一个子节点的下一个节点
fdiv.lastChild.previousSibling;

//特别注意：获取兄弟和子节点时，隐藏的换行符也会被认为是节点，获取父节点则不会
//比如fdiv的父节点是onediv;它的第一个子节点却是换行符，需要获取文档上显示的第一个子节点的方式：firstChild.nextSibling;
<div class="onediv">
<div id="fdiv">
<div>兄弟1</div>
<div>兄弟2</div>
</div>
</div>

补充：有说法低版本IE不认换行符是第一个节点（未作测试），采用IE11谷歌都认为换行符是节点

2.2对于js程序处理表格文档结构的表格体会默认添加tbody标签来处理

//网页编写中结构
<table id="ta">
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>Alaska</td>
        </tr>
</table>
//系统认为的结构是：
<table id="ta">
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>Alaska</td>
        </tr>
    </tbody>
</table>

3.专门获取表单的方式：

document.form[0]//获取第几个表单

3.1获取表单属性和表单控件

<form action="www.baidu.com" method="get" target="_self">
        <input name="button" type="button" value="button" />
        <input name="reset" type="reset" value="reset" />
        <input name="checkbox" type="checkbox" value="aa" />
        <input name="password" type="password" value="aa" />
        <input name="radio" type="radio" value="aa" />
        <input name="text" type="text" value="aa" />
        <select name="select">
            <option value="a">a</option>
            <option value="b" selected>b</option>
            <option value="c">c</option>
        </select>
    </form>

window.onload=function() {
    var form = document.forms[0];
    with (console) {
        log("form", form);
        log("action", form.action);//获取action属性值
        log("method", form.method);
        log("elements", form.elements);//获得所有表单控件
        log("target", form.target);
        log("length", form.length);
       //获取表单控件3种方式
        log("elements[6].value", form.elements[6].value);//1.根据下标获取（下标从0开始）
        log("elements[select]", form.elements["select"]);//2.根据控件id/name获取
        log("form.select", form.select);//3.根据控件id/name获取
        form.button.onclick = function() {
            form.submit();
        } }}

4.获取列表框/下拉列表属性和文本值

<form action="www.baidu.com" method="get" target="_self">
        <select name="select" size="3" >
            <option value="a">a</option>
            <option value="b">b</option>
            <option value="c">c</option>
            <option value="d">d</option>
            <option value="e" selected>e</option>
            <option value="f">f</option>
        </select>
    </form>

（列表框和下拉列表框的区别是size的值是否为1）

select = document.getElementsByName("select")[0];
    with (console) {
        //列表框的属性
        log("form", select.form);//所在的表单对象
        log("length", select.length);//选项的长度
        log("options", select.options);//选项数组
        log("selectedIndex", select.selectedIndex);//选中项的索引（从0开始的）
        log("type", select.type);//是否多选
    }
    options = select.options;
    with (console) {     
        for (i=0;i<options.length;i++) {
            log("option_" + i, options[i]);
            //选项的属性
            log("option_" + i, options[i].defaultSelected);//默认是否是选中的
            log("option_" + i, options[i].index);//选项的索引
            log("option_" + i, options[i].selected);//是否是选中的
            log("option_" + i, options[i].text);//选择的文本
            log("option_" + i, options[i].value);//选项value值
        }

form <form action=​"www.baidu.com" method=​"get" target=​"_self">​…​</form>​
length 6
options (6) [option, option, option, option, option, option, selectedIndex: 4]
selectedIndex 4
 type select-one

5.对表格的获取操作

表格的结构：标题（caption），表格头（thead)，表格体(tbody)，表格脚(tfoot)

<table border="1">
        <caption>标题</caption>
        <thead>
            <tr>
                <th>00</th>
                <th>01</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>11</td>
                <td>12</td>
            </tr>
            <tr>
                <td>21</td>
                <td>22</td>
            </tr>
        </tbody>
        <tfoot>
            <tr> <td>31</td><td>32</td></tr>
        </tfoot>
    </table>

tab=document.getElementsByTagName("table")[1];
    with (console) {
        log("table",tab);
        log("caption",tab.caption);//获取标题
        log("thead",tab.thead);//下面三个属性未获取到
        log("tbodies",tab.tbody);
        log("tfoot",tab.tfoot);
        log("rows",tab.rows);//所有行
        //第二行（索引从0开始）
        row=tab.rows[1];
        log("row",row);
        log("cells",row.cells);//该行所有单元格
        log("rowIndex",row.rowIndex);//该换对应表格的索引
        log("sectionRowIndex",row.sectionRowIndex);//该行所在thead/tbody/tfoot对应的索引
        //第二个单元格
        cell=row.cells[1];
        log("cell",cell);
        log("cellIndex",cell.cellIndex);//单元格所在行的索引
        //修改
        tab.rows[3].cells[1].innerHTML="修改第4行第2列";        
    }

                   table <table border=​"1">​…​</table>​
myjs.js:248 caption <caption>​标题​</caption>​
myjs.js:249 thead undefined
myjs.js:250 tbodies undefined
myjs.js:251 tfoot undefined
myjs.js:252 rows (4) [tr, tr, tr, tr]
myjs.js:254 row <tr>​…​</tr>​
myjs.js:255 cells (2) [td, td]
myjs.js:256 rowIndex 1
myjs.js:257 sectionRowIndex 0
myjs.js:259 cell <td>​12​</td>​
myjs.js:260 cellIndex 1

6.创建（ie不支持）/添加/复制/删除节点

<ul id="mycity">
        <li>北京</li><li>北京2</li><li>北京3</li>
        <li>沙皇<a href="#">我是子节点</a></li>
        <li>肾好<a href="#">我是子节点</a></li>
        <li>/ul前，如果有换行，换行符也算节点的</li></ul>
    <input type="button" onclick="add()" value="添加节点" />
    <input type="button" onclick="clone()" value="复制节点" />
    <input type="button" onclick="remove()" value="删除节点" />

i = 0;
var city;
// 获取/创建
function add() {
    city = document.getElementById("mycity");
    // 据说ie老版本不支持这种创建方式，亲测IE.11没有问题，该参数对应的标签必须是合法存在的（li)
    li = document.createElement("li");
    li.innerHTML = "广州" + i++;
    // 添加到当前节点的最后一个子节点
    // city.appendChild(li);

    // (注意下面两个函数：调用该方法的节点必须是新节点的父节点）
    // 将新节点添加在一个节点前
    // city.insertBefore(li, city.firstChild.nextSibling);
    city.replaceChild(li, city.firstChild.nextSibling);
}
function clone() {
    // 特别注意:
    //1.节点选择时候，换行符也是节点
    //2.li标签在代码中可以不用换行（可以设置格式代码的时候不换行显示），网页显示是自动换行的
    //3.对于根据位置关系查找节点,换行符是一个大问题，毕竟不同编码格式可能有改变，最好还是采用id或者name直接定位
    cloneNode = city.lastChild.cloneNode(true);

    // 复制节点及其所有子节点（参数不为为true，那么仅仅复制<li></li>,注意：节点中的文本是子节点）
    cloneNode = city.lastChild.cloneNode(true);
    city.appendChild(cloneNode);

}
function remove() {
    city.removeChild(city.lastChild);
}

7.对于下来列表专门的创建列表方式（一般浏览器支持）

<select id="myselect">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <input type="button" onclick="addO()" value="添加节点" />
    <input type="button" onclick="removeO()" value="删除节点" />

i = 5;
var select;
// 3种方式添加列表选项
function addO() {
    select = document.getElementById("myselect");
    // 1.常规方式，可以添加各种节点
    // o = document.createElement("option");
    // o.setAttribute("value", i++);
    // o.text = i - 1;
    // select.appendChild(o);

    // 2.专门添加选项节点的方式
    // 四个参数分别表示：文本，value值，默认是否选中，当前是否选中,四个参数是可省略的，可以少于4个
    // new Option("text","value",defaultSelected,"selected");
    // o = new Option(i++, i - 1, false, true);
    // select.appendChild(o);

    // 3.采用给选项数组赋值的方式
    o = new Option(i++, i - 1, false, true);
    select.options[select.options.length] = o;
}

// 3种删除选项的方式
function removeO() {
    // 1.根据序列删除
    // select.remove(select.options.length - 1);
    
    // 2.选项置空
    // select.options[select.options.length - 1] = null;
    
    // 3.清空所有选项
    select.options.length = null;
}

8.对表格增删改：

<div id="mytable"></div>
    <input type="button" onclick="createT()" value="创建表" />
    <input type="button" onclick="delLastCell()" value="删除最后一个单元格" />
    <input type="button" onclick="delLastRow()" value="删除最后一行" />

var t;
function createT() {
    t = document.createElement("table");
    var c = t.createCaption();
    c.innerHTML = "表格标题";
    t.border = 1;
    for (i = 0; i < 10; i++) {
        // 根据索引插入一行
        var row = t.insertRow(i);
        for (j = 0; j < 3; j++) {
            // 根据索引插入单元格
            var cell = row.insertCell(j);
            cell.innerHTML = "单元格" + i + j;
        }
    }
    myt = document.getElementById("mytable");
    myt.appendChild(t);
}
// 根据索引删除最后一行
function delLastRow() {
    t.deleteRow(t.rows.length - 1);
}
// 获取最后一行，根据索引删除最后一个单元格
function delLastCell() {
    lastR = t.rows[t.rows.length - 1];
    lastR.deleteCell(lastR.cells.length - 1);
}

事件:

补充：如果代码中有多个onload只会执行最后一个

window.onload = function() {
    alert("第一个onload")
}
window.onload = function() {
    alert("第二个onload");
}
//只会执行第二个

据说IE（IE9以及之前）只支持冒泡事件;（IE11测试和谷歌火狐两种都支持) 

冒泡事件：从子元素的事件开始
捕获事件：从父元素的事件开始

补充：可以在默认事件中加：return false;取消默认行为；比如提交按钮和超链接

1.事件上静态绑定方法的2种方式：

1.1.在标签上

1.2.在dom节点的事件上

<a href="www.baidu.com" onclick="return false">取消默认事件</a>
    <input type="button" value="标签绑定事件" onclick="tagE()" />
    <button id=myB>DOM上绑定事件</button>
    <script type="text/javascript">
    function tagE(){
        alert("标签事件");
    }
    function domE(){
        alert("dom事件");
    }
    var b=document.getElementById("myB");
    b.onclick=domE;
    </script>

2.给标签动态添加事件方法

补充：ie提供了专门添加事件方法的方式，但是在IE11测试中无效了（IE9之后：attachEvent/detachEvent无效)

采用dom方式添加事件方法：

<input id="IEaddE" type="button" value="IE添加单击事件的处理方法" />
    <button id="IEdelE">IE删除该事件方法</button>

window.onload = function() {
    var addE = document.getElementById("IEaddE");
    //添加的事件名称和静态标签上（dom属性上）的事件区别是不用on前缀
    addE.addEventListener("click", show);
    // 1.添加事件可以采用静态事件绑定方法
    // document.getElementById("IEdelE").onclick = function() {
    // addE.removeEventListener("click", show);
    // }
    // 2.添加事件可以都采用动态事件绑定方法
    document.getElementById("IEdelE").addEventListener("click", function() {
                // 第三个参数可以省略，是否是捕获事件，false表示冒泡事件
                addE.removeEventListener("click", show, false);
            });
}

3.事件流的方式:

3.1下面IE和谷歌都采用冒泡的方式

<div onclick="show('fdiv')">
        <div onclick="show('sdiv')">
            <p onclick="show('p')">事件流方式</p>
        </div>
    </div>

function show(text) {
    alert(text);
}

3.2捕获型事件测试：（IE11和谷歌效果一样）

<div id="fadiv">
        <div id="sdiv">
            <p id="p">捕获事件流</p>
        </div>
    </div>

function mao(s) {
    alert(s);
}
window.onload = function() {
    var fdiv, sdiv, p;
    with (document) {
        fdiv = getElementById("fadiv");
        sdiv = getElementById("sdiv");
        p = getElementById("p");
        //特别注意对于绑定的方法如果有参数必须使用匿名函数的方式（否则直接执行了），如果没有参数可以直接使用方法名
        //最后一个参数可以省略，默认是冒泡
        fdiv.addEventListener("click", function(){mao('f')}, false);//执行顺序是：3（捕获型优先执行）
        sdiv.addEventListener("click", function(){mao("sdiv")}, true);//1
        p.addEventListener("click", function(){mao("p")}, true);//2
    }}

4.事件对象：封装了事件发生的详细信息比如：比如鼠标还是键盘事件，鼠标位置，键盘按键等

DOM浏览器可以自动将事件对象封装到事件处理函数的第一个参数（新版本的IE也可以）
老版本IE浏览器则将事件对象封装在window.event属性上。（新版IE和谷歌都是这样了）

获取事件对象两种方式（IE11和谷歌都试用）

<div onclick="showE(event)">1.通过传参的方式（必须是event关键字）显示事件对象</div>
<div id="showE">2.采用dom绑定事件处理函数的方法（不传参数）显示事件对象</div>
<div onclick="showE()">3.可以方法中直接通过window.event获取事件对象</div>

//传递event(属于window的属性）
function showE(e) {
    console.log("event", e);
}
//绑定处理函数（无参）
window.onload = function() {
    document.getElementById("showE").onclick = showE;
}

事件属性：

<div onclick="showE()">3.可以方法中直接通过window.event获取事件对象</div>
function showE() {
    console.log("event", event);
    console.log("currentTarget", event.currentTarget.tagName);
    //触发事件的标签的名字（IE11也支持）比如：div
    console.log("target", event.target.tagName);
    //谷歌也支持了
    console.log("type", event.srcElement.tagName);
    //事件的名字比如：click
    console.log("type", event.type);
}

5.鼠标常用事件（老版本IE双击事件不同，IE11和谷歌效果一一样）

<img id="img" alt="图片" src="a.jpg" />
<div id="showM">事件</div>

function showM() {
    document.getElementById("showM").innerHTML += event.type + "<br>";
}
window.onload = function() {
    var img = document.getElementById("img");
    img.onclick = showM;
    img.ondblclick = showM;
    img.onmousedown = showM;
    img.onmouseup = showM;
    img.onmouseout = showM;
    img.onmouseover = showM;

双击事件效果：

mousedown
mouseup
click
mousedown
mouseup
click
dblclick

6.键盘常用事件

<div id="showM">事件</div>
<textarea rows="10" cols="10"></textarea>

function showM() {
    document.getElementById("showM").innerHTML += event.type + "<br>";
}
window.onload = function() {
    var text = document.getElementsByTagName("textArea")[0];
    text.onkeydown = showM;
    text.onkeyup = showM;
    text.onkeypress = showM;

html事件：

    <input type="text" onchange="alert('内容改变')" onselect="alert('内容选中')"/>
    <input type="text" onfocus="alert('获得焦点')" onblur="alert('失去焦点')"/>
    <select onchange="alert('选项改变')">
    <option>1</option>
    <option>2</option>
    </select>