JS对象、事件 、BOM事件

一、JS

1.函数function

1.1 arguments对象和函数的方法及属性

arguments对象中存放了调用该函数时传递的实际参数

//arguments对象中存放了调用该函数时传递的实际参数
			function fun(){
				console.log(arguments.length);
				for(var i in arguments){
					console.log(arguments[i]);
				}
			}
			fun(1,2,3);

1.2函数的作用域

//函数作用域 js中函数可以随意嵌套
			function f1(){
				console.log("我是函数f1");
				function f2(){
					console.log("我是函数f2");
					return "哈哈哈";
				}
				return f2;
			}
			console.log(f1());//打印我是函数f1、f2函数
			//console.log(f1()());//打印我是函数f1和f2函数、undefined
			console.log(f1()());

1.3闭包

需求：在外部想要使用函数内容的资源|数据，可以选择使用闭包
			闭包：
				外函数嵌套函数
				外函数返回内函数
				内函数中使用外函数的资源
<script type="text/javascript">
		 	 function f1(){
				 var i=1;
				 return function(){
					 i++;
					 console.log(i);
				 }
			 }
			 console.log(f1());//返回内函数
			 var f=f1();
			 f();
			 f();
			 f();
			 
			 //给花浇水例子
			 function water(ml){
				 function flower(name){
					 if(ml>=50){
						 console.log("给"+name+"浇水"+"当前还剩"+(ml-=50));
					 }else{
						 console.log("请加水");
					 }
				 }
				 return flower;
			 }
			 console.log(water(200));
			 var f=water(200);
			 f("百合");
			 f("满天星");
			 f("玫瑰");
			 f("喇叭花");
		 </script>

1.4递归

函数自己调用自身。函数头:尽头 函数体:重复执行

a. 自己调用自己

b. 函数体根据判断结束递归调用

function print(num) {
		if(num == 10) { //递归头
			return;
		}
		//递归体
		console.log(num);
		print(num + 1);
	}
	print(1);

2.内置函数

String
				charAt(idx)：返回指定位置处的字符
				indexOf(Chr)：返回指定子字符串的位置，从左到右。找不到返回-1
				substr(m,n)：返回给定字符串中从 m 位置开始，取 n 个字符，如果参数 n 省略，则意味着取到字符串末尾。
				substring(m,n)：返回给定字符串中从 m 位置开始，到 n 位置结束，如果参数 n省略，则意味着取到字符串末尾。
				toLowerCase()：将字符串中的字符全部转化成小写。
				toUpperCase()：将字符串中的字符全部转化成大写。
				replace(s1, s2)：替换，将s1替换为s2。
				length: 属性，不是方法，返回字符串的长度。
			

		Math
			Math.random()：生成随机数
			Math.ceil()：向上取整 
			Math.floor()：向下取整
			Math.round()：四舍五入取整

		Date
			 // 获取日期时间
			 getFullYear()年, getMonth()月, getDate()日, getDay()周,
			 getHours()时,getMinutes()分,getSeconds()秒
			 // 设置日期时间
			 setYear(), setMonth(), …
			 toLoacaleString()
			 
			 注意:月份从0开始
		    a. getMonth()：得到的值：0~11（1月~12月）
			b. setMonth()：设置值时0~11
			c. toLocaleString()：可根据本地时间把 Date 对象转换为字符串，并返回结果。
			
			
