JavaScript高级

最新推荐文章于 2025-05-02 04:08:11 发布

Downhill Wind

最新推荐文章于 2025-05-02 04:08:11 发布

阅读量262

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/Cream336/article/details/131647540

版权

一.Bom对象（了解）

bom: browser object model 浏览器对象模型 js希望和浏览器有一定的交互能力

BOM对象：

1.History对象：上网的历史记录；

2.Location对象：地址栏对象;

3.最大的对象：window对象; 是顶层对象;

4.Screen对象;

5.Navigator对象：

window对象(*)

所有的浏览器都支持window对象。它表示的浏览器窗口

window对象是js中的顶层对象，所有的js函数，变量等都是window对象成员。

甚至Dom的document也是window对象的属性之一。

frameset

可以把window页面进行分割, 是一个框架标签，把页面引入或者进行割，最大的缺点就不能body一块使用

分割的标签标签引入其他页面

<frameset rows="20%,*">
		<frame src="hear.html" />
		
		<frameset cols="20%,*">
			<frame src="left.html" />
			<frame src="rigth.html" />
		</frameset>
</frameset>

iframe

可以把window页面进行分割，是一个框架标签，可以和body一块使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<iframe src="index.html"></iframe>
		可以书写自己的东东
	</body>
</html>

confrim确认框

confrim两个值确定（true）取消(false) var con = window.confrim(消息); 返回的类型为boolean

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    右
    <input type="button" value="删除" id="del"/>
    <script>
        window.onload=function(){
            //删除按钮绑定单击事件
          let del_btn=  document.getElementById("del");
          del_btn.onclick=function(){
                //弹出提示框，是否要删除
             let rel= window.confirm("确定要删除吗？");//boolean true/false
             if(rel){
                alert("删除成功");
             }else{
                alert("就知道你不忍心删我~~~");
             }
          }
        }
    </script>
</body>
</html>

时间周期

clearInterval()	取消由setInterval()设置的timeout
clearTimeout()	取消setTimeout()设置的timeout
setInterval()	指定时间周期
setTimeout()	在指定的毫秒数后调期函数或者计算表达式

案例让时间走动，进行开始或者停止控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态时钟</title>
</head>
<body>
    <span id="spanid"></span>
    <!-- 点击按钮，时间停止走动 -->
    <input type="button" value="停止" id="stop">
    <input type="button" value="开始" id="start">
    <script>
        window.onload=function(){
            //span标签中显示当前时间
            setTime();
            //每隔一秒，重新设置span标签时间
            let timeid=setInterval("setTime()",1000);
            //点击 停止按钮 
            document.getElementById("stop").onclick=function(){
                //取消 周期函数 clearInterval(时间周期id)
                clearInterval(timeid);
            }
            //点击 开始按钮
            document.getElementById("start").onclick=function(){
                //继续时间走动  再次设置周期函数
                timeid=setInterval("setTime()",1000);
            }
        } 
        function setTime(){
            //1.得到当前时间
            let now =new Date();
            let now_str= now.toLocaleString();//当前时间字符串
            //2.设置span标签
            let span_el=document.getElementById("spanid");
            span_el.innerHTML = now_str;
        }
    </script>
</body>
</html>

倒记时案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
	</head>
	<body>
		<span style="font-size:40px;color:orange;font-weight:bold" id="spanid">10</span>
    秒后跳转至<a href="http://www.baidu.com">百度</a>首页
    <script>
        window.onload=function(){
            setInterval("sett()",1000);
        }
        let index =10;
        //定义函数，修改页面span标签中数字  每秒减一
        function sett(){
            index --;
            document.getElementById("spanid").innerHTML = index;
            //倒计时 为0 时
            if(index==0){
                //跳转页面
                location.href = "http://www.baidu.com";
            }
        }
    </script>		
	</body>
</html>

关闭，打开浏览器

close()	关闭浏览器
open()	打开浏览器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function open_Browser(){
				//打开浏览器窗口
				window.open("04-让时间动起来.html");
			}
		</script>
	</head>
	<body>
		<input type="button" value="打开浏览器" onclick="open_Browser()" />
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//关闭浏览器
			function close_Browser(){
				window.close();
			}
		</script>
	</head>
	<body>
	<input type="button" value="关闭浏览器" onclick="close_Browser()" />
	</body>
</html>

history对象

history对象包含用户访问过的url, 注意：一定是访问过的历史url

