Javacpt网页制作代码总结和解释做的笔记为后期复习用

原始数据类型(基本数据类型)

1. number:数字类型。 整数/小数/NaN(not a number 一个不是数字的数字类型)

2. string:字符串类型。 字符串 “baidaguo”

3. boolean: 有true和false两种情况

4. null:空位占位符

5. undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined

声明变量的关键字:var

语法:var 变量名称;

var myCompany; //声明变量

myCompany='开课吧';//赋值

var x=5;//声明的同时赋值

var y=6;

var z=x+y;//变量也可以存储表达式

var userId:

userId:在电子邮件地址中@符号之前的名称;

function printMessage():要打印消息

document.write(message); :写(消息)

var:定义,用于定义变量。例:计算机语言中的varPascal: var Pascal 作为程序的保留字,用于定义变量。 如:var a:integer;(定义变量a,类型为整数) var u:array[1..100]of integer;(定义数组u下标1100,数组单元类型为整数)。

userid:在电子邮件地址中@符号之前的名称;

printMessage:打印消息的,

document:对象的

message:消息,报告,预告

变量的命名规则:

变量必须以字母开头
变量也能以 $ _ 符号开头
变量名称对大小写敏感(y Y 是不同的变量) 不能使用关键字保留字

变量的命名规范:

见名知意 。例如:breadPirce,userService等,避免无意义的a,b,c
推荐驼峰命名法,即第一个单词的首字母小写,以后每个单词的首字母大写。例如lastName
 

字符串String:

字符串是存储字符的变量。字符串可以是引号中的任意文本。必须使用单引号或双引号;

var myCompany; //声明变量

myCompany='开课吧'; //赋值

var x=5;//声明的同时赋值
var y=6;
var z=x+y;//
变量也可以存储表达式
var gameName="英雄联盟";
var hairstylist='tony'; //
说明下:注意引号嵌套
var message1='我的发型师是"tony"老师'; 
var message2="
我的发型师是'tony'老师";

布尔Boolean

只能有两个值:true false

var isUnderstand = true;
var isSingle = false;

Understand::理解;懂得;获悉;推断;省略

Single:仅有的,单精度浮点型

myCompany:我的企业

空Null:

var email = null;

未定义Undefined
表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。
共有下面这几种情况会出现undefined的值。

  • 变量声明且没有赋值

var obj; 
alert(obj);//obj
值为undefined

  • 获取对象中不存在的属性时

var obj;
alert(obj.name);//
报错信息: "Uncaught TypeError: Cannot read property 'name' of undefined"

  •  函数需要实参,但是调用时没有传值,形参是undefined;
  •  函数调用没有返回值或者return后没有数据,接收函数返回的变量是undefined

 function printNum(num){
    alert(num);
}
var result=printNum();//
调用函数未传递参数,执行函数的时候num的值是undefined alert(result);
//result
的值也是undefined,因为printNum()没有返回值

引用数据类型

对象(Object)、数组(Array)、函数(Function),后续章节详细介绍。

JavaScript拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类。

var param; // param类型为 undefined 
param = 5; //
现在 param 为数字
param = "John"; // 现在 param 为字符串

解释:虽然JavaScript支持这种写法,但是我不推荐这种写法。大家尽量开始声明变量的时候就确定好将要 盛放什么类型的值,以后尽量不随意改变。

JavaScript中的运算符:

运算符类型

符号

算数运算符

±* /%++

赋值运算符

:= +=-=*= /=%=

字符串的连接符

+

逻辑运算符

&&

条件运算符

?:

比较运算符

== !=> < >= <=

比较特殊的运算符:

比较运算符
< >= <= == ===(全等于)
* 比较方式
1. 类型相同:直接比较
* 字符串:按照字典顺序比较。按位逐一比较,直到得出大小为止。
2. 类型不同:先进行类型转换,再比较
* ===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false

比较运算的

描述

===

绝对等于(值和类型均相等)

!==

不绝对等于(值和类型有一个不相等,或两个都不相等)

var x=5;
var  res=(x===5); // true
res=(x==='5');// false
res=(x!==5); // false
res=(x!=='5');// true

一元运算符:只有一个运算数的运算符
++-- +(正号)
* ++ --: 自增(自减)
* ++(–) 在前,先自增(自减),再运算
* ++(–) 在后,先运算,再自增(自减)
* +(-):正负号
* 注意:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换
* 其他类型转number
* stringnumber:按照字面值转换。如果字面值不是数字,则转为NaN(不是数字的数字)
* booleannumbertrue转为1false转为0

算数运算符:

