2.4 javascript2

2.4 javascript

js简图2
在这里插入图片描述

1.window对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			/* 
			window对象  当前页面 
			通常可以省略
			 */
			//js解析引擎  单线程		//console.log(window.document.getElementById("test").value);	
			//window.prompt("请输入");
			//alert("警告框");
			//confirm("确定离开me 还有xxx就可以领取大奖了")				
		</script>
	</head>
	<body>
		<input id="test" type="text" value="abc123" />
	</body>
</html>

2.history对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/* 
			 history 对象 表示历史记录文档
			 可以在历史记录中前进后退
			 */
			function myBack(){
				history.back();
			}
			function myNext(){
				history.forward()();
			}
			function myGo(){
				history.go(0);
			}
		</script>
	</head>
	<body>
		<input type="button" value="后退" onclick="myBack()" />
		<input type="button" value="前进" onclick="myNext()" />
		<input type="button" value="go" onclick="myGo()" />
	</body>
</html>

3.location

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/* 
			 location地址栏
			 .href      控制浏览器地址栏跳转
			 .reload()  刷新
			 
			 */
			function myRefesh(){
				location.reload();
			}
			
			function myHref(){
				location.href = "https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E6%8B%9C%E7%99%BB%E8%BF%87%E6%B8%A1%E8%BF%9B%E7%A8%8B%E6%AD%A3%E5%BC%8F%E5%BC%80%E5%A7%8B+%E7%89%B9%E6%9C%97%E6%99%AE%E5%9B%9E%E5%BA%94&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1";
				/*
				路径方式
				1.相对路径     两个文件 之间相对的路径   ./ 当前目录  ../退回到上级  /xxx 进入xxx目录    内部资源
				2.项目根路径   /
				3.绝对路径     协议://地址:端口/资源地址?参数    外部资源
				*/
				/*
				跳转方式
				默认使用get方式提交
				a标签
				浏览器地址栏直接输入
				表单提交       get
				location.href
				使用post方式提交
				表单提交       post
				*/
			}		
		</script>
	</head>
	<body>
		<input type="button" value="睡王最新消息"  />
		<div onclick="myHref()">test</div>
		<input type="button" value="刷新" onclick="myRefesh()"  />
	</body>
</html>

4.document

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//document.title="test";
			/* 
			document.getElementById("mybtn")          通过id获取元素     单个
			document.getElementsByTagName("input")    通过标签名获取元素  数组 
			document.getElementsByName("hobby")       通过name获取元素   数组
			document.getElementsByClassName("cls")    通过class获取元素  数组
			选取元素时 可以通过元素的属性二次筛选 加判断条件
			选取元素时 可以通过元素层级结构缩小查找范围
			//在myspan内部查找元素
			document.getElementById("myspan").getElementsByTagName("input")
			 */
		</script>
	</head>
	<body>
		<input type="text" value="btn2" />
		<input class="cls1 cls2 cls3" id="mybtn" type="button" value="btn1" />
		<input class="cls1" id="mybtn"  type="button" value="btn2" />
		<hr />
		<input type="button" value="全选" onclick="checkAll()" />
		兴趣爱好:<input name="hobby" type="checkbox" value="1" />爬山
		        <input name="hobby" type="checkbox" value="2" />照相
		        <input name="hobby" type="checkbox" value="3" />蹦极
		
		<span id="myspan">
			<input type="text" value="btn2" />
			<input type="password" value="btn2" />
			<input type="text" value="btn2" />
		</span>	
	</body>
	<script>
		//console.log(document.getElementById("mybtn"));
		/* js中集合 数组 */
		console.log(document.getElementsByTagName("input")[1].value);
		
		/* var eles = document.getElementsByTagName("input");
		for(var i = 0;i<eles.length;i++){
			eles[i].style.color = "red";
		} */

		function checkAll(){
			console.log(document.getElementsByName("hobby"));
			var eles = document.getElementsByName("hobby");
			
			for(var i = 0;i<eles.length;i++){
				eles[i].checked = true;
			}
		}
//console.log(document.getElementsByClassName("cls1")[0].className);
		
		console.log(document.getElementsByTagName("input"))
		var eles = document.getElementsByTagName("input");
		for(var i = 0;i<eles.length;i++){
			 
			if(eles[i].type == "text"){
				eles[i].value = "小明";
			}
		} 
	console.log(document.getElementById("myspan").getElementsByTagName("input"));	
	</script>
</html>

