數組

數組是指一組數據的集合寻仗，其中的每個數據被稱作元素，在數組中可以存放任意類型的元素凡壤。數組是一種將一組數據存儲在單個變量名下的優(yōu)雅方式

<script>
        //  new 數組
        var arr = new Array();
        //
        var arr1 = [];
        //
        var arr2 = [1, 22, 'haha', true];
        console.log(arr)
        console.log(arr1)
        console.log(arr2)
        console.log(arr2[2])

    </script>

image

數組的遍歷

 <script>
        var arr = ['red', 'yellow', 'green']
        for (var i = 0; i < arr.length ; i++) {
            console.log(arr[i])
        }

    </script>

求數組中最大的值

<script>
        var arr = [21, 34, 343, 433, 434,7676];
        var max = arr[0]
        for (var i = 0; i < arr.length ; i++) {
            if(arr[i]> max){
                max = arr[i]
            }
        }
        console.log(max)
    </script>

創(chuàng)建數組

JS 中創(chuàng)建數組有兩種方式：

利用 new 創(chuàng)建數組

var 數組名 = new Array() 署尤；
var arr = new Array();   // 創(chuàng)建一個新的空數組

利用數組字面量創(chuàng)建數組

//1\. 使用數組字面量方式創(chuàng)建空的數組
var  數組名 = []；
//2\. 使用數組字面量方式創(chuàng)建帶初始值的數組
var  數組名 = ['小白','小黑','大黃','瑞奇'];

數組的字面量是方括號 [ ]
聲明數組并賦值稱為數組的初始化
這種字面量方式也是我們以后最多使用的方式
數組元素的類型
數組中可以存放任意類型的數據亚侠，例如字符串曹体，數字，布爾值等

var arrStus = ['小白',12,true,28.9];

索引 (下標) ：用來訪問數組元素的序號（數組下標從 0 開始）硝烂。

// 定義數組
var arrStus = [1,2,3];
// 獲取數組中的第2個元素
alert(arrStus[1]);

遍歷數組

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
    console.log(arrStus[i]);
}

數組中新增元素
數組中可以通過以下方式在數組的末尾插入新元素：

  數組[ 數組.length ] = 新數據;

<script>
        var  arr= ['red', 'haha', 1121];
        arr[2] = 'blue'; // 修改
        console.log(arr)
        // 數組的末尾添加值
        arr[arr.length] = 'yellow';
        console.log(arr)

    </script>

函數

函數：就是封裝了一段可被重復調用執(zhí)行的代碼塊箕别。通過此代碼塊可以實現大量代碼的重復使用。

聲明函數

// 聲明函數
function 函數名(參數列表) {
    //函數體代碼
}

function 是聲明函數的關鍵字,必須小寫
由于函數一般是為了實現某個功能才定義的滞谢，所以通常我們將函數名命名為動詞串稀，比如 getSum（小駝峰）
調用函數

函數名();  // 通過調用函數名來執(zhí)行函數體代碼

調用的時候千萬不要忘記添加小括號
口訣：函數不調用，自己不執(zhí)行
注意：聲明函數本身并不會執(zhí)行代碼狮杨，只有調用函數時才會執(zhí)行函數體代碼

  <script>
        // 1 ~ num的累加和
        function caculateNum(num) {
            var sum = 0;
            for (var i = 1; i <= num; i++) {
                sum += i;
            }
            console.log(sum)
            return sum;
        }
        // 給定 兩個數 num1 母截， num2 求這兩個數中最大的值
        // 利用函數 求兩個數的最大值
        function getMax(num1, num2) {
            return num1 > num2 ? num1 : num2;
        }
        console.log(getMax(1, 3));
        var result = caculateNum(100);
        alert(result)

        //
    </script>

函數的參數

image

return 語句

返回值：函數調用整體代表的數據；函數執(zhí)行完成后可以通過return語句將指定數據返回橄教。

// 聲明函數
function 函數名（）{
    ...
    return  需要返回的值微酬；
}
// 調用函數
函數名();    // 此時調用函數就可以得到函數體內return 后面的值

在使用 return 語句時，函數會停止執(zhí)行颤陶，并返回指定的值
如果函數沒有 return ，返回的值是 undefined

函數的兩種聲明方式

自定義函數方式(命名函數)
利用函數關鍵字 function 自定義函數方式

// 聲明定義方式
function fn() {...}
// 調用  
fn();

