js基础

最新推荐文章于 2022-11-19 11:52:58 发布

benben0729

最新推荐文章于 2022-11-19 11:52:58 发布

阅读量1.2k

点赞数

文章标签： js JavaScript 前端渲染

本文链接：https://blog.csdn.net/benben0729/article/details/80355761

版权

前端专栏收录该内容

49 篇文章 0 订阅

订阅专栏

JavaScript简介

JavaScript是一种小型的、轻量级的、面向对象的、跨平台的客户端脚本语言。

JavaScript是嵌入到浏览器软件中的，只要有浏览器即可执行js程序。

JavaScript是一种面向对象的程序语言。

在程序中，对象是由“属性”和“方法”构成。

在现实中，男女朋友就是一个“对象”，一个“物体”就是“对象”。

注意，JS中的对象只要会用就可以，不需要我们自己开发。

跨平台：JS程序可以在多种平台下运行，如：windows、linux、mac、iOS等。

客户端脚本程序：JS只能在客户端的浏览器来运行，不能再服务器端来运行。

浏览器是一个翻译器，可以翻译三种代码：HTML、css、JavaScript。

JavaScript能干什么

表单验证：JS最基本的功能。

动态HTML：可以实现一些动态的、重复的效果。

交互式：人机交互，通过键盘鼠标，与网页中的元素进行交互。

<script></script>标记

JS代码也是嵌入到html标记中的。

同一个网页中，可以有html,css，javascript。

通过<script></script>标记来引入

常用的两个客户端输出方法

document.write(str);

l 描述：在网页中的 <body>标记，输出str的内容。

l Document意思是“文档”,就是整个网页。

l document是一个文档对象，代表整个网页

l write()是document对象的一个输出方法。

l “.”小数点，通过小数点来调用对象的方法。

l Str 表示要输出的内容。

window.alert(str)

l 描述：在当前窗口中弹出一个警示对话框，str为对话框显示内容。

l Window代表当前浏览器窗口,window是一个窗口对象。

l alert()方法，弹出一个对话框。

l Str表示要输出的内容。

举例：window.alert(“你好！”);

JS中的注释

HTML中的注释：<!--注释内容 -- >、

Css中的注释：/*注释*/

JavaScript的注释：//或者/*注释内容*/

变量

1. 变量的概念

在内存中运行和存在，临时存在的数据。

2. 变量的声明

l 申请空间

l 语法格式：var 变量名 = 变量值;

l 声明的变量是使用系统关键字var来进行的。

l 举例：

n var name;//声明一个变量

n var name,sex,edu;//同时声明多个变量

n Var name=”张三”;//声明赋值

3. 变量的命名规则

l 变量名可以包含字母、数字、下划线

l 变量名不能以数字开头，可以以字母开头或者下划线开头

l 变量名不能是系统关键字

l 变量名是区分大小写的。

l 如果变量名有多个单词构成的话，该如何表示？

n “驼峰式命名”第一个打次全小写，后面的单词首字母大写，如：getUserName

n “下划线式命名”：所有单词全小写，中间用下划线链接。如：varget_user_name

4. 给变量赋值

左边变量名，右边变量，常量，表达式。

基本数据类型

变量数据类型

变量的数据是有类型的，这个类型来源于“变量的值”，换句话说：值是什么类型的，变量就是什么类型的，这点与c语言有很大差别，C语言是先定义类型再给相应的值。包括数值型、字符型、布尔型、undefined、null、array、object、function。

数值型

l 可以进行算数运算，数值型包括整数，浮点数。

l 数值型中还有一个特殊的值，NaN(not a number)

l 当将其他类型转成数据类型，转不过去，但程序又不能报错，这时将返回一个NaN的值

l 一个字符串是不能转成有意义的数值类型的，只能转换成NaN

l 一个纯数字的字符串是可以转换成有意义的数值的。例如：

n var width="300";width*=2;document.write(width);

字符型

l 不可以进行算数运算，可以进行链接运算（str1+str2）

l 用单引号或者双引号，引起来的一个字符串。

l 单引号和双引号之间可以相互嵌套

n 单引号只能嵌套双引号

n 双引号只能嵌套单引号

n 双引号嵌套双引号，需要进行转义，只用转义字符”\”

u 常用的转义字符有\’、\”、\\、\r、\n等

u 弹窗中的换行，只能用\n来实现。window.alert("超文本语言\n你好a ");

布尔型

布尔型又称逻辑型，只有两个值：true、false。

布尔型只有两个状态。

未定义型

当一个变量定义，但未赋值时，将返回未定义型，未定义型的值只有一个undefined。

当一个对象的属性不存在时，也返回未定义型。

空型

当一个对象不存在时，将返回空型，空型的值只有一个null。

也可以理解为：是一个对象的占位符。

如果你想清除一个变量的值的话，可以给他赋一个null 的值。

var a=100;

var a=null;

变量的数据类型转换

变量的类型转换，一般是js自动转换的，但也有时需要我们自己转。

其他类型转换成布尔型

Boolean()函数。

其他类型转换成字符型

其他类型转化成数值型

函数和方法的区别

Boolean(a)//函数是可以独立使用的

Document.write(a) //方法不能独立使用，必须属于那一个对象。

判断变量的数据类型：typeof()

l 使用一元运算符typeof(),可以测试一个变量的类型。

l Typeof（）的测试结果是一个类型字符串。

l 其结果有一下几种情况：

n String

n Number

n Boolean

n Undefined

n Object：数组，null，对象

n Function。

从字符串中提取整数和浮点数函数

perseInt()系统函数

l 功能：在一个字符串中，从左往右提取整数，如果遇到费整型的内容，则停止提取，并返回结果。

l 注意：如果第一个字符就是非整数，则立即停止，并返回NaN.

n parseInt(“120px”)=120;

n parseInt(“120.98”)=120;

n parseInt(“a120px”)=NaN;

parseFloat()系统函数

l 功能：在一个字符串中，从左往右提取浮点型，遇到非浮点型内容，则停止提取，并返回结果。

l 注意：如果第一个字符就是非浮点型，则立即停止，并返回NaN。

n parseFloat(“120px”)=120;

n parseFloat(“120.98px”)=120.98;

n parseFloat(“.120px”)=0.12;

n parseFloat(“a.120px”)=NaN;

基本运算符

算数运算符 +、-、*、/、%、++、--

如果“+”左右有一个操作数是字符型的数据，则将另一个转换成字符串类型，运算将变成链接运算。

赋值运算符 =、+=、-=、*=

字符串运算符 =、+=

比较运算符：>、<、<=、>=、==、！=、===、！==

