<meta charset="utf-8">

<article class="_2rhmJa">

數(shù)組

數(shù)組是指一組數(shù)據(jù)的集合，其中的每個(gè)數(shù)據(jù)被稱作元素蝙场，在數(shù)組中可以存放任意類型的元素掉房。數(shù)組是一種將一組數(shù)據(jù)存儲(chǔ)在單個(gè)變量名下的優(yōu)雅方式

<script>
        //  new 數(shù)組
        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

數(shù)組的遍歷

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

    </script>

求數(shù)組中最大的值

<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)建數(shù)組

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

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

var 數(shù)組名 = new Array() ；
var arr = new Array();   // 創(chuàng)建一個(gè)新的空數(shù)組

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

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

• 數(shù)組的字面量是方括號(hào) [ ]
• 聲明數(shù)組并賦值稱為數(shù)組的初始化
• 這種字面量方式也是我們以后最多使用的方式
  數(shù)組元素的類型
  數(shù)組中可以存放任意類型的數(shù)據(jù)哩至，例如字符串躏嚎，數(shù)字，布爾值等

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

索引 (下標(biāo)) ：用來(lái)訪問(wèn)數(shù)組元素的序號(hào)（數(shù)組下標(biāo)從 0 開(kāi)始）菩貌。

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

遍歷數(shù)組

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

• 數(shù)組中新增元素
  數(shù)組中可以通過(guò)以下方式在數(shù)組的末尾插入新元素：

  數(shù)組[ 數(shù)組.length ] = 新數(shù)據(jù);

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

    </script>

函數(shù)

函數(shù)：就是封裝了一段可被重復(fù)調(diào)用執(zhí)行的代碼塊卢佣。通過(guò)此代碼塊可以實(shí)現(xiàn)大量代碼的重復(fù)使用。

• 聲明函數(shù)

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

• function 是聲明函數(shù)的關(guān)鍵字,必須小寫
• 由于函數(shù)一般是為了實(shí)現(xiàn)某個(gè)功能才定義的箭阶， 所以通常我們將函數(shù)名命名為動(dòng)詞虚茶，比如 getSum（小駝峰）
• 調(diào)用函數(shù)

函數(shù)名();  // 通過(guò)調(diào)用函數(shù)名來(lái)執(zhí)行函數(shù)體代碼

• 調(diào)用的時(shí)候千萬(wàn)不要忘記添加小括號(hào)
• 口訣：函數(shù)不調(diào)用，自己不執(zhí)行
  注意：聲明函數(shù)本身并不會(huì)執(zhí)行代碼仇参，只有調(diào)用函數(shù)時(shí)才會(huì)執(zhí)行函數(shù)體代碼

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

        //
    </script>

• 函數(shù)的參數(shù)

image

return 語(yǔ)句

返回值：函數(shù)調(diào)用整體代表的數(shù)據(jù)；函數(shù)執(zhí)行完成后可以通過(guò)return語(yǔ)句將指定數(shù)據(jù)返回 诈乒。

// 聲明函數(shù)
function 函數(shù)名（）{
    ...
    return  需要返回的值罩扇；
}
// 調(diào)用函數(shù)
函數(shù)名();    // 此時(shí)調(diào)用函數(shù)就可以得到函數(shù)體內(nèi)return 后面的值

• 在使用 return 語(yǔ)句時(shí)，函數(shù)會(huì)停止執(zhí)行怕磨，并返回指定的值
• 如果函數(shù)沒(méi)有 return 喂饥，返回的值是 undefined

函數(shù)的兩種聲明方式

• 自定義函數(shù)方式(命名函數(shù))
  利用函數(shù)關(guān)鍵字 function 自定義函數(shù)方式

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

