web API

最新推荐文章于 2022-02-19 17:07:44 发布

xiaoxinscholar

最新推荐文章于 2022-02-19 17:07:44 发布

阅读量539

点赞数

本文链接：https://blog.csdn.net/xiaoxinscholar/article/details/108968167

版权

一、web API

一、简介

1.API

API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无须访问源码，或理解内部工作机制的细节

任何开发语言都可以有自己的API
API的特征输入和输入（I/O）
API的使用方法

2.web API 接口的概念

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

特指浏览器给JS提供的API（一组方法）

3.节点

DOM的最小组成单位叫做节点，文档的树形结构（DOM树），就是由各种不同类型的节点组成

每个节点都可以看做是文档树的一片叶子或一个枝干

最顶层的节点就是document节点，他代表了整个文档；是文档的根节点

每张网页都有自己的document节点，window.document属性就指向这个节点的

只要浏览器开始载入HTML文档，这个节点对象就存在了，可以直接调用

每个HTML标签元素，在DOM树上都会转化成一个Element节点对象

文档里面最高一层一般是HTML标签，其他HTML标签节点都是他的下级

除了根节点之外，其他节点对于周围的节点都存在三种关系：

父节点关系(parentNode):直接的那个上级节点
子节点关系(childNodes):直接的下级节点
同级节点关系(sibling):拥有同一个父节点的节点

4.查找节点的方法

document.getElementsByTagName():根据标签名直接查找获取节点对象
document.getElementsByClassName():根据class属性值查找
document.getElementById():根据id属性查找节点
document.getElementsByName():通过name属性值查找节点对象
document.querySelector():不管有多少符合条件的，只能找到一个
document.querySelectorAll():查找所有符合条件的节点对象
document.querySelectorAll():查找所有符合条件的节点对象,即使id重名也可以找到,多个条件使用逗号隔开

二、事件

1.什么是事件

事件的三要素

事件源：触发(被)事件的元素
事件类型：事件的触发方式(例如鼠标点击或键盘点击)
事件处理程序：事件触发后要执行的代码(函数形式)

2.事件绑定

行内方式绑定(元素属性)

<input type="button" value="按钮" onclick="console.log(1)">

//如果直接将事件处理程序写在行内中，那么this指向当前节点对象
<input type="button" value="按钮1" onclick="fun1()">
<script>
function fun1(){
    // console.log(this.value);
    console.log(this);
}
</script>

动态绑定

<input type="button" value="按钮" id="btn">
//先根据id获取节点对象，然后使用节点对象的属性赋值的方式绑定事件
<script>
    var ps = document.getElementById('btn');
    btn.onclick = function () {
        console.log(2);
    }
</script>

事件监听

addEventListener：添加事件监听，第一个参数是要执行的动作，第二个参数是执行完动作后执行的操作·

//添加事件监听者
<input type="button" value="按钮" id="btn2">
//先获取节点对象，然后调用节点对象的方法，添加事件监听者
<script>
	var btn2 = document.getElementById('btn2');
    btn2.addEventListener('click',function(){
        console.log(3);
    });
</script>

3.三种事件绑定的比较

this关键字的问题
- 如果使用行内绑定，且绑定事件的处理程序是一个独立的函数，那么函数中的this指向window对象
在同一个元素身上绑定了对个相同的事件，处理程序都是不一样的
行内绑定如果有相同的事件绑定，那么谁在前面执行谁，在行内中从左到右先找到谁就用谁
- 动态绑定如果有相同的事件绑定，那么谁在后面执行谁，后面的事件绑定会替换前面的事件绑定
- 事件监听，如果有相同的事件绑定，事件会从上往下挨个执行，不会被替换
事件监听方式绑定事件后，可以进行解绑，其他两种不可以

var af = function(){
    console.log(85555);
}
btn2.addEventListener('click',af);

// 将绑定在节点元素身上的事件进行解绑
btn2.removeEventListener('click',af);

事件监听的绑定方式可以选择事件处理阶段，另外两种不可以

三、事件类型

1.页面加载事件

