JavaScript进阶二

Dear 丶 2021-10-15 09:57 393阅读 0赞

**目录**

1）在js中使用数组：

2）JS常用事件：

实战一：小图换大图（鼠标移入小图，上面显示该小图的大图）

实战二：一次性使用两种搜索引擎进行搜索：

BOM浏览器对象模型：

1）window对象：

实战三：简易的表

window对象:指的是整个浏览器对象

(1)直接获取元素的方式：

（2）获取父节点、子节点、兄弟节点：

实战项目：制作一个金币点击+++：

--------------------

# 1）在js中使用数组： #

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    			function text(){
    				var arr=new Array();
    				arr[0]=12;
    				arr[2]="two";
    				alert(arr.length);//3
    				alert(arr[1]);//undifine
    			}
    			function text1(){
    				var arr=new Array(3);
    				console.log(arr.length);//长度为3
    				var arr1=new Array(10,20,30,40);//长度为4的数组这是存储元素
    				console.log(arr1.length);
    			}
    			function text2(){
    				var arr=new Array("A",5,2);
    				arr=arr.concat("ok");//数组添加
    				console.log(arr);
    				
    //				arr.fill("abc");//填充数组，所有的数都变为abc
    //				console.log(arr);
    				
    				var index2=arr.indexOf(2);//查找元素2所在的索引
    				console.log(index2);
    				
    				var str=arr.join("-");//转为string类型，用-分割，如果括号里不写用,分割
    				console.log(str);
    				
    				console.log(arr.sort());//排序
    				
    				console.log(arr.pop());//删除最后一个数,成功返回删除的数
    				console.log(arr)//查看删除成功与否
    			}
    			function text3(){
    				var arr=[1,2,3,4,"a","b"];
    				var divEle=document.getElementById("div1");
    //				for(var i=0;i<arr.length;i++){//数组的第一种遍历
    //					divEle.innerHTML+=arr[i];
    //				}
    				for(var i in arr){//第二种遍历
    					divEle.innerHTML+=arr[i];
    				}
    			}
    			
    			function text4(){
    				//isNaN()判断 是不是   不是  数字， （不是数字？）不是为true 是数字为false
    				var a=123;//false;
    				a="123abc";//parseInt 转为123
    				a="abc123";//Nan
    				var b=parseInt(a);
    				console.log(b);
    				console.log(isNaN(a));
    			}
    			function text5(){
    				var a="alert('abc');";//普通的字符串
    				eval(a);//eval函数可以把字符串当js语言执行
    			}
    			
    		</script>
    	</head>
    	<body>
    		<input type="button" value="btn" onclick="text()"/>
    		<input type="button" value="btn2"onclick="text1()" />
    		<input type="button" value="concat" onclick="text2()" />
    		<input type="button" value="bt3" onclick="text3()" />
    		<input type="button" value="bt4" onclick="text4()" />
    		<input type="button" value="bte" onclick="text5()" />
    		<div id="div1"></div>
    	</body>
    </html>

# 2）JS常用事件： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTgxMTU0_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    			function text(){
    				document.getElementById("tx").value="不能改变";
    			}
    			function text1(){
    				document.getElementById("div1").innerHTML="放上去就会改变";
    			}
    			function text2(){
    				document.getElementById("div1").innerHTML="鼠标移走就会发生改变";
    			}
    			
    			function text3(){
    				document.getElementById("div2").innerHTML="键盘按下";
    			}
    			function text4(){
    				doucument.getElementById("div2").innerHTML="键盘谈起";
    			}
    		</script>
    	</head>
    	<body>
    		
    		<input type="text" id="tx"value="不能改变" onchange="text()" />
    		
    		<input type="button" value="放上去div会发生改变" onmouseover="text1()"onmouseout="text2()" />
    		<div id="div1"></div>
    		
    		<input type="text" value="" onkeydown="text3()" />
    		<div id="div2"></div>
    	</body>
    </html>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    			function text(){
    				alert("双击哦");
    			}
    			function ppd(){
    				var val=document.getElementById("txname").value;//获取文本框的value
    				var divEle=document.getElementById("div1");
    				if(val==""){
    					divEle.innerHTML="姓名不能为空!";
    				}else{
    					divEle.innerHTML="ok";
    				}
    			}
    		</script>
    	</head>
    	<body>
    		
    		<input type="button" value="按钮" ondblclick="text()" />
    		
    		<form action="#" method="post">
    			
    			<input type="text" id="txname"name="txname" value="" onblur="ppd()" />
    			<div id="div1"></div>
    		</form>
    	</body>
    </html>

