概要:
ECMAScript
DOM
BOM
文章目录
写在前面:我是刚学完HTML和CSS就学的JavaScript,感觉JavaScript挺简单的,所以花了两天时间整理了一下资料,刚开始想的是以备自己复习用,后来写着写着,就想写好这个,提供给需要的同学,当然,可以作为一个复习的资料,从JS是什么到JSON对象,基本的JavaScript内容都有,整理不易,可否给个关注。谢谢~
相见
初识JavaScript
JS基本概念 |
JavaScript是什么?
JavaScript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于HTML5的手机App,交互逻辑都是由JavaScript驱动的。简单地说,JavaScript是一种运行在浏览器中的编程语言。
相关概念:
-
JSP:JavaServer Pages,隶属于java语言,运行在JVM中。
-
JS特点:
(1)解释型语言,不用编译,直接运行。
(2)类似与C和Java的语法。
(3)动态语言。
(4)基于原型的面向对象。 -
JavaScript的语法和Java语言类似,每个语句以【;】结束,语句块用 {…}
-
JS是严格区分大小写的,HTML则不严格区分。
-
JS中每条语句以分号结尾,如果不写,浏览器会自动替我们加上,但是会消耗浏览器资源,有可能会加错。
-
输出语句:
(1)
alert("这是我第一行JS代码");
,alert是在页面弹出一个警告框。
(2)document.write("我的第一行JavaScript代码");
,在body中输出一行内容。
(3)console.log("HELLO");
,向控制台输出内容。(F12调出页面的控制台) -
JS是一门事件驱动型的编程语言,依靠事件去驱动,然后执行对应的程序。
(1)JS中有好多事件,其中一个事件就叫:鼠标单击(click)
(2)并且任何事件都会对应一个事件句柄,叫:onclick。
(3)而事件句柄是一HTML标签的属性存在的
(4)当一个事件发生时,执行写在“onclick”属性中的代码。
JS代码可以写在哪?
(1)在HTML的script标签中写JavaScript代码。脚本块,页面打开的时候就执行。可以出现多次,位置也随意。
<script type="text/javascript">/*写JS代码*/
alert("这是我第一行JS代码");
</script>
(2)也可以将JS代码编写到标签的onclick属性中。点击执行。
<button onclick="alert('点我干嘛?')">按钮</button>
(3)也可以将JS代码写在a标签的href属性中
<a href="javascript:alert('你点我干哈?')">链接</a>
(4)也可以和css一样,写在外部文件.js中。通过src属性引入。一旦引入外部js文件,script标签中就不能写js代码了,如果需要,可以新建一个script标签。【推荐这种方式】。在需要的地方引入。注意是scr。
<script type="text/javascript" src="Myjs.js"> </script>
(5)JavaScript代码可以直接嵌在网页的任何地方,不过通常我们都把JavaScript代码放到 <head>标签中。
注意:虽然可以将JS代码写在标签的属性中,但他们属于结果与行为耦合,不方便维护,不推荐使用。
- 使用JS代码弹出一个消息框:使用window内置对象。
(1)window对象有一个alert函数。
(2)用法:window.alert(“消息”);
(3)window.可以省略,直接使用alert函数。
(4)alert有阻塞当前页面加载的作用。
相识
JS的数据类型
JS基本概念 |
-
注释:
(1)多行注释:/*……*/
(2)单行注释:// -
字面量: 即常量,如:1,2,……等,不可改变的量。字面量可以直接使用,但很麻烦。可以使用变量。
-
变量: 保存字面量,可以任意改变。
(1)声明变量:使用var关键字声明。如:var a;
。JS是弱类型的。有右值决定类型。
(2)赋值:将字面量赋值为变量。
(3)在没有手动赋值时,系统自动默认赋值undefined。 -
局部变量和全局变量:
(1)局部变量:在函数体中声明定义的变量,包括形参。生命周期是:函数执行时到函数执行完毕。
(2)全局变量:在函数体之外定义的变量。生命周期是:浏览器打开到关闭,尽量少用,它会消耗内存空间,能使用局部变量就使用局部变量。
(3)就近原则,当局部变量和全局变量同名时,采用就近原则。
(4)注意:如果一个变量在声明的时候没有使用【var】关键字,则它无论在哪里声明,都是全局变量。 -
标识符: 可以自己自主命名的都称为标识符。如:变量名,函数名等。
(1)规则:- 可以含有数字、下划线、字母、$。
- 不能以数字开头。
- 标识符不能是JS中的保留字。
- 采用驼峰命名,首字母小写,每个单词首字母大小,其余小写。
-
JS中的数据类型有原始类型和引用类型
(1)有五种原始数据类型:- String:字符串
- Number:数值
- Boolean:布尔值
- Null:空值,typeof运算的结果为 object
- Undefined:只有一个值,undefined。当一个值没有手动赋值或者手动赋值为undefined时,它就是undefined。
(2)一种引用数据类型:
- Object:对象
- 及其Object的子类:
-
JS中的数组:
- 语法:
var a=['qw',12,true,false];
,数组元素类型随意 - 遍历数组:使用for循环,使用下标来访问;a[0]
- for……in 语句:for(var i in arr),i是数组的下标,和java中的foreach语句不同。
- for……in 语句遍历对象的属性。for(var a in obj)。a是属性名的字符串形式,再使用第二种访问对象属性的方法,来进行遍历对象属性。如:
alert(obj["a"])
- 语法:
-
ES6有又新增了一种数据类型:Symbol类型。
-
JS中有一个运算符【typeof】:在程序运行阶段动态的获取变量的数据类型。
(1)typeof的运算结果是类型名的字符串,全部小写。
(2)语法:〔typeof〕〔变量名〕
(3)在JS中使用〔==〕来判断两个字符是否相等。
(4)例:typeof a == "number"
注:
var d=null; alert(typeof d)//返回object类型,但null是null类型。
判断函数时,只写函数名,不用写括号。
-
Number类型: 包括整数、浮点数、NaN、 Infinity都是Number类型。
document.write(Number.MAX_VALUE);
,输出JS中数值的最大值。- Infinity:表示正无穷。是个字面量,即:常量。
- NaN:是一个特殊的数字,即:Not A Number。在运算结果本来应该是一个数字,但最终不是一个数字时,它就是NaN。比如:数字和字符串作除法运算,加法例外(加法会作字符串拼接运算)。
- (10/3)的结果是3.33333333。
- isNaN() 函数:语法:〔isNaN(数据)〕true 表示不是一个数字。
- parseInt() 函数:取出字符串中的数字并转换为数字,并取整数位。
- parseFloat() 函数:取出字符串中的数字并转换为数字。
- Math.ceil() 函数:向上取整。如:2.002,向上取整为3。
-
Boolean类型: true或false
(1)在Boolean类型中有一个Boolean函数。- 语法: 〔Boolean(数据)〕。
- 作用:将非Boolean类型转换为Boolean类型。
- if后面的括号中只能是Boolean类型,如果不是,系统会自动调用Boolean函数来转换。
- 数字 1 和 infinity 为true,数字0位false。
- 非空字符串会被转为true。空串是false。
- null 、 undefined 、 NaN为被转为false。
- 总结:“有”为真,“无”为假
-
String类型:
(1)创建字符串:- 第一种:
var s = "abcd";
。注意:typeof运行结果值string。【小s】 - 第二种:使用JS内置的支持类。
var s = new String("acd");
。注意:String是object的子类。typeof运行结果值Object类型。【大S】。 - 两个的属性和函数都是通用的。
(2)String类型的常用函数和属性:
- length() 函数:获取字符串长度。
- indexOf() 函数:获取指定字符串在当前字符串中第一次出现处的索引。
- lastIndexOf() 函数:获取指定字符串在当前字符串中最后一次出现的索引。
- substr() 函数:截取子字符串,截取从指定指定下标开始长度为len的字符串。
- substring() 函数:返回一个从start 到最顶的字符串,不包括end。即:[ )。
- toLowerCase() 函数:转换小写
- toUpperCase() 函数:转换大写。
- split() 函数:拆分字符串。
- replace() 函数:替换字符串中指定的字符。语法:〔字符串.replace(“a”,“b”)〕,将a替换成b。注意:只能替换第一个。要想全部替换,只能使用正则表达式。
(3)函数调用方式:
- 语法:〔字符串.函数名()〕
- 第一种:
-
基本数据类型:
(1)字符串:使用单或双引号包括起来。如:var str = "hello";
。使用【\】作为转义字符。
(2)数值:包括整数和浮点数都是Number类型。- typeof运算符:用来检查一个变量的类型。语法:typeof 变量;,返回类型名。
document.write(Number.MAX_VALUE);
,输出JS中数值的最大值。- Infinity:表示正无穷。是个字面量,即:常量。
- NaN:是一个特殊的数字,即:Not A Number。
(3)布尔值:真或假。用来逻辑判断。
var bool = true;
。
(4) 空值:null。用来表示一个空的对象。
(5) 未定义:undefined。已经声明但没有初始化的值。 -
数组:
(1)JS中的数组可以模拟栈的数据结构,后进先出。
(2)JS的数组不会发生数组下标越界。
//数组不会下标越界
var a = [];
var b = ["abc",12,true,3.14];
var c =new Array();//数组长度为0
var d = new Array(3);//3表示数组长度
var e = new Array(3,2);//数组中具体存储的数,数组的长度为2
//数组的方法:
var a =[1,2,3,];
var str = a.join("-");//连接字符串
document.write(str);
a.push(10);//在数组的末位添加一个元素
document.write(a.pop());//弹出数组末位的元素,
a.reverse();//反转数组
-
强制类型转换:
(1)转String类:- 方法一:调用被转换数据类型的【toSting()】方法。它不会改变原变量的值。
例:var b = a.toString();//将a转换为string类
。 - 方法二:调用【String()】函数,将被转换的数据作为参数。可以转换null和undefined类型。
例:var b = String(a);
(2)转Number类:
- 方法一:使用【Number()】函数,和String函数用法一样。非数字转换为NAN。true转为1,false和null为0.
- 方法二:对字符串使用。【parseInt()】和【paseFloat()】,取出字符串中的数字并转换为数字。使用方法和String函数一样。也可以用来取整。
例:parseInt(a,10);//10表示转成10进制数
- 使用【+】使字符串型数字转为数值。
(3)转Boolean类:
- 方法:使用【Boolean()】函数。除了0和NAN都是true。字符串中null和undefined是false。对象也是true。
- 方法一:调用被转换数据类型的【toSting()】方法。它不会改变原变量的值。
-
其他进制的数字:
(1)十六进制:以0x开头,但输出时会转换成十进制。
(2)八进制:以0开头。
(3)二进制:以0b开头,但IE浏览器并不支持。 -
Object类型: 它是所有类型的父类,和java一样。
(1)在JS中的类默认继承自Object类,即:自己定义的类也有如下属性。
(1)属性:- prototype属性:(常用)
- constructor属性:
(2)函数:
- toLocaleString() 函数:
- toString() 函数:
- valueOf() 函数
-
NaN、null、undefined的区别:
(1)类型不同。
(2)null 和 undefined 可以等同。
JS中的运算符
运算符:
-
算术运算符:+、-、*、/、%。
- 当对非NUmber类型的值进行运算时,会将这些值转换为Number再进行运算。【+】可以拼接字符串。
- 任何值和NAN进行运算都得NAN。
- 任何值和字符串做加法运算,都会先转换为字符串,然后再和字符串进行拼串操作。(可以加空串来把其他的类型转换为string)
- 任何值做【-、*、/】运算时,都会自动转为NUmber类。可以当做隐式类型转换。
-
一元运算符:+、-。符号取反。也可以进行隐式类型转换。
-
逻辑运算符:!、&&、||。
(1)对于非布尔值的与或运算,会先将其转换为布尔值再进行运算。- 与运算:两个非布尔值进行与运算, 如果结果是true,则返回后者。两个都是false,则返回前面的。NAN为false。
- 或运算:如果第一个是true,则直接返回第一个值,如果第一个是false,则直接返回第二个值。
-
关系运算符:
(1)对于非数值进行比较时,会将其转换为数字再进行比较。
(2)如果符号两侧都是字符串,则不会将其转换为数字再进行比较,而是会直接比较字符串中字符的Unicode编码。
(3)在进行字符串类的数字比较时,要先进行强制类型转换。 -
在字符串中使用转义字符输出Unicode编码【\u四位编码】。例:
document.write("\u2620")
。( 是空格)
(1)在页面中显示Unicode编码:【&#十进制】。需要报Unicode转换为十进制。
例:<h1 style="font-size: 500px">☠</h1>
-
相等运算符:【==】相等为true。
(1)如果两个值的类型不相同,则先自动进行类型转换,然后再进行判断。1==true
(2)NAN不和任何值相等,包括它本身。可以通过一个函数【isNaN()】来判断一个数是不是NaN,是则返回true。
(3)undefined衍生自null。
(4)不相等运算符:【!=】,如果不相等则返回true。不相等时也会对变量进行自动的类型转换,如果转换后相等,则返回false。 -
全等和不全等:
(1)【===】。用来判断两个值是否全等,不会进行类型转换,即:两个值要类型和值都相等,才是true,如果类型不相同,则直接返回false。
(2)【!==】。用来判断两个值是否不全等,不会进行类型转换。如果类型不同,则直接返回true。 -
条件运算符: 也叫三元运算符。
(1)语法:条件表达式?语句1 :语句2;
(2)如果条件表达式为真,执行语句1,反之则执行语句2 。 -
运算符的优先级和数学中的差不多。与的优先级高于或。如果不清楚优先级,可以使用括号来限制。
-
JS中的花括号{}只有分组的作用,花括号内部的变量在外部也可以访问。
-
【prompt()】可以弹出一个提示框,用户可以在文本框中输入,该函数需要一个字符串作为参数,该字符串将会成为提示框的提示内容。该函数将输入的内容作为返回值,可以定义一个变量用来接收这个返回值。prompt函数的返回值是string类。
JS中的控制语句
JS中的基本语句和 java 基本一样。这里是大概介绍一些语句的特殊之处
if
switch
while
do……while
for循环
break
continue
- 条件分支语句: switch语句。进行是全等比较。和C语言一样。也可以将switch括号中写true,意思是将case后面的表达式与true比较(全等比较),相同则执行相应的case语句。如下:
var a=9;
switch (true)
{
case a<10:
document.write("a小");
break;
case a>13:
document.write("a大");
break;
default:
document.write("finsh");
break;
}
- for循环语句:
(1) for … in 循环,它可以把一个对象的所有属性依次循环出来。也可以遍历数组。 - break和continue关键字:用来跳出循环语句。
(1)break跳出离他最近的循环。
(2)可以为循环起一个名字,label,用来跳出指定的循环。在break后跟上label内容,就会跳出指定的循环。
hello: for(var i=1;i<10;i++)
{
for(var j=1;j<=i;j++)
{
document.write(j+"x"+i+"="+i*j+"\ "+"\t");
}
document.write("<br/>");
if(j==5)
break hello;
}
-
计时器:
console.time("test");
,console.timeEnd("test");
。记录程序运行时长,在控制台查看。 -
with语句:不用使用〔对象.属性名〕的方式来访问属性,直接访问属性。
- 语法:
with(obj){ alert(name)}
,它会自动将obj加到name前面。 - 不建议使用,容易导致混淆。
- 语法:
相恋
JS对象和函数
JS对象 |
咳咳,JS都有对象了,你呢?
>
-
JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成。类似C语言中的结构体。
-
对象的分类:
(1)内建对象:如:Number、Math、String等。
(2)宿主对象:由JS运行环境提供的对象,主要是指由浏览器提供的对象。比如:BOM(浏览器对象模型)、DOM(文档对象模型)。
(3)自定义对象:由开发者自己创建的对象。
-
定义类的语法:和定义函数一样。如何区分呢?关键看怎么用
(1)第一种:
function 类名(形参)
{
……
}
(2)第二种:
类名 = function(形参)
{
……
}
- JS中类的定义和构造函数的定义是放在一起来完成的。
- this关键字:表示当前对象,和java的定义相同。
- 可以通过〔prototype〕来动态的给类添加属性和函数。prototype可以给任意类扩展,包括内置的类,方法同下。
(1)例:
function Student(name age)
{
this.name=name;
this.age=age;
this.getAge = function()//函数
{
return age;
}
}
Student.prototype.getName = function ()
{
return this.name;
}
- 创建对象:
(1)语法:〔new〕〔类名(实参)〕。类名就是构造函数名。
(2)函数和类的区别:如果使用了〔new〕关键字,那它就是一个类,如果没有,那就是普通的函数。
(3)var obj = new sayHello();
,obj是一个引用,保存内存地址,指向堆中的对象。
例:
function Student(name age)
{
this.name=name;
this.age=age;
this.getAge = function()//函数
{
return age;
}
}
-
创建Object对象:(不常用)
(1)方法一:使用new关键字。-
声明对象:使用new关键字调用的函数,是构造函数constructor。
例:var obj=new Object();
。 -
创建对象:即:向对象中添加属性。语法:【对象.属性名=属性值;】。
例:obj.name="JACK";
-
删除对象属性:语法【delete 对象.属性名】
例:delete obj.name;
(2)方法二:对象字面量
- 语法:JavaScript用一个 【{…} 】表示一个对象。
- 添加属性:键值对以 【xxx: xxx】形式声明,用【,】 隔开。注意,最后一个键值对不需要在末尾加【 ,】 ,如果加了,有的浏览器(如低版本的IE)将报错。代码如下。
- 大括号里面可以什么都不写,它也是一个对象,和new关键字的作用相同。
- 属性名一般不加引号,除非是一些特殊的属性名。
(3)访问属性:
- 通过 【.】操作符完成。例:
xiaoming.name;
-
var xiaoming = {
name: '小明',
birth: 1990,
school: 'No.1 Middle School',
height: 1.70,
weight: 65,
score: null
};
-
创建和访问对象的另一种方法:
(1)语法:- 创建:【对象 [“属性名”]=属性值】
- 访问:【对象 [“属性名”]】
(2)这种属性名一般都是比较特殊的属性名,比如:123作属性名。
(3)优点:方式更加灵活,中括号中可以是一个变量,通过这个变量的值去直接访问对象的属性。
var obj=new Object();
obj["nihao"]="你好";
var n ="nihao";
document.write(obj[n]);
- JS中对象的属性值可以是任意的数据类型,也可以是另外一个对象。
- in运算符:通过该运算符可以检验一个对象中是否含有某个指定的属性,有的返回true,没有则返回false。
(1)语法:【“属性名” in 对象】
var obj=new Object();
obj["nihao"]="你好";
var n ="nihao";
document.write("text" in obj);
- 基本数据类型和引用数据类型:定义和C++或Java中的定义一样。
(1)基本数据类型的值是直接在栈中储存,值与值之间是独立存在的,修改一个变量不会影响另外一个变量。
(2)对象是保存在堆内存中,对象名就是对这个存在堆内存中的内存空间的一个引用。即:对象名存的是new开辟出来的内存的地址。对象本身就是一块内存地址。对象之间的赋值就是内存地址的赋值。
(3)比较:- 基本数据类型比较时,就是比较两个的值是否一样。
- 引用数据类型比较时,它比较的是两个对象的地址。如果地址不同,即使两个对象一模一样,也是不相同。
JS函数 |
-
函数(Function)也是一个特殊的对象,函数中可以封装一些功能,函数中也可以像普通对象一样添加属性。
-
JS中的函数和随意,可以接收参数,也可以不接受,无所谓,因为JS是弱类型的。
-
JS中的函数不需要指定返回值类型,可以返回任意的类型。
-
函数的创建与调用:
(1)创建函数方法一:使用函数声明来创建一个函数- 语法:
- 【function fun(形参列表){……}】 (推荐)
- 【fun = function(形参列表){……}】
- 例:
function fun() { document.write("Hello,world"); }
(2)创建函数方法二:使用new关键字创建函数对象。(不推荐)
- 语法:
var fun = new Function("参数");
- 可以将要封装的代码以字符串的形式传递给构造函数。
例:var fun = new Function("document.write('Hello World');");
(3)调用函数:
- 语法:【函数对象()】。例:
fun();
。 - 调用函数时,封装在函数内部的代码会按照顺序执行。
- 语法:
-
JS中函数可以“重载”,给函数传参的时候,如果没有给一个形参赋值,则它被自动赋值为undefined。
(1)多传一个参数并不会影响程序运行,多的参数不会被处理。
(2)在JS中,如果两个函数同名的话,前面的函数会被后面的函数覆盖。
(3)所以,在JS中函数不能重名。
相拥
JS事件
JS事件 |
JS中的常用事件:
- blur 失去焦点
- focus 获得焦点
- change 下拉列表选中项改变,或文本框内容改变
- click 鼠标单击
- dblclick 鼠标双击
- keydown 键盘按下
- keyup 键盘弹起
- mousedown 鼠标按下
- mouseover 鼠标经过
- mousemove 鼠标移动
- mouseout 鼠标离开
- mouseup 鼠标弹起
- select 文本被选定
- reset 表单重置
- submit 表单提交
- load 页面加载完毕,整个加载完毕才会发生。(常用)
注意:任何一个事件都对应一个事件句柄,事件句柄是在事件之前加 〔on〕,事件句柄出现在一个标签的属性位置。即:事件句柄以属性的形式存在。
事件注册的两种方式:
(1)第一种:在标签中使用 onclick 之类的事件句柄。下面这个代码中,fun函数被称为回调函数。(被其他出现调用)。(正向调用 和 回调函数)
<input type="button" value="按钮" onclick="fun()">
的意思是,将fun 函数注册到 按钮上,等待用户点击。
<script type="text/javascript">
function fun()
{
alert("Hello JavaScript");
}
</script>
<input type="button" value="按钮" onclick="fun()">
(2)第二种:使用纯JS代码完成事件的注册。
- 第一步:先获取这个按钮的对象。
var btnobj = document.getElementById("mybtn");
, document 表示整个HTML页面,后面的意思是通过 id 获得元素。 - 第二步:给按钮对象的 onclick 属性赋值。
btnobj.onclick=fun;
。将回调函数注册到按钮的 onclick 属性上。注意:这里没有括号。- 可以使用匿名函数。即:
btnobj.onclick=function(){……}
- 可以省略使用 var 定义变量指向这个对象。直接使用:
document.getElementById("mybtn").onclick=fun;
- 可以使用匿名函数。即:
关于JS代码的执行顺序:
- 在页面打开是,代码自上而下,依次执行。使用 load 事件改变默认自上而下的顺序。注意:这里有括号。如:
<body onload="ready()">
<input type="button" value="提交" id="mybtn">
<script>
function ready()
{
document.getElementById("mybtn").onclick=function ()
{
alert("^^^^^^^^^******&&&&&");
};
}
</script>
</body>
onload="ready()"
表示,在页面加载完毕之后,才开始执行 ready() 函数。- 也可以不在 body 标签中加。在JS代码块中使用
window.onload=ready;
处理。注意:这里没有括号。如下:
<body>
<input type="button" value="提交" id="mybtn">
<script>
window.onload=ready;
function ready()
{
document.getElementById("mybtn").onclick=function ()
{
alert("^^^^^^^^^******&&&&&");
};
}
</script>
</body>
- 设置结点改变标签属性,所有的标签属性都可以改,如下:点击按钮将文本框改为复选框
<script>
window.onload=function () {
document.getElementById("mybtn").onclick=function () {
var mytext=document.getElementById("mytext");
mytext.type= "checkbox";
}
}
</script>
<input type="text" id="mytext">
<input type="button" value="改变" id="mybtn">
JS捕捉回车键:
- 使用 event.keyCode 获取键盘敲下的值。回车键是13,ESC是27。keydown 表示键盘按下。function 的第一个参数是浏览器传给我们的一个事件对象。
- 注意:这里使用的是全等判断。但是keycode好像已经弃用了。
- function 的第一个参数可以看做是一个事件的入口
<script>
//回车键是13
//ESC是27
window.onload=function () {
var usernameElt = document.getElementById("username");
usernameElt.onkeydown= function (event) {//浏览器传过来的一个事件对象
if(event.keyCode===13)
alert("12121312131");
}
}
</script>
<input type="text" id="username">
JS运算符之void:
- JS中特有的运算符:void。void()是指向括号中的表达式,但不返回任何结果。
<a href="javascript:void(0)" onclick="alert('hello')">hello</a>
,点击链接不发生跳转。JavaScript:告诉浏览器后面是一段JS代码。- 既保留超链接的样式,用户点击时执行一段JS代码,但页面不发生跳转。
- href = “”,如果双引号中什么都不写,表示当前页面的路径。
- void后面的小括号必须有东西。
JavaScript分为三大块:ECMAScript、BOM、DOM
- ECMAScrip:JavaScript的核心语法
- DOM:文档对象模型,操作网页中的内容,网页是一个DOM树,对这个DMO树进行增删修改,就是DOM编程。
- BOM:浏览器对象模型。浏览器的后退,刷新,地址栏,关闭等都是BOM编程。
相爱
DMO编程
DOM编程案例 |
DOM和BOM的区别和联系
- BOM的顶级对象是 window
- DOM的顶级对象是 document
- 实际上BOM是包括DOM的。
- 主要属性介绍:
- window.history:前进和后退
- window.location:对地址栏进行操作
- window.document.forms:获取表单,window可以省略。
- links:链接
(图片来自网络)
获取文本框的value:
- 将第一个文本框的内容拷贝给第二个文本框。
- JS中也有 this 关键字,指向当前对象。
alert(this.value);
<script>
window.onload=function () {
var mybtn=document.getElementById("mybtn");
mybtn.onclick=function () {
var naername=document.getElementById("username");
document.getElementById("username1").value = username.value
// alert(username.value);
}
}
</script>
<input type="text" id="username">
<input type="button" value="获取" id="mybtn"><br/>
<input type="text" id="username1">
innerHTML 和 innerText 操作div和span:
- 区别与相同点:
(1) innerHTML:后面的代码会被当做HTML代码解释执行。属性。
(2) innerText:只当做普通文本来处理。属性。(属性后面不写括号)
(3)两个都是设置元素内部内容
正则表达式
正则表达式:
什么是正则表达式?
- 正则表达式主要用在字符串格式匹配方面,在搜索方面等。比如:填写邮箱时检验输入是否合法
- 正则表达式是一门独立的学科,大部分编程语言都支持。
- JS中正则表达式的要求:
- 认识常见正则表达式
- 看懂正则表达式
- 会写简单的正则表达式
- 在JS中创建正则表达式对象。(new对象)
- 在JS中正则表达式对象有哪些方法。(调方法)
常见的正则表达式符号:
- 〔.〕匹配除了换行符之外的任意字符。
- 〔\w〕匹配字母、数字、下划线、汉字
- 〔\s〕匹配任意空白符
- 〔\d〕匹配数字
- 〔\b〕匹配单词的开始或结束
- 〔^〕匹配字符串的开始
- 〔$〕匹配字符串的结束
- 〔*〕重复0次或更多次
- 〔+〕重复一次或更多次
- 〔?〕重复0次或一次
- 〔n〕重复n次
- 〔n,〕重复n次或更多次
- 〔n,m〕重复n到m次
- 〔\W〕匹配不是字母、数字、下划线、汉字
- 〔\S〕匹配任意不是空白符的字符
- 〔\D〕匹配非数字字符
- 〔\B〕匹配不是单词的开始或结束的位置
- 〔^x〕匹配除 x 之外的任意字符
- 〔^aeiou〕匹配除 aeiou 之外的任意字符
- 〔|〕表示或
简单的正则表达式:
- QQ号:
^[1-9][0-9][4,]$
,表示第一个为0-9,第二位是1-9,并且重复4至多次。 - Email地址:
^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
创建正则表达式对象:
(1)第一种方式:var r = /正则表达式/flags;
(2)第二种方式:使用内置支持类。var r = new RegExp("正则表达式","flags");
(3)flags的可取值:可以组合使用。
- g:全局匹配(常用)
- i :忽略大小写(常用)
- m :多行搜索,(ES之后才有的),如果
\\
之内写的是正则表达式的话,不能用 m ,因为这种方法也可以用作搜索字符串。
正则表达式的test()方法:
语法:〔正则表达式对象.test(字符串)〕返回布尔值。true表示字符串匹配成功。
<script>
window.onload=function () {
document.getElementById("btn").onclick=function ()
{
var email = document.getElementById("email").value;
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(!emailRegExp.test(email))
{
document.getElementById("emailerro").innerText="邮箱地址不合法";
}
}
document.getElementById("email").onfocus=function ()
{
document.getElementById("emailerro").innerText="";
}
}
</script>
<span id="emailerro" style="color: red;font-size: 12px"></span>
<input type="text" id="email">
<input type="button" value="验证邮箱" id="btn">
去除字符串前后的空白:
- 低版本的IE不支持 trim() 方法,我们可以直接扩展一个 trim() 方法。
- 学会使用prototype
String.prototype.trim=function()
{//去掉当前字符串的前后空白
return this.replace(/^\s+|\s+$/,"").replace(/\s+$/,"")
}
return this.replace(/^\s+|\s+$/g,"")
。替换上面的
<script>
String.prototype.trim=function()
{//去掉当前字符串的前后空白
return this.replace(/^\s+/,"").replace(/\s+$/,"")
}
window.onload=function ()
{
document.getElementById("btn").onclick=function ()
{
var username = document.getElementById("username").value;
username=username.trim();//取出前后空白
alert("--->"+username+"<----");
}
}
</script>
<input type="text" id="username">
<input type="button" id="btn" value="提交">
表单验证实例
- 实现功能如下:
- 用户名不能为空
- 用户名必须在 6~14 位之间
- 用户名只能有数组和字母组成
- 失去焦点验证
- 密码和确认密码要一直
- 邮箱要合法
- 有错误提示信息
- 文本框再次获得焦点清空错误内容
- 最终表单都合法时提交,输入Hello world
- 最终结果如下:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<style type="text/css">
table{
border-collapse: collapse;
}
tr,th,td{
border: 1px black solid;
padding: 2px;
}
span{
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<script>
window.onload=function ()
{
var usernameerror = document.getElementById("nameerro");//获得用户名文本框的异常
document.getElementById("username").onblur=function ()//用户名事件
{
var username = document.getElementById("username").value;
username=username.trim();//去除空白
if(username)//非空串
{
var usernameRegExp1 = /^.{6,14}$/;
var usernameRegExp2 = /^[A-Za-z0-9]{4,40}$/;
var RegExp = /^[A-Za-z0-9]+$/
if(!usernameRegExp1.test(username)||!usernameRegExp2.test(username)||!RegExp.test(username))
{
usernameerror.innerText="输入非法";
}
}
else
{
usernameerror.innerText="用户名不能为空";
}
}
document.getElementById("username").onfocus=function ()//用户名框获得焦点事件
{
if( usernameerror.innerText!="")
{
document.getElementById("username").value="";
}
else
{
}
//清空错误提示
usernameerror.innerText="";
}
//获取密码错误提示的标签
var pwdErro = document.getElementById("pwdErro");
document.getElementById("password2").onblur=function ()//确认密码框对象绑定事件
{
var password1=document.getElementById("password1").value;
var password2=document.getElementById("password2").value;
if(password1!=password2)//密码不一致
{
pwdErro.innerText="两次输入密码不一致";
}
else
{
pwdErro.innerText="";
}
}
document.getElementById("password2").onfocus=function ()
{
if(pwdErro.innerText!="")
{
document.getElementById("password2").value="";
document.getElementById("password1").value="";
}
pwdErro.innerText="";
}
var emErro =document.getElementById("emErro");
document.getElementById("email").onblur=function ()//绑定邮箱的事件
{
var email = document.getElementById("email").value;
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(!emailRegExp.test(email))
{
emErro.innerText="邮箱地址不合法";
}
}
document.getElementById("email").onfocus=function ()
{
if(emErro.innerText!="")
{
document.getElementById("email").value="";
}
emErro.innerText="";
}
var btn =document.getElementById("mybtn")
btn.onclick=function ()//提交按钮的鼠标点击事件
{
document.getElementById("username").focus();//打开页面自动进行获取焦点和失去焦点
document.getElementById("username").blur();//防止什么都不做也能提交表单
document.getElementById("email").focus();
document.getElementById("email").blur();
document.getElementById("password1").focus();
document.getElementById("password1").blur();
document.getElementById("password2").focus();
document.getElementById("password2").blur();
if(usernameerror.innerText==""&&emErro.innerText==""&&pwdErro.innerText=="")
{
var from = document.getElementById("from");
from.submit();
}
}
}
</script>
<form action="http://localhost/myphp.php" method="post" id="from">
<table>
<caption>注册账号</caption>
<tr>
<th>账号:</th>
<td><input type="text" name="username" id="username">
<span id="nameerro"></span></td>
</tr>
<tr>
<th>邮箱:</th>
<td><input type="text" id="email"><span id="emErro"></span></td>
</tr>
<tr>
<th>密码:</th>
<td><input type="password" name="password" id="password1"></td>
</tr>
<tr>
<th>确认密码:</th>
<td><input type="password" id="password2"><span id="pwdErro"></span></td>
</tr>
</table><br/>
<table>
<tr>
<th></th>
<td> <input type="button" id="mybtn" value="提交"></td>
<td><input type="button" id="mybtn1" value="重置"></td>
</tr>
</table>
<hr>
</form>
</body>
</html>
复选框的全选和取消全选:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选框的全选和取消全选</title>
</head>
<body>
<input type="checkbox" id="mybtn">全选<hr/>
<input type="checkbox" name="aihao" value="smoke" >抽烟<br/>
<input type="checkbox" name="aihao" value="drink">喝酒<br/>
<input type="checkbox" name="aihao" value="tang">烫头<br/>
<script>
window.onload=function ()
{
var aihao = document.getElementsByName("aihao");//根据名字获得元素对象
var firstbtn= document.getElementById("mybtn");
firstbtn.onclick=function ()
{
for(var i=0;i<aihao.length;i++)
{
aihao[i].checked=firstbtn.checked;
}
}
var all =aihao.length;
for(var i=0;i<aihao.length;i++)
{
aihao[i].onclick=function ()
{
var count=0;
for(var j=0;j<all;j++)
{
if(aihao[j].checked)
{
count++;
}
}
if(all==count)
{
firstbtn.checked=true;
}
else
{
firstbtn.checked=false;
}
}
}
}
</script>
</body>
</html>
获取下拉列表中选中的值:
<select onchange="alert(this.value)">
<option value="" >请选择省份</option>
<option value="001">陕西省</option>
<option value="002">山西省</option>
<option value="003">河北省</option>
<option value="004">河南省</option>
</select>
显示网页时钟:(周期函数)
- JS中的内置类:Date,可以用来获取时间/日期。
var nowtime = new Date();//获取系统当前时间
nowtime= nowtime.toLocaleString();//转换为本地语言环境的日期格式
document.write(nowtime);
document.write("<br/>");
var t=new Date();
document.write(t.getFullYear());
document.write("<br/>");
document.write(t.getMonth());//月份是0~11
document.write("<br/>");
document.write(t.getDay());//获取一周的第几天(0~6)
document.write("<br/>");
//获取毫秒数:从1970年1月1日 00:00:00 000
var times =t.getTime();
document.write(times);
- 周期函数:
<script>
function display()
{
var time = new Date();
var strTime = time.toLocaleString();
document.getElementById("div1").innerHTML=strTime;
}
function statr()
{
sp = window.setInterval("display()",1000);//每隔1000毫秒调用一次display函数
}
function stop()
{
window.clearInterval(sp);//取消掉上面周期性执行的函数。sp是全局变量
}
</script>
<input type="button" value="显示系统时间" onclick="statr();">
<input type="button" value="停止显示时间" onclick="stop();">
<div id="div1">
</div>
JSON数据处理
拼接html的方式,设置table的tbody
将接收到的JSON数据进行遍历拼接,以特定的格式设置到网页中。
如:document.getElementById("mytable").innerHTML=html;
,将数据拼接成表格形式,设置到表格中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拼接html的方式,设置table的tbody</title>
<style>
table{
border-collapse: collapse;
}
tr,th,td{
border: black 1px solid;
}
</style>
</head>
<body>
<script>
//JSON数据
var data ={
"total":14,
"emps":[
{"empno":100,"ename":"Jack","sla":4000},
{"empno":120,"ename":"Tom","sla":4500},
{"empno":130,"ename":"Landa","sla":3900},
]
}
//把数据展示在table中
window.onload=function ()
{
var btn=document.getElementById("mybtn");
var html="";
btn.onclick=function ()
{
var emps =data.emps;
for(var i=0;i<emps.length;i++)
{
var emp=emps[i];
html=html+"<tr>";
html=html+"<td>"+emp.empno+"</td>";
html=html+"<td>"+emp.ename+"</td>";
html=html+"<td>"+emp.sla+"</td>";
html=html+"</tr>";
}
document.getElementById("mytable").innerHTML=html;
}
}
</script>
<h3>员工信息列表</h3>
<hr>
<input type="button" value="展示" id="mybtn">
<table border="1px" width="40%">
<tr>
<th>员工编号</th>
<th>员工姓名</th>
<th>员工薪资</th>
</tr>
<tbody id="mytable">
</tbody>
</table>
</body>
</html>
相伴
BOM编程
BOM编程案例 |
open和close:
- 在BOM编程中,window是顶级对象,代表浏览器窗口,window有 open 和 close 方法,用来开启和关闭窗口。
<input type="button" value="打开淘宝" onclick="window.open('http://taobao.com' ,'_self')">
消息框和确认框:
(1)消息框:alert();
(2)确认框:window.confirm();
var bo = window.confirm("确认删除吗?");//确认则返回true
history 和 location 对象:
- 对于超链接,后退一步:
<input type="button" value="后退" onclick="window.history.back()">
总结:有哪些方法可以通过浏览器向服务器发请求:
- form表单
- 超链接
- document.location
- window.location
- window.open(url)
摔门
JSON入门
JSON |
什么是JSON ?
- JavaScript Object Notation:JavaScript对象标记,简称:JSON
- 它是一种标准的轻量级的数据交换格式:系统A与系统B进行数据交换。比如 C语言 和 java语言 进行数据交换。
- 特点:体积小,易解析
- 在实际开发中有两种数据交换格式,使用最多。一种是JSON,一种是XML。
- XML特点是:体积大,解析麻烦,但其语法严谨,一般银行之间进行数据交换使用XML。
- XML和HTML可以形象的看做兄弟俩,他们有一个父亲叫:SGML(标准通用的标记语言)
- HTML主要做页面展示,所以语法松散
- XML主要做数据存储和数据描述,所以语法很严格。
- JSON也可以称为无类型对象
- JSON的访问:
(1)使用 〔JSON对象.属性名〕
(2)使用 〔JSON对象[“属性名”]〕
JSON语法格式:
var obj = {
"属性名":"属性值",
"属性名":"属性值",
"属性名":"属性值",
"属性名":"属性值"
……
}
JSON对象:
<script>
//创建一个JSON对象
var jsonobj = {
"sno": "110",
"name": "Jack",
"sex": "man",
"age": "19"
}
alert(jsonobj.age+","+jsonobj.name+","+jsonobj.sex+","+jsonobj.sno);
</script>
JSON数组:
var students=[
{"sno": "110", "name": "Jack","sex": "man"},
{"sno": "120", "name": "Tom","sex": "man"},
{"sno": "130", "name": "Llii","sex": "man"}
]
for(var i=0;i<students.length;i++)
{
var stuobj = students[i];
alert(stuobj.name+","+stuobj.sex+","+stuobj.sno);
}
JSON对象的属性可以也是一个JSON对象或数字
var user={
"usercode":110,
"username":"Jack",
"sex":true,
"address":{
"city":"陕西",
"strett":"abub",
"zipcode":"2121212"
},
"aihao":[
"smoke","drink"
]
};
eval函数
eval函数的作用:
- 将字符串当做一段JS代码并执行。
window.eval("var i=100");
。
java连接数据库,查询到数据之后,将数据在java中拼接成JSON格式的字符串,将字符串响应到浏览器,即:java响应到浏览器的仅仅是一个JSON格式的字符串,还不是一个JSON对象,这时,可以使用 eval 函数将字符串转为JSON对象。
var fromjava = "{\'name\':\'Jack\',\'password\':\'123\'}";//java 传过来的字符串
window.eval("var jsonobj="+fromjava);
alert(jsonobj.name+","+jsonobj.password);
在JS中 [] 和 {} 有什么区别?
JS中[]是数组,{}是JSON或普通JS对象。
java中的数组:int a[] ={1,2,3,};
JS中的数组:var a = [1,"abc"];
整理不易,整整2万2千多字,给个点赞可好?😁