JS BOM和数组

最新推荐文章于 2024-08-10 21:46:55 发布

原创最新推荐文章于 2024-08-10 21:46:55 发布 · 250 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS #JS BOM #JS 数组

第五章 BOM浏览器对象模型

第一节 BOM编程

BOM:Browser Object Model，浏览器对象模型。

BOM编程: 在浏览器中，js代码是通过内嵌在浏览器中的javascript解释器来运行的。在浏览器加载页面的时候，如果页面中有js代码，js解释器会将浏览器的各个部分封装成对应的对象，然后通过访问这些对象的属性和方法来实现特定的功能，这就是BOM编程。

1.window对象

window对象是一个顶层对象，其中包含很多属性和方法，其中的属性也对应一些子对象:document,history,location,screen等等。

属性/方法	说明
history	历史记录对象常用方法：history.back() history.forward() history.go()
location	地址栏对象常用方法：window.location.href
screen	客户窗口屏幕
event	事件对象
open	打开子窗口
alert	警告框
prompt	输入框
confirm	确认框

2.history历史记录对象

history记录了用户在浏览器中的浏览器记录，通过history可以访问用户的浏览记录历史信息。对应于浏览器工具栏上的前进和后退按钮。

方法:

history.forward():前往下一页

history.back():返回上一页

history.go(索引):跳到某一页

<!DOCTYPE html>
<html>
 <head>
  <title> spring </title>
  <style type="text/css">
 
  </style>

  <script type="text/javascript">
  
  </script>
 </head>

 <body>
  <h1>春天</h1>
  <a href="summer.html">访问夏天</a><br/>
  <a href="javascript:history.forward()">下一页</a>
 </body>
</html>

3.location地址栏对象

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
 
  </style>

  <script type="text/javascript">
  //当下拉框选项切换的时候，跳转网站
  function goWebSite()
  {
	//获取选中的网站
	var site = document.getElementById("website").value;
	//alert(site);
	//选中的站点数据不为空时，才跳转网站
	if(site!="")
	{
		//通过浏览器的地址栏对象，跳转页面
		window.location.href=site;
	}
  }
  </script>
 </head>

 <body>
  网址:
  <!--
  onchange:下拉选项切换时触发的事件
  -->
  <select id="website" οnchange="goWebSite()">
	<option value="">请选择</option>
	<option value="http://www.baidu.com">百度</option>
	<option value="http://www.taobao.com">淘宝</option>
	<option value="http://www.jd.com">京东</option>
  </select>
 </body>
</html>

4.open方法

open 打开子窗口

window.open('页面路径','名称','窗口属性设置')
例如 window.open('xxx.html','mywindow','width=300,height=300');

window.close();

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
 
  </style>

  <script type="text/javascript">
  //定义子窗口变量
  var subWin;
  function openWin()
  {
    for(var i=1;i<=5;i++)
	{
		//window.open:打开子窗口
		//将子窗口对象存入变量中
		subWin = window.open('js-4.html','','width=300,height=300');
	}
  }

  function closeWin()
  {
	//关闭窗口
	subWin.close();
  }
  </script>
 </head>

 <body οnlοad="openWin()">
  <button type="button" οnclick="openWin()">打开窗口</button>
  <button type="button" οnclick="closeWin()">关闭窗口</button>
 </body>
</html>

5.定时器方法