history是window对象的一部份，可以通过window.history属性进行访问

back()	加载history列表中的前一个URL
forward()	加载history列表中的下一个URL
go(数字)	加载hitory列表中的某一个具体的页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		我是01html
		<a href="02.html">去02html</a>
	</body>
</html>

		<script>
			//返回上一页
			function backPage(){
				history.back();
			}			
			//跳到下一页
			function forwardPage(){
				history.forward();
			}			
			//指定跳转
			function goPage(){
				/* 
					负数是指定上一个页（左边）  
					正数是指定下一个页（右边）  
				 */
				history.go(1);
			}
		</script>
	</head>
	<body>		
		<input type="button" value="返回上一页" onclick="backPage()" />
		<input type="button" value="跳到下一页" onclick="forwardPage()" />
		<input type="button" value="指定跳转" onclick="goPage()" />		
		我是02html
		<a href="03.html">去03html</a>
	</body>

		<script>
			//指定跳转
			function goPage(){
				history.go(-2);//跳转到01
			}
		</script>
	</head>
	<body>
		<input type="button" value="指定跳转" onclick="goPage()" />
		我是03html
		<a href="01.html">去01html</a>
	</body>

Location对象

Location对象是window对象的一部份，可以通过window.location属性来访问

location表示是当前浏览器的地址对象。浏览器的地址中主要保存的是访问某个网站的url地址

例：把用户带到一个新的地址

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>		
		<script>
			function order(){
				location.href = "http://www.baidu.com";
			}
		</script>
	</head>
	<body>		
		<input type="button" value="查询订单" onclick="order()"/>		
		<a href="http://www.baidu.com">查询订单</a>		
	</body>
</html>

二.Dom对象（*）

Dom对象: Document Object Model 文档对象模型

W3C组织规定：

当浏览器把一个html文件加载到内存中之后，这个html文件，就是一个Document对象。并且在浏览器加载html文件中的所有标签时，把html文件中的所有标签页加载成不同的标签对象，以及标签中的属性，也加载成属性对象，标签中的文本也加载成文本对象。

浏览器在加载某个标签时，标签的文本数据，被加载成当前标签的一个子标签。当我们把一个html文件加载完成之后，他们就得到这个html文件中的所有标签，属性，文本对象。可以使用js技术结合Document对象，对html文件中的所有标签，进行各种操作。

在浏览器把html文件加载完成之后，标签被称作标签对象（元素节点），标签中的文件称为文本节点（文本对象），标签的属性称为属性节点（属性对象）。

节点信息：

nodeName(节点名称) nodeVale(节点值) nodeType(节点类型)

document对象

Document对象代表整个html文档，可用来访问页面中的所有元素

快速获取html中的页面的标签对象

document.getElementById()	返回指定id对象的引用
document.getElementsByName()	返回指定带有名称的对象集合
document.getElementsTagName()	返回指定带有标签名的对象集合
document.getElementsByClassName()	根据Class属性值获取元素对象们。返回值是一个数组
document.querySelector(id选择器)	根据id选择器，获取元素
document.querySelectorAll(css选择器)	根据css选择器获取元素，返回是一个数组

* getElementById()

	<script>
		function demo(){
			//方式一，获取元素id
			//var inputid = document.getElementById("inputid");
			
			//方式二，获取元素id
			var inputid = document.querySelector("#inputid");
			
			if(inputid.type == "text"){
				inputid.type ="password";
			}else if(inputid.type == "password"){
				inputid.type ="text";
			}			
		}		
	</script>
</head>
<body>
	<input type="text" name="pwd" id="inputid"/>
	<input type="button" onclick="demo()" value="显示/隐藏密码" />
</body>

getElementsByTagName()

	<script>
		function demo1(){
			//方式一，getElementsByTagName("img"); 返回的是数组
			// var _img = document.getElementsByTagName("img");
			
			//方式二，querySelectorAll("img") 可以根据css选择器选中
			var _img = document.querySelectorAll("img");
			_img[0].width += 30;
		}
		
		function demo2(){
			var _img = document.getElementsByTagName("img");
			_img[0].width -= 30;
		}
		
	</script>
</head>
<body>
	<img src="img/404.jpg" width="450px"/>	
	<input type="button" onclick="demo1()" value="放大" />
	<input type="button" onclick="demo2()" value="缩小" />
</body>