比较运算符的运算结果是布尔值true、false。

“=”赋值号

“==”等于号，只比较变量的值，而不管类型，只要值一样，就返回true，否则返回false。

“===”全等于。既比较值，也判断类型。如果类型和值都一样返回真，否则返回假。

逻辑运算符&&、||、！

逻辑运算符的结果只有两个true、false

三元运算符

所谓“三元运算符”就是指三个操作数。

语法：条件表达式？结果1：结果2

语法：操作数1？操作数2：操作数3

含义：如果条件为真，则执行结果1的代码，如果条件为假，则执行结果2代码。

其实：三元运算符，就是ifelse的变形形式

window.prompt()

l 功能：弹出有个输入框，让用户输入内容。

l 语法：varyear=window.prompt(text,[defaultText])

n var str = window.prompt("请输入密码","password")

l 参数：

n Text:提示信息

n defaultText：可选项。输入框中的默认内容

l 返回值

n 如果单击确定按钮，返回一个字符串数据。

n 如果单击取消按钮，返回一个null。

写程序的一般步骤

l 变量名的初始化：变量的声明及赋值

l 程序的运行过程

l 输出结果

注意：JS变量赋值中必须是单行，不能换行。

特殊运算符

l new 运算符：创建一个对象。如：vartoday =new Date();//创建一个当前系统日期时间的对象

l delete运算符：删除数组的元素，或者对象的属性。

l typeof运算符:一元运算符，主要功能，判断变量的类型的，如：typeof（name）或者typeof name。

l 点运算符（.）：主要用用在对象中，通过点运算符去调用对象的属性或者方法。

l []中括号：主要用来访问数组元素的。如arr[0]=100;//找到下标为0 的数组元素，赋值为0.

运算符优先级

If多条件判断和switch的区别。

If中的多条件一般是一个范围，而switch中的条件一般是一个变量的不同取值。

数组

数组的概念

一组数的集合，称为“数组”。

vararr=[10,20,30,40,50];

数组元素

数组中的每个元素，称为一个“数组元素”

数组索引

数组中有多个值，每个值都有一个“编号”,可以访问到数组的每个值。从0开始

数组元素的访问

数组的长度

数组中元素的总个数。

创建数组

1. 使用new关键字和Array()来创建

l var arr=new Array();//创建一个空数组

l var arr=new Array(“周更胜”,”男”,23);//创建一个数组，并初始化数组的元素。

2. 使用[]来创建

l var arr=[12,23,34,45];

数组中元素的值，可以是任何类型。

数组的操作

读取元素：

修改元素：修改已经存在下标的值

增加元素：增加一个不存在的表表的元素。

删除元素：使用关键字delete,删除的只是数组中的值,而下标还在。

数组对象属性length

数组就是一个“数组对象”,使用其属性与方法。

length就是数组对象的一个属性，如var len=arrObj.length。

Length属性，可以获取数组的长度

函数

函数定义

因为在赋值之前，变量是没有类型的，所以，在给函数传递参数的时候，不需要指定变量类型。直接给参数就行，也不需定义。

例如functiongetMax(a,b)

function function_name(参数[])

{/代码

return 参数r;

}

function 关键字必须的，全小写

function_name函数名函数名命名规则与变量名命名规则完全一样

函数调用

全局变量和局部变量

引用传值

拷贝传值

匿名函数

没有名字的函数就是匿名函数。不能单独定义，也不能单独调用。

匿名函数一般是作为数据给其他变量赋值的。可以给普通变量、数组元素、对象属性

举例：vara=function(name，age)

{window.alert(name+”的年龄”+age+”岁”);}

a(“张三”,25);

alert(typeof (a));

二维数组

给一个数组元素，赋一个数组的，那么就是二维数组。

二维数组就是用两层循环来实现，也就是循环嵌套循环。

二维数组的循环，与二维表格的循环一模一样。

对二维数组的访问，数组名后跟多个连续的中括号，第一个中括号[]代表第一层数组,第二个中括号[]代表第二位数组。

对象

对象有属性和方法。

Js中对象分类

JS内置对象，数组对象、日起对象....

BOM对象，浏览器鼓组件对象，包括window、document、location、history....

DOM对象，文档对象，包括所有HTML标记，每一个HTML标记都是一个对象。

自定义对象，根据自己项目需要，自己定义自己对象。

自定义对象

1. 使用new关键字结合构造函数Object（）来创建一个空的对象

2. 使用大括号{}创建对象

JS中内置对象

l String对象：字符串对象,提供了对字符串进行操作的属性和方法

l Array对象：数组对象，提供了数组操作方面的属性和方法

l Date对象：日期时间对象，可以获取系统的日期时间信息

l Boolean对象：布尔对象，一个布尔变量就是一个布尔对象。（没用可用的属性和方法）

l Number对象：数值对象，一个数值变量就是一个数值对象。

l Math对象：数学对象，提供了数学运算方面的属性和方法。

String对象的属性和方法

l length：获取字符串的长度，如varlen=strObj.length;

toLowerCase():将字符串中的字母转化成全小写。如：strObj.toLowerCase();

toUpperCase()：将字符串中的字母转化成全大写。如：strObj.toUpperCase();

charAt(index)

n 功能：返回指定下标的一个字符，如果没有找到，返回一个空字符

n 语法：strObj.charAt(index)

n 参数：index是指定的一个索引号，根据index索引号来返回一个字符。

n 例如：

u var str="你不知道的事love";

u str=str.toUpperCase();

u for(vari=0;i<str.length;i++)

u {

u document.write(str.charAt(i)+"<br/>");

u }

indexOf()

n 功能：返回一个字符串在原始字符串中的索引值，没有找到返回-1.

n 语法：strObj.indexOf(substr)

n 参数：substr代表要查找的一个子字符串。

n 举例：

lastIndexOf()

n 功能;在原始字符串，从左往右查找某个字符串，如果没找到，返回-1.

n 语法：strObj.lastIndexOf(substr)

n 参数：substr代表查找的子字符串。

substr()

n 功能：在原始字符串中返回一个子字符串。

n 语法：strObj.substr(startIndex[,length])

n 说明：从下标startindex起，返回length个字符

n 参数

u startindex起始索引号

u length长度。省略一直到结尾。

substring()

n 功能：在原始字符串，返回一个子字符串

n 语法：strObj.substring(startindex[,endindex])

n 说明：返回从startindex到endindex之间的所有字符

n 参数

u startindex开始索引值

u endindex结束索引值，可选。省略，一直返回到最后。

n 注意：substring()返回的字符串包含startindex处的字符，不包含endindex处的字符。

