JavaScript的进阶篇

一、Array对象。数组对象

1）创建数组对象

//Array 对象用于在单个的变量中存储多个值。
//语法:

//创建方式1:
var a=[,,];

//创建方式2:
new Array();     //  创建数组时允许指定元素个数也可以不指定元素个数。
new Array(size);//if 1个参数且为数字,即代表size,not content
//    初始化数组对象:
    var cnweek=new Array();
        cnweek[]="星期日";
        cnweek[]="星期一";
//        ...
        cnweek[]="星期六";

new Array(element0, element1, ..., elementn)//也可以直接在建立对象时初始化数组元素，元素类型允许不同

var test=new Array(,"a",true);

创建数组的方式

归纳创建数组

var arr=[,,,];
var arr2=new Array(,,,);
var arr3=new Array(,"hello",true,[,]);
console.log(arr.length);    //
console.log(arr2.length);   //
console.log(arr3.length);   //
console.log(arr3[])    // [1,3]

// 如果采用初始化对象方式创建数组，如果里面只有一个值而已是一个数字，那么数字表示的是长度
//而不是内容
var arr4=new Array();
console.log(arr4[]);
console.log(arr4[]);   // undefined

创建数组

2）创建二维数组

var cnweek=new Array();
for (var i=;i<=;i++){
    cnweek[i]=new Array();
}
cnweek[][]="星期日";
cnweek[][]="Sunday";
cnweek[][]="星期一";
cnweek[][]="Monday";
...
cnweek[][]="星期六";
cnweek[][]="Saturday";

// 案例二
var arr2=new Array(,"hello",true,[,]);
alert(arr2[][]);
//数组对象的方法 join方法：将数组内的字符串拼接成一个字符串，join方法的对象不同于py,在js是Array
var ret=["hello","zhangsan"].join("+++++")
alert(ret)

二维数组

3）Array的对象的属性

获取数组元素的个数：length

var cnweek=new Array();
cnweek[]="星期日";
cnweek[]="星期一";
cnweek[]="星期二";
cnweek[]="星期三";
cnweek[]="星期四";
cnweek[]="星期五";
cnweek[]="星期六";
for (var i=;i<cnweek.length;i++){
  document.write(cnweek[i]+" | ");
}

//页面结果 ====》星期日 | 星期一 | 星期二 | 星期三 | 星期四 | 星期五 | 星期六 |

Array属性

4）Array对象的方法

4.1） 连接数组-join方法

//书写格式
//x.join(bystr)
//使用注解

//x代表数组对象
//bystr作为连接数组中元素的字符串
//返回连接后的字符串
//与字符串的split功能刚好相反

var arr1=[, , , , , , ];
var str1=arr1.join("-");
alert(str1);
//结果为"1-2-3-4-5-6-7" 

join方法

4.2）连接数组-concat方法

//连接数组-concat方法
//x.concat(value,...)

var a = [,,];
var a = new Array(,,);
var b=a.concat(,) ;

alert(a.toString());
//返回结果为1,2,3
alert(b.toString());
//返回结果为1,2,3,4,5

concat方法

4.3）队列和栈的增删元素的进出顺序

// 队列：先进先出  栈：先进后出==》添加元素类似追加，删除元素，删除第一个元素
var arr5=[,,];
arr5.push()             // 追加至末尾
console.log(arr5);        // [1,4,7,13]
arr5.push("hello",);
console.log(arr5);        // [1,4,7,13,"hello",7]
var ret=arr5.pop();       // 7 ===》pop,删除元素，表示删除最后一个元素
alert(ret)                // 7 打印删除的最后元素

pull和pop

var arr5=[,,];
arr5.unshift()    // 追加元素在开头
console.log(arr5)   [,,,]
arr5.shift();           // 删除第一个元素
console.log(arr5)   [,,]

unshift和shift

4.4） 数组排序-reverse sort

var arr6=[,,,];
arr6.reverse();     // 反转 [2, 3, 5, 1]
console.log(arr6)
console.log(arr6.sort())    // 顺序排队 [1, 2, 3, 5]
// 排序规则，首字母对比
var arr7=[,,,,];
arr7.reverse();     // 反转 [100, 2, 3, 5, 1]
console.log(arr7)
console.log(arr7.sort())    // 首字母顺序排队 [1, 100, 2, 3, 5]

reverse方法

正常排序规则，low版本