load:一个资源及其相关资源完成加载后触发的事件

<body onload="f1()">
</body>
<script>
    function f1(){
        console.log(333);
    }
</script>

2.焦点事件

onfocus：元素获得焦点

onblur：元素失去焦点

绑定在有焦点的元素身上

<body>
    <input type="text" id="text" value="请输入用户名">
</body>
<script>
    var t = document.getElementById('text');
    t.onfocus = function(){
        console.log('hhhh');
    }
    t.onblur = function(){
        console.log('gggg');
    }
</script>

3.鼠标事件

事件名	描述
onclick	鼠标单击
ondblclick	鼠标双击
onmouseover	鼠标移动某元素之上
onmouseout	鼠标从某元素上移开
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开
onmousemove	鼠标被移动
oncontextmenu	鼠标右击
onmouseleave	指针移出元素范围外(不冒泡)
select	文本被选中
onmouseenter	指针移动到有事件的监听的元素内

var d= document.getElementById('d');
d.onmouseover = function(){
    console.log('天才');
}
d.onmouseout = function(){
    console.log(222);
}
d.onmousedown = function(q){
    console.log(333);
}
d.onmouseup = function(q){
    console.log(333);
}

4.键盘事件

事件名	描述
Onkeydown	某个键盘的键被按下
onkeyup	某个键盘的键被松开
onkeypress	某个键盘的键被按下且松开

<body>
    <form action="xx.xx" method="post" id="ff">
        用户名: <input type="text"> <br>
        密码:   <input type="password"> <br>
        <input type="submit" value="提交">
        <input type="reset" value="重新填写">
    </form>
</body>
<script>
    var ff = document.getElementById('ff');
    // 当向服务器提交表单数据时触发事件，事件要比提交数据这个动作更先执行
    // 此时的onsubmit作用于整个form表单
    ff.onsubmit = function(){
        alert('确认提交');
        return false;
    }
    // 使用重置按钮，清空表单数据时触发，事件先执行
    ff.onreset = function(){
        alert('是否要重新填写');
        return false;
    }
</script>

5.内容变化事件

onchange :域的内容发生改变，一般用于文件选择器和下拉列表

oninput :当内容改变时触发(值变化事件)

<body>
    <input type="text" id="tt">
</body>
<script>
    var tt = document.getElementById('tt');
    // 当内容改变且失去焦点的时候触发
    tt.onchange = function(){
        console.log('hhhh');
    }
    // 只要内容有变化则触发事件
    tt.oninput = function(){
        console.log('kkk');
    }
</script>

四、事件对象

1.概述

事件发生以后，系统会调用我们写好的事件处理程序

系统会在调用处理程序时，将事件发生的有关事件的一切信息，封装成一个对象，作为参数传给监听函数(事件处理程序)，我们把这个现象称为事件对象

有关事件发生的一切信息，都包含在这个事件对象中；

根据事件类型的不同，事件对象中包含的信息也有所不同；

如点击事件，包含鼠标点击的横纵坐标位置，键盘事件中，包含键盘的键值等；

<body>
    <div id="d1">
        <p>
            ssaaa
        </p>
    </div>
    <input type="text" id="tt">
</body>
<script>
    var d1 = document.getElementById('d1');
    d1.onclick = function(xxx){
        console.log(xxx);
    }
    document.getElementById('tt').onkeyup = function(ccc){
        console.log(ccc);
    };
</script>

2.事件对象中常用的属性以及方法

2.1属性

event.bubbles: 属性返回一个布尔值，表示当前事件是否会冒泡；

event.eventPhase：返回一个整数值，表示事件留在传播阶段的位置

0：事件目前并没有发生
1：事件目前处于捕获阶段
2：事件到达目标节点
3：事件处于冒泡阶段

event.type：返回一个字符串，表示事件类型，大小写敏感

event.timeStamp：返回一个毫秒时间戳，表示事件发生的时间；

clientX、clientY：获取鼠标事件触发的坐标

<body>
    <div id="d">
        kkkk
        <input type="text" id="t">
    </div>
