day08

1.window對(duì)象方法——定時(shí)器

JavaScript是單線程語言,所有代碼按順序執(zhí)行

1.1超時(shí)調(diào)用-setTimeout()

setTimeout(code,millisec)
功能:在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式

參數(shù)說明:
1.code：要調(diào)用的函數(shù)或要執(zhí)行的JavaScript代碼
2.millisec：在執(zhí)行代碼前需要等待的毫秒數(shù)
setTimeout方法返回一個(gè)id值，通過它取消超時(shí)調(diào)用
clearTimeout()

    <script>
        setTimeout(function(){
            alert(1);
        },2000)
    </script>

1.2.間歇調(diào)用-setInterval()

間歇調(diào)用-setInterval(code,millisec)
功能:每隔一段時(shí)間執(zhí)行一次代碼

clearInterval()
eg:num=0,max=10,每過一秒num++,當(dāng)num>max清除定時(shí)器

 <script>
      var num=0,max=10;
       var interval = setInterval(function(){
            num++;
            console.log(num)
            if(num>max){
                clearInterval(interval)
            }
       },1000)
 </script>

2.location對(duì)象

location對(duì)象提供了與當(dāng)前窗口中加載的文檔有關(guān)信息,還提供了一些導(dǎo)航的功能,他既是window對(duì)象的屬性,也是document對(duì)象的屬性唆涝。
語法：location.href
功能:返回當(dāng)前加載頁面的完成URL
location.href與window.location.href等價(jià)

語法：location.hash
功能：返回URL中的hash(#號(hào)后跟0或多個(gè)字符),如果不包含則返回空字符串

語法：location.host
功能:返回服務(wù)器名稱和端口號(hào)

語法：location.hostname
功能:返回不帶端口號(hào)的服務(wù)器名稱

語法：location.pathname
功能：返回URL中的目錄和(或)文件名

語法：location.port
功能:返回URL中指定的端口號(hào),如果沒有,返回空字符串

語法：location.protocol
功能:返回頁面使用的協(xié)議

語法:location.search
功能:返回URL的查詢字符串找都，這個(gè)字符串以問號(hào)開始。

位置操作
改變?yōu)g覽器的位置的方法:
location.href屬性
location對(duì)象其他屬性也可改變URL
location.hash
location.search
location.replace(url)

location.reload()
功能:重新加載當(dāng)前顯示的頁面
說明:
.location.reload()從緩存加載
.location.reload(true)從服務(wù)器重新加載

3.history對(duì)象

history對(duì)象保存了用戶在瀏覽器中訪問頁面的歷史記錄

語法：history.back()
功能:回到歷史記錄的上一步
相當(dāng)于是用了history.go(-1)
//-1表示前一步,-2前兩部

語法：history.go(1)
功能:回到歷史記錄的前一步
相當(dāng)于history.forward()

語法：history.go(-n)
功能:回到歷史記錄的前n部
語法:history.go(n)
功能:回到歷史記錄的后n步

4.screen對(duì)象

screen對(duì)象包含有關(guān)客戶端顯示屏幕的信息
screen.availWidth
screen.availHeight

5.navigator對(duì)象

1.掌握Navigator對(duì)象的userAgent屬性
2.掌握如何判斷瀏覽器的類型
3.掌握如何判斷設(shè)備的終端是移動(dòng)還是PC
UserAgent:用來識(shí)別瀏覽器名稱廊酣，版本能耻，引擎以及操作系統(tǒng)等信息的內(nèi)容。

   //檢測(cè)瀏覽器類型
    if(/Android|iphone|webOS/i.test(navigator.userAgent)){
        location.href="mobile.html"
    }else if(/ipad/i.test(navigator.userAgent)){
        location.href="pad.html"
    }

6.1DOM擴(kuò)展

6.1父節(jié)點(diǎn)parentNode(親爹)

  <ul>
        <li>小米手機(jī) <a href="#">刪除</a> </li>
        <li>蘋果手機(jī) <a href="#">刪除</a> </li>
        <li>華為手機(jī) <a href="#">刪除</a> </li>
    </ul>
    <script>
       var shows=document.getElementsByTagName("a");
       for(let i=0;i<shows.length;i++){
           shows[i].onclick=function(){
           this.parentNode.style.display="none";
            return false;
           }
       }
    </script>

