JavaScript学习笔记

 郑德帅   2020-03-15 19:00   285 人阅读  0 条评论

1..什么是javaScript?

   客户端的解释性脚本语言.与Java之间不存在任何关系;


2.JavaScript的语法结构,声明与引入

  <script type="text/javascript">...</script>


  <script type="text/javascript" src="JS文件路径及名称"></script>


内部JS直接在标签<script></script>中填写,外部导入<script src="外部js路径"></script>


  第一步:创建JS文件并且写入相关的代码;


  第二步:在网页文件内调用相关的JS文件;


  说明:


  A.JS严格区分大小写;


  B.每行JS代码必须以分号结尾;(现在虽然可以不写,但是怕以后过度到全部用,以防万一)


  C.JavaScript文件的扩展名为.js 


<!DOCTYPE Html>
<html>
<head>
<meta charset="UTF-8">
<title>js的声明和引入</title>
<script>
alert("这是我的第一个js");
/*js的声明方式1 在head标签进行js代码域的声明  只会作用于当前页面*/
</script>
<script src ="59-my.js" type="text/javascript">
/*src属性引入外部js代码  代码可重用,避免代码冗余*/
console.log(3,5));
</script>
</head>
<body>
</body>
</html>
外部59-my.js
alert("这是外部声明的js");
 
function add(x,y){
return x+y;
}

3.JS中的变量:

JavaScript 变量是存储数据值的容器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js中的变量</title>
		<script type="text/javascript">
			var a = 1;
			var b = "c";
			var c;
			alert(typeof(a));
			alert(typeof(new Date()));
			if(c){
				alert(c);
			}
			function add(x,y){
				alert(x+y);
			}
			for(var i = 1;  i < 9;i++){
				for(var j = 1; j <= i;j++){
					document.write("i*j"+"="+i*j+"&nbsp;&nbsp;&nbsp;&nbsp;");
				}
				document.write("<br />");
			}
		</script>
	</head>
	<body>
		<input type="button" name="" id="" value="" onclick="add()"/>
		<label for="">
			点击这里调用add函数
		</label>
	</body>
</html>

4.JS中的数据类型

 字符型(string),数值型(number),布尔型(boolean),未定义(undefined),null(空对象),function(自定义函数),

  对象(object),属性与方法的集合体;

      {
          propert:value,
          ....,
          method:function([parameter,...]){
              ...
              ...
          }
      }

<!DOCTYPE html>
<!--p31 20分钟-->
<html>
	<head>
		<meta charset="UTF-8">
		<title>js中自定义对象</title>
		<!--应该有哪些属性 
			应用:
				Ajax中会使用
			使用:
				1.创建自定义对象
					var 对象名 = new Object();
					对象名.属性名1 = 属性值1;...
				2.一般用来存储数据,不会再自定义对象中存储对象。
				3.js中的对象属性是可以自定义的可扩充的,不是依赖于类的声明的,类只是对象公共部分的一种声明,是为了减少代码冗余
		-->
		<script type="text/javascript">
			//1.创建自定义对象
			var obj = new Object();
			obj.name = "jason";
			obj.age = 18;
			obj.test = function(){
				alert(obj.name);
			}
			
			obj.test();
		</script>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<!--
			js中类的"继承" : prototype关键字
					通过prototype关键字实现了不同对象之间的数据共享
					作用1:实现某个类的所有子类对象的方法区对象的共享,节省内存;
					作用2:
		-->
		<meta charset="UTF-8">
		<title>js中类和对象</title>
		<script type="text/javascript">
			var date = new Date();
			console.log(date.getHours()+":"+date.getMinutes()+":"+date.getSeconds())
			//创建类Person 和 User
			function Person(name,age){
				this.name = name;
				this.age = age;
				this.fav = "唱歌";
			}
			function User(uname,pwd){
				this.uname = name;
				this.pwd = pwd;
			}
			//使用prototype
			Person.prototype.test = function(){
				alert("prototype关键字实现数据共享!!!");
			}
			Person.prototype.user = new User();
			User.prototype.testU = function(){
				alert("User中的testU");
			}
			//使用类
			var p1 = new Person("小李","18");
			alert(p1.name);
			alert(p1.test());
			p1.user.testU();
		</script>
	</head>
	<body>
	</body>
