6、BOM对象、事件对象、全局函数、DOM对象、event对象、location和history、document对象、表格隔行换色

最新推荐文章于 2022-05-25 19:38:19 发布
最新推荐文章于 2022-05-25 19:38:19 发布
阅读量113 收藏
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangbo_csdn/article/details/119615556
版权

Web目录标题

1、note

ECMAScript

原始类型: string number undefined object boolean
		 ==  ===  typeof
Regex正则表达式类型  /^...$/
	test(string)
Array数组类型   [1,2,3] new Array(length)  new Array(ele1, ele2...)
	length
Function函数类型  function fun1() {} 
	var fun1 = function() {}

DOM对象: img input button form

document.getElementById(id)
document.getElementsByClassName(class)
属性: src  value  innerHTML  innerText  style.cssXX

BOM对象: window

alert()
setInterval() clearInterval()
setTimeout() clearTimeout()

事件:

  onclick  onmouseover  onmouseout  onsubmit  onblur

this对象:

<input onclick="fun1(this)">
<script>this-window</script>
<script>
	input.onclick = function() {
		this - input
	}
</script>

BOM对象

Window

 Window: 获得其他的BOM对象, 以及Document对象, window对象可以省略
 window.document  window.history  window.location
 document		  history		  location

弹窗

	alert()	显示带有一段消息和一个确认按钮的警告框。
	confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
	prompt()	显示可提示用户输入的对话框。

### 计时器	
	setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
	setTimeout()	在指定的毫秒数后调用函数或计算表达式。
	clearInterval()	取消由 setInterval() 设置的 timeout。
	clearTimeout()	取消由 setTimeout() 方法设置的 timeout。

### 窗口开关	
	open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
	close()	关闭浏览器窗口。

Location: href

History: (了解)

history.back() 方法加载历史列表中前一个 URL。
history.forward() 方法加载历史列表中下一个 URL。
go(1) -> history.forward()
go(-1) -> history.back()

事件对象

preventDefault()	通知浏览器不要执行与事件关联的默认动作。
stopPropagation()	不再派发事件。

全局函数

decodeURI()	解码某个编码的 URI。
encodeURI()	把字符串编码为 URI。

eval()	计算 JavaScript 字符串，并把它作为脚本代码来执行。

isNaN()	检查某个值是否是数字。

parseFloat()	解析一个字符串并返回一个浮点数。
parseInt()	解析一个字符串并返回一个整数。

DOM对象:

Document 文档

获得  getElementById(id)
	 getElementsByClassName(class值)
	 getElementsByTagName(标签名)
	 getElementsByName(name属性的值)
创建  createElement(标签名)

Element 标签

追加  父节点.appendChild(子节点)
	 子节点.insertBefore(另一个子节点)
属性  innerText  innerHTML
属性	 标签自带属性  src style href value checked....
操作属性	 setAttribute(属性名, 属性值)
		 getAttribute(属性名)

Attribute 属性

