JavaScript学习笔记

最新推荐文章于 2022-11-15 20:18:25 发布

那就叫我兔子吧

最新推荐文章于 2022-11-15 20:18:25 发布

阅读量300

点赞数

分类专栏：个人学习笔记

本文链接：https://blog.csdn.net/man_of_mouse/article/details/119347214

版权

个人学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JavaScript学习笔记

1.嵌入js的方式

1.1事件句柄写入js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="提示" onclick='window.alert("hello")
		alert("hello2");'/>
		<!-- 弹出两次提示，window可以省略 ，';'可以省略-->
		<!-- 注意不能同时使用单引号或者同时使用双引号 -->
	</body>
</html>

1.2脚本块嵌入

<script type="text/javascript">
	alert("page begin")
</script>
<!DOCTYPE html>
<html>
	<script type="text/javascript">
		alert("page mid")
	</script>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		alert("page end")
	</script>
	<body>
		<input type="button" name="" id="" value="不会直接显示" />
	</body>
</html>

1.3引入外部独立的js文件

<!DOCTYPE html>
<script type="text/javascript" src="1.js">
	<!-- 引用外部的js文件 -->
</script>
<html>
	<head>
		<script type="text/javascript" src="1.js">
			<!-- 多次引用会执行多次 -->
		</script>
		
		<script type="text/javascript" src="1.js">
			alert("这里的语句不会执行")
			<!-- 引用外部的js文件 -->
		</script>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

1.js

alert("js文件被引入")

2.语法

2.1变量

在JavaScript中变量使用var来声明

var i

未赋值的变量为undefined类型

JavaScript中同样存在全局变量与局部变量，通常在函数中声明的都是局部变量，但是变量在赋值时没有经过定义，那就是全局变量

数据类型在ES6之前有6种

Undefined
Number
String
Boolear
Null 只有一个值:null
Object

其中前五种叫做基本数据类型，最后一种叫做引用数据类型

2.2.1 Number

Number类型要注意NaN(错误的类型)和Infinity(除以0)，但是Number与字符串相加是可以的

isNaN(数据)函数用于判断数值是否是数字，会先尝试讲数据转化为数字，如果失败了则返回true

所以isNaN(true)返回false因为true可以被转化为数字，同理"123"返回flase而“数字"则返回true

Number(数据)函数可以讲数据转化为数字，无法转化的则返回NaN

**parseInt(数字)**可以对数字进行取整处理，但不会四舍五入

**Math.ceil(数字)**可以对数字进行向上取整

在JavaScript中小数计算默认为double类型的计算，并不会截断

2.2.2 Boolean

Boolean()函数用于将数据转化为布尔值，在if语句或者while语句中会隐式调用

如空字符串，0，undefined，NaN ，null均会返回false

2.2.3 String

定义有两种方法

var s = "string"//string 类型
var s = new String("string")//object类型
//仅仅是类型的不同，其他都是一样的

常用函数

“string”.length返回字符串的长度
“string”.charAt(3)返回下标为3的字符
“string”.concat(“string2”)将第一个字符串与第二个拼接起来
”string".indexOf(“i”)返回从左至右第一个“i”的下标
“string”.lastIndexOf(“i”)返回从右到左第一个"i"的下标
“string”.replace(“i”,“a”)将i替换为a,只对第一个i生效
“string”.split(“r”)以r为界限拆分字符串,r本身不被包括,接收之后用下标来引用，.length可以得到个数
“string”.substr(num1,num2)当只有num1时包括下标在内截取后面的字符串,num2存在时指定截取的个数
“string”.substring(num1,num2)当只有num1时同上,num2指定结尾的下标
“string”.toLowerCase(),“string”.toUpperCase()

2.2.4 object

重点是prototype属性,用于扩展对象的属性和方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var obj = new Object()
			Object.prototype.newfunction= function(){
				alert("添加新函数")
			}
			Object.prototype.newname="新名字"
			obj.newfunction()
			alert(obj.newname)
			
			//string也能这样
			String.prototype.newfunction = function(){
				return this[0]
			}
			//然后便可以直接调用这种方法
			alert("abc".newfunction())
		</script>
	</head>
	<body>
	</body>
</html>

2.2函数

