首页 > 编程语言 >E005Web学习笔记-JavaScript(三):BOM

E005Web学习笔记-JavaScript(三):BOM

时间:2023-02-22 15:32:38浏览次数:41  
标签:function btn 对象 JavaScript getElementById BOM E005Web var document

一、简单学习DOM

1、控制(增删改查)HTML文档的内容;

 

2、代码:获取页面的标签(元素)对象Element;

document.getElementById();//通过元素的ID获取元素

 

3、操作Element对象:

修改属性值步骤:

第一步:明确获取的对象是哪一个;

第二步:查看API文档,找其中有哪些属性可以设置;

修改标签内容:

第一步:获取元素对象;

第二部:使用innerHTML属性修改标签的内容;

代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对象演示</title>
	
	</head>
	<body>
		<h1 id="hehe" style="color: #FF0000;">
			呵呵呵!
		</h1>
		<script type="text/javascript">
			var hehe = document.getElementById("hehe");
			//修改属性
			hehe.style = "color: #00EEFF;";
			//修改内容
			hehe.innerHTML = "哈哈哈哈";
		</script>
	</body>
</html>

 

二、简单学习事件

1、功能

某些组件被执行某些操作后出发某些代码;

 

2、如何绑定事件

方法一:直接在HTML标签上,指定事件的属性,属性就是js代码;

//点击事件
onClick();

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件演示</title>
		<script type="text/javascript">
			function c(){
				alert("调取js方法-我被点了");
			}
		</script>
	</head>
	<body>
		<!-- 直接写进去js代码 -->
		<h1 id="lala" onclick="alert('直接写-我被点了');">
			啦啦!
		</h1>
		<!-- 调取js方法 -->
		<h1 id="lala" onclick="c()">
			啦啦!
		</h1>
	</body>
</html>

方法二:通过JS获取元素对象,指定事件属性,然后设置事件所要执行的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件演示</title>
	
	</head>
	<body>
		</h1>
		<!-- 调取js方法 -->
		<h1 id="lala">
			啦啦!
		</h1>
		<script type="text/javascript">
			function c(){
				alert("调取js方法-我被点了");
			}
			var a = document.getElementById("lala");
			a.onclick = c;//别加括号,否则会直接执行,点击无效
		</script>
	</body>
</html>

点击改变文字内容,再点击再改回来,如此循环,案例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件演示</title>
	
	</head>
	<body>
		</h1>
		<!-- 调取js方法 -->
		<h1 id="lala">
			啦啦!
		</h1>
		<script type="text/javascript">
			var b = 0;
			function c(){
				if(b==0){
					a.innerHTML = "啦啦!";
					b = 1;
				}else{
					a.innerHTML = "哈哈!";
					b = 0;
				}
			}
			var a = document.getElementById("lala");
			a.onclick = c;//别加括号,否则会直接执行,点击无效
		</script>
	</body>
</html>

 

三、BOM

1、概述

Browser Object Model 浏览器对象模型;

 

2、常用的BOM对象

1、window对象 ,是JS的最顶层对象,其他的BOM对象都是window对象的属性;

2、document对象,(DOM)文档对象;

3、location对象,浏览器当前URL信息;

4、navigator对象,浏览器本身信息;

5、screen对象,客户端屏幕信息;

6、history对象,浏览器访问历史信息;

 

3、window对象

(1)创建:

window不需要创建,可以直接使用;

(2)方法:

①与弹出框有关的方法;

alert()显示带有一段消息和一个确认按钮的警告框;
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框;
    -- 如果用户点击确定按钮,则返回ture;
    -- 如果用户点击取消按钮。则返回false;
prompt()显示可提示用户输入的对话框;
    -- 返回输入框内用户输入的内容;

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window对象</title>
		<script type="text/javascript">
			alert("警告框");
			var flag = confirm("确定吗?");
			if(flag){
				document.write("您点击了确定");
			}else{
				document.write("您点击了取消");
			}
			var text = prompt("您可以在这里输入一些内容哦");
			document.write(text);
		</script>
	</head>
	<body>
	</body>
</html>

②与打开关闭有关的方法

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

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window对象</title>
	</head>
	<body>
		<input id="btn" type="button" value="打开百度" /><br />
		<input id="btn_close" type="button" value="关闭窗口" />
		<script type="text/javascript">
			function f(){
				open("http://www.baidu.com/");
			}
			function f1(){
				close();
			}
			var a = document.getElementById("btn");
			a.onclick = f;
			var b = document.getElementById("btn_close");
			b.onclick = f1;
		</script>
	</body>
</html>

③与定时器有关的方法

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

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window对象</title>
	</head>
	<body>
		<h1 id="a1">
			3秒后改变字体颜色……
		</h1>
		<h1 id="a2">
			0
		</h1>
		<script type="text/javascript">
			//一次性定时器
			var h1 = document.getElementById("a1");
			function f1(){
				h1.style = "color:#ff0000;";
			}
			var t = setTimeout(f1,3000);
			//取消一次性定时器
			function f2(){
				clearTimeout(t)
			}
			h1.onclick = f2;
			//循环计时器
			var num = 0;
			var h2 = document.getElementById("a2");
			function f3(){
				num++;
				h2.innerHTML = num;
				if(num==10){
					//取消循环计时器
					clearInterval(i);
				}
			}
			var i = setInterval(f3,1000);
			
		</script>
	</body>
