JavaScript学习笔记

JavaScript

JavaScript包括三大块：

ECMAScript：js的核心语法（ES规范/ECMA-262标准）

DOM：Document Object Model（文档对象模型：对网页当中的结点进行增删改的过程。）HTML文档被当做一颗DOM树来对待。

例如 var domObj =document.getElementById("id");

BOM：Browser Object Model（浏览器对象模型）

例如：关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的地址等都是BOM编程

DOM和BOM的联系与区别：

BOM的顶级对象是：window

DOM的顶级对象是：document

实际上BOM是包括DOM的。

ECMAscript

JavaScript：是运行在浏览器上的脚本语言，简称JS。JS的出现让浏览器更加的生动了，不再是单纯的静态页面了，页面更具有交互性。

JS和Java没有任何关系，只是语法上有点类似，并且运行位置不同，Java运行在JVM当中，JavaScript运行在浏览器的内存当中。

JavaScript程序不需要程序员手动编译，编写完源代码之后，浏览器直接打开解释执行。换句话说就是JavaScript的目标程序以普通文本形式保存，这种语言都叫做脚本语言

JSP：JavaServer pages （率属于Java预言的，运行在JVM当中）

JS：JavaScript （运行在浏览器上）

HTML嵌入js代码的三种方式

HTML镶入js代码的第一种方式

Js是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对

应的程序。在Js中有很多事件，其中有一一个事件叫做:鼠标单击，单词:

click。 并且任何事件都会对应-一个事件句柄叫做: onclick。 [ 注意:事件

和事件句柄的区别是:事件句柄是在事件单词前添加一一个on。]，而事

件句柄是以HTM标签的属性存在的。

<!doctype html>
<html>
    <head>
        <title>html嵌入js的第一种方式</title>
    </head>
    <body>
        <!--
            对此按钮实现一个功能：
                按下按钮，弹出消息框
            3、onclick="js代码"语句的执行原理：
                页面打开的时候，js代码并不会执行，只是把这段js代码注册到按钮的click事件上了，等这个按钮发生click事件后，注册在onclick后面的js代码就会被浏览器自动调用。
            4、怎么使用JS代码弹出消息框?
                在JS中有一个内置的对象叫做window,全部小写，可以直接拿来使用，window代表的是浏览器对象.
                window对象有一个函数叫做:alert,用法是: window.alert("消 息") ;这样就可以弹窗了。
            5、Js中的字符串可以使用双引号，也可以使用单引号。
            6、JS中的一条语句结束之.后可以使用分号";",也可以不用。
​
        -->
        <!--window.可以省略不写-->
        <input type=button value=按钮1 onclick="window.alert('hello')" />
        <input type=button value=按钮2 onclick="alert('hello')" />
    </body>
</html>

HTML中嵌入js代码的第二种方式：脚本块方式

<!--javascript代码可以出现在任何位置，并且可以出现多次。-->
<!doctype html>
<html>
    <head>
        <title>html嵌入js的第二种方式</title>
    </head>
    <body>
        <input type=button value=按钮1 />
        <!--第二种方式：脚本块的方式-->
        <!--和第一种方式一样，其中window.和；可以省略不写-->
        <script type="text/javascript">
            /*
            这里面的代码是暴露在脚本块当中的程序，在页面打开的时候执行，
            并且遵守自上而下的顺序依次逐行执行，就是说只有执行完这里面的代码
            之后才可以执行后面的代码（这个代码的执行不需要事件）。
            */
            window.alert("hello");
            //alert函数会阻挡当前页面加载，直到用户点击确定按钮。
            alert("我是小明")
        </script>
        <input type=button value=按钮2 />
        <!--
        如该例，页面会先出现按钮1，
        然后script中的代码执行完之后才会出现按钮2。
        -->
    </body>
</html>

js代码中的单行和多行注释格式和java一样。

HTML嵌入js的第三种方式：引入外部独立文件

这种方式是最常用的方式

<!doctype html>
<html>
    <head>
        <title>html中嵌入js的第三种方式</title>
    </head>
    <body>
        <!--
            在需要的位置引入脚本文件，js/1.js为脚本文件目录，
            在脚本文件中写入相关代码。
        -->
        <!--
            引入外部独立的js文件的时候，
            js文件中的代码会遵循自上而下的顺序依次逐行执行
        -->
        <script type="text/javascript" src="js/1.js">
            //如果引入js文件的话，脚本块里面如果写代码将不会执行
        </script>
        <!--
            同一个js文件可以被引用多次，但是实际开发中这种需求很少
        -->
        <!--
            并且不可以这样写，script结束标签必须有
            <script type="text/javascript" src="js/1.js" />
        -->
    </body>