<script type="text/javascript">
		 	/*String*/
			var str="my name is hsq";
			//charAt(idx)：返回指定位置处的字符 索引从0开始
			str.charAt(1);
			console.log(str.charAt(1));//y
			//indexOf(Chr)：返回指定子字符串的位置，从左到右。找不到返回-1
			console.log(str.indexOf('my'));//0
			//substr(m,n)：返回给定字符串中从 m 位置开始，
			//取 n 个字符，如果参数 n 省略，则意味着取到字符串末尾。
			console.log(str.substr(3,7));//name is
			//substring(m,n)：返回给定字符串中从 m 位置开始，
			//到 n 位置结束，如果参数 n省略，则意味着取到字符串末尾。
			console.log(str.substring(3,7));//name
			//toUpperCase()：将字符串中的字符全部转化成大写。
			console.log(str.toUpperCase());
			//toLowerCase()：将字符串中的字符全部转化成小写。
			console.log(str.toLocaleLowerCase());
			//replace(s1, s2)：替换，将s1替换为s2。
			console.log(str.replace(" ",""));
			//length: 属性，不是方法，返回字符串的长度。
			console.log(str.length);//14
			
			/*Math*/
			var a=Math.random()*100;
			console.log(a);//77.52
			//Math.ceil()：向上取整 
			console.log(Math.ceil(a));//78
			//Math.floor()：向下取整
			console.log(Math.floor(a));//77
			//Math.round()：四舍五入取整
			console.log(Math.round(a));//78
			
			/*Date*/
			// 获取日期时间
			//getFullYear()年, getMonth()月, getDate()日, getDay()周,
			//getHours()时,getMinutes()分,getSeconds()秒
			var date=new Date();
			console.log(date);
			//toLoacaleString()当地时间
			console.log(date.toLocaleDateString());
			//getFullYear()年
			console.log(date.getFullYear());
			//getMonth()月
			console.log(date.getMonth()+1);
			//getDate()日, getDay()周,
			console.log(date.getDate(),date.getDay());
			//getHours()时,getMinutes()分,getSeconds()秒
			console.log(date.getHours(),date.getMinutes(),date.getSeconds());
			// 设置日期时间
			//setYear(), setMonth(), …
			date.setFullYear(2021);
			date.setMonth(4);
			console.log(date.toLocaleDateString());
		 </script>

二、js对象

1.对象的创建

js中的对象
				{}代表对象
				键值对形式的内容
				键值对之间使用,进行分隔
				key:value
				key和value内部都是字符串
				如果key符合标识符的命名规范.''可以省略
				value可以为任意类型的数据
			 
			 创建对象:
				1.字面量的创建方式 {}
				2.new Object()
				
				
			使用对象中的内容:
				对象.属性
				对象['属性名']--万能的
				
	//创建对象
			var obj={
				name:"xxh",
				age:18,
				gender:1,//0代表为女，1代表男
				ball:[
					{
						name:"篮球",
						weight:20
					},{
						name:'羽毛球',
						weight:5
					}
				],
				fn:function(){
					console.log("很爱运动")
				},
				o:null,
				"hhh":undefined
			};
			console.log(obj);
			//name
			console.log(obj.name);
			console.log(obj['age']);
			console.log(obj["hhh"]);
			
			//创建对象
			var obj2=new Object();
			console.log(obj2);
			obj2.name="sss";
			obj2["hello world"]=null;
			console.log(obj2);
			
			//创建对象
			var obj3=Object.create(null);
			console.log(obj3);

2.对象序列化和反序列化

		var arr=obj.ball;
		console.log(arr[0].name);
		
		//序列化 js对象转化JSON格式字符串
		var str=JSON.stringify(arr[0]);
		console.log(str);
		//反序列化  JSON格式字符串转换js对象
		var ob=JSON.parse('{"name":"篮球","weight":20}');
		console.log(ob);
	

3.eval()

可借助eval()动态函数，将参数字符串解析成js代码来执行，只接受原始字符串作为参数

//eval() 可以把参数字符串中的内容当做js语句执行
		eval("var s="+str);
		console.log(s);

4.this

