Web API

最新推荐文章于 2024-09-17 21:49:02 发布

触不可及的Allen

最新推荐文章于 2024-09-17 21:49:02 发布

阅读量213

点赞数

分类专栏： JavaScript基礎文章标签： javascript

本文链接：https://blog.csdn.net/Jy123_/article/details/106122641

版权

JavaScript基礎专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Web API介绍

API的概念

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

任何开发语言都有自己的API
API的特征输入和输出(I/O)
- var max = Math.max(1, 2, 3);
API的使用方法(console.log(‘adf’))

Web API的概念

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

此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义

DOM

DOM的概念

在这里插入图片描述

文档：一个网页可以称为文档
节点：网页中所有的内容都是节点
元素：网页中的标签
属性：标签的属性

DOM经常进行的操作

获取元素
对元素进行操作（设置其属性或调用其方法）
动态创建元素
事件（什么时机做相应的操作）

获取页面元素

例如：我们想要操作页面上的某部分（显示、隐藏动画），需要先获取到该部分对应的元素，才进行后续操作

根据id获取元素

var div = document.getElementsById(‘main’);
console.log(div);
注意：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。
// getElementByClassName获取的是一个数组，所以要在后面【0】
var btn1 = document.getElementsByClassName(‘btn1’)[0];

<body>
    <div>hello</div>
    <div id="main">world</div>
    <div>hei</div>
    <p id="p">test</p>
    <script>
        // document  文档对象
        // get 获取 Element 元素    By 根据  Id  表示     如果页面上没有相对应的id，此时返回null
        var main = document.getElementById('p');
        // console.log(mian);
        // 打印对象
        console.dir(main);

        // 对象是有类型的
        var arr = new Array();
        console.dir(arr);
    </script>
</body>

根据标签名获取元素

var div = document.getElementsByTagName('div');
for(var i =0;i<divs.length;i++){
 var div = divs[i];
 console.log(div);
}

根据name获取元素

var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}

根据类名获取元素

var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}

根据选择器获取元素

var text = document.querySelector('#text');
console.log(text);

var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}

根据querySelector和querySelector

<body>
    <div id="main"></div>
    <div name="main"></div>
    <p class="a"></p>
    <div class="a"></div>
    <script>
        // 用querySelector来获取一个元素
        var main = document.querySelector("#main");
        console.log(main);
        //   获取所有class为a的元素
        var a = document.querySelectorAll(".a");
        console.log(a);
    </script>
</body>

innerText和textConent

innerText会把所有空白给消除

//  innerHTML  获取内容的时候，如果内容中有标签，会把标签页获取到
//  原封不动把内容获取到
// console.log(box.innerHTML);
// innerText  获取内容的时候，如果内容中有标签，会把标签过滤掉
// innerText 会把前后的换行和空白都去掉

<body>
    <div id="box">
        我是一个box
        <b>hello</b>
    </div>
    <script>
        //    innerText  最早出现在IE浏览器中
        // 浏览器兼容问题
        // 老版本的Firefox浏览器不支持innerText
        var box = document.getElementById('box');
        console.log(box.innerText);
        console.log(box.textContent);
    </script>
</body>

在这里插入图片描述

<script>
// 如何知道浏览器是否支持元素的某个属性
// console.log(typeof box)         当属性不存在的时候返回值是undefined
// console.log(typeof box.id)      当属性存在的时候返回的是该属性的类型
// 处理innerText的兼容性问题
function getInnerText(element) {
    // 判断当前浏览器 是否支持元素的innerText属性，支持innerText 使用element.innerText获取内容
    // 如果不支持innerText属性，使用element.textContent获取内容

    if (typeof element.innerText === 'string') {
        return element.innerText;
    } else {
        return element.textContent;
    }
}
// 设置内容时，当设置不含标签的内容时候应该使用innerText,效率高
</script>

事件

事件：触发-响应机制

事件三要素

事件源：触发事件的元素
事件名称：click点击事件
事件处理程序：事件触发后要执行的代码

事件的基本使用

var box = doucment.getElementById('box');
box.onclick = function(){
    console.log('代码会在box被点击后执行');
};