</html>

5.window对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js中window对象的学习</title>
		<!--
		1.框体方法
			1.alert  没有返回值
			2.confirm  警告框
					     确认返回true
					     取消返回false
			3.prompt   输入框
					   返回输入的值   否则   返回null
		2.定时和间隔执行方法	
			settimeout:
				指定的时间后执行指定的函数
					参数1:函数对象
					参数2:时间,单位毫秒
			setInterval : 没间隔指定的事件执行指定的函数
					参数1:函数对象
					参数2:时间,单位毫秒
			clearTimeout  停止当前的定时方法
							参数,定时器的id
			clearInterval  用来停止指定的时间间隔
							参数,间隔器的id
		-->
		<script type="text/javascript">
//弹窗 警告框  输入框
			function testAlert(){
				window.alert("测试alert");
			}
			function testConfirm(){
				var a = window.confirm("确定要删除吗??");
				console.log(a);
			}
			
			function testPrompt(){
				var a = window.prompt("请输入昵称:");
				console.log(a);
			}
		//声明全局变量id,为了停止定时执行
			var id,ids;
//测试定时执行
			function testSetTimeout(){
				id = window.setTimeout(function(){
					alert("三秒后执行弹窗!!!");
				},3000);
			}
			//间隔执行
			function testSetInterval(){
				ids = window.setInterval(function(){
					alert("我是间隔执行!!!每三秒弹一次");
				},2000);
			}
//停止定时
			function testClearTimeout(){
				window.clearTimeout(id);
			}
			
			function testClearinterval(){
				window.clearInterval(ids);
			}
		</script>
	</head>
	<body>
		<input type="button" name="" id="" value="测试警告框" onclick="testConfirm()"/><br />
		<input type="button" name="" id="" value="测试输入框" onclick="testPrompt()"/><br />
		<hr />
		<input type="button" name="" id="" value="测试setTimeg定时执行" onclick="testSetTimeout()"/><br />
		<input type="button" name="" id="" value="测试setInterval间隔执行" onclick="testSetInterval()"/><br />
		<input type="button" name="" id="" value="测试clearTimeout--停止指定的定时器" onclick="testClearTimeout()"/><br />
		<input type="button" name="" id="" value="测试clearInterval--停止间隔执行的定时器" onclick="testClearinterval()" />
</html>
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js中window对象学习2</title>
		<!--
			js的window对象学习
				1.子窗口方法
					window.open("子页面的相路径","打开方式","属性")
						示例:window.open("59-js-测试用的son子页面.html","newwindow","height=400,width=600,top=0,left=0,toolbar=no,menubar=no,scrollbar =no,resizable=no,location=no,status=no");
					注意:关闭子页面的方法window.close() 只能关闭打开的子页面
				2.子页面调用父页面的函数
					window.opener.父页面的函数
			js的window对象的常用属性
				地址栏属性: location
							window.location.href = "新的资源路径(相对路径/URL)";
							window.location.reload()  重新加载资源页面
				历史记录属性:history
				 	window.history.forward()  页面资源前景,历史记录的前进
				 	window.history.back()     页面资源后退,历史记录后退
				 	window.history.go(index)  跳转到指定的历史记录资源
				 					-3 -2 -1	负数                                 0                                   正数
				 					     后退到第几个                          当前页面=刷新                1-2-3 当前页面的前第几个
				屏幕属性:screen	
					window.screen.width
					window.screen.height    两个结合获取屏幕分辨率
				浏览器配置属性:navigator
					window.navigator.UserAgent
				主题面板属性
		-->
		
		<script type="text/javascript">
			//1.子页面的方法
			function testOpen(){
				window.open("59-js-测试用的son子页面.html","newwindow","height=400,width=600,top=0,left=0,toolbar=no,menubar=no,scrollbar =no,resizable=no,location=no,status=no");
			}
			//子页面调用父页面的函数
			function testUseFather(){
				alert("父页面的方法!!!不知为什么会调用失败!!!");
			}
			
			