​

		<!-- 
			this 关键字
				this 动态绑定对象
				1.this所在的函数是否通过new调用使用，如果是指向当前new的对象
				2.this是通过对象.函数名使用，this指代当前调用对象
				3.this默认指代window，window指全局对象
			定义全局变量，默认定义window对象属性
			定义全局函数，为window的功能
			
	 -->
	 <script type="text/javascript">
	 	//全局变量
		var a=10;
		console.log(a);
		console.log(this.a);
		console.log(window.a);
		
		//1.this所在的函数是否通过new调用使用，如果是指向当前new的对象
		function Student(name,age){
			this.name=name;
			this.age=age;
		}
		var s=new Student("hhh",18);
		var s2=new Student("sss",18);
		console.log(s);
		console.log(s2);
		
		//2.this是通过对象.函数名使用，this指代当前调用对象
		var obj={
			a:12,
			fn:function(b,c){
				console.log(this.a,b,c);
			}
		}
		obj.fn();//12,undefined,undefined
		
		//3.this默认指代window，window指全局对象
		var f=obj.fn;
		f();//10,undefine,undefine
		window.f();
		this.f();
	var obj2={
				a:24
			};
			//修改this指向：间接调用，是所有的函数都call和apply方法
			//call(新的对象，实参列表)
			//apply(新的对象，参数)
			obj.fn.call(obj2,1,2);24,1,2
			obj.fn.apply(obj2,[7,8]);24,7,8
			//()->才是调用
			console.log(obj.fn);//得到fn函数

三、js事件

1.理解

事件: 通过某些行为触发js代码的执行,这个行为成为事件

2.常用事件

onload：当页面或图像加载完后立即触发
​ onclick：鼠标点击某个对象
​ dbclick：鼠标双击某个对象
​ onblur：元素失去焦点
​ onfocus：元素获得焦点
​ onchange：用户改变域的内容
​ onmouseover：鼠标移动到某个元素上
​ onmouseout：鼠标从某个元素上离开
​ onkeyup：某个键盘的键被松开
​ onkeydown：某个键盘的键被按下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width:100px;
				height: 100px;
			}
			#click{
				background: red;
			}
			#dbclick{
				background: blue;
			}
			#mouserover{
				background: green;
			}
			#mouserout{
				background: yellow;
			}
			#span{
				font-size: 10px;
				color:red;
			}
		</style>
	</head>
	<body>
		<div id="click">点击事件</div>
		<div id="dbclick">双击事件</div>
		<div id="mouserover">移入事件</div>
		<div id="mouserout">移出事件</div>
		<input type="text" id="username" placeholder="请输入用户名"><span id="span"></span>
		<!-- 
			事件：通过某些行为触发js代码的执行，这个行为成为事件
			
		 -->
		 <script type="text/javascript">
		 	//单击事件
			var div1=document.getElementById("click");
			var div2=document.getElementById("dbclick");
			var div3=document.getElementById("mouserover");
			var div4=document.getElementById("mouserout");
			//绑定事件
			div1.onclick=function(){
				console.log("点我");
			}
			div2.ondblclick=function(){
				console.log("双击");
			}
			div3.onmouseover=function(){
				console.log("移入");
			}
			div4.onmouseout=function(){
				console.log("移出");
			}
			//失焦事件
			var username=document.getElementById("username");
			var span=document.getElementById("span");
			username.onblur=function(){
				console.log(username.value);
				if(username.value=='hhh'){
					span.innerHTML="用户已经使用了，请更换";
				}
			}
		 </script>
	</body>
</html>