</html>

js文件我这里是在HTML所在的文件夹，新建了一个文件夹，然后写的js文件，

js文件内容：

window.alert('hello 小明');
alert("hello,kangkang");

js中的变量

变量的声明与赋值

JavaScript和java不一样，js是一种弱类型语言，没有编译阶段，因此一个变量可以随意赋值，赋什么类型的值都行。

js声明变量：var 变量名

变量名前面不需要指定类型，后面的值是什么类型，这个变量就是什么类型。

js给变量赋值：变量名 = 值；

并且在js当中，当一个变量没有手动赋值的时候，系统会默认赋值undefined。（undefined是一个具体存在的值）

变量声明了但没赋值，系统自动赋值undefined，变量未声明，出现错误。

函数的定义与调用

js中的函数，等同于java语言中的方法，函数也是一段可以重复利用的代码片段。函数一般都是可以完成某个特定功能的。

js语法格式：

第一种：

function 函数名（形式参数列表）{

函数体；

}

第二种：

函数名=function（形式参数列表）{

函数体；

}

js中的函数不需要指定返回值的类型，返回什么类型都行。

示例：

<!doctype html>
<html>
    <head>
        <title>js中的函数应用</title>
    </head>
    <body>
        <script>
            //第一种方式
            function sum( a, b){
                //a和b都是局部变量，她们都是形参（a，b都是变量名，可以随意起）
                window.alert(a+b);
            }
            //函数必须调用才会执行
            //sum(1,1);
            //第二种方式
            speak=function(){
                alert('hello 小明');
            }
            //speak();
        </script>
        <!--也可以通过事件句柄来调用函数-->
        <input type=button value=speak onclick="speak();" />
        <input type=button value=sum onclick="sum(1,2);" />
    </body>
</html>

在js中，如果两个函数名相同，则在后面的函数将会把前面的函数覆盖掉，相当于重写。因此在js中函数名不能重名。

<!doctype html>
<html>
    <head>
        <title>js当中的函数应用</title>
    </head>
    <body>
        <script>
        /*
            js中的函数在调用的时候，
            参数类型没有限制，
            而且参数个数没有限制（弱类型）
        */
            function sum(a,b){
                return a+b;
            }
            var getValue=sum(1,2);
            window.alert(getValue);
​
            var getValue=sum(1);
            window.alert(getValue);
            //返回NaN，not a number
            
            var getValue=sum('a')
            window.alert(getValue);
            //返回aundefined
            
            var getValue=sum();
            window.alert(getValue);
            //返回NaN，not a number
            
            var getValue=sum(1,2,3);
            window.alert(getValue);
            //输出3，按照前两个计算，直接无视第三个数字。
        </script>
    </body>
</html>

局部变量和全局变量

全局变量:在函数体之外声明的变量属于全局变量，全局变量的生命周期是: 浏览器打开时声明，浏览器关闭时销毁，尽量少用。因为全局变量会一直 在浏览器的内存当中，耗费内存空间。能使用局部变量尽量使用局部变量。

局部变量:在函数体当中声明的变量，包括一个函数的形参都属于局部变量，局部变量的生命周期是:函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放。局部变量生命周期较短。

注意：如果一个变量声明的时候没有用var修饰，那么无论这个变量在哪声明的，他都是全局变量。

<!doctype html>
<html>
    <head>
        <title>js中的局部变量和全局变量</title>
    </head>
    <body>
        <script>
            function getName(){
                //标记1
                name="阿豪";
                window.alert("我叫"+name);
            }
            /*
                因为标记1的name变量没有用var修饰
                所以name是全局变量，
                alert调用函数也会成功，
                如果name用var修饰的话就是局部变量，
                alert会报错。
            */
            getName();
            alert(name);
        </script>
    </body>
</html>

js数据类型

js的变量在声明的时候不需要指定数据类型，但是在赋值时，每一个数据还是有类型的。

js中的数据类型有：原始类型、引用类型。

原始类型：Undefined、Number、String、Boolean、Null

引用类型：Object以及Object的子类。

ES规范（ECMAScript 规范），在ES6之后，又基于以上的六种类型之外添加了一种新的类型：Symbol、

js中有一个运算符叫做typeof，这个运算符可以在程序的运行阶段动态的获取变量的数据类型。

typeof语法格式：

typeof 变量名

typeof运算符的运算结果是以下六个字符串之一：“undefined”、"number"、"string"、“boolean”、“object”、“function”、注意字符串都是小写。