1.	
<script type="text/javascript">
2.	var a;
3.	a=1+2;
4.	document.write("a="+a+"<br>");
5.	a=1+null;
6.	document.write("a="+a+"<br>");
7.	a=1+NaN;
8.	document.write("a="+a+"<br>");
9.	a=true+false;                                                              
10.	document.write("a="+a+"<br>");
11.	a=true+4;
12.	document.write("a="+a+"<br>");
13.	a="3"+2+1;
14.	document.write("a="+a+"<br>");
15.	a=1+2+"3";
16.	document.write("a="+a+"<br>");
17.	</script>

答案如下的:

a=3

a=1

a=NaN

a=1

a=5

a=321

a=33

  赋值运算符
= += -+…

逻辑运算符
    && || !
*
其他类型转boolean
1. number0NaN为假,其他为真
2. string:除了空字符串(“”),其他都是true
3. null&undefined:
都是false
4.
对象:所有对象都为true

注意:1)任何类型的数值进行两次非运算都能转换成布尔型;
2)逻辑&&运算如果第一个是true则输出结果是第二个,如果第一个是false则输出结果是第一个;(因为有短路现象);
3)逻辑||运算如果第一个是true则输出结果是第一个,如果第一个是false则输出是第二个。(因为有短路现象)。

String对象属性长度属性:

var str="我喜欢看NBA,最喜欢的球员为\'农村人\'库里"; //注意:字符串中出现的\'是一个字符,转义为一个单引号 
console.log(str); //
获取字符串的长度:,切记:所有转移符号的长度都算一个,即\'长度为
console.log("
字符串的长度="+str.length);//23

Array 对象用于在变量中存储多个值,也就是数组

声明数组的:

数组的长度 length属性:

1.	var nameArr=["宝玉","黛玉","湘云"];
2.	var len=nameArr.length; //获取数组的长度,因为是属所以不是length()

创建日期对象:

var date1 = new Date();
var date2 = new Date(milliseconds);
var date3 = new Date(dateString);
var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);

日期对象的常用方法:

方法                  描述

getDate()                  从 Date对象返回一个月中的某一天 (1 ~ 31)

getDay()          从 Date对象返回一周中的某一天 (0 ~ 6)

getFullYear()        从 Date对象以四位数字返回年份

getHours()            返回 Date对象的小时 (0 ~ 23)

getMinutes()       返回 Date对象的分钟 (0 ~ 59)

getMonth()          从 Date对象返回月份 (0 ~ 11)

getSeconds()        返回 Date对象的秒数 (0 ~ 59)

setDate()         设置 Date对象中月的某一天 (1 ~ 31)

setFullYear()         设置 Date  对象中的年份(四位数字)

setHours()            设置 Date对象中的小时 (0 ~ 23)

setMinutes()        设置 Date对象中的分钟 (0 ~ 59)

setSeconds()         设置 Date对象中的秒钟 (0 ~ 59)

setMonth()           设置 Date对象中月份 (0 ~ 11)

Math常用属性:

var pi=Math.PI;//返回圆周率

Math常用方法:

var num=Math.random();// 返回 0 ~ 1 之间的随机数。 
var max=Math.max(12,34,-90,9);//
返回 n个数值中的最大值。
var min=Math.min(12,34,-90,9);//返回 n个数值中的最小值。

avaScript的常用全局函数
JavaScript中有个常用的全局属性NaN,即非数值(Not a Number)NaN 属性用于引用特殊的非数字 值,该属性指定的并不是不合法的数字

isNaN(param)

用于检查其参数是否是非数值字
是数值的返回false,不是数值返回true
 

console.log(isNaN(666));//false
console.log(isNaN(1+2));//false
console.log(isNaN("hello"));//true

parseFloat(String)

可解析一个字符串,并返回一个浮点数。该函数指定字符串中的首个字符是否是数字。如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。