JavaScript中的函数定义优先载入且不能重载，在调用函数时取最新的函数定义，且调用可以在定义函数之前，参数数目可以不匹配，如

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function sum(x,y)
			{
				alert(x+","+y)
			}
			sum()
			
			sum(1)
			
			sum(1,2)
			
			sum(1,2,3)
		</script>
	</body>
</html>

也可以在事件句柄中调用函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function sum(x,y)
			{
				alert(x+","+y)
			}
		</script>
		<input type="button" name="" id="" value="调用函数" onclick="sum(1,2)"/>
	</body>
</html>

2.3调试

在游览器中按下F12可以进入调试模式

常用的有

控制台
查看器
网络

2.4 typeof运算符

typeof能获取变量的数据类型，并返回该类型的小写字符串

undefined
number
string
boolean
object
function

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function sum(x,y)
			{
				alert(x+y)
			}
			//null属于NULL类型但是结果是object
			var v=null
			console.log(typeof v)
			//输出结果到控制台
			
			var z=true
			console.log(typeof z)
			
			var name="names"
			console.log(typeof name)
			
			var und=undefined//不加也可
			console.log(typeof und)
			
			var n=100
			console.log(typeof n)
			
			var object=new Object()
			console.log(typeof object)
			
			console.log(typeof sum)
		</script>
	</body>
</html>

2.5 void运算符

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="javascript:void(0)" onclick="alert('这里是一段js代码')">点我不会跳转</a>
	</body>
</html>

void表达式执行表达式后不会返回任何结果 url处为必须要加上JavaScript：的特例

2.6 类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//myclass=function()也可
			function myclass(name,age)
			{
				this.name=name;
				this.age=age;
				
				this.show=function(){
					alert(name+":"+age)
				}
			}
			myclass()//普通的函数调用，这里无效
			obj=new myclass("rabbit",12)//类的声明,这里是全局变量
			obj.show()
			unf=new myclass()
			unf.show()//默认为undefined
			alert(obj.name+":"+obj["age"])//直接访问元素的两种方法
			
			//自定义的类也能进行prototype扩展,这里不演示
		</script>
	</head>
	<body>
	</body>
</html>

2.7等同运算符与全等运算符=

只判断数值是否相等,而=还会判断数据类型是否相等

true1与true=1结果不同

NaN与任何值都不等同,不论是数值还是类型

undefined与null在数值上等同,而类型不同

2.8获取标签的id

document是DOM的顶级对象

window是BOM的顶级对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" name="" id="mytext" value="目前文本" />
		<script type="text/javascript">
			alert("确认之后文本框的内容将被改变")
			var tar=document.getElementById("mytext")
			tar.value="文本改变"
			alert("确认之后文本框的类型将被改变")
			tar.type="button"
			
			//也能输出它的内容
			console.log(tar)
			alert(tar)
		</script>
	</body>
</html>

2.9其他两种获取元素的方法

getElementsByName 获取名字相同的所有元素
getElementsByTagName 获取标签相同的所有元素

3.事件

3.1常用事件

blur 失去焦点
focus 获得焦点
click 鼠标单击
dblclick 鼠标双击
keydown 键盘按下
keyup键盘弹起
mousedown鼠标按下
mouseup鼠标谈起
mouseover鼠标经过
mousemove鼠标移动
submit 表单提交
reset 表单重置
select 文本选定
change 下拉列表选中项被改变
load 页面加载完毕

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件测试</title>
	</head>
	<body onload="console.log('如果有提示框则在提示框处理完才会到加载完毕')">
		<input type="text" name="" id="" value="" onblur="console.log('失去焦点')"/>
		<br>
		<input type="text" name="" id="" value="" onfocus="console.log('获得焦点')"/>
		<br>
		<input type="button" name="" id="" value="" onclick="console.log('单击')"/>
		<br>
		<input type="button" name="" id="" value="" ondblclick="console.log('双击')"/>
		<br>
		<input type="text" name="" id="" value="" onkeydown="console.log('down')" onkeyup="console.log('up')"/>
		<br>
		<div id="" onmousedown="console.log('鼠标按下')" onmouseup="console.log('鼠标弹起')"
		onmouseover="console.log('鼠标经过')" onmousemove="console.log('鼠标移动')" onmouseout="console.log('鼠标离开')">
		
			鼠标事件测试区
		</div>
		
		<form action="..." onsubmit="console.log('提交了')" onreset="console.log('重置了')">
			<input type="submit" name="" id="" value="提交" />
			<input type="reset" name="" id="" value="重置" />
			
		</form>
		
		<br>
		
		<select onchange="console.log('改变')" >
			<option value ="1" selected">1</option>
			<option value ="2">2</option>
			<option value ="3">3</option>
		</select>
		
		<br>
		
		<textarea rows="60" cols="60" onselect="console.log('选中')">
			
		</textarea>
		
		
	</body>