## 实战一：小图换大图（鼠标移入小图，上面显示该小图的大图） ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTgxMTU0_size_16_color_FFFFFF_t_70 1][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    			function change(obj,url){
    				document.getElementById("bigimg").src=url;
    				obj.style.outline="1px solid red";
    			}
    			function back(obj){
    				document.getElementById("bigimg").src="/jsxx/img/show1_big.jpg";
    				obj.style.outline="none";
    			}
    		</script>
    	</head>
    	<body>
    		<table>
    			<tr >
    				<td colspan="5"><img src="/jsxx/img/show1_big.jpg" id="bigimg" /></td>
    			</tr>
    			<tr>
    				<td><img src="/jsxx/img/show1.jpg" onmouseover="change(this,'/jsxx/img/show1_big.jpg')" onmouseout="back(this)"/></td>
    				<td><img src="/jsxx/img/show2.jpg" onmouseover="change(this,'/jsxx/img/show2_big.jpg')" onmouseout="back(this)"/></td>
    				<td><img src="/jsxx/img/show3.jpg" onmouseover="change(this,'/jsxx/img/show3_big.jpg')" onmouseout="back(this)"/></td>
    				<td><img src="/jsxx/img/show4.jpg" onmouseover="change(this,'/jsxx/img/show4_big.jpg')" onmouseout="back(this)"/></td>
    				<td><img src="/jsxx/img/show5.jpg" onmouseover="change(this,'/jsxx/img/show5_big.jpg')" onmouseout="back(this)"/></td>
    			</tr>
    		</table>
    	</body>
    </html>

## 实战二：一次性使用两种搜索引擎进行搜索： ##

**特此声明:这里使用了百度浏览器的搜索引擎和 360的搜索引擎进行搜索（仅供使用学习）**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			iframe{
    				width:48%;height:600px;
    			}
    		</style>
    		<script>
    			function text(){
    				var tx=document.getElementById("search").value;//内容
    				document.getElementById("hid").value=tx;//给第一个form的hidden
    				document.getElementById("hid1").value=tx;//第二个form的hidden
    				document.baidufrm.submit();
    				document.qihufrm.submit();
    			}
    		</script>
    	</head>
    	<body>
    		<input type="text" id="search" value="" />
    		<input type="button"id="btn" value="搜索" onclick="text()" />
    		
    		<form action="http://baidu.com/s"method="get" target="baidu"name="baidufrm">
    			<input type="hidden"id="hid"name="wd" value="" />
    		</form>
    		
    		<form action="http://www.so.com/s"method="get"target="qihu"name="qihufrm">
    			<input type="hidden" id="hid1"name="q" value="" />
    		</form>
    		<iframe src="" name="baidu" frameborder="no"></iframe>
    		<iframe src="" name="qihu"  frameborder="no"></iframe>
    	</body>
    </html>

# BOM浏览器对象模型： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTgxMTU0_size_16_color_FFFFFF_t_70 2][]

## 1）window对象： ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    			function text(){
    				alert(window.innerHeight+"|"+window.innerWidth);
    			}
    			function text2(){
    				window.prompt("你说啥?");//弹出来一个可以输入的框，可以确定和取消
    			}
    			function text3(){
    				window.open("text.html");//打开一个页面
    			}
    			function text4(){
    				window.setInterval(function(){
    					alert("1秒钟我就弹出来一次烦死你");
    				},1000)
    			}
    			function text5(){
    				window.setTimeout(function(){
    					alert("1秒中之后我只弹出来一次");
    				},1000)
    			}
    		</script>
    	</head>
    	<body>
    		<input type="button" value="bt1" onclick="text()" />
    		<input type="button"value="bt2"onclick="text2()" />
    		<input type="button" value="bt3"onclick="text3()" />
    		<input type="button" value="bt4"onclick="text4()" />
    		<input type="button" value="bt5"onclick="text5()" />
    		
    	</body>
    </html>

## 实战三：简易的表 ##