var arr6=[,,,,];
console.log(arr6.sort(mysort));    // [1, 2, 3, 6, 100]
function mysort(a,b) {
    if (a>b) {
        return ;
    }else if (a<b) {
        return -
    }else {
        return
 

low版排序

正常排序规则，升级版

var arr6=[,,,,];
console.log(arr6.sort(mysort));    // [1, 2, 3, 6, 100]
function mysort(a,b) {
    return a-b;
}
console.log(arr6.concat(,));      // concat 追加在末尾[1, 2, 3, 6, 100, 4, 5]

升级版排序

5）数组切面-slice

//start表示开始位置索引
//end是结束位置下一数组元素索引编号
//第一个数组元素索引为0
//start、end可为负数，-1代表最后一个数组元素
//end省略则相当于从start位置截取以后所有数组元素

var arr1=['a','b','c','d','e','f','g','h'];
var arr2=arr1.slice(,);
var arr3=arr1.slice();
var arr4=arr1.slice(,-);

alert(arr2.toString());
//结果为"c,d"
alert(arr3.toString());
//结果为"e,f,g,h"
alert(arr4.toString());
//结果为"c,d,e,f,g"

slice切片

6）删除子数组

//x. splice(start, deleteCount, value, ...)
//x代表数组对象
//splice的主要用途是对数组指定位置进行删除和插入
//start表示开始位置索引
//deleteCount删除数组元素的个数
//value表示在删除位置插入的数组元素
//value参数可以省略

var a = [,,,,,,,];
a.splice(,);
//a变为 [1,4,5,6,7,8]
alert(a.toString());
a.splice(,);
 //a变为[1,5,6,7,8]
alert(a.toString());
a.splice(,,,);
 //a变为[1,2,3,5,6,7,8]
alert(a.toString());

splice指定位置进行删除和插入

7）归纳js的数组特性

js中数组的特性
    js数组的特性,  规定是什么类型的数组,就只能装什么类型.只有一种类型.
    js中的数组特性1: js中的数组可以装任意类型,没有任何限制.
    js中的数组特性2: js中的数组,长度是随着下标变化的.用到多长就有多长.
var arr5 = ['abc',,1.14,true,null,undefined,new String(''),new Function('a','b','alert(a+b)')];
/*  alert(arr5.length);    //8
arr5[10] = "hahaha";
alert(arr5.length);     //11
alert(arr5[9]);            // undefined 

数组的特性小结

二、Windows对象

1）location 对象：window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面

location.href  获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面

常用属性和方法

2）弹出框：可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框

警告框
    警告框经常用于确保用户可以得到某些信息。
    当警告框出现后，用户需要点击确定按钮才能继续进行操作。
    语法：alert("你看到了吗？");

确认框（了解即可）
    确认框用于使用户可以验证或者接受某些信息。
    当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
    如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false
    语法：confirm("你确定吗？");

提示框（了解即可）
    提示框经常用于提示用户在进入页面前输入某个值。
    当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
    如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
    语法：prompt("请在下方输入","你的答案")

意义和语法

3）history对象

history.back()         加载 history 列表中的前一个 URL。
history.forward()      加载 history 列表中的下一个 URL。
history.go()           加载 history 列表中的某个具体页面。

url的history方法

<a href="rrr.html">click</a>
<button onclick=" history.forward()">>>></button>
<button onclick="history.back()">back</button>
<button onclick="history.go()">back</button>

示例

4）setTimeout（计时相关）

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。
语法 var t=setTimeout("JS语句",毫秒)    // 设置在多少秒后执行
clearTimeout(setTimeout_variable)        // 取消执行

setInterval()
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法：setInterval("JS语句",时间间隔)

clearInterval()
clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
语法：clearInterval(setinterval返回的ID值)

setTimeout和clearTimeout和setInterval和clearInterval

4.1）清除计时器示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除定时器示例</title>
    <script src="04.js"></script>
</head>
<body>

</body>
</html>

settime.html

function f1() {
    alert(123);
}

function clear() {
    var t = setInterval(f1, 3000);
    function inner() {
        clearInterval(t);
    }
    setTimeout(inner, 9000)
}

clear();

settime.js

5）navigator对象（了解即可）：通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。

navigator.appName　　 // Web浏览器全称
navigator.appVersion　 // Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

navigator

6）screen对象（了解即可）：屏幕对象，不常用。

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

screen

五、DOM对象，及document对象

DOM对象是什么？简单的来说，就是操作html标签的对象。

dom树是为了展示文档中各个对象之间的关系，用于对象的导航。

1）DOM节点

整个文档是一个文档节点(document对象)
每个 HTML 元素是元素节点(element 对象)
HTML 元素内的文本是文本节点(text对象)
每个 HTML 属性是属性节点(attribute对象)
注释是注释节点(comment对象)

2）节点属性

节点(自身)属性:
    attributes - 节点（元素）的属性节点
    nodeType – 节点类型
    nodeValue – 节点值
    nodeName – 节点名称
    innerHTML - 节点（元素）的文本值

导航属性:
    parentNode - 节点（元素）的父节点 (推荐)
    firstChild – 节点下第一个子元素
    lastChild – 节点下最后一个子元素
    childNodes - 节点（元素）的子节点

推荐导航属性
　　parentElement               // 父节点标签元素
　　children                    // 所有子标签
　　firstElementChild           // 第一个子标签元素
　　lastElementChild            // 最后一个子标签元素
　　nextElementtSibling       　// 下一个兄弟标签元素
　　previousElementSibling  　　// 上一个兄弟标签元素

3）节点树的层级关系

　　父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点

下图展示了节点树的一部分，以及节点之间的关系

3）直接查找：访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素：

getElementById()          根据ID获取一个标签
getElementsByTagName()    根据标签名获取标签合集
getElementsByClassName()  根据class属性获取
getElementsByName() 　    根据属性name来获取表情

<div id="div1">
    <div class="div2">i am div2</div>
    <div name="yuan">i am div2</div>
    <div id="div3">i am div2</div>
    <p>hello p</p>
</div>

<script>
   var div1=document.getElementById("div1");
////支持;
//   var ele= div1.getElementsByTagName("p");
//   alert(ele.length);
////支持
//   var ele2=div1.getElementsByClassName("div2");
//   alert(ele2.length);
////不支持
//   var ele3=div1.getElementById("div3");
//   alert(ele3.length);
////不支持
//   var ele4=div1.getElementsByName("yuan");
//   alert(ele4.length)
</script>

示例

4）间接查找标签

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

5）添加节点，删除节点，替换节点

createElement(标签名)
var divEle = document.createElement("div");
添加节点
    追加一个子节点（作为最后的子节点）
        somenode.appendChild(newnode)；
    增加的节点放到某个节点的前边。
        somenode.insertBefore(newnode,某个节点);
删除节点
    removeChild(要删除的节点)
替换节点
    somenode.replaceChild(newnode, 某个节点);

var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

createElement示例

5.1）节点的增删改查详细版

增:
    createElement(name)创建元素
    appendChild();将元素添加

删:
    获得要删除的元素
    获得它的父元素
    使用removeChild()方法删除

改:
    第一种方式:
        使用上面增和删结合完成修改
    第二中方式:
        使用setAttribute();方法修改属性
        使用innerHTML属性修改元素的内容
查
    即使用document的属性方法

增删改查

<script type="text/javascript">
//在第一个div中动态增加一个a标签. 该a标签点击之后跳转到百度首页.
    function addNode(){
        //1.获得 第一个div
        var div = document.getElementById("div_1");
        //2.创建a标签  createElement==>创建一个a标签   <a></a>
        var eleA =  document.createElement("a");
        //3.为a标签添加属性 <a href="http://www.baidu.com"></a>
        eleA.setAttribute("href", "http://www.baidu.com");
        //4.为a标签添加内容 <a href="http://www.baidu.com">百度</a>
        eleA.innerHTML = "百度";
        //5.将a标签添加到div中
        div.appendChild(eleA);
    }
    //点击后 删除div区域2
    function deleteNode(){
        //1 获得要删除的div区域
            var div = document.getElementById("div_2");
        //2.获得父亲
            var parent = div.parentNode;
        //3 由父亲操刀
            parent.removeChild(div);
    }
    //点击后 替换div区域3 为一个美女
    function updateNode(){
        //1 获得要替换的div区域3
        var div = document.getElementById("div_3");
        //2创建img标签对象 <img />
        var img = document.createElement("img");
        //3添加属性 <img src="001.jpg" />
        img.setAttribute("src", "001.JPG");
        //4.获得父节点
        var parent = div.parentNode;
        //5.替换
        parent.replaceChild(img, div);
    }
    //点击后 将div区域4 克隆一份 添加到页面底部

    function copyNode(){
        //1.获取要克隆的div
        var div = document.getElementById("div_4");
        //2.克隆 参数为true 那么克隆时克隆所有子元素. false 只克隆自己
        var div_copy = div.cloneNode(true);
        //3.获得父亲
        var parent = div.parentNode;
        //4.添加
        parent.appendChild(div_copy);
    }

</script>

示例

6）属性节点

获取文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

设置文本节点的值
var divEle = document.getElementById("d1")
divEle.innerText=""
divEle.innerHTML="<p>2</p>"

innerText和innerHTML

7） 获取值操作。elementNode.value 适用于的标签input、select、textarea

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

示例

8）js操作class属性。如：obj.style.backgroundColor="red"

8.1）对于没有中横线的CSS属性一般直接使用style.属性名即可。如：

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

示例

8.2）对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

示例

六、事件模型

1）触发事件概况

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               //练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开

onselect      文本被选中。
onsubmit      确认按钮被点击

2）触发事件的2种写法，行内写和script属性内写

<div onclick="alert(123)">点我呀</div>
<p id="abc">试一试!</p>

<script>
    var ele=document.getElementById("abc");
    ele.onclick=function(){
        alert("hi");
    };
</script>

onclick事件

3）注意：this。console.log下必须写this

<div id="abc" onclick="func1(this)">事件绑定方式1</div>
<div id="id123">事件绑定方式2</div>
<script>
    function func1(self){
        console.log(self.id)
    }

    //jquery下是$(self), 这种方式this参数必须填写;
//==============================================
    var ele=document.getElementById("id123").onclick=function(){
         console.log(this.id);
        //jquery下是$(this), 这种方式不需要this参数;
    }
</script>

console.log(this.id)注意点

4）onsubmit：（提交表单）

　　是当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.

<form id="form">
            <input type="text"/>
            <input type="submit" value="点我!" />
</form>

<script type="text/javascript">
//阻止表单提交方式1().
//onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行.

var ele=document.getElementById("form");
ele.onsubmit=function(event) {
//                alert("验证失败 表单不会提交!");
//                return false;

// 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。
 alert("验证失败 表单不会提交!");
 event.preventDefault();
}
</script>

onsubmit示例

5）Event对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.

比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode；

<div id="abc_1" style="border:1px solid red;width:300px;height:300px;">
        <div id="abc_2" style="border:1px solid red;width:200px;height:200px;"></div>
</div>
<script type="text/javascript">
    document.getElementById("abc_1").onclick=function(){
        alert('');
    }
    document.getElementById("abc_2").onclick=function(event){
        alert('');
        event.stopPropagation(); //阻止事件向外层div传播.
    }
</script>

事件传播示例

6）修理HTML DOM

改变HTML内容

　　改变元素内容的最简单的方法是使用innerHTM，innerText

改变CSS样式

改变 HTML 属性
        elementNode.setAttribute(name,value)
        elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)

创建新的 HTML 元素
        createElement(name)

删除已有的 HTML 元素
        elementNode.removeChild(node)

关于class的操作
        elementNode.className
        elementNode.classList.add
        elementNode.classList.remove

七、实例练习

练习一，模拟静态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            position: fixed;
            width: %;
            top:;
            left: ;
            height: 2000px;
            background-color: #b4b4b4;
        }
        #div2{
            position: fixed;
            width: %;
            z-index: ;
            top: ;
            left: ;
            right: ;
            bottom: ;
            background-color: red;
            opacity: 0.3;
        }
        #div3{
            height: 300px;
            width: 400px;
            background-color: blueviolet;
            position: absolute;
            top: %;
            left: %;
            z-index: ;
            margin-left: -200px;
            margin-top: -150px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div id="div1">
    <input type="button" value="click" onclick="show()">
</div>
<div id="div2" class="div hide"></div>
<div id="div3" class="div hide">
    <input type="button" value="cancel" onclick="cancel()">
</div>

<script>
    function show() {
        var ele=document.getElementsByClassName("div")
        for (var i=;i<ele.length;i++){
            ele[i].classList.remove("hide")
        }
    }
    function cancel() {
        var ele=document.getElementsByClassName("div")
        for (var i=;i<ele.length;i++){
            ele[i].classList.add("hide")
        }
    }
</script>
</body>
</html>

练习二，全选反选取消

 <button onclick="select('all');">全选</button>
     <button onclick="select('cancel');">取消</button>
     <button onclick="select('reverse');">反选</button>

     <table border="" id="Table">
         <tr>
             <td><input type="checkbox"></td>
             <td></td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td></td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td></td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td></td>
         </tr>
     </table>

<script>
    function select(choice){
        var ele=document.getElementById("Table");

        var inputs=ele.getElementsByTagName("input");
        for (var i=;i<inputs.length;i=i+){
                   var ele2=inputs[i];

            if (choice=="all"){
                ele2.checked=true;
            }else if(choice=="cancel"){
                ele2.checked=false;
            }
            else {
                if (ele2.checked){
                    ele2.checked=false;
                }else {
                    ele2.checked=true;
                }
            }
        }
    }
</script>

练习三，两级关联选择菜单

<select id="province">
    <option>请选择省:</option>
</select>

<select id="city">
    <option>请选择市:</option>
</select>

<script>
    data={"河北省":["廊坊","邯郸"],"北京":["朝阳区","海淀区"]};
    var p=document.getElementById("province");
    var c=document.getElementById("city");

    for(var i in data){
        var option_pro=document.createElement("option");
        option_pro.innerHTML=i;
        p.appendChild(option_pro);
    }

    p.onchange=function(){
        pro=(this.options[this.selectedIndex]).innerHTML;
        citys=data[pro];
        c.options.length=;

        for (var i in citys){
            var option_city=document.createElement("option");
            option_city.innerHTML=citys[i];
            c.appendChild(option_city);
        }
    }
</script>