</html>

3.2事件注册

3.2.1第一种注册方式

在监听器内加入回调函数,有点简单不予演示,唯一要注意的是函数的嵌入形式要加上括号

3.2.2第二种注册方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="" id="mybutton" value="点我" />//注意声明id要在获取id之前，不然会报错，除非使用load延时
		<script type="text/javascript">
			function prints(){
				alert("回调函数执行")
			}
			var but=document.getElementById("mybutton")
			but.onclick=prints//注意不能加括号
			//也可以用匿名函数
		</script>
	</body>
</html>

load可以造成延时作用，可以解决按钮没加载出来就发出提示的问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onload="ti()">
		
		<script type="text/javascript">
			function ti(){
				alert("确认之后文本框的内容将被改变")
				var tar=document.getElementById("mytext")
				tar.value="文本改变"
				alert("确认之后文本框的类型将被改变")
				tar.type="button"
                
                //可以用window.onload = ti来代替，匿名函数也可
                //此时不需要再在body加上onload
			}
			<input type="text" name="" id="mytext" value="目前文本" />
		</script>
	</body>
</html>

需要注意的是load要在所有的js-script都执行完毕后才会触发，所以通常为了不出错会这样写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload=function(){
			var btn1=document.getElementById("z1");
			btn1.onclick=function(){
				console.log("按钮1点击")
			}
			}
		</script>
		<input type="button" name="" id="z1" value="button1" />
		
</html>

3.3事件对象

所有事件在注册时都会给函数传递一个事件对象,即便该函数不接受任何参数

btn1.οnclick=function(x){
if(x.keyCode==13)
console.log("回车键按下")
}

4.控制语句

if
switch
for
while
do while
break continue return
for in
with

var arr=[true,"abc",5,76,3.14]
for(var index in arr)
{
	console.log(arr[index])//遍历
}
function myclass(name,age)
{
    this.myname=name;
    this.myage=age;
}
    var i=new myclass("rabbot",12);
    for(var index in i)
{	
    console.log(index)//遍历属性名
}
    for(var index in i)
{
    console.log(i[index])//遍历属性
}

with语句对类使用可以让接下来的语句不用加“.属性”,而是直接引用属性

类型于名称空间的引用

5.数组

5.1数组声明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a1 = [];//长度为0
			var a2 = [1,2,3,true];//类型可以不一致
			//数组长度是可变的
			
			a1[100]=100;//扩容,此时a1.length为101
			//其他未赋值的变量均为undefined
			a1[-100]=100//不会报错,但没有实际作用,对于undefined
			
			var arr1=new Array()//长度为0的数组
			var arr2=new Array(3)//长度为3
			var arr3=new Array(1,2)//长度为2
			
			//遍历用for循环即可,for in循环也可
		</script>
	</body>
</html>

5.2数组常用方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		var arr= new Array(1,2,3);
		arr.push(4);//将4推入数组的第三位
		arr.pop();//返回4,同时数组长度减一
		
		arr.reverse();//颠倒数组
		
		console.log(arr.join("-"));//输出3-2-1字符串
		</script>
	</body>
</html>

6.Date对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var time =new Date();
			
			console.log(time);
			
			var year=time.getFullYear();//4位数的年份
			var month=time.getMonth();//0~11
			var xiqi=time.getDay();//表示星期几
			
			var day=time.getDate();//表示一个月中第几天
			
			console.log(year+"年"+(month+1)+"月"+day+"日");
			
			var hour=time.getHours();//小时
			var minute=time.getMinutes();
			var sec=time.getSeconds();
			var millsec=time.getMilliseconds();
			
			var strtime=time.toLocaleString();
			console.log(strtime);
			
			var fromtime=time.getTime();
			//从1970年1月1日 000000000到现在的毫秒数
		</script>
	</body>