getElementsByName()

	<script>
		function demo(){
			//方式一， getElementsByName("hobby");
			// var hobbys = document.getElementsByName("hobby");
			
			//方式二，querySelectorAll("input[name='hobby']") css选择器
			var hobbys = document.querySelectorAll("input[name='hobby']")
			
			for (var i = 0; i < hobbys.length; i++) {
				if(hobbys[i].checked == true){
					alert(hobbys[i].value);
				}
			}
		}		
	</script>
</head>
<body>
	<input type="checkbox" name="hobby" value="悠悠球"/>悠悠球
	<input type="checkbox" name="hobby" value="乒乓球"/>乒乓球
	<input type="checkbox" name="hobby" value="足足球"/>足足球
	
	<input type="button" value="提交" onclick="demo()" />	
</body>

getElementsByClassName()

		<script>
			function demo(){
				//方式一，getElementsByClassName("hobby"
				// var hobbys = document.getElementsByClassName("hobby");
				
				//方式二,querySelectorAll(".hobby") css选择器
				var hobbys = document.querySelectorAll(".hobby");
				
				for (var i = 0; i < hobbys.length; i++) {
					if(hobbys[i].checked == true){
						alert(hobbys[i].value);
					}
				}
			}
		</script>
	</head>
	<body>		
		<input type="checkbox" name="hobby" class="hobby" value="悠悠球"/>悠悠球
		<input type="checkbox" name="hobby" class="hobby" value="乒乓球"/>乒乓球
		<input type="checkbox" name="hobby" class="hobby" value="足足球"/>足足球
		
		<input type="button" value="提交" onclick="demo()" />		
	</body>

操作内容

属性名	描述
element.innerText	获取或者修改元素的纯文本内容
element.innerHTML	获取或者修改元素的html内容
element.outerHTML	获取或者修改包含自身的html内容

代码演示

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <style>
            #myDiv {
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div id="myDiv">
			<h4>注释</h4>
			程序猿最讨厌自己写注释，同时也最讨厌别人不写注释
		</div>
        <script>
			//获取id
            let myDiv = document.getElementById('myDiv');
			
			//innerHTML 获取标签中所有内容，包括标签；从对象的起始位置到终止位置的全部内容
			console.info(myDiv.innerHTML);
			console.info(myDiv.innerHTML="拉出去");
			console.info(myDiv.innerHTML+="拉出去");
			
			// innerText 获取标签中纯文本内容，不包括标签；
			console.info(myDiv.innerText);
			console.info(myDiv.innerText="拉出去");
			console.info(myDiv.innerText+="拉出去");
			
			// outerHTML 获取标签本身，修改标签本身 ，添加标签本身的后面
			console.info(myDiv.outerHTML);
			console.info(myDiv.outerHTML="<h1>别人从不写注释，不写文档... </h1>");
			console.info(myDiv.outerHTML +="<h1>别人从不写注释，不写文档... </h1>");
			
        </script>
	</body>
</html>

总结

1. innerText 获取的是纯文本 
   innerHTML获取的是所有html内容 
   
2. innerText 设置到页面中的是纯文本 
   innerHTML设置到页面中的html会展示出外观效果 
   
3. innerHTML不包含自身 
   outerHTML包含自身的html内容

常用的事件

点击事件

事件	描述
onclick	单击事件
ondblclick	双击事件

焦点事件

事件	描述
onblur	失去焦点
onfocus	元素获得焦点

加载事件

事件	描述
onload	页面加载完成后立即发生

鼠标事件

事件	描述
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开
onmousemove	鼠标被移动
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开

键盘事件

事件	描述
onkeydown	某个键盘按键被按下
onkeyup	某个键盘按键被松开
onkeypress	某个键盘按键被按下并松开

改变事件

事件	描述
onchange	域的内容被改变

表单事件

事件	描述
onsubmit	提交按钮被点击

事件案例一

		<script>			
			function demo(){
				//获取用户输入信息
				var name =  document.querySelector("#uid").value;
				//正则
				var regExp = new RegExp("^1[3456789]\\d{9}$");
				//判断是否满足正则
				if(regExp.test(name)){
					document.getElementById("spanid").innerText = "合法";
					//提交到后台，后台到db，查询有没有这个手机号，如果有，手机号已存在！！
				}else{
					document.getElementById("spanid").innerText = "不合法";
				}
			}			
			function demo2(){
				alert("我是聚焦事件")
			}			
		</script>
	</head>
	<body>
		
		手机号：<input type="text" name="username" id="uid" onblur="demo()" /><span id="spanid"></span><br>
		密码：<input type="text" name="pwd" id="pid" onfocus="demo2()" /><span id="spanid"></span>		
	</body>