//1.地址栏属性学习 --- location
			function testLocation(){
				window.location.href = "https://www.baidu.com";
			}
			
			function testLocation2(){
				window.location.reload();
			}
//2.历史记录属性
			function testHistory(){
				window.history.forward();
			}
//3.屏幕属性学习
			function testScreen(){
				var x = window.screen.width;
				var y = window.screen.height;
				alert("x:"+x +"   y:"+y);
			}
//浏览器配置属性
			function testNavigtor(){
				alert(window.navigator.userAgent);
			}
		</script>
	</head>
	<body>
		<input type="button" name="" id="" value="测试open,打开子页面" onclick="testOpen()"/>
		<br />
		<hr />
		<input type="button" name="" id="" value="测试地址栏属性--location--跳转资源" onclick="testLocation()"/><br />
		<input type="button" name="" id="" value="测试地址栏属性--location--重新加载资源" onclick="testLocation2()"/>
		<hr />
		<br />
		<input type="button" name="" id="" value="测试历史记录--history--前进(bakc同理,go下标)" onclick="testHistory();"/>
		<hr />
		<br />
		<input type="button" name="" id="" value="测试屏幕属性--screen" onclick="testScreen();"/>
		<hr />
		<br />
		<input type="button" name="" id="" value="测试浏览器配置属性--navigator" onclick="testNavigtor()"/>
	</body>
</html>

 6.DOM对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>document对象学习</title>
		<!--
			1.document 对象的概念
				浏览器对外提供的支持js的用来操作HTML文档的一个对象,此对象封存的HTML文档的所有信息
			2.使用document
					获取HTML元素对象
						直接获取方式
							通过id
							通过name属性值
							通过标签名
							通过class属性值
					操作HTML对象的属性
					操作HTML元素对象的内容和样式
					操作HTML的文档结构
					document操作Form元素
					document操作表格
					document对象实现form表单的校验
		-->
		
		<script type="text/javascript">
		//document获取元素对象
		//1.直接获取方式
				function testGetElementById(){
					var inp = document.getElementById("uname");
					alert(inp);
				}
				function testGetElementsByName(){
					alert(document.getElementsByName("uname1").length);
				}
				function testGetElementsByTagName(){
					var inps = document.getElementsByTagName("input");
					alert(inps.length);
				}
				function testGetElementsByClassName(){
					var inp1 = document.getElementsByClassName("uname");
					alert(inp1);
				}
		//2.间接获取方式
			//父子关系
				function testParentGetChilds(){
					//获取父级元素对象
					var parentEle = document.getElementById("showdiv");
					//获取所有的子元素对象群组
					var childs = parentEle.childNodes;
					alert(childs.length); //有换行所以会增加很多
				}
			//子父关系
				function testChildGetParent(){
					alert(document.getElementById("inp").parentNode);
				}
			//兄弟关系
				function testBrother(){ //注意有回车换行
					var preEle = document.getElementById("inp").previousSibling;   //弟获取兄
					var nextEle = document.getElementById("inp").nextSibling; 		//兄获取弟
					alert(preEle + ":::" + nextEle)
				}
				
		</script>
		<style type="text/css">
			.common{}
			#showdiv{
				border: solid 1px red;
				width: 400px;
				height: 500px;
			}
		</style>
	</head>
	<body>
			<h3>document 对象的概念和获取元素对象学习</h3>
			直接获取:
			<hr /><br />
			<input type="text" name="uname" id="uname" value="测试获取HTML元素对象---getElementById('id值')" onclick="testGetElementById()" style="width: 400px;"/><br />
			<input type="text" name="uname1" id="uname1" value="测试获取HTML元素对象---getElementByName('name值')" onclick="testGetElementsByName()" style="width: 400px;"/><br />
			<input type="text" name="uname2" id="uname2" value="测试获取HTML元素对象---getElementsByTagName('标签名')" onclick="testGetElementsByTagName()" style="width: 400px;"/><br />
			<input type="text" name="uname3" id="uname3" value="测试获取HTML元素对象---getElementsByClassName('标签名')" onclick="testGetElementsByClassName()" style="width: 400px;"/><br />
			<br />
			<input type="checkbox" name="" id="" value="复选框" class="common"/>
			
			
			<br />
			间接获取:<br />
			<input type="button" name="" id="" value="获取所有子元素--父子关系" onclick="testParentGetChilds()"/><br />
			<input type="button" name="" id="" value="获取父元素--子父关系" onclick="testChildGetParent()"/><br />
			<input type="button" name="" id="" value="获取兄弟元素--兄弟关系" onclick="testBrother()"/><br />
			<div id="showdiv">
				<input type="" name="" id="" value="" />
				<input type="" name="" id="inp" value="" />
				<input type="" name="" id="" value="" />
				<input type="" name="" id="" value="" />
				<input type="" name="" id="" value="" />
				<input type="" name="" id="" value="" />
			</div>
	</body>