在js中比较两个字符串用“==”，没有equals方法。

<!doctype html>
<html>
    <head>
        <title>js中的typeof的使用</title>
    </head>
    <body>
        <script type="text/javascript">
            function method(a,b){
                if(typeof a=="number" && typeof b=="number"){
                    return a+b;
                }
                else
                    window.alert(a+","+b+"必须为数字");
            }
            var value=method(1,'a');
            /*
                运行结果为先显示1，a必须为数字
                然后在现实undefined，
                因为如果a，b不为数字的话，无返回值
                所以value为undefined。
            */
            alert(value);
            var i;
            alert(typeof i);//"undefined"
​
            var k="abc";
            alert(typeof k);//"string"
​
            var d=null;
            alert(typeof d);//"object"
            //null属于Null类型，但是typeof运行结果为object
​
            var flag=false;
            alert(typeof flag);//"boolean"
            
            var m=1;
            alert(typeof m);//"number"
            
            var obj=new Object();
            alert(typeof obj);//"object"
            
            function sayHello(){
                
            }
            alert(typeof sayHello);//"function"
​
        </script>
    </body>
</html>

 

undefined类型

undefined类型:Undefined类型只有一个值，这个值就是undefined，当一个变量没有手动赋值，系统默认赋值undefined，或者也可以给一个变量手动赋值undefined

Number类型

Number类型：整数、小数、正数、负数、不是数字（NaN）、无穷大、infinity（无穷大，当除数为0的时候结果为无穷大）都属于Number。

infinity：

<!doctype html>
<html>
	<head>
		<title>infinity用法</title>
	</head>
	<body>
		<script type="text/javascript">
			alert(10/0);
		</script>
	</body>
</html>

NaN：（not a number，不是一个数字）属于Number类型，运算结果本来应该是一个数字，最后算完不是数字的时候，结果是NaN。但是一个字符串和一个数字相加，结果是一个字符串。因为字符串和数字相加，加号代表着字符串拼接。

isNaN函数：

用法：isNaN（数据），如果结果为true，则表示不是一个数字，如果结果为false则表示是一个数字。

<!doctype html>
<html>
	<head>
		<title>isNaN用法</title>
	</head>
	<body>
		<script type="text/javascript">
			var m=isNaN("a");
			alert(m);//结果为true
			
			var n=isNaN(10);
			alert(n);//结果为false
		</script>
	</body>
</html>

parseInt（）函数：可以将字符串自动转换为数字，并且取整数位，即舍弃小数点后面的小数位，向下取整。

alert(parseInt("3.999"));   //3
alert(parseInt(3.999));    //3

parseFloat()函数：可以将字符串自动转换为数字。

alert(parseFloat("3.2")+1);   //4.2

Math.ceil（）函数：Math是数学类，数学类中有一个函数叫做ceil（），作用是向上取整。

alert(Math.ceil(2.1));   //3

Boolean类型

if（）语句中，括号里必须是true和false，如果是其他语句，系统会自动给他加上Boolean函数。

Boolean(1); 		//true
Boolean(0); 		//false
Boolean("");  		//false	
Boolean("abc");		//true
Boolean(null);		//false
Boolean(NaN);		//false
Boolean(undefined);	//false
Boolean(Infinity);	//true
//规律：“有”就为true，“没有”就转换为false。

String类型

在JS当中字符串可以使用单引号，也可以使用双引号。

JS当中创建字符串对象有两种方式：

第一种：var s = “abc”；

第二种：（使用JS内置的支持类String）：var s2 = new String（“abc”）；

注意：String是一个内置的类，可以直接用，String的父类是Object。

<!doctype html>
<html>
	<head>
		<title>String数据类型</title>
	</head>
	<body>
		<script type="text/javascript">
            //小string（属于原始数据类型String）
			var s="abc"
			window.alert(typeof s);  //string
            
            //大String（属于Object类型）
			var m=new String("abc");
			window.alert(typeof m);  //object
		</script>
	</body>
</html>

无论是小String还是大String，他们的属性和函数都是通用的。

String类型常用的属性和函数：

常用属性：length 获取字符串长度。

常用函数：

indexOf 获取指定字符串在当前字符串中第一次出现处的索引

lastIndexOf 获取指定字符串在当前字符串中最后一次出现出的索引

replace 替换

substr 截取字字符串

substr(startIndex,length)

substring 截取字字符串

substring(startIndex,endIndex),包含头不包含尾

toLowerCase 转换小写

toUpperCase 转换大写

split 拆分字符串