TextNode 文本

 tr.childNodes (包含标签和文本)
	<tr> <td>1</td><td>张三</td> <td>20</td> <td>中国计量大学</td></tr>
	NodeList(9) [ #text, td, #text, td, #text, td, #text, td, #text ]

2、window对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window对象</title>
		<script>
			alert("普通弹窗")
			// var conf = confirm("确认弹窗")
			console.log(conf); // true false
			
			// var msg = prompt("输入弹窗"); // 点击确认获得输入框中的值
			console.log(msg); // 点击取消, 获得null值
			
			// open("http://www.baidu.com"); // 在新的标签页打开网页
			function toBack() {
				// history.back();
				history.go(-1)
			}
		</script>
	</head>
	<body>
		<button onclick="toBack()">回退</button>
	</body>
</html>

在这里插入图片描述

3、location和history

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>location和history</title>
		<script>
			// 设置/获取  当前页面的地址 url
			// location.href = "http://www.baidu.com";
			console.log(location.href); // url不支持中文以及空格 -> 编码变成 %16进制
			
			function toForward() {
				// history.forward()
				history.go(1)
			}
			
		</script>
	</head>
	<body>
		<a href="01_Window对象.html">to_window对象.html</a>
		<button onclick="toForward()">前进</button>
	</body>
</html>

在这里插入图片描述

4、document对象、表格隔行换色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格隔行换色</title>
		<script>
			onload = function() {
				document.getElementById("tab"); // 只能获得第一个对应id的元素
				document.getElementsByClassName("cls1"); // 获得所有class值是cls1的元素, 数组
				// 根据标签名获得对应元素 - 数组
				var arr1 = document.getElementsByTagName("input");
				console.log(arr1)
				
				// 根据name属性的值获得对应元素 - 数组
				var arr2 = document.getElementsByName("name1");
				console.log(arr2)
				
				// 根据标签名创建标签 - 空标签
				var tr = document.createElement("tr"); // <tr></tr>
				
				var td1 = document.createElement("td");
				var td2 = document.createElement("td");
				var td3 = document.createElement("td");
				var td4 = document.createElement("td");
				var td5 = document.createElement("td");
				// 将td1添加到tr标签中
				tr.appendChild(td1);
				tr.appendChild(td2);
				tr.appendChild(td3);
				tr.appendChild(td4);
				tr.appendChild(td5);
				console.log(tr);
				
				// td1 中添加文本
				td1.innerHTML = '<input type="checkbox" />'
				td2.innerText = 2;
				
				document.getElementById("tab").tBodies[0].appendChild(tr);
			}
		</script>
	</head>
	<body>
		<table align="center" border="1" cellspacing="0" width="500"
			   height="300" id="tab" >
			   <caption>学员信息表</caption>
			<thead>
				<tr>
					<th><input type="checkbox" /></th>
					<th>序号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>学校</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox"/></td>
					<td name="name1">1</td>
					<td>张三</td>
					<td>20</td>
					<td>中国计量大学</td>
				</tr>
				<tr>
					<td><input type="checkbox"/></td>
					<td>1</td>
					<td>张三</td>
					<td>20</td>
					<td>中国计量大学</td>
				</tr>
				<tr>
					<td><input type="checkbox"/></td>
					<td>1</td>
					<td>张三</td>
					<td>20</td>
					<td>中国计量大学</td>
				</tr>
				<tr>
					<td><input type="checkbox"/></td>
					<td>1</td>
					<td>张三</td>
					<td>20</td>
					<td>中国计量大学</td>
				</tr>
				<tr>
					<td><input type="checkbox"/></td>
					<td>1</td>
					<td>张三</td>
					<td>20</td>
					<td>中国计量大学</td>
				</tr>
				<tr>
					<td><input type="checkbox"/></td>
					<td>1</td>
					<td>张三</td>
					<td>20</td>
					<td>中国计量大学</td>
				</tr>
				<tr>
					<td><input type="checkbox"/></td>
					<td>1</td>
					<td>张三</td>
					<td>20</td>
					<td>中国计量大学</td>
				</tr>
				<tr>
					<td><input type="checkbox"/></td>
					<td>1</td>
					<td>张三</td>
					<td>20</td>
					<td>中国计量大学</td>
				</tr>
				<tr>
					<td><input type="checkbox"/></td>
					<td>1</td>
					<td>张三</td>
					<td>20</td>
					<td>中国计量大学</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

在这里插入图片描述

5、event对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>event对象</title>
		<style>
			div{
				border: 1px solid red;
			}
			#div1 {
				width: 200px;
				height: 200px;
			}
			#div2 {
				margin:auto ;
				width: 100px;
				height: 50px;
			}
		</style>
		<script>
			onload = function() {
				
			}
			function clickA() {
				alert("a");
				// 阻止标签的默认行为
				event.preventDefault()
			}
			function clickDiv1() {
				alert("div1");
			}
			function clickDiv2() {
				alert("div2");
				// 阻止事件的派发
				event.stopPropagation()
			}
		</script>
	</head>
	<body>
		<!-- 添加单击事件, 想要阻止原来浏览器的行为 -->
		<a onclick="clickA()" href="案例一表格隔行换色.html">表格隔行换色</a>
		
		<a onclick="clickA()" href="javascript:void(0)">表格隔行换色</a>
		
		<!-- 派发事件 -->
		<div id="div1" onclick="clickDiv1()">
			1
			<div id="div2" onclick="clickDiv2()">2</div>
		</div>
		
	</body>
