2018-08-21day-27

weixin_34393428發表於2018-08-21

day02-js2

1、新增事件

新增事件方式
其主要方式如下程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新增事件</title>
</head>
<body>
    <div style="width:200px; height:200px; background-color:red" onclick="alert('這是一個div')"></div>
    <div style="width:200px; height:200px; background-color:blue" onclick="test()"></div>
    <div id="div" style="width:200px; height:200px; background-color:green"></div>
</body>
</html>
<script>
function test() {
    console.log('花田裡犯了錯,說好,破曉前忘掉')
}
var odiv = document.getElementById('div')
// odiv.onclick = function () {
//     console.log('遙遠的東方有一條龍')
// }
odiv.onclick = test
</script>

顯示隱藏圖片
操作div的display屬性，在block和none之間切換即可
可做到讓圖片隱藏與顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>顯示隱藏圖片</title>
</head>
<body>
    <div class="tu">
        <img src="feng.jpg" alt="可愛的鳳姐"">
    </div>
    <button id="btn">讓鳳姐消失</button>
    <button id="btn1" onclick="show()">讓鳳姐出現</button>
</body>
</html>
<script>
// 顯示和隱藏圖片操作的是div的display屬性，在block和none之間切換
var obutton = document.getElementById('btn')
obutton.onclick = function () {
    // 找到指定div，將其display屬性修改為none
    var odiv = document.getElementsByClassName('tu')[0]
    odiv.style.display = 'none'
}

function show() {
    var odiv = document.getElementsByClassName('tu')[0]
    odiv.style.display = 'block'
}
</script>

this使用
在匿名函式中的this就是當前物件
在onclick=demo(this) 就是當前節點
修改內容
this.innerHTML = 'xxx'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>this的使用</title>
</head>
<body>
    <div class="tang" style="width:200px; height:200px; background-color:red"></div>
    <div class="tang" style="width:200px; height:200px; background-color:blue" onclick="demo(this)"></div>
</body>
</html>
<script>
    // 點選div，將寬度有200px修改為400px
    var odiv = document.getElementsByClassName('tang')[0]
    odiv.onclick = function () {
        console.log(this)
        // this就是odiv
        this.style.width = '400px'
        // 給div新增內容
        this.innerHTML = '秦時明月漢時關,萬里長征人未還,但使龍城飛將在,不教胡馬度陰山'
    }

    function demo(obj) {
        // 這裡面的this是window，在js裡面寫的所有的函式都是window的函式，呼叫demo其實就是  window.demo()
        console.log(this)
        // var odiv = document.getElementsByClassName('tang')[1]
        obj.style.height = '400px'
        obj.innerHTML='兩個美女在逛街'
    }
</script>

效果


13280723-5c016c0ff68ef4b2.png
image.png

切換背景色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>切換div的背景色</title>
</head>
<body>
    <div id="bai" style="width:300px; height:300px; background-color:red;"></div>
</body>
</html>
<script>
var odiv = document.getElementById('bai')
odiv.onclick = function () {
    // 先獲取div的背景色
    color = this.style.backgroundColor
    if (color == 'red') {
        this.style.backgroundColor = 'yellow'
    } else {
        this.style.backgroundColor = 'red'
    }  
}
</script>

此程式碼的作用就是建立一個DIV，其背景色為紅色，滑鼠點選後，背景色變為黃色；當背景色為黃色時滑鼠點選背景色變為紅色。

表單內容控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表單內容控制</title>
</head>
<body>
    <input id="ip" type="text" value="請輸入使用者名稱">
    <input type="text" value="請輸入使用者名稱" onfocus="cleara(this)" onblur="recover(this)">
</body>
</html>
<script>
    // clear是關鍵字，不能使用函式名