<!doctype html>
<html>
	<head>
		<title>String函数和属性</title>
	</head>
	<body>
		<script type="text/javascript">
			var s1="abc"
			
			//获取字符串长度
			alert(s1.length); //3
			
			/*
				获取指定字符串在当前字符串第一次出现的位置,
				下标从零开始,如果不存在则显示负数。
			*/
			window.alert("abcdea".indexOf("a"));  //0
			window.alert("abcdea".indexOf("z"));	//-1
			
			//获取指定字符串在当前字符串最后一次出现的位置
			window.alert("aacada".lastIndexOf("a")); //5
			
			//判断一个字符串中时候含有某个字符串
			window.alert("afgafads".indexOf("zz")>0 ? "包含":"不包含");

			//替换某个字符，一次只能替换一个，如果想一次替换全部，则需要使用正则表达式。
			window.alert("hhh%hhh%".replace("%","h"));

			//从某个字符坐标开始截取固定长度的字符串
			//substr(startIndex,length);
			window.alert("abcdef".substr(2,3));		//cde

			//从某个字符下标截取到另一个字符下标获取字符串
			//substring(startIndex,endIndex);,包含头不包含尾
			window.alert("abcdef".substring(2,3));   //c
		</script>
	</body>
</html>

Object类型

Object类型是所有类型的超类，自定义的任何类型，默认继承Object

Object类属性：

prototype属性（常用的）：作用是给类动态的扩展属性和函数。

constructor属性

Object类包含的函数：

toString（）

valueOf（）

toLocaleString（）

在JS当中定义的类默认继承Object，会继承Object类中所有的属性以及函数。所以自己定义的类中也有prototype属性。

在JS中定义类的语法：

第一种：

function 类名（形参）{

 

}

第二种：

类名=function（形参）{

}

创建对象的语法：

new 构造方法名（实参）；//构造方法名和类名一致。

<script type="text/javascript">
    function sayHello(){

    }
    //把sayHello当做一个普通的函数来调用
    sayHello();
    //把sayHello当做一个类来创建对象
    var obj=new sayHello();
    //obj是一个引用，保存内存地址指向堆中的对象
</script>

JS中类的定义，同时又是一个构造函数的定义，在JS中类的定义和构造函数的定义时放在一起完成的。

<!doctype html>
<html>
	<head>
		<title>Object类型练习</title>
	</head>
	<body>
		<script type="text/javascript">
			function user(a,b,c){
				this.id=a;
				this.name=b;
				this.age=c;
			}

			var user1=new user(1,"小明",5);
			alert(user1.id);
			alert(user1.name);
			alert(user1.age);
			//访问对象属性，也可以使用这种语法
			alert(user1["id"]);
			alert(user1["name"]);
			alert(user1["age"]);

			student=function(name,age){
				this.name=name;
				this.age=age;
			}
			var s1=new student("ahao",18);
			alert(s1.name+":"+s1.age);

			//给String扩展一个函数
			String.prototype.method =function(){
				alert("给String类型扩展了一个函数，名字叫做method,method也可以用其他名字代替");
			}
			"abc".method();
		</script>
	</body>
</html>

null NaN undefined三个值的区别

1：数据类型不一样

null：object

NaN：number

undefined：undefined

2：null==undefined，即null和undefined可以等同。

3：在JS当中有两个比较特殊的运算符：

1）：==（等同运算符，只判断值是否相等）

2）：===（全等运算符，既判断值是否相等，又判断数据类型是否相等）

alert(1==true);		//true，1为true，所以值相等
alert(1===true);	//false,因为1是number类型，true是boolean类型

js中的常用事件

JS中的事件:

(1) blur失去焦点

(2) focus获得焦点

(3)keydown键盘按下

(4) keyup键盘弹起

(5) change 下拉列表选中项改变，或文本框内容改变

(6) click鼠标单击

(7) dblclick鼠标双击（doubleclick）

(8) load页面加载完毕 （整个HTML页面中所有的元素全部加载完毕后发生）

(9)mousedown鼠标按下

(10) mouJeover鼠标经过

(11) mousemove 鼠标移动

(12) mouseout鼠标离开

(13) mouseup鼠标弹起

(14) reset表单重置

(15) submit表单提交

(16) select文本被选定

任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在。）

js注册事件的两种方式：