</html>

7.JS操作元素 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js操作HTML的元素属性</title>
		<!--
			js 操作HTML元素属性学习
				获取元素对象
				操作元素属性
					获取: 
						①元素对象.属性值 // 返回当前属性的属性值
						②元素对象.getAttribute("属性名")
					修改
					       元素对象.属性名  = 属性值
					       元素对象.setAttribute("属性名","属性值")
					注意:
						尽量不要去修改id 和 name 属性值
						使用固有方法获取value值是默认值,不能获取到实时的值
		-->
		<script type="text/javascript">
			//获取  修改
			function testField(){
				//获取元素对象
				var inp = document.getElementById("uname");
				alert(inp.value);
				//修改属性
				inp.value = "修改后的属性";
				inp.type = "button";
			}
			
			//getArrtibute("属性名")  和 setAttribute("属性名","属性值")
			function testGetAndSet(){
				alert(document.getElementById("uname").getAttribute("type"));
				document.getElementById("uname").setAttribute("abc","测试getAttribute()和setAttribute()");
				alert(document.getElementById("uname").getAttribute("abc"));
			}
		</script>
	</head>
	<body>
		<h3>
			js操作HTML的元素属性
		</h3>
		<input type="button" name="" id="" value="元素对象.属性名获取元素属性" onclick="testField()"/>
		<input type="button" name="" id="" value="getAttribute()和setAttribute()" onclick="testGetAndSet()"/>
		<hr />
		用户名:<input type="text" name="uname" id="uname" value="先存放的12" />
	</body>
