js及jQuery总结（五）

06.01_ js中的对象–object对象

object对象创建和使用

<script>
	//方式一：创建一个Object对象
	var person = new Object();
	//动态给对象添加属性
	person.name = "zhangsan";
	person.age = 10;
	person.sex = "g";
	//动态给对象添加方法
	person.show = function(){
		document.write("my name is " + person.name + ",今年" + person.age);
	}
	
	//调用函数
	person.show();
	
	document.write(person + "<br />")
	document.write("<hr />");
	//方式二：通过字面量的形式创建object对象
	var p = {
		name:"lisi",
		age:12,
		sex:"b",
		show:function(){
			//this其实就相当于是Python中的self，表示当前对象的引用
			document.write("my name is " + this.name + ",今年" + this.age);
		}
	}
	
	p.show();
	
	//删除属性或者方法【Python:del  js：delete】
	delete p.name;
	
	p.show();//undefined
	
	//注意：一般情况下，使用点语法访问属性或者调用方法，
	//在js中，可以通过[]的方式访问属性
	document.write(person.name);
	document.write(person["name"]);
</script>

06.02_ js中的对象–Date对象

创建Date对象

<script>
	//创建
	//1.直接new Date函数,传入参数
	var date1 = new Date("2017-03-26");
	document.write(date1);
	document.write("<hr />");
	
	//2.构造函数：不传参数
	var date2 = new Date();
	document.write(date2);
	document.write("<hr />");
	//注意：不适用new的时候，不管是否传参数，获取的都是当前的时间【字符串】
	
	//3.构造函数：需要传参数
	//参数：表示日期的字符串
	//格式:week,month,day,year,hours:minute:seconds
	//字符串的格式：通过/或者-都可以相连
	var date3 = new Date("2017/03/26");
	document.write(date3);
	document.write("<hr />");
	
	//4.构造函数：参数（年，月，日，时，分，秒，毫秒）
	//注意：月份是0~11，星期是0~6，0代表是星期天
	var date4 = new Date(2018,3,20,11,29,23);
	document.write(date4);
	document.write("<hr />");
	
	//5.构造函数：参数是毫秒
	var date5 = new Date(437467);
	document.write(date5);
</script>

Date对象常用函数

<script>
	//创建日期对象
	var date = new Date();
	
	//获取：getXXXX
	//获取年份
	document.write(date.getFullYear());
	document.write("<hr />");
	
	//获取月份
	document.write(date.getMonth());
	document.write("<hr />");
	
	//获取日期
	document.write(date.getDate());
	document.write("<hr />");
	
	//获取星期
	document.write(date.getDay());
	document.write("<hr />");
	
	//获取时分秒毫秒：getHours   getMinutes   getSeconds   getMilliseconds
	//获取从1970开始到现在的毫秒数【时间戳】
	document.write(date.getTime());
	document.write("<hr />");
	
	//修改值：setXXXX
	//设置年份
	date.setFullYear(2020);
	
	//设置月份
	//当参数大于11，则当前年份会增加
	date.setMonth(12);
	
	//设置日期
	//当参数大于18,29,30,31，则当前月份会增加
	date.setDate(31);
	
	//setHours()  setMinutes()   setSeconds()
	
	//转换成字符串
	document.write(date.toLocaleString());
	document.write("<hr />");
	document.write(date.toLocaleDateString());
	document.write("<hr />");
	document.write(date.toLocaleTimeString());
	document.write("<hr />");
	
	//parse()；解析日期字符串
	//将一个时间的字符串转换为时间戳
	document.write(Date.parse("2018-04-20"));
	document.write("<hr />");
	
	//Date对象间的运算
	var date1 = new Date("2018-10-10 10:10:10");
	var date2 = new Date("2017-10-10 10:10:10");
	
	//Date对象之间可以直接进行加减运算，得到的结果为毫秒
	document.write(date1 - date2);
</script>

06.03_BOM（Browser Object Model）–浏览器对象模型

