2020-08-30

最新推荐文章于 2023-05-31 12:29:58 发布

蛆中之神

最新推荐文章于 2023-05-31 12:29:58 发布

阅读量325

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_41501937/article/details/108308505

版权

Js事件 Bom对象和Dom对象

重点：Dom对象，事件，Bom对象和表单

Js事件

事件类型
鼠标事件，键盘事件，HTML事件

onload:当⻚⾯或图像加载完后⽴即触发
onblur：元素失去焦点
onfocus：元素获得焦点
onclick：⿏标点击某个对象
onchange：⽤户改变域的内容
onmouseover：⿏标移动到某个元素上
onmouseout：⿏标从某个元素上离开
onkeyup：某个键盘的键被松开
onkeydown：某个键盘的键被按下

事件冒泡
IE 的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点
事件捕获
事件捕获的⽤意在于在事件到达预定⽬标之前捕获它。
Dom事件流
事件流包括三个阶段：事件捕获阶段、处于⽬标阶段和事件冒泡阶段。

事件处理程序
1 HTML 事件处理程序

<input type="button" value="pset" onclick="alert('heeh')" />

2 DOM0 级事件处理程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="pset" onclick="alert('heeh')" />
	<button type="button" id="bu">安逸</button>
	<script type="text/javascript">
		
var bu=	document.getElementById("bu");	
bu.onclick=function(){
	console.log("你好");
}		
	</script>
	</body>
</html>

注意：只能为同⼀个元素的同⼀个事件设定⼀个处理程序（覆盖）

DOM2 级事件处理程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" id="bu">点击</button>
		<button type="button" id="bu1">删除</button>
		<script type="text/javascript">
		var do1=document.getElementById("bu");	
			do1.addEventListener('click',function(){console.log("nuhao")},false);
			do1.addEventListener('click',test,false)
			function test(){
				alert('nuhaohhhh');
			}
			var do11=document.getElementById("bu1");
				do11.onclick=function(){
					do1.removeEventListener('click',test,false);	
				}
	
		</script>

	</body>
</html>

BOM对象

Window对象
系统对话框
消息框:alert 常⽤。alert() ⽅法⽤于显示带有⼀条指定消息和⼀个 OK 按钮的警告框
输⼊框:prompt，返回提示框中的值。
prompt() ⽅法⽤于显示可提示⽤户进⾏输⼊的对话框。
参数（可选）：
第⼀个参数：要在对话框中显示的纯⽂本。
第⼆个参数：默认的输⼊⽂本。
确认框:confirm，返回 true/false.
confirm() ⽅法⽤于显示⼀个带有指定消息和 OK 及取消按钮的对话框。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="aa">
		This is a div
		</div>
		<button type="button" onclick="test11()">11</button>
		<button type="button" onclick="test22()">22</button>
		<button type="button" onclick="test33()">33</button>
		<script type="text/javascript">
		function test11(){
			alert('警告');
		}	
		function test22(){
		var pr=	prompt('输年龄');
		console.log(pr);
		}	
		
		function test33(){
		var con =confirm('正的要改吗');
		if(con){
	var doc=document.getElementById("aa");
			doc.style.color='red';
			doc.innerHTML="<span>niaho</span>";
		}else{
			
		}
		
		}
			
		</script>
		
		
	</body>
</html>

打开窗口

window.open()⽅法既可以导航到⼀个特定的URL也可以⽤来打开⼀个新的窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="test()" >提交</button>
		<script type="text/javascript">
			
			function test(){
				window.open("http://www.baidu.com");
			}
		</script>
		
		
	</body>
</html>

关闭窗⼝
window.close()：关闭窗⼝。

<input type="button" value="关闭窗⼝" onclick="window.close();" />

时间函数
setTimeout() : 在指定的毫秒数后调⽤函数或计算表达式。返回⼀个唯⼀的标识；也可以通过返回的标识clearTimeout(id)：来清除指定函数的执⾏。
setInterval():可按照指定的周期（以毫秒计）来调⽤函数或计算表达式，也可根据返回的标识⽤来结
束。该⽅法会不停地调⽤函数，直到 clearInterval() 被调⽤或窗⼝被关闭。

