数据类型:1、数值型:包括整数和浮点数。实际上整数在js底层也是用浮点数表示的,只是转换时用了四舍五入,解释器隐藏了转换细节。
2、文本数据:没有专门的char类型。用''或者""括起来表示字符串。
3、布尔型:取值true或false
申明变量:var varName;变量没有固定类型,可以改变指向不同类型的数据。
js中的自增自减运算符和C++中相同。
解释器从做往右解释代码,所以在解释一串用'+'连接的字符和数字混合的语句时,如果'+'左右都是数字,则先进行加法运算,如果有一个是字符串,数字会被当做字符串进行拼接。
字符串转数字:parseInt(str, base),parseFloat(str),后者会识别字符串中的有效的小数点字符。整数转换一定要写基数,因为没有默认基数。转换失败返回NaN。
可以用isNaN(var)检查是否NaN,isNaN如果传入不能转为数字的字符串,则一定返回true,反之返回false。但是不能直接和NaN做比较,NaN是not a number的缩写,所有的值为NaN的对象比较时都返回false,所以
条件语句中返回false的情况:0,""空字符,null值,undefined微电影,[]空数组,false
typeof:运算符,返回一个值或对象的类型,如果对象未定义或类型未定义,则返回undefined。语法:typeof varObj/value;
数组:最多可以保存2e32个元素。和C++不同,定义数组不需要传递数组长度,而且任何变量都可以指向数组,数组本质是一个类。
创建数组:var varArray = new Array();更简单的:var varArray = [];
可以用索引定位数组元素。
js只支持一维数组,所以如果要多维数组,需要为每个数组元素创建一个数组对象,层层嵌套。定位元素时和C++的多维数组语法相同。
js的逻辑运算符与、或采用短路模式。
switch支持字符串作为条件,而C++只支持数字。
for(item in items)是js的foreach语法。
声明函数:function funcName([varlist]){}
作用域:1、全局作用域:在网页上,任何在函数之外声明的变量,都可用于该页面的所有脚本,无论该脚本在函数内还是函数外。
2、局部作用域:在函数内声明的变量和形参都是局部变量,函数返回后即释放。但是,如果函数把某个局部变量当做返回值来返回,则该局部变量不会被释放。
当命名冲突时,解释器会从最小作用域开始一层层查找变量。
和C++不同,大括号不能定义作用域。
String对象:内置对象。
String对象和字符串比较时,比较的是实际值,但两个String对象比较时,比较的是对象引用。
length:属性,返回字符串的长度
indexOf(str,start),lastIndexOf(str,start):方法,在一个字符串中查找另一个字符串。返回子串的位置,如果没找到返回-1。前者从头向后查找,后者从后向前查找。
substring(start,stop):返回字符串的start到stop-1的子串,如果没有stop,就返回start到结尾的子串。
substr(start, len):返回字符串从start开始的len个字符的子串。
toLowerCase(),toUpperCase():转换大小写。
charAt(pos):返回字符串中在pos位置的字符
charCodeAt(pos):返回字符串中在pos位置的字符的在Unicode编码集的十进制编号。比如A是65,a是97
可以用charCode >= "A".charCodeAt(0)来进行单个字符的比较,但更简单的是C++式的语法:char >= "A"
fromCharCode():静态方法,参数是一系列用逗号隔开的数字,每个数字代表一个Unicode字符集中的字符编码。
trim(str):去掉字符串两头的空格。
split(c/str):用字符c或字符串str分隔本字符串,并返回分隔后的数组
replace(src, dst):用dst的字符串替换本字符串中的src子串,并返回替换后的新字符串,不改变本字符串
search(str):在本字符串中查找str子串,找不到返回-1,和indexOf类似,但是str可以是一个正则表达式
match(str):和search方法类似,但是返回的是每一个匹配的子串组成的数组
正则表达式:用'/'开始,用'/'结束的字符串就是正则表达式,类似于Python的r的功能,可以让字符串中的正则是字面量,而不需要转义。也可以用new RegExp(regstr)的方式创建正则对象,此时regstr中的正则表达式要注意转义。
RegExp的属性:G:全局匹配,而不是匹配到一个结果后就停止;I:不区分大小写;M:多行标志,可以让^和$匹配多行的开始和结束。用法:即在//语法的后面加上属性。
var myreg = /\w+/gi
Array对象:内置对象
length:返回数组中的索引长度,即数组最大索引等于length-1。比如 var a = [];a[10] = 10;则a.length=11
push(element):向数组尾部添加元素,索引增加
concat(Array):链接两个数组,返回新数组
slice(start, end):复制数组中start开始到end-1索引的子数组,如果不包含end,则复制start后的所有元素。把返回的子数组复制到新数组中。
join(c):用字符c把数组元素连接为一个字符串。
sort():按升序本排列数组
reverse():反转本数组的元素顺序
indexOf和lastIndexOf:和String的作用相同。
迭代数组:迭代数组的方法必须传入一个用户定义的函数,该函数原型如下:
function myDeal(value, index, array){ do something}:value,元素的值,index,元素的索引,array,数组本身
every(myDeal):迭代数组中的每个元素是否通过了函数的测试,自定义函数的返回值会被解释为布尔值,如果没有返回值,则其实返回undefined,会被转为false。如果所有元素通过测试,every返回true,否则返回false。
some(myDeal):和every类似,只是如果有部分元素通过测试,则返回true,没有元素通过测试才返回false。
filter(myDeal):返回所有通过测试的元素组成的数组。
上面三个函数是迭代测试函数,下面两个是迭代执行函数,即迭代执行自定义函数,而不进行测试。
forEach(myDeal):迭代数组中的每个元素执行myDeal,注意:此处的自定义函数不能有返回值
map(myDeal):和foreach类似,但是自定义函数必须返回结果,最终map返回每个元素执行结果组成的数组,索引序和元素对应
Math:内置对象,其方法都是静态的,可以不用生成对象,直接用类名.方法名(参数)来使用方法
abs:求绝对值
min,max:返回一列数字中的最小、最大值
ceil:向上取整
floor:向下取整
round:四舍五入
random:返回0-1之间的随机浮点数
pow:返回一个数的指定幂,第一个参数是底数,第二个参数是指数
Number:内置对象,值是有效数字的变量都被识别为Number对象
toFixed(n):四舍五入数值保留n位小数,返回新数值
Date对象:内置对象,创建方式有:
1、var dt = new Date();创建一个时间对象,时间是运行脚本的PC机当前时间和日期
2、var dt = new Date(949278000000):创建对象时指定从GMT的1970.01.01 00:00:00开始算起经过的毫秒数
3、var dt = new Date("31 Jan 2014"):用可读字符串创建时间对象
4、var dt = new Date(y,m,d,h,m,s,ms):传入一列数字代表时间,1-12月用0-11代表,也可以用英文单词或缩写
获取日期:getDate():返回月份的第几天
getDay():返回星期几,周日是0,周一到周六是1-6
getMonth():返回月份,0-11代表1月-12月
getFullYear():返回四位数字的年份
toDateString():返回当前时区的日期字符串
设置日期:setDate():设置为当月中1号开始往后数的n天
setMonth():设置为本年1月开始往后数的第n+1月(n从0开始,代表1月)
setFullYear():设置4位整数的年份
注意:js无法修改运行脚本的PC上的日期和时间
注意:设置日和月,如果超过了范围,会自动往后滚动增加日期,比如setDate(58),表示1号开始后的第58天,超过了一个月的长度,js会根据本月长度自动往后滚动到下个月的正确天数上,月的滚动与此相同。如果超过了年底,也会滚动到下一年。
注意:设置也可以是一个负值,表示时间往回计算,滚动原则同上。
获取时间:getHours(), getMinutes(), getSeconds(), getMilliseconds(), toTimeString(),和获取日期类似。
注意:时间是24小时制
设置时间:setHours(), setMinutes(), setSeconds(), setMilliseconds(),和设置日期类似。
注意:设置时间也会有滚动,原则和日期一样。
定时器:window对象的方法。
一次性定时器:setTimeout(myFun, delay),myFun:回调函数,delay:多少时间后触发计时器,单位ms,返回值是定时器的ID
clearTimeout(ID):在计时器触发前清除计时器。
循环定时器:setInterval(myFun, delay),这里的delay是时间间隔,单位ms,其他说明和setTimeout相同。
clearInterval(ID):清除循环定时器。
自定义对象:之前js没有class,自定义对象可以通过创建object对象或者直接赋值{}来产生,如下:
var myObj = new Object();
var myObj = {}; //推荐
为对象增加属性:直接为属性赋值,也可以为属性赋值为一个函数,如下:
myObj.size = 1024*768; //为myObj对象增加size属性,值是1024*768
但是js并不会检查属性名拼写是否正确,所以如果给属性赋值时拼写错误,只会产生一个新的属性而不会报错。
可以通过{属性名:属性值或匿名函数或函数名[,属性名:属性值或匿名函数或函数名]}来创建对象,并分开单独添加对象的方式更便于阅读理解。
引用类型:类似于C++中的类。创建自定义对象时虽然有属性和方法,但是这些属性方法是对象特有的,不能共享,而且必须产生一个对象才可用。而引用类型是定义一个类型,并不产生对象。定义引用类型,必须定义一个构造函数,构造函数和引用类型名相同,参数可以有多个,语法和普通函数相同,如下:
function MyObject(size, price){
this.size = size;
this.price = price;
}
说明:这里定义了一个引用类型MyObject的构造函数MyObject,this.size和this.price是他的两个属性,他们的值在各个类型对象之间不共享。这种语法和Python类似。
定义方法:
MyObject.prototype.calcPrice = function(){ return this.size*this.price; }
说明:引用类型的prototype属性中添加的属性是所有对象共享使用的,所以引用类型的方法一般作为其prototype属性的子属性。
使用引用类型:通过new来创建引用类型的对象,如下:
var myObj = new MyObject(100, 20000);
注意:如果不使用new,虽然不会报错,但是实际执行不正确,等于是给全局window对象添加了一个属性。
BOM:Browser Object Model,浏览器对象模型,由浏览器提供一组对象,这些对象有预定义好的方法和属性,在浏览器打开网页是被浏览器创建,不需要在js中显式创建。
常见浏览器对象BOM(大部分浏览器都具有的对象及相同的方法和属性)层级关系如下:
window对象----location对象
|-history对象
|-document对象----forms对象
|-images对象
|-links对象
|-navigator对象
|-screen对象
1、window对象:代表浏览器的框架和窗口,其中包含了网页(document),某种程度上代表了浏览器本身。通过window的属性,可以确定浏览器类型、用户访问历史、浏览器窗口大小、用户屏幕大小等,可以修改浏览器状态栏的文本、修改加载的页面甚至打开新窗口。
window对象是全局对象,在浏览器中访问其属性和方法时不需要指定属性名和方法名。实际上,js代码中创建的全局函数和全局变量在浏览器中都被创建为window的属性和方向。
2、history对象:该对象是window对象的属性,用于跟踪用户访问的每个页面。这个页面列表通常称为浏览器的历史栈,用户点击浏览器的前进、回退来重新访问页面。
属性:length:代表历史栈的页面数量
方法:back():回退到前一个页面
forward():前进到后一个页面
go(n):指定回退(负数)多少个页面或前进(正数)多少个页面
3、location对象:该对象是window对象的属性,包含当前页面的位置信息。
属性:href:该页面的URL
hostname:连接的主机名称
port:连接的主机端口
protocol:和主机交互的协议,如"https"
修改location.href指向新URL,或者调用location.replace(url)方法都可以跳转到新页面,区别是前者把新URL加入历史栈顶部,后者用新URL替换历史栈中的当前页。
4、navigator对象:该对象是window对象的属性,包含当前浏览器和当前电脑操作系统的信息。
HTML5为其新增了一个属性:geolocation,用于获取用户电脑的经纬度等信息,用法:
navigator.gellocation.getCurrentPosition(cbGetSuccess, cbGetError),两个函数分别是调用成功或失败的回调函数。cbGetSucc回调函数的参数是position对象,包含latitude、longitude、altitude、speed。cbGetError回调函数的参数是errorObj对象,包含code、message属性,描述了错误码和错误信息。
5、screen对象:该对象是window对象的属性,包含当前屏幕的信息,属性包括height、width,单位像素。属性colorDepth代表屏幕的色彩位数。
6、document对象:该对象是window对象的属性,代表当前页面。
方法:write(str):向网页中输出str,str可以是普通字符串,也可以是可渲染的html代码段。
属性:bgColor:代表页面的背景色。
images集合:document的属性。页面的每个img标签都有一个img对象,img属性name就是对象的名称,每个对象都保存在iamges集合中。
links集合:document的属性。页面上所有链接a标签的集合。
判断浏览器:特性检测,即用if语句判断当前浏览器是否定义了某个特性属性或方法。
if (typeof 属性or方法 != "undefined"){ 使用该特性; }
浏览器嗅探:通过navigator.userAgent属性,该属性字符串中包含了特定浏览器的字符串,但是这个字符串可能变动很大,所以不推荐该方法。
DOM:Document Object Model,文本对象模型。注意:和浏览器对象模型不同,BOM是由浏览器提供的对象,因为会有通用和不通用的对象、属性、方法,用于指定、修改浏览器提供的元素(包括网页本身和浏览器上的功能)而DOM是标准的文档对象模型,提供的也是通用的文档对象,用于设置网页本身节点树。
基本DOM对象:Node:文档中的每个节点都对应一个Node对象;NodeList:Node对象的列表;NamedNodeMap:允许按名称而不是索引访问Node对象。
高级DOM对象:
Document引用对象及方法:只有Document对象的方法可以在页面上查找、创建和删除元素。
查找元素:getElementById(idValue):根据元素的ID属性返回该元素(节点)的引用,返回节点类型对应的引用对象,如h1类型的元素对应的元素对象类型是HTMLHeadingElement,失败返回null
getElementByTagName(tagName):根据标记名称(即标签名称如td)返回一组元素(节点列表)的引用,返回NodeList对象,可以用[]或者item()方法返回具体的列表元素(某个节点对象)
querySelector(cssSelector):返回与给定的选择器匹配的第一个元素(节点)
querySelectorAll(cssSelector):返回与给定的选择器匹配的所有元素(节点列表)
注意:querySelector、querySelectorAll也可以在Element对象上使用
创建元素和文本:createElement(elementName):使用指定的元素类型创建一个节点,返回创建的元素,Element引用类型,Node引用类型
createTextNode(text):创建并返回包含text的文本节点(即元素的内容),Text引用类型,Node引用类型
属性:documentElement,指向一个Element对象,该对象代表了DOM的根节点,一般是<html>元素节点
Element对象及方法:
属性:tagName:保存元素的类型名
方法:getAttribute(attrName):获取元素某个属性的值,如果属性不存在则返回null或空字符串
setAttribute(attrName, value):为元素添加或设置某个属性的值
removeAttribute(attrName):删除属性的值,并用默认值代替
Node对象:导航DOM
通用属性:firstChild 、lastChild:返回元素子节点
previousSibling、nextSibling:在同级节点中,返回本节点的兄弟节点,文本节点也是兄弟节点,即使文本节点内容是空,所以两个元素节点之间总是有至少一个文本节点
ownerDocument:返回包含本节点的文档的根节点
parentNode:返回本节点的父节点
nodeName:返回本节点的名称
nodeType:返回一个数字,代表本节点的元素类型,1是元素节点,3是文本节点
nodeValue:用于设置或获取本节点的内容
通用方法:可以添加和删除DOM节点
appendChild(newNode):将一个Node对象添加到本节点的子节点末尾,返回新添加的Node对象
cloneNode(cloneCHildren):返回当前节点的一个副本,参数是boolean,如果为True,则拷贝本节点及其所有子节点,如果为False,则只拷贝本节点
hasChildNodes():是否有子节点
insertBefore(newNode, referenceNode):在referenceNode前插入一个Node对象,返回新插入的Node节点
removeChild(childNode):从本节点的子节点列表中删除一个子节点,并返回删除的节点对象
注意:一般获取的DOM节点对象,都同时具有Element和Node引用对象类型的属性和方法,而document对象具有Document、Element、Node三种类型的属性和方法
操作DOM元素:
改变外观:1、访问对象的style属性:通过该属性可以直接访问修改元素的css属性,如果css属性名称包含’-‘,则把‘-’去掉,其后面的单词首字母大写,然后可以访问css属性、修改css属性。该属性值直接映射HTML中元素的style属性值,但是不能映射<style></style>或外联样式表文件中设定的css样式。
2、访问对象的className属性,并修改其值为某个CSS类名。该方法可以减少js代码量,可以通过class属性直接引用<style>和外联文件中的css样式,便于引用和修改。
其他有用的属性和方法:适用于所有元素对象
1、offsetTop,offsetLeft:返回元素相对于父元素的上、左偏移量,便于确定当前元素的位置
事件:JS可以监听和响应的事件包括:鼠标事件;键盘事件;进度事件(如网页加载过程);表单事件(表单某个内容被改变);突变事件(DOM节点发生改变);触摸事件(触摸屏);错误事件(出错时)。JS的内置对象并没有事件,事件是由BOM和DOM对象提供的。
三种把代码关联到事件的方法:
1、指定HTML属性;在HTML中为元素添加事件响应属性,如onclick属性。可以为事件属性设置一行JS表达式,或者是“ return fun()",即设置一个响应函数,某些事件需要通过函数的返回值来判断是否继续执行,比如超链接<a>的onclick需要返回值判断是否要执行跳转,而有些事件不需要返回值,则可以直接给事件属性一个响应函数,而不需要return。
例1:<a href="www.baidu.com" οnclick="alert('跳转到百度')"></a>
例2:<a href="www.baidu.com" οnclick="return myFun()"></a>
脚本中:function myFun(){return True;}
例3:<body οnlοad="myLoad()" οnunlοad="myUnload()"></body>
响应函数也可以传入参数,传入的参数有两种:this,event,如<a href="www.baidu.com" οnclick="return myFun(this)"></a>,如果事件属性的响应函数字符串中写的是this,那么响应函数内收到的参数直接指向了元素的对象,如果写的是event,那么响应函数内收到的就是一个Event对象,该对象包含了事件类型、发生事件的元素对象。所以一般写的是event。
缺点:1)HTML和JS混写,不易维护;2)不修改HTML就不能修改关联的响应函数;3)只能为HTML中出现的元素关联响应函数,对于动态创建的元素无法关联。
2、指定对象的特定属性(如事件属性);
例:document.getElementById("myLink").onclick = directPage;
function directPage(e){ return e.type);
即把函数对象赋值给ID是“mylink”的节点的onclick方法属性。如果οnclick=null,则删除响应函数。
缺点:属性只能有一个响应函数,不能添加多个响应函数
3、标准事件模型:每个DOM元素都有EventTarget对象的属性,该对象有两个方法,用于添加和删除事件监听器。
addEventListener:为元素添加响应函数
例:document.getElementById("myLink").addEventListener("click", function (e){ e.type; e.preventDefault()});
e.preventDefault()可以阻止执行默认操作。
该模型可以为同一个元素的同一个事件注册多个响应函数,函数将按注册的顺序执行。
removeEventListener:如果注册时使用的是命名函数,那么可以用移除这个响应函数。
Event对象:响应函数的入参,具有如下属性:
bubbles:表示是否允许事件冒泡,即事件是否可以沿着DOM上传
cancelable:表示是否可以取消事件的默认行为
currentTarget:事件在DOM中传递时,指定事件的当前目标
defaultPrevented:表示在事件上是否调用preventDefault
eventPhase:表示事件当前处于事件流的哪个阶段
target:表示引发事件的元素(文本节点也可以)
timestamp:表示事件发生的时间
type:表示事件的类型
MouseEvent对象:鼠标相关的事件,属性如下:
altKey:表示事件发生时,是否按下ALT键
button:表示按下鼠标的哪个键
clientX,clientY:表示事件发生时鼠标在浏览器窗口的水平、垂直坐标
ctrlKey:表示事件发生时,是否按下CTRL键
metaKey:表示事件发生时,是否按下META键
relatedTarget:用于标识第二个事件目标。对于mouseover事件,该属性表示鼠标指针退出的元素;对于mouseout事件,该属性表示鼠标指针进入的元素
screenX,screenY:表示事件发生时,鼠标相对于屏幕的水平、垂直坐标
shiftKey:表示事件发生时,是否按下SHIFT键
如果响应的事件是鼠标事件,那么响应函数的入参就可以同时访问到Event对象和MouseEvent对象的属性,但如果响应的事件不是鼠标事件,则响应函数不能访问到MouseEvent对象的属性
可以产生MouseEvent对象的事件有:
click:当指针位于某个元素或文本上时,单机鼠标触发
mousedown:当指针位于某个元素或文本上时,按下鼠标触发
mouseup:当指针位于某个元素或文本上时,弹起鼠标触发
mouseover:指针移入某个元素或文本时触发
mousemove:指针位于某个元素或文本上时触发
mouseout:指针从某个元素或文本上移开时触发
拖动事件:为元素设置draggable="true",可以让元素变成可拖动元素。相关事件如下:
1、dragstart:开始拖动时在元素上触发,从本地拖动到浏览器不能触发
2、drag:拖动过程中一直触发
3、dragend:拖动停止时触发,无论是否释放了该元素,从本地拖动到浏览器不能触发
4、dragenter:当拖动本地文件或网页元素第一次进入另一个元素时,在另一个元素上触发,即由另一个元素响应,可以用于拖动任务的结束,即该元素可以接收拖动内容
5、dragover:当拖动本地文件或网页元素时,移动到另一个元素,在另一个元素上触发
6、dragleave:当拖动本地文件或网页元素时,移除另一个元素,在另一个元素上触发
7、drop:释放鼠标时,在释放时鼠标所在的元素上触发
事件(1)(2)(3)是事件源触发的事件,事件(4)(5)(6)(7)是目的元素触发的事件。
注意:dragover在浏览器中会有默认行为,导致drop无法触发,所以如果想响应drop,需要响应dragover,并且e.preventDefault()禁止默认行为。drop在不同浏览器中也会有不同的默认行为,也可以通过e.preventDefault()禁止。
可以通过DataTransfer对象在拖放过程中传递数据。DataTransfer对象可以通过event对象的dataTransfer属性访问。该对象有两个方法:
setData(type, value):设置传递的数据,第一个参数是数据类型,IE支持“text”和“html”,其他浏览器同时支持MIME类型数据
getData(type):根据setData时的type来读取数据。
setData在dragstart时设置,getData在drop时读取。
HTML表单:不论页面有几个独立表单,每次只能向向web服务器提交一个表单的信息。<form/>标记内的元素就是一个独立表单区域,可以设置的属性有:action:表单提交到哪里;method:如何提交信息put/post;target:表单的响应加载到哪个框架上。
<form/>表单对应的元素对象是HTMLFormElement对象,可以用forms集合来引用表单对象,也可以用元素查找函数来查找表单,如果表单有name属性,也可以通过docment.form_name访问表单对象。表单的其他属性对映射到了关联的对象属性。
HTMLFormElement对象的elements对象也是集合,保存了表单内所有交互元素的对象(除了<input type=images/>),可以用form[n]或form.elements[n]选取元素。elements的length长度和Form对象的length长度相同。
Form对象有submit()方法和submit事件、事件监听器,但是,用submit()方法提交表单时,不会触发submit事件和监听器。
Form对象有reset()方法,可以清空表单或还有默认值(如果有)。
submit事件也支持e.preventDefault来取消默认操作(即向服务器提交表单),因为可以在事件响应中检查数据进而决定是否提交到服务器。
表单中的交互元素:所有<input/>创建的元素都对应于HTMLInputElement对象
1、文本元素:<input type="text"/>,普通文本/<input type="password"/>,密码输入/<textarea></textarea>,大块文本显示/<input type="hidden"/>,隐藏文本框,当需要把多个页面的信息提交给服务器时,可以把前面页面的数据放到隐藏文本框中,最后统一发送给服务器。
2、选择按钮:<input type="checkbox"/>复选框/<input type="radio"/>单选按钮
3、列表框:<select><option></option></select>下拉列表框(combobox)/<select size="4"><option></option></select>列表显示框(listview)
4、按钮:<input type="button"/>或者<button></button>普通按钮/<input type="submit"/>提交按钮/<input type="reset"/>重置按钮
表单交互元素对象共有的属性和方法:
1、name属性:提交表单信息到服务器时,name会和value一起提交
2、value属性:交互元素的值。但是不同元素的value的含义不同,需要区别对待
3、form属性:交互元素所属的表单对象。对于submit元素,可以通过该属性来检索表单下的交互元素的值,进行数据检验,而无需特别指定表单对象。
4、type属性:交互元素的类型
5、focus():调用该方法使该对象成为焦点对象,调用该方法或通过交互获得焦点,则触发该对象的focus事件,onfocus事件处理属性进行响应
6、blur():调用该方法使该对象失去焦点,调用该方法或通过交互获得焦点,则触发该对象的blur事件,onblur事件处理属性进行响应
注意:如果若干元素在自身的onfocus和onblur中设置了其他元素的focus和blur,则可能引起死循环。
7、readonly属性:元素只读。
交互元素独有的属性和方法:
1、按钮button:value属性的含义是在按钮上显示的文字。
特殊事件:mouseup,mousedown,鼠标在按钮上按下或回车时触发
submit和reset有自己的功能,一般不需要修改。
2、文本框text:value含义是文本框中的文字,可以读取和显示。文本框的值一般都会当做字符串,需要数字时可以用Number()或parseInt()、parseFloat()进行转换
特殊属性:size,可以容纳的文本字符宽度;maxlength,最长输入字符长度;readOnly,文本框只读,防止修改文本框内容。
特殊方法:select():选择或加亮文本框中的所有文本
特殊事件:select:用户选择文本框中的文本时触发
change:当且仅当文本框失去焦点时的值和获取焦点的值不同时触发该事件,即该事件可
以在文本框的值发生了改变时才进山数据校验。
keypress,keydown,keyup:按键、按下、弹起时触发
3、文本域textarea:元素没有value属性,但是对于的HTMLTextareaElement对象有value属性,含义是<textarea></textarea>标签之间的文本。元素属性和text类似,但是没有maxlength。
特殊属性:cols,显示区每行显示的文本字符数;rows,显示区可显示多少行;wrap,是否启动自动换行,off是关闭,soft是启动,向服务器提交消息时不带换行符,hard是启动,向服务器提交消息时每个自动换行的地方都添加操作系统的换行符(Windows是\r\n,Linux是\n)。
特殊事件:keydown、keyup、keypress、change
4、单选框radio和复选框checkbox:对应的是HTMLInputElement对象。value是HTML或js预定义的,与用户交互无关,每次返回相同的值。
特点:创建radio,一组name相同的radio就是一组单选框,只能为其中一个设置元素属性:checked="checked",多个设置则只取最后一个。创建单选框组后,在js中用name引用时就是一组单选框,可以像数组一样访问。
特殊属性:checked:检查按钮是否被选中,对于radio,需要循环变量每个radio找到选中的那个。
5、下拉列表和列表框:下拉列表其实是列表框的特殊情况。<select>元素对应HTMLSelectElement对象。该对象有一个options属性,对应<select>元素内部的<option>组。<option>元素对应HTMLOptionElement对象。
特殊属性:<select>标签的size属性:定义列表框可见行数,如果是1,就是下拉列表框;<option>标签的selected属性:定义该项是否被选中,选中值selected
特殊属性:HTTPSelectElement:selectIndex,返回索引值表示哪些option被选择,结合options属性可以获取被选择的HTTPOptionElement;length,返回被选option的数量
特殊属性:HTTPOptionElement:index,返回该option在select的options属性中的索引;text,该元素显示的文本;value,为option定义的值,提交表单时会发给服务器
特殊方法:在脚本中添加和删除option选项
1、创建新的option对象:new Option(text, value);参数1要显示的文本,参数2绑定的值
2、添加option对象/元素:theSelectElement.options[n]=newOption;把新option对象赋予select对象的索引n的位置,该位置如果之前有元素,则会被取代
3、删除option对象/元素:theSelectElement.options[n]=null;删除索引位置n的option元素,options会自动重新排列,n之后如果有其他元素,则他们的索引都减1
标注方法添加新选项:1、创建新的option对象(同上);2、用Select对象的add(newOpt, pos)插入新option,参数1是新option对象,参数2是插入的option前一个位置的option,如果是null,则放到options末尾,该方法会自动调整options数组,插入元素不会取代其他元素
特殊事件:blur,focus,change,当用户改变选择触发change
HTML5中<input/>新增的属性:1、autocomplete,控件的值可以由浏览器自动填充;2、autofocus,页面加载控件时是否有焦点;3、form,相关表单的ID,如果指定则控件可以放在源文件的任意地方,否则只能放在<form/>元素内;4、maxLength,为text、email、search、password、tel、url指定最大输入字符数;5、pattern,用该正则表达式检查控件输入的值;6,placeholder,提示字符用于说明控件该输入什么;7、required,指定在提交表单前用户必须给控件输入值;8、type="range",滑块的特殊属性:min,滑块最小值;max,滑块最大值;step,滑块步进值
HTML5中<input/>新增的事件:input,当元素的值发生改变时触发(change是失去焦点并且值发生变化时触发)
HTML5新增的表单控件:
<output/>:用于显示输出值,需要个form关联。属性:for="",关联的显示其值的元素,与渲染无关,用于语义说明;form="formXXX",关联的form表单的id;value,在<output></output>直接显示的文本。如果用form关联了表单,就可以通过Form对象按name引用该元素。
<meter/>:用于图形化的显示范围值。属性:min,max,最大最小值;optimum,low,high会影响元素的颜色(语义说明);value,显示的值。如果不支持该元素,则显示标签中间的文本
<progress/>:表示任务完成的进度。属性:value,表示控件的值;max,控件可显示的最大值。如果不支持该元素,则显示标签中间的文本
JSON:js中可以用JSON对象处理js对象的串行化和反串行化。
串行化:JSON.stringify(js对象);把js对象串行化为json字符串
解析json:JSON.parse(json语句);把json字符串解析为js对象
例:在可拖动元素中,可以通过dataTransfer传递数据,但是只能传递字符串,不能传递js对象,此时可以把js对象串行化为json字符串。
Web存储:Web存储分为本地存储(localStorage对象)和会话存储(sessionStorage对象)
会话存储在关闭浏览器后就被删除。
特点:数据保存在浏览器上,不传递给服务器;存储空间更大,Chrome和Firefox是5M,IE是10M;本地存储的数据不会过期,除非开发人员或用户主动删除;数据按键值对存储
方法:setItem(key, value);设置键值对,如果key含有空格等特殊字符可以使用
localStorage.key = value;设置键值对
value = getItem(key);获取数据
localStorage.removeItem(key):删除数据
localStorage.key = null;删除数据
localStorage.clear();删除所有数据
使用:本地存储只能存字符串的键值对,所以对于js对象,可以用JSON.stringify串行化为字符串后保存,使用的时候JSON.parse解析出来
AJAX:可以通过js直接和服务器进行HTTP交互,发送获取数据,实现网页的局部刷新
XMLHttpRequest:浏览器内置对象,所有浏览器都支持,封装了AJAX功能
创建:var request = new XMLHttpRequest();
使用:1、request.open(requestType, url, async);初始化XMLHttpRequest对象。参数1是请求类型字符串,可选值"GET"/"POST";参数2该请求要发往的URL;参数3取true/false,表示是否异步模式请求,同步模式会阻塞浏览器,所以默认是true
2、request.send(msgbody);open创建了请求的HTTP包,send传入的是请求包附带的请求体,如果没有传入null
属性:status,该属性表示服务器返回的状态码;readyState,数值,代表当前的请求状态,用于异步请求,状态码0=已创建对象,未调用open,1=已调用open,未发送请求,2=请求已发送,标题和状态已接收到并可用,3=接收到服务器的响应,4=接收完请求数据;responseXML,把接收到的数据加载到XML DOM对象中;responseText,返回纯文本
注意:即使readyState返回了4,但是仍需要检查status
事件:readystatechange,处理方法:request.onreadystatechange=cbfun;
iframe技术:在网页中内嵌隐藏的iframe用于网页ajax请求和跳转,这样当用户回退网页时,其实还在本页,而且能保留之前的交互数据
HTML5多媒体:新增了<video>和<audio>标签
<video>:属性:src="a.mp4",用于加载服务器本地视频文件;controls,显示浏览器默认的视频控制控件;preload,预先加载视频文件可解码的第一幅图作为网页中视频预览的画面;poster="b.jpg",把preload的画面换成自定义图片。
<source>:子元素,放在<video/>之间,属性:src="a.mp4",当服务端有多个格式的视频文件时,用多个该元素可以让浏览器选择加载某个可解码的视频;type="video/mp4",该视频文件的格式,也支持MIME字符串;codecs=“ssss”,该视频文件具体的编码信息
当浏览器不支持video属性时,显示标签的文本内容。
video和audio元素对应HTMLMediaElement对象。
创建:var obj = document.createElement("video");
方法:canPlayType(mimeType):支持参数指定的格式的可能性,返回值:probably,可以播放;maybe,不播放视频无法判断;"",无法播放。
load():开始从服务器上加载视频
pause():暂停媒体播放
play():开始或继续媒体的回放
属性:autoplay,表示获得足够显示的媒体数据后,是否子欧诺个开始播放;controls,对应媒体元素的controls属性;currentTime,当前播放的时间,修改时间会把媒体设置为新时间;duration,获取媒体的长度,单位秒,如果没有可用媒体,返回0,如果无法确定时长,返回NaN;ended,是否要结束播放;loop,对应媒体元素的loop属性,是否循环播放;muted,是否静音;paused,是否暂停;playbackRate,播放速率,1.0是常速;poster,对应元素的poster属性;src,对应元素的src属性;preload,对应元素的preload属性;volume,音频音量0.0~1.0
注意:如果用obj.src="a.mp4"修改了播放的视频,那么一定要obj.load();来加载视频,然后obj.play();,否则直接play无法播放视频
常用事件:"abort",中止媒体播放时触发;"canplay",媒体数据足够播放时触发;"canplaythrough",整个媒体文件可以回放;"durationchange",媒体的时长发生变化;"ended",回放完成时触发;"error",发生错误时触发;"loadstart",开始下载媒体文件;"pause",暂停时触发;"playting",开始播放或继续播放;"progress",正在下载媒体文件;"ratechange",播放速率发生变化;"seeked",播放位置偏移时触发;"seeking",播放位置开始偏移时触发;"timeupdate",修改了currentTime属性;"volumechange",改变了volume或muted属性