</html>
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js操作元素内容</title>
		<!--
			操作元素内容
				获取元素对象
					获取
						对象元素.innerHTML   ==>当前元素的所有内容,包括标签
						对象元素.innerText   ==>当前元素的文本内容,不包括标签
					修改:
						对象元素.innerHTML = "新的值";                      ==>HTML标签会被解析且覆盖新的值
						对象元素.innerHTML = 对象元素.innerHTML+"新的值";    ==>HTML标签会被解析且追加到末尾
						
						对象名.innerText = "新的值";						   ==>HTML标签不会被解析且覆盖新的值
						对象元素.innerText = 对象元素。innerTEXT+"新的值";   ==>HTML标签不会被解析且追加新的值
		-->
		<script type="text/javascript">
			//获取元素内容
			function getContext(){
				//获取对象及其内容
				alert(document.getElementById("div01").innerHTML);
				alert(document.getElementById("div01").innerText);
			}
			
			//修改元素内容
			function updateContext1(){
				var div = document.getElementById("div01");
				div.innerHTML = div.innerHTML + "<br />测试文本3";
			}
			function updateContext2(){
				var div = document.getElementById("div01");
				div.innerText = div.innerText + "<br />测试文本3";
			}
		</script>
		<style type="text/css">
			#div01{
				width:400px;
				height: 500px;
			}
		</style>
	</head>
	<body>
		<h3>js操作元素内容学习</h3>
		<input type="button" name="" id="" value="获取元素内容--innerHTML" onclick="getContext()"/>
		<input type="button" name="" id="" value="修改元素内容--innerHTML" onclick ="updateContext2()" />
		<hr />
		<div id="div01">
			测试文本1,
			测试文本2。
		</div>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js操作元素的文档</title>
		<!--
			js操作HTML文档结构
				增加节点
				删除节点
			第一种方式:
				使用innerHTML:
					div.innerHTML = div.innerHTML + "内容"; //增加节点
					div.innerHTML = "";  //删除所有节点
					父节点.removeChild(子节点对象); //删除指定的子节点  == 不适合table
			第二种方式:见操作文档结构2
				获取元素对象
					var obj = document.createElement("标签名");
					obj.属性名="新值";
					最后记得追加    ===》元素对象.appendChild(obj);
					删除同上: 父节点.removeChild(子节点对象);
					
		-->
		<script type="text/javascript">
			//innerHTML添加节点
			function testAdd(){
				var divEle = document.getElementById("showdiv");
				divEle.innerHTML = divEle.innerHTML + "<div><input type='file' name='' value='选择文件'/><input type='button' name='' id='' value='删除' onclick='testDelete(this)' /></div>";
			}
			//删除按钮
			function testDelete(btn){
				//获取父级div
				var showdiv = document.getElementById("showdiv");
				//获取要删除的子div
				var parentDiv = btn.parentNode;
				//父div删除子div
				showdiv.removeChild(parentDiv);
			}
		</script>
	</head>
	<body>
		<h3>js操作元素的文档结构</h3>
		<input type="button" name="" id="" value="继续上传" onclick="testAdd()" />
		<br /><hr />
		<div id="showdiv">
			<input type="file" name="" value="选择文件"/><input type='button' name='' id='' value='删除' onclick="testDelete(this);"/>
		</div>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js操作元素的文档结构2</title>
		<script type="text/javascript">
			function testOpera(){
				//获取元素对象
				var showdiv = document.getElementById("showdiv");
				//创建input元素对象
				var inp = document.createElement("input");
				inp.type = "file";
				//创建input元素对象
				var btn = document.createElement("input");
				btn.type = "button";
				btn.value = "删除";
				//onclick也是属性
				btn.onclick=function(){
					showdiv.removeChild(inp);
					showdiv.removeChild(btn);
					showdiv.removeChild(br);
				}
				//创建换行符
				var br = document.createElement("br");
				
				//将创建的元素存放到div中
				showdiv.appendChild(inp);
				showdiv.appendChild(btn);
				showdiv.appendChild(br);
				
			}
		</script>
	</head>
	<body>
		<h3>js操作文档的结构2</h3>
		<input type="button" name="" id="" value="继续上传" onclick="testOpera()" />
		<br /><hr />
		<div id="showdiv">
			
		</div>
	</body>
</html>
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js操作元素的样式</title>
		<!--
			js操作元素样式
				获取元素对象
					1.通过style属性
						元素对象.style.样式名="样式值";  //添加或者修改样式
						元素对象.style.样式名="";       //删除样式
						注意:以上操作,操作的是HTML的style属性声明中的样式,而不是其他css代码中的样式
					2.通过className
						元素对象.className = "新的值";  添加或者修改类选择器
						元素对象.className = "";  删除类样式
		-->
		<script type="text/javascript">
		//js操作样式--style  添加 修改  删除  元素样式
			function testchangeCss(){
				var showdiv = document.getElementById("showdiv");
			//添加样式的两种方法
			    //showdiv.style = "background-color:green";  //这种写法或者下面的写法
				showdiv.style.backgroundColor = "#FF0000";
				
			//修改样式
				showdiv.style.border = "solid 2px #00FF00";
			
			//删除样式
				showdiv.style.width= "";
			}
		//js操作样式 -- className
			function testOperaCss(){
				var div01 = document.getElementById("div01");
			//获取
				alert(div01.className);
			//添加 或者 修改
				div01.className = "common2";
//			//删除
//				div01.className = "";
				
			}
		</script>
		<style type="text/css">
			#showdiv{
				width:400px;
				height: 500px;
			}
			.common{
				width:400px;
				height: 500px;
				border: 1px solid red;
			}
			
			.common2{
				width:400px;
				height: 500px;
				border: 1px solid red;
				background-color: aqua;
			}
			
		</style>
	</head>
	<body>
		<h3>js操作元素的样式</h3>
		<input type="button" name="" id="" value="style增删改样式" onclick="testChangeCss()"/>
		<input type="button" name="" id="" value="通过class修改样式" onclick="testOperaCss()"/>
		<br /><hr />
		<div id="showdiv">
			
		</div>
		
		<div id="div01" class="common">
			
		</div>
	</body>
