Day23 js应用

1 DOM操作

1.1 DOM简介

DOM(document object mode的缩写) - 文本对象模型

document对象: js会将整个当前网页转换成一个js对象叫document; 如果想要通过js获取网页中的内容，必须通过document来获取（这个对象系统自动创建，程序员只需要使用）
document结构: 是一个树结构, document下是body标签节点，再往下是各个其它标签节点(Node, 是js中Element对象指向的是html中的标签)；Element对象有哪些属性，就看Element对应的标签有哪些html属性

1.2 DOM节点操作

1.2.1 获取节点

直接获取
- 通过id值来获取节点: document.getElementById(id属性值) - 返回是标签对应的节点对象
  - HTML标签在js全部都是对象，标签的属性就是对象的属性；双标签的内容对应是innerText和innerHTML属性
  - innerHTML指向的是内容的文本和标签； innerText只指向内容中的文本
- 通过class值获取节点:document.getElementsByClassName(class属性值) - 返回一个数组
- 通过标签名获取节点: document.getElementsByTagName(标签名) - 返回一个数组
- 通过name属性获取节点(被淘汰)： document.getElementsByName(name属性值)
获取父节点: 节点.parentElement - 获取指定节点对应的父节点
获取子节点
- 获取所有子节点: 节点.children - 获取自定节点所有的子节点(不会获取孙子节点)
- 获取第一个子节点: 节点.firstElementChild
- 获取最后一个子节点: 节点.lastElementChild

1.2.2 创建节点

document.createElement(标签名) - 创建指定标签对象的节点对象
注意: 创建的节点在没有添加在网页中的时候是不会显示的

1.2.3 添加节点

节点1.appendChild(节点2) - 在节点1的最后添加节点2
节点1.insertBefore(节点2, 节点3) - 在节点1中的节点3前出入节点2

1.2.4 拷贝节点

节点.cloneNode() - 赋值指定节点，产生一个新的节点

1.2.5 删除节点

节点1.removeChild(节点2) - 删除节点1中的节点2
节点.remove() - 删除指定节点

    <body>
        
        <p id="p1" class="c1">我是段落</p>
        <img class="c1" src="img/luffy.jpg"/>
        <div id="div1">
            我是div
            <p>我是段落2</p>
        </div>
        
        <div id="div2">
            <h1 id="h1">我是标题1</h1>
            <h1 id="h2">我是标题2</h1>
        </div>

        <script type="text/javascript">
            // 1. 获取节点
            // 1.1 直接获取
            // a) 通过id值来获取节点: document.getElementById(id属性值)  - 返回是标签对应的节点对象
            //补充: HTML标签在js全部都是对象，标签的属性就是对象的属性；双标签的内容对应是innerText和innerHTML属性
            //      innerHTML指向的是内容的文本和标签； innerText只指向内容中的文本
            pNode = document.getElementById('p1')
            console.log(pNode, typeof(pNode), pNode.id, pNode.innerHTML, pNode.innerText)
            
            divNode = document.getElementById('div1')
            console.log('html:',divNode.innerHTML, typeof(divNode.innerHTML))
            console.log('text:', divNode.innerText)
            