split()，将一个字符串转成数组

n 功能：将一个字符串切割成若干段,返回一个数组。

n 语法：strObj.split(分隔号)

n 参数：参数是一个分隔号的字符串，用指定的分隔号将字母分割成若干段

n 举例”a,b,c,d”.split(“,”)返回一个数组

n 最小分隔符空字符串，可以将汉字语句分成一个个字的数组

concat()

语法：stringObject.concat(stringX,stringX,...,stringX)连接字符串

Array对象

一个数组变量就是一个数组对象。

length属性:动态获取数据长度如var len=arrObj.length;

join()

n 功能：将一个数组转成字符串

n 语法：arrobj.join(连接号)

n 说明：将一个数组，用指定的“连接号”连接成一个字符串。

reverse()

n 功能：将数组中的个元素顺序颠倒

n 语法：arrObj.reverse()

n 参数：无

n 说明，是对原始数组的操作

n 举例：

vararr=["a","b","c"];

arr.reverse();

document.write(arr);

数组元素的删除和添加

delete运算符，只能删除数组的值，而空间还在。总长度不变

以前数组元素的添加只能往后面添加，不能往前面添加

shift()

删除数组中第一个元素，返回删除的那个值，并将长度减1，没有参数

pop()

删除数组中最后一个元素，返回删除的那个值，并将长度减1，没有参数。

unshift()

往数组前面添加一个或多个元素，长度要改变。arrObj.unshift(“a”,”c”,”v”);

push()

往数组结尾添加一个或多个数组元素，长度要改变。arrObj.push(“a”,”b”,”c”)

Date对象

Date对象和String对象不太一样,定义了一个字符串，其实就是一个String对象，就可以直接调用属性和方法。

Date对象的使用，必须使用new关键字来创建对象。否则，无法调用Date对象的属性和方法。

创建Date对象的方法

1. 创建当前日期对象的实例,不带任何参数。

Var today=newDate();

2. 创建指定时间戳的日期对象实例，参数是时间戳。1s=1000ms

时间戳：是指某个-时间距离197年1月1日0时0分0秒，过去了多少毫秒值。

之所以是8点是因为所在位置是东八区，所以加八个小时。

3. 指定一个字符串的日期时间信息，参数是一个日期时间字符串。

var timer=new Date(“2015/5/25 10:00:00”)年月日时分秒，

年月日用/隔开（必选），时分秒用：隔开（可选）。

举例：计算一下你活了多少天？

4. 指定多个数值参数

var timer =newData(2015,4,25,10,20,00)//顺序：年、月、日、时、分、秒（年月日必选）

举例：计算自己再活多少天能活到100岁。

<scripttype="text/javascript">

//vartoday=new Date();

vartimer1=new Date().getTime();

vartheday=new Date(1950+100,7,29);

vartimer2=theday.getTime();

varstr=(timer2-timer1)/1000/3600/24/365;

document.write("张三再活"+str+"天就能活到百岁！<hr/>");

//document.write(timer1+"<hr/>");

//document.write(timer2+"<hr/>");

alert(newDate().getMinutes());

</script>

l getFullYear():获取四位的年份

l getMonth():获取月份,取值0~11

l getDate()：获取记号，取值1~31

l getHours()：获取小时数（当前小时）

l getMinytes():分钟数（当前小时的分钟数）

l getSeconds()：秒数

l getMilliseconds()：毫秒（过去当前分钟的毫秒值）

l getDay()：星期，取值0~6

l getTime()：毫秒值（距离1970.1.1毫秒值）

Math数学对象

Math对象是静态对象，换句话说，在使用Math对象时，不需要创建实例

Math.PI:圆周率

l Math.abs():绝对值，如Math.abs(-9)=9

l Math.ceil():向上取整（整数加一，小数去掉）如Math.(10.2)=11

l Math.floor():想下取整(直接去掉小数)如Math.(9.88)=9

l Math.round():四舍五入如Math.round(4.5)=5 Math.round(4.4)=4

l Math.pow(x,y)求x的y次方，如Math.pow(2,3)=8

l Math.sqrt():求平方根，如Math.sqrt(4)=2

l Math.random():返回一个0到1的随机小数，如:Math.random();

求随机数的公式：Math.random()*(max-min)+min

给网页加随机背景颜色

这种方法必须将<script></script>标签之后，因为写在之前会找不到<body>标签

v 访问网页中所有标记的起点是document。

v 除了body标记以外，其它标记的访问必须用id来访问。

Number数值对象

一个数值变量，就是一个数值对象(Number对象)

tofixed()

功能：将一个数值转成字符串，并进行四舍五入，保留指定位数的小数。

语法nuberobj.toFixed(n).

参数：n就是要保留的小数位数

举例：

var a=1234.789;

a.toFixed(2);

BOM和DOM简介

BOM,browser Object Model，浏览器对象模型

BOM主要提供了访问和操作浏览器各组件的方式。

浏览器组件：

n window（浏览器窗口）

n location(地址栏)

n history（浏览历史）

n screen（显示器屏幕）

n navigator(浏览器软件)

n document(网页本身)

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

DOM主要提供访问和操作HTML标记的方式。

HTML标记：

l 图片标记

l 表格标记

l 表单标记

l body、html标记

l ......

BOM和DOM 不是JS的内容，他们是W3C制定的规范。但是DOM和BOM在浏览器中以对象的形式得以实现。换句话说：BOM和DOM都是有一组对象构成。

W3C是制作互联网标准的一个国际化组织，如：XHTML、CSS、JavaScript、AJAX等。

BOM

BOM对象结构图

各对象之间是有层级关系的，那么各对象之间如何访问呢？

n window.document.write(“OK”)

n window.document.body.bgcolor=”#ff0000”

window对象是所有其他对象的顶级对象，因此，可以省略。

l document.write(“OK”);

l document.body.bgcolor=”#ff0000”

l window.alert()=alert()

l window.prompt(“请输入一个值”)--->prompt(“请输入一个值”);

window对象属性

l name:指浏览器窗口名字，这个名字是给<a>标记的target属性来用。

n 设置窗口名字window.name=”newWin”

n 获取窗口名字document.write(name)

l top:代表最顶层窗口如window.top

l parent：代表父级窗口，主要用于框架

l self:代表当前窗口，主要用于框架

l innerWidth :指浏览器窗口的内宽（不含菜单栏、工具栏、地址栏、状态栏）IE不支持

n 在IE下使用document.documentElement.clientWidth来代替window.innerWidth。

l innerHeight：指浏览器的内高（不含菜单栏、工具栏、地址栏、状态栏）IE不支持