<!doctype html>
<html>
	<head>
		<title>js中的事件</title>
	</head>
	<body>
		<script type="text/javascript">
		/*
			对于当前程序来说，sayHello函数被称为
			回调函数（callback函数）
			回调函数特点：自己把这个函数代码写出来，
			但是这个函数不是自己负责调用
			由其他程序负责调用该函数
		*/
			function sayHello_1(){
				alert("hello 小明")
			}
		</script>
		<!--注册事件的第一种方式，直接在标签中使用事件句柄-->
		<input type=button value="按钮1" onclick="sayHello_1()" />

		<!--注册事件的第二种方式，是使用js代码完成事件的注册-->
		<input type=button value="按钮2" id="mybtn_1" />

		<!--注册事件的第三种方式，使用匿名函数回调函数-->
		<input type=button value=按钮3 id=mybtn_2 />

		<input type=button value=按钮4 id=mybtn_3 />

		<script type="text/javascript">
			function sayHello_2(){
				alert("hello 小红");
			}
			/*
				第一步：
						先获取这个按钮对象（document要全部小写）
						内置对象，可以直接用，document就代表整个HTML页面
			*/
			var butObj_1=document.getElementById("mybtn_1");
			//第二步：给按钮对象的onclick赋值。
			butObj_1.onclick=sayHello_2;	//注意：方法后面不能加小括号
			//第三种方式
			var butObj_2=document.getElementById("mybtn_2");
			/*
				function这个函数在页面打开的时候不会被调用
				只有在click事件发生的时候才会被调用。
			*/
			butObj_2.onclick=function(){
				alert("hello 康康");
			}
			//一行代码实现回调 
			document.getElementById("mybtn_3").onclick=function(){
				alert("hello 阿豪");
			}
		</script>
	</body>
</html>

js代码的执行顺序

onload实例：

<!doctype html>
<html>
	<head>
		<title>onload实例</title>
	</head>
	<body>
		<script>
		//如果不用onload事件的话，按钮添加在script后面程序有错误
		//onload就是让其代码块最后执行，所有代码加载完之后，才执行onload的代码块
			window.onload=function(){
				document.getElementById("mybtn").onclick=function(){
					alert("hhhhhh");
				}
			}
		</script>
		<input type=button value=按钮 id="mybtn" />
	</body>
</html>

js捕捉回车键和esc键

<!doctype html>
<html>
	<head>
		<title>捕捉回车键和esc键</title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload=function(){
				/*
					回车键的值是13
					esc键的值是27
				*/
				document.getElementById("mytext").onkeydown=function(event){
					//对键盘事件对象来说，都有KeyCode属性用来获取键值
					if(event.keyCode===13){
						window.alert("you are right！");
					}
				}
			}
		</script>
		<input type=text id=mytext />
	</body>
</html>

js运算符之void

其他运算符和java一样，参考java即可。

void运算符的语法：void（表达式）

运算原理：执行表达式，但不返回任何结果。

<!doctype html>
<html>
    <head>
        <title>js中void运算符的使用</title>
    </head>
    <body>
        <h1>我的页面</h1>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <!--
            javascript:void(0)
            javascript的作用是告诉浏览器后面是一段js代码
            javascript不能省略。
            并且void（）小括号里面必须有表达式，表达式任意是什么都行。
        -->
        <a href="javascript:void(0)" onclick="window.alert('hhhh')">
        实现一个功能，既保留超链接的个格式，同时用户点击该链接的时候执行一段代码，但是页面不可以跳转。
        </a>
    </body>
</html>

js的控制语句

  1. if

  2. swith

  3. while

  4. do ... while ...

  5. for循环

  6. break

  7. continue

  8. for ... in语句

  9. with语句

js中创建数组：
var arr=[false,true,1,"abc",3];
//js中数组元素的类型随意，元素的个数随意。
//用for循环遍历数组：
for(var i=0;i<arr.length;i++){
    alert(arr[i]);
}
//用for...in语句遍历数组
//i代表的是数组元素的下标
for(var i in arr){
    alert(arr[i]);
}
//for...in语句可以遍历对象的属性。

DOM

DOM编程实例：

  1. 通过按钮或者回车键获取文本框的value

<!doctype html>
<html>
    <head>
        <title>获取文本框中的value</title>
    </head>
    <body>
        <script type="text/javascript">
            window.onload=function(){
                document.getElementById("mybtn").onclick=function(){
                    //alert(document.getElementById("mytext").value);
                    //document.getElementById("mytext").value="xiaoming";
                    document.getElementById("mytext2").value=document.getElementById("mytext").value;
                    document.getElementById("mytext").value="";
​
                    document.getElementById("mytext").onkeydown=function(event){
                    if(event.keyCode===13){
                        document.getElementById("mytext2").value=document.getElementById("mytext").value;
                    }
                }
                }
                }
            
        </script>
        
        <input type=text id=mytext />
        <input type=button value="一点击就获取内容" id="mybtn" />
        <br>
        <input type=text id=mytext2 />
    </body>