时间倒计时
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<button type="button" onclick="st()">开始</button>
		<button type="button" onclick="closetime()">结束</button>
		<h1 id="h1"></h1>
		<script type="text/javascript">
		function startime(){
			var date=new Date();
		var str=gettime(date);
	     var time1=document.getElementById("h1");
		time1.innerHTML=str;	
		}	
		var si;
			function st(){
			 si	=setInterval(startime,1000);
			}
			
		function closetime(){
			clearInterval(si);
		}
		
		function gettime(date){
			var year = date.getFullYear();
			console.log(year);
			var month = (date.getMonth()+1) < 10 ? "0" + (date.getMonth()+1) : (date.getMonth()+1);
			console.log(month);
			var dat = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
			console.log(dat);
			//时分秒
			var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
			console.log(hour);
			var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
			console.log(minute);
			var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
			console.log(second);
			
			var str = year +'-'+ month +'-'+ dat +" "+ hour +':'+ minute +':'+ second;
			console.log(str);
			
			return str;
			
		}	

		</script>
		
	</body>
</html>

history对象
history对象的属性： length，返回浏览器历史列表中的 URL 数量。
history对象的⽅法：
back()：加载 history 列表中的前⼀个 URL。
forward()：加载历史列表中的下⼀个 URL。当⻚⾯第⼀次访问时，还没有下⼀个url。
go(number|URL): URL 参数使⽤的是要访问的 URL。⽽ number 参数使⽤的是要访问的 URL 在 History的 URL 列表中的相对位置。 go(-1)，到上⼀个⻚⾯

html1
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="history2.html">history2.html</a>
		<h1>第一个页面</h1>
		<input type="button" value="前进" onclick="window.history.forward();" />
		<script>
		console.log(window.history);
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<a href="history1.html">history1.html</a>
		<h1>第二个页面</h1>
		<input type="button" value="后退" onclick="window.history.back();"/>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<h1>我是3</h1>
		<input type="button" value="第⼀个⻚⾯" onclick="window.history.go(-2);"/>
		<input type="button" value="后退" onclick="window.history.back();"/>
		
	</body>
</html>

location对象
location 对象是window对象之⼀，提供了与当前窗⼝中加载的⽂档有关的信息，还提供了⼀些导航功
能。也可通过 window.location 属性来访问。
location 对象的属性 href：设置或返回完整的 URL
location 对象的⽅法
reload()：重新加载当前⽂档。
replace()：⽤新的⽂档替换当前⽂档。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" value="" />
		<input type="button" value="刷新" onclick="window.location.reload();" />
		<input type="button" value="百度" onclick="openBaidu();"/>
		
		
		<script type="text/javascript">
		function openBaidu(){
		window.location.href = "http://www.baidu.com/s";
		}
		</script>
	</body>
</html>

DOM对象