n 在IE下使用document.documentElement.clientHeight来代替window.innerHeight

n document.documentElement就是<html>标记对象

n document.body就是<body>标记对象

window对象方法

alert()弹出一个警告对话框

prompt()弹出一个输入对话框

confirm():弹出一个确认对话框

单击确认按钮返回true，单击取消返回false

close():关闭窗口

print()打印窗口

open()方法

l 功能;打开一个新的浏览器窗口

l 语法：varwinObj=window.open(url,name,options)

l 参数可有可无。如果没有参数，则打开一个选项卡式的窗口（大小是最大化）。

l 参数

n url:准备在窗口中显示那个文件。url可以为空字符串，表示显示一个空的页面

n name：新窗口的名字，该名字给<a>标记中的target属性来用

n options：窗口的规格

u width:新窗口的宽度

u height:新窗口的高度

u left:新窗口距离屏幕左边的距离

u top：新窗口距离屏幕上边的距离

u menubar:是否显示菜单栏取值：yes,no

u toolbar:是否显示工具栏

u status:是否显示状态栏

u scrollbars滚动条取值yes，no

n 返回值：返回一个window对象的变量，可以通过该名称跟踪该窗口。winObj具备window对象的所有属性和方法。

onload事件:当网页加载完成，指<body>标记的所有内容全部加载完成，才触发该事件（条件）。通过onload事件属性去调用JS的函数，onload属性只有<body>标记才有。

onclick事件，当单击是时，去调用JS代码，所有html标记都有该属性

将有名函数传给事件。

延时器方法--setTimeout()

setTimeout()

l 功能：设置一个延时器。换句话说，时间一到，就执行JS代码一次。

l 语法：var timer=window.setTimeout(code,millsec)

l 参数：

n code:是任何合法的JS代码，一般情况下是JS函数，该函数要放在引号中。

u 举例：window.setTimeout(“close()”,2000)

u 举例：window.setTimeout(init,2000)将函数（init()）地址传过去，不需要加括号。如果加括号是将函数执行结果传到方法中。

n millsec:毫秒值，1s=1000ms;

l 返回值：返回一个延时器的id变量，这个id变量给clearTimeout()用来清除。

clearTimeout()

l 功能：清除延时器变量id

l 语法：window.clearTimeout(timer)

l 参数：timer就是由setTimeout()设置的id变量

举例：简单的计数器

定时器方法

setInterval()

l 功能：设置一个定时器，重复不断的执行JS代码（周期性）

l 语法：vartimer=window.setInterval(code,millsec)

l 参数：

n code:是任何合法的JS代码，一般情况下是JS函数，该函数要放在引号中

u 举例：window.setInterval(“init0”,2000)

u 举例：window.setInterval(init,2000)

n millsec:毫秒值，1秒等于1000毫秒

l 返回值：返回一个定时器的id变量，这个id变量给clearInterval()用来清除

clearInterval()

l 功能：清除定时器id变量

l 语法：window.clearInterval(timer)

l 参数：timer就是由setInterval()设置的id变量

举例：使用延时器和定时器两种方法实现动态图片效果

screen屏幕对象

l Width:屏幕宽度，只读属性

l Height:屏幕的高度，只读属性

l availWidth:屏幕的有效宽度，不含任务栏，只读属性

l availHeight:屏幕的有效高度，不含任务栏，只读属性

navigator对象

l appName:浏览器软件名称，主要用来判断客户使用的是什么核心的浏览器

n 如果是IE浏览器的话，返回值为：Microsoft Internet Explorer

n 如果是Firefox浏览器的话，返回值为：Netscape

l appVersion:浏览器软件的核版本号

l systemLanguage:系统语言

l useLanguage:用户语言

l plantform:平台

location地址栏对象

l href:获取地址栏中完整的地址,JS的网页跳转，location.href=”http://www.sina.com.cn”;

//5秒后跳转

window.setTimeout('location.href="news.html"',5000);

l host:主机名

l hostname:主机名

l pathname:文件路径及文件名

l search:查询字符串

l protocol:协议：如http://、ftp://

l hash：锚点名称，如#top

l reload([true]):刷新网页。true参数表示强制刷新

注意：所有的属性，重新赋值后，网页将自动刷新。

history对象

l length:历史记录的个数

l go(n):同时可以实现前进和后退

n history.go(0)刷新网页

n history.go(-1)后退

n history.go(1)前进一步

n history.go(3)前进3步

l forward：相当于浏览器的前进按钮

l back()：相当于浏览器的后退按钮

DOM

DOM，Document object Model，文档对象模型，我们可以把网页中所有的“东西”看成是“对象”

DOM是W3C制定的网页标准或准则，而这个标准，在浏览器中以对象的形式得以实现。

DOM的官方定义：DOM可以使用脚本，动态的访问或操作，网页的内容、网页外观、网页结构。

DOM的分类

l 核心DOM:提供了同时操作HTML文档和XML文档的公共的属性和方法。

l HTML DOM：针对HTML文档提供的专用的属性方法。

l XML DOM：针对XML文档提供的专用的属性和方法

l CSS DOM：提供了操作CSS的属性和方法。

l Event DOM：事件对象模型，如onclick、onload等。

HTML节点树、节点类型

注意事项：<table>标记与<tr>标记之间有一个<tbody>标记，因为在书写过程中可以忽略，所以我们一般不会写，但是它是存在的。

节点关系

l 根节点，一个html文档只有一个根，它就是HTML节点

l 子节点：某一父级节点的下级节点

l 父节点

l 兄弟节点

DOM中节点类型

l document:文档节点,代表整个网页，不代表任何HTML标记，但他是html节点的父节点

l element，元素节点,指任何HTML标记，每一个HTML标记都是一个元素节点，并具有相应的标记的属性。

l attribute属性节点，指HTML标记属性

l text节点，是节点树的最底层节点.

核心DOM中的公共属性和方法

提示：核心DOM中查找节点（标记），都是从根节点开始的（html节点）

核心DOM中htm的各个标记之间不能有空格或者换行，否则不识别。

1、节点访问

l nodeName：节点名称

l nodeValue：节点的值，只有文本节点才有值，元素节点没有值。nodeValue的值只能是“纯文本”，不能含有任何HTML或CSS属性。

l firstChild：第一个子节点。

l lastChild：最后一个子节点

l childNodes：子节点列表，是一个数组。

l parentNode：父节点。

查找<html>标记的方法

l document.firstChild

l document.documentElement

查找<body>的方法

l document.firstChild.lastChild

l document.body

为什么，document.body.firstChild找不到<table>节点？