console.log(parseFloat("66"));//66 
console.log(parseFloat("199.99"));//199.99 
console.log(parseFloat("1024 2048 4096"));//1024 
console.log(parseFloat(" 128 "));//128 
console.log(parseFloat("10
"));//10 
console.log(parseFloat("
今天是8"));//NaN

  • 字符串中只返回第一个数字。
  • 开头和结尾的空格是允许的。
  • 如果字符串的第一个字符不能被转换为数字,那么 parseFloat() 会返回 NaN

parseInt(string,radix)

可解析一个字符串,并返回一个整数

参数

描述

string

必需,要被解析的字符串。

radix

可选,表示要解析的数字的基数。该值介于 2 ~ 36 之间

当参数 radix 的值为 0,或没有设置该参数时,parseInt() 会根据 string 来判断数字的基数。
当忽略参数 radix , JavaScript 默认数字的基数如下:

  • 如果 string “0x” 开头,parseInt() 会把 string 的其余部分解析为十六进制的整数
  • 如果 string 0 开头,那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进 制或十六进制的数字
  • 如果 string 1 ~ 9 的数字开头,parseInt() 将把它解析为十进制的整数。

  • 只有字符串中的第一个数字会被返回。
  • 开头和结尾的空格是允许的。
  • 如果字符串的第一个字符不能被转换为数字,那么 parseInt() 会返回 NaN。 在字符串以"0"为开始时旧的浏览器默认使用八进制基数。ECMAScript 5,默认的是十进制 的基数。
  • 使用function关键字定义函数
•	function 自定义函数名称(参数列表){
     //函数体
}

Function:函数(方法)对象:

1.	创建:
1. var fun = new Function(形式参数列表,方法体); //忘掉吧
2.
function 方法名称(形式参数列表){
方法体
}
3.
var 方法名 = function(形式参数列表){
方法体
}

BOM:Browser Object Model,中文浏览器对象模型。

window对象属性:

属性         描述

document         对 Document 对象的只读引用

history          对 History 对象的只读引用

location        用于窗口或框架的 Location 对象

name           设置或返回窗口的名称

history对象

window.history 对象包含浏览器的历史。
window.history对象在编写时可不使用 window 这个前缀。

常用方法:

  • history.back() - 与在浏览器点击后退按钮相同
  • history.forward() - 与在浏览器中点击向前按钮相同
  • history.go(1/-1)
    参数为1:等同于 history.forward()
    参数为-1,等同于 history.back()
<a href="javascript:window.history.forward()">前进</a> 
<a href="javascript:window.history.back()">后退</a>
<a href="javascript:window.history.go(1)">前进go</a> 
<a href="javascript:window.history.go(-1)">后退go</a>

location对象

window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

常用属性和方法:

  • window.location 对象在编写时可不使用 window 这个前缀。
  • href 当前窗口正在浏览的网页地址
  • replace(url) 转向到url网页地址
  • reload() 重新载入当前网址,如同按下刷新按钮
<a href="javascript:alert(window.location.href)">获取当前页面的URL地址</a>
<a href="javascript:window.location.reload()">刷新</a><br />
<a href="javascript:window.location.replace('index.html')">跳转到index</a><br />
<a href="javascript:location.replace('https://www.baidu.com')">跳转到百度</a><br />

Window对象方法:

方法            描述

alert()          显示带有一段消息和一个确认按钮的警告框

confirm()     显示带有一段消息以及确认按钮和取消按钮的对话框

prompt()     显示可提示用户输入的对话框

open()          设置或返回窗口的名称

close()         打开一个新的浏览器窗口或查找一个已命名的窗口

setTimeout()        关闭浏览器窗口

setInterval()         在指定的毫秒数后调用函数或计算表达式

clearInterval()     取消由 setInterval() 设置的 timeout

clearTimeout()       取消由 setTimeout() 方法设置的 timeout

弹框案例好:


1.	
<script>
2.		//window对象常用的弹框方法
3.		//1、基本弹框
4.		window.alert("只有一个确定按钮的对话框"); 
5.		//2、对话框:有确定和取消两个看你,点击确定返回true,点击取消返回false 
6.		var res=window.confirm("确认要关闭吗?");
7.		if(res){
8.			alert("点击了确定按钮"); 
9.		}else{
10.			alert("点击取消按钮"); 
11.		}
12.		//3、输入框:prompt(提示信息,默认值) 
13.		var age=prompt("请输入年龄:",19);
14.		alert("输入的年龄信息是:"+age);
15.	</script>

定时器案例:


1.	
<div id="today1"> 
2.		div--显示时间1
3.	</div>
4.	<a href="javascript:window.clearInterval(flag1)">停止定时器clearInterval</a> 
5.	<div id="today2">
6.		div--显示时间2 
7.	</div>
8.	<a href="javascript:window.clearTimeout(flag2)">停止定时器clearTimeout</a> 
9.	<script>
10.		function showTime1(){
11.		  	var time=new Date();
12.	        var y=time.getFullYear();
13.	        var mon=time.getMonth();
14.	        var d=time.getDate();
15.			var h=time.getHours();
16.			var m=time.getMinutes();
17.			var s=time.getSeconds(); 			
18.			document.getElementById("today1").innerHTML=y+"年"+mon+"月"+d+"日
19.	"+h+":"+m+":"+s;
20.	    }
21.		//定时器setInterval(定时调用的函数,时间间隔毫秒)
22.	    var flag1=window.setInterval("showTime1()",1000);
23.	</script>
24.	<script>
25.	    function showTime2(){
26.	        var time=new Date();
27.	        var y=time.getFullYear();
28.	        var mon=time.getMonth();
29.	        var d=time.getDate();
30.	        
31.	        var h=time.getHours();
32.	        var m=time.getMinutes();
33.	        var s=time.getSeconds();
34.	        
35.			document.getElementById("today2").innerHTML=y+"年"+mon+"月"+d+"日 "+h+":"+m+":"+s;
36.	        flag2=window.setTimeout("showTime2()",1000);
37.	    }
38.		//在指定的毫秒数后调用函数或计算表达式。
39.	    var flag2=window.setTimeout("showTime2()",1000);
40.	</script>

常用的HTML事件:

事件                 描述

Onchange             HTML 元素改变

onclick              用户点击 HTML 元素

onmouseover      用户在一个HTML元素上移动鼠标

onmouseout        用户从一个HTML元素上移开鼠标

onkeydown           用户按下键盘按键

onload              浏览器已完成页面的加载

onfocus            元素获取焦点时触发

onblur               元素失去焦点时触发

1.	
<script>
2.		function fun1(){
3.			alert('选择的内容发生了变化');
4.	    }
5.	    
6.	    function fun2(){
7.			alert("触发了单击事件"); 
8.		}
9.		
10.		function fun3() {
11.		 	document.getElementById("btn").innerHTML="鼠标移动到按钮上了";
12.	    }
13.	    
14.	    function fun4() {
15.			document.getElementById("btn").innerHTML="点击我试试"; 
16.		}
17.		
18.		function fun5() { 
19.			alert("键盘按下了");
20.	    }
21.	    
22.	    function fun6() {
23.			alert("获取到了焦点");
24.		}
25.		
26.		function fun7() { 
27.			alert("input失去了焦点");
28.	    }
29.	    
30.	    function myLoad(){
31.			alert("页面加载完毕"); 
32.		}
33.	</script>
34.	    <body onload="myLoad()">
35.	        <input id="userName" onkeydown="fun5()" onfocus="fun6()" onblur="fun7()"/>
36.	        <input id="password" type="password" />
37.	        <button id="btn" type="button" onclick="fun2()"  
38.			onmouseover="fun3()" onmouseout="fun4()">点击我试试</button>
39.			
40.			<select id="month" onchange="fun1()"> 
41.				<option>1月份</option> 
42.				<option>2月份</option>
43.		    </select>
44.		</body>
45.	后面需要补充的

DOM:Document Object Model,文档对象模型

查找 HTML 元素常用方法:

document.getElementById()                 返回对拥有指定 id 的第一个对象的引用。

document.getElementsByClassName()                      返回文档中所有指定类名的元素集合,作为 NodeList 对象

document.getElementsByTagName()           返回带有指定标签名的对象集合

document.getElementsByName()            返回带有指定名称的对象集合

function myLoad():

console.log:

getElementsByName:

demo:

myLoad():

length:

修改 HTML 内容的最简单的方法是使用 innerHTML 属性

修改 HTML 元素的内容的语法:

document.getElementById(id).innerHTML= HTML。

修改 HTML 属性:

1.	修改 HTML 元素属性的语法: 
2.	方式1:
3.	document.getElementById(id).attribute=新属性值;
4.	 
5.	方式2:
6.	document.getElementById(id).setAttribute(属性名,属性值);
1.	<div id="mydiv">div</div>
2.	var mydiv=document.getElementById("mydiv"); 
3.	mydiv.innerHTML="新的div内容"; document.getElementById("myimg").src="x1.jpg";
4.	 
5.	<h1 style="color: green;" id="myh1">hello world</h1> var h1=document.getElementById("myh1"); h1.setAttribute("class","bg");//设置属性 
6.	console.log(h1.getAttribute("class"));//获取属性class 
7.	console.log(h1.getAttribute("style"));//获取属性style

修改 HTML 元素的css

修改 HTML 元素css的语法:
document.getElementById(id).style.property=
新样式

1.	document.getElementById("myli").style.color="blue"; 
2.	document.getElementById("myli").style.fontFamily="微软雅黑"; 
3.	document.getElementById("myli").style.fontSize="30px";

替换 HTML 元素

-replaceChild()方法

1.	
<div id="div1">
2.		<p id="p1">这是一个段落。</p>
3.		<p id="p2">这是另外一个段落。</p>
4.	</div>
5.	<button type="button" onclick="changeElemnt()">替换p1</button> <script>
6.		function changeElemnt(){
7.			var newElementP=document.createElement("p");//创建一个新的段落元素
8.			var text=document.createTextNode("这是我新创建的段落p");//新创建的文本节点 //将文本的节点添加到新创建的元素中
9.			newElementP.appendChild(text);
10.	//获取要被替换的元素p1及其父元素div
11.			var div=document.getElementById("div1");
12.			var p1=document.getElementById("p1");
13.	//将div中的元素p1替换为新创建的元素
14.			div.replaceChild(newElementP,p1);
15.		}
16.	</script>

删除HTML元素

-removeChild()方法:

1.	<div id="div1">
2.		<p id="p1">这是一个段落。</p>
3.		<p id="p2">这是另外一个段落。</p>
4.	</div>
5.	<button type="button" onclick="deleteElement()">删除p1-方式1</button> <button type="button" onclick="deleteElement()">删除p1-方式2</button> 
6.	<script>
7.		function deleteElement(){
8.			var div=document.getElementById("div1"); 
9.			var p1=document.getElementById("p1"); //从父元素div中删除子元素p1 div.removeChild(p1);
10.	    }
11.	    function deleteElement2(){
12.			var p1=document.getElementById("p1"); //p1.parentNode:作用就是获取要删除元素p1的父元素div p1.parentNode.removeChild(p1);
13.		}
14.	</script>
15.	这为很好的补充
16.	大家好

表单验证常用事件与属性

表单经常需要做一些非空验证、长度验证、合法性验证等。

1.	<!DOCTYPE html>
2.	<html>
3.	    <head>
4.			<meta charset="UTF-8"> 
5.			<title>表单验证</title> 
6.			<script>
7.				function validateName(){
8.	//所有的表单项元素都value属性
9.					var name=document.getElementById("userName").value; 
10.					var msg=document.getElementById("nameMsg"); 		
11.					if(name==null || name ==""){
12.						msg.innerHTML="用户名不能为空!"; 		
13.						msg.style.color="red";
14.						return false;
15.					} else if(name.length<6){ 
16.						msg.innerHTML="用户名长度必须为大于6的!"; 	
17.						msg.style.color="red";
18.						return false;
19.					}
20.				 	msg.innerHTML="用户名可用"; msg.style.color="green"; 
21.				 	return true;
22.	}
23.	            function validatePwd(){
24.	                var password1=document.getElementById("password1").value;
25.	                var msg=document.getElementById("pwdMsg1");
26.	                if(password1==null || password1 ==""){
27.						msg.innerHTML="密码不能为空!"; msg.style.color="red";
28.						return false;
29.					} else if(password1.length<8){ 
30.						msg.innerHTML="密码的长度必须为大于8的!"; 		
31.						msg.style.color="red";
32.						return false;
33.					}
34.					msg.innerHTML="密码合法"; msg.style.color="green"; 
35.					return true;
36.	            }
37.	            
38.	            function confirmPwd(){
39.	                var pwd1=document.getElementById("password1").value;
40.	                var pwd2=document.getElementById("password2").value;
41.	                var msg=document.getElementById("pwdMsg2");
42.	                if(pwd1!=pwd2){
43.						msg.innerHTML="两次输入的密码不一致!";
44.						msg.style.color="red";
45.	                    return false;
46.	                }
47.					msg.innerHTML="两次输入的密码一致"; 		
48.					msg.style.color="green";
49.					return true;
50.				}
51.				
52.	            function validateGender(){
53.	                var gender=document.getElementById("gender").value;
54.	                if(gender==-1){
55.						alert("性别为必选项!");
56.	                    return false;
57.	                }
58.	                return true;
59.	            }
60.	            function register(){
61.	                return validateName()&&validatePwd()&&confirmPwd()&&validateGender();
62.	            }
63.	        </script>
64.	    </head>
65.	<body>
66.		<h1>英雄会注册</h1>
67.		<form action="提交.html" method="get" onsubmit="return register()">
68.			*用户名:<input type="text" id="userName" placeholder="请输入用户名" onblur="validateName()" />
69.			<span id="nameMsg">用户名长度至少6位</span><br />
70.		*密码:<input type="password" id="password1" placeholder="请输入密码" onblur="validatePwd()"/>
71.			<span id="pwdMsg1">密码长度至少8位</span><br />
72.		*确认密码:<input type="password" id="password2" placeholder="请确认密 码" onblur="confirmPwd()" />
73.			<span id="pwdMsg2">确认密码与密码一致</span><br /> 
74.		*性别:<select id="gender">
75.				<option value="-1">请选择性别</option>
76.				<option value="0">女</option>
77.				<option value="1">男</option>
78.			</select><br /><br />
79.		<button type="submit">注册</button>
80.		<button type="reset">重置</button>
81.	        </form>
82.	    </body>
83.	</html>

JavaScript的 RegExp 对象:

RegExp:是正则表达式(regular expression)的简写。

正则表达式(英语:Regular Expression,在代码中常简写为regexregexpRE)使用单个字符串来 描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。

语法:

1.	var reg=new RegExp(/正则表达式主体/,修饰符(可选)); 或更简单的方法
2.	var reg=/正则表达式主体/修饰符(可选);
3.	 
4.	案例:
5.	var reg=new RegExp(/kaikeba/i);
6.	var reg = /kaikeba/i; //此处定义了一个一个正则表达式。 kaikeba 是一个正则表达式主体 (用于检索)。
7.	i 是一个修饰符 (搜索不区分大小写)。

修饰符:

修饰符

描述

i

执行对大小写不敏感的匹配

g

执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)

m

执行多行匹配

正则表达式模式

方括号用于查找某个范围内的字符:

表达式

描述

[a-z]

查找方括号之间的任何字符

[0-9]

查找任何从 0 9 的数字

(xIy)

查找任何以 I 分隔的选项

元字符是拥有特殊含义的字符:

元字符

描述

\d

查找数字

\s

查找空白字符

\b

匹配单词边界

\uxxxx

查找以十六进制数 xxxx 规定的 Unicode 字符

量词

描述

n+

匹配任何包含至少一个 n 的字符串

n*

匹配任何包含零个或多个 n 的字符串

n?

匹配任何包含零个或一个 n 的字符串

正则表达式的方法test(str)

test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false

1.	var reg = /budingCode/i;
2.	var res=reg.test("欢迎关注budingCode"); 
3.	console.log(res);//true
4.	 
5.	var reg = /^[a-zA-Z]+[\u4e00-\u9fa5]*[0-9]$/; 
6.	var str="a公司拼音为9";
7.	var res=reg.test(str); console.log(res);//true 
8.	console.log(reg.test("a你好239"));//false

常用的正则表达式校验案例:

1.	<script> 
2.		/*检查输入的身份证号是否正确*/ 
3.		function checkCard(str) {
4.			/*15位数身份证正则表达式:
5.			* 编码规则顺序从左至右依次为6位数字地址码,6位数字出生年份后两位及日期,3位数字顺序
6.			[1-9]\d{5} 						前六位地区,非0打头
7.			\d{2}							出生年份后两位00-99
8.			((0[1-9])|(10|11|12))			01-12月
9.			(([0-2][1-9])|10|20|30|31)		01-31天
10.			\d{3}							顺序码三位,没有校验码
11.					*/
12.	        var arg1 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/;
13.	        if (arg1.length == 15 && !arg1.test(arg1)) {
14.	             return false;
15.			}
16.			
17.			/*18位数身份证正则表达式:
18.			* 编码规则顺序从左至右依次为6位数字地址码,6位数字出生年份后两位及日期,3位数字顺序
19.			[1-9]\d{5} 						前六位地区,非0打头
20.			(18|19|([23]\d))\d{2}			出生年份后两位00-99
21.			((0[1-9])|(10|11|12))			01-12月
22.			(([0-2][1-9])|10|20|30|31)		01-31天
23.			\d{3}[0-9Xx]					顺序码三位,+ 一位校验码
24.					*/
25.			var arg2 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
26.			 if (arg2.length == 18 && !arg2.test(sfzhmcode)){
27.	             return false;
28.	         }
29.	        return true;
30.		}
31.	 
32.		/*是否是小数*/
33.		function isDecimal(strValue) {
34.	        var objRegExp = /^\d+\.\d+$/;
35.	        return objRegExp.test(strValue);
36.	    }
37.	    
38.		/*校验是否中文名称组成 */ 
39.		function ischina(str) {
40.	        var reg = /^[\u4E00-\u9FA5]{2,4}$/;
41.	        return reg.test(str);
42.	    }
43.	    
44.		/*校验是否全由8位数字组成 */ 
45.		function isNum(str) {
46.	        var reg = /^[0-9]{8}$/;
47.	        return reg.test(str);
48.	    }
49.	    
50.		/*校验电话码格式 :座机和手机*/ 
51.		function isTelCode(str) {
52.	        var reg = /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/;
53.	        return reg.test(str);
54.	    }
55.	    
56.	    /*校验手机号*/
57.		function isPhoneNum(str) {
58.		//如果你要精确验证手机号码,那个你可以使用第一个正则。这是根据电信,移动,联通目前发行的号码来的。验证比较精确。
59.	        var reg = /^1[3|4|5|7|8][0-9]{9}$/;
60.	// 如果因为现有的号码不能满足市场需求,电信服务商会增大号码范围。所以一般情况下我们 只要验证手机号码为11位,且以1开头。
61.	        var reg = /^^1[0-9]{10}$$/;
62.	        return reg.test(str);
63.	    }
64.	    
65.		/*校验邮件地址是否合法 */ 
66.		function IsEmail(str) {
67.	        var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
68.	        return reg.test(str);
69.	    }
70.	    
71.		/*检查输入的URL地址是否正确 */ 
72.		function checkURL(str) {
73.	        if(str.match(/http(s)?:\/\/[\w.]+[\w\/]*[\w.]*\??[\w=&\+\%]*/i) == null)
74.	            return false;
75.	        } else {
76.	            return true;
77.	        }
78.		}
79.	</script>	

表格的属性和方法:

表格的属性和方法

描述

table.rows

获取表格中的所有行

tr.cells

获取表格中某一行的所有单元格

tr.rowIndex

获取表格中某一行的下标索引(从0开始)

td.cellIndex

获取单元格的下标索引

table.insertRow()

在表格中创建新行,并将行添加到rows集合中

table.deleteRow()

从表格即rows集合中删除指定行

tr.insertCell())

在表格的行中创建新的单元格,并将单元格添加到cells集合中

Array:数组对象(数组类型、长度可变):

https://blog.csdn.net/weixin_45735355/article/details/119037197

创建:
1. var arr = new Array(元素列表);
2. var arr = new Array(
默认长度);
3. var arr = [
元素列表];

方法:
join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push() 向数组的末尾添加一个或更多元素,并返回新的长度。

属性:
var nameArr=[“宝玉”,“黛玉”,“湘云”];
var len=nameArr.length; //
获取数组的长度,因为是属所以不是length()

日期对象的

创建日期对象:
var date1 = new Date();
var date2 = new Date(milliseconds);
var date3 = new Date(dateString);
var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);