属性操作

非表单元素的属性

href 、title、id、src、className

var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);

var pic = document.getElementById('pic');
console.log(pic.src);

案例：

<body>
    <button id="btn">点我</button><br>
    <img src="jia.jpg" id="image" width="500px" height="200px">
    <script>
        // 获取DOM对象的属性值
        // 比如a标签的a.title,a.id,a.href
        // 图片标签 img.id,img.src,img.alt
        // 用id获取元素
        var btn = document.getElementById('btn');
        var image = document.getElementById('image');
        // 当flag为1的时候照片是第一张
        var flag = 1;
        // 点击按钮触发事件
        btn.onclick = function () {
            console.log('111')
            if (flag === 1) {
                image.src = 'tian.jpg';
                flag = 2;
            } else if (flag === 2) {
                image.src = 'jia.jpg';
                flag = 1;
            }


        }
    </script>
</body>

在这里插入图片描述
显示和隐藏

<body>
    <input type="button" id="btn" value="隐藏">
    <div id="box" class="show hideen"></div>
    <script>
        var btn = document.getElementById('btn');
        var box = document.getElementById('box');
        // 第一种方法
        // var flag = 1;
        // btn.onclick = function () {
        //     if (flag === 1) {
        //         box.style.display = 'none';
        //         btn.innerText = '显示';
        //         flag = 2;
        //     } else if (flag === 2) {
        //         box.style.display = 'block';
        //         btn.innerText = '隐藏';
        //         flag = 1;
        //     }
        // }

        // 第二种方法
        var isshow = true;
        btn.onclick = function () {
            if (isshow) {
                box.className = 'show';
                this.value = '显示';
                isshow = false;
            } else {
                box.className = 'hidden';
                this.value = '隐藏';
                isshow = true;

            }
        }
        // 第三种方法就是jquery的toggle() 切换     show()  可见  hide() 不可见  attr()  添加css属性
    </script>
</body>

在这里插入图片描述

相册

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相册</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            margin-left: 300px;
            margin-top: 300px;
        }

        #image a {
            margin: 0px 20px 20px 0px;
            padding: 0px;
            display: inline;
        }
    </style>
</head>

<body>
    <div class="box">
        <div id="image">
            <a href="1.jpg" title="照片A">
                <img src="1-small.jpg" width="100px" alt="照片1" />
            </a>
            <a href="2.jpg" title="照片B">
                <img src="2-small.jpg" width="100px" alt="照片2" />
            </a>
            <a href="3.jpg" title="照片C">
                <img src="3-small.jpg" width="100px" alt="照片3" />
            </a>
            <a href="4.jpg" title="照片D">
                <img src="4-small.jpg" width="100px" alt="照片4" />
            </a>
        </div>
        <div style="clear: both;"></div>
        <img src="placeholder.png" alt="" width="450px" id="big" />
        <p id="des">选择一张图片</p>
    </div>
    <script>
        // 获取到所有的a标签
        var image = document.getElementById('image');
        var a = image.getElementsByTagName('a');
        // 给所有的a标签注册事件
        for (let i = 0; i < a.length; i++) {
            a[i].onclick = function () {
                //    切换图片 获取大的图片
                var big = document.getElementById('big');
                big.src = this.href;
                // 设置p标签的内容
                var des = document.getElementById('des');
                des.innerText = this.title;
                // 取消a标签的默认行为
                return false;
            }

        }
    </script>
</body>

</html>

在这里插入图片描述

HTML转义字符

"		&quot;
'		&apos;
&		&amp;
<		&lt;   // less than  小于
>		&gt;   // greater than  大于
空格	   &nbsp;
©		&copy;

表单元素属性

value用于大部分表单元素的内容获取（option除外）
type 可以获取input标签的类型（输入框或复选框）
disabled 禁用属性
checked 复选框选中属性
selected 下拉菜单选中属性
案例：获取input里面的值

