Web Apls简介

最新推荐文章于 2024-06-15 11:46:27 发布

2301_80065822

最新推荐文章于 2024-06-15 11:46:27 发布

阅读量889

点赞数 11

文章标签：前端

本文链接：https://blog.csdn.net/2301_80065822/article/details/137997544

版权

Web Apls简介

1.APl的定义：

是一些预先定义的函数，目的是提供应用程序与开发人员基于软件或硬件得以访问一组例程的能力，而又无需访问源代码或理解内部工作机制的细节；

简单理解：是给程序员提供的一种工具，以便能够更轻松的实现想要完成的功能。

2.Web Apl的定义：

是浏览器提供的一套操作浏览器功能和页面元素的APl（BOM和DOM）

3.DOM

定义：

是W3C组织推荐的处理可扩展标记语言的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构，样式。

DOM树：

DOM把以上内都看作是对象。

获取页面中元素的方式：

根据ID获取

使用getElementByld( )方法可以获取带有ID的元素对象。
根据标签名获取

通过HTML5新增的方法获取

<body>
  <div class="box">盒子1号</div>
  <div class="box">盒子2号</div>
  <div class="box">盒子3号</div>
  <div id="nav">
 <ul>
    <li>我的基本信息</li>
    <li>我的作品</li>
    <li>我的家乡</li>
  </ul>
  </div>
<script>
var nav = document.querySelector('#nav');
console.log(nav);
</script>

特殊元素获取

时间三要素：

事件源：事件被出发的对象。

var btn  = document.getElementId('btn');

事件类型:如何触发，什么事件，比如鼠标点击（onclick)还是鼠标经过，还是键盘按下
事件处理程序：通过一个函数赋值的方式完成。

执行事件的步骤：

获取事件源

注册事件（绑定事件）

添加事件处理程序（采取函数赋值形式）

操作元素总结：

4.BOM

定义：

是浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window

BOM由一些列相关的对象构成，并且每个对象都提供了很多方法与属性

<script>
    window.addEventListener('resize',function(){
console.log('真的变了哎');
    })
</script>

<script>
setInterval(function(){
    console.log('继续输出哈');
},1000);
</script>

<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>

</div>

<script>
    var hour = document.querySelector('.hour');
    var minute = document.querySelector('.minute');
    var socond = document.querySelector('.second');
var inputTime = +new Date('2024-4-19 19 : 05 : 53');
countDown();
setInterval(countDown,1000);
    function countDown(time){
    var nowTime = +new Date();
    
    var times = (inputTime - nowTime) / 1000;
    var h = parseInt(times / 60 / 60 % 60);
    m = m < 10 ? '0' + m : m;
    minute.InnerHTML = m;
    var s= parseINT(times % 60);
    s = s < 10?'0' + s : s;
    socond.innerHTML = s;
}
</script>