日期对象方法:
toLocaleString():返回当前date对象对应的时间本地字符串格式
getTime():获取毫秒值。返回当前如期对象描述的时间到197011日零点的毫秒值差

数学对象的

创建:
var num=Math.random();// 返回 0 ~ 1 之间的随机数。
var max=Math.max(12,34,-90,9);//返回 n个数值中的最大值。
var min=Math.min(12,34,-90,9);//返回 n个数值中的最小值。

方法:
random():返回 0 ~ 1 之间的随机数。 0不含1
ceil(x)
:对数进行上舍入。
floor(x):对数进行下舍入。
round(x):把数四舍五入为最接近的整数。
Math常用属性:
var pi=Math.PI;//返回圆周率

RegExp:正则表达式对象

正则表达式:使用单个字符串来 描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换
1. 单个字符:[]
如: [a] [ab] [a-zA-Z0-9_]
*
特殊符号代表特殊含义的单个字符:
\d:
单个数字字符 [0-9]
\w:
单个单词字符[a-zA-Z0-9_]
2.
量词符号:
?:表示出现0次或1
*:表示出现0次或多次
+:出现1次或多次
{m,n}:表示 m<= 数量 <= n
* m
如果缺省: {,n}:最多n
* n如果缺省:{m,} 最少m
3. 开始结束符号
* ^:开始
* $:结束