定时器方法 1s=1000ms;
setTimeout(函数名 不加(),延时时间 ms);隔一段时间只执行一次函数
setInterval(函数名,延时时间);每隔一段时间执行一次函数
例如 setTimeout("函数名()",3000);
	setTimeout(函数名,3000);

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
  var count=0;
  setTimeout(pre,1);
	function pre()
	{
		count--;
		if(count==-1)
		{
			count=9;
		}
		document.getElementById("tupian").src="../QY106/QY106-JS/lesson5/代码/image/js"+count+".gif";
		document.getElementById("url").innerHTML="../QY106/QY106-JS/lesson5/代码/image/js"+count+".gif";
		setTimeout(pre,1);
	}
	function next()
	{
		count++;
		if(count==10)
		{
			count=0;
		}
		document.getElementById("tupian").src="../QY106/QY106-JS/lesson5/代码/image/js"+count+".gif";
		document.getElementById("url").innerHTML="../QY106/QY106-JS/lesson5/代码/image/js"+count+".gif";
		setTimeout(next,1000);

	}
	var s;
	function showtime()
	{
		var d=new Date();
		var timestring=""+d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日"+d.getHours()+"时"+d.getMinutes()+"分"+d.getSeconds()+"秒";
		document.getElementById("time").innerHTML=timestring;
		s=setTimeout(showtime,1000);
	}
	function starttime()
	{
		showtime();
	}
	function stoptime()
	{
		clearTimeout(s);
	}
  </script>
 </head>
 <body>
<div id="url"></div>
<div style="height:500px">
	<img id ="tupian" src="../QY106/QY106-JS/lesson5/代码/image/js0.gif"/>
	<input type="button" οnclick="pre()" value="上一张"/>
	<input type="button" οnclick="next()" value="下一张"/>
</div>
	<div id="time"></div>
	<input type="button" id="start" value="开始" οnclick="starttime()"/>
	<input type="button" id="stop" value="停止" οnclick="stoptime()"/>
 </body>
</html>

6.HTML常用事件

onclick:点击某个对象时触发的事件

onload:元素加载完时触发的事件

onchange:元素内容改变时发生的事件可用于select元素中

onmousemove：鼠标被移动时触发

onmouseover：鼠标移入某个元素时触发

鼠标事件

/*
onclick：点击某个对象时触发
ondblclick：双击某个对象时触发
onmouseover：鼠标移入某个元素时触发
onmouseout：鼠标移出某个元素时触发
onmouseenter：鼠标进入某个元素时触发
onmouseleave：鼠标离开某个元素时触发
onmousedown：鼠标按下时触发
onmouseup：鼠标抬起时触发
onmousemove：鼠标被移动时触发
onwheel：鼠标滚轮滚动时触发
oncontextmenu：点击鼠标右键时触发
*/

键盘事件

/*
onkeydown：键盘的键按下时触发
onkeyup：键盘的键放开时触发
onkeypress：按下或按住键盘键时触发
*/

框架/对象事件

/*
onresize：浏览器窗口大小改变时触发
onabort：图形的加载被中断时触发
onload：元素加载完时触发
onerror：当加载文档或者图片时（没找到）发生的错误时触发
onscroll：文档滚动时触发
onpageshow：用户访问页面时触发
onunload：用户退出页面时触发
*/

表单事件

/*
onfocus：元素获得焦点时触发
onblur：元素失去焦点时触发
onchange：元素内容改变时触发
oninput：元素获取用户输入时触发
onsubmit：提交按钮时触发
onreset：重置按钮时触发
onselect：文本被选中时触发
*/

拖动事件

/*
ondrag：元素正在拖动时触发
ondragend：用户完成元素拖动时触发
*/

多媒体事件

/*
onplay：在视频/音频开始播放时触发
onended：在视频/音频播放结束时触发
onpause：在视频/音频暂停时触发
*/

事件的绑定：

事件名称=函数名称;  注意不要加() 加了之后为调用该函数
例如：window.οnlοad=setDiv;

 <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
  #flag
  {
  height:100px;
  width:100px;
  position:absolute;
  border:1px solid black;
  }
  </style>
  <script>
	/*window.οnlοad=function fun(){document.getElementById("flag").style.backgroundColor="lightblue";
	document.getElementById("flag").style.height="400px";
	document.getElementById("flag").style.width="400px";
	document.getElementById("flag").οnclick=function(){alert("Hello！");};
	}*/

	function fun(e)
	{
		document.getElementById("flag").innerHTML=e.clientX+","+e.clientY;
		document.getElementById("flag").style.top=e.clientY+"px";
		document.getElementById("flag").style.left=e.clientX+"px";
	}
	document.οnmοusemοve=fun;
  </script>
 </head>
 <body>
	<div id="flag" οnlοad="alert('hello')">
		这是DIV
	</div>
 </body>