<body>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <input type="button" id="btn" value="获取文本框的值">
    <script>
        // 给所有文本框赋值
        var inputs = document.getElementsByTagName("input");
        // 遍历文本框
        for (let i = 0; i < inputs.length; i++) {
            var input = inputs[i];
            // 判断是否是文本框
            if (input.type == 'text') {
                // 赋值
                input.value = i;
            }
            // console.log(input.value);
        }

        // 2.点击按钮的时候，获取所有文本框的值，并使用|来分隔
        var btn = document.getElementById('btn');
        btn.onclick = function () {
            // 声明字符串变量
            var arr = '';
            // 遍历文本框
            for (let i = 0; i < inputs.length; i++) {
                var input = inputs[i];
                // 判断是否是文本框
                if (input.type === 'text') {
                    // 添加到字符串中
                    arr += input.value + '|';
                }
            }
            // 将最后一个|去掉
            arr = arr.substr(0, arr.length - 1);
            console.log(arr);
        }

    </script>
</body>

检测用户名和密码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>检测用户名和密码</title>
    <style>
        .bg {
            background-color: bisque;
        }
    </style>
</head>

<body>
    <label for="username">用户名:</label> <input type="text" name="username" id="username" autofocus><br>
    <label for="password">密 码:</label> <input type="password" name="password" id="password"><br>
    <input type="button" value="登录" id="btn">
    <script>
        // 要求：检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框
        // 获取用户名、密码和按钮
        var userName = document.getElementById('username');
        var passWord = document.getElementById('password');
        var btn = document.getElementById('btn');
        // 给按钮点击事件
        btn.onclick = function () {
            // 判断用户名是否是3-6位
            if (userName.value.length < 3 || userName.value.length > 6) {
                // 高亮显示
                userName.className = 'bg';
            }
            // 判断密码是否是6-8位
            if (passWord.value.length < 6 || passWord.value.length > 8) {
                passWord.className = 'bg';
            }
        }
    </script>
</body>

</html>

自定义属性

getAttribute() 获取标签行内属性
setAttribute() 设置标签行内属性
removeAttribute() 移除标签行内属性

样式操作

使用style方式设置的样式显示在标签行内
var box = document.getElementById(‘box’);
box.style.width = ‘100px’;
box.style.height = ‘100px’;
box.style.backgroundcolor = ‘red’;
注意：通过样式属性设置宽高、位置的属性类型是字符串，需要加上px

类名操作

修改标签的className属性相当于直接修改成标点的类名
var box = document.getElementById(‘box’);
box.className = ‘show’;

创建元素的三种方式

**document.write()**
document.write('新设置的内容<p>标签也可以生成</p>');

**innerHTML**
var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';

 document.createElement()
var div = document.createElement('div');
document.body.appendChild(div);

性能问题

innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。
可以借助字符串或数组方式进行替换，再设置给innerHTML
优化后与document.createElement性能相近

节点操作

var body = document.body;
var div = documnet.createElement(‘div’);
body.appendchild(div);

var firstEle = body.children[0];
body.insertBefore(div, firstEle);

body.removeChild(firstEle);

var text = document.createElement(‘p’);
body.replaceChild(text, div);

节点属性

模拟文档树结构

在这里插入图片描述

function Element(option) {
  this.id = option.id || '';
  this.nodeName = option.nodeName || '';
  this.nodeValue = option.nodeValue || '';
  this.nodeType = 1;
  this.children = option.children || [];
}

var doc = new Element({
  nodeName: 'html'
});
var head = new Element({
  nodeName: 'head'
});
var body = new Element({
  nodeName: 'body'
})
doc.children.push(head);
doc.children.push(body);

var div = new Element({
  nodeName: 'div',
  nodeValue: 'haha',
});

var p = new Element({
  nodeName: 'p',
  nodeValue: '段落'
})
body.children.push(div);
body.children.push(p);

function getChildren(ele) {
  for(var i = 0; i < ele.children.length; i++) {
    var child = ele.children[i];
    console.log(child.nodeName);
    getChildren(child);
  }
}
getChildren(doc);

节点层级

var box = document.getElementById(‘box’);
console.log(box.parentNode);
console.log(box.childNodes);
console.log(box.children);
console.log(box.paren.nextsibling);
console.log(box.previousSibling);
console.log(box.firstChild);
console.log(box.lastChild);