</body>
<script>
    document.getElementById('d').onfocus = function(){
        console.log(33);
    }
    // document.getElementById('t').onfocus = function(ev){
    //     console.log(ev.bubbles);
    //     console.log(44);
    // }
    document.getElementById('d').onclick = function(ev){
        console.log(ev);
        console.log(55);
    }
</script>

3.事件代理

target：获取触发事件的节点对象

currentTarget：获取事件源(打印这个id所包含的全部内容)

<body>
    <div id="d">
        <p id="p">1111</p>
        <p>444</p>
        <p>555</p>
    </div>
</body>
<script>
    var d = document.getElementById('d');
    // 事件代理，事件委托
    d.onclick = function(ev){
        // console.log(211);
        // 获取触发事件的节点对象
        // console.log(ev.target);
        // 获取到事件源在哪里
        // console.log(ev.currentTarget);

        ev.target.style.background = 'skyblue';
    }
</script>

4.阻止浏览器默认行为和阻止事件传播

event.preventDefault()：取消浏览器对当前事件的默认行为

比如连续点击链接后，浏览器跳转到指定页面，或者按一下空格键，页面向下滚动一段距离

event.stopPropagation：

阻止事件在DOM中继续传播，防止再触发定义在别的节点上的监听函数

<body>
    <div id="d1">
        <div id="d2">
            3333
            <a id="aa" href="http://baidu.com">百度</a>
        </div>
    </div>
</body>
<script>
    var d1= document.getElementById('d1');
    var d2 = document.getElementById('d2');
    var d3 = document.getElementById('aa');
    d1.onclick = function(){
        console.log(222);
    }
    d2.onclick = function(ev){
        // 阻止事件传播
        ev.stopPropagation();
        console.log(111);
    }
    d3.onclick = function(ev){
        // 阻止浏览器的默认行为,超链接不进行跳转
        ev.preventDefault();
        console.log(111);
    }
</script>

5.节点创建及添加

5.1节点操作1

document.creatElemnet()

用来生成网页元素节点，参数为元素的标签名

document.createTextNode()

用来生成文本节点，参数为所要生成的文本节点的内容

node.appendChild

接受一个节点对象作为参数，将其作为最后一个节点，插入当前节点

node.hasChildNodes

返回一个布尔值，表示当前节点是否有子节点，(空格回车都算子节点)

node.removeChild

接受一个子节点作为参数，用于从当前节点移除该子节点

node.cloneNode

用于克隆一个选中的节点

他接受一个布尔值作为参数，表示是否同时克隆子节点，默认是false，即不可隆子节点

**注意：**不会克隆绑定到该元素上的事件

node.innerHTML

返回该元素包含的HTML代码。该属性可读写，常用来设置某个节点的内容；(不属于W3C DOM 规范)
node.innerText

返回该元素包含的内容。该属性可读写

5.2 节点操作2

node.nextElementSibling

返回紧跟在当前节点后面的第一个统计Element节点，如果当前节点后面没有同级节点，则返回null

node.previousElementSibling

返回紧跟在当前节点前面的第一个同级Element节点，如果当前节点前面没有同级节点，则返回null

node.parentElement

返回当前节点的父级Element节点

node.childNodes

返回一个NodeList集合，成员包括当前节点的所有子节点（空格，回车也算）

node.firstChild

返回树中节点的第一个子节点，如果节点是无子节点，则返回null

node.lastChild

返回该节点的最后一个子节点，如果该节点没有子节点，则返回null

6.原生属性

HTML元素节点的标准属性(即在标准中定义的属性)，会自动成为元素节点对象的属性

6.1 属性操作的标准方法

node.getAttribute()

返回当前元素节点的指定属性，如果指定属性不存在，则返回null

node.setAttribute()

为当前元素节点新增元素，如果同名属性已存在，则返回null

node.hasAttribute()

返回一个布尔值，表示当前元素节点是否包含指定属性

node.removeAttribute()

从当前元素节点移除属性

<body>
    <!-- HTML中的属性在js中获取到这个节点对象后，HTML中的属性会自动的称为节点对象的属性 -->
    <div id="d1" ksf="ddd" src="xx1">111</div>
    <img src="xxx" alt="" id="ii">
