js基础复习

最新推荐文章于 2024-09-28 17:32:53 发布

柠檬の夏季

最新推荐文章于 2024-09-28 17:32:53 发布

阅读量761

点赞数 8

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/performer02/article/details/142461738

版权

js复习

页面的前进和后退

页面的前进用history.forward()或history.go(1)来实现

页面的后退用history.back()或history.go(-1)来实现

与对应的按钮绑定点击事件后可实现页面的前进与后退

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>前进</button>
    <button>后退</button>
    <a href="3.html">跳转</a>
    <script>
        function a(){
            history.forward()
            // history.go(1)
        }
        function b(){
            history.back()
            // history.go(-1)
        }
        document.querySelector('button:nth-child(1)').onclick=a
        document.querySelector('button:nth-child(2)').onclick=b
    </script>
</body>
</html>

注意:前进和后退的前提是从第一个页面跳转到第二个页面时才能实现

关闭页面和弹出新页面

关闭页面需要绑定点击事件并用 close()来实现

弹出新页面则需要用到open()

下面也包括了弹出警告框和确认框的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="bt1">关闭页面</button>
    <button id="bt2" onclick="b()">打开百度</button>
    <script>
        // // window 可以省略
        // let str= window.prompt('请输入姓名:')
        // // 警告框
        // alert(str)
        // // 确认框
        // let flag=confirm('是否删除')
        // alert(flag)
        function a(){
            // 关闭页面
            close()
        }
        document.querySelector('#bt1').onclick=a
        function b(){
            open('a.html','新的页面','height=500px,left:300px,top=300px'
            ,'scrollbars=no','toolbar=nos')
        }
    </script>
</body>
</html>

获取元素

在页面中想要实现对不同元素的绑定与其他应用时,就要通过document.来获取具体的元素,有的方法获取的是一整个数组,这是可以与for循环结合使用,简单的有以下几种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2 class="bbb">document</h2>
    <h2 class="bbb">document</h2>
    <h2 id="aaa">asdasd</h2>
    <h2 id="aaa">asdasd</h2>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
        <li>55</li>
    </ul>
    <script>
        // 通过id获取元素,获取的是单个元素
        document.getElementById('aaa').style.backgroundColor='blue'
        // 通过class获取元素,获取到的是一个伪数组
        document.getElementsByClassName('bbb')[0].style.color='red'
        // 通过标签名获取元素
        // document.getElementsByTagName('li')[0].style.color='orange'
        let lis=document.getElementsByTagName('li')
        for(let i=0;i<lis.length;i++){
            document.getElementsByTagName('li')[i].style.color='orange'
        }
        // 根据选择器进行获取,只能获取第一个
        document.querySelector('li').style.backgroundColor='yellow'
        // 获取所有,伪数组
        let li2=document.querySelectorAll('li')
        for(let i=0;i<li2.length;i++){
            document.querySelectorAll('li')[i].style.fontSize='30px'
        }
        // 写入文本
        document.write('<h2>hello word!</h2>')
    </script>
</body>
</html>