JS学习-web APIs

最新推荐文章于 2024-07-22 15:13:59 发布

幼兒园扛把子

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量109

点赞数

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/weixin_53321685/article/details/120262805

版权

JS的组成

什么是API

官方定义：

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

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

什么是Web API

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

主要针对浏览器做交互效果

1、DOM

1.1、什么是DOM？

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

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

1.2、DOM树

文档：一个页面就是一个文档，DOM中使用document表示

元素：页面中的所有标签都是元素，DOM中使用element表示

节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

DOM把以上内容都看做是对象

3、事件

           执行事件的步骤
             1. 获取事件源
2. 注册事件(绑定事件)
             3. 添加事件处理程序(采取函数赋值形式)

常见的鼠标点击事件

			<div>123</div>


            // 执行事件步骤
			// 点击div 控制台输出 我被选中了
			// 1. 获取事件源
			var div = document.querySelector('div');
			// 2. 绑定事件 注册事件
			// div.onclick
			// 3. 添加事件处理程序
			div.onclick = function() {
				console.log('我被选中了');
			}

分时问候案例

比如进入邮箱当前时间是下午就显示下午好晚上就显示晚上好

	<body>
		<img src="/img/s.jpg" alt="">
		<div>上午好</div>
		<script>
			// 根据系统不同时间来判断，所以需要用到日期内置对象
			// 利用多分支语句来设置不同的图片
			// 需要一个图片，并且根据时间修改图片，就需要用到操作元素
			// 需要一个div元素 显示不同问候语 修改元素内容即可
			// 1. 获取元素
			let img = document.querySelector('img');
			let div = document.querySelector('div');
			// 2. 得到当前的小时数
			let date = new Date();
			let h = date.getHours();
			// 3. 判断小时数改变图片和文字信息
			if (h < 12) {
				img.src = 'img/s.jpg';
				div.innerHTML = '亲，上午好，好好写代码';
			} else if (h < 18){
				img.src = 'img/x.jpg';
				div.innerHTML = '亲，下午好，好好写代码';
			} else {
				img.src = 'img/w.jpg';
				div.innerHTML = '亲，晚上好，好好写代码';
			}
		</script>
	</body>

操作元素之修改表单属性

	<body>
		<button>我是按钮</button>
		<input type="text"  value="" />
		<script type="text/javascript">
			// 1. 获取元素
			let btn = document.querySelector('button');
			let input = document.querySelector('input');
			// 2. 注册事件 处理程序
			btn.onclick = function() {
				// input.innerHTML = '点击了'; 这个是普通盒子 比如div标签里面的内容
				// 表单里面的值 文字内容是通过 value 来修改的
				input.value = '被点击了';
				// 如果想要某个表单被禁用 不能再点击 disabled 想要这个按钮button禁用
				// btn.disabled = true;
				this.disabled = true;
				// this 指向的是事件函数的调用者btn
			}
		</script>
	</body>

显示隐藏密码案例

思路：

① 点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码

② 一个按钮分2种状态点击一次切换为文本框再点击一次切换为密码框

③ 利用一个flag变量来判断flag的值如果是1就切换为文本框 0则切换为密码框

CSS+HTML+JS三部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box {
				position: relative;
				width: 400px;
				border-bottom: 1px solid #ccc;
				margin: 100px auto;
			}
			
			.box input {
				width: 370px;
				height: 30px;
				border: 0;
				outline: none;
			}
			
			.box img {
				position: absolute;
				right: 5px;
				top: 5px;
				width: 24px;
			}
		</style>
	</head>
	
	<body>
		<div class="box">
			<label for="">
				<img src="img/close.png" id="eye" >
			</label>
			<input type="password" id="pwd" >
		</div>
		<script>
		// 1. 获取元素
		let eye = document.getElementById('eye');
		let pwd = document.getElementById('pwd');
		// 2. 绑定事件
		let flag = 0;
		eye.onclick = function() {
			if (flag == 0) {  // 这个 == 是判断
				pwd.type = 'text';  // 点击之后把密码框改为文本框显示
				flag = 1; 			// 点击完后 不会永远是0  需要复原成原来的样子  赋值为1
				eye.src = 'img/open.png' // 图片改为小眼睛
			} else {
				pwd.type = 'password';
				flag = 0;
				eye.src = 'img/close.png'
			}
			
		}
		</script>
	</body>
</html>

循环精灵图

① 精灵图图片排列是有规律的

② 利用for循环修改精灵图片的背景位置 background-position

③ 让循环里面的i索引号 * 44 就是每个图片的y坐标

		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			li {
				list-style-type: none;
			}
			
			.box {
				width: 250px;
				margin: 100px auto;
			}
			
			.box li {
				float: left;
				width: 24px;
				height: 24px;
				background-color: #FF4400;
				margin:15px;
				background: url(img/sprite.png) no-repeat;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</div>
		<script>
			// 1. 获取元素
			let lis = document.querySelectorAll('li');
			for (i = 0; i < lis.length; i++) {
				// 让每个索引号 乘以44  就是每个li的背景y坐标
				let index = i * 44;
				lis[i].style.backgroundPosition = '0 -'+ index +'px';
			}
		</script>
	</body>

幼兒园扛把子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS学习-web APIs

JS的组成什么是API官方定义：API（Application Prigramming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节简单的理解就是 API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。什么是Web APIWeb API是浏览器提供的一套操作浏览器功能（BOM）和页面元素（DOM）的API主要针对浏览器...
复制链接

扫一扫