</body>
<script>

    //原生属性的操作 

    var d1 = document.getElementById('d1');
    // 获取节点对象的属性
    // console.log(d1.id); 
    // 直接给节点对象的属性赋值，会直接 修改到页面中
    // d1.id = 'ddd';

    // console.log(d1.src); 
    // 通过对象语法只能操作节点对象的原生属性，自定义属性无法操作
    // console.log(d1.ksf); //undefinded

    // 原生属性并不是所有标签通用
    // var i = document.getElementById('ii');
    // console.log(ii.src);

    // 非原生属性
    // 获取节点对象的属性(原生属性和非原生属性都可以操作)
    // var ss = d1.getAttribute('id');
    // console.log(ss);

    // var ksf = d1.getAttribute('ksf');
    // console.log(ksf);

    // 设置节点对象的属性
    // d1.setAttribute('id','dddd11');

    // d1.setAttribute('ksf','5555');

    console.log(d1.hasAttribute('aa'));
    if(d1.hasAttribute('aa')){
        d1.removeAttribute('aa');
    }else{
        d1.removeAttribute('ksf');
    }
</script>

五、css样式操作

每个DOM对象都有style属性，我们可以直接操作，用来读写行内css样式

小细节：

名字需要改写，将横杠从css属性名中去除，然后将横杠后的第一个字母大写

比如background-color 要写成backgroundColor
属性值都是字符串，设置时必须包括单位

比如id.style.width = ‘100px’;

如果将样式写在style标签内

getComputedStyle()

接受一个节点对象，返回该节点对象最终样式信息的对象，所谓“最终样式信息”，指的是各种css规则叠加后的结果

注意：getComputedStyle()是Windows对象下的方法，不是DOM对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css样式操作</title>
    <style>
        #d2{
            width: 200px;
            height: 200px;
            border:3px solid skyblue;
        }
    </style>
</head>
<body>
    <div id="d1" style="width: 400px;height: 400px;border: 3px solid skyblue;"></div>
    <div id="d2" style="width: 300px;height: 300px;"></div>
</body>
<script>
    var d1 = document.getElementById('d1');
    d1.onclick = function(){
        // node.style.xx  仅限于获取行内样式的操作，外联样式不能获取
        // 设置css样式
        d1.style.backgroundColor = 'skyblue';
        // 获取css样式
        console.log(d1.style.width);
        d1.style.width = '500px';
    }

    var d2 = document.getElementById('d2');
    d2.onclick = function(){
        // 无法获取
        // console.log(d2.style.width);
        // 可以获取
        var w = getComputedStyle(d2).width;
        console.log(w);
        d2q.style.backgroundColor = 'skyblue';
        d2.style.width = '400px';
    }
</script>
</html>

1.1 div增大的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
    <style>
        #d1{
            width: 300px;
            height: 300px;
            border: 3px solid skyblue;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
</body>
<script>
    var d1 = document.getElementById('d1');
    d1.onclick = function(){
        var w = getComputedStyle(d1).width;
        var h = getComputedStyle(d1).height;
        d1.style.background = 'skyblue';
        //进行字符串的拼接
        //先将w转化为数值型与10进行相加，然后再加字符串型的单位，这样便成为了字符串的拼接
        d1.style.width = parseInt(w)+10+'px';
        d1.style.height = parseInt(h)+10+'px';
    }
</script>
</html>

六、浏览器对象模型

1.介绍

Browser Object Model 浏览器对象模型(BOM)，浏览器对象模型提供了独立于内容、可以与浏览器窗口进行互动的对象结构，我们使用JavaScript与浏览器交互的所有内容，均来自浏览器对象模型

浏览器对象模型的具体实例化对象就是Window对象

BOM是Windows对象的子对象

2.对话框

window.alert()

显示一个警告对话框，上面显示有指定文本内容以及一个”确定“按钮

window.prompt()

显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

window.confirm()

方法显示一个具有一个可选消息和两个按钮（确定和取消）的横态对话框