事件案例二

		<script>			
			window.onload = function(){
				//获取初始的图片
				var _img = document.getElementById("img");				
            	//绑定鼠标悬浮事件
				_img.onmouseover = function(){
					_img.src = "img/p4.jpg";
				}
            	//绑定鼠标离开事件
				_img.onmouseout = function(){
					_img.src = "img/p3.jpg";
				}
			}
		</script>
	</head>
	<body>		
		<img src="img/p3.jpg" id="img" width="450px"/>		
	</body>

事件案例三

		<script>
			window.onload = function(){
            	 //获取input框
				var _input = document.getElementById("iid");
				
            	//绑定键盘按下事件
				_input.onkeydown = function(){
					_input.style.background = "yellow";
				}
            	//绑定键盘松开事件
				_input.onkeyup = function(){
					_input.style.background = "red";
				}				
			}
		</script>
	</head>
	<body>		
		<input type="text" id="iid" />		
	</body>

注意事项

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>		
		<script>
			function demo(){
				alert(444)
			}
		</script>		
	</head>
	<body>
		<input type="button" value="提交" id="buttonid" onclick="demo()" />
		<!-- 
			约定大于配置： 很情况下在写代码，程序员都不约而同都这种写法
			前端人员现在都不这种写法，把所有的样式都用css来控制
			前端人员认为你不应该把事件写在标签中
			前端人员认为你应该把事件写js，事件是js所有拥有			
			我们应该优先加载页面相关的样式，html结构
			我们应该把页面以外的尽量写在页面下面
		 -->
		<center>
			<p>我爱你中国</p>
		</center>
	</body>	
	<script>
		window.onload = function(){
			var buttonid =  document.getElementById("buttonid");
			buttonid.onclick = function(){
				alert(888)
			}
		}
	</script>
</html>

操作节点

createElement(标签名称)	创建标签
appendChild	为某一个标签，去添加子标签
父元素对象.removeChild	为某一个标签，删除孩子标签
setAttribute	为某一个标签添属性
removeAttribute	删除某一个标签中的属性
createTextNode	生成文本节点

appendChild添加子标签

	<script>
		function addElement(){
			//创建标签
			var _li = document.createElement("li");//<li></li>
			
			//创建文本
			var textNode = document.createTextNode("一燕");//一燕
			
			//添加文本到li标签中
			_li.appendChild(textNode);//<li>一燕</li>
			
			//添加到父标签中
			document.getElementById("myul").appendChild(_li);
		}
	</script>
</head>
<body>
	
	<ul id="myul">
		<li>jack</li>
		<li>rose</li>
	</ul>
	
	<input type="button" onclick="addElement()"  value="添加子标签" />
</body>

removeChild删除子标签

指定删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function demo(){
				//指定删除子标签
				var node = document.getElementById("x1");
				//删除子标签
				node.parentNode.removeChild(node);
			}
		</script>
	</head>
	<body>		
		<ul id="myul">
			<li>jack</li>
			<li id="x1">rose</li>
			<li>tom</li>
			<li>mary</li>
		</ul>		
		<input type="button" onclick="demo()" id="inputid" value="删除子标签" />
	</body>	
</html>

删除全部

	<script>
		function demo(){
			//获取id
			var myul = document.getElementById("myul");
			
			//根据父标签获取所有子标签
			var childs  = myul.childNodes;
			
			//删除全部，必从后往前遍历，否则无法删除全部
			for(var i = childs.length -1; i>= 0; i--){
				myul.removeChild(childs[i]);
			}
		}
	</script>
</head>
<body>	
	<ul id="myul">
		<li>jack</li>
		<li id="x1">rose</li>
		<li>tom</li>
		<li>mary</li>
	</ul>
	
	<input type="button" onclick="demo()" id="inputid" value="删除全部标签" />
</body>

依次删除

	<script>
		function demo(){
			var arr  = document.getElementsByTagName("li");
			var dom = arr[0];
			dom.parentNode.removeChild( dom );
		}
	</script>