6.2子節(jié)點(diǎn)childNodes和children的區(qū)別

childNodes,將子節(jié)點(diǎn)的背景色變?yōu)榧t色
長(zhǎng)度為7亡驰，空格也占長(zhǎng)度

<ul id="parent">
        <li>小米手機(jī)</li>
        <li>蘋果手機(jī)</li>
        <li>華為手機(jī)</li>
    </ul>
    <script>
       let parent=document.getElementById("parent");
       let childs=parent.childNodes;
       for(let i=0;i<childs.length;i++){
           if(childs[i].nodeType==1){
               childs[i].style.backgroundColor = "red";
           }
       }
    </script>
 //chrome下結(jié)果為7,IE9以下結(jié)果為3
//在chrome下將空的文本節(jié)點(diǎn),也算在內(nèi)容

children,將子節(jié)點(diǎn)的背景色變?yōu)榧t色
長(zhǎng)度為3

 <ul id="parent">
        <li>小米手機(jī)</li>
        <li>蘋果手機(jī)</li>
        <li>華為手機(jī)</li>
    </ul>
    <script>
        let childs=document.getElementsByTagName("ul")[0].children;
        for(let i=0;i<childs.length;i++){
            childs[i].style.backgroundColor="red";
        }
        console.log(childs);
    </script>

firstChild //包含所有類型的節(jié)點(diǎn)
firstElementChild //IE9以下不兼容
lastChild //所有類型的節(jié)點(diǎn)
lastElementChild //IE9以下不支持

111.png

  <ul id="parent">
                <li>小米手機(jī)</li>
                <li>蘋果手機(jī)</li>
                <li>華為手機(jī)</li>
            </ul>
            <script>
            var parent=document.getElementById("parent");
            var fc=document.getElementById("parent").firstChild;
            var fe=parent.firstElementChild;
            console.log(fc);
            console.log(fe);
            </script>

6.3兄弟節(jié)點(diǎn)

nextSibling
nextElementSibling
//IE9以下不支持
previousSibling//節(jié)點(diǎn)屬性
previousElementSibling //節(jié)點(diǎn)內(nèi)容
//IE9以下不支持

  <div>
        <p>hello 01</p>
        <p id="test">hello 02</p>
        <p>hello 03</p>
    </div>
    <script>
        let test = document.getElementById("test");
        let ps = test.previousSibling;
        let pss = test.previousElementSibling;
        console.log(ps);
        console.log(pss);
    </script>

6.4定位（只讀屬性）

offsetParent //獲取給了定位元素的父級(jí)
offsetLeft //返回元素的水平偏移位置晓猛。返回number
offsetTop //返回元素的垂直偏移位置。
offsetWidth //返回元素的寬度
offsetHeight //返回元素的高度

//css
<style>
    *{margin: 0;
      padding: 0;}
 div{
        width: 100px;
        height: 100px;
        background:red;
        margin: 100px;
        position: absolute;
        left: 100px;
        border: 10px  solid green;
        }
</style>
//html
<div id="test">
</div>
<script>
  let test=document.getElementById("test");
  let offl=test.offsetLeft;
  let offt=test.offsetTop;
  let offw=test.offsetWidth;
  let offh=test.offsetHeight;
  test.offsetWidth="200px";
  console.log(offl);
  console.log(offt);
  console.log(offw);
  console.log(offh);
</script>

6.5操作元素的屬性

 <p id="test">hello world</p>
    <script>
        var p=document.getElementById("test");
        function changeStyle(ele,attr,value){
            ele.style[attr]=value;
        }
        changeStyle(p,"backgroundColor","green")
    </script>

6.5.1獲取,設(shè)置,刪除

getAttribute(AttrName);
setAttribute(AttrName,AttrValue);
removeAttribute(AttrName);

 <p id="test" class="one">hello world</p>
    <script>
        var test=document.getElementById("test");
        test.setAttribute("class","two");
        test.removeAttribute("class");
        var cValue=test.getAttribute("class");
        console.log(cValue);
    </script>