**注意：**Windows对象下的所有属性和方法在js调用时，可以直接写属性或方法的名字，不需要使用window.

3.浏览器控制台

window.console：返回console对象的引用，该对象提供了对浏览器调试控制台的访问

console.clear()：清空控制台

console.error：打印一条错误消息

console.table：将数组或对象数据在控制台以表格形式打印

console.log：打印字符串，使用方法类似于printf、echo等格式输出

4.定时器

setTimeout()和clearTimeout()

在指定的毫秒数到达之后执行指定的函数，只执行一次

setInterval()和clearInterval()

定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计时器</title>
</head>
<body>
    <input type="button" value="停止" id="stop">
</body>
<script>
    // 倒时器，在指定的毫秒数到达后执行的函数，函数值执行一次
    //实现在几秒之后的一次提示
    var m = setTimeout(function(){
        console.log('hhhh');
    },1000);
    // 清除倒时器
    clearInterval(m);
    // 定时器 每隔两秒执行函数
	//setInterval 按照指定的周期（以毫秒计）来调用函数或计算表达式
    var t = setInterval(function(){
        var a = new Date();
        console.log(a.getTime());
        // console.log('小宝贝');
    }, 2000);
    // 在20000毫秒内清除计时器
    setTimeout(function(){
        // 清除计时器
        clearInterval(t);
    }, 20000);
    // 点击停止按钮便清楚计时器
    document.getElementById('stop').onclick = function(){
        clearInterval(t);
    };
</script>
</html>

5.浏览器对象

五、案例

隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
    <!-- <style>
        #uu{
            width: 400px;
            height: 400px;
            background: rgb(237, 252, 170);
        }
    </style> -->
</head>
<body>
    <input type="button" value="隔行变色" id="btn">
    <ul id="uu">
        <li>五菱宏光</li>
        <li>路虎</li>
        <li>兰博基尼</li>
        <li>布加迪威龙</li>
        <li>玛莎拉蒂</li>
        <li>九手奥拓</li>
        <li>拖拉机</li>
        <li>桑塔纳</li>
    </ul>
</body>
<script>
    document.getElementById('btn').onclick = function(){
        var li = document.getElementsByTagName('li');
        // console.log(li);
        for (var i = 0;i<li.length;i++) {
            // if (i%2==0) {
            //     li[i].style.background = 'skyblue';
            // }else{
            //     li[i].style.background = 'rgb(237, 252, 170)';
            // }

            // var c = i%2==0?'pink':'skyblue';
            // li[i].style.backgroundColor = c;
            li[i].style.backgroundColor = i%2==0?'pink':'skyblue';
            
        }
    }
</script>
</html>

内容长度验证案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内容长度验证案例</title>
</head>
<body>
    <input type="text" value="" id="txt">
</body>
<script>
    document.getElementById('txt').oninput = function(){
        // console.log(this.value);
        if(this.value.length >= 6 && this.value.length<=10){
            this.style.background = 'skyblue';
        }else{
            this.style.background = 'pink';
        }
    }
</script>
</html>

实时获取展示鼠标位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时获取展示鼠标位置</title>
    <style>
        #d1{
            width: 400px;
            height: 400px;
            border: 3px solid skyblue;
        }
    </style>
</head>
<body>
    <div id="d1">
        <p id="p1" style="position: absolute;"></p>
    </div>
</body>
<script>
    var p = document.getElementById('p1');
    document.getElementById('d1').onmousemove = function(ev){
        // d1.style.background = 'skyblue';
        p1.innerHTML = ev.clientX+','+ev.clientY;
        p1.style.top = ev.clientY+'px';
        p1.style.left = ev.clientX+'px'
    }
</script>
</html>

xiaoxinscholar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web API

一、web API一、简介1.APIAPI(Application Programming Interface,应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无须访问源码，或理解内部工作机制的细节任何开发语言都可以有自己的APIAPI的特征输入和输入（I/O）API的使用方法2.web API 接口的概念浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）特指浏览器给JS提供的API（一组方法）3.节点
复制链接

扫一扫