自学WEB前端-3(JavaScript-2)

最新推荐文章于 2024-09-25 14:00:00 发布

置顶 IT_Joliu

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量205

点赞数 1

文章标签： javascript js

本文链接：https://blog.csdn.net/Sim_perfect/article/details/105294491

版权

WEB前端学习路线之JavaScript

一、动态控制之JavaScript（BOM和DOM部分）

一、动态控制之JavaScript（BOM和DOM部分）

1.1 BOM

Window 对象
Navigator 对象
Screen 对象
History 对象
Location 对象

1.1.1 Window 对象（窗口对象）

所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。

1.1.2 Window 子对象

Window的子对象主要有如下几个：

JavaScript document 对象 ----文件
JavaScript frames 对象 ---- 框架
JavaScript history 对象 ----历史记录
JavaScript location 对象 ----地址栏
JavaScript navigator 对象 ----使用者浏览器信息
JavaScript screen 对象 ----显示器

方法：

window对象不需要创建可以直接使用 window.方法名();
window引用可以省略直接方法名();

1.与弹出框有关的方法

alert() 显示带有一段消息和一个确认按钮的警告框。

confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。

prompt() 显示可提示用户输入的对话框。

2.打开关闭窗口

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

close() 关闭浏览器窗口。

3.计时器

一次性定时器
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
语法：
setTimeout("对象();",毫秒数)
推荐使用 setTimeout(对象,毫秒数)

取消一次性定时器
clearTimeout()
循环定时器
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
语法：
setInterval("对象();",毫秒数)
推荐使用 setInterval(对象,毫秒数)
取消循环定时器
clearInterval()

属性：

获取其他BOM对象
获取DOM对象

1.1.3 location对象:地址栏对象

属性：

hash		返回一个URL的锚部分
host		返回一个URL的主机名和端口
hostname	返回URL的主机名
href		返回完整的URL
pathname	返回的URL路径名。
port		返回一个URL服务器使用的端口号
protocol	返回一个URL协议
search		返回一个URL的查询部分

方法：

assign()	载入一个新的文档
reload()	重新载入当前文档
replace()	用新的文档替换当前文档

1.1.4 History:历史记录对象

1.创建(获取):

window.history

history

2. 方法:

back()
加载 history列表中的前一个URL。

forward()
加载 history列表中的下一个URL。

go()
加载history列表中的某个具体页面。

属性:
length返回当前窗口历史列表中的URL数量。

1.2 DOM (HTML DOM)

通过 DOM，你可以访问所有的 HTML 元素，连同它们所包含的文本和属性。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

1.2.1 查找 HTML 元素

通常，通过 JavaScript，需要操作 HTML 元素。
有三种方法来查找HTML 元素：

通过 id 找到 HTML 元素

document.getElementById("元素id值");

通过标签名找到 HTML 元素

var x=document.getElementById("test");


查找 id="test" 元素中的所有 <p> 元素：
var y=x.getElementsByTagName("p");

通过类名找到 HTML 元素

document.getElementsByClassName("类名");

1.2.2 修改标签体内容

步骤：

获取元素对象
使用innerHTML 属性修改标签体内容
document.getElementById(id).innerHTML=new HTML

1.2.3 DOM 修改HTML样式

语法：
document.getElementById(id).style.property=new style

document.getElementById('p1').style.visibility='hidden'			隐藏id=p1的元素
document.getElementById('p1').style.visibility='visible'		显示id=p1的元素

1.2.4 DOM 事件某个组件被执行后触发的操作

HTML事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

1.3 DOM（Document object Model）文档对象模型

将标记语文档的各个组成部分,封装为对象。
使用这些对象对标记语文档进行CRUD的动态操作。

W3C DOM标准被分为3个不同的部分：

核心 DOM----针对任何结构化文档的标准模型
- Document:文档对象
- Element:元秦对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
- Node:节点对象,其他5个的父对象
XML DOM----针对XML文档的标准模型
HTML DOM----针对HTML文档的标准模型

1.3.1 核心DOM模型

Document:文档对象

1.创建(获取):在 html dom模型中可以使用 window对象来获取
	1. window. document
	2. document
2.方法
	1.获取 Element对象
		getElementById():				根据id属性值获取元秦对象。id属性值一般唯
		getElementsByTagName():			根据元秦名称获取元秦对象们。返回值是一个数组
		getElementsByclassName():		根据C1as性值获取元素对象们。返回值是一个数组			
		getElementsByName():			根据name属性值获取元素对象们。
	2.创建其他DM对象
		creatAttribute(name)
		createComment()
		createElement()
		createTextNode()
3.属性
	 	Element:元秦对象
	    Node:节点对象,其他5个的父对象
 特点:所有dom对象都可以被认为是一个节点
 方法：
		crud dom树
		appendChild():					向节点的子节点列表的结尾添加新的子节点。
		removeChild():					删除(并运回)当前节点的指定子节点。
		replaceChild():					用新节点替换一个子节点。
 超链接功能:
		1.可以被点击:样式
		2.点击后跳转到href指定的ur1
			需求:
				保留1功能,去掉2功能
			实现:
				href=" javascript:void(0);"

1.3.2 事件监听机制

 概念:	某些组件被执行了某些操作后,触发某些代码的执行。
 事件:	某些操作。如:单击,双击,键盘按下了,鼠标移动了
 事件源: 组件。如:按钮文本输入框
 监听器:代码。
 注册监听:将事件,事件源,监听器结合在一起。当事件源上发生了某个事件,则触发执行某个监听器代码。

1.3.3 常见的事件

1.点击事件
	onclick:		单击事件
	ondblclick:		双击事件
2.焦点事件
	onblur:			失去焦点
	onfocus:		元秦获得焦点。
3.加载事件
	onload:			一张页面或一幅图像完成加载。
4.鼠标事件
	onmousedown		鼠标按钮被按下
	onmouseup		鼠标按键被松开。
	onmousemove		鼠标被移动。
	onmouseover		鼠标移到某元素之上。
	onmouseout		鼠标从某元素移开
5.键盘事件:
	onkeydown  		某个键盘按键被按下。
	onkeyeyup  		某个键盘按键被松开
	onkeypress		某个键盘按键被按下并松开
6.选择和改变
	onchange		域的内容被改变。
	onselect		文本被选中。
7.表单事件
	onsubmit		确认按钮被点击。
				作用：可以阻止表单的提交。
				方法：返回 false则表单被阻止提交。
	onreset			重置按钮被点击。

加载完成事件 onload

window. onload function{
		}

失去焦点事件

document. getElementById("username").οnblur= function(){
		alert("失去焦点了.");}

绑定鼠标移动到元素之上事件

document. getElementById("username").οnmοuseοver= function (){
		alert("鼠标来了.");}

绑定鼠标点击事件

1.获取超链接

var element_href = document.getElementById ("new_address");

2.绑定单击事件

element.onclick = function (){
		var div1 = document.getElementById("div1");
		var div2 = document.getElementById(div2")
		div1.removeChild(div2);
		}