中软Day07——JavaScript基础（事件、DOM、BOM）

最新推荐文章于 2020-03-08 22:02:20 发布

qq_43542290

最新推荐文章于 2020-03-08 22:02:20 发布

阅读量189

点赞数

文章标签：中软学习笔记 JavaScript

本文链接：https://blog.csdn.net/qq_43542290/article/details/102471895

版权

中软Day07

Web API介绍
- API的概念
  
  API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
  - 任何开发语言都有自己的API
  - API的特征输入和输出(I/O)
  - API的使用方法(console.log(‘adf’))
- Web API的概念
  
  浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
- 掌握常见浏览器提供的API的调用方式
JavaScript的组成
- ECMAScript - JavaScript的核心 es5 es6
  - 定义了JavaScript 的语法规范
  - JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关
- BOM - 浏览器对象模型 brower Object Model
  - 一套操作浏览器功能的API
  - 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
- DOM - 文档对象模型
  - 一套操作页面元素的API
  - DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
DOM
- DOM的概念
  
  文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言(html)标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本，更新其内容、结构,DOM(是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。
- DOM又称为文档树模型
  - 文档：一个网页可以称为文档
  - 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
  - 元素：网页中的标签
  - 属性：标签的属性
- DOM经常进行的操作
  - 获取元素
  - 对元素进行操作(设置其属性或调用其方法)
  - 动态创建元素
  - 事件(什么时机做相应的操作)

获取页面元素

为什么要获取页面元素

例如：我们要页面元素隐藏/显示，需要现获取对应的元素，才能进行后续操作

根据id获取元素

var div = document.getElementById("id2");

根据标签名获取元素

//标签名获取元素
		var div = document.getElementsByTagName("div")[5];
		alert(div);

根据name获取元素

// 通过name来获取
		var names = document.getElementsByName('n');
		for (var i = 0; i < names.length; i++) {
       
			alert(names[i]);
		}
		alert(names);

根据类名获取元素

// 通过类名
		var mains = document.getElementsByClassName("main");
		alert(mains);

根据选择器获取元素

// 根据选择器获取元素
		var id1 = document.querySelector('#id1');
		alert(id1);
		var mains = document.querySelectorAll('.main');
		alert(mains);

案例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

</head>
<body>
	<h1 id = "id1">我是页面元素</h1>

	<div id = "id2">1</div>
	<div>1</div>
	<div>1</div>

	<input type="text" name="n" class="main">
	<input type="text" name="n" class="main">
	<input type="text" name="n" class="main">
	<input type="text" name="n" class="main">

	<script type="text/javascript">
		// id 获取元素

		/*var h1 = document.getElementById("id1");
		//var div = document.getElementById("id2");
		// console.log(div);
		//alert(div);
		alert(h1);*/

		//标签名获取元素
		/*var div = document.getElementsByTagName("div")[5];
		alert(div);*/

		// 通过name来获取
		/*var names = document.getElementsByName('n');
		for (var i = 0; i < names.length; i++) {
			alert(names[i]);
		}
		alert(names);*/

		// 通过类名
		/*var mains = document.getElementsByClassName("main");
		alert(mains);*/

		// 根据选择器获取元素
		var id1 = document.querySelector('#id1');
		alert(id1);
		var mains = document.querySelectorAll('.main');
		alert(mains);
	</script>
</body>
</html>

事件

事件：触发-响应机制

事件三要素
- 事件源:触发(被)事件的元素
- 事件名称: click 点击事件
- 事件处理程序(回调函数):事件触发后要执行的代码(函数形式)

事件的基本使用

在这里插入图片描述

案例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

</head>
<body>
	<div id = "box">
		98888
	</div>
	<script type="text/javascript">
		var box = document.getElementById('box');
		box.onclick = function() {
       
			alert(1);
		}
	</script>
</body>
</html>

删除提示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style type="text/css">
		#tip {
        
			width: 150px;
			height: 30px;	
			background-color: lightgrey;
			margin: 200px auto;
			color: red;
			opacity: 0.5;
			text-align: center;
			padding-top: 5px;
			display: none;
		}
	</style>

	<script type="text/javascript">
		onload = function() {
        
			//1.获取按钮元素
			var btn = document.getElementById('btn');
			//2.绑定单击事件
			btn.onclick = function() {
        
				//3.获取元素，使其显示
				var tip = document.getElementById('tip');
				tip.style.display = 'block';
				setTimeout(function() {
        
					tip.style.display = 'none';
				}, 3000);
			}
		}
	</script>
</head>
<body>
	<input type="button" value="删除" id="btn">
	<div id="tip">删除成功</div>
</body>
</html>

属性操作

非表单元素的属性

href、title、id、src、className

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

HTML转义符

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

最低0.47元/天解锁文章

qq_43542290

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
中软Day07——JavaScript基础（事件、DOM、BOM）

Web API介绍API的概念API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。任何开发语言都有自己的APIAPI的特征输入和输出(I/O)API的使用方法(console.log(‘adf’))...
复制链接

扫一扫