</html>

在这里插入图片描述

6、全局函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全局函数</title>
		<script>
			var url = "http://127.0.0.1:8848/WEB/day04_JS/案例三:省市二级联动.html";
			
			// 编码 - %16进制 (中文+空格)
			var encodeURL = encodeURI(url);
			console.log(encodeURL);
			
			// 解码 - 还原到中文
			var decodeURL = decodeURI(encodeURL);
			console.log(decodeURL);
			
			console.log("1+2");
			
			// 将参数字符串, 作为一个JavaScript代码来执行
			// 78 + 23 * 34 = 
			var e = eval("78 + 23 * 34");
			console.log(e)
			
			// Not a Number
			console.log(isNaN("12a")); // 数字-false  非数字-true
			
			console.log("12a" / 2); // NaN
			
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

7、DOM对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM对象</title>
		<script type="text/javascript">
			onload = function() {
				var tr1 = document.getElementById("tr1");
				var arr = tr1.childNodes;
				console.log(arr)
			}
		</script>
	</head>
	<body>
		<table align="center" border="1" cellspacing="0" width="500"
			   height="300" id="tab" >
			   <caption>学员信息表</caption>
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>学校</th>
				</tr>
			</thead>
			<tbody>
				<tr id="tr1">
					<td>1</td>
					<td>张三</td>
					<td>20</td>
					<td>中国计量大学</td>
				</tr>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>20</td>
					<td>中国计量大学</td>
				</tr>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>20</td>
					<td>中国计量大学</td>
				</tr>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>20</td>
					<td>中国计量大学</td>
				</tr>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>20</td>
					<td>中国计量大学</td>
				</tr>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>20</td>
					<td>中国计量大学</td>
				</tr>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>20</td>
					<td>中国计量大学</td>
				</tr>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>20</td>
					<td>中国计量大学</td>
				</tr>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>20</td>
					<td>中国计量大学</td>
				</tr>
			</tbody>
			
		</table>
	</body>
</html>

在这里插入图片描述