• 函數(shù)表達(dá)式方式(匿名函數(shù)）
  利用函數(shù)表達(dá)式方式的寫法如下

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

對(duì)象

什么是對(duì)象？

• 在 JavaScript 中肠鲫，對(duì)象是一組無(wú)序的相關(guān)屬性和方法的集合员帮，所有的事物都是對(duì)象，例如字符串导饲、數(shù)值捞高、數(shù)組、函數(shù)等帜消。
• 屬性：事物的特征棠枉，在對(duì)象中用屬性來(lái)表示（常用名詞）
• 方法：事物的行為浓体，在對(duì)象中用方法來(lái)表示（常用動(dòng)詞)
  為什么需要對(duì)象泡挺？
  保存一個(gè)值時(shí)，可以使用變量命浴，保存多個(gè)值（一組值）時(shí)娄猫，可以使用數(shù)組贱除。
  如果要保存一個(gè)人的完整信息呢？例如媳溺，將“張三瘋”的個(gè)人的信息保存在數(shù)組中的方式為：

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

上述例子中用數(shù)組保存數(shù)據(jù)的缺點(diǎn)是：數(shù)據(jù)只能通過(guò)索引值訪問(wèn)月幌，開(kāi)發(fā)者需要清晰的清除所有的數(shù)據(jù)的排行才能準(zhǔn)確地獲取數(shù)據(jù)，而當(dāng)數(shù)據(jù)量龐大時(shí)悬蔽，不可能做到記憶所有數(shù)據(jù)的索引值扯躺。為了讓更好地存儲(chǔ)一組數(shù)據(jù)，對(duì)象應(yīng)運(yùn)而生：對(duì)象中為每項(xiàng)數(shù)據(jù)設(shè)置了屬性名稱蝎困，可以訪問(wèn)數(shù)據(jù)更語(yǔ)義化录语，數(shù)據(jù)結(jié)構(gòu)清晰，表意明顯禾乘，方便開(kāi)發(fā)者使用澎埠。

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

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

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

花括號(hào) { } 里面包含了表達(dá)這個(gè)具體事物（對(duì)象）的屬性和方法；{ } 里面采取鍵值對(duì)的形式表示 

• 鍵：相當(dāng)于屬性名
• 值：相當(dāng)于屬性值始藕，可以是任意類型的值（數(shù)字類型蒲稳、字符串類型、布爾類型伍派，函數(shù)類型等）
  代碼如下：

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

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

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

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

• 利用構(gòu)造函數(shù)創(chuàng)建對(duì)象
• 構(gòu)造函數(shù)：是一種特殊的函數(shù)江耀，主要用來(lái)初始化對(duì)象，即為對(duì)象成員變量賦初始值拙已，它總與 new 運(yùn)算符一起使用决记。我們可以把對(duì)象中一些公共的屬性和方法抽取出來(lái)，然后封裝到這個(gè)函數(shù)里面倍踪。
  構(gòu)造函數(shù)的封裝格式：

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

構(gòu)造函數(shù)的調(diào)用格式

var obj = new 構(gòu)造函數(shù)名(實(shí)參1系宫，實(shí)參2，實(shí)參3)

注意事項(xiàng)

1. 構(gòu)造函數(shù)約定首字母大寫建车。
2. 函數(shù)內(nèi)的屬性和方法前面需要添加 this 扩借，表示當(dāng)前對(duì)象的屬性和方法。
3. 構(gòu)造函數(shù)中不需要 return 返回結(jié)果缤至。
4. 當(dāng)我們創(chuàng)建對(duì)象的時(shí)候潮罪，必須用 new 來(lái)調(diào)用構(gòu)造函數(shù)。

 <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, '男'); // 調(diào)用 的函數(shù)返回的是一個(gè)對(duì)象
        console.log(jay.name)
        jay.sing("聽(tīng)媽媽的話")
    </script>

遍歷對(duì)象

for...in 語(yǔ)句用于對(duì)數(shù)組或者對(duì)象的屬性進(jìn)行循環(huán)操作领斥。
其語(yǔ)法如下：

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

法中的變量是自定義的嫉到，它需要符合命名規(guī)范，通常我們會(huì)將這個(gè)變量寫為 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>

內(nèi)置對(duì)象