</html>

7.DOM

7.1操作div与span

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<script type="text/javascript">
			window.onload=function(){
				var bt1=document.getElementById("b1");
				var bt2=document.getElementById("b2");
				bt1.onclick=function(){
					var mydiv=document.getElementById('mydiv')
					var myspan=document.getElementById('myspan')
					mydiv.innerHTML="<font color='#FF0000'>内容变化</font>"
					myspan.innerHTML="<font color='#FF0000'>内容变化</font>"
				}
				 bt2.onclick=function(){
					var mydiv=document.getElementById('mydiv')
					var myspan=document.getElementById('myspan')
					mydiv.innerText="<font color='#FF0000'>纯文本变化</font>"
					myspan.innerText="<font color='#FF0000'>纯文本变化</font>"
				 }
			}
		</script>
		<div id="mydiv">
			初始类容
		</div>
		<span id="myspan"> 
		   span的大小可以随着内容大小变化
		</span>
		<br>
		<input type="button" name="" id="b1" value="按钮1" />
		<br>
		<input type="button" name="" id="b2" value="按钮2" />
	</body>
</html>

7.2复选框的全选与取消全选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload=function(){
				document.getElementById("mybox").onclick=function(){
					var hobbys=document.getElementsByName("hobby")
					for(var index in hobbys)
					{
						hobbys[index].checked=document.getElementById("mybox").checked
					}
				}
				var hobbys=document.getElementsByName("hobby")
				for(var index in hobbys)
				{
					hobbys[index].onclick=function()
					{
						var count=0;
						for(var index in hobbys)
						{
							if(hobbys[index].checked)
							count++;
						}
					document.getElementById("mybox").checked=(count==hobbys.length)
					}
				}
			}
		</script>
		<input type="checkbox" name="mybox" id="mybox" value="0" />全选
		<br>
		<input type="checkbox" name="hobby" id="" value="1" />1
		<br>
		<input type="checkbox" name="hobby" id="" value="2" />2
		<br>
		<input type="checkbox" name="hobby" id="" value="3" />3
		<br>
	</body>
</html>

7.3获取下拉列表的value

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select id="myselect">
			<option value ="1">苹果</option>
			<option value ="2">兔子</option>
		</select>
		<script type="text/javascript">
			window.onload=function(){
				document.getElementById("myselect").onchange=function(){
					console.log(document.getElementById("myselect").value)
				}
			}
		</script>
	</body>
</html>

7.4在网页上实时显示时钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			
			function display(){
				var time=new Date()
				document.getElementById("mydiv").innerHTML=time.toLocaleString();
			}
			window.onload=function(){
				document.getElementById("bt1").onclick=function(){
					can = window.setInterval("display()",1000)
				}
				document.getElementById("bt2").onclick=function(){
					window.clearInterval(can)
				}
			}
		</script>
		<input type="button" name="" id="bt1" value="显示时间" />
		<input type="button" name="" id="bt2" value="停止时间" />
		<div id="mydiv">
			
		</div>
	</body>
</html>

8.BOM

8.1窗口的开启与关闭

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="" id="" value="当前窗口开启,这是默认值" onclick="window.open('http://www.baidu.com','_self')"/>
		<br>
		<input type="button" name="" id="" value="空窗口" onclick="window.open('http://www.baidu.com','_blank')"/>
		<br>
		<input type="button" name="" id="" value="父级窗口" onclick="window.open('http://www.baidu.com','_parent')"/>
		<br>
		<input type="button" name="" id="" value="顶级窗口" onclick="window.open('http://www.baidu.com','_top')"/>
		<br>
		<input type="button" name="" id="" value="跳转至本地的html文件" onclick="window.open('new_file14.html')"/>
	</body>
</html>

new_file14.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			
			function display(){
				var time=new Date()
				document.getElementById("mydiv").innerHTML=time.toLocaleString();
			}
			window.onload=function(){
				document.getElementById("bt1").onclick=function(){
					can = window.setInterval("display()",1000)
				}
				document.getElementById("bt2").onclick=function(){
					window.clearInterval(can)
				}
			}
		</script>
		<input type="button" name="" id="bt1" value="显示时间" />
		<input type="button" name="" id="bt2" value="停止时间" />
		<input type="button" name="" id="" value="跳转回原网页" onclick="window.close()"/>
		<div id="mydiv">
			
		</div>
	</body>