6.6瀏覽器窗口可視區(qū)域的大小

6.6.1凡辱、對(duì)于IE9+戒职、Chrome、Firefox透乾、Opera 以及 Safari：

? window.innerHeight - 瀏覽器窗口的可見內(nèi)部高度
? window.innerWidth - 瀏覽器窗口的可見內(nèi)部寬度

6.6.2洪燥、對(duì)于 Internet Explorer 8磕秤、7、6捧韵、5：

? document.documentElement.clientHeight表示HTML文檔所在窗口的當(dāng)前高度市咆。
? document.documentElement.clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。
//沒有DOCTYPE的IE中,瀏覽器顯示窗口可以通過以下獲取
Document對(duì)象的body屬性對(duì)應(yīng)HTML文檔的<body>標(biāo)簽

 <script>
        var windowWidth=window.innerWidth;
        var windowHeight=window.innerHeight;
        var wd=document.documentElement.clientHeight;
        var ww=document.documentElement.clientWidth;
        var dh=document.body.clientHeight;
        var dw=document.body.clientWidth;
        console.log(windowWidth);
        console.log(windowHeight);
        console.log(ww);
        console.log(wd);
        console.log(dh);
        console.log(dw);
    </script>

6.7獲取網(wǎng)頁內(nèi)容的寬高

document.documentElement.scrollHeight
document.documentElement.scrollWidth

 <div>

    </div>
    <script>
        var windowWidth=window.innerWidth;
        var windowHeight=window.innerHeight;
        var dw=document.documentElement.scrollWidth;
        var dh=document.documentElement.scrollHeight;
        console.log(windowWidth,windowHeight);
        console.log(dw,dh);
    </script>

6.8文檔碎片

文檔碎片可以提高DOM操作性能

document.createDocumentFragment()

原理:將dom暫存在fragment上再来，之后一次性添加到dom

  <ul id="parent">
    </ul>
    <button id="btn">btn</button>
    <script>
       var btn=document.getElementById("btn");
       var parent=document.getElementById("parent");
       var frame=document.createDocumentFragment();
       btn.onclick=function(){
           for(let i=0;i<=10;i++){
               let li=document.createElement("li");
               frame.appendChild(li);
           }
           parent.appendChild(frame);
       }
    </script>

6.9表格應(yīng)用

獲取
tBodies,tHead,rows,cells
隔行變色
鼠標(biāo)移入變色

//css
    <style>
        table,td,th{
            border: 1px solid #333;
        }
        table{
            border-collapse: collapse;
            width: 500px;
            line-height: 50px;
            text-align: center;
        }
    </style>
/html
    <table id="table">
        <thead>
            <tr><th>商城</th><th>手機(jī)</th></tr>
        </thead>
        <tbody>
            <tr><td>JD商鋪</td><td>蘋果手機(jī)</td></tr>
            <tr><td>天貓</td><td>華為手機(jī)</td></tr>
            <tr><td>拼多多</td><td>魅族手機(jī)</td></tr>
            <tr><td>蘇寧</td><td>小米手機(jī)</td></tr>
        </tbody>
    </table>
    <script>
        var table=document.getElementById("table");
        var thead=table.tHead;
        var tbody=table.tBodies[0];
        var rows=tbody.rows;
        var firstCell=rows[0].cells[0];
        thead.style.backgroundColor="#eee";
        console.log(rows);
        for(let i=0;i<rows.length;i++){
            rows[i].style.backgroundColor=(i%2==0)?"#ff2d51":"#44cef6";  
        }
        firstCell.innerHTML="銀泰百貨";
    </script>

