当前位置: 首页 > article >正文

js使用:

1.关闭页面(close):

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

3.警告框(alert)

4.确认框(confirm):

可是调节高度宽度。

例子:

  <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.跳转,前进,后退,刷新页面

跳转:

  <a href="../day11/2.html">跳转</a>

前进后退:

  <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>

刷新页面:

  <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用法:

 <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获取元素,获取的是单个元素

   document.getElementById('aaa').style.backgroundColor = 'blue'

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

  document.getElementsByClassName('bbb')[0].style.backgroundColor = 'red'

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

 // 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.通过选择器进行获取,只获取一个

 document.querySelector('li').style.backgroundColor = 'yellow'

5.获取所有,伪数组

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

6.写入文本

  document.write('<h2>hello word!</h2>')


http://www.kler.cn/a/316697.html

相关文章:

  • 微服务即时通讯系统的实现(客户端)----(1)
  • 算法学习第一弹——C++基础
  • 基于 Python Django 的二手房间可视化系统分析
  • git入门环境搭建
  • 机器学习总结
  • 前端垂直居中的多种实现方式及应用分析
  • 银行项目测试,基础业务知识,一文全掌握!
  • 【C语言】__attribute__((constructor)) 和 __attribute__((destructor))详细解析
  • 基于微信小程序的商品展示+ssm(lw+演示+源码+运行)
  • 【论文速看】DL最新进展20240923-长尾综述、人脸防伪、图像分割
  • 非root安装Augustus报错解决
  • 速盾:凡科建站开cdn了吗?
  • C++: 使用红黑树模拟实现STL中的map和set
  • MySQL篇(窗口函数/公用表达式(CTE))(持续更新迭代)
  • “明月寄情,文化共融”iEnglish助力青少年用英语讲述中国故事
  • 【PostgreSQL】PostgreSQL数据库允许其他IP连接到数据库(Windows Linux)
  • 【小六壬占卜代码】
  • STM32的GPIO的八种工作模式
  • 计算机毕业设计 奖学金评定管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解
  • 牛客周赛 Round 60(思维、逆元、组合数、概率DP)
  • 箭头与数字识别系统源码分享
  • STM32F407单片机编程入门(十六) DMA详解及ADC-DMA方式采集含源码
  • 『功能项目』主角属性值显示【75】
  • html+css+js网页设计 旅游 穷游10个页面
  • 【Qt笔记】QTabWidget控件详解
  • 828华为云征文 | 云服务器Flexus X实例,搭建MC我的世界服务器