</html>

8.2alert与confirm窗口

考虑到alert已经在前面多次使用,只演示confirm

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload=function(){
				document.getElementById('bt1').onclick=function(){
					if(window.confirm("确实要关闭网页吗,你之前未保存的数据都会丢失"))//也可用变量来接受返回值
					window.close();
				}
			}
		</script>
		<input type="button" name="" id="bt1" value="关闭网页" />
	</body>
</html>

8.3顶级窗口的调换

未调换前顶级窗口对应的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		把小框里的网页调整为顶级窗口
		<iframe src="new_file17.html" width="800px" height="600px"></iframe>
	</body>
</html>

内部窗口的代码,即new_file17.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload=function(){
				document.getElementById('b1').onclick=function(){
					if(window.top.location!=window.self.location)
					window.top.location=window.self.location
				}
			}
		</script>
		<input type="button" name="" id="b1" value="设置为顶级窗口" />
	</body>
</html>

8.4历史记录

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="new_file19.html">点我</a>
		<br>
		<input type="button" name="" id="" value="前进一步" onclick="window.history.go(1)"/>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="" id="" value="back" onclick="window.history.back()"/>
		<!-- go(-1)也可 -->
	</body>
</html>

8.5网页跳转

目前主要的跳转方式有如下几种

超链接
表单action
window.open(url,target)
window.location.href/document.location.href(去掉href也可)

这里演示一下最后一种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="" id="b1" value="点我" onclick="window.location.href='http://www.baidu.com'"/>
		<input type="button" name="" id="b2" value="点我" onclick="document.location.href='http://www.baidu.com'"/>
		<!-- <input type="button" name="" id="b1" value="点我" οnclick="window.location='http://www.baidu.com'"/>
		<input type="button" name="" id="b2" value="点我" οnclick="document.location='http://www.baidu.com'"/>	 -->	
	</body>
</html>

9.JSON

9.1eval函数

eval函数能把字符串当作JavaScript代码解释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			window.eval("alert('这不只是字符串')")
		</script>
	</body>
</html>

网页上会出现提示

9.2 JSON对象的创建与引用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//使用{}标记数组
			var student={
				"name":"rabbit",//可以为任意类型
				"age":12,
				"hobbys":["coder","gamer","sleeper"],//[]标记一个数组,元素也可以是JSON
				"family":{
					"father":"tiger",
					"mother":"sheep"//嵌套的json
				}
				
			}
			//调用时以下两种方法均可
			console.log(student.name)
			console.log(student["name"])
			
			for(var index in student.hobbys)
			console.log(student.hobbys[index])
			
			console.log(student.family.father)
			
		</script>
	</body>
</html>

9.3 JSON对象的获取

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var fromserverstirng="{\"name\":\"rabbit\",\"age\":12}"
			window.eval("var json="+fromserverstirng)
			console.log(json.name+":"+json.age)
		</script>
	</body>
</html>

9.4 表格数据的JSON接受实例

注意json通常要压缩成一行因为字符串不能换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			window.eval("var jsonobj="+"{\"students\":[{\"name\":\"rabbit\",\"ages\":12},{\"name\":\"rs\",\"ages\":13}]}")
		window.onload=function(){
			document.getElementById("b").onclick=function(){
				var string ="";
				for(var index=0;index<jsonobj.students.length;index++)
				{
					string+="<tr>"
					string+="<td>"+(index+1)+"</td>";
					string+="<td>"+jsonobj.students[index].name+"</td>";
					string+="<td>"+jsonobj.students[index].ages+"</td>";
					string+="</tr>"
				}
				document.getElementById("target").innerHTML=string
			}
		}
		</script>
		<input type="button" name="" id="b" value="点我显示数据" /><br />
		<table border="1px" width="50%">
			<tr>
				<th>序号</th>
				<th>名字</th>
				<th>年龄</th>
			</tr>
			<tbody id="target">
				
			</tbody>
		</table>
	</body>
</html>

10.正则表达式

10.1正则的声明和基础语法