</html>

8.JS操作表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>操作表格</title>
		<!--
        	js 操作表格
        		1.删除行
        			行对象.rowIndex //返回行对象的下标
        			表格对象.deleteRow(行对象.rowIndex )
        -->
		<!--js代码区域-->
		<script type="text/javascript">
		//删除行
			function deleteTr(btn){
				//获取表格对象
				var table = document.getElementById("bookTable");
				//获取要删除的行对象
				var tr = btn.parentNode.parentNode;
				//删除
				table.deleteRow(tr.rowIndex);
			}
		//修改表格
			function updateRow(btn){
				//获取父节点的父节点  ==>行对象
				var tr = btn.parentNode.parentNode;
				//获取需要修改的单元格
				var cell = tr.cells[4]
				
				if(!isNaN(Number(cell.innerHTML))){
					//修改单元格
					cell.innerHTML = "<input type='text' value='" +cell.innerHTML +"' onblur='updateRow2(this)'/>";
				};
			}
		//失去焦点修改值
			function updateRow2(inpText){
				//获取父节点的父节点  ==>行对象
				var tr = inpText.parentNode.parentNode;
				//获取需要修改的单元格
				var cell = tr.cells[4]
				//失去焦点将值赋给单元格
				cell.innerHTML = inpText.value;
			}
		</script>
		<style type="text/css">
			#bookTable tr{
				height: 35px;
			}
			
			body{
				text-align: center;
			}
		</style>
	</head>
	
	<body>
		<h3 align="center">js操作表格</h3>
		<input type="button" name="" id="" value="添加行" />
		<input type="button" name="" id="" value="删除行" disabled="disabled"/>
		<input type="button" name="" id="" value="复制行" disabled="disabled"/>
		<br /><hr />
		<table id = "bookTable" border="2px" cellspacing="1px" cellpadding="3px" align="center">
			<tr align="center" style="font-weight: bold;">
				<td><input type = "checkbox" name = "chk" id = "chk"  onclick="" /></td>
				<td width = "200px;">书名</td>
				<td width = "100px;">作者</td>
				<td width = "100px;">价格</td>
				<td width = "100px;">数量</td>
				<td width = "200px;">操作</td>
			</tr>
			<tr>
				<td><input type = "checkbox" name = "chkd" id = "chkd"  onclick="" /></td>
				<td>Thinking in Java</td>
				<td>jason</td>
				<td>99.45</td>
				<td id="cell">30</td>
				<td>
					<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)"/>
					<input type="button" name="" id="" value="删除" onclick="deleteTr(this)"/>
				</td>
			</tr>
			<tr>
				<td><input type = "checkbox" name = "chkd" id = "chkd"  onclick="" /></td>
				<td>Java web 开发详解</td>
				<td>孙鑫</td>
				<td>1000</td>
				<td>1</td>
				<td>
					<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)"/>
					<input type="button" name="" id="" value="删除" onclick="deleteTr(this)"s/>
				</td>
			</tr>
			<tr>
				<td><input type = "checkbox" name = "chkd" id = "chkd"  onclick="" /></td>
				<td>JSP应用开发详解</td>
				<td>电子工业出版社</td>
				<td>34</td>
				<td>90</td>
				<td>
					<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)"/>
					<input type="button" name="" id="" value="删除" onclick="deleteTr(this)"/>
				</td>
			</tr>
		</table>
		
		<h1 style="color:red">上面的功能 和 复选框暂时没写</h1>
	</body>