//          divNode.innerText = "<a href='https://www.baidu.com'>我是超链接</a>"
//          divNode.innerHTML = "<a href='https://www.baidu.com'>我是超链接</a>"

            divNode.innerHTML = "<p id='p2'>我是段落3</p>"
            
            //b) 通过class值获取节点: document.getElementsByClassName(class属性值) - 返回一个数组
            c1NodeArray = document.getElementsByClassName('c1')
            console.log(c1NodeArray)
            //根据下标获取元素
            imgNode = c1NodeArray[1]
            imgNode.title = '路飞'
            
            //c) 通过标签名获取节点: document.getElementsByTagName(标签名) - 返回一个数组 
            pNodes = document.getElementsByTagName('p')
            console.log(pNodes)
             
            //d)通过name属性获取节点(被淘汰)： document.getElementsByName(name属性值)
            //document.getElementsByName()
            
            //1.2获取父节点
            // 节点.parentElement  - 获取指定节点对应的父节点
            bodyNode = pNode.parentElement
            console.log(bodyNode)
            
            //1.3获取子节点
            //a)获取所有子节点: 节点.children  - 获取自定节点所有的子节点(不会获取孙子节点)
            children1 = bodyNode.children
            console.log(children1)
            
            //b)获取第一个子节点: 节点.firstElementChild
             firstNode = bodyNode.firstElementChild
             console.log(firstNode)
             
             //c)获取最后一个子节点: 节点.lastElementChild
             lastNode = bodyNode.lastElementChild
             console.log(lastNode)  
             
            // 2.创建节点
            //document.createElement(标签名)  - 创建指定标签对象的节点对象
            //注意: 创建的节点在没有添加在网页中的时候是不会显示的
            inputNode = document.createElement('input')
            
            //3.添加节点
            div2Node = document.getElementById('div2')
            
            // 节点1.appendChild(节点2) - 在节点1的最后添加节点2
            div2Node.appendChild(inputNode)
            
            // 节点1.insertBefore(节点2, 节点3) - 在节点1中的节点3前出入节点2
            div2Node.insertBefore(inputNode, div2Node.firstElementChild)
            
            // 4.拷贝节点
            // 节点.cloneNode()  - 赋值指定节点，产生一个新的节点
            inputNode2 = inputNode.cloneNode()
            inputNode2.placeholder = '新节点'
            div2Node.appendChild(inputNode2)
            
            //5.删除节点
            //a)节点1.removeChild(节点2)  -  删除节点1中的节点2
            div2Node.removeChild(div2Node.firstElementChild)
            
            //b)节点.remove() - 删除指定节点
            div2Node.remove()           
        </script>
    </body>

练习有个三行三列的表格，实现以下功能

用js将table的背景颜色设置为随机颜色
将第一列的文字颜色全部变成红色
在最后插入一行表格，内容分别是 41，42，43

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <table id="t1" border="" cellspacing="" cellpadding="">
            <tr id="tr1">
                <td>11</td>
                <td>12</td>
                <td>13</td>
            </tr>
            <tr id="tr2">
                <td>21</td>
                <td>22</td>
                <td>23</td>
            </tr>
            <tr id="tr3">
                <td>31</td>
                <td>32</td>
                <td>33</td>
            </tr>
            
        </table>

        <script type="text/javascript">
            /*
            //产生1-10的随机整数
            randomNum = parseInt(Math.random()*9+1)
            console.log(randomNum)
            
            //产生0-255的随机整数
            randomNum = parseInt(Math.random()*255)
            console.log(randomNum)
            */
            //1)用js将table的背景颜色设置为随机颜色
            //获取table节点
            tableNode = document.getElementById('t1')
            //产生随机颜色值
            red = parseInt(Math.random()*255)
            green = parseInt(Math.random()*255)
            blue = parseInt(Math.random()*255)
            //设置背景颜色属性
            tableNode.style.backgroundColor = 'rgba('+red+','+green+','+blue+','+'0.1)'
            
            //2)将第一列的文字颜色全部变成红色
            //拿所有的tr
            trNodes = document.getElementsByTagName('tr')
            console.log(trNodes)
            for(x in trNodes){
                console.log(x,"length")
                if(x == 'length'){
                    break
                }
                //获取每个tr
                trNode = trNodes[x]
                //获取每一行的第一个td
                tdNode = trNode.firstElementChild
                //修改文字颜色
                //tdNode.style.color = 'red'
                tdNode.style = 'color:red; font-size:25px'
            }
            
            //3)在最后插入一行表格，内容分别是 41，42，43
            trNode = document.createElement('tr')
            tdNode = document.createElement('td')
            tdNode.innerText = '41'
            trNode.appendChild(tdNode)
            
            tdNode = tdNode.cloneNode()
            tdNode.innerText = '42'
            trNode.appendChild(tdNode)
            
            tdNode = tdNode.cloneNode()
            tdNode.innerText = '43'
            trNode.appendChild(tdNode)