JavaScript 中的對(duì)象分為3種：自定義對(duì)象 何恶、內(nèi)置對(duì)象、 瀏覽器對(duì)象嚼黔， 前面兩種對(duì)象是JS 基礎(chǔ) 內(nèi)容细层，屬于 ECMAScript惜辑； 第三個(gè)瀏覽器對(duì)象屬于 JS 獨(dú)有的， JS API 講解內(nèi)置對(duì)象就是指 JS 語(yǔ)言自帶的一些對(duì)象疫赎，這些對(duì)象供開(kāi)發(fā)者使用盛撑，并提供了一些常用的或是最基本而必要的功能（屬性和方法），內(nèi)置對(duì)象最大的優(yōu)點(diǎn)就是幫助我們快速開(kāi)發(fā)
JavaScript 提供了多個(gè)內(nèi)置對(duì)象：Math捧搞、 Date 抵卫、Array、String等

• Math對(duì)象
  Math 對(duì)象不是構(gòu)造函數(shù)胎撇，它具有數(shù)學(xué)常數(shù)和函數(shù)的屬性和方法陌僵。跟數(shù)學(xué)相關(guān)的運(yùn)算（求絕對(duì)值，取整创坞、最大值等）可以使用 Math 中的成員碗短。

  image

• 日期對(duì)象
  Date 對(duì)象和 Math 對(duì)象不一樣，Date是一個(gè)構(gòu)造函數(shù)题涨，所以使用時(shí)需要實(shí)例化后才能使用其中具體方法和屬性偎谁。Date 實(shí)例用來(lái)處理日期和時(shí)間
  使用Date實(shí)例化日期對(duì)象

• 獲取當(dāng)前時(shí)間必須實(shí)例化：

var now = new Date();

獲取指定時(shí)間的日期對(duì)象

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

注意：如果創(chuàng)建實(shí)例時(shí)并未傳入?yún)?shù)，則得到的日期對(duì)象是當(dāng)前時(shí)間對(duì)應(yīng)的日期對(duì)象,使用Date實(shí)例的方法和屬性

image

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

    </script>

instanceof 運(yùn)算符

instanceof 可以判斷一個(gè)對(duì)象是否是某個(gè)構(gòu)造函數(shù)的實(shí)例

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

Web API

Web API 主要是針對(duì)于瀏覽器提供的接口纲堵，主要針對(duì)于瀏覽器做交互效果

DOM 介紹

文檔對(duì)象模型（Document Object Model巡雨，簡(jiǎn)稱DOM），是 W3C 組織推薦的處理可擴(kuò)展標(biāo)記語(yǔ)言（html或者xhtml）的標(biāo)準(zhǔn)編程接口席函。
W3C 已經(jīng)定義了一系列的 DOM 接口铐望，通過(guò)這些 DOM 接口可以改變網(wǎng)頁(yè)的內(nèi)容、結(jié)構(gòu)和樣式茂附。
DOM是W3C組織制定的一套處理 html和xml文檔的規(guī)范正蛙，所有的瀏覽器都遵循了這套標(biāo)準(zhǔn)。

DOM樹(shù)

image

DOM樹(shù) 又稱為文檔樹(shù)模型营曼，把文檔映射成樹(shù)形結(jié)構(gòu)乒验，通過(guò)節(jié)點(diǎn)對(duì)象對(duì)其處理，處理的結(jié)果可以加入到當(dāng)前的頁(yè)面蒂阱。

• 文檔：一個(gè)頁(yè)面就是一個(gè)文檔锻全，DOM中使用document表示
• 節(jié)點(diǎn)：網(wǎng)頁(yè)中的所有內(nèi)容，在文檔樹(shù)中都是節(jié)點(diǎn)（標(biāo)簽录煤、屬性鳄厌、文本、注釋等）妈踊，使用node表示
• 標(biāo)簽節(jié)點(diǎn)：網(wǎng)頁(yè)中的所有標(biāo)簽了嚎，通常稱為元素節(jié)點(diǎn)，又簡(jiǎn)稱為“元素”响委，使用element表示

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