</html>

blur事件：失去焦点事件

<!doctype html>
<html>
    <head>
        <title>失去光标事件</title>
    </head>
    <body>
        <!-
            this代表的是当前input节点对象，
            this.value代表的是当前节点对象的属性
        -->
        <input type=text onblur="alert(this.value)" />
    </body>
</html>

innerHTML和innerText不是方法，是属性，他俩都是设置元素内部的内容，innerHTML里面是HTML代码，innerText里面是文本。

在一个div标签里面设置相关信息：

<!doctype html>
<html>
    <head>
        <title>
            在div添加信息
        </title>
        <style type="text/css">
            div{
            border : 5px red solid;
            height : 300px;
            width : 300px;
            <!--绝对位置，离顶部100像素，离左边100像素-->
            position : absolute; 
            top : 100px;
            left : 100px;
            background-color : black;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript">
            window.onload=function(){
                document.getElementById("mybtn").onclick=function(){
                    document.getElementById("div1").innerHTML="<font color=red>我乃常山赵子龙</font>";
                    //document.getElementById("div1").innerText="sfafaf";
                }
            }
        </script>
        <input type=button value="设置内容" id="mybtn" />
        <div id="div1"></div>
    </body>
</html>

关于正则表达式

正则表达式：Regular Expression，主要用在字符串格式匹配上。

正则表达式实际上是一门独立的学科，在java语言中支持，C语言中也支持，JavaScript中同样支持，大部分编程语言都支持正则表达式。正则表达式最初使用在医学方面，用来表示神经符号等，目前使用最多的是计算机编程领域。用作字符串匹配，包括搜索等方面。

常见的正则表达式符号:

. 匹配除换行符以外的任意字符 ​ \w 匹配字母或数字或下划线或汉字 ​ \s 匹配任意的空白符 ​ \d 匹配数字 ​ \b 匹配单词的开始或结束 ​ ^ 匹配字符串的开始 ​ $ 匹配字符串的结束

*重复零次或更多次

+重复一次或更多次 ​ ? 重复零次或一次 ​ {n} 重复n次 ​ {n,} 重复n次或更多次 ​ {n,m} 重复n到m次

\W匹配任意不是字母，数字，下划线，汉字的字符 \S匹配任意不是空白符的字符 \D匹配任意非数字的字符 \B匹配不是单词开头或结束的位置 【^ x 】匹配除了x以外的任意字符 【^aeiou】匹配除了aeiou这几个字母以外的任意字符

正则表达式创建方法：

第一种：var regExp =/正则表达式/flag；

第二种：使用内置支持类RegExp

var regExp = new RegExp（“正则表达式”，“flags”）；

关于flags：（可有可无）

g:全局匹配

i:忽略大小写

m:多行搜索（ES规范制定之后才支持m）

而且两种创建方法如果flag前面是正则表达式的话只能用 g和i，不能用m，如果是字符串的话可以用。

正则表达式对象的test（）方法

表达式：正则表达式对象.test（用户填写的字符串）；

test方法可能会返回true或者false，返回true，表示字符串格式匹配成功，false表示失败。

复选框的全选和取消全选

<!doctype html>
<html>
    <head>
        <title>复选框的全选和全部取消</title>
    </head>
    <body>
        <script type="text/javascript">
            window.onload=function(){
                var fruits=document.getElementsByName("fruit");
                document.getElementById("all").onclick=function(){
                    for(var i=0;i<fruits.length;i++){
                        fruits[i].checked=all.checked;
                    }
                }
                var sum=fruits.length;
                //为所有的fruit加上鼠标单击事件
                for(var i=0;i<sum;i++){
                    fruits[i].onclick=function(){
                        var clickNum=0;
                        for(var i=0;i<sum;i++){
                            if(fruits[i].checked){
                                clickNum++;
                            }
                        }
                        all.checked=(sum==clickNum);
                    /*
                    if(sum==clickNum){
                        all.checked=true;
                    }else{
                        all.checked=false;
                        }
                    */
                    }
                }
                
            }
        </script>
        <input type=checkbox value=all id=all />全选<br>
        <input type=checkbox name=fruit value=apple />苹果<br>
        <input type=checkbox name=fruit value=orange />橘子<br>
​
    </body>
</html>

获取下拉列表中的value

<!doctype html>
<html>
    <head>
        <title>获取下拉列表的value值</title>
    </head>
    <body>
        <!--第一种方法：-->
        <script type="text/javascript">
            window.onload=function(){
                //change在元素值改变时候触发
                document.getElementById("provinceList").onchange=function(){
                    alert(this.value);
                }
            }
        </script>
        <select id=provinceList>
            <option>--选择省份--</option>
            <option value=001>河南省</option>
            <option value=002>河北省</option>
            <option value=003>山东省</option>
            <option value=004>山西省</option>
        </select>
    <!--
        第二种方法：
        <select onchange="alert(this.value)">
            <option>--选择省份--</option>
            <option value=001>河南省</option>
            <option value=002>河北省</option>
            <option value=003>山东省</option>
            <option value=004>山西省</option>
        </select>
        -->
    </body>
</html>

js内置对象

日期类（Date）

日期类为js中内置的支持类：Date，可以用来获取时间、日期

<!doctype html>
<html>
    <head>
        <title>Date类/title>
    </head>
    <body>
        <script type="text/javascript">
            //获取系统当前时间
            var nowTime = new Date();
            //输出时间,相当于alert,不过alert是弹窗，而write是显示在网页上
            document.write(nowTime);
            //Mon Sep 20 2021 20:44:47 GMT+0800 (中国标准时间)
            document.write("<br>");
​
            //转换成具有本地语言环境的日期格式
            nowTime=nowTime.toLocaleString();
            document.write(nowTime);
            //2021/9/20 下午8:44:47
            document.write("<br>");
            //如果系统的日期和格式不是自己想要的，可以自己自定制日期格式
            var time=new Date();
            //返回年份信息
            var year =time.getFullYear();
​
            var month= time.getMonth(); //月份范围是0-11
            var weekOfDay =time.getDay(); //获取的一周的第几天，范围为0-6
            var day=time.getDate();  //获取日期中的几号
            document.write(year+"年"+(month+1)+"月"+day); //返回2021
            document.write("<br>");
​
            var time=time.getTime(); //获取从1970年1月一日，到现在为止的毫秒数
            document.write(time); //一般会使用毫秒数当做时间戳
        </script>
    </body>
</html>

获取实时系统时间：

<!doctype html>
<html>
    <head>
        <title>实时显示当前时间</title>
    </head>
    <body>
        <script type="text/javascript">
            function time(){
                document.getElementById("timeDiv").innerHTML=new Date().toLocaleString();
            }
            function start(){
                //每间隔1000毫秒执行一次time函数
                v = window.setInterval("time()",1000);
            }
            //如果一个变量前没有用var修饰，那么她是全局变量
            //时间停止
            function stop(){
                window.clearInterval(v);
            }
        </script>
    </body>
    <input type=button value=点击获取实时时间 onclick="start();" />
    <input type=button value=点击停止时间 onclick="stop();" />
    <div id=timeDiv></div>
</html>

数组类（Array）

<!doctype html>
<html>
    <head>
        <title>数组类练习</title>
    </head>
    <body>
        <script type="text/javascript">
            //长度为0的数组
            var arr1=[];
            //数组内的元素类型随意,并且数组会自动扩容
            var arr=[1,3.2,true,"aaa"];
            //创建数组的另一种方式
            var a2=new Array(); //代表创建了一个长度为0的数组
            var a1=new Array(3);//代表创建了一个长度为3的数组，括号内表示数组长度
            var a3=new Array(3,2);//代表创建了一个长度为2的数组，数组内元素为3,2.括号内表示数组元素
​
            var a=[1,2,3];
​
            //数组的join方法，可以将数组取出来，并且在数组中各元素之间加入特定的内容。
            var str=a.join("-");
            alert(str); //1-2-3
​
            //数组的push方法，在数组的末尾添加一个元素，数组长度加一。
            a.push(10);
            alert(a.join("-")); //1-2-3-10
​
            //将元素末尾的元素弹出（数组长度-1）
            var endEle = a.pop();
            alert(endEle);
​
            /*
                JS中的数组可以自动模拟栈数据结构：后进先出，先进后出原则。
                push压栈
                pop弹栈
            */
​
            //反转数组
            a.reverse();
            alert(a.join("-")); //3-2-1
        </script>
    </body>
</html>

BOM

BOM编程主要操作浏览器，是顶级对象，代表浏览器窗口。

window有open和close方法，可以开启和关闭窗口。

关闭窗口和打开窗口相关代码：

<!doctype html>
<html>
    <head>
        <title>浏览器的开启和关闭</title>
    </head>
    <body>
        <input type=button value="开启百度（新窗口）" onclick="window.open('https://www.baidu.com');" />
        <input type=button value="开启百度（当前窗口）" onclick="window.open('https://www.baidu.com','_self');" />
        <input type=button value="开启百度（新窗口）" onclick="window.open('https://www.baidu.com','_blank');" />
        <input type=button value="开启百度（父窗口）" onclick="window.open('https://www.baidu.com','_parent');" />
        <input type=button value="开启百度（顶级窗口）" onclick="window.open('https://www.baidu.com','_top');" />
​
    </body>
</html>

confirm属性，弹出一个确认框，如果点击确认则返回true，如果点击取消，则返回false

alert属性，是弹出一个消息框。

<!doctype html>
<html>
    <head>
        <title>confirm的使用</title>
    </head>
    <body>
        <script type="text/javascript">
            function del(){
                var flag=window.confirm("确定要删除吗？");
                if(flag){
                    window.alert("正在删除....");
                }
            }
        </script>
        <input type=button value=删除 onclick="del();" />
    </body>
</html>

如果当前窗口不是顶级窗口，将当前窗口设置成顶级窗口

if(window.top!=window.self){
    window.top.location=window.self.location; 
    //表示当前操作对象的地址
}

从当前窗口退回到上一个操作的窗口

window.history.back();
window.history.go(-1);//等价

通过浏览器往服务器发请求的方法有：

  1. 表单form的提交

  2. 超链接

  3. document.location

  4. window.location

  5. window.open("url")

  6. 直接在浏览器地址栏上输入URL，然后回车

JSON

JSON：JavaScript Object Notation，简称JSON，是一种数据交换格式，在JS中以JS对象的格式存在。

JSON的主要作用是：一种标准的数据交换格式，目前非常流行，系统A与系统B交换数据的话，都是采用JSON。

JSON是一种标准的轻量级的数据交换格式，特点是体积小，易解析。

在实际开发中有两种数据交换格式使用最多，一个是JSON，另一个是XML。XML体积较大，解析麻烦，但是其语法严谨。通常银行相关的系统之间进行数据交换的话会使用XML。

JSON的语法格式：

var jsonObj = {

"属性名" : "属性值",

"属性名" : "属性值",

"属性名" : "属性值",

......

}；

<!doctype html>
<html>
    <head>
        <title>JSON练习</title>
    </head>
    <body>
        <script type="text/javascript">
            var json = {
            "id" : "1",
            "name" : "xiaoming"
        };
        //第一种访问方式
        alert(json.id+":"+json.name);
        //第二种访问方式
        alert(json["id"]+":"json["name"]);
        //JSON数组
        var user=[{"id" : "1","name" : "A"},
                    {"id" : "2","name" : "B"},
                    {"id" : "3","name" : "B"}];
        for(var i=0;i<user.length;i++){
            var uObj=user[i];
            alert(uObj.id+":"+uObj.name);
        }
        </script>
    </body>
</html>

eval函数：作用是将字符串当做一段JS代码解释并执行。

java连接数据库，查询数据之后，将数据在java程序中拼接成JSON格式的字符串，将json格式的字符串响应到浏览器，也就是说java响应到浏览器上的仅仅是一个JSON格式的字符串，还不是一个JSON对象。

可以使用eval函数，将json格式的字符串转换成JSON对象。

window.eval("var i = 100;");
alert("i=" +i ); //i=100

设置JSON中的tbody

实现功能：点击按钮，之后表格会显示员工信息

<!doctype html>
<html>
    <head>
        <title>设置table中的tbody按钮</title>
    </head>
    <body>
        <script type="text/javascript">
            var html="";
            var json={
                "total" : 3,
                "emps"  : [{"id" : 1,"name" : "A"},
                            {"id" : 2,"name" : "B"},
                            {"id" : 3,"name" : "C"}]
            };
            window.onload=function(){
                document.getElementById("mybtn").onclick=function(){
                    for(var i=0;i<json.emps.length;i++){
                        var emp=json.emps[i];
                        html += "<tr>";
                        html +="<td>";
                        html +=emp.id;
                        html +="</td>";
                        html +="<td>";
                        html +=emp.name;
                        html +="</td>";
                        html +="</tr>";
                        document.getElementById("mytbody").innerHTML=html;
                    }
                    document.getElementById("myspan").innerHTML=json.total;
                }
            }
​
        </script>
        <input type=button value=点击获取员工信息 id=mybtn />
        <table border=1px>
            <tr>
                <td>编号</td>
                <td>姓名</td>
            </tr>
            <tbody id=mytbody>
                
            </tbody>
        </table>
        总共有<span id=myspan>0</span>条记录
    </body>
</html>



posted @ 2021-09-21 20:19  AMHAO  阅读(74)  评论(0)    收藏  举报