正则表达式只要能看懂，会编写一些简单的正则即可,一般情况下复杂的正则都是从网上抄的模板

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//var regexp=/表达式/标记
			//第一种声明方法，常用
			//var regexp=new RegExp("表达式","标记")
			//第二种
			
			/* 常用的标记有
			g:全局 global 
			i:忽略大小写 ignorecase
			gi:上述加一起
			*/
			var regexp= /^[0-9]*$///加上g或者i
			var ok=regexp.test("123456")//匹配字符串,返回ture或者false
			console.log(ok)
			
			//扩展
			var string = "1789.123.45"
			string.replace(/./g,"-")//将所有的.替换为-
			
		</script>
	</body>
</html>

10.2 一个登录界面的实例

注意span和div的文本不是用value来操控的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span{
				font-size: 12;
				color: #FF0000;
			}
			#box{
				width: 500px;
				height: 500px;			
				position: absolute;
				top: 30%;
				left: 45%;
			}
		</style>
	</head>
	<body bgcolor="antiquewhite">
		<script type="text/javascript">
			window.onload=function(){
				var name=document.getElementById("name");
				var alert_name=document.getElementById("alert_name");
				var password=document.getElementById("password");
				var alert_pas=document.getElementById("alert_pas");
				var password_conf=document.getElementById("password_conf");
				var email=document.getElementById("email");
				var alert_email=document.getElementById("alert_email");
				var sub_btn=document.getElementById("sub_btn");
				
				name.onblur=function(){
					if(!name.value)
					alert_name.innerText="❌用户名不能为空";
					else if(name.value.length<4||name.value.length>12)
					alert_name.innerText="❌用户名长度应该在4到12个字符之间";
					else
					alert_name.innerHTML="<font color='green'>✔</font>";
				}
				
				name.onfocus=function(){
					alert_name.innerText="";
				}
				
				password.onblur=function(){
					if(!password.value)
					alert_pas.innerText="❌密码不能为空";
					else if(!(/^[a-zA-Z]\w{5,17}$/.test(password.value)))
					alert_pas.innerText="❌以字母开头，长度在6~18之间，只能包含字母、数字和下划线";
					else
					alert_pas.innerHTML="<font color='green'>✔</font>";
				}
				
				password.onfocus=function(){
					alert_pas.innerText="";
				}
				
				password_conf.onblur=function(){
					if(!password_conf.value)
					alert_pas_conf.innerText="❌确认密码不能为空";
					else if(password_conf.value!=password.value)
					alert_pas_conf.innerText="❌确认密码必须与密码相同";
					else
					alert_pas_conf.innerHTML="<font color='green'>✔</font>";
				}
				
				password_conf.onfocus=function(){
					alert_pas_conf.innerText="";
				}
				
				email.onblur=function(){
					if(!email.value)
					alert_email.innerText="❌邮箱不能为空"
					else if(!(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email.value)))
					alert_email.innerText="❌邮箱格式不正确"
					else
					alert_email.innerHTML="<font color='green'>✔</font>";
				}
				
				email.onfocus=function(){
					email.innerText="";
				}
				
				sub_btn.onclick=function(){
					name.onblur();
					password.onblur();
					password_conf.onblur();
					email.onblur();

					if(alert_name.innerText=="✔"&&alert_pas.innerText=="✔"&&alert_pas_conf.innerText=="✔"&&alert_email.innerText=="✔")
					document.getElementById("myform").submit();
					
				}
			}
		</script>
		<div  height="200px" style="">
		</div>
		<div id="box">
			
		<form action="192.168.0.1" id="myform">
		用 户 名 : <input type="text" name="name" id="name"  />
		<span id="alert_name"></span>
		<br>
		<br>
		密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码 : <input type="password" name="password" id="password"/>
		<span id="alert_pas"> </span>
		<br>
		<br>
		确认密码:<input type="password" id="password_conf" value="" />
		<span id="alert_pas_conf"> </span>
		<br>
		<br>
		邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱 : <input type="text" name="email" id="email"/>
		<span id="alert_email"> </span>
		<br>
		<br>
		           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" id="sub_btn" value="提交" />
		</form>
		</div>
	</body>
</html>

那就叫我兔子吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记

JavaScript学习笔记1.嵌入js的方式1.1事件句柄写入js<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="button" value="提示" onclick='window.alert("hello") alert("hel
复制链接

扫一扫