放在body中：在頁(yè)面加載的時(shí)候被執(zhí)行
放在head中：在被調(diào)用時(shí)被執(zhí)行
原因：
1新思、瀏覽器是從上到下解析HTML的。
2赘风、放在head里的js代碼夹囚，會(huì)在body解析之前被解析；放在body里的js代碼邀窃，會(huì)在整個(gè)頁(yè)面加載完成之后解析荸哟。
js應(yīng)該放哪：
1、head中：需調(diào)用才執(zhí)行或事件觸發(fā)執(zhí)行的腳本瞬捕，可以保證腳本在調(diào)用之前被加載
2鞍历、body中：當(dāng)頁(yè)面被加載時(shí)執(zhí)行的腳本，通常被用來(lái)生成頁(yè)面內(nèi)容

根據(jù)ID獲取

語(yǔ)法：document.getElementById(id)
作用：根據(jù)ID獲取元素對(duì)象
參數(shù)：id值肪虎，區(qū)分大小寫的字符串
返回值：元素對(duì)象 或 null

案例

 <div id="time">2020-08-17</div>
<!--    因?yàn)槲覀兾臋n頁(yè)面從上往下加載劣砍，所以先得有標(biāo)簽 所以我們script寫到標(biāo)簽的下面-->
    <script>
        // 返回的是一個(gè)元素對(duì)象
        var timer = document.getElementById('time');
        console.log(timer)
        // console.dir 打印我們返回的元素對(duì)象 更好的查看里面的屬性和方法
        console.dir(timer)
    </script>

根據(jù)標(biāo)簽名獲取元素

語(yǔ)法：document.getElementsByTagName('標(biāo)簽名') 或者 element.getElementsByTagName('標(biāo)簽名') 
作用：根據(jù)標(biāo)簽名獲取元素對(duì)象
參數(shù)：標(biāo)簽名
返回值：元素對(duì)象集合（偽數(shù)組，數(shù)組元素是元素對(duì)象）

<script>
    // 返回的是獲取過(guò)來(lái)元素對(duì)象的集合扇救，
    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])
    }

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

</script>

注意：getElementsByTagName()獲取到是動(dòng)態(tài)集合刑枝，即：當(dāng)頁(yè)面增加了標(biāo)簽，這個(gè)集合中也就增加了元素迅腔。

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>首頁(yè)</li>
        <li>產(chǎn)品</li>
    </ul>
</div>
<script>
    //  1装畅、getElementsByClassName根據(jù)類名獲取某些元素集合
    var boxs =  document.getElementsByClassName('box')
    console.log(boxs)
    // 2、 返回第一個(gè)
    var nav = document.querySelector('#nav')
    var li = document.querySelector('li')
    // 3沧烈、 querySelectorAll 返回指定選擇器所有
    var allBox = document.querySelectorAll('.box')
    var lis = document.querySelectorAll('li')

</script>
</body>

• 案例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p, div{
            width: 300px;
            height: 30px;
            line-height: 30px;
            color: #ffffff;
            background-color: skyblue;
        }
    </style>
</head>
<body>
<button>顯示當(dāng)前系統(tǒng)的時(shí)間</button>
<div>某個(gè)時(shí)間</div>
<p>32131</p>
<script>
    var button = document.querySelector('button')
    var div = document.querySelector('div')
    button.onclick = function () {
        div.innerHTML = getDate();
    }
    function getDate () {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var day = date.getDay();
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

        return '今天是：' + year + '年' + month + '月' + dates + '日' +  arr[day]
    }
    var p = document.querySelector('p')
    p.innerHTML = getDate();
</script>
</body>
</html>

獲取特殊元素（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>

事件基礎(chǔ)

JavaScript 使我們有能力創(chuàng)建動(dòng)態(tài)頁(yè)面，而事件是可以被 JavaScript 偵測(cè)到的行為锌雀。

事件三要素

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

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

常見(jiàn)的鼠標(biāo)事件

image