</head>
<body>
	
	<ul id="myul">
		<li>jack</li>
		<li>rose</li>
		<li>tom</li>
		<li>mary</li>
	</ul>
	
	<input type="button" onclick="demo()"  value="依次删除子标签" />
</body>

setAttribute添加属性(*)

set:设置；attribute:属性；

<body>
	<input type="text" name="username"  autocomplete="off">
	<input type="text" name="username">
	<input type="text" name="username">
	<input type="text" name="username">
	<input type="text" name="username">
</body>
<script>
	window.onload = function(){
		//给所有input添加 autocomplete="off"
		var tagName = document.getElementsByTagName("input");
		for (var i = 0; i < tagName.length; i++) {
			tagName[i].setAttribute("autocomplete","off");
		}
	}
</script>

removeAttribute删除属性

<body>
	<input type="text" name="username"  autocomplete="off">
	<input type="text" name="username">
	<input type="text" name="username">
	<input type="text" name="username">
	<input type="text" name="username">
</body>
<script>
	window.onload = function(){
		//给所有input添加 autocomplete="off"
		var tagName = document.getElementsByTagName("input");
		//遍历
		for (var i = 0; i < tagName.length; i++) {
			//移除input框中所有name属性
			tagName[i].removeAttribute("name");
		}
	}
</script>

操作样式

通过js动态修改元素的样式。

语法

设置一个css样式
```
js对象.style.样式名='样式值'
```

批量设置css样式-了解不看

js对象.style.cssText='属性名：属性值;...'

通过class设置样式【重点】

js对象.className='样式名称1   样式名称2    ...'

代码演示

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <style>
            .mpp {
                background-color: orange;
            }
        </style>
    </head>
    <body>

        <p id="p1">1. 设置一个css样式</p>
        <p id="p2">2. 批量设置css样式</p>
        <p id="p3">3. 通过class设置样式</p>

        <script>
            let p1 = document.getElementById("p1");//获取段落标签
            let p2 = document.getElementById("p2");//获取段落标签
            let p3 = document.getElementById("p3");//获取段落标签

            // 1. 设置一个css样式
            // 设置字体大小
            p1.style.fontSize = "20px";
            // 设置背景颜色
            p1.style.backgroundColor = "green";
            // 设置字体颜色
            p1.style.color = "red";

            // 2. 批量设置css样式
            // 缺点：写起来太痛苦，而且还有耦合性
            p2.style.cssText = "border:2px solid red; font-size:40px";

            // 3. 通过class设置样式
            p3.className = "mpp pp";
        </script>
    </body>
</html>

三.表单验证

页面准备

		<form action="http://www.baidu.com" method="post" onsubmit="return demo();">
			<table>
				<tr>
					<td>用户名:<font color="red">*</font></td>
					<td>
						<input type="text" name="name" value="请输入用户名" id="user" 
								onblur="checkuser()" onfocus="clearUserNameValue()">
						<span id="userspan"></span>
					</td>					
				</tr>
				<tr>
					<td>密码:<font color="red">*</font></td>
					<td><input type="text" name="pwd" value="请输入密码"></td>
					<span id="pwdspan"></span>
				</tr>
				<tr>
					<td></td>
					<td><input type="submit"></td>
					
				</tr>
			</table>
		</form>

清空输入的用户名

	<script>
		/* 清除请输入用户名 */
		function clearUserNameValue(){
			var user_input = document.getElementById("user");
			if(user_input.value == "请输入用户名"){
				user_input.value ="";
			}
		}
	</script>

校验用户名

		/* 校验用户名 */
		function checkuser(){
			var username = document.getElementById("user").value;
			var regExp = new RegExp("^[a-zA-Z]{4,12}$");
			if(regExp.test(username)){
				document.getElementById("userspan").innerHTML="";
			}else{
				document.getElementById("userspan").innerHTML="用户名必须是字母，并且4-12位!";
			}
		}

校验提交

		/* 校验用户名 */
		function checkuser(){
			var username = document.getElementById("user").value;
			var regExp = new RegExp("^[a-zA-Z]{4,12}$");
			if(regExp.test(username)){
				document.getElementById("userspan").innerHTML="";
                 return true;
			}else{
				document.getElementById("userspan").innerHTML="用户名必须是字母，并且4-12位!";
                 return false;
			}
		}

		/* 校验不通过不提交 */
		function demo(){
			if( !checkuser()){
				return false;
			}
		}

		<form action="http://www.baidu.com" method="post" onsubmit="return demo();">