//          for(x=1;x<=3;x++){
//              tdNode = document.createElement('td')
//              tdNode.innerText = '4'+x
//              trNode.appendChild(tdNode)
//          }
//          
            tableNode.appendChild(trNode)
                    
        </script>
    </body>
</html>

2 BOM操作

2.1 什么是BOM

BOM(browser object model)浏览器对象模型
js自带一个window对象，指向当前浏览器；js中所有的全局变量都是绑定在window对象上的属性
在使用的时候，window可以省略

2.2 window基本操作

2.2.1 打开新的窗口：open(url, name属性, 窗口大小 )

打开新的窗口: open(url) - 在新的窗口中打开新页面
打开新的窗口, 同时设置窗口的宽度和高度

2.2.2 关闭窗口

窗口对象.close()
- window.close() / close() - 关闭当前窗口
- 关闭其他窗口窗口对象.close()

2.2.3 移动当前窗口只对设置了宽高的窗口有效

窗口对象.moveTo(x, y)

2.2.4 获取窗口的宽度和高度

innerWidth/innerHeight - 获取浏览器能够显示内容的部分的宽高
outerWidth/outerHeight - 整个浏览器的宽高

2.2.5 弹框

只有确定按钮再加提示信息的弹框: alert('提示信息!')
一个提示信息，再加确定和取消按钮；根据返回值是true还是false来判断选择是确定还是取消: confirm('是否删除?')
一个提示信息，再加一个输入框和取消确定按钮；根据返回值是否是null来判断点击的是取消还是确定: prompt('提示信息','输入框中默认值')

<script type="text/javascript">
    //1.什么是BOM
    //BOM(browser object model)浏览器对象模型
    //js自带一个window对象，指向当前浏览器；js中所有的全局变量都是绑定在window对象上的属性
    //在使用的时候，window可以省略
    num = 10    // 相当于window.num = 10
    console.log(window.num, num)
    
    function func1(){
        console.log('我是函数')
    }
    window.func1()
    
    //2.window基本操作
    //1) 打开新的窗口
    //open(url, name属性, 窗口大小 )
    //a）打开新的窗口: open(url) - 在新的窗口中打开新页面, 
    //new_window = window.open('https://www.baidu.com')
    //console.log(new_window)
    //b) 打开新的窗口, 同时设置窗口的宽度和高度
    //new_window2 = open('https://www.baidu.com','','width=400,height=300')
    
    //2)关闭窗口
    //窗口对象.close()
    //window.close() / close()  - 关闭当前窗口
    //close()
    
    //关闭其他窗口
    //new_window2.close()
    
    //3)移动当前窗口
    //new_window2.moveTo(100, 100)
    
    //4)获取窗口的宽度和高度
    // innerWidth/innerHeight  - 获取浏览器能够显示内容的部分的宽高
    //console.log(new_window2.innerWidth, new_window2.innerHeight)
    // outerWidth/outerHeight - 整个浏览器的宽高
    //console.log(new_window2.outerWidth, new_window2.outerHeight)  
    
    //3.弹框
    //1) 只有确定按钮再加提示信息的弹框
    alert('提示信息!')
    
    //2)一个提示信息，再加确定和取消按钮；根据返回值是true还是false来判断选择是确定还是取消
    result = confirm('是否删除?')
    console.log(result)
    
    //3)一个提示信息，再加一个输入框和取消确定按钮；根据返回值是否是null来判断点击的是取消还是确定
    result = prompt('提示信息','输入框中默认值')
    console.log(result)
</script>

3 定时事件

3.1 开启定时