核心DOM的属性和方法主要是针对HTML4.0开发的，

在firefox下，会把空格或者换行，当成文本节点

Html4.0是没有DTD类型定义的。

2、对节点的属性操作

l setAttribute(name,value):给某个节点添加一个属性

l getAttribute(name)：获取某个节点属性的值

l removeAttribute(name):删除某个节点的属性

必须先加载完body.

3、节点的创建

l document.createElement(tagName):创建一个指定的html标记，创建一个节点

n tagName:是指不带尖括号的HTML标记名称

n 举例：varimgObj=document.createElement(“img”);

l parentNode.appendChild（elementObj）:将创建的节点，追加到某个父节点下

n parentNode:代表父节点，父节点必须存在。

n childNode:代表子节点。

n elementObj：是创建的一个子节点,必须是一个节点对象。而不能是一个节点名称。

n 举例：document.body.appendChild(imgObj);

l parentNode.removeChild(childNode):删除子节点

n parentNode:代表父节点

n childNode:代表要删除的子节点

n 举例：document.body.removeChild(imgObj)

综合示例：随机显示小星星

/* 1.网页背景色

2.创建图片节点，并追加到<body>父节点下

3.图片随机大小

4.图片的随机定位坐标(x,y)

5.定时器，星星出现频率

6.网页加载完成，图片开始显示

7.星星显示的范围，跟窗口的宽高一样 (0,window.innerWidth)

8.点击星星，星星消失。

<!doctypehtml>

<htmllang="en">

<head>

<scripttype="text/javascript">

//网页加载完成

window.οnlοad=function(){

//更改网页背景色

document.body.bgColor="#000000";

//延时器window.setTimeval("函数名"，"时间");意思是'时间'毫秒后执行函数'函数名',只执行一次

//定时器，1秒小时一个星星

window.setInterval("star()",1000);

}

//随机数函数

function getRandom(min,max)

{

varrandom=Math.random()*(max-min)+min;

//向下取整

random=Math.floor(random);

return random;

}

//动画的函数

function star(){

//创建图片节点

varimgObj=document.createElement("img");

//添加src属性

imgObj.setAttribute("src","images/xing.jpg");

//添加width属性，getrandom（）随机数函数

var width=getRandom(10,55);

imgObj.setAttribute("width",width);

//添加style属性（行内属性）

//imgObj.setAttribute("style","border:1pxred solid");

varx=getRandom(0,window.innerWidth);//document.documentElement.clientWidth IE中

vary=getRandom(0,window.innerHeight);//document.documentElement.clientHeight IE中

imgObj.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px;");

//添加onclick属性

//this指针是系统内定的只能在函数中使用，代表当前对象

imgObj.setAttribute("onclick","removeImg(this)");

//将图片节点，挂载到父节点下

document.body.appendChild(imgObj);

}

//删除节点函数

function removeImg(obj)

{

document.body.removeChild(obj);

}

</script>

</head>

<body>

</body>

</html>

HTML DOM简介和新特性

简介

核心DOM中，提供的属性和方法，已经可以操作网页了。为什么还要有HTMLDOM呢？如果在核心DOM中，网页节点层级很深时，访问这个节点将十分麻烦。

那么，HTMLDOM中就提供了通过id直接查找节点的方法，而不用再从HTML根节点开始。

HTMLDOM的新特性

l 每一个HTML标记都对应一个元素对象。如<img>对应一个图片对象

l 每一个html标记的属性，与对应的元素的对象的属性，一一对应。

HTMLDOM访问HTML元素的方法（最常用）

1. getElementById()

l 功能：查找网页中指定id的元素对象。

l 语法：var obj=document.getElementById(id)

l 参数：id是指网页中标记的id属性的值

l 返回值：返回一个元素对象

l 举例：varimgObj=document.getElementById(“img01”);

2. getElementsByTagName(tagName)

功能：查找指定的HTML标记，返回一个数组。

语法：var arrObj=parentNode.getElementsByTagName(tagName)

参数：tagName是要查找的标记名称，不带尖括号。

返回值：返回一个数组，如果只有一个节点，也返回一个数组。

举例：var arrObj=ulObj.getElementsByTagName(“li”)

元素对象的属性

tagName:标签名称，与核心DOM中的nodeName一样

className:CSS类的样式，

id:同html的id属性一样

title:同html的title属性一样

style:同html的style属性一样

innerHTML:包含html标记中的所有内容，包括html标记等

offsetWidth:元素对象的可见宽度，不带px单位，只有css加单位（包含滚动条）不能直接进行修改，相当于静态值，只能访问。自己实验

offsetHeight:元素对象可见高度。不带px单位（包含滚动条）不能直接进行修改，相当于静态值，只能访问。自己实验

scrollWidth:元素对象的总宽度，包括滚动条中的内容，不带px单位（不包含滚动条）

scrollHeight:元素对象的总高度，包括滚动条的内容，不带px单位（不包含滚动条）

scrollTop:指内容向上滚动了多少距离。（有滚动条时才有效）默认值为0；

scrollLeft:指滚动条向左滚动了多少距离。（有滚动条时才有效）

onscroll:当拖动滚动条时，调用JS函数。

综合案例：书讯快递

实现滚动效果

<!doctypehtml>

<htmllang="en">

<head>

<title>Document</title>

body,ul,li{margin:0px;padding:0px;}

body{font-size:12px;}

ul,li{list-style:none;}

#dome{width:180px;height:285px;border:1pxsolid black;margin:50px auto;

padding:0px 10px;overflow:hidden;/*超出部分隐藏*/

}

#dome li{padding:5px 0px; }

</style>

<scripttype="text/javascript">

三个DIV的高度一样

dome内嵌dome1和dome2，

dome2中内容与dome1一致

dome的scrollTop属性来实现滚动

鼠标放上dome滚动，离开停止滚动

window.οnlοad=function()

{ //获取id

var dome = document.getElementById("dome");

var dome1 = document.getElementById("dome1");

var dome2 = document.getElementById("dome2");

//使三个div高度一致

//这里的style属相，又是一个style对象，代表css对象

//style对象的属性与css属性一样

//这里的style属性代表行内样式,div没有行内样式，所以不能通过

//dome1.style.height=dome.style.height;进行赋值

//parseInt(Obj),取出Obj中第一位开始的整数。

dome1.style.height=dome.offsetHeight+"px";//offsetHeight取出的值是不带px单位的，但是css要带px单位

dome2.style.height=dome.offsetHeight+"px";

//颜色只是为了区分

//dome1.style.backgroundColor="#ff66ff";

//dome2.style.backgroundColor="#ffcc00";

//复制内容

dome2.innerHTML=dome1.innerHTML;

//实现滚动

window.setInterval("start2(dome)",40);

}