3.失焦和聚焦案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 清除浏览器的默认样式 */
			*{
				padding: 0;
				margin: 0;
			}
			label{
				display: inline-block;
				height: 42px;
				line-height: 42px;
				font-size: 14px;
				color: #666;
				width: 65px;
				text-align: right;
				font-weight: bold;
				margin-right: 10px;
			}
			input{
				height: 16px;
				width: 328px;
				padding: 10px;
				display: inline-block;
				font-size: 14px;
				color: #666;
				margin:10px;
			}
			p{
				margin-top: 20px;
			}
			span{
				font-size: 12px;
				color: #333;
			}
		</style>
	</head>
	<body>
		<p>
			<label for="username">用户名</label> <input type="text" name="username" id="username" placeholder="请输入用户名" onblur="func_blur()"><span id="info"></span>
		</p>
		<script>
				var username=document.getElementById("username");
				var span = document.getElementById("info");
				//为input元素绑定获取焦点事件
				username.onfocus=function(){
					console.log("聚焦啦1!!!");
					span.innerHTML="设置后不可更改中英文即可";
					span.style.width='300px';
					span.style.border='none';
						span.style.textAlign='left';
						span.style.color='#333';
				}
				
				function func_blur(){
					if(username.value == 'yinwei'){
						span.innerHTML="× 此用户名太受欢迎,请更换";
						span.style.color='red';
					}else if(username.value == ''){
						span.style.display='none';
					}else{
						span.innerHTML="√";
						span.style.display='inline-block';
						span.style.width='20px';
						span.style.height='20px';
						span.style.textAlign='center';
						span.style.lineHeight='20px';
						span.style.color='green';
						span.style.border='1px solid green';
						span.style.borderRadius="100%";
					}
				}
		</script>

	</body>
</html>

4.事件流

<!-- 
			事件流：
				事件冒泡：
					如果点击了页面中的<div>元素，那么这个click事件会按照如下顺序传播：
					1、<div>
					2、<body>
					3、<html>
					4、document

				事件捕获：
					那么单击<div>元素就会按下列顺序触发click事件：
					1、document
					2、<html>
					3、<body>
					4、<div>
		-->
		<!-- 事件冒泡 -->
		<div onclick="alert('so cool');">click me</div>
		<!-- 事件捕获 -->
		<div onclick="alert('so cool');" id="hhh">单击事件</div>
		<!-- 点击事件在全部方块中，先后顺序 由内到外 -->
		<div id="box">
			哈哈哈哈哈
			<p id="item">呵呵呵</p>
		</div>
		<script type="text/javascript">
			var id=document.getElementById("hhh");
			id.onclick=function(){
				alert("点击");
				id.innerHTML="点击";
			}
			var box=document.getElementById("box");
			var item=document.getElementById("item");
			box.onclick=function(){
				console.log("我是box");
			}
			item.onclick=function(){
				console.log("我是item");
			}
			</script>

5.事件处理程序

HTML事件处理程序

某个元素支持的每种事件，都可以用一个与相应事件处理程序同名的

HTML特性来指定。

<input type="button" value="Press
me" οnclick="alert('thanks');" />

DOM0级事件处理程序

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。而且，只能为同一个元素的同一个事件设定一个处理程序（覆盖），也可以通过删除DOM0级方法指定的事件处理程序，只要将属性值设为null

<button id="myBtn">按钮</button>

	<script type="text/javascript">
		var btn = document.getElementById('myBtn');
		btn.onclick = function () {
			alert('you click a button');
		}
	</script>

DOM2级事件处理程序

可以为同一个元素的同一个事件添加多个处理函数。还可删除事件处理函数，注意，在删除的时候，不能删除匿名处理函数。

<button id="myBtn2">按钮</button>

<script type="text/javascript">
var btn2 = document.getElementById('myBtn2');
			
	// 第一种添加的方式
	btn2.addEventListener('click', function(){
		alert('you add a eventListener by DOM2');
	}, false);
			
	btn2.addEventListener('click', function(){
		alert('you add a eventListener by DOM2 again');
	}, false);
			
	// 第二种添加的方式
	function thread () {
		alert('you add a eventListener by DOM2 第三次');
	}
			
	btn2.addEventListener('click', thread, false);
			
	// 移除事件
	btn2.removeEventListener('click', thread, false);
</script>

四、JS-BOM事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-goyHv4wt-1581509798331)(C:\Users\Hello Word\AppData\Roaming\Typora\typora-user-images\1581507945182.png)]

1.window对象

1.1打开和关闭窗口