setTimeout(函数, 定时时间, 实参列表) - 指定时间后调用指定函数，并且传入指定的参数; 返回一个定时器对象
- 函数 - 可以是匿名函数，也可以是普通函数的函数名
- 定时时间 - 单位是毫秒
- 实参列表 - 函数提供参数
setInterval(函数,定时时间，参数列表) - 每隔指定的时间调用一次函数

3.2 清除定时

clearTimeout(定时对象)
clearInterval(定时对象)

<script type="text/javascript">
    //1. 开启定时
    t1 = setTimeout(function(){
        console.log('时间到！')
    }, 1000)
    
    t2 = setTimeout(function(name, age){
        console.log(name, age)
    }, 3000, '小明', 18)
    
    //t1和t3的功能一样
    function timeFunc(){
        console.log('时间到了')
    }
    t3 = setTimeout(timeFunc, 1000)
    
    /*
     2)setInterval(函数,定时时间，参数列表) - 每隔指定的时间调用一次函数
     */
    num = 1
    t4 = setInterval(function(){
        num ++
        console.log('~~~~:',num)
        if(num == 10){
            clearInterval(t4)
        }
    }, 2000)
    
    // 2.清除定时
    //clearTimeout(定时对象)
    clearTimeout(t2)
    //clearInterval(定时对象)
</script>

练习：实现5s后自动跳转到百度页面

    <body>
        <p id="p1">5秒后自动跳转</p>
        
        <script type="text/javascript">
            time = 5
            pNode = document.getElementById('p1')
            t1 = setTimeout(function(){
                time--
                pNode.innerText = time+'秒后自动跳转'
                if(time == 0){
                    open('https://www.baidu.com')
                    clearInterval(t1)
                }           
            }, 1000)
        </script>
    </body>

4 事件

4.1 事件简介

js是事件驱动语言
事件三要素: 事件源、事件、事件驱动程序
事件源发送某个事件就做什么事情(事件驱动程序)

4.2 事件的绑定

在标签内部给标签的事件属性赋值
注意: 这种方式绑定的时候，this指向的是window
通过给节点对象的事件属性赋值来绑定
注意: 这种方式绑定的时候，this指向的是事件源
通过addEventListener方法进行绑定
- 语法
  - 事件源节点.addEventListener(事件名称,事件驱动程序)
- 说明
  - 事件名称 - 事件属性名去掉on
  - 事件驱动程序 - 事件发生后需要调用的函数
- 注意
  - this是事件源
  - 可以给同一个节点的同一个事件绑定不同的事件驱动程序

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--事件绑定方式1（不推荐使用）-->
        <button onclick="alert('你好！')">按钮1</button>
        <button id="btn1" onclick="btnClick()">删除1</button>
        <button id="btn2" onclick="btnClick()">删除2</button>
        <br /><br />
        
        <!--事件绑定方式2（推荐使用）-->
        <button id="btn3">删除</button>
        <button class="btn1">删除3</button>
        <button class="btn1">删除4</button>
        <button class="btn1">删除5</button>
        <br /><br />
        
        <!--事件绑定方式3（推荐使用）-->
        <button id="btn4">按钮</button>
        
    </body>
</html>

<script type="text/javascript">
    // 1) 在标签内部给标签的事件属性赋值
    // 注意: 这种方式绑定的时候，this指向的是window
    function btnClick(){
        console.log(this)
        result = confirm('是否删除?')
        if(result){
            document.getElementById('btn1').remove()
        }
    }   
    // 2) 通过给节点对象的事件属性赋值来绑定
    // 注意: 这种方式绑定的时候，this指向的是事件源
    btnNode = document.getElementById('btn3')
    // 给事件属性赋函数名
    btnNode.onclick = btnClick     
    
    //获取所有class值是btn1的标签对应的节点
    btn1Nodes = document.getElementsByClassName('btn1')
    for(x=0;x<btn1Nodes.length;x++){
        btn1Node = btn1Nodes[x]
        // 给事件属性赋匿名函数
        btn1Node.onclick = function(){
            console.log(this)
            result = confirm('是否删除?')
            if(result){
                this.remove()
            }
        }
    }   
    // 3)通过addEventListener方法进行绑定
    btnNode4 = document.getElementById('btn4')
    btnNode4.addEventListener('click', function(){
        console.log(this)
        alert('你好！')
    })
    btnNode4.addEventListener('click', function(){
        this.style.color = 'red'
    })