天 阳 在 线€
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript之BOM对象和DOM对象
马赛克的博客
03-03 746
目录 一：BOM对象 1.1window对象 1.2History对象 1.3Location对象 二：DOM对象 2.1 什么是DOM 2.2 DOM节点 2.3 HTML DOM Event(事件) 2.4 增删改查演示 一：BOM对象 bom browserobject model浏览器对象模型，可以对浏览器窗口进行访问和操作。使用BOM，开发者可以移动窗口，...
BOM（浏览器对象模型）和DOM(宿主对象模型)
weixin_43739375的博客
03-18 908
一.什么是BOM（浏览器对象模型) BOM（Browser Object Model）是指浏览器对象模型，可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。 1. window对象 window对象是客户端JavaScript最高层对象之一，由于...
JS中document属性
colorsunlight的专栏
03-10 941
document.title //设置文档标题等价于HTML的title标签 document.bgColor //设置页面背景色 document.fgColor //设置前景色(文本颜色) document.linkColor //未点击过的链接颜色 document.alinkColor //激活链接(焦点在此链接上)的颜色 document.vlinkColor //已点击过的链接
BOM（一）概述、history对象、location对象、navigator对象、事件
热门推荐
商务合作 | 共同学习 | 携手共进
09-27 2万+
JavaScript BOM：Windows对象、打开新链接的情况、history、location对象、navigator、事件。
【BOM】深入浅出浏览器对象模型—BOM基础知识详解_06
青春木鱼的博客
05-25 552
深入浅出浏览器对象模型—BOM基础知识详解。BOM能做什么？BOM提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置，改变窗口大小，打开新窗口和关闭窗口，弹出对话框，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象，以使得我们可以通过这个入口来使用DOM的强大功能。
js中浏览器对象（BOM）、windows对象、事件
IT_CREATE的博客
12-18 609
4.8 JS浏览器对象（BOM） BOM (Browser Object Model )浏览器对象模型，它是由多个JS对象共同组成的， JS是一种动态语言，它可以在页面上做很多动作性的东西，比如：验证表单，动态给网页添加内容，动态修改网页，但是网页的内容通常都是由浏览器来进行解析，所以JS针对浏览器中解析网页的一些对象，就被它封装起来，供我们程序员来进行调用。   BOM由很多对象组成： ...
JS事件、Bom对象和Dom对象
qq_44358876的博客
04-15 306
4 JS事件、Bom对象和Dom对象 重点: 事件类型 BOM对象的window对象方法 表单 DOM对象 4.1 事件 事件 (Event) 是 JavaScript 应用跳动的心脏 ，进行交互，使网页动起来。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定 元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完 成，或者是用户滚动窗口或改变窗口大小。 通过使用 JavaScript
5.4 js Bom编程,什么是 BOM 编程,.Location对象,History对象, document对象 DOM,event 事件对象
世上哪有什么岁月静好,不过是有人替你负重前行
12-21 213
文章目录JavaScriptBOM编程1 BOM编程2 什么是 BOM 编程3 Browser对象1.Location对象History对象document对象 DOMevent 事件对象window 对象常用方法 JavaScriptBOM编程 1 BOM编程 js：ECMAScript语法 DOM BOM基本语法: 注释，变量，运算符，数据类型（number string null boolean undefined）， 流程控制 : 顺序，分支 if else : switch case
javaScript中的对象、BOM、DOM知识点总结
hhhhhggggddd的博客
04-13 2146
一、  什么是javaScript对象？         对象是javaScript中最重要的API。         javaScript包含多种对象有：内置对象、外部对象（window对象、dom对象）、自定义对象。 二、  如何使用对象？         对象包含属性和方法。         访问对象属性：对象.属性         访问对象方法：对象.方法（） 三、  常用内
你真的了解BOM中的history对象吗
08-31
你真的了解BOM中的history对象吗？具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Javascript 类型转换、封闭函数及常见内置对象操作示例
12-13
本文实例讲述了Javascript 类型转换、封闭函数及常见内置对象。分享给大家供大家参考，具体如下： Javascript组成 1、ECMAscript javascript的语法（变量、函数、循环语句等语法） 2、DOM 文档对象模型 操作html和...
JavaScript中BOM对象原理与用法分析
12-11
BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。 我的理解 博主是这么理解的，BOM对象指的是window对象，而window对象并不是JavaScript内置的对象，而是浏览器...
BOM之navigator对象和用户代理检测
12-07
与其他BOM对象的情况一样，每个浏览器中的navigator对象也都有一套自己的属性。下表列出了存在于所有浏览器中的属性和方法，以及支持它们的浏览器版本 属性 说明 appCodeName 浏览器名称[所有浏览器都返回Mozilla]...
rockyou.txt
06-06
rockyou
ASP+ACCESS网上人才信息管理系统(源代码+论文)【ASP】.zip
06-06
ASP+ACCESS网上人才信息管理系统(源代码+论文)【ASP】
河北金融学院经济大数据课设2024年 软科学校爬虫课设
06-06
河北金融学院经济大数据课设2024年 软科学校爬虫课设
widgetsnbextension-4.0.0b0-py3-none-any.whl
最新发布
06-06
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
协同过滤服务+源代码+文档说明
06-06
- 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ <项目介绍> 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
需要有数组 函数 对象和dom bom
06-06
好的，我来给您补充一下示例代码，让它包含数组、函数、对象、DOM 和 BOM 的应用。 JavaScript 代码示例： ```javascript // 数组示例 const myArray = [1, 2, 3, 4, 5]; console.log(myArray.length); // 输出...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值