function cleara(obj) {
    // console.log('clear')
    if (obj.value == "請輸入使用者名稱") {
        obj.value = ''
    }
}
function recover(obj) {
    if (obj.value == '') {
        obj.value = '請輸入使用者名稱'
    }
}
var oinput = document.getElementById('ip')
oinput.onfocus = function () {
    // 判斷要不要清空
    if (this.value == "請輸入使用者名稱") {
        this.value = ''
    }
}
oinput.onblur = function () {
    // 判斷內容是不是為空，如果為空變成下面這個
    if (this.value == '') {
        this.value = '請輸入使用者名稱'
    }
}
</script>
13280723-bea47d94958554b9.png
image.png

2、onload函式

window的事件，windows.onload = function () {} 是在整個文件載入完畢之後執行，但是自己寫的onclick的點選函式不能寫到onload裡面，因為內部函式只能在內部使用，不能再外部使用
如果實在是想用，
window.lala = function () {}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>onload函式</title>
    <script>
        // var a = '岳雲鵬'
        // demo()
        // onload是window的事件，意思就是等文件載入完畢之後來執行這個程式碼
        window.onload = function () {
            // var odiv = document.getElementById('kong')
            // console.log(odiv)
            // odiv.onclick = function () {
            //     this.style.backgroundColor = 'cyan'
            // }

            
        }
        function demo(obj) {
            obj.style.backgroundColor = 'cyan'
        }
        
    </script>
</head>
<body>
    <div id="kong" style="width:300px; height:300px; background-color:pink" onclick="demo(this)"></div>
</body>
<script>
    
    // console.log(a)
    // function demo() {
    //     console.log('你喜歡岳雲鵬的相聲嗎?')
    // }
</script>
</html>
<script>
    // alert(a)
    // demo()

    function test() {
        // function lala() {
        //     console.log('這是一個內部函式')
        // }
        // lala()
        window.lala = function () {
            console.log('這是lala函式')
        }
    }


    test()
    // test.lala()
    lala()
</script>

3、選項卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>選項卡</title>
    <style>
    button {
        width: 200px;
        height: 100px;
        font-size: 40px;
        background-color: pink;
        margin-left: 50px;
        display: inline-block;
    }
    div {
        width: 970px;
        height: 600px;
        font-size: 50px;
        background-color: yellow;
        margin-left: 50px;
        margin-top: 50px;
        display: none;
    }
    .active {
        font-size: 50px;
        background-color: blue;
    }
    .show {
        display: block;
    }
    </style>
</head>
<body>
    <button class="active" onclick="dudu(this, 0)">周杰倫</button>
    <button onclick="dudu(this, 1)">王力巨集</button>
    <button onclick="dudu(this, 2)">張學友</button>
    <button onclick="dudu(this, 3)">劉德華</button>
    <div class="show">菊花臺、千里之外、七里香、霍元甲、聽媽媽的話、稻香、雙節棍、簡單愛</div>
    <div>花田錯、龍的傳人、唯一</div>
    <div>慢慢、吻別、一千個傷心的理由</div>
    <div>謝謝你的愛、冰雨、天意、忘情水</div>
</body>
</html>
<script>
    // 得到所有的button
    var abuttons = document.getElementsByTagName('button')
    // 得到所有的div
    var adivs = document.getElementsByTagName('div')
    function dudu(obj, index) {
        // 先將所有的button的class屬性設定為空
        for (var i = 0; i < abuttons.length; i++) {
            abuttons[i].className = ''
            adivs[i].className = ''
        }
        // 給指定的button新增樣式
        obj.className = 'active'
        // 給指定的div新增樣式
        adivs[index].className = 'show'
    }
</script>

以上程式碼實現了點選不同的選項來輸出不同的內容


13280723-855f7d6ae27bf3e8.png
image.png

13280723-1213bec7ffab9549.png
image.png