正则对象的:

1. 创建:
1. var reg = new RegExp(“正则表达式”);
2. var reg = /
正则表达式/;

2. 方法:
test(参数):验证指定的字符串是否符合正则定义的规范
语法
var reg=new RegExp(/正则表达式主体/,修饰符(可选)); 或更简单的方法
var reg=/正则表达式主体/修饰符(可选);

常用HTML事件:

事件 描述    
onchange            HTML
元素改变
onclick                用户点击 HTML 元素
onmouseover     用户在一个HTML元素上移动鼠标
onmouseout       用户从一个HTML元素上移开鼠标
onkeydown         用户按下键盘按键
onload               浏览器已完成页面的加载
onfocus             元素获取焦点时触发
onblur                元素失去焦点时触发


1.	
<body>
2.				<img id="light" src="img/off.gif"  onclick="fun();">
3.				<img id="light2" src="img/off.gif">			
4.				<script>
5.				    function fun(){
6.				        alert('我被点了');
7.				        alert('我又被点了');
8.				    }			
9.				    function fun2(){
10.				        alert('咋老点我?');
11.				    }			
12.				    //1.获取light2对象
13.				    var light2 = document.getElementById("light2");
14.				    //2.绑定事件
15.				    light2.onclick = fun2;
16.				    </script>
17.			</body>
18.	* 案例1:电灯开关
19.		<!DOCTYPE html>
20.		<html lang="en">
21.		<head>
22.		    <meta charset="UTF-8">
23.		    <title>电灯开关</title>	
24.		</head>
25.		<body>
26.		<img id="light" src="img/off.gif">
27.		<script>
28.		    /*
29.		        分析:
30.		            1.获取图片对象
31.		            2.绑定单击事件
32.		            3.每次点击切换图片
33.		                * 规则:
34.		                    * 如果灯是开的 on,切换图片为 off
35.		                    * 如果灯是关的 off,切换图片为 on
36.		                * 使用标记flag来完成	
37.		     */
38.		    //1.获取图片对象
39.		    var light = document.getElementById("light");
40.		    var flag = false;//代表灯是灭的。 off图片
41.		    //2.绑定单击事件
42.		    light.onclick = function(){
43.		        if(flag){//判断如果灯是开的,则灭掉
44.		            light.src = "img/off.gif";
45.		            flag = false;
46.		        }else{
47.		            //如果灯是灭的,则打开
48.		            light.src = "img/on.gif";
49.		            flag = true;
50.		        }
51.		       }
52.		</script>
53.		</body>
54.		</html>