</html>

9.JS操作form表单

<!DOCTYPE html>
<!--p43 开头-->
<html>
	<head>
		<meta charset="UTF-8">
		<title>js操作form表单</title>
		<!--
			js操作form表单
				1.获取form表单对象
					使用id  或者 表单的name属性
				2.获取form下的所有表单元素对象集合
					fm.elements
				3.form 表单的常用方法
					表单对象.submit(); //提交表单数据
				4.form 的属性的操作
					表单对象.action = "新的值";  //动态改变数据提交路径
					表单对象.method = "新的值";  //动态的改变提交方式
				5.表单元素的通用属性
					只读模式  readonly   只读会提交
					关闭模式  disable    禁用不提交
		-->
		<script type="text/javascript">
			function testForm(){
			//获取form表单对象
				var fm = document.getElementById("fm");
			//使用form表单的name属性值来获取form表单对象==》form特殊,其他不行
				var frm = document.frm;  //===>获取的结果和上面完全一样
//				alert(frm===fm);
			//获取form表元素对象集合
//				alert(fm.elements.length);
			//form 表单的常用方法
//				fm.submit(); //提交,很重要
				fm.reset(); //重置
			//form表单的属性操作
				fm.action="https://www.baidu.com/s";
			}
		</script>
	</head>
	<body>
		<h3>js操作form表单</h3>
		<input type="button" name="" id="" value="测试js操作form" onclick="testForm()"/>
		<br /><hr />
		<form action="#" method="get" id="fm" name="frm">
			<b>用户名</b>: <input type="texf" name="wd" id="uname" value="" /><br /><br />
			密码:<input type="password" name="pwd" id="pwd" value="" /><br /><br />
			<input type="text" name="只读会提交" id="" value="只读" readonly="readonly" /><br />
			<input type="text" name="关闭不提交" id="" value="禁用" disabled="disabled" /><br />
			<input type="submit" name="" id="" value="登录"/>
		</form>
	</body>
</html>

 10.JS中的事件机制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js的事件机制学习1</title>
		<!--
			解释:当一位满足一定的条件后,会触发某类事务的执行
			作用:主要结合js的函数来使用
			一个事件可以添加多个监听时间,已 ; 分开
			内容:
				1.单双机事件
					单击:onclick
					双击:ondblclick
				2.鼠标事件
						onmousemove  鼠标停在
						onmouseover  鼠标移动
						onmouseout   鼠标移出
				3.键盘事件
						onkeyup    键盘弹起
						onkeydown  键盘按下
				4.焦点事件
					onblur
					onfocus
				5.页面加载事件
					onload
			注意:
				js中添加事件的第一种方式:直接添加监听函数
				js的事件只在当前HTML元素有效
		-->
		<script type="text/javascript">
		//单击事件
			function testOnclick(){
				alert("单击事件!!");
			}
			//双击事件
			function testOndblclick(){
				alert("双击事件!!!");
			}
		//鼠标事件
			function testOnmouseover(){
				alert("我是鼠标悬停事件!!!");
			}
			//鼠标移动
			function testOnmousemove(){
				alert("我被移动了!!!");
			}
			//移出区域
			function testOnmouseout(){
				alert("被移出了!!");
			}
			
		//键盘事件
			function testOnkeyup(){
				alert("我是键盘弹起事件!!!");
			}
			function testOnkeydown(){
				alert("我是键盘下压事件!!!");
			}
			
		//焦点事件
			function testonfocus(){
				document.getElementById("showDiv1").innerHTML= "<br/>获取焦点";
//				alert("获取焦点事件");
			}
			function testOnblur(){
				alert("失去焦点事件!!!");	
			}
		//页面加载
			function testOnload(){
				alert("我是页面加载事件!!!");
			}
			
		</script>
		<style>
			#showDiv1{
				width: 200px;
				height: 200px;
				border: solid 2px;
				background: border-box;
			}
		</style>
	</head>
	<body onload="testOnload()"> 
		<h2>js事件机制的学习1</h2>
		<input type="button" name="" id="" value="测试单击" onclick="testOnclick()"/>
		<input type="button" name="" id="" value="测试双击" ondblclick="testOndblclick()" />
		testOnload();
		<br />
		<br />
		<br />
		<div id = "showDiv1" onmouseover="testOnmouseover();" onmousemove="testOnmousemove();" onmouseout="testOnmouseout()"></div>
	
	<br /><hr />
	
	键盘事件学习
	键盘弹起事件:<input type="text" name="" id="" value="" onkeyup="testOnkeyup()"/><br />
	键盘下压事件: <input type="text" name="" id="" value="" onkeydown="testOnkeydown()"/>
	<hr />
	焦点事件学习:
	获取焦点:<input type="text" name="" id="" value="" onfocus="testonfocus()"/>
	<br />
	失去焦点:<input type="text" name="" id="" value="" onblur="testOnblur()"/>
	</body>