获取节点
getElementById() 根据id获取dom对象，如果id重复，那么以第⼀个为准
getElementsByTagName() 根据标签名获取dom对象数组
getElementsByClassName() 根据样式名获取dom对象数组
getElementsByName() 根据name属性值获取dom对象数组，常⽤于多选获取值`

<script type="text/javascript">
// 按照id获取元素
function testById() {
// 返回单个对象
var p = document.getElementById("p1");
console.log(p);
// 表示获取元素开始标签和结束标签之间的html结构
console.log(p.innerHTML);
console.log(p.innerText); // 表示获取标签之间的普通⽂本
}
// 按照name获取元素
function testByName() {
// 对象数组
var ho = document.getElementsByName("hobby");
console.log(ho);
for(var i = 0; i <= ho.length - 1; i++) {
console.log(ho[i].value);
}
}
// 按照标签名获取元素
function testByTagName() {
// 对象数组
var inputArr = document.getElementsByTagName("input");
for(var i = 0; i < inputArr.length; i++) {
if(inputArr[i].type == "text") {
console.log("text类型");
} else if(inputArr[i].type == "checkbox") {
if(inputArr[i].checked) {
console.log(inputArr[i].value);
}
}
}
}
// 按照class属性获取元素
function testByClass() {
// 对象数组
var ps = document.getElementsByClassName("para");
console.log(ps[0].innerHTML);
ps[0].innerHTML += "这是⼀段新的⽂本";
}
</script>

创建节点和插⼊节点
createElement() 创建⼀个新的节点，需要传⼊节点的标签名称，返回创建的元素对象
createTextNode() 创建⼀个⽂本节点，可以传⼊⽂本内容
innerHTML 也能达到创建节点的效果，直接添加到指定位置了

write() 将任意的字符串插⼊到⽂档中
appendChild() 向元素中添加新的⼦节点，作为最后⼀个⼦节点
insertBefore()
向指定的已有的节点之前插⼊新的节点newItem：要插⼊的节点exsitingItem：参
考节点需要参考⽗节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="add()">添加段落</button>
		<div id="div1">
	
		</div>
		<script type="text/javascript">
			function add(){
		var di=document.getElementById("div1");	
		var ce=document.createElement('p');
	var ct=	document.createTextNode('hello');
			di.appendChild(ce);
			ce.appendChild(ct);}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="addPara();">添加段落</button>
		<button onclick="addImg();">添加图⽚</button>
		<button onclick="addTxt();">添加⽂本框</button>
		<button onclick="addOptions()">添加选项</button>
		<select name="music">
		<option value="-1">你⼼内的⼀⾸歌</option>
		<option value="0">南⼭南</option>
		<option value="1">喜欢你</option>
		</select>
		<hr/>
		<div id = "container"></div>
	<script type="text/javascript">
	// function addPara(){
	// var ge=	document.getElementById('container');
	// var ce=	document.createElement('p');
	// var ct=document.createTextNode('hekk');
	// 	// ce.appendChild(ct);
	// 	// ge.appendChild(ce);
	// 	// ce.innerHTML('hhhhhhhh');
	// 	// ge.innerHTML(ce);
		
	// 	var src="<p>nihaoh</p>";
	// 	ge.innerHTML(src);
		
		
	// }	
		
		function addImg(){
			var ce=document.createElement('img');
			ce.setAttribute('src','http://www.baidu.com/img/bd_logo1.png');
			ce.style.width=300;
			ce.style.height=300;
			var ge=	document.getElementById('container');
			ge.appendChild(ce);

		}
		
		//  function.addTex(){
		// 	var ce =document.createElement("input");
		// 	ce.setAttribute('type', 'text');
		// 	ce.setAttribute('value', '添加成功');
		// 	var ced =document.getElementById("container");	
		// 	ced.appendChild(ce);
		// }
	function.addOptions(){
	var op=	document.createElement("option");
	op.value='2';
	op.text="nihao";
	var sel = document.getElementsByTagName("select")[0];
	sel.appendChild(op);

	}
		
		
		
		
	</script>
		
		
		
	</body>
</html>

间接查找节点
childNodes 返回元素的⼀个⼦节点的数组
firstChild 返回元素的第⼀个⼦节点
lastChild 返回元素的最后⼀个⼦节点
nextSibling 返回元素的下⼀个兄弟节点
parentNode 返回元素的⽗节点
previousSibling 返回元素的上⼀个兄弟节点

删除节点
removeChild() 从元素中移除⼦节点

<script type="text/javascript">
function delNode(){
var programmer =document.getElementById("programmer");
// 从⽗元素中删除节点，获取要删除对象的⽗元素，然后从⽗元素中删除该对象
programmer.parentNode.removeChild(programmer);
}
</script>
<body>
<span id="programmer">程序猿</span>
<a href="javascript:void(0)" onclick="delNode();">删除</a>
</body

表单

获取表单
document.表单名称
document.getElementById(表单 id);
document.forms[表单名称]
document.forms[索引]; //从 0 开始

<body>
<form id='myform' name="myform" action="" method="post"></form>
<form id='myform2' name="myform2" action="" method="post"></form>
</body>
<script>
//四种⽅式
var form =document.getElementById("myform");
form =document.myform;
form =document.forms["myform"];
form =document.forms[0];
console.log(form);
</script>

获取表单元素
通过 id 获取： document.getElementById(元素 id);
通过 form.名称形式获取: myform.元素名称; name属性值
通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
通过 tagName 数组 :document.getElementsByTagName(‘input’)[索引] // 从0开始

<body>
<form id='myform' name="myform" action="" method="get">
姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
密码:<input type="password" id="upwd" name="upwd" value="1234"/><br />
<input type="hidden" id="uno" name="uno" value="隐藏域" />
个⼈说明:<textarea name="intro"></textarea>
<button type="button" onclick="getTxt();" >获取元素内容</button>
</form>
</body>
<script>
function getTxt(){
var uno = document.getElementById("uno");
var uname = myform.uname;
console.log(uname + "--------");
var upwd = document.getElementsByTagName('input')[1] ;
var intro = document.getElementsByName("intro")[0];
console.log(uno.value +"， "+ uname.value +"， "+ upwd.value +"， "+ intro.value);
}
</script>

获取单选按钮
document.getElementsByName(“name属性值”);

<form action="" name="myform">
<input type="text" name="inputName" value="aaa" />
<input type="radio" name="rad" value="1" /> 1
<input type="radio" name="rad" value="2" /> 2
</form>
<script type="text/javascript">
var radios = document.getElementsByName('rad');
//radios[0].checked = 'checked'
for(var i = 0; i<radios.length; i++){
console.log(radios[i].checked + '---' + radios[i].value)
}
</script>

获取多选按钮

var ufav = document.getElementsByName("ufav");
var favstr = "";
for (i = 0;i < ufav.length; i++){
if(ufav[i].checked){
favstr += ufav[i].value+",";
}
}
favstr = favstr.substr(0,favstr.length-1);

获取下拉选项
（1）获取 select 对象
（2）获取选中项的索引：
（3）获取选中项 options 的 value属性值：
注意：当通过options获取选中项的value属性值时，
若没有value属性，则取option标签的内容
若存在value属性，则取value属性的值
（4）获取选中项 options 的 text：
选中状态设定： selected=‘selected’、 selected=true、 selected
未选中状态设定：不设selected属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
		<body onload="init()">
		<form id='myform' name="myform" action="" method="">
		<select id="ufrom" name="ufrom">
		<option value="-1" >请选择</option>
		<option value="0" selected="selected">北京</option>
		<option value="1">上海</option>
		</select><br />
		<button type="button" id="sub" name="sub">提交</button>
		</form>
		</body>
		<script>
		function init () {
		var sub = document.getElementById("sub");
		sub.onclick = function () {
		//获取select对象
		var ufrom = document.getElementById("ufrom");
		console.log("表单对象： " + ufrom);
		//获取选中的索引
		var idx = ufrom.selectedIndex;
		console.log("选中项的索引值： " + idx);
		//获取选中项的value值
		var val = ufrom.options[idx].value;
		console.log("选中项的value属性值： " + val);
		//获取选中项的text
		var txt = ufrom.options[idx].text;
		console.log("选中项的text： " + txt);
		}
		}
		</script>
	
</html>

提交表单
1）使⽤普通button按钮+onclick事件+事件中编写代码:获取表单.submit();（2）使⽤submit按钮 + οnclick=“return 函数()” +函数编写代码:最后必须返回： return true|false;（3）使⽤submit按钮/图⽚提交按钮 + 表单οnsubmit=“return 函数();” +函数编写代码:最后必须返回： return true|false;

<form id='myform1' name="myform2" action="#" method="get" onsubmit="return onsub();">
<input name="test" id="uname"/><span id="msg"></span><br />
<!--通过js事件： sub()提交表单-->
<input type="button" onclick="sub();" value="提交表单1" />
<input type="submit" onclick="return sub2();" value="提交表单2" />
<input type="submit" value="提交onsubmit" /><br />
<input type="image" src="img/u=71331624,2965806045&fm=23&gp=0.jpg"
width="60px" height="40px" />
</form>
<script type="text/javascript">
// input的type=button，调⽤submit()⽅法提交
function sub(){
document.myform2.submit();
}
// 进⾏校验，返回值为true才能提交
function sub2(){
var uname = document.getElementById("uname");
var val = uname.value;
if(val.length>0){
return true; // 提交
}
document.getElementById("msg").innerHTML = "不能空着啊！！！ ";
document.getElementById("msg").style.color="red";
return false; // 不提交
}
// onsubmit事件提交
function onsub () {
var uname = document.getElementById("uname");
var val = uname.value;
if(val.length>0){
return true; // 提交
}
document.getElementById("msg").innerHTML = "填写点⼉东⻄呗！ (ˉ▽￣～) 切~~";
document.getElementById("msg").style.color="red";
return false; // 不提交
}
</script>

蛆中之神

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-08-30

Js事件 Bom对象和Dom对象重点：Dom对象，事件，Bom对象和表单Js事件事件类型鼠标事件，键盘事件，HTML事件onload:当⻚⾯或图像加载完后⽴即触发onblur：元素失去焦点onfocus：元素获得焦点onclick：⿏标点击某个对象onchange：⽤户改变域的内容onmouseover：⿏标移动到某个元素上onmouseout：⿏标从某个元素上离开onkeyup：某个键盘的键被松开onkeydown：某个键盘的键被按下事件冒泡IE 的事件流叫做事件冒泡，即事
复制链接

扫一扫