JavaScript的用法与概述（2）

最新推荐文章于 2024-09-14 19:44:09 发布

我也曾把你举过头顶

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量108

点赞数 2

分类专栏： JavaSE基础文章标签： javascript html5 html

本文链接：https://blog.csdn.net/qq_53999369/article/details/120473287

版权

JavaSE基础专栏收录该内容

81 篇文章 0 订阅

订阅专栏

Java的用法与概述

EVENT对象，触发器
HTMLDOM
Location对象
浏览器对象

EVENT对象，触发器

几种不同的触发器和用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function test(){
				console.log("调用事件");
			}
		/* 
			标签可以产生事件
			onclick()鼠标点击时； 
			ondblclick鼠标双击时; 
			onblur()标签失去焦点; 
			onfocus()标签获得焦点; 
			onmouseover()鼠标被移到某标签之上; 
			onmouseout鼠标从某标签移开; 
			onload()是在网页加载完毕后触发相应的的事件处理程序; 
			onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。 
			Onkeydown键盘按下 
			Onkeyup 键盘抬起
			onload 当网页加载后自动触发
		*/
		</script>
	</head>
	<body>
		<input type="button" value="单击" onclick="test()"/><br />
		<input type="button" value="双击" ondblclick="test()"/><br />
		<input type="text" onfocus="test()"/><br/>
		<input type="text" onblur="test()"/><br/>
		<div style="background-color: aqua ; width: 200px; height: 200px;" onmouseover="test()" onmouseout="test()"></div><br />
		<input type="text" onkeydown="test()"/><br/>
		<input type="text" onkeyup="test()"/><br/>
		<input type="text" onkeyup="test()"/><br/>
		
	</body>
</html>

HTMLDOM

js要对网页中的标签进行操作，那么js认为网页中的每个标签都是一个对象
  我们想要在网页中的标签进行操作，首先要获得网页的标签 要操作 先得到 
如何获得网页中的标签？
  document对象：表示整个HTML文档，当浏览器加载网页时，会创建一个document对象
  通过ID获得对象： document.getElementById("id");

根据id获得对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		 <script type="text/javascript">
		 	function test(){
		 	//通过document的方法，得到id
				var divobj1 = document.getElementById("div1");
				var divobj2 = document.getElementById("div2");
				//1. 对标签的内容进行操作
				divobj2.innerHTML = divobj1.innerHTML+"我是div1转过来的";
				
				//2. 操作标签的css
				divobj1.style.display="none";//none 消失   
				divobj2.style.backgroundColor="red";
				divobj2.style.width="200px";
				divobj2.style.height="20px";
			}
			function test1(){
				//3. 对标签的属性进行操作
				//先拿到
				var divobjtext1 = document.getElementById("text1");
				var divobjtext2 = document.getElementById("text2");
				
				//在操作属性
				divobjtext2.value=divobjtext1.value;
				divobjtext1.value="";
				
			}
		 </script>
		 
	</head>
	<body>
		<input type="button" value="点击操作" onclick="test()" />
		<div id ="div1">
			div1
		</div>
		<div id ="div2">
		</div>
		
		<input type="text" id="text1" name=" "value=""/><br />
		<input type="text" id="text2" name="" value=""/>
		<input type="button" id="button1" value="测试" onclick="test1()"/>
	</body>
</html>

将js代码与html代码分离出来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		    //先加载完在加载此方法
			//匿名函数
			window.onload=function(){//onload事件 绑定一个处理函数
				var btn1 = document.getElementById("btn1");
				btn1.onclick = function(){//为btn1绑定一个onclick事件
					//在js代码中用标签事件绑定函数，将js函数从html中分离出来
					alert(111);
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="按钮" id="btn1"/>
	</body>
</html>

通过name、class、标签名获得对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//根据标签名、类、Name获得的标签对象，得到的是一个集合，哪怕满足的条件只有一个
		function test(){
			var obj = document.getElementsByTagName("input")//选取以input为首的标签集合 obj现在是一个集合 用for可以验证
			//var obj = document.getElementsByClassName("input")  选取类
			//var obj = document.getElementsByName()("input")  选取name
			for (var i = 0; i < obj.length; i++) {
				obj[i].checked = "checked";//obj是集合，以for循环获得其每一个元素  
				//checked就是选中选择框
			}
		}
		
		 window.onload=function(){
			var obj1 = document.getElementsByClassName("h1");
				for (var i = 0; i < obj1.length; i++) {
					obj1[i].onclick = function(){
						alert(this.value);
					}
				}
			
		}
		</script>
	</head>
	<body>
		<input type="checkbox" value="1" class="c1" name="c"/>
		<input type="checkbox" value="2" class="c1" name="c"/>
		<input type="checkbox" value="3" class="c1" name="c"/>
		<input type="checkbox" value="4" class="c1" name="c"/>
		<input type="button" value="全选" id="btn1" onclick="test()"/>
		
		<input type="button" value="1" class="h1"/>
		<input type="button" value="2" class="h1"/>
		<input type="button" value="3" class="h1"/>
	</body>
</html>

Location对象

重复进行操作，在指定的时间后，调用指定函数。
setTimeout(“函数”,”时间”)未来的某时执行代码
clearTimeout()取消setTimeout()
setInterval(“函数”,”时间”)每隔指定时间重复调用
clearInterval()取消setInterval()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function test(){
				alert();
			}
			//在指定的时间后，调用指定函数
			var t =setTimeout("test()",1000);
			function cleatTime(){
				clearTimeout(t);//取消指定计时器
			}
			/* setTimeout(“函数”,”时间”)未来的某时执行代码 
			clearTimeout()取消setTimeout() 
			setInterval(“函数”,”时间”)每隔指定时间重复调用 
			clearInterval()取消setInterval() 
			*/
		   var s = setInterval("test()",3000);
		   function clearTime(){
			   clearInterval(s);
		   }
		</script>
	</head>
	<body>
		<input type="button" value="取消第一次定时" onclick="cleatTime()" />
		<input type="button" value="取消持续定时" onclick="clearTime()"/>
	</body>
</html>

浏览器对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function show(msg){
				var msgdiv = document.getElementById("msgshow");
				msgdiv.innerHTML = msg;
			}
			function openNewWindow(e){
				var x = e.screenX;
				var y = e.screenY;
				//window.open(‘url’, ‘name’,’features’) - 打开新窗口
				window.open("浏览器对象window1子.html","浏览器对象window1子","width=300,height=300,left="+x+",top="+y);
			}
		</script>
	</head>
	<body>
		父
		<div id = "msgshow"></div>
		<iframe src ="浏览器对象window1子.html"></iframe><!-- 内联窗口 具有继承的关系 -->
		<input type="button" value="打开新窗口" onclick="openNewWindow(event)"/>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function send(){
				var msg = document.getElementById("msg").value;
				//发送
				window.parent.show(msg);//在子窗口中调用父窗口方法  获得父级窗口对象(父子级之间调用)
			}
		</script>
	</head>
	<body>
		子
		<input type="text" id = "msg" />
		<input type="button" value="发送" onclick="send()" />
	</body>
</html>