<button type="button" onclick="funciton_open()">打开</button>
		<button type="button" onclick="funciton_close()">关闭</button>
		<script>
			/* 
				window对象是BOM提供的核心全局对象
					定义的全局变量和函数相当与window对象的属性和方法,window可以省略
					
				open() 打开某个连接
				close() 关闭
			 
			 */
			var num;
			function funciton_open(){
				//window.open("http://www.shsxt.com");  //默认新页面打开
				//window.open("http://www.shsxt.com","_self");
				num=window.open("http://www.shsxt.com","_blank","width=200px,height=200px");
			}
			
			function funciton_close(){
				num.close();
			}

1.2系统对话框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//普通弹出框 alter
			alert("哈哈哈哈哈");
			window.alert("看来是大家看风景");
			//confirm 确认框
			var flag=window.confirm("喜欢动物来看一下。。。");
			console.log(flag);
			//输入框prompt
			var str=window.prompt("不应当！！！！");
			console.log(str);
		</script>
	</body>
</html>

1.3定时器

	<div id="box1">开始</div>
	<div id="box2">开始</div>
	<script>
		/* 
		 js定时器
			重复执行定时器 setInterval: 每隔多长时间执行一次
			延迟执行定时器 setTimeout: 只执行一次
			
			两个参数:
				函数体 : yaozhi要执行的代码
				毫秒数 : 间隔的时间|延迟的时间
					1s=1000ms
		 
			结束定时器
		 */
		//5s种后显示当前时间
		var box1=document.getElementById("box1");
		var box2=document.getElementById("box2");
		var i=1;
		window.setTimeout(function(){
			box1.innerHTML=new Date().toLocaleString();
		},5000);
		var num;
		box2.onclick=function(){
			console.log(123);
			num=setInterval(fn,1000);
		}
		
		function fn(){
			console.log(456);
			box2.innerHTML=i;
			if(i==10){
				//return;
				window.clearInterval(num);
			}
			i++;
		}
	</script>

1.4定时器心跳案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				line-height: 500px;
				text-align: center;
			}
			.heart0{
				color:yellowgreen;
				font-size:20px;
			}
			.heart1{
				color:skyblue;
				font-size: 60px;
			}
			.heart2{
				color:palevioletred;
				font-size:90px;
			}
			.heart3{
				color: red;
				font-size: 120px;
			}
			.heart4{
				color: brown;
				font-size: 180px;
			}
		</style>
	</head>
	<body>
		<div class="heart0" id="box">❤</div>
		<script type="text/javascript">
			//心跳案例
			//五秒发生颜色变化，大小变化
			var box=document.getElementById("box");
			var i=1;
			window.setInterval(function fn(){
				box.className="heart"+i;
				if(i==4){
					i=0;
				}else{
					i++;
				}
			},500);
		</script>
	</body>
</html>

2.history对象

<!-- 
			history对象
		 -->
<p>我是A页面</p>
		<a href="B.html">B页面</a>
		<button type="button" onclick="history.forward()">去下页</button>
				
<p>我是B页面</p>
		<a href="C.html">C页</a>
		<button type="button" onclick="history.back()">去上一页</button>
		<button type="button" onclick="history.forward()">去下一页</button>
		
<p>我是C页面</p>
		<button type="button" onclick="history.back()">去上一页</button>
		<button type="button" onclick="history.go(-2)">去上上一页</button>

3.location对象

location 对象的属性href：设置或返回完整的 URL
location 对象的方法
	reload()：重新加载当前文档。
	replace()：用新的文档替换当前文档。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="刷新" onclick="window.location.reload();" />
		
		<input type="button" name="" id="" value="shsxt官网" onclick="open_sxt();" />
		
		<script>
			function open_sxt(){
				alert(window.location.href); /* 当前页面的url*/  
				//window.location.href="http://www.taobao.com";  //存在后退
				location.replace("http://www.tianmao.com");  //不存在后退
			}
		</script>

	</body>
</html>