另外一種程式碼方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>選項卡</title>
    <style>
    button {
        width: 200px;
        height: 100px;
        font-size: 40px;
        background-color: pink;
        margin-left: 50px;
        display: inline-block;
    }
    div {
        width: 970px;
        height: 600px;
        font-size: 50px;
        background-color: yellow;
        margin-left: 50px;
        margin-top: 50px;
        display: none;
    }
    .active {
        font-size: 50px;
        background-color: blue;
    }
    .show {
        display: block;
    }
    </style>
</head>
<body>
    <button class="active">王寶強</button>
    <button>馬蓉</button>
    <button>王助理</button>
    <button>啤教授</button>
    <div class="show">王寶強、王寶強、王寶強、王寶強、王寶強、王寶強</div>
    <div>馬蓉、馬蓉、馬蓉、馬蓉、馬蓉、馬蓉</div>
    <div>王助理、王助理、王助理、王助理、王助理、王助理</div>
    <div>啤教授、啤教授、啤教授、啤教授</div>
</body>
</html>
<script>
// 得到所有的button
var abuttons = document.getElementsByTagName('button')
var adivs = document.getElementsByTagName('div')
// 迴圈button陣列，給裡面每一個button新增點選事件
for (var i = 0; i < abuttons.length; i++) {
    // 給指定的button手動新增一個屬性，用來儲存是第幾個button
    abuttons[i].index = i
    abuttons[i].onclick = function () {
        // 首先清掉所有button和div上面的class
        for (var j = 0; j < abuttons.length; j++) {
            abuttons[j].className = ''
            adivs[j].className = ''
        }
        // 給指定的button新增樣式
        this.className = 'active'
        // console.log(i)
        // 給指定的div新增樣式
        adivs[this.index].className = 'show'
    }
}
</script>

4、定時器

定時器：分為兩種，一種是週期性定時器，一種是一次性定時器
週期性：每隔5s執行一次函式
一次性：幾秒之後執行一次函式，執行完畢定時器結束
var timer = setTimeout(fn, 5000)
5000ms之後執行fn一次。然後結束
銷燬定時器 clearTimeout(timer)
一次性定時器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>鳳姐消失</title>
</head>
<body>
    <div id="baby">
        <img height="800px" src="meinv.jpg" alt="氣質美女">
    </div>
    <button id="btn">點我給你福利</button>
</body>
</html>
<script>
    var odiv = document.getElementById('baby')
    var obtn = document.getElementById('btn')
    // timer就是一個定時器
    var timer = setTimeout(function () {
        odiv.style.display = 'none'
    }, 5000)

    obtn.onclick = function () {
        // 清除timer這個定時器
        clearTimeout(timer)
    }
</script>

此程式碼的功能為顯示圖片5s，如果點選button按鈕可以清除定時器而做到長期顯示圖片

週期性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>週期性定時器</title>
</head>
<body>
    <button onclick="demo()">一行司機上青天</button>
</body>
</html>
<script>
    var timer = setInterval(function () {
        console.log('兩個女孩鳴翠柳')
    }, 5000)

    function demo() {
        clearInterval(timer)
    }
</script>

計數器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>計數器</title>
    <style>
    div {
        width: 100%;
        height: 300px;
        line-height: 300px;
        text-align: center;
        font-size: 300px;
        background-color: pink;
    }
    </style>
</head>
<body>
    <div id="dudu">0</div>
</body>
</html>
<script>
var odiv = document.getElementById('dudu')
// 定義一個全域性變數，用來儲存定時器物件
var timer = null
// 定義一個全域性的計數器
var i = 0
odiv.onmouseover = function () {
    timer = setInterval(function () {
        i++
        // 設定div的內容
        odiv.innerHTML = i
    }, 1000)
}

odiv.onmouseout = function () {
    clearInterval(timer)
}
</script>
13280723-26b5b8abc30eff06.png
image.png

功能：當滑鼠在div區域內時，開始計數，計數為每秒+1，當滑鼠離開div區域時，停止計數；當滑鼠重新進入div區域時，計數功能在原來的基礎上開始計數。

5、獲取非行內樣式