函數表達式方式(匿名函數）
利用函數表達式方式的寫法如下

 var fn = function(num){
            console.log("匿名函數被調到"+num)
        }
        fn(100);

對象

什么是對象陷遮？

在 JavaScript 中滓走，對象是一組無序的相關屬性和方法的集合，所有的事物都是對象帽馋，例如字符串搅方、數值、數組绽族、函數等姨涡。
屬性：事物的特征，在對象中用屬性來表示（常用名詞）
方法：事物的行為吧慢，在對象中用方法來表示（常用動詞)
為什么需要對象？
保存一個值時，可以使用變量匈仗，保存多個值（一組值）時瓢剿，可以使用數組。
如果要保存一個人的完整信息呢悠轩？例如间狂，將“張三瘋”的個人的信息保存在數組中的方式為：

  var arr = [‘張三瘋’, ‘男', 128,154];

上述例子中用數組保存數據的缺點是：數據只能通過索引值訪問，開發(fā)者需要清晰的清除所有的數據的排行才能準確地獲取數據火架，而當數據量龐大時鉴象，不可能做到記憶所有數據的索引值。為了讓更好地存儲一組數據何鸡，對象應運而生：對象中為每項數據設置了屬性名稱纺弊，可以訪問數據更語義化，數據結構清晰音比，表意明顯俭尖，方便開發(fā)者使用。

 var obj = {
            "name":"張三豐",
            "sex":"男",
            "age":128,
            "weight":154,
        }

創(chuàng)建對象的三種方式

利用字面量創(chuàng)建對象

花括號 { } 里面包含了表達這個具體事物（對象）的屬性和方法洞翩；{ } 里面采取鍵值對的形式表示

鍵：相當于屬性名
值：相當于屬性值稽犁，可以是任意類型的值（數字類型、字符串類型骚亿、布爾類型已亥，函數類型等）
代碼如下：

  <script>
        var obj = {
            name:"張三豐",
            sex:"男",
            age:128,
            weight:154,
            sayHello: function () {
                alert('Hello!')
            }
        }
        // 調用
        console.log(obj.sex)
        obj.sayHello()
        console.log(obj.sayHello())
    </script>

利用 new Object 創(chuàng)建對象

 <script>
        // 創(chuàng)建了一個空對象
       var obj =  new Object();
       obj.userName = '小魯班';
       obj.grade = 15;
       obj.sayHaha = function(){
           console.log('haha')
        }

        console.log(obj.userName)
        obj.sayHaha();
    </script>

利用構造函數創(chuàng)建對象
構造函數：是一種特殊的函數，主要用來初始化對象来屠，即為對象成員變量賦初始值虑椎，它總與 new 運算符一起使用。我們可以把對象中一些公共的屬性和方法抽取出來俱笛，然后封裝到這個函數里面捆姜。
構造函數的封裝格式：

function 構造函數名(形參1,形參2,形參3) {
     this.屬性名1 = 參數1;
     this.屬性名2 = 參數2;
     this.屬性名3 = 參數3;
     this.方法名 = 函數體;
}

構造函數的調用格式

var obj = new 構造函數名(實參1，實參2迎膜，實參3)

注意事項

構造函數約定首字母大寫泥技。
函數內的屬性和方法前面需要添加 this ，表示當前對象的屬性和方法磕仅。
構造函數中不需要 return 返回結果珊豹。
當我們創(chuàng)建對象的時候，必須用 new 來調用構造函數榕订。

 <script>
        function Star(uname, age, sex) {
            this.name = uname;
            this.age =age;
            this.sex = sex;
            this.sing = function (song) {
                console.log(song)
            }
        }
        var jay = new Star('周杰倫', 18, '男'); // 調用 的函數返回的是一個對象
        console.log(jay.name)
        jay.sing("聽媽媽的話")
    </script>

遍歷對象

for...in 語句用于對數組或者對象的屬性進行循環(huán)操作店茶。
其語法如下：

for (變量 in 對象名字) {
    // 在此執(zhí)行代碼
}

法中的變量是自定義的，它需要符合命名規(guī)范劫恒，通常我們會將這個變量寫為 k 或者 key贩幻。

 <script>
        var obj = {
            name:"張三豐",
            sex:"男",
            age:128,
            weight:154,
            sayHello: function () {
                alert('Hello!')
            }
        }

        // 遍歷
        for(var k in obj){
            console.log(k); // 輸出的是屬性名
            console.log(obj[k]);
        }
    </script>

內置對象

JavaScript 中的對象分為3種：自定義對象、內置對象、瀏覽器對象段直，前面兩種對象是JS 基礎內容吃溅，屬于 ECMAScript；第三個瀏覽器對象屬于 JS 獨有的鸯檬， JS API 講解內置對象就是指 JS 語言自帶的一些對象决侈，這些對象供開發(fā)者使用，并提供了一些常用的或是最基本而必要的功能（屬性和方法）喧务，內置對象最大的優(yōu)點就是幫助我們快速開發(fā)
JavaScript 提供了多個內置對象：Math赖歌、 Date 、Array功茴、String等

Math對象
Math 對象不是構造函數庐冯，它具有數學常數和函數的屬性和方法。跟數學相關的運算（求絕對值坎穿，取整展父、最大值等）可以使用 Math 中的成員。

image
日期對象
Date 對象和 Math 對象不一樣玲昧，Date是一個構造函數栖茉，所以使用時需要實例化后才能使用其中具體方法和屬性。Date 實例用來處理日期和時間
使用Date實例化日期對象
獲取當前時間必須實例化：

var now = new Date();

獲取指定時間的日期對象

var futture= new Date('2020/10/1');

注意：如果創(chuàng)建實例時并未傳入參數孵延，則得到的日期對象是當前時間對應的日期對象,使用Date實例的方法和屬性

image

  <script>
       var now =  new Date()
        console.log(now)
        console.log(now.getTime())

    </script>

instanceof 運算符

instanceof 可以判斷一個對象是否是某個構造函數的實例

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false

Web API

Web API 主要是針對于瀏覽器提供的接口吕漂，主要針對于瀏覽器做交互效果

DOM 介紹

文檔對象模型（Document Object Model，簡稱DOM）尘应，是 W3C 組織推薦的處理可擴展標記語言（html或者xhtml）的標準編程接口惶凝。
W3C 已經定義了一系列的 DOM 接口，通過這些 DOM 接口可以改變網頁的內容犬钢、結構和樣式苍鲜。
DOM是W3C組織制定的一套處理 html和xml文檔的規(guī)范，所有的瀏覽器都遵循了這套標準玷犹。

DOM樹

image

DOM樹又稱為文檔樹模型坡贺，把文檔映射成樹形結構，通過節(jié)點對象對其處理箱舞，處理的結果可以加入到當前的頁面。

文檔：一個頁面就是一個文檔拳亿，DOM中使用document表示
節(jié)點：網頁中的所有內容晴股，在文檔樹中都是節(jié)點（標簽、屬性肺魁、文本电湘、注釋等），使用node表示
標簽節(jié)點：網頁中的所有標簽，通常稱為元素節(jié)點寂呛，又簡稱為“元素”怎诫，使用element表示

script放在body和放在head的區(qū)別

放在body中：在頁面加載的時候被執(zhí)行
放在head中：在被調用時被執(zhí)行
原因：
1、瀏覽器是從上到下解析HTML的贷痪。
2幻妓、放在head里的js代碼，會在body解析之前被解析劫拢；放在body里的js代碼肉津，會在整個頁面加載完成之后解析。
js應該放哪：
1舱沧、head中：需調用才執(zhí)行或事件觸發(fā)執(zhí)行的腳本妹沙，可以保證腳本在調用之前被加載
2、body中：當頁面被加載時執(zhí)行的腳本熟吏，通常被用來生成頁面內容

根據ID獲取

語法：document.getElementById(id)
作用：根據ID獲取元素對象
參數：id值距糖，區(qū)分大小寫的字符串
返回值：元素對象 或 null

案例

 <div id="time">2020-08-17</div>
<!--    因為我們文檔頁面從上往下加載，所以先得有標簽 所以我們script寫到標簽的下面-->
    <script>
        // 返回的是一個元素對象
        var timer = document.getElementById('time');
        console.log(timer)
        // console.dir 打印我們返回的元素對象 更好的查看里面的屬性和方法
        console.dir(timer)
    </script>

根據標簽名獲取元素

語法：document.getElementsByTagName('標簽名') 或者 element.getElementsByTagName('標簽名') 
作用：根據標簽名獲取元素對象
參數：標簽名
返回值：元素對象集合（偽數組牵寺，數組元素是元素對象）

<script>
    // 返回的是獲取過來元素對象的集合悍引，
    var lis =  document.getElementsByTagName('li')
    // console.log(lis)
    // console.log("lis[0]" + lis[0])
    // 遍歷
    for (var i = 0; i < lis.length ; i++) {
        console.log(lis[i])
    }

    // 父元素必須是指定的單個元素
    var ol = document.getElementById('ol')
    console.log(ol.getElementsByTagName('li'))

</script>

H5新增獲取元素方式

image

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
    <ul>
        <li>首頁</li>
        <li>產品</li>
    </ul>
</div>
<script>
    //  1、getElementsByClassName根據類名獲取某些元素集合
    var boxs =  document.getElementsByClassName('box')
    console.log(boxs)
    // 2缸剪、 返回第一個
    var nav = document.querySelector('#nav')
    var li = document.querySelector('li')
    // 3吗铐、 querySelectorAll 返回指定選擇器所有
    var allBox = document.querySelectorAll('.box')
    var lis = document.querySelectorAll('li')

</script>
</body>

獲取特殊元素（body，html）

image

<script>
        // 1.獲取body 元素
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);
        // 2.獲取html 元素
        // var htmlEle = document.html;
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>