</html>

第二节数组

1.数组概念

用于存储一组数据，可以对数据进行批量处理。

//创建长度为5的数组空间
var ary = new Array(6);

<script type="text/javascript">
	var num = 100;
	//创建长度为5的数组空间
	var ary = new Array(6);
	//为数组元素赋值
	ary[0] = 100;
	ary[1] ="abc";
	ary[2]=new Date();
	ary[3]=true;
	ary[4]=200;

	//ary.length:数组的长度
	alert(ary.length);

	//alert(ary[2]);
	for(var i=0;i<ary.length;i++)
	{
		alert(i+" "+ary[i]);
	}
  </script>

2.数组统计学生成绩

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
 
  </style>

  <script type="text/javascript">
  //定义长度为5的数组，输入5个学生的分数,并求总分
  var scores = new Array(5);

  for(var i=0;i<scores.length;i++)
  {
	//通过输入框接受输入分数
	var s = parseInt(prompt("请输入第"+(i+1)+"个人的分数:",""));
	//将输入存入数组
	scores[i]=s;
  }

  alert("数据存储完毕!开始输出数据");
  var sum = 0;
  for(var i=0;i<scores.length;i++)
  {
	sum = sum+scores[i];
	document.write(scores[i]+"<br/>");
  }
  document.write("总分："+sum);

  
  /*
  var num1 = prompt("请输入第1个人的分数：");
  var num2 = prompt("请输入第2个人的分数：");
  var num3 = prompt("请输入第3个人的分数：");
  var num4 = prompt("请输入第4个人的分数：");
  var num5 = prompt("请输入第5个人的分数：");
  */
  </script>
 </head>

 <body>
  
 </body>
</html>

3.拓展

取非行间样式(不能用来设置样式)
 obj.currentStyle[attr]
 getComputedStyle(obj,false)[attr]
 var arr=[12,3,4,7];
 var arr=new Array(23,5,6,4);
 创建数组无任何差别 第一种性能略高 原因代码短

 数组的属性 
 length  既可以获取，又可以设置
 例如 arr.length=1;其结果arr=[12];
 arr.length=0;常用于清空数组
 
 数组的方法
 1.添加
push(元素)，从尾部添加元素
unshift(元素)，从头部添加元素
2.删除
pop(),从尾部弹出 arr.pop();
shift(),从头部弹出 arr.shift();
3.排序
reverse（）反转数组
sort(比较函数)，排序一个数组
排序字符串数组 直接调用
排序数字数组 sort() 括号里写比较函数，例如sort(function(num1,num2){return num1-num2;})
4.连接两个数组
  a.concat(b);连接a,b两个数组
5.join(分隔符)将数组拼接成字符串
用分隔符，组合数组元素，生成字符串
字符串split
splice(开始,长度,元素...)
先删除后插入

第三节树形菜单

1.获取元素

获取成组元素方法getElementsByTagName("元素名称");

可通过getElementsByTagName("元素名称")[0]访问第几个元素对象;

.innerHTML与.outerHTML区别

.innerHTML访问元素标签内的文本