添加蒙兰，刪除一行

 <style>
        tbody tr:nth-child(even){
            background: #ff2d51;
        }
        tbody tr:nth-child(odd){
            background: #44fce6;
        }
        table,td,th{
            border: 1px solid #333;
        }
        table{
            border-collapse: collapse;
            width: 500px;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        手機(jī)品牌<input type="text" id="phone">
        價(jià)格<input type="text" id="price">
        <button id="btn">添加</button>
    </div>
    <table id="table">
            <thead>
                <tr><th>手機(jī)品牌</th><th>價(jià)格</th></tr>
            </thead>
            <tbody>
                <tr><td>蘋果7</td><td>8k</td></tr>
            </tbody>
        </table>
    <script>
       var btn=document.getElementById("btn");
       var phone=document.getElementById("phone");
       var price=document.getElementById("price");
       var tbody=document.getElementById("table").tBodies[0];
     
       btn.onclick=function(){
             var tr=document.createElement("tr");
             var td=document.createElement("td");
             td.innerHTML=phone.value;
             tr.appendChild(td);
             var td1=document.createElement("td");
             td1.innerHTML=price.value;
             tr.appendChild(td1);
             console.log(td1);
             tbody.appendChild(tr);
       } 
    </script>
</body>

7.function

7.1.函數(shù)的創(chuàng)建方式

開發(fā)過程中推薦使用第一種

1.function go(a){
    console.log(a)
}
2.var go = function(a){
    console.log(a)
}
3.var go = new Function(“a”,”console.log(a)”)

es6箭頭函數(shù)

        var go=()=>{
            console.log("asdfa");
        }
        go();

7.2.函數(shù)的返回值

a.什么是函數(shù)的返回值
定義:函數(shù)的執(zhí)行結(jié)果
函數(shù)可以沒有return?說明:
1.函數(shù)會(huì)在執(zhí)行完return語句之后停止,并立即退出
2.return語句也可以不帶任何返回值，用于提前停止函數(shù)執(zhí)行

function show(){
  return "hello world" //return的作用:把結(jié)果返回到函數(shù)外部
}
var b = show(); // 在哪調(diào)用返回到哪里芒篷；

7.3. 函數(shù)的傳參

可變參(不定參)arguments
參數(shù)的個(gè)數(shù)可變,參數(shù)數(shù)組
//對(duì)傳入的參數(shù)求和

function sum(){
        var result=0;
        for(var i = 0;i<arguments.length;i++){
            result+=arguments[i];
        }
        return result;
}
alert(sum(2,3))

7.4.JS中重載

重載:根據(jù)傳入的參數(shù)不同,動(dòng)態(tài)決定調(diào)用那種方法
函數(shù)內(nèi)部有一個(gè)arguments對(duì)象來管理函數(shù)傳入的參數(shù)

  <script>
        function test(){
            if(arguments.length==1){
                console.log(arguments[0]);
            }else if(arguments[1]){
                console.log(arguments[0]+arguments[1]);
            }else{
                console.log("asdfasdf");
            }
        }
        test();
        test(1);
        test(2,3);
    </script>

js不支持重載,要想支持重載,可以使用arguments對(duì)象

8.基本類型和引用類型的區(qū)別

總結(jié)：
基本類型只穿值
引用類型既傳值也穿址

1.基本類型的值在內(nèi)存中占據(jù)固定大小的空間,因此被保存在棧內(nèi)存中搜变。
2.引用類型的值是對(duì)象,保存在堆內(nèi)存中。
3.包含引用類型值的變量實(shí)際上包含的并不是對(duì)象本身,而是一個(gè)指向該對(duì)象的指針梭伐。
4.從一個(gè)變量向另一個(gè)變量復(fù)制引用類型的值痹雅，復(fù)制的其實(shí)是指針,因此兩個(gè)變量最終都指向同一個(gè)對(duì)象。

9 數(shù)組的常用方法

9.1.創(chuàng)建數(shù)組的方式

9.1.1字面量

var arr =[1,2,3]

9.1.2構(gòu)造函數(shù)(了解)

var arr = new Array();
arr[0] = 1;

9.2數(shù)組的遍歷

for(var i=0;i<arr.lengh;i++){
    console.log(arr[i])
}
for(var k in arr){
    console.log(arr[k])
}

9.3.檢測(cè)數(shù)組

if(arr instanceof Array){}
if(Array.isArray(arr)){}

9.4.數(shù)組的方法

9.4.1增加(改變數(shù)組的內(nèi)容)

push() //從尾部添加

var arr = [1,2,3];
arr.push(4);
console.log(arr);    //1,2,3,4

unshift() // 從頭部添加

var arr = [1,2,3];
arr.unshift(0);
alert(arr);  //0,1,2,3

push方法復(fù)制數(shù)組

var arr = [12,11,33];
        var b = [];
        for(var i=0;i<arr.length;i++){
            b.push(arr[i]);
}
console.log(b);

9.4.2增加 concat()(不改變?cè)瓉頂?shù)組內(nèi)容)