IE瀏覽器獲取非行內樣式方式
obj.currentStyle['name']
火狐和谷歌獲取方式
getComputedStyle(odiv, null)['width']
獲取非行內樣式的相容性寫法
function getStyle(obj, name) {
return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, null)[name]
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>獲取非行內</title>
    <style>
    div {
        width: 300px;
        height: 300px;
        background-color: pink;
    }
    </style>
</head>
<body>
    <div id="lala"></div>
    <input type="text" id="ip">
    <button onclick="demo()">點我獲取div寬度</button>
</body>
</html>
<script>
var odiv = document.getElementById('lala')
function demo() {
    // 獲取div的寬度,只能獲取行內樣式
    // var kuan = odiv.style.width

    // 獲取非行內樣式
    // var kuan = odiv.currentStyle['width']
    // var kuan = getComputedStyle(odiv, null)['width']
    var kuan = getStyle(odiv, 'width')
    // 顯示到input框中
    var oinput = document.getElementById('ip')
    oinput.value = kuan
}

// 獲取非行內樣式的相容性寫法
function getStyle(obj, name) {
    return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, null)[name]
}
</script>
13280723-b2b68070acd5c0d6.png
image.png

6、BOM操作

window.setTimeout,window.setInterval
window.alert\window.confirm
window.open
window.history(back、go)
history.go(1) 去往前一個網址
history.go(2) 去往後一個網址
history.back() 倒退一個網址
location
href : 讀取得到當前的url，設定跳轉到指定的url
reload() : 重新整理整個頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BOM操作</title>
</head>
<body>
    <button id="btn">點我</button>
    <button id="btn1">摸我</button>
    <button id="btn2">張家輝</button>
    <button id="btn3">張家輝</button>
</body>
</html>
<script>
    var obutton = document.getElementById('btn')
    var obutton1 = document.getElementById('btn1')
    var obutton2 = document.getElementById('btn2')
    var obutton3 = document.getElementById('btn3')
    obutton.onclick = function () {
        ret = window.confirm('今天晚上準備吃什麼')
        if (ret == true) {
            console.log('你點選了確定')
        } else {
            console.log('你點選了取消')
        }
    }
    obutton1.onclick = function () {
        window.open('http://www.baidu.com/', '_self')
    }
    obutton2.onclick = function () {
        // window.history.go(2)
        window.history.back()
        // file:///C:/Users/ZBLi/Desktop/1805/day02/14-bom.html
    }
    obutton3.onclick = function () {
        // 得到當前的url
        // console.log(location.href)
        // location.href = 'http://www.baidu.com/'
        location.reload()
    }
</script>
13280723-a8000567fdd9a6f5.png

每個按鈕能實現不同的功能

7、DOM操作

children
parentNode
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling

firstChild
lastChild
previousSibling
nextSibling

tagName
createElement
removeChild
appendChild
insertBefore

setAttribute getAttribute

8、select下拉框和oninput事件

onchange : 事件，使用者點選下拉框觸發
selectedIndex : 使用者點選的option的下標，下標從0開始
options : osel.options 可以得到所有的option物件，這是一個陣列

input框的oninput事件，只要內容改變，就會觸發

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>select下拉框</title>
</head>
<body>
    <select name="刺客" id="sel">
        <option value="1">阿珂</option>
        <option value="2">蘭陵王</option>
        <option value="3">孫悟空</option>
        <option value="4">趙雲</option>
        <option value="5">李白</option>
    </select>
    <input type="text" id="ip">
</body>
</html>
<script>
    var osel = document.getElementById('sel')
    osel.onchange = function () {
        // alert('我被出發了')
        // alert(osel.selectedIndex)
        alert(osel.options[osel.selectedIndex].innerHTML)
    }

    var oinput = document.getElementById('ip')
    oinput.oninput = function () {
        console.log(this.value)
    }
</script>
13280723-26f5184ef805c7c4.png
image.png