效果展示为:黄色和白色的灯泡。

BOM(Browser Object Model,中文浏览器对象模型):

Window:窗口对象的

1.   创建的


2.   方法的


      与弹出框有关的方法:
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮,则方法返回true
*
如果用户点击取消按钮,则方法返回false
prompt()
显示可提示用户输入的对话框。
* 返回值:获取用户输入的值


      与打开关闭有关的方法:
close() 关闭浏览器窗口。
* 谁调用我 ,我关谁
open() 打开一个新的浏览器窗口
* 返回新的Window对象


    与定时器有关的方法::
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 参数:
1. js代码或者方法对象
2. 毫秒值
* 返回值:唯一标识,用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout

3.  属性:
1. 获取其他BOM对象:
history
location:地方; 地点; 定位

Navigator
Screen

4.   获取DOM对象
document

5.   特点
* Window对象不需要创建可以直接使用 window使用。 window.方法名();
* window
引用可以省略。 方法名();

Location:地址栏对象

  1. 创建(获取)
    1. window.location
    2. location
  2. 方法:
    * reload() 重新加载当前文档。刷新
  3. 属性
    * href 设置或返回完整的 URL

History:历史记录对象

创建(获取)
1. window.history
2. history

方法:
* back() 加载 history 列表中的前一个 URL
* forward() 加载 history 列表中的下一个 URL
* go(参数) 加载 history 列表中的某个具体页面。
* 参数:
* 正数:前进几个历史记录
* 负数:后退几个历史记录