</html>

(3)属性:

获取其他BOM对象:

history
location
navigator
screen

获取DOM对象:

document

(4)特点:

①window不需要创建,可以直接使用,window.方法名();

②可以省略window,即直接使用方法名();

 

4、Location对象

(1)创建

无需创建,可直接获取,location;

(2)方法

reload()重新载入当前文档;

(3)属性

href	返回完整的URL

代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Location对象</title>
	</head>
	<body>
		<input id="btn" type="button" value="去百度"/>
		<script type="text/javascript">
			var btn = document.getElementById("btn");
			btn.onclick = function(){
				//location.reload();//刷新
				//alert(location.href);//获取地址
				//设置地址
				location.href = "http://www.baidu.com/";
			}
		</script>
	</body>
</html>

 

5、History对象

(1)创建:

History 对象包含用户(在浏览器窗口中)访问过的 URL。

History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。

(2)方法

back()加载 history 列表中的前一个 URL;
forward()加载 history 列表中的下一个 URL;
go(参数)加载 history 列表中的某个具体页面;
-- 参数:
    正数:前进几个历史记录;
    负数:后退几个历史记录;

(3)属性

length返回当前窗口历史列表中的网址数;

代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Location对象</title>
	</head>
	<body>
		<input id="btn" type="button" value="去百度"/>
		<input id="btn_forward" type="button" value="前进"/>
		<input id="btn_back" type="button" value="后退"/>
		<input id="btn_go" type="button" value="走"/>
		<script type="text/javascript">
			var btn = document.getElementById("btn");
			btn.onclick = function(){
				location.href = "http://www.baidu.com/";
			}
			var btn_forward = document.getElementById("btn_forward");
			var btn_back = document.getElementById("btn_back");
			var btn_go = document.getElementById("btn_go");
			btn_forward.onclick = function(){
				history.forward();
			}
			btn_back.onclick = function(){
				history.back();
			}
			btn_go.onclick = function(){
				history.go(1);
			}
		</script>
	</body>
</html>

 

 

 

 

标签:function,btn,对象,JavaScript,getElementById,BOM,E005Web,var,document
From: https://blog.51cto.com/u_13272819/6079074

相关文章

  • E006Web学习笔记-JavaScript(四):DOM
    一、概述1、简介DocumentObjectModel文档对象模型;将标记语言文档的各个部分,封装为对象,可以使用这些对象,对标记语言文档进行CRUD(增删改查)的动......
  • E007Web学习笔记-JavaScript(五):JS事件
    一、概述1、事件概念某些组件被执行了某些操作后,触发某些代码的执行;事件:某些操作,如点击,双击,鼠标移动,键盘按下……; 2、事件源组件,如按钮、文......
  • E004Web学习笔记-JavaScript(二):JS对象
    一、Function1、概述是一个函数对象; 2、Function:函数(方法)对象①创建//1、方法1(不建议使用)varfun=newFunction(形参列表,方法体);示......
  • Javascript基础入门
    Javascript基础入门​ JavaScript,是一门能够运行在浏览器上的脚本语言.简称JS.首先,Javascript这个名字的由来就很有意思,不少人认为Javascript和Java貌似很像.容......
  • 深入解析 JavaScript 中 ES6 的 Generator 生成器
    前言大家好,我是CoderBin,本次将深入解析JavaScript中ES6的Generator生成器,希望对大家有所帮助,谢谢。如果文中有不对、疑惑的地方,欢迎在评论区留言指正......
  • 【JavaScript】23_instanceof和hasOwn
    13、instanceof和hasOwninstanceof用来检查一个对象是否是一个类的实例instanceof检查的是对象的原型链上是否有该类实例只要原型链上有该类实例,就会返回truedog->......
  • 【JavaScript】24_旧类与new运算符
    14、旧类早期JS中,直接通过函数来定义类一个函数如果直接调用xxx()那么这个函数就是一个普通函数一个函数如果通过new调用newxxx()那么这个函数就是一个够早函数​......
  • JavaScript 数组遍历的五种方法(转)
    转自:JavaScript数组遍历的五种方法这篇文章主要介绍了JavaScript数组遍历的五种方法,帮助大家更好的理解和学习使用JavaScript,感兴趣的朋友可以了解下在使用JavaScri......
  • 在PHP和JavaScript中设置Cookie、会话存储(SessionStorage)和本地存储(LocalStorage)
    A.Cookie介绍Cookie:Cookie常用于识别用户,它是服务器留在用户计算机中的小文件(大小限制在4KB),每当相同的计算机通过浏览器请求页面时,它会同时发送Cookie,即Cookie是随HTTP......
  • JavaScript相关操作
    JQUERY--HTML标签属性操作$('#id').attr('attr_name','attr_value');//设置单一属性值$('#id').attr({'attr_name1':'attr_value1','attr_name2':'attr_value2'});//......