.outerHTML访问包含元素标签与内容的文本

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
  .c1
  {
	border:2px solid red;
  }
  .c2
  {
	border:2px dashed green;
  }
  </style>

  <script type="text/javascript">
  function getP()
  {
    //根据id获取单个元素
	var d1 = document.getElementById("d1");
	//根据标签名，获取元素数组
	var pAry = d1.getElementsByTagName("p");
	console.log(pAry);
	//alert(pAry.length);
	/*
	for(var i=0;i<pAry.length;i++)
	{
		//alert(pAry[i].innerHTML);
		console.log(pAry[i]);
	}*/

  }

  function getSpan()
  {
	var d2 = document.getElementById("d2");
	var spanAry = d2.getElementsByTagName("span");
	for(var i=0;i<spanAry.length;i++)
	{
		//显示元素的内部内容(innerHTML);
		alert(spanAry[i].innerHTML);
	}
  }

	function getParent()
	{
		//获取p元素的父级元素
		var p = document.getElementById("p2");
		//获取父节点
		var div = p.parentNode;
		//设置div的样式
		div.className="c1";
		//显示元素的id属性，和带元素本身标签的html内容(outerHTML)
		alert(div.id+" "+div.outerHTML);

		var span = document.getElementById("s1");
		var div2 = span.parentNode;
		//设置div2的类样式
		div2.className="c2";
		alert(div2.id+" "+div2.outerHTML);
	}

  </script>
 </head>

 <body>
  <div id="d1">
	<p>第一个P</p>
	<p id="p2">第二个P</p>
	<p>第三个P</p>
	<div>这是DIV</div>
	<p>第四个P</p>
  </div>
  <hr/>
  <div id="d2">
	<span id="s1">SPAN1</span>
	<span>SPAN2</span>
	<span>SPAN3</span>
  </div>
  <hr/>
  <input type="button" value="获取子元素测试" οnclick="getSpan()" id="btn"/>
  <input type="button" value="获取父元素测试" οnclick="getParent()" id="btn2"/>
 </body>
</html>

2.树形菜单代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
	  ul{
	  list-style:none;
	  padding-left:20px;
	  width:116px;
	  }
	  .add
	  {
		background:url(image/plus.png) no-repeat left center ;
	  }
	  .page
	  {
		background:url(image/page.png) no-repeat  left center;
	  }
	  .minus
	  {
		background:url(image/minus.png) no-repeat left center;
	  }
	  ul a{
		height:28px;
		line-height:28px;
		display:block;
		text-decoration:none;
		padding-left:18px;
	  }
	  #nav>li,ul li
	  {
		background:url(image/out.gif) no-repeat;
	  }
	  #nav>li:hover,ul li:hover
	  {
		background:url(image/hover.gif) no-repeat;
	  }
  </style>
  <script>
  function myClick(){
			  if (this.parentNode.getElementsByTagName("ul")[0].style.display=="none")
			  {
				  this.parentNode.getElementsByTagName("a")[0].className="minus";
				  this.parentNode.getElementsByTagName("ul")[0].style.display="block";
			  }
			  else
			  {
				this.parentNode.getElementsByTagName("a")[0].className="add";
				this.parentNode.getElementsByTagName("ul")[0].style.display="none";
			  }	
			 }

  function myinit()
  {
	  var arrLi=document.getElementsByTagName("li");
	  for (var i=0;i<arrLi.length;i++)
	  {
		  if (arrLi[i].getElementsByTagName("ul").length>0)
		  {
			  arrLi[i].getElementsByTagName("a")[0].className="add";
			  arrLi[i].getElementsByTagName("ul")[0].style.display="none";

			  arrLi[i].getElementsByTagName("a")[0].οnclick=myClick;
			  
		  }
		  else
		  {
			arrLi[i].getElementsByTagName("a")[0].className="page";
		  }
	  }
  }
  window.οnlοad=myinit;
  </script>
 </head>
 <body>
 <ul id="nav">
	<li>
		<a href="#">一级菜单</a>
		<ul>
			<li><a href="#">二级菜单</a></li>
			<li><a href="#">二级菜单</a></li>
			<li><a href="#">二级菜单</a></li>
		</ul>
	</li>
	<li>
		<a href="#">一级菜单</a>
		<ul>
			<li><a href="#">二级菜单</a></li>
			<li><a href="#">二级菜单</a></li>
			<li><a href="#">二级菜单</a></li>
		</ul>
	</li>
	<li>
		<a href="#">一级菜单</a>
		<ul>
			<li>
				<a href="#">二级菜单</a>
				<ul>
				<li><a href="#">三级菜单</a></li>
				<li><a href="#">三级菜单</a></li>
				<li><a href="#">三级菜单</a></li>
				</ul>
			</li>
			<li><a href="#">二级菜单</a></li>
			<li><a href="#">二级菜单</a></li>
		</ul>
	</li>
 </ul>
 </body>
</html>