open/close窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/* 
			 open()   打开新广告
			 close()  关闭广告
			 */
			var mywin;
			function myOpenWin(){
				mywin = window.open("1window对象.html","","");
			}
			function myCloseWin(){
				mywin.close();
			}	
		</script>
	</head>
	<body>
		<input type="button" value="打开窗口" onclick="myOpenWin()" />
		<input type="button" value="关闭窗口" onclick="myCloseWin()" />
	</body>
</html>

6.定时函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function myfun(){
				console.log("hello world!!!");
			}
			//setInterval("myfun()",1000);//反复执行
			//clearInterval(taskid)      清除interval
			//setTimeout("myfun()",1000);//只执行一次
			//clearTimeout(taskid)       清除setTimeout
			//轮播图  倒计时   元素定时移动
			/* var taskid = setInterval(function(){
				console.log("hello2 world!!!");
			},1000); */
			var taskid = setTimeout("myfun()",2000);
			function myStop(){
				clearTimeout(taskid);
			}
		</script>
	</head>
	<body>
		<input type="button" value="停止" onclick="myStop()" />
	</body>
</html>

7.dom操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function addEle(){
				/* 
				 1.创建元素
				 2.设置元素
				 3.控制元素加载在dom树的位置
				 
				 根据层次结构查找元素节点 
				 parentNode:返回节点的父节点
				 childNodes:返回子节点集合,childNodes[i]
				 firstElementChild:返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
				 lastElementChild: 返回节点的最后一个子节点
				 nextElementSibling:下一个节点
				 previousElementSibling:上一个节点
				 */
				var newli = document.createElement("li");
				var newinput = document.createElement("input");
				//newinput.setAttribute("type","password");
				newinput.type="checkbox";
				newli.appendChild(newinput);
				//newli.innerHTML="新文本";
				//newli.innerHTML ="<u>新文本</u>";
				document.getElementById("myul").appendChild(newli);
			}
			function addEle2(){
				var newli = document.createElement("li");
				var newinput = document.createElement("input");
				newinput.type="checkbox";
				newli.appendChild(newinput);
				document.getElementById("myul").insertBefore(newli,document.getElementById("myli"));
			}
			function addEle3(){
			    //cloneNode bol决定子节点是否复制
				var newli = document.getElementById("myli").cloneNode(true);
				document.getElementById("myul").appendChild(newli);
				}
			function searchEle(){
				//console.log(document.getElementById("myli").parentNode);
				//console.log(document.getElementById("myul").childNodes);
				//console.log(document.getElementById("myul").previousElementSibling);
				console.log(document.getElementById("myul").lastElementChild);
			}
			function delEle(){
				document.getElementById("myul").removeChild(document.getElementById("myul").lastElementChild);
			}
		</script>
	</head>
	<body>
		<input type="button" value="增加节点" onclick="addEle()" />
		<input type="button" value="查看节点" onclick="searchEle()" />
		<input type="button" value="增加节点2" onclick="addEle2()" />
		<input type="button" value="复制节点" onclick="addEle3()" />
		<input type="button" value="删除节点" onclick="delEle()" />
		<ul id="myul">
			<li id="myli" class="xxx"><input type="password"/></li>
		</ul>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function addEle(){
				document.getElementById("myul").innerHTML+='<li class="mycls123"><input type="checkbox"/></li>';
			}
			function delEle(){
				document.getElementById("myul").removeChild(document.getElementById("myul").lastElementChild);
			}
		</script>
	</head>
	<body>
		<input type="button" value="增加节点" onclick="addEle()" />
		<input type="button" value="删除节点" onclick="delEle()" />
		<ul id="myul">
			<li id="myli" class="xxx"><input type="password"/></li>
		</ul>
	</body>
</html>