</html>
<script type="text/javascript">
	testOnload();
</script>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js事件机制学习2</title>
		<!--
			1.给合适的HTML标签加上合适的事件
				1.onchange --- select下拉选
				2.onload ---body 
				3.鼠标键盘  ==>比如登录注册时
			
			2.给HTML添加多个事件时,注意事件的冲突
			3.事件的阻断
			  	当事件监听的函数将返回值给事件时:false阻断,true则继续
			4.超链接调用js函数
				<a href="javascript:函数()"></a>
		-->
		<script type="text/javascript">
		//值改变事件
			function testOnchange(btn){
//				alert(document.getElementById(btn).value);
				alert("改变了!!!");
			}
		//事件冲突
			function testOnclick(){
				alert("单击事件!!!");
			}
			function testOndblclick(){
				alert("双击事件!!!");
			}	
		//事件的阻断!!!
			function testBreak(){
				alert("事件的阻断!!");
				return false;
			}
		//超链接调用js函数
			function testHref(){
				alert("这是超链接调用js函数!!!");
			}
		</script>
	</head>
	<body>
		值改变事件:<input type="text" name="" id="inp1" value="" onchange="testOnchange(this);"/>
		<br />
		<br />
		<select name="" id="sel1" onchange="testOnchange(this);">
			<option value="">北京</option>
			<option value="">上海</option>
			<option value="">赣州</option>
			<option value="">深圳</option>
		</select>
		<hr />
		事件的冲突:<br />
		<input type="button" name="" id="" value="事件的冲突事件" onclick="testOnclick()" ondblclick="testOndblclick()"/>
		<br />
		事件的阻断:
		<a href="https://www.baidu.com/" target="_blank" onclick="return testBreak()" >点击打开百度</a>
		<br />
		超链接调用js函数
		<a href="javascript:testHref()">超链接调用js函数!!!</a>
	</body>
</html>

11.JS中的正则表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js中的正则表达式</title>
		<script type="text/javascript">
			//$1反向引用
			var str = "a1898989b2c3d4";
			str = str.replace(/(\d+)/g,'<span style="color:red">$1</span>')
			document.write("<br>"+str)
			str = str.replace(/(\d+)/g,'<span style="color:red">1</span>')
			document.write("<br>"+str)
		
			var date = "12/25/2018"
			//用一条语句将其输出成"2018-12-25"
			date1 = date.replace(/(\d{1,})\/(\d{1,})\/(\d{4})/,'$3-$1-$2')
			document.write("<br>"+date1)
 
		</script>
	</head>
	<body>
	</body>
</html>


本文地址:https://www.lanol.cn/post/49.html
温馨提示:文章内容系作者个人观点,不代表Lan's Blog对观点赞同或支持。
版权声明:本文为转载文章,来源于 郑德帅 ,版权归原作者所有,欢迎分享本文,转载请保留出处!

 发表评论


表情

还没有留言,还不快点抢沙发?