操JavaScript的 DOM 操作可以改變網(wǎng)頁(yè)內(nèi)容、結(jié)構(gòu)和樣式腋逆，我們可以利用 DOM 操作元素來(lái)改變?cè)乩锩娴膬?nèi)容双抽、屬性等。（注意：這些操作都是通過(guò)元素對(duì)象的屬性實(shí)現(xiàn)的）作元素

• 改變?cè)貎?nèi)容（獲取或設(shè)置）

  image

  innerText和innerHTML的區(qū)別

• 獲取內(nèi)容時(shí)的區(qū)別：
  innerText會(huì)去除空格和換行闲礼，而innerHTML會(huì)保留空格和換行

• 設(shè)置內(nèi)容時(shí)的區(qū)別：
  innerText不會(huì)識(shí)別html牍汹，而innerHTML會(huì)識(shí)別

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

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

</script>

常用元素的屬性操作

image

切換圖片案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 30px;
        }
    </style>
</head>

<body>
<div><button id="kzs">狂戰(zhàn)士</button>
    <button id="kpds">卡牌大師</button></div>

<img src="../imgs/狂戰(zhàn)士.jpg" alt="" width="300px" height="180px" title="狂戰(zhàn)士">
<script>
    // 獲取元素
    var kzs = document.getElementById('kzs');
    var kpds = document.getElementById('kpds');
    var imgh = document.querySelector('img');
    // 注冊(cè)事件
    kzs.onclick = function () {
        imgh.src = '../imgs/狂戰(zhàn)士.jpg';
        imgh.title = '狂戰(zhàn)士';
    }
    kpds.onclick = function () {
        imgh.src = '../imgs/kapaidashi.png';
        imgh.title = '卡牌大師';
    }

</script>

</body>
</html>

image

• 案例

  image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="" alt="" width="400px" height="360px">
<br>
<div></div>
<script>
    var imgS = document.querySelector('img')
    var divS = document.querySelector('div')
    var date = new Date();
    var h = date.getHours();
    // var h = 17
    if(h < 6){
      imgS.src = '../imgs/hao/z.gif';
      divS.innerHTML = '早上好';
    }else if(h < 12){
        imgS.src = '../imgs/hao/s.gif';
        divS.innerHTML = '上午好';
    }else if ( h < 18){
        imgS.src = '../imgs/hao/x.gif';
        divS.innerHTML = '下午好';
    }else {
        imgS.src = '../imgs/hao/w.gif';
        divS.innerHTML = '晚上好';
    }

</script>
</body>
</html>

表單元素的屬性操作

image

表單元素中有一些屬性如：disabled、checked柬泽、selected慎菲，元素對(duì)象的這些屬性的值是布爾型。

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

• 仿照京東顯示密碼

  image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }

        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }

        .box img {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }
    </style>
</head>
<body>
<div class="box">
    <label for="">
        <img src="../imgs/jd/close.png" alt="" id="eye">
    </label>
    <input type="password" name="" id="pwd">
</div>
<script>
    var eye = document.getElementById('eye')
    var pwd = document.getElementById('pwd')
    // 注冊(cè)事件
    var flag = 0;
    eye.onclick = function () {
       if (flag == 0){
           pwd.type = 'text';
           eye.src = '../imgs/jd/open.png';
           flag = 1;
       }else {
           pwd.type = 'password';
           eye.src = '../imgs/jd/close.png';
           flag = 0;
       }
    }
</script>
</body>
</html>

樣式屬性操作

image

• 方式1：通過(guò)操作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>

淘寶點(diǎn)擊關(guān)閉二維碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            /* display: block; */
        }

        .box img {
            width: 60px;
            margin-top: 5px;
        }

        .close-btn {
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="box">
    淘寶二維碼
    <img src="../imgs/tao.png" alt="">
    <i class="close-btn">×</i>
</div>
<script>
    var btn = document.querySelector('.close-btn')
    var box = document.querySelector('.box')
    btn.onclick = function () {
        box.style.display = 'none'
    }
</script>
</body>
</html>

image