属性:
* length 返回当前窗口历史列表中的 URL 数量。

DOM

  • 概念: Document Object Model 文档对象模型
    * 将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作;

W3C DOM 标准被分为 3 个不同的部分:


* 核心 DOM - 针对任何结构化文档的标准模型
* Document:文档对象
* Element:元素对象
* Attribute:属性对象
* Text:文本对象
* Comment:注释对象
* Node:节点对象,其他5个的父对象


* XML DOM - 针对 XML 文档的标准模型


* HTML DOM - 针对 HTML 文档的标准模型

核心DOM模型:
* Document:文档对象


创建(获取)html dom模型中可以使用window对象来获取
1. window.document
2. document

方法:
获取Element对象:
1. getElementById() 根据id属性值获取元素对象。id属性值一般唯一
2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
创建其他DOM对象:
createAttribute(name)
createComment()
createElement()
createTextNode()

属性
Element:元素对象
获取/创建:通过document来获取和创建
方法:
1. removeAttribute():删除属性
2. setAttribute():设置属性
* Node:节点对象,其他5个的父对象
* 特点:所有dom对象都可以被认为是一个节点
* 方法:
* CRUD dom树:
* appendChild():向节点的子节点列表的结尾添加新的子节点。
* removeChild() :删除(并返回)当前节点的指定子节点。
* replaceChild():用新节点替换一个子节点。
* 属性:
* parentNode 返回节点的父节点。

HTML DOM
标签体的设置和获取:innerHTML
使用html元素对象的属性
控制元素样式
1. 使用元素的style属性来设置
如:
//修改样式方式1
div1.style.border = “1px solid red”;
div1.style.width = “200px”;
//font-size–> fontSize
div1.style.fontSize = “20px”;
2.
提前定义好类选择器的样式,通过元素的className属性来设置其class属性值。

事件监听机制

概念:某些组件被执行了某些操作后,触发某些代码的执行。
* 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
* 事件源:组件。如: 按钮 文本输入框
*
监听器:代码。
* 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。

常见的事件:
点击事件:
1. onclick:单击事件
2. ondblclick:双击事件
焦点事件
1. onblur:失去焦点
2. onfocus:元素获得焦点。
加载事件:
1. onload:一张页面或一幅图像完成加载。
鼠标事件:
1. onmousedown 鼠标按钮被按下。
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
键盘事件:
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
选择和改变
1. onchange 域的内容被改变。
2. onselect 文本被选中。
表单事件:
1. onsubmit 确认按钮被点击。
2. onreset 重置按钮被点击。

本人根据链接的原作者总结了Javacpt中的常用的代码解释,另外还参照白大锅等的文章,在此并感谢提供的好文!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值