function start2(dome)

{ varlen=parseInt(dome1.style.height);

if(dome.scrollTop==len)

{ dome.scrollTop=0; }

/*if(dome.scrollTop==dome.offsetHeight)

{

dome.scrollTop=0;

}

*/else

{

dome.scrollTop++;

}

</script>

</head>

<body>

<ul>

</ul>

</div>

</div>

</body>

</html>

CSS DOM动态样式

使用JS操作css中的各属性。

JS只能操作或者修改行内样式（在标记中的style属性）。如：imgObj.style.border=”1pxsolid red”

对于类样式，通过className来赋值（意思就是，样式已经写好，给标记加一个类名就好）,如：imgObj.className=”imgClass”

style对象

每个HTML标记都有一个style属性，但这个style属性又是一个style对象，那么，这个style对象的属性有哪些？style对象的属性，与CSS中的属性一一对应。因此，style对象用来代替CSS.

如：imgObj.style.border=”1pxsoild red”(行内样式)

style对象属性与CSS属性的转换

1. 如果是一个单词，style对象属性，与CSS属性一样

2. 如果是多个单词，第一个单词全小写，后面的每个单词首字母大写，并去掉中划线

a) divObj.style.backgroundImage=”url(images/bg.gif)”

b) idvObj.style.backgroundColor=”red”;

c) divObj.style.fontSize=”18px”;

Event DOM

事件简介

事件主要实现“用户与网页之间的交互”。

当事件发生时，去执行JS代码。

l 当单击图片时（onclick），将图片放大两倍（JS代码）

l 当网页加载完成时，（onload），弹出一个小窗口。

l 当网页放到滚动文本时（onMoseOver）,文本停止滚动。

l 当向下拖动滚动条时（onscroll）,文本向上滚动

l ....

常用事件

n onload:当网页加载完成时，只能给<body>用

n onclick：当点击时，所有标记都适用。

n onscroll:当拖动滚动条时。

n onmouseover:当鼠标放上时。

n onmouseot：当鼠标移开时。

n onsubmit:当提交表单时。

n onreset：当重置表单时

n onfocus:当获得焦点时，把光标定位到文本框中（主要用于表单验证）

n onbblur：当失去焦点时，把光标从文本框中移开（主要用于表单验证）

n onchange:当下拉列表内容改变时。用在下拉列表、上传文件时。

n onselect：当选中文本时。

n onresize:当改变窗口大小时，发生的事件。

n ...

事件句柄属性

HTML标记，都有相应的事件属性。

每一个HTML标记，都对应一个元素对象。元素对象也具有相应发的事件属性。

但是，元素对象的事件属性应该是全小写。

事件属性后面调用的一般是JS函数，通过函数实现相应的功能。

在js中添加事件属性。

在JS中调用无参函数函数时，不需要加括号，直接写函数名（传地址）就OK。

Event对象简介

当事件发生时，向调用函数，传递一个event参数，这个event参数是一个事件对象。该event对象中记录了当前事件发生时的环境信息。如单击时的坐标，事件的类型。

注意：这个event对象是短暂存在的，新的事件发生，原来event的就消失了。

DOM中event对象

DOM中引入Event对象（DOM浏览器就是标准浏览器，火狐，谷歌等）

1. 通过HTML标记的事件属性来传递event对象

在DOM中，event对象是作为事件调用函数时的参数，传递给函数的

该event参数，是系统固定的写法，全小写，不能加引号，它就是event对象参数。（event是系统规定参数是event对象）

2. 使用元素对象的事件属性来传递event对象

DOM中event对象属性

type：当前的事件类型。

clientX,clientY:距离窗口左边和上边的距离。

pageX，pageY:距离网页左边和上边的距离

screenX，screenY:距离显示器屏幕左边和上边的距离。·

当有滚动条时，网页顶边距离和窗口顶边距离就可能不同。

IE中的event对象

IE中的event对象，是window对象的一个属性，可以通过window对象调用，而不需要传参数，如：window.event.type

IE中event对象属性

type:事件的类型

clientX和clientY:距离窗口左边和上边的距离

x和y:距离网页左边和上边的距离

screenX和screenY:距离屏幕左边和上边的距离。

写法二：

实例：点出漫天小星星

<!doctype html>

<htmlοnclick="init(event)">

<head>

<title>Document</title>

</style>

//点出漫天小星星

/*当onclick事件发生时(点击的是html标记)，去显示一个小星星*/

functioninit(e)

{

//创建图片

varimgObj=document.createElement("img");

//追加到<body>节点下

document.body.appendChild(imgObj);

//添加属性

imgObj.src="images/xingxing.png";

//增加宽属性

imgObj.width=getRandom(15,85);

//增加style属性

imgObj.style.position="absolute";

varx=e.clientX?e.clientX:event.clientX;

vary=e.clientY?e.clientY:event.clientY;

imgObj.style.left=x-imgObj.width/2+"px";

imgObj.style.top=y-imgObj.height/2+"px";

//imgObj.setAttribute("onclick","removeimg(this)");

//alert(e.clientX+","+e.clientY);

}

/*functionremoveimg(obj)

{

document.body.removeChild(obj);

}*/

functiongetRandom(min,max)

{

varrandom = Math.random()*(max-min)+min;

returnMath.floor(random);

}

</script>

</head>

</body>

</html>

综合实例：隐藏效果

HTML主要代码：Shoping.html

示例2：<styletype="text/css">

.menu{background-color:red;height:50px;}

.main{height:200px;background-color:blue;}

</style>

functionhidden1()

{

vardivObj=document.getElementById("main");

if(divObj.style.display=="block"){ divObj.style.display="none";}

else{ divObj.style.display="block";}

}

</script>

</head>

<body>

</div>

</body>

综合示例：选项卡效果

Html文件index.html

Js文件代码index.js

综合案例：购物车

1、鼠标放到行上改变背景色，鼠标移出后恢复背景色

Js代码

function productOver(trObj)

{

//trObj.bgColor="red";

trObj.style.backgroundColor="red";

}

function productOut(trObj)

{

//trObj.bgColor="white";

trObj.style.backgroundColor="white";

}

2、删除产品（删除表格行）

//删除行

function deleteProduct(id)