</script>

5 常见事件类型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            //1.onload事件 - 页面加载完成对应的事件(标签加载成功)
            window.onload = function(){
                //写在这儿的代码，在页面加载完成后才会执行
                pNode = document.getElementById('p1')
                console.log(pNode)
            }
        </script>
    </head>
    <body>
        <p id="p1">我是段落</p>
        <input type="" name="input1" id="input1" value="" />
        <input type="" name="input2" id="input2" value="" />
    </body>
</html>

<script type="text/javascript">
    //2.鼠标事件
    pNode = document.getElementById('p1')
    // 1)onclick - 鼠标点击事件
    pNode.onclick = function(evt){
        alert('p标签被点击')
        console.log(evt)
    }
    
    //2)onmouseover - 鼠标悬停事件
    pNode.onmouseover = function(){
        //alert('鼠标移动到标签上')
        this.style = 'background-color:yellow'
    }
    
    //3) onmouseout - 鼠标离开事件
    pNode.onmouseout = function(){
        this.style = 'background-color:pink'
    }
    
    //3.键盘事件
    //键盘事件一般绑定在输入框对应的标签上
    //1)onkeypress - 按下弹起
    inputNode = document.getElementById('input1')
    inputNode.onkeypress = function(evt){
        console.log('键盘按下弹起')
        console.log(evt)
    }
    
    //2)onkeydown - 按键按下 、 onkeyup - 按键弹起
    inputNode.onkeydown = function(){
        console.log('键盘按下')
    }
    inputNode.onkeyup = function(){
        console.log('键盘弹起')
    }
    
    //4.输入框事件
    //onchange - 输入框中的输入内容的时候按回车
    inputNode2 = document.getElementById('input2')
    inputNode2.onchange = function(evt){
        console.log('内容发生改变')
        console.log(evt)
    }
    
    //oninput - 正在输入
    inputNode2.oninput = function(){
        console.log('正在输入')
    }       
    //5.事件对象
    /*
    每个事件驱动程序中，都可以设置一个参数来表示当前事件对象。不同类型的事件对应事件类型和事件属性不同
    1)鼠标事件对象
    clientX/clientY  - 鼠标的位置到浏览器左边和顶部的距离
    offsetX/offsetY  - 鼠标的位置到事件源标签左边和顶部的距离
    
    2)键盘事件对象
    key - 哪个按键被按下
    */
</script>

最后编辑于：2019.05.20 20:36:04

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 199,830评论 5赞 468
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 83,992评论 2赞 376
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 146,875评论 0赞 331
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 53,837评论 1赞 271
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 62,734评论 5赞 360
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,091评论 1赞 277
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,550评论 3赞 390
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,217评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,368评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,298评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,350评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,027评论 3赞 315
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,623评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,706评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,940评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,349评论 2赞 346
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,936评论 2赞 341

Day23 js应用

1 DOM操作

1.1 DOM简介

1.2 DOM节点操作

1.2.1 获取节点

1.2.2 创建节点

1.2.3 添加节点

1.2.4 拷贝节点

1.2.5 删除节点

2 BOM操作

2.1 什么是BOM

2.2 window基本操作

2.2.1 打开新的窗口：open(url, name属性, 窗口大小 )

2.2.2 关闭窗口

2.2.3 移动当前窗口 只对设置了宽高的窗口有效

2.2.4 获取窗口的宽度和高度

2.2.5 弹框

3 定时事件

3.1 开启定时

3.2 清除定时

4 事件

4.1 事件简介

4.2 事件的绑定

5 常见事件类型

推荐阅读更多精彩内容

2.2.3 移动当前窗口只对设置了宽高的窗口有效