8.table操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function getRowVal(){
				console.log(document.getElementById("mytable").rows[3].cells[0].innerHTML);
				
			}
			function createRow(){
				var newrow = document.getElementById("mytable").insertRow(document.getElementById("mytable").rows.length);
				
				var td1 = newrow.insertCell(0);
				var td2 = newrow.insertCell(1);
				var td3 = newrow.insertCell(2);
				var td4 = newrow.insertCell(3);
				
				td1.innerHTML="小明";
				td2.innerHTML="小明";
				td3.innerHTML="小明";
				td4.innerHTML="小明";
			}
			function delRow(){
				document.getElementById("mytable").deleteRow(document.getElementById("mytable").rows.length-1);
			}
		</script>
	</head>
	<body>
		<input type="button" value="获取内容" onclick="getRowVal()" />

		<input type="button" value="添加一行" onclick="createRow()" />
		
		<input type="button" value="删除一行" onclick="delRow()" />
		<table id="mytable" border="1" >
			<caption>学员信息表</caption>
			<thead>
				<tr><th>姓名</th><th>年龄</th><th>班级</th><th>性别</th></tr>
			</thead>
			<tbody>
				<tr><td>尼古拉斯·赵四</td><td>57</td><td>704B</td><td></td></tr>
				<tr><td>宇智波·刘能</td><td>55</td><td>704B</td><td></td></tr>
				<tr><td>金星</td><td>34</td><td>704B</td><td>?</td></tr>
			</tbody>	
		</table>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function getRowVal(){
				console.log(document.getElementById("mytable").rows[3].cells[0].innerHTML);
			}
			function createRow(){
				var sname =  document.getElementById("sname").value;
				
				var sage =  document.getElementById("sage").value;
				var sroom =  document.getElementById("sroom").value;
				var sgender =  document.getElementById("sgender").value;
				
				var mycontent = '<tr><td>'+sname+'</td><td>'+sage+'</td><td>'+sroom+'</td><td>'+sgender+'</td></tr>'
				document.getElementById("maindata").innerHTML+=mycontent;
				
			}
			function delRow(){
				document.getElementById("mytable").deleteRow(document.getElementById("mytable").rows.length-1);
			}
		</script>
	</head>
	<body>
		<input type="button" value="获取内容" onclick="getRowVal()" />
		<input type="button" value="删除一行" onclick="delRow()" />
		<hr />
		<input type="button" value="添加一行" onclick="createRow()" />
		<input id="sname" type="text" />
		<input id="sage" type="text" />
		<input id="sroom" type="text" />
		<input id="sgender" type="text" />
		<table id="mytable" border="1" >
			<caption>学员信息表</caption>
			<thead>
				<tr><th>姓名</th><th>年龄</th><th>班级</th><th>性别</th></tr>
			</thead>
			<tbody id="maindata">
				<tr><td>尼古拉斯·赵四</td><td>57</td><td>704B</td><td></td></tr>
				<tr><td>宇智波·刘能</td><td>55</td><td>704B</td><td></td></tr>
				<tr><td>金星</td><td>34</td><td>704B</td><td>?</td></tr>
			</tbody>	
		</table>
	</body>
</html>

9.String对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/* 
			 indexOf 
			 查找指定字符是否存在
			 substring(起,止)
			 substr(起,个数)
			 split()  根据指定字符拆分字符串   拆为数组
			 replace()  替换字符
			 */
			var mystr = "abcdefgfiier";
			console.log(mystr.indexOf("fga"));
/* 			
			if(mystr.indexOf("fga")>=0){
				//xxxx
			} */
			console.log(mystr.substring(2,4));
			console.log(mystr.substr(2,4));	
			var mystr = "uname=jack;uage=15;upwd=abc123"
			var myarr = mystr.split(";")
			console.log(myarr);
			for(var i = 0;i < myarr.length;i++){
				var keyAndV = myarr[i].split("=");
				if(keyAndV[0]=="uage"){
					console.log(keyAndV[1]);
				}
			}
			var mystr2 = "username";
			console.log(mystr2.replace("name","age"));
		</script>
	</head>
	<body>
	</body>
</html>

10.math 对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			console.log(Math.ceil(12.23)) ;
			console.log(Math.floor(12.93)) ;
			console.log(Math.round(12.93)) ;
			console.log(Math.random()) ;
			/* 
			获得随机数
			 Math.random()
			 1.扩倍 舍去小数
			 2.加减 移位
			 */
		</script>
	</head>
	<body>
	</body>
</html>

11.Date 对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var nowDate = new Date("2021/12/12 11:11:11");
			console.log(nowDate.getTime());
		</script>
	</head>
	<body>
	</body>
</html>

12.Array对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/* 
			 js数组  类型不限   个数不限  arraylist
			 js中获取元素集合 数组
			 遍历
			 */
			var myarr = [1,true,"abc",4,new Date(),6];
			myarr = [2,7,5,3,9,1];
			var myarr2 = new Array();
			console.log(myarr.length);
			
			console.log(myarr.join(","));
			
			myarr.sort(function(a,b){
				return b-a;
			})
			console.log(myarr);
			myarr.push("a");
			console.log(myarr);
			myarr.pop();
			console.log(myarr);
			myarr.unshift("b");
			console.log(myarr);
			myarr.shift();
			console.log(myarr);
		</script>
	</head>
	<body>
	</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值