{ //是否要删除？

if(window.confirm("你真的不考虑了吗？"))

{

vartrObj=document.getElementById(id);

//删除节点

trObj.parentNode.removeChild(trObj);

//node_tbody=trObj.parentNode;//分两步完成

//node_tbody.removeChild(trObj);

}

3、购物车计算

商品统计何时进行？

l 网页加载完成，进行商品统计window.οnlοad=productCount.

l 商品删除时，进行商品统计function deleteProduct(){

...

productCount();//执行完商品删除函数后，调用统计函数。

}

l 当修改数量时，进行商品统计

Input标记中加入<input οnblur=”productCount()”>事件//当失去焦点时，即光标离开input时

functionproductCount()

{

var total=0; //总金额

var jiesheng=0; //总结省

var jifen=0; //总积分

//获取id=shoplist的表格对象

vartableObj=document.getElementById("shopList");

//找到表格中所有的行

var arr_tr=tableObj.rows;

//循环每一行，取出行中不同单元格的值

for(var i=0;i<arr_tr.length;i++)

{

//取出每一行的所有单元格

var arr_td=arr_tr[i].cells;

//市场价￥32.00->32.00->32

varprice1=parseFloat(arr_td[2].innerHTML.substr(1));

//当当价￥18.90（95折）->18.90（95折）->18.9

varprice2=parseFloat(arr_td[3].innerHTML.substr(1));

//数量由字符串转换成数值型，

//积分

varjifenObj=parseInt(arr_td[1].innerHTML);

varcount=parseInt(arr_td[4].firstChild.value);

//*****************************

//总金额当当价*数量

total+=price2*count;

jiesheng+=(price1-price2)*count;

jifen+=jifenObj*count;

}

//将总金额、总积分、总结省写到相应位置

document.getElementById("total").innerHTML="&yen"+total.toFixed(2);

//数值对象的方法，转化成了字符串，并保留两位小数

document.getElementById("jiesheng").innerHTML="&yen"+jiesheng.toFixed(2);

document.getElementById("jifen").innerHTML="&yen"+jifen;

}

表格对象的属性

一个<table>标记，对应一个table对象

l rows:获取一个表格所有的行构成的数组

l cells:获取一个行中所有单元格构成的数组。

表单对象

form对象

一个<form>标记，就是一个<form>对象

form对象的属性

l name：表单的名称，主要用来让JS控制表单

l action:表单的数据的处理程序(PHP文件)。不指定action,默认提交给自己。

l method：表单的提交方式，取值：GET、POST。

l enctype:表单数据的编码方式。

form对象的方法

l submit()：提交表单，与<input type=”submit”/>功能一样

l reset():重置表单，与重置按钮功能一样。

form对象的事件

l onsubmit:当单击提交按钮时发生,并数据发往服务器之前发生。主要用来“在表单提交之前进行表单验证”。

l onreset:当单击重置按钮时发生（了解）

获取表单中元素的方式

l 通过网页元素的id来获取对象。Document.getElementById(id)

l 通过HTML标签来获取对象，parentNode.getElementsByTagName(tagName)

l 通过name属性来获取表单元素的对象，表单中所有的元素起点都必须是document对象

n 语法：document.formObj.elementObj

n 访问方式是三层结构：其中，formObj代表表单对象，elementObj代表表单元素对象

n 举例：document.form1.username.value.length

u 说明，form1是表单name=form1的表单

u username，是指表单中name=username的元素

u value是指该元素的值,字符串

u length指该元素值的长度

事件返回值

事件的返回值，会影响对象的默认动作。如<a>标记的默认动作是打开一个网址。

如果事件返回false,则阻止默认动作的执行，如果事件返回true或者空，则默认动作继续执行。

<ahref="http://www.armfly.com" οnclick="returnfalse">stm32</a>

必须加return关键字，如果是函数οnclick=”returnfunctionName()”,函数前加return.

受返回值影响的事件有两个：onclick，onsubmit.

提交和验证方法总结

1、使用submit按钮，结合onsubmit事件来实现（最常用）

2、submit按钮，结合onclick事件，实现表单的验证和提交

3、button按钮，结合submit()方法，实现表单验证提交

<script type="text/javascript">

functioncheckForm()

{//判断用户名是否为空

if(document.form1.username.value.length==0)

{

window.alert("用户名不能为空！");

}

elseif(document.form1.username.value.length<5||document.form1.username.value.length>20)

{

window.alert("用户名只能介于5~20之间！");

}

elseif(checkOtherChar(document.form1.username.value))

{

window.alert("用户名中不能出现特殊符号！");

}

else

{

window.alert("验证通过！");

document.form1.submit();

}

function checkOtherChar(str)

{ //定义一个数组

var i;

vararr=["*","&","<",">","$","\\","/"];

for( i=0;i<arr.length;i++)

{

if(str.indexOf(arr[i])!=-1)

{

return true;

}

if(i==arr.length)

{

return false;

}

</script>

</head>

<body>

<formname="form1"method="post"action="login.php">

用户名:<input type="text"name="username"/>

密码:<inputtype="password" name="userpwd"/>

<inputtype="button" value="提交表单" οnclick="checkForm()"/>

</form>

</body>

input对象

一个<input>标记，就是一个input对象。

input对象的属性（以type=text为例）

l name:表单元素的名称

l value:表单元素的值，用户输入的内容，可以通过该属性来获取

l size:表单的长度

l maxlength:表单元素的最大长度（最多可输入的字符数）

l disabled：禁用属性

l readonly:只读属性

input对象的方法

l focus():获得焦点的方法(定位光标)

Document.form1.username.focus();

l blur():失去焦点的方法（移走光标）

l select():选中文本的方法。

input对象的事件

l onfocus:当获得焦点时。

l onblur:当失去焦点时。

实例：

select对象

select对象属性

l option[]:设置或返回下拉列表中<option>标记构成的数组

l selectedIndex：设置或选中指定的<option>的索引值

n selectedIndex是document.form.site的当前选择项的索引值，从0开始从上往下依次递增，没选中是-1

n 简单的说你可以将列表框理解为一个数组，selectedIndex就是这个数组的索引值，它对应的就是列表中该位置显示的项

l length:指定下拉列表中<option>标记的个数

l name：元素名称

option对象属性

l text:指<option>和</option>之间的文本

l value：是指<option>标记的属性

综合示例：二级联动菜单

（1）二级菜单初始化

a) 当网页加载完成，将arr_province中的数据写入到name=province下拉列表中

b) name=city下拉列表，要根据name=province列表的默认选择（selectedIndex）而改变

（2）根据name=province的选择，来改变name=city中的内容

a) 当改变时，获取选择中的省份的索引值

b) 城市列表，会根据传递过来的索引值,请求对应的二维数组中的数据，并写入city中。

<scripttype="text/javascript">