concat(value|[arr]) 本方法可以傳單個(gè)值,也可以傳數(shù)組

var arr = [1,2,3];
var b = arr.concat(4);
console.log(arr); //1,2,3
console.log(b); //1,2,3,4

eg:復(fù)制數(shù)組

var arr=[1,2,3];
var b =[].concat(arr);
console.log(b); //1,2,3

9.4.2刪除(改變)

不接收參數(shù)

pop() //從尾部刪除

var arr = [1,2,3];
alert(arr.pop());  //3
alert(arr)  //1,2

shift() // 從頭部刪除

var arr = [1,2,3];
alert(arr.shift());  //1
alert(arr)  //2,3

9.4.3修改

指定三個(gè)參數(shù)arrObject.splice(index,howmany,item)
指定三個(gè)參數(shù):起始位置,刪除的項(xiàng)數(shù),插入的數(shù)量

var arr = [1,2,3,4,5];
arr.splice(0,2,6,7);
alert(arr); //6,7,4,5

arrayObject.slice(start,end)
1個(gè)參數(shù)

var  arr=[1,2,3,4];
var b=arr.slice(1);
console.log(b);  //2,3,4

2個(gè)參數(shù)

var c = arr.slice(1,3);
console.log(c); //2,3

slice復(fù)制數(shù)組

var arr = [1,2,3];
var b = arr.slice(0);
console.log(b);

9.4.4查詢

arr[index] 查詢對(duì)應(yīng)下標(biāo)的值

var arr=[1,2,3];
console.log(arr[0]);  //1;

indexOf(value) 查詢對(duì)應(yīng)值的下標(biāo)

var arr=[1,2,3,4];
console.log(arr.indexOf(1)); //0
//如果沒有對(duì)應(yīng)的值,則返回-1

9.4.5splice(改變?cè)瓉頂?shù)組) 包含增,刪,改

增加,指定三個(gè)參數(shù)splice(index,howmany,item)
splice(index,howmany,item)
傳3個(gè)參數(shù)表示:起始位置糊识、0(刪除的項(xiàng)數(shù))绩社、插入的項(xiàng)在index之后

var arr= [1,2,3,4,5];
arr.splice(2,0,"red","green");  //在第2位之后,增加2個(gè)元素
console.log(arr); //[1,2,"red","green",3,4,5]

刪除,指定兩個(gè)參數(shù)splice(index,howmany)

//splice(index,howmany)
//傳2個(gè)參數(shù)表示:起始位置和刪除的個(gè)數(shù)
var arr = [1,2,3,4,5];
arr.splice(0,2);  //從0位開始,刪除2個(gè)
alert(arr);  //[3,4,5]

修改,指定三個(gè)參數(shù)splice(index,howmany,item)
指定三個(gè)參數(shù):起始位置,刪除的項(xiàng)數(shù),插入的數(shù)量

var arr = [1,2,3,4,5];
arr.splice(0,2,6,7);
alert(arr); //6,7,4,5

9.4.6join

通過指定分隔符,將數(shù)組所有元素放入字符串
arrayObject.join(separator)

var arr=["red","green","yellow"];
var a = arr.join();    //red,green,yellow
var b=  arr.join("");  //redgreenyellow
var c=arr.join(".");  //red.green.yello
alert(c);

9.4.7排序

通過指定分隔符,將數(shù)組所有元素放入字符串
arrayObject.join(separator)
a.升序

 var arr = [1,12,34,5,6];
    var c = arr.sort(function(a,b){
        return a-b;
    });
   console.log(c); //[1,2,5,6,12,34]

b.降序

arr.sort(function(a,b){
        return b-a;
});

9.4.8歸并(求和)方法