事件基礎

JavaScript 使我們有能力創(chuàng)建動態(tài)頁面杏节，而事件是可以被 JavaScript 偵測到的行為唬渗。

事件三要素

事件源（誰）：觸發(fā)事件的元素
事件類型（什么事件）：例如 click 點擊事件
事件處理程序（做啥）：事件觸發(fā)后要執(zhí)行的代碼(函數形式)，事件處理函數

<script>
    var btn = document.getElementById('btn')
    btn.onclick = function () {
        alert('點我干啥')
    }
</script>

常見的鼠標事件

image

操JavaScript的 DOM 操作可以改變網頁內容奋渔、結構和樣式镊逝，我們可以利用 DOM 操作元素來改變元素里面的內容、屬性等嫉鲸。（注意：這些操作都是通過元素對象的屬性實現的）作元素

改變元素內容（獲取或設置）

image

innerText和innerHTML的區(qū)別
獲取內容時的區(qū)別：
innerText會去除空格和換行撑蒜，而innerHTML會保留空格和換行
設置內容時的區(qū)別：
innerText不會識別html，而innerHTML會識別

<script>
    var div = document.querySelector('div')
    div.innerText = '<div>今天 天氣不錯  </div>  2020'
    // div.innerHTML = '<strong>今天 天氣不錯   </strong>  2020   ddd'
    // div.innerHTML = '<div>今天 天氣不錯   </div>  2020   ddd'
    var p = document.querySelector('p')

    console.log(p.innerText)
    console.log(p.innerHTML)