vararr_province=["请选择省/市","北京","上海","天津"];

vararr_city=[

["请选择城市/地区"],

["东城区","西城区","朝阳区","昌平区"],

["宝山区","长宁区","奉贤区","虹口区"],

["合拼去","河西区","南开区","河北区"]

];

//网页加载完成，初始化

window.οnlοad=init;

function init()

{

//获取对象

varprovince=document.form1.province;

var city=document.form1.city;

//必须先指定省份下拉列表的长度

province.length=arr_province.length;

//循环将省份写入

for(var i=0;i<arr_province.length;i++)

{

province.options[i].text=arr_province[i];

province.options[i].value=arr_province[i];

}

varindex=0;

province.selectedIndex=index;

city.length=arr_city[index].length;

for(varj=0;j<arr_city[index].length;j++)

{

city.options[j].text=arr_city[index][j];

city.options[j].value=arr_city[index][j];

}

function changeSelect(index)

{

var city=document.form1.city;//获取对象

city.length=arr_city[index].length;//给长度

for(varj=0;j<arr_city[index].length;j++)//写入城区

{

city.options[j].text=arr_city[index][j];

city.options[j].value=arr_city[index][j];

}

</script>

</head>

<body>

省份：<select name="province" οnchange="changeSelect(this.selectedIndex)"></select>

城市：<selectname="city"></select>

</form>

HTML5简介

Html5是新一代的HTML

HTML5目前主要应用在手机端，在PC端最新浏览器已经开始支持了，但还不全面。

HTML5是由W3C和WHATWG合作的结果。

W3C是万维网联盟，主要制作各种互联网标准的国际组织。如：xhtml、css、JavaScript、xml、AJAX等。主要想发展xhtml2.0

WHATWG应用程序工作组，是由firefox、chrome、苹果、safari、IE等浏览器公司成立的一个机构。主要面向应用程序的完善和开发。如：在HTML5中使用<video>标记，直接可以播放视频。

<input type=”email”name=”email”/>邮箱验证

Html5支持度测试

http://chrome.360.cn/test/html5/index.html

浏览器市场份额统计

http://tongji.baidu.com/data/browser

文档类型定义

Xhtml1.0中的文档类型定义有三种：过渡性、严格型、框架性

Html5中的文档类型定义：<!DOCTYPE html>

就连IE6最不兼容的浏览器，也支持这个类型定义

网页字符集设置

页面结构标记

<header></header>文件头

<nav></nav>菜单栏

<footer></footer>页脚

文章相关标记

l <article></article>:代表一篇文章

l <aside></aside>:侧边栏

l <section></section>:区块，主要用于排版网页，功能与<div>一样

l <details></details>:一个标题的简介

l <summary></summary>:标题的内容与<details>配合使用

其他标记

l <mark>:重点标注

l <progress>：进度条

n max:最大值

n value:当前值

</section>

<aside>

</aside>

</div>

</body>

<scripttype="text/javascript">

varpro=document.getElementById("pro");

var i=0;

vartimer=window.setInterval("start2()",100);

functionstart2()

{

pro.value=i;

i++;

if(i==pro.max)

{i=0;

//window.clearInterval(timer);

}

</script>

音频标记<audio>属性

l 语法格式:<auto>对不起，你的浏览器不支持auto元素。</auto>

l 常用属性：

n Controls:是否显示控制面板

n Autoplay:是否自动开始

n Src:播放文件路径。支持的文件格式：MP3、ogg、wav

n Loop：是否循环。

<audiocontrols="controls"autoplay="autoplay"src="images/ggh.mp3">对不起，你的浏览器不支持该元素</audio>

视频标记<video>属性

l 语法格式:<video>对不起，你的浏览器不支持video！</video>

l 常用属性：取值本身

n Controls:是否显示控制面板

n Autoplay:是否自动开始

n Src:视频路径。支持的格式：ogg、MP4

n Loop:是否循环

n Width:宽度

n Height:高度

n Poster:第一帧的画面。默认是视频的第一帧。

<videosrc="images/lxb.mp4"autoplay="autoplay"controls="controls"loop="loop"width="400"height="300"poster="images/1.jpg">你的浏览器不支持该元素</video>

表单中新增的属性

l Autocomplete:自动完成，取值on、off

l Autofocus:自动获得焦点，取值本身

表单input元素type属性的值

Email:邮箱验证

Tel:电话验证

Url:网址验证

Color:颜色拾色器

Date:日历

Month:选择月份

Time:时间

Datetime：日期时间

<formname="form1" method="post"action="login.php">

用户名：<inputtype="text"name="username"autofocus="autofocus"/autocomplete="off"><br>

密码：<inputtype="password" name="userpwd"><br>

电话：<input type="tel"name="tel"/><br>

邮箱：<input type="email"name="email"/><br>

网址：<input type="url"name="url"/><br>

选择颜色：<inputtype="color" name="color"/><br>

日历：<input type="date"name="date"/><br>

<inputtype="submit" value="提交表单">

</form>

benben0729

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

js基础

JavaScript简介

JavaScript能干什么

<script></script>标记

常用的 两个客户端输出方法

document.write(str);

window.alert(str)

JS中的注释

变量

基本数据类型

变量数据类型

字符型

布尔型

未定义型

空型

变量的数据类型转换

其他类型转换成布尔型

其他类型转换成字符型

其他类型转化成数值型

函数和方法的区别

判断变量的数据类型：typeof()

从字符串中提取整数和浮点数函数

基本运算符

算数运算符 +、-、*、/、%、++、--

赋值运算符 =、+=、-=、*=

字符串运算符 =、+=

比较运算符：>、<、<=、>=、==、！=、===、！==

逻辑运算符&&、||、！

三元运算符

window.prompt()

写程序的一般步骤

特殊运算符

运算符优先级

If多条件判断和switch的区别。

数组

创建数组

数组的操作

数组对象属性length

函数

函数调用

全局变量和局部变量

引用传值

拷贝传值

匿名函数

二维数组

对象

Js中对象分类

自定义对象

JS中内置对象

String对象的属性和方法

charAt(index)

indexOf()

lastIndexOf()

substr()

substring()

concat()

Array对象

join()

reverse()

数组元素的删除和添加

shift()

pop()

unshift()

push()

Date对象

创建Date对象的方法

Math数学对象

Number数值对象

tofixed()

BOM和DOM简介

BOM

BOM对象结构图

window对象属性

window对象方法

alert()弹出一个警告对话框

prompt()弹出一个输入对话框

confirm():弹出一个确认对话框

close():关闭窗口

print()打印窗口

open()方法

常用的两个客户端输出方法