注意：childNodes和children的区别，childNodes获取的是子节点，children获取的是子元素
nextSilbling和previousSibling获取的是节点，获取元素对应的属性是nextElementSibling和previousElementSibling获取的是元素
总结
节点操作，方法
appendChild（）、insertBefore（）、removeChild（）、replaceChild（）
节点层次，属性
parentNode、childNodes、children、nextSibling/previoussibling、firstchild/lastchild

事件详解

注册/移除事件的三种方式

var box = document.getElementById(‘box’);
box.onclick = function () {
console.log(‘点击后执行’);
};
box.onclick = null;

box.addEventListener(‘click’, eventCode, false);
box.removeEventListener(‘click’, eventCode, false);

box.attachEvent(‘onclick’, eventCode);
box.detachEvent(‘onclick’, eventCode);

function eventCode() {
console.log(‘点击后执行’);
}

兼容代码

事件的三个阶段

捕获阶段
当前目标阶段
冒泡阶段
事件对象eventPhase属性可以查看事件触发时所处的阶段

事件对象的属性和方法

event.type 获取事件类型
clientX/clientY 所有浏览器都支持，窗口位置
pageX/pageY IE8以前不支持，页面位置
event.traget || event.srcElement 用于获取触发事件的元素
event.preventDefault() 取消默认行为

阻止事件传播的方式

标准方式 event.stopPropagation()
ie低版本 event.cancelBubble = true;标准中已废弃

常用的鼠标和键盘事件

onmouseup 鼠标按键放开时触发
onmousedown 鼠标按键按下时触发
onmousemove 鼠标移动触发
onkeyup 键盘按键按下触发
onkeydown 键盘按键抬起触发

BOM

BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，
比如：刷新浏览器、后退、前进、在浏览器中输入URL等

BOM顶级对象window

window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window

对话框

alert()
prompt()
confirm()

页面加载事件

onload
window.οnlοad=function(){
//当页面加载完成执行
//当页面完全加载所有内容（包括图像、脚本文件、css文件等）执行
}
onunload
window.οnunlοad=function(){
//当用户退出页面时执行
}

定时器

setTimeout（）和clearTimeout（）
在指定的毫秒数到达之后执行指定的函数，只执行一次

// 创建一个定时器，1000毫秒后执行，返回定时器的标示
var timerId = setTimeout(function () {
  console.log('Hello World');
}, 1000);

// 取消定时器的执行
clearTimeout(timerId);

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

// 创建一个定时器，每隔1秒调用一次
var timerId = setInterval(function () {
  var date = new Date();
  console.log(date.toLocaleTimeString());
}, 1000);

// 取消定时器的执行
clearInterval(timerId);

localtion对象

localtion对象是window对象下一个属性，用的时候可以省略window对象
localtion可以获取或者设置浏览器地址栏的URL

URL

url的组成
scheme://host:port/path?query#fragment
scheme:通信协议
常用的http,ftp,maito等
host:主机
服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
port:端口号
整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
path:路径
由零或多个’/‘符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
query:查询
可选，用于给动态网页传递参数，可有多个参数，用’&‘符号隔开，每个参数的名和值用’='符号隔开。例如：name=zs
fragment:信息片断
字符串，锚点.

history对象

back()
forward()
go()

navigator对象

userAgent ：可以判断用户浏览器的类型
platform：可以判读浏览器所在的系统平台类型

偏移量

offsetParent用于获取定位的父级元素
offsetParent和parentNode的区别
var box = document.getElementById(‘box’);
console.log(box.offsetParent);
console.log(box.offsetLeft);
console.log(box.offsetTop);
console.log(box.offsetWidth);
console.log(box.offsetHeight);

客户区的大小

var box = document.getElementById(‘box’);
console.log(box.clientLeft);
console.log(box.clientTop);
console.log(box.clientWidth);
console.log(box.clientHeight);
在这里插入图片描述

滚动偏移

var box = document.getElementById(‘box’);
console.log(box.scrollLeft)
console.log(box.scrollTop)
console.log(box.scrollWidth)
console.log(box.scrollHeight)
在这里插入图片描述