![2019081321490152.png][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    			function text6(){
    				window.setInterval(function(){
    					var d=new Date();
    					var year=d.getFullYear();
    					var mon=d.getMonth()+1;
    					var dar=d.getDate();
    					
    					var hour=d.getHours();
    					var min=d.getMinutes();
    					var s=d.getSeconds();
    					var t=year+"年"+mon+"月"+dar+"日"+hour+"时"+min+"分"+s+"秒";
    					document.getElementById("div1").innerHTML=t;
    				},1000);
    			}
    		</script>
    	</head>
    	<body onload="text6()">
    		<div id="div1"></div>
    	</body>
    </html>

### **window对象:指的是整个浏览器对象** ###

(1)window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面  
(2)window.screen 对象包含有关用户屏幕的信息  
(3)window.navigator 对象包含有关访问者浏览器的信息。  
(4)window.history 对象包含浏览器的历史  
(5)window.document对象，整个文档

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="utf-8">
                    <title></title>
                    <script type="text/javascript">
                            function test1(){
                                    console.log(location.href);
                                    console.log("端口:"+window.location.port);
                                    console.log("主机名称:"+location.hostname);
                                    console.log("协议:"+location.protocol);
                                    location.href="http://www.baidu.com";//很重要
                            }
                            function test2(){
                                    console.log("可用的高"+screen.availHeight);
                                    console.log("可用的宽"+screen.availWidth);
                                    console.log("整个屏幕的宽和高:"+screen.height+"------- "+screen.width)
                            }
                            function test3(){
                                    console.log("浏览器代号:"+navigator.appCodeName);
                                    console.log("浏览器名称："+navigator.appName);
                                    console.log("用户代理:"+navigator.userAgent );
                            }
                            function test4(){
                                    
                            }
                            function test5(){
                                    //history.forward();
                                    history.go(1);
                            }
                            function test6(){
                                    //正而八经的写法
                                    var divEle=window.document.getElementById("div1");
                                    divEle.innerHTML="哈喇";
                            }
                    </script>
            </head>
            <body>
                    <input type="button" id="" value="location对象" onclick="test1()" />
                    <input type="button" id="" value="screen对象" onclick="test2()" />
                    <input type="button" id="" value="navigator对象" onclick="test3()" />
                    <input type="button" id="" value="history对象" onclick="test4()"/>
                    <input type="button" id="" value="前进" onclick="test5()" />
                    <input type="button" id="" value="document" onclick="test6()" />
                    <p><a href="index.html">主页</a></p>
                    <div id="div1">
                            
                    </div>
            </body>
    </html>

### (1)直接获取元素的方式： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    			function text(){
    				var btEle=document.getElementById("bt1");//获得唯一id元素
    				//通过Name获取元素 这个元素是一个数组
    				var checkEle=document.getElementsByName("choose");
    				console.log(checkEle.length);
    				//标签名称获得元素  这个元素时一个数组
    				var tagEle=document.getElementsByTagName("input");
    				console.log(tagEle.length);
    				//通过标签class获得元素
    				var classEle=document.getElementsByClassName("clazz");
    				console.log(classEle[0]);
    			}
    		</script>
    	</head>
    	<body>
    		<div id="div1" class="clazz">
    			<input type="button" id="bt1"name="bt1" onclick="text()" />
    			<input type="checkbox" id="choose" name="choose" value="play" />玩
    			<input type="checkbox" id="choose1" name="choose" value="drink"/>喝
    		</div>
    	</body>
    </html>

### （2）获取父节点、子节点、兄弟节点： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    			function test1(){
    				var spanEle=document.getElementById("span1");
    				//通过子节点获得父节点的元素
    				var fuEle=spanEle.parentNode;
    				var fuEle1=spanEle.parentElement;
    				alert(fuEle1);
    				
    				//通过父节点获得子节点
    				var fuElement=document.getElementById("div1");
    				var len=fuElement.childNodes.length;//div的所有东西 包括空格 一段一段 
    				alert(len);//15
    				//兄弟节点
    				alert(spanEle.nextSibling);
    				alert(spanEle.previousSibling);
    				alert(spanEle.firstSibling);
    				
    			}
    		</script>
    	</head>
    	<body>
            <input type="button" id="" value="间接获取"  onclick="test1()"/>
                <div id="div1">
                	<p>p段落</p>
                    <span> span2</span><br />
                    <span id="span1"> span1</span><br />
                    
                    <span> span3</span><br />
                    <span> span4</span><br />
                </div>
    	</body>
    </html>

# 实战项目：制作一个金币点击+++： #

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			img{
    				width:100px;height:200px;
    				position:absolute;
    				left:200px;
    				top:200px;
    			}
    		</style>
    		<script>
    			function text(){
    				var imgEle=document.createElement("img");
    				imgEle.src="../img/gold.gif";
    				var divEle=document.getElementById("div1");
    				divEle.appendChild(imgEle);
    				imgEle.style.opacity=1;
    				var iid=window.setInterval(function(){
    					imgEle.style.opacity-=0.1;
    					imgEle.style.top=(imgEle.offsetTop-2)+"px";
    					if(imgEle.style.opacity==0.1){
    						window.clearInterval(iid);
    						divEle.removeChild(imgEle);
    					}
    				},150);
    				
    			}
    		</script>
    	</head>
    	<body>
    		<input type="button" value="点击金币+1" onclick="text()" />
    		<div id="div1"></div>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTgxMTU0_size_16_color_FFFFFF_t_70]: /images/20211015/4654f208c4b148a8830a98a68ab53034.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTgxMTU0_size_16_color_FFFFFF_t_70 1]: /images/20211015/dd30a57936794fcb9601939e3020e4a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTgxMTU0_size_16_color_FFFFFF_t_70 2]: /images/20211015/8e2e235093944e7d977eb4bd4b13c8ff.png
[2019081321490152.png]: /images/20211015/8b410e837bf84faa921cd48306dd5cd5.png