js使用:

1.关闭页面(close):

​​​​​​2.打开页面:

3.警告框(alert):

4.确认框(confirm):

可是调节高度宽度。

例子:

javascript 复制代码
  <button  id="bt1">关闭页面</button>
    <button  id="bt2" onclick="b()">打开百度</button>
    <script>
        //可省略
        //对话框
    //   let str= 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')

    }
    </script>
 

2.跳转,前进,后退,刷新页面

跳转:

javascript 复制代码
  <a href="../day11/2.html">跳转</a>

前进后退:

javascript 复制代码
  <button>前进</button>
    <button>后退</button>
    <a href="3.html">aaaaa</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>

刷新页面:

javascript 复制代码
  <script>
        document.write('端口号'+location.host+'<br>' )
        document.write('端口号'+location.hostname+'<br>' )
        document.write('端口号'+location.href+'<br>' )
        function a(){
          location.reload()//相当于刷新页面
        }
        function b(){
            location.replace('2.html')
        }
  
    </script>

document用法:

javascript 复制代码
 <h2 class="bbb">document</h2>
    <h2 class="bbb">document</h2>
    <h2 id="aaa">adfghh</h2>
    <h2 id="aaa">asdfght</h2>
    <ul>
        <li>222</li>
        <li>13</li>
        <li>43</li>
        <li>we</li>
        <li>sd</li>
    </ul>

1,通过id获取元素,获取的是单个元素

javascript 复制代码
   document.getElementById('aaa').style.backgroundColor = 'blue'

2.通过class获取元素,获取到的是一个伪数组

javascript 复制代码
  document.getElementsByClassName('bbb')[0].style.backgroundColor = 'red'

3.通过标签名获取元素,获取到的是一个伪数组

javascript 复制代码
 // document.getElementsByTagName('li')[0].style.backgroundColor='green'
        let lis = document.getElementsByTagName('li')
        for (let i = 0; i < lis.length; i++) {
            document.getElementsByTagName('li')[i].style.color = 'green'
        }

4.通过选择器进行获取,只获取一个

javascript 复制代码
 document.querySelector('li').style.backgroundColor = 'yellow'

5.获取所有,伪数组

javascript 复制代码
 let li2 = document.querySelectorAll('li')
        for (let i = 0;i<li2.length; i++) {
            document.querySelectorAll('li')[i].style.fontSize = '30px'
        }

6.写入文本

javascript 复制代码
  document.write('<h2>hello word!</h2>')
相关推荐
楼田莉子几秒前
python小项目——学生管理系统
开发语言·python·学习
yuanpan8 分钟前
使用Python创建本地Http服务实现与外部系统数据对接
开发语言·python·http
bkspiderx26 分钟前
C++时区操作全版本指南(含C++03/C++11-17/C++20)
linux·开发语言·c++·c++20·时区
ljf883831 分钟前
Java导出复杂excel,自定义excel导出
java·开发语言·excel
真*小白32 分钟前
Python语法学习篇(三)【py3】
开发语言·python·学习
前端小巷子33 分钟前
JS打造“九宫格抽奖”
前端·javascript·面试
好望角雾眠43 分钟前
第四阶段C#通讯开发-1:通讯基础理论,串口,通讯模式,单位转换,代码示例
开发语言·笔记·c#·串口·通讯
不一样的故事1261 小时前
学习Python是一个循序渐进的过程,结合系统学习、持续实践和项目驱动,
开发语言·python·学习
eqwaak01 小时前
科技信息差(9.13)
大数据·开发语言·人工智能·华为·语言模型
郝学胜-神的一滴1 小时前
深入探索 Python 元组:从基础到高级应用
运维·服务器·开发语言·python·程序人生