浏览器对象模型，是一个用于访问浏览器和电脑屏幕的对象集合，通过全局对象window控制BOM
#####了解：window.document;window.frames;window.navigator;window.screen
//1.当前所载入的文档【页面】
document.write(window.document);
document.write("

");

	//2.当前页面中所有框架的集合
	document.write(window.frames);
	document.write("<hr />");
	
	//3.用于反应浏览器机器功能信息的对象
	document.write(window.navigator);
	document.write("<hr />");
	
	//4。浏览器以外的环境信息
	document.write(window.screen);
	document.write("<hr />");

掌握： window:location,window.history

06.04_BOM–location(浏览器页面)

location–定位到页面

//location--操作页面
document.write(window.location);
/*
 * href:控制浏览器地址栏的内容
 * reload():刷新网页。默认带有缓存
 * reload(true):刷新网页，不带缓存
 * assign():加载新的页面
 * replace():加载新的页面【和assign之间的区别：不会在浏览器的历史记录中留下记录】
 */
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<!--创建按钮-->
		<!--onclick属性表示当点击按钮的时候触发的事件，事件由函数充当-->
		<button onclick="href_href()">跳转到绿色页面</button>
		<button onclick="reload_href()">刷新当前页面</button>
		<button onclick="assign_href()">加载新的页面</button>
	</body>
	<script>
		// document.write(window.location);
		/*
		 * href:控制浏览器地址栏的内容
		 * reload():刷新网页。默认带有缓存
		 * reload(true):刷新网页，不带缓存
		 * assign():加载新的页面
		 * replace():加载新的页面
		 * 【和assign之间的区别：不会在浏览器的历史记录中留下记录】
		 */
		
		/*演示location的用法*/
		//跳转到绿色页面
		function href_href(){
			//替换浏览器地址栏中的内容
			window.location.href = "greenHtml.html";
		}
		//刷新当前网页
		function reload_href(){
			window.location.reload();
		}
		
		//加载新的页面
		//参数：新的页面的路径
		//和href属性实现的效果是一样的
		function assign_href(){
			//window.location.assign("greenHtml.html");
			window.location.replace("greenHtml.html");
		}
	</script>
</html>

06.05_BOM–history(浏览历史)

/*
 * href:控制浏览器地址栏的内容
 * reload():刷新网页。默认带有缓存
 * reload(true):刷新网页，不带缓存
 * assign():加载新的页面
 * replace():加载新的页面
 * 【和assign之间的区别：不会在浏览器的历史记录中留下记录】
 */
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<!--创建按钮-->
		<button onclick="back_page()">上一页</button>
		<button onclick="forward_page()">下一页</button>
		<button onclick="go_page()">go到黄色页面</button>
	</body>
	<script>
		/*
		 * length:获取历史记录的长度
		 * back():返回上一页
		 * forward:前进到下一页
		 * go(num):
		 * 当num<0时，表示跳转到自己后方的第num个记录，
		 * 当num>0时，表示跳转到自己前方的第num个记录

		/*演示history的用法*/
		// 返回上一页
		function back_page(){
			window.history.back();
		}
		
		// 前进到下一页
		function forward_page(){
			window.history.forward();
		}
		
		// 跳转到具体的某个页面
		function go_page(){
			window.history.go(2);
		}
	</script>
</html>

06.06_BOM–open()函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>open函数</title>
	</head>
	<body>
		<button onclick="openNewWindow()">打开新的窗口</button>
		<button onclick="closeWindow()">关闭窗口</button>
		
	</body>
	<script>
		function openNewWindow(){
			//参数：新打开的窗口需要加载的页面，打开方式，窗口的信息设置【宽高，边距】
			window.open("yellowHtml.html","blank",
				"width=300px,height=500px,left=0px,top=0px");
		}
		
		//关闭当前窗口中的当前页面
		function closeWindow(){
			window.close();
		}
		
	</script>
</html>

06.07_BOM–提示对话框

常用的提示对话框有alert，confirm(),prompt()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>提示框</title>
	</head>
	<body>
		<script>
			//作用：警告框
			//alert("hello");
			
			/*//2.提示框：确定和取消
			//确定：返回true，取消：false
			var result01 = confirm("你确定删除吗?");
			if(result01) {
				//做相应的事件处理
				document.write("点击了确定按钮");
			} else {
				document.write("点击了取消按钮");
			}*/
			
			//3.输入提示框
			//参数1：提示  参数2：默认值
			//返回值为用户输入的内容
			var result02 = prompt("请输入一个数字",0);
			document.write(result02);
				
		</script>
	</body>
</html>

06.08_BOM–定时器

setInterval

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定时器01</title>
	</head>
	<body>
		<button onclick="stopInterval()">停止定时器</button>
	</body>
	<script>
		//获取定时器
		//参数1：定时器触发的函数   参数2：时间间隔
		//单位为毫秒
		var timer = window.setInterval(fun,2000);
		
		var i = 0;
		function fun(){
			i++;
			console.log(i);
		}
		
		function stopInterval(){
			//停止定时器【彻底删除】
			//和正常意义上的暂停不同，如果停止定时器，则直接表示清除这个定时器
			//如果下次还需要使用的话，则需要重新获取
			window.clearInterval(timer);
		}
	</script>
</html>

延时计时器–setTimeout

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>延时性定时器</title>
	</head>
	<body>
	</body>
	<script>
		/*
		 * setTimeout(函数名，时间)
		 * 功能：设定的时间之后触发函数对应的功能
		 */
		
		document.write("hahaha");
		
		//单位为毫秒
		window.setTimeout(func,5000);
		
		function func(){
			document.write("heiheihei");
		}
	</script>
</html>

06.08_DOM–Document Object Model文档对象概述

DOM概述(文档对象模型)
- 可以使用js中dom里面提供的对象，使用这些对象的属性和方法，对html进行操作
- 要操作html文档，首先将html文档中的所有的内容封装成对象【标签，属性，文本等】，
- 节点树：在加载html页面时，web会自动生成一个树形结构，用来表示当前的页面结构，DOM将这种树形结构称为节点组成的节点树

06.09_DOM–常用方法和属性

元素节点对象的获取方式
- getElementById():
  - 获取特定ID元素的节点对象(返回一个对象)
- getElementsByName():
  - 获取相同name属性值的节点列表(返回一个数组)
- getElementsByTagName():
  - 获取指定标签名的节点列表(返回一个数组)
DOM节点操作
- DOM节点操作指的是: 创建节点、复制节点、插入节点、删除节点和替换节点等.
DOM操作所涉及的方法
- getElementById()
  - 返回带有指定 ID 的元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="id11" value="aaaa" />
		<br />
		<input type="text" id="id22" name="zhangsan" />
	</body>
		
	<script>
		
		//1.write；向页面中输出【写入】一个数据
		//注意：可以直接写入html标签
		document.write("hello");
		document.write("<hr />");
		
		//2.getElementById("id的值")
		var input1 = document.getElementById("id11");
		document.write(input1);//[object HTMLInputElement]
		document.write("<hr />");
		document.write(input1.value);//aaaa
		document.write("<hr />");
		
		//3.
		var input2 = document.getElementById("id22");
		document.write(input2.name);
		
		//4.设置value值
		input1.value = "hello";
		document.write(input1.value);
		
		
		//获取属性的值：对象.属性
		//设置属性的值：对象.属性 = 新的值
	</script>
</html>

getElementsByTagName()
- 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" name="name1" value="aaaa" />
		<input type="text" name="name1" value="bbbb" />
		<input type="text" name="name1" value="cccc" />
		<input type="text" name="name1" value="dddd" />
		<br />
	</body>
		
	<script>
		//通过标签名称获取相关的所有的标签，返回的值为html的集合【数组】
		//getElementsByTagName("标签的名称")
		var inputs = document.getElementsByTagName("input");
		document.write(input);//[object HTMLCollection]
		
		document.write("<br />");
		document.write(inputs.length);
		document.write("<br />");
		
		//遍历【可以当做数组遍历】
		for(var i = 0; i < inputs.length;i++) {
			//每个标签对象
			var input = inputs[i];
			//获取每个标签的value值
			document.write(input.value);
			document.write("<br />");
		}
		
	</script>
</html>

getElementsByName()
- 返回包含带有指定类名的所有元素的节点列表。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" name="name1" value="aaaa" />
		<input type="text" name="name1" value="bbbb" />
		<input type="text" name="name1" value="cccc" />
		<input type="text" name="name1" value="dddd" />
		<br />
	</body>
		
	<script>
		//返回的结果仍然为集合【数组】
		//getElementsByName(“name属性的值”)
		var inputs = document.getElementsByName("name1");
		document.write(inputs.length);
		
		//遍历
		for(var i = 0;i < inputs.length;i++) {
			//获取标签对象
			var input = inputs[i];
			//获取每个标签的值
			document.write(input.value);
		}
			
	</script>
</html>

createElement()
- 创建元素节点。
createTextNode()
- 创建文本节点。
appendChild()
- 把新的子节点添加到指定节点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>添加子节点</title>
	</head>
	<body>
		<!--列表标签-->
		<ul id="ulid">
			<li>aaa</li>
			<li>bbb</li>
			<li>ccc</li>
			<li>ddd</li>
		</ul>
		
		<input type="button" value="add" onclick="add1()" />
	</body>
	<script>
		//需求:点击按钮在ul的末尾添加一个子节点
		function add1(){
			//1.获取ul标签
			var ulElement = document.getElementById("ulid");
			
			//2.创建li标签
			//createElement("需要创建的标签的名称")
			var liElement = document.createElement("li");
			//3.创建文本对象
			//createTextNode("文本内容")
			var textObj = document.createTextNode("eee");
			
			//4.将文本对象添加到li标签下面【将文本节点添加到li节点下面】
			//将子节点添加到指定节点
			//调用方式：指定节点对象.appendChild(需要添加的子节点)
			liElement.appendChild(textObj);
			
			//5.将li节点添加到ul节点下面
			ulElement.appendChild(liElement);	
		}
	</script>
</html>

removeChild()
- 删除子节点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul id="ulid">
			<li id="li1">aaa</li>
			<li id="li2">bbb</li>
			<li id="li3">ccc</li>
			<li id="li4">ddd</li></ul>
		<input type="button" value="remove" onclick="remove()" />
	</body>
	<script>
		//调用方式：父节点对象.removeChild(需要被删除的子节点对象):删除子节点
		function remove(){
			//1.获取需要被删除的子节点对象
			var li3 = document.getElementById("li3");
			
			//2.获取被删除节点对应的父节点对象
			//li3.parentNode
			var ul = document.getElementById("ulid");
			
			//3.通过父节点删除子节点
			//注意：其中的文本节点和属性对象都会被删除掉
			ul.removeChild(li3);
		}
	</script>
</html>

replaceChild()
- 替换子节点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul id="ulid">
			<li id="id1">紫衫龙王</li>
			<li id="id2">白眉鹰王</li>
			<li id="id3">金毛狮王</li>
			<li id="id4">青翼蝠王</li>
		</ul>
		
		<input type="button" value="replace" onclick="replace()" />
	</body>
		
	
	<script>
		// 需求：将其中的青翼蝠王替换为张无忌
		// 思考问题：替换的是整个节点还是只是文本？？？
		// 调用方式：父节点对象.replaceChild(newNode,oldNode):替换的是整个节点【类似于appendChild，insertBefore】
		
		function replace(){
			//1.获取旧的节点
			var li4 = document.getElementById("id4");
			
			
			//2.创建li标签
			var li5 = document.createElement("li");
			//3.创建文本对象
			var text5 = document.createTextNode("张无忌");
			//4.将文本对象添加到li下面
			li5.appendChild(text5);
			
			
			//5.获取父节点
			var ul = document.getElementById("ulid");
			//6.替换
			ul.replaceChild(li5,li4);	
		}
		
	</script>
</html>

insertBefore()
- 在指定的子节点前面插入新的子节点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul id="ulid">
			<li id="li1">杨玉环</li>
			<li id="li2">貂蝉</li>
			<li id="li3">西施</li>
			<li id="li4">王昭君</li>
		</ul>
		<input type="button" value="insert" onclick="insert()" />
	</body>
	<script>
		//insertBefore(newNode,oldNode)：插入，在某个节点之前插入一个新的节点
		function insert(){
			//如果标签存在，直接添加，如果不存在，创建
			
			//1.获取父标签（ul）
			var ulElement = document.getElementById("ulid");
			
			
			//2.创建li标签
			var liElement5 = document.createElement("li");
			//3.创建文本对象
			var text5 = document.createTextNode("高圆圆");
			//4.将文本对象添加到li对象下
			liElement5.appendChild(text5);
			
			
			//5.获取li3标签
			var liElement3 = document.getElementById("li3");
			//6.插入：注意的问题：通过父标签
			ulElement.insertBefore(liElement5,liElement3);
		}
	</script>
</html>

createAttribute()
- 创建属性节点。
getAttribute()
- 返回指定的属性值。
setAttribute()
- 把指定属性设置或修改为指定的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" name="name1" id="id1" value="aaa" placeholder="hello"/>
	</body>
	<script>
		//1.将input标签获取出来
		var input  = document.getElementById("id1");
		
		//2.获取属性值：
		//方式一：value属性【常用】
		document.write(input.value);
		document.write("<br />");
		document.write(input.name);
		document.write("<hr />");
		
		//方式二：getAttribute()【作用范围更广】
		document.write(input.getAttribute("value"));
		document.write("<br />");
		document.write(input.getAttribute("name"));
		document.write("<br />");
		document.write(input.getAttribute("id"));
		document.write("<br />");
		document.write(input.getAttribute("placeholder"));
		document.write("<br />");
		
		//3.设置属性的值
		//方式一：直接赋值
		//input.value = "hello";
		//方式二：setAttribute("属性名称",“属性的值”)
		document.write("<hr />");
		input.setAttribute("placeholder","world");
		document.write("<br />");
		document.write(input.getAttribute("placeholder"));
		document.write("<br />");
		//4.删除属性对应的值
		//removeAttribute("需要被删除的属性的名称")
		input.removeAttribute("name");
		document.write(input.getAttribute("name"));//null
		
	</script>
</html>

如有错误，请在下面评论。好及时更正，谢谢！

js及jQuery总结（五）

06.01_ js中的对象–object对象

object对象创建和使用

06.02_ js中的对象–Date对象

创建Date对象

Date对象常用函数

06.03_BOM（Browser Object Model）–浏览器对象模型

06.04_BOM–location(浏览器页面)

location–定位到页面

06.05_BOM–history(浏览历史)

06.06_BOM–open()函数

06.07_BOM–提示对话框

常用的提示对话框有alert，confirm(),prompt()

06.08_BOM–定时器

setInterval

延时计时器–setTimeout

06.08_DOM–Document Object Model文档对象概述

06.09_DOM–常用方法和属性

猜你喜欢