</script>

常用元素的屬性操作

image

表單元素的屬性操作

image

表單元素中有一些屬性如：disabled玄渗、checked座菠、selected，元素對象的這些屬性的值是布爾型藤树。

<button>按鈕</button>
<input type="text" value="haha">
<script>
    var button = document.querySelector('button')
    var input = document.querySelector('input')
    button.onclick = function () {
        // 點擊按鈕往input 放入值
        input.value = 'btn被點擊';
        // 如果想要某個表單被禁用浴滴， 不能被點擊
        // button.disabled = true;
        this.disabled = true;
        // this 指向事件函數的調用者
        // this.disabled = false;
    }
</script>

樣式屬性操作

image

方式1：通過操作style屬性

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
<div></div>
<script>
    var div = document.querySelector('div')
    div.onclick = function () {
        // 小駝峰
        this.style.backgroundColor = 'blue';
        this.style.width = '500px'
        this.style.height = '500px'
    }
</script>
</body>
</html>

JavaScript-2

JavaScript-2

數組

數組的遍歷

求數組中最大的值

創(chuàng)建數組

函數

return 語句

函數的兩種聲明方式

對象

創(chuàng)建對象的三種方式

遍歷對象

內置對象

instanceof 運算符

Web API

DOM 介紹

DOM樹

script放在body和放在head的區(qū)別

根據ID獲取

根據標簽名獲取元素

H5新增獲取元素方式

獲取特殊元素（body，html）

事件基礎

事件三要素

常見的鼠標事件

操JavaScript的 DOM 操作可以改變網頁內容奋渔、結構和樣式镊逝，我們可以利用 DOM 操作元素來改變元素里面的內容、屬性等嫉鲸。（注意：這些操作都是通過元素對象的屬性實現的）作元素

常用元素的屬性操作

表單元素的屬性操作

樣式屬性操作