您的位置:首页 > Web前端 > JavaScript

《JavaScript详解》学习笔记

2016-06-12 17:33 489 查看
第1章 JavaScript简介

web页面可以被分成三层:HTML内容层、CSS样式层、JavaScript行为层

JavaScript事件处理函数:

事件处理函数 如何触发

onAbort 终止图片加载

onBlur 用户移出某表单元素

onChange 用户修改了表单元素的值

onClick 用户单击了类似按钮的表单元素

onError 程序在加载图片的时候出现错误

onFocus 用户激活了某表单元素

onLoad 页面加载完毕

onMouseOut 鼠标从某对象上移出

onSubmit 用户提交表单

onUnload 用户离开了窗口或框架页

<script type="text/javascript"></script>:JavaScript代码放置在两标签之间,type属性用来标识脚本语言和Internet内容类型

<script type="text/javascript" src="http://servername/JavaScriptfile.js"></script>: 引入JavaScript外部文件

www.validome.org:在线验证工具,用来检测标签是否正确

第2章 脚本的安装

//: 单行注释

/* */: 块注释

"hot" + "dog": 使用+号串连字符串

document.write("Hello to you");: JavaScript键当前文档作为文档对象document,write()方法在实质上和writeln()方法是一样的,只有一种情况例外:当文本插入在<pre>标签中时,writeln()方法会换行,<pre>标签用来标示预格式化文本,达到“所见即所得”的效果,显示所有空格和换行

Firebug是一款Firefor插件,用于编辑、调试和监视页面上的CSS、HTML和JavaScript

JavaScript: expression: URL伪协议,将JavaScript:后跟JavaScript表达式或表达式集合输入地址栏,可以得到运行结果,可用于调试或测试代码

<script type="text/javascript">

<!--在较老的浏览器中隐藏JavaScript

document.write(<h2>Welcome to Maine!</h2>");

// -->

</script>: <!--为HTML注释的开始,//为JavaScript注释的开始,JavaScript会将"--"识别为一种特殊符号,因此须将-->注释掉

<noscript>

Please turn JavaScript on if you want to see this page!<br>

</noscript>: 启用JavaScript的浏览器可以识别<noscript>,其中的内容会被忽略,不支持JavaScript的浏览器不能识别<noscript>,将忽略此标签,并把其中的内容显示出来

第3章 数据类型、字面量和变量

转义序列:转义序列只在<pre>标签内和警告框中起作用

\' 单引号

\" 双引号

\t 制表符

\n 换行符

\r 回车符

\f 换页符

\b 退格符

\e Escape键

\\ 反斜杠

\XXX 由一位到三位八进制数表示的Latin-1字符

\xXX 由两位十六进制数表示的Latin-1字符

\uXXXX 由四个十六进制数表示的Unicode字符

typeof(55): 返回为number,返回值还可能是string,boolean,object,null,undefined

null: 是JavaScript的一种对象,用来初始化变量

undefined: 未初始化的变量的值为undefined,使用这个变量会产生一个运行时错误

var variable_name;: 声明未初始化的变量时必须使用关键字var

局部变量是在函数内声明创建的变量

const FREEZING = 32;: 声明常量

第4章 对话框

alert("Phone number is incorrect");: 警告对话框,窗口对象的方法不需要在前面加上窗口对象名,因为窗口是最顶层的浏览器对象

var name = prompt("What is your name?", "");:提示对话框,第一个参数为提示,第二个参数为文本框中初始值,返回值为文本框中文本,取消则返回null

confirm("Are you really OK?");: 确认对话框,如果用户单击OK按钮,将返回true,如果单击Cancel按钮,将返回false

第5章 运算符

===: 等同(类型相同)

!==: 不等同(类型不相同)

/: 除法运算符返回一个浮点型除法结果,而非取整除法

字符串和数字相等测试:

测试 是否相等

5 == 5.0 true

"54" == 54 true

"5.4" == 5.4 true

NaN == NaN false

null == null true

-0 == +0 true

false == false true

true == 1 true

null == undefined true

字符串和数字的等同测试:

测试 是否等同

5 === 5.0 true

"54" === 54 false

NaN === NaN false

null === null true

-0 === +0 true

false === false true

true === 1 false

null === undefined false

逻辑与示例:

表达式 计算规则

"honest" && true true

true && "" (空字符串)

true && "honest" honest

5 && 0 0

5 && -6 -6

5 && false false

null && 0 null

null && "" null

null && false null

"hello" && true && 50 50

"this" && "that" that

逻辑或示例:

表达式 计算规则

true || false true

true || true true

"honest" || true honest

true || "" true

true || "honest" true

5 || 0 5

5 || -6 5

5 || false 5

null || 0 0

null || "" (空字符串)

null || false false

"hello" || true || 50 hello

"this" || "that" this

逻辑非示例:

表达式 计算结果

!"this" false

!0 true

!2 false

!false true

!null true

!undefined true

位运算符:

运算符 计算规则

& 如果两个相应位都为1则该位返回1

| 如果两个相应位有一个为1则返回1

^ 如果两个相应位只有一个为1则返回1

~ 将运算符按位取反

<< x<<y,将二进制数x向左移y位,右边补0

>> x>>y,将二进制数x向右移y位,左侧用最左边的位来填充

>>> x>>>y,将二进制数x向右移y位,左边填0

数据类型转换:

String() 转换成字符串

Number() 转换成数字

Boolean() 转换成布尔值

parseInt(字符串,基数);:将字符串转换为整数值,从字符串的开头开始解析,在第一个非整数位置停止解析,并返回当前读到的所有整数,如果字符串不是以整数开头,则返回NaN,默认基数为10

parseFloat(字符串);: 将字符串转换为浮点值,从字符串的开头开始解析,在第一个非数字位置停止解析,并返回当前读到的所有数字,如果字符串不是以数字开头,则返回NaN

eval(字符串);: 将字符串作为JavaScript表达式进行计算,并返回计算结果,如果没有结果则返回undefined

特殊运算符:

运算符 操作

delele 删除对象、对象的属性或者指定索引位置的数组元素

function 定义一个函数

in 如果属性是一个指定对象的属性则返回true

instanceof 如果对象是指定对象则返回true

new 创建一个用户定义的对象类型或一个内置对象类型的实例

this 引用当前对象

void 无返回值

第6章 条件选择

if语句:

if(age > 21) {

alert("Let's Party!");

}

switch语句:

switch (color) {

case "red":

alert("Hot!");

break;

case "blue":

alert("Cold.");

bread;

default:

alert("Not a good choice.");

break;

}

while语句:

while (i < 10) {

document.writeln(i);

i++;

}

do while语句:

do {

document.writeln(i);

i++;

} while ( i < 10);

for语句:

for( var i = 0; i < 10 ; i++) {

document.write(i);

}

标签:

outerLoop: for(var row = 0; row < 10; row++) {

....

break outerLoop;

}

第7章 函数

function greetings(pal) {

alert("Greetings to you, " + pal);

}: 定义函数,函数一般放在<head>中,函数可以在<script>中调用,在链接中调用或者在事件触发时调用,如果函数定义了两个形参,而我们传递了三个实参,则第三个实参会被忽略,若只传递一个实参,则第二个形参是未定义的,如果函数没有定义return语句,则返回undefined值

<a href="JavaScript:greetings()"></a>: 在链接中调用函数

onClick = "greetings('Dan');": 在事件中调用函数

var greets = function() { return "Greetings to you!";}: 匿名函数变量,其值是函数定义,可被用作函数引用

text = greets;: 其值是函数定义

text = greets();: 函数调用,其值是函数返回值

闭包:

function paint(type, color) { //闭包是定义在另一个函数中的匿名函数

var str = "The " + type + " is " + color;

var tellme = function() { //定义匿名函数

document.write("<big>" + str + ".</big><br />");

}

return tellme;//返回函数的引用

}

var say = paint("rose", "red");

say();//调用匿名函数

递归的定义:递归,见递归

主要的错误类型:

错误名 什么时候会引起该错误

EvalError 以错误的方式使用eval()函数

RangeError 数字变量或参数超出允许范围

ReferenceError 使用不合法的引用,如没有定义的变量

SyntaxError 在对eval()中的代码进行语法分析时发现错误

TypeError 变量或参数的类型错误

URIError encodeURI()或decodeURI()接收到不合法的参数

第8章 对象

创建类:

function Book() {

this.title = "The White Tiger";

this.author = "Aravind Adiga";

}

创建对象:

var bookObj = new Book;

this.calculate = function() { return r * t; }: 匿名函数作为对象方法

创建对象字面量:

var soldier = {

name: undefined,

rank: "captain",

fallIn: function() {

alert("At attention, arms at the side, head and eyes forward.");

}

};

with关键字中,后面语句块中可以省略对象名和点,直接引用对象的属性和方法

with(employee) {

document.write(name, ssn, address);

}

Book.prototype.publisher = "Penguin Books";: 通过Book类的prototype属性,给Book类添加publisher属性

Object对象的属性和方法:

constructor 对创建对象函数的引用

prototye 对对象原型的引用

toString() 返回表示指定对象的字符串

valueOf() 返回指定对象的原始值

hasOwnProperty(property 如果指定属性属于该对象,返回真,不包括从它的原型对象链继承来的属性

isPrototypeOf(object) 如果被检测对象是指定对象的父原型对象之一,则返回真

sr1 instanceof String: 判断对象sr1是否是String对象

第9章 JavaScript核心对象

var months = new Array();: 声明一个数组,且没有指定数组大小

var friends = ["John", "Jane", "Niveeta", "Su"];: 使用字面量符号声明数组

数组属性:

constructor 引用对象的构造函数

length 返回数组的元素数

prototype 通过增加属性或方法来扩展数组定义

states["CA"] = "California";: 关联数组,使用字符串代替数字组为索引值

cat.color = "black";与cat["color"] = "black";两者等效

数组方法:

concat() 合并两个数组

join() 把数组的所有元素放入一个字符串,元素通过指定的分隔符进行分隔

pop() 删除并返回数组的最后一个元素

push() 向数组的末尾添加一个或多个元素

reverse() 颠倒数组中元素的顺序

shift() 删除并返回数组的第一个元素

slice() 从已有数组中选取部分元素构成新数组,第一个参数是复制的起始元素,第二个参数是复制的终止元素,且不包括终止元素

sort() 对字符数组或数字数组进行排序

splice() 删除并/或者替换数组元素,第一个参数是起始位置,第二个参数是元素个数,若后跟插入元素则插入之,若没有则删除之

toLocaleString() 把数组转换为本地格式,并返回结果

toString() 把数组转化为字符串,并返回结果

unshift() 向数组开头添加一个或多个数组

创建日期对象:

new Date();: 返回本地日期及时间

new Date("March 15, 2010 09:25:00");

new Date("March 15, 2010");

new Date(10, 2, 15);

new Date(10, 2, 15, 9, 25,0);

new Date(500);

Date对象方法:

getDate() 返回一个月中的某一天(1~31)

getDay() 返回一周中的某一天(0~6),0为周日

getFullYear() 以四位数返回年份

getHours() 返回小时(0~23)

getMilliseconds() 返回毫秒

getMinutes() 返回分钟(0~59)

getMonth() 返回月份(0~11),0为一月

getSeconds() 返回秒数(0~59)

getTime () 返回1970年1月1日至今的毫秒数

getTimeZoneOffset() 返回本地时间与UTC时间的分钟差

getUTCDate() 根据世界时返回月中的一天(1~31)

getUTCDay() 根据世界时返回周中的一天(0~6)

getUTCFullYear() 根据世界时返回四位数年份

getUTCHours() 返回世界时小时(0~23)

getUTCMilliseconds() 根据世界时返回毫秒(0~999)

parse() 返回1970年1月1日到指定日期的毫秒数

setDate(value) 设置一月中的某一天(1~31)

setFullYear() 设置年份(四位数)

setHours() 设置一天中的小时(0~23)

setHours(hr, min, sec, msec) 设置本地或UTC时间的小时

setMilliseconds() 设置毫秒(0~999)

setMinutes(min, sec, msec) 设置本地时间或UTC时间的分钟(0~59)

setMonth(month, day) 设置本地时间的月份

setSeconds() 设置秒钟(0~59)

setTime() 以毫秒设置Date对象,从1970年1月1日起

setUTCdate() 根据世界时间设置一个月份中的一天(1~31)

setUTCFullYear() 根据世界时间设置年份(四位数)

setUTCHours() 根据世界时间设置小时

setUTCMilliseconds() 根据世界时间设置毫秒

setUTCMinutes() 根据世界时间设置分钟

setUTCMonth() 根据世界时间设置月份

setUTCSeconds() 根据世界时间设置秒钟

setYear() 设置年份数,从1900年起计数(00~99)

toGMTString() 根据世界时返回日期字符串

toLocaleString() 根据本地时间格式,转换成字符串,10/09/99 12:43:22

toSource() 返回Date对象的源代码

toString() 把Date对象转换成字符串

toUTCString() 根据世界时,把Date对象转换成字符串,10/09/99 12:43:22

UTC() 将逗号分隔表示的时间值转换为毫秒数

valueOf() 返回Date对象的原始值,以毫秒表示

Math对象的属性:

属性 描述

Math.e 欧拉常数、自然对数的底数

Math.LN2 2的自然对数

Math.LN10 10的自然对数

Math.LOG2e 以2为底e的对数

Math.LOG10e 以10为底e的对数

Math.PI 派

Math.SQRTI_2 1除以2的平方根

Math.SQRT2 2的平方根

Math对象的方法:

Math.abs(Number) 返回Number的绝对值

Math.acos(Number) 以弧度形式返回Number的反余弦

Math.asin(Number) 以弧度形式返回Number的反正弦

Math.atan(Number) 以弧度形式返回Number的反正切

Math.atan2(y,x) 返回y/x的反正切

Math.ceil(Number) 对Number向上取整

Math.cos(Number) 以弧度形式返回Number的余弦

Math.exp(x) 返回欧拉常数e的x次幂

Math.floor(Number) 对Number向下取整

Math.log(Number) 返回Number的自然对数(以e为底)

Math.max(Number1, Number2) 返回Number1和Number2中的较大值

Math.min(Number1, Number2) 返回Number1和Number2中的较小值

Math.pow(x, y) 返回x的y次幂

Math.random() 生成0.0~1.0的伪随机数,以计算机的系统时间为种子生成

Math.round(Number) 返回最接近Number的整数,小数部分是0.5时向上取整

Math.sin(Number) 以弧度形式返回Number的正弦

Math.sqrt(Number) 返回Number的平方根

Math.tan(Number) 以弧度形式返回Number的正切

Math.toString(Number) 将Number转换为字符串

创建String对象:

var string_name = "string of text";

var string_name = new String("string of text");

String对象的属性:

length 返回字符串的字符长度

constructor 返回创建String对象的函数

prototype 通过添加属性和方法扩展字符串定义

String对象(HTML)方法

方法 对应的HTML格式表达式

String.anchor(Name) <a name = "Name">String</a>

String.big() <big>String</big>

String.blink() <blink>String</blink>

String.bold() <b>String</b>

String.fixed() <tt>String</tt>

String.fontcolor(color) <font color = "color">String</font>

String.fontsize(size) <font size = "size">String</font>

String.italics() <i>String</i>

String.link(URL) <a href = "URL">String</a>

String.small() <small>String</small>

String.strike() <strike>String</strike>

String.sub() <sub>String</sub>(创建下标)

String.sup() <sup>String</sup>(创建上标)

String操纵方法:

charAt(index) 返回指定索引位置的字符

charCodeAt(index) 以Unicode编码形式返回指定索引位置的字符

concat(string1, ..., stringn) 将字符串参数串联到调用该方法的字符串

fromCharCode(code) 返回一个由参数中逗号分隔的字符编码序列生成的字符串

indexOf(substr, startpos) 从startpos开始搜索第一个substr,并将搜索结果赋给startpos(索引值)返回,若没有则返回-1

lastIndexOf(substr, startpos) 从startpos开始搜索最后一个substr,并将搜索结果赋给startpos(索引值)返回

replace(searchValue, replaceValue) 用replaceValue替换searchValue

search(regexp) 搜索正则表达式并返回位置索引

slice(startpos, endpos) 返回字符串中startpos到endpos之间的部分

split(delimiter) 以delimiter为准将原字符串分隔开并放到数组中

substr(startpos, number) 返回原字符串中从startpos开始number个字符

toLocalLowerCase() 返回原字符串转换为小写后的一份副本

toLocaleUpperCase() 返回原字符串转换为大写后的一份副本

toLowerCase() 将字符串的所有字符转换为小写

toString() 返回原字符串

toUpperCase() 将字符串的所有字符转换为i大写

valueOf() 返回对象的字符串值

构造Number对象:

var n = new Number(65.7);

Number对象的属性:

MAX_VALUE 可表示的最大数,1.797 693 134 862 315 7e+308

MIN_VALUE 可表示的最小数,5e-324

NaN 非数值

NEGATIVE_INFINITY 负无穷大,溢出时返回该值

POSITIVE_INFINITY 正无穷大,溢出返回该值

prototype 用来增加属性或方法自定义Number对象

Number对象的方法:

toString(radix) 使用指定的基数(radix)将数字转化为字符串

toLocaleString() 根据本地数字格式将数字转化为i字符串

toFixed() 将数字保留小数点后指定位数,进行四舍五入并转化为字符串

toExponential() 将数字以指数形式表示,保留小数点后面指定位数并转化为字符串

toPrecision() 使用指数形式或定点形式表述数,保留小数点后面指定位数并转化为字符串

创建Function对象:

var sum = Function("a", "b", "return a + b;");//最后一个参数是调用函数时被执行的语句体

Function对象的属性和方法:

length 返回期望传递的参数个数

prototype 通过添加属性和方法来定义对象

apply() 可以将一个函数的方法应用于另一个函数

call() 通过另一个对象调用一个方法

第10章 浏览器对象模型:BOM

窗口包括window, navigator, frames[], document, history, location, screen

document包括image, form, link, anchor

navigator对象的属性:

appCodeName 浏览器编码名

appName 浏览器名

appVersion 浏览器版本

mimeTypes 浏览器支持的MIME类型数组

platform 运行浏览器的操作系统

userAgent 浏览器发送给服务器的HTTP用户代理头

plugin对象属性:

description 插件的描述信息

filename 插件的磁盘文件名

length plugins[]数组的元素个数

name 插件名

MIME: 多用途因特网邮件扩展(Multipurpose Internet Mail Extensions)

mimeType对象的属性:

description MIME类型的描述信息

enabledPlugin 为指定MIME类型配置好的plugin对象的引用

suffixes 用字符串形式列出该MIME类型所有可能的文件扩展名

type MIME类型名

window对象的属性:

closed 当窗口关闭时为真

defaultStatus 窗口底部状态栏显示的默认状态消息

document 窗口中当前显示的文档对象

frames 窗口中的框架对象数组

history history对象保存着窗口最近加载的URL

length 窗口中的框架数

location 当前窗口的URL

name 窗口名

offscreenBuffering 用于绘制新窗口内容并在完成后复制已存在的内容,控制屏幕更新

opener 打开当前窗口的窗口

parent 指向包含另一个窗口的窗口

screen 显示屏幕相关信息,如高度、宽度

self 指示当前窗口

status 描述由用户交互导致的状态栏的临时消息

top 包含特定窗口的最顶层窗口

window 指示被引用的当前窗口,与self等效

window对象的方法:

alert(text) 创建一个警告对话框

blur() 将焦点从窗口移除

clearInterval(interval) 清除之前设置的定时器间隔

clearTimeOut(timer) 清除之前设置的超时

close() 关闭窗口

confirm() 创建一个需要用户确认的对话框

focus() 将焦点移至窗口

open(url, name, [options]) 打开一个新窗口并返回新window对象

prompt(text, defaultInput) 创建一个对话框要求用户输入信息

scrollTo(x, y) 在窗口中滚动到一个像素点的位置

setInterval(expression, milliseconds) 经过指定时间间隔后计算一个表达式

setInterval(function, milliseconds, [arguments])经过指定时间间隔后调用一个函数

setTimeout(expression, milliseconds) 在定时器超时后计算一个表达式

setTimeout(function, milliseconds, [arguments]) 在定时器超时后调用一个函数

open()方法选项:

选项 值 含义

directories yes/no或1/0 目录按钮

height 整形值 以像素值表示的高度

location yes/no或1/0 地址栏

menubar yes/no或1/0 菜单栏

resizable yes/no或1/0 调整大小

scrollbars yes/no或1/0 边框的滚动条

status yes/no或1/0 状态栏

toolbar yes/no或1/0 工具栏

width yes/no或1/0 以像素值表示的宽度

window移动及调整大小的方法:

moveBy(20, 20) 相对方式,将窗口移动20个像素

moveTo(0, 0) 将窗口移动到屏幕左上角

resizeBy(15, 10) 调整窗口大小,相对大小为15*10像素

resizeTo(450, 350) 将窗口大小调整为450*350像素

HTML框架标签:

标签 属性 作用

<frameset> 定义一组框架或其他框架集的集合

border 设置所有框架之间的框架边框厚度(像素)

frameborder 在框架集中的框架间生成立体分割线,1或yes表示有边框,0或no表示没有边框

rows 定义框架集中的行数及行高

cols 定义框架集中的列数及列宽

<frame> 定义指定框架的属性

name 用于JavaScript以框架名引用框架

src 框架的URL或位置

frame对象的属性:

document 框架中当前加载的文档

frames 框架数组

length 框架数组的元素数,及框架数

name 赋给HTML name属性的框架名

parent 定义子框架的主窗口

self 当前框架

top 启动脚本的窗口

window 当前窗口或框架

frame对象的方法:

blur() 将焦点从框架移除

clearInterval() 清除定时器间隔

clearTimeout() 清除超时定时器

focus() 将焦点移至框架

print() 调用打印对话框

setInterval() 设置定时器间隔

setTimeout() 设置超时定时器

unwatch() 移除监视点

watch() 在框架属性上设置一个监视点,如果该属性改变会调用某个函数

if(window != top) { //window不是层次结构的顶层窗口

top.location.href = location.href; //将该窗口置于顶层

}

location对象的属性:

属性 描述的URL内容

hash 如果该部分存在,表示锚点(anchor)部分

host 主机名:端口号

hostname 主机名

href 整个URL

pathname 路径名

port 端口号

protocol 协议部分

search 查询字符串

location对象的方法:

reload() 重加载当前URL

replace() 用新的URL替换当前页面

unwatch() 移除location属性上的监视点

watch() 在location属性上设置一个监视点,即在属性改变时调用某函数

history对象的属性:

current 当前页面的URL

length history对象中的记录数

next history对象中下一个页面的URL

previous history对象中前一个页面的URL

search 查询字符串

history对象的方法:

back() 前往历史列表中的前一个URL条目,类似浏览器的后退按钮

forward() 前往历史列表中的下一个URL条目,类似浏览器的前进按钮

go(2) 向前移动两个页面

screen对象的属性:

availHeight 以像素值表示屏幕高度,并减去工具栏之类的高度

availLeft 第一个像素的x坐标(不计工具栏等)

availTop 第一个像素的y坐标(不计工具栏等)

availWidth 以像素值表示屏幕宽度,并减去工具栏之类的宽度

colorDepth 屏幕可显示的最大颜色数

height 以像素值表示的屏幕高度

pixelDepth 屏幕每像素的比特数

width 像素值表示的屏幕宽度

第11章 表单及输入设备的使用

HTML<body>标签属性:

alink 活动链接的颜色,即当鼠标放置在链接上时链接的颜色

background 背景图片的URL

bgcolor 页面的背景颜色

fgcolor 文本或前景颜色

link 未访问链接的颜色

vlink 已访问链接的颜色

部分document对象属性:

bgColor,fgColor 表示背景色和文本颜色

Cookie 允许读写HTTP cookie

Domain 同一域名下Web服务器的一个安全属性

lastModified 带有页面最后修改日期的字符串

linkColor,alinkColor,vlinkColor 分别表示未访问链接、活动链接和已访问链接颜色

referrer 把浏览器链接到本文档的源文档URL

title 当前文档标题

URL 包含当前文档URL的字符串

document对象的方法:

clear() 清空当前文档所有内容

close() 关闭文档的输入流

focus() 将焦点交给文档

getElementById() 返回具有指定ID的第一个对象的引用

getElementByName() 返回具有指定名字的对象集合

getElementByTagName() 返回具有指定标签的对象集合

open() 打开一份新文档,并擦除旧文档的内容

write() 向当前文档追加写入文本

writeln() 如果在<pre>标签中使用,则追加一个换行

form对象的属性:

action 服务器的URL(表示表单将被发送到哪里)

button 一个表示通用按钮的对象

checkbox 一个表示复选框的对象

elements 一个数组,该数组的元素对应表单中定义的每个字段(单选按钮、复选框、按钮等)

encoding MIME类型

FileUpload 一个表示上传文件表单字段的对象

hidden 一个表示表单中隐藏字段的对象

length 表单中定义的输入字段个数

method get或post(表单怎样发送到服务器)

name 表单的名字

password 一个表示密码字段的对象

radio 一个表示单选按钮字段的对象

reset 一个表示重置按钮的对象

select 一个表示选择列表的对象

submit 一个表示提交按钮的对象

target 引用HTML target标签的属性,该属性用来控制表单被提交后,显示返回给用户的响应消息的框架名称

text 一个表示本文框的对象

textarea 一个表示文本区的对象

form对象的方法:

reset() 重置表单字段,使其恢复到默认值

submit() 提交表单

element对象的属性:

form 定义元素的表单对象名(只读)

name 输入设备名,与HTML的name属性值对应(只读)

type 输入设备类型,如radio,checkbox,password等(只读)

disabled 布尔值,真则元素被禁用,也不能被改变,如果表单字段被禁用,则即使该字段已赋值也不会被发送到服务器

value 与输入设备相关的文本,如输入文本区或文本框的文本,按钮上显示的文本等(读/写)

this: 表示触发事件的对象

this.form: 表示创建该对象的表单的引用

text对象的属性:

accessKey 按下某快捷键从而让焦点落在text对象上

alt 设置或返回浏览器不支持文本框时显示的替代文本

defaultValue 赋给value属性的值,文本框第一次出现时显示的默认值

disabled 设置或返回是否禁用文本框

form 定义文本框的表单名

id 设置或返回文本框的id

name 用来引用文本框的名字

type 输入设备的类型,例如text

readOnly 设置或返回文本框是否只读

size 设置或返回文本框的大小

tabIndex 设置或返回文本框的tab键顺序

value 用户输入到文本框的任何内容将赋值给value属性

text对象的方法:

blur() 将焦点从对象移走

focus() 使对象获得焦点

handleEvent(event) 为指定事件调用处理函数

select() 选择或突出显示文本框中的文本内容

unwatch() 取消特定属性的监视

watch() 监视对象,并在属性改变时调用某函数

password对象的属性:

accessKey 设置或返回密码字段的快捷键

alt 设置或返回浏览器不支持密码框时显示的替代文本

defaultValue 赋给value属性的值,即密码框第一次出现时用户看到的默认值

form 定义密码框的表单的引用

id 设置或返回密码框的id

name 密码框的名字

maxLength 设置或返回密码框的最大字符数

readOnly 设置或返回密码框是否只读

size 设置或返回密码框的大小

tabIndex 设置或返回密码框的tab键顺序

type 输入设备的类型

value 表示对象的值

password对象的方法:

blur() 将焦点从密码框移走

focus() 将焦点移到密码框

handleEvent() 调用指定事件的处理函数

select() 选择或突出显示密码框中的文本

unwatch() 取消特定属性的监视

watch() 监视某个属性,并在属性改变后调用一个函数

textarea对象的属性:

accessKey 设置或返回快捷键,通过该快捷键可访问文本区

cols 设置或返回textarea的宽度

defaultValue 赋给value属性的值,当文本区第一次出现时显示的默认值

disabled 设置或返回是否禁用文本区

form 定义文本区的表单

id 设置或返回文本区的id

name 对象名,可用该名字来引用文本区

readOnly 设置或返回文本区是否可读

rows 设置或返回文本区的行数

tabIndex 设置或返回使用tab键遍历该文本区的顺序

type 输入设备的类型

value 表示对象的值,用户输入到文本区的内容将被赋给该属性

textarea对象的方法:

blur() 将焦点从文本区移走

focus() 将焦点移到文本区

handleEvent() 触发一个特定事件的处理函数

select() 选择或突出显示文本区中的文字

unwatch() 取消特定属性的监视

watch(0 监视对象属性,并在属性改变时调用一个函数

select对象的属性:

disabled 设置或获取一个值,表示用户是否可以与下拉菜单进行交互

form 定义select对象的表单的名字

id 设置或获取下拉菜单的id

length 选择列表中的选项个数

multiple 设置或获取是否可以进行多选

name 对象名,可用该名字来引用选择菜单

options[] option对象的数组

selectedIndex 已选中选项的整数索引,如果没有选择任何选项,则为-1,该值可以被修改

size 设置或获取下拉列表可见行数

tabIndex 设置或获取select对象的tab键顺序的索引

type 如果设置了multiple属性,则type值为select-multipe,否则为select-one

select对象的方法:

blur() 将焦点从选择框移走

focus() 将焦点移到选择框

handleEvent() 触发一个特定事件的处理函数

unwatch() 取消特定属性的监视

watch() 监视对象属性,并在属性改变时调用一个函数

radio对象的属性:

accessKey 设置或获取访问此单选按钮的快捷键

alt 设置或返回浏览器不支持单选按钮时显示的替代文本

checked 如果单选按钮被选中则为true,否则为false

defaultChecked 表示radio输入标签的checked属性,当按钮第一次出现时用户看到默认的复选框

form 定义单选按钮的表单的名字

id 设置或获取单选按钮的id

name 对象的名字

tabIndex 设置或获取单选按钮的tab键顺序索引

type 表示单选输入标签的type属性

value 表示单选输入标签的value属性

radio对象的方法:

blur() 将焦点从选择框移走

click() 模拟鼠标单击按钮的处理

focus() 将焦点交给选择框

handleEvent() 调用一个特定事件的处理函数

unwatch() 取消特定属性的监视

watch() 监视对象属性,并在属性改变时调用一个函数

checkbox对象的属性:

accessKey 设置或获取访问此复选框的快捷键

alt 设置或获取浏览器不支持复选框时显示的替代文本

checked 如果复选框被选中则为true

defaultChecked 默认情况下选中的复选框

disabled 设置或返回复选框是否被禁用

form 定义复选框的表单名

id 设置或获取复选框的id

name 复选框名字

batIndex 设置或获取复选框的tab键顺序索引

type 输入设备的类型

value 赋给value属性的文本

checkbox对象的方法:

blur() 将焦点从复选框移走

click() 模拟鼠标单击复选框的处理

focus() 将焦点交给复选框

handleEvent() 调用一个特定事件的处理函数

unwatch() 取消特定属性的监视

watch() 监视对象属性,并在属性改变时调用一个函数

第12章 图片与链接

image对象的属性:

border 整型,定义图片边框的宽度

complete 布尔型,如果图片下载完成则返回true

height 整型,定义图片的像素高度

hspace 整型,定义图片水平方向的空白像素

lowsrc 为低分辨率设备定义一个可选图片

name 字符串型,定义图片的名称

prototype 用户自定义属性

src 字符串型,定义图片的路径和名称

vspace 整型,定义图片垂直方向的空白像素

width 整型,定义图片的像素宽度

一个完整的URL格式:

<protocol>(协议)//<host>(主机)[:<port>(端口)]/<pathname>(路径)[<hash>(锚)][<search>(查询)]

links对象的属性:

hash URL中的锚

host URL中的主机和端口

hostname URL中的主机名

href 完整的URL

pathname URL中的路径

port URL中的端口

protocol URL中的协议,包含冒号在内

search URL中的查询部分

target link的HTML目标属性

第13章 事件处理

JavaScript三种事件模型:內联模型、脚本模型、DOM2模型

內联模型:事件处理函数是HTML标签的一个属性,将函数赋给事件处理函数称为事件注册

JavaScript事件处理函数及其使用列表

事件处理函数 影响的元素 何时发生

onAbort 图像 当图像加载被中断时

onBlur 窗口、框架、所有表单对象 当焦点从对象上移开时(隐藏的除外),例如光标离开文本框

onChange 输入框、选择框和文本区域 当用户改变一个元素的值且失去输入焦点时,用于表单验证

onClick 链接、按钮、表单对象、 当用户单击对象时,返回false来取消默认的动作

图像映射区域

onDblClick 链接、按钮、表单对象 当用户双击对象时

onDragDrop 窗口 当用户将一个对象(如文件)拖放到浏览器窗口时

onError 脚本 当脚本中发生语法错误等错误时

onFocus 窗口、框架、所有表单对象 当单击鼠标或者将鼠标移动聚焦到窗口或框架时(hidden除外)

onKeyDown 文档、图像、链接、表单 当按键被按下时

onKeyPress 文档、图像、链接、表单 当按键被按下然后松开时

onKeyUp 文档、图像、链接、表单 当按键被松开时

onLoad 主体、框架集、图像 文档或图像加载后

onMouseOut 链接(以及链接中的图像) 当鼠标移除链接时

onMouseOver 链接(以及链接中的图像) 当鼠标移到链接时,返回true以阻止其显示在状态栏

onMove 窗口 当浏览器窗口移动时

onReset 表单复位按钮 单击表单的Reset按钮,返回false以停止复位

onResize 窗口 当浏览器窗口大小改变时

onSelect 表单元素 当选择一个表单对象时

onSubmit 表单 当要发送表单到服务器时,停止提交给服务器时返回false

onUnload 主体、框架集 文件或框架集关闭或复位后

设置事件处理函数分为两步:

1、将事件处理函数指定为文档、表单、图像或链接等HTML标签的属性

2、注册事件处理函数或者叫做事件处理函数赋值,处理函数必须在双引号或单引号内

事件对象方法:

事件方法 模拟的事件处理函数 影响的对象

blur() onBlur 将焦点从窗口、框架、表单域移出

click() onClick 模拟鼠标单击表单字段或按钮

focus() onFocus 将焦点放在窗口、框架、表单字段

reset() onReset 清空表单字段

select() onSelect 选择表单字段中的文本或文本高亮显示

submit() onSubmit 提交表单

事件对象的属性:Internet Explorer

属性 描述

altKey, ctrlKey,shiftKey 检测事件发生时Alt,Shift,Control键有没有被按下

button 1为左键,2为右键,4为中间键,多个按钮被按下,则该值为两个按钮的总和,如3(2+1)表示左右键都被按下

clientX,clientY 相对于事件发生所在网页的左上角的鼠标水平位置和垂直位置的像素值

fromElement,toElement 用于指示鼠标离开或移入的元素

keyCode 与按键事件相关的Unicode按键值

offsetX,offsetY 相对于事件发生所在容器的鼠标水平位置和垂直位置

returnValue 事件处理函数的返回值,true or false

srcElement 事件的起源元素

srcFilter 指定引起onfilterchange事件的过滤对象

x,y 相对于事件发生所在文档的鼠标水平位置和垂直位置

reason 用来标示数据源对象传送数据的状态

事件对象的属性:Mozilla Firefox

属性 描述

altKey,ctrlKey,metaKey,shiftKey 测试事件发生时Alt,Shift,Control,Meta键有没有被按下

pageX,pageY 相对于文档的位置

bubbles 标示是否存在事件冒泡

button 0标示左键,2标示右键,1标示中间键

cancelable 标示事件是否可以被取消

charCode 标示被按下的按键的Unicode值

clientX,clientY 相对于窗口左上角的位置

currentTarget 事件处理函数当前运行所在的节点

eventPhase 标示事件流的阶段,CAPTURING_PHASE(1),AT_TARGET(2),BUBBLING_PHASE(3)

layerX,layerY 层内鼠标位置

relatedTarget 在mouseover事件中代表鼠标离开的节点,在mouseout事件中,代表鼠标移到的节点

screenX,screenY 相对屏幕的位置

target 事件起源节点

timestamp 事件建立的事件(自纪元起,以毫秒为单位)

type 事件类型

which 在Netscape旧系统中标示按键的Unicode值

modifiers 代表如Alt,Shift,Meta等修饰键的位掩码

data 拖放的URL阵列

height,width 窗口的高和宽

对象事件属性:

事件处理函数属性 事件

onblur blur

onfocus focus

onchange change

onmouseover mouseover

onmousemove mousemove

onmousedown mousedown

onmouseup mouseup

onclick click

ondblclick dblclick

onkeydown keydown

onkeyup keyup

onkeypress keypress

onsubmit submit

onload load

onunload unload

第14章 CSS与JavaScript

第15章 W3C DOM与JavaScript

一些DOM对象:

对象 定义

Node 一种用来表示HTML元素的原始数据类型

Document 文档树的根

Element HTML文档中的元素

Attribute HTML标签的属性

Text 标记标签之间的文本

节点属性:

属性 功能

firstChild 返回元素的第一个子节点

lastChild 返回元素的最后一个子节点

nextSibling 返回与当前子节点同级的下一个子节点

nodeName 返回节点名

nodeType 返回表示节点类型的数字:1代表元素,2代表属性,3代表文本

nodeValue 设置节点的文本值

ownerDocument 返回包含该节点的文档的根节点

parentNode 返回包含当前节点的元素

previousSibling 返回与当前子节点同级的前一个子节点

节点方法:

方法 功能

appendChild(new node) 将新节点追加到子节点列表的末尾

cloneNode(child option) 复制节点

hasChildNodes() 如果节点有子节点就返回true

insertBefore(new node, current node) 在子节点列表插入新节点

removeChild(child node) 从子节点列表移出一个子节点

replaceChild(new child, old child) 使用新的子节点代替原子节点

JavaScript中代表HTML属性的属性:

属性 描述

className 表示CSS元素的类

dir 指定文档的文本方向,ltr从左到右,rtl从右到左

id 当前元素的id值

lang 指定文档的编写语言,en英语,ja日语,sp西班牙语

style CSS內联样式属性值

title 返回文件<title>和</title>标签之间的标题

DOM方法:

方法 功能

appendChild(new node) 将新节点追加到子节点列表的末尾

cloneNode(child option) 复制节点

hasChildNodes() 如果节点有子节点则返回true

getAttribute(attributeName) 返回当前节点的属性

hasAttributes() 返回节点是否定义了属性

hasChildNodes() 返回节点是否指定了子节点

insertBefore(new node, current node) 将新节点插入到子节点列表

removeChild(child node) 从子节点列表中删除一个子节点

setAttributeNode(attributereference) 设置或创建当前节点的属性

replaceChild(new child, old child) 使用新的子节点代替旧的子节点

事件方法:

stopPropagation() 停止事件流中事件的进一步传播

preventDefault() 取消可取消的事件,意味着事件发生时的默认操作是不会被取消的

initEvent(eventType, isBubble, isCancelable) 事件类型有单击、鼠标按下等,布尔值决定事件的默认事件流是否冒泡是否可取消

div1.addEventListener("click", sayWelcome, false): 注册事件监听器,click为事件类型,sayWelcome为事件触发后执行的函数,false为开启事件冒泡,true为开启事件捕获

div1.removeEventListener("click", sayWelcome, false): 删除事件监听器

事件属性:

名称 描述

bubbles 测试事件是否可以在文档树冒泡的布尔值

canceleable 测试事件是否可以被取消的布尔值

currentTarget 目前正在被处理函数处理的节点

eventPhase 指定事件传播阶段的数字

fromElement mouseover事件触发前鼠标所指向的对象

srcElement 指触发事件的标签对象(只在IE中)

target 事件发生的节点,不一定同currentTarget一样

timeStamp 事件发生的事件(日期对象)

type 事件发生的类型

第16章 cookie

escape(): 将所有非字母数字字符转换成对应的十六进制数字,前加%

unescape(): 将URI编码后的字符串转换为原始格式

第17章 正则表达式和模式匹配

/abc/: 正则表达式通常由斜杠来界定

var reobj = /san jose/ig: 字面量方式创建正则表达式对象,其值不可改变,i为忽略大小写,g为全局匹配,m为多行匹配

var reobj = new RegExp("san jose", "ig"): 函数方式创建正则表达式对象,其值可改变

RegExp对象的方法:

exec() 在字符串中执行匹配搜索,返回结果数组,若没有则返回null

test() 在字符串中测试模式匹配,返回true或false

RegExp对象的类属性:

input 当前被匹配的字符串

lastMatch 最后一个匹配字符串

lastParen 最后一对圆括号内的匹配子串

leftContext 最后一次匹配前的子串

RegExp.$* 标示是否多行匹配的布尔值

RegExp.$& 最后一次匹配的字符

RegExp.$_ 输入的执行匹配的字符串

RegExp.$` 代表最后一次匹配模式前的子串

RegExp.$' 代表最后一次匹配模式后的子串

RegExp.$+ 代表最后一对括号内的模式匹配子串

RegExp.$1,$2,$3... 捕获匹配到的子串

rightContext 最近一次匹配后的子串

RegExp对象的实例属性:

global 标示是否使用了在整个串中匹配的g选项的布尔值

ignoreCase 标示是否使用了匹配时忽略大小写的i选项的布尔值

lastIndex 在使用了g选项时,它标示调用exec()或test()方法找到的最后一个匹配后面的字符索引位置

multiline 标示是否使用了多行匹配的m选项的布尔值

source 正则表达式的文本

String对象中的正则表达式方法:

match(regex) 返回regex中的子串或null

replace(regex, replacement) 用replacement替换regex

search(regex) 返回字符串中regex的开始位置,若没有则返回-1

split(regex) 从字符串中删除所有包含regex的子串

元字符和元符号:

单个数字和字符

. 匹配除换行符外的任意字符

[a-z0-9] 匹配括号中字符集中的任意字符

[^a-z0-9] 匹配任意不在括号中的字符集中的字符

\d 匹配数字

\D 匹配非数字

\w 匹配字母

\W 匹配非字母

空白字符

\0 匹配null字符

\b 匹配空格字符

\f 匹配进纸字符

\n 匹配换行符

\r 匹配回车字符

\s 匹配空白字符、空格、制表符或换行符

\S 匹配非空白字符

\t 匹配制表符

锚字符

^ 行首匹配

$ 行尾匹配

\A 只匹配字符串开始处

\b 匹配单词边界,词在[]内时无效

\B 匹配非单词边界

\G 匹配当前搜索的开始位置

\Z 匹配字符串结束处或行尾

\z 只匹配字符串结束处

重复字符

x? 匹配0个或1个x

x* 匹配0个或任意多个x

x+ 匹配至少一个x

(xyz)+ 匹配至少一个xyz模式

x{m,n} 匹配最少m个、最多n个x

替代字符

was|were|will 匹配was或were或will

记录字符

(string) 用于反向引用

\1或$1 匹配第一对括号中的内容

\2或$2 匹配第二对括号中的内容

\3或$3 匹配第三对括号中的内容

JavaScript1.5新引入的字符

(?:x) 匹配x但不记录匹配结果

x(?=y) 当x后接y时匹配x

x(!=y) 当x后不是y时匹配x

/[a-z]+?/: ?关闭贪婪因子,查找到第一个小写字母后就停止检索

/(ma)+/: 分组或聚合,查找ma,mama,mamama等

/(John) (Doe)/: 记录或捕获,如果匹配,则John将被捕获在RegExp.$1中,Doe将被捕获在RegExp.$2中

第18章 Ajax(及JSON)简介

Ajax: Asynchronous JavaScript And XML(异步JavaScript和XML),是JavaScript的一个子集

ajaxRequest = new XMLHttpRequest(): 创建XMLHttpRequest对象

XMLHttpRequest对象属性和事件处理函数:

status 请求响应的HTTP状态码,200或404

statusText 从服务器响应中以字符串形式返回的HTTP状态码,OK或Not Found

readyState 代表当前对象状态的数字

responseText 将未解析字符串文本组为服务器返回的信息

responseXML 如果Content-type是text/html,就将响应结果分解到DOM中,用来获取多重值

onreadystatechange 当readystate改变时调用的事件处理函数

onerror 请求过程中发生错误时调用的Mozilla的事件处理函数

onload 文档加载完成后调用的Mozilla的事件处理函数

XMLHttpRequest方法:

abort() 取消请求

getAllResponseHeaders() 返回由换行符分割开的所有HTTP头的字符串

getResponseHeader("server") 返回指定HTTP头的值,如Server或Last-Modified

open() 用GET、POST、RUL等初始化XMLHttpRequest对象

send() 发送请求

setRequestHeader() 为即将发送到服务器端的消息头增加一个键/值对

objectRequest.open("GET", "http://localhost/hello.php?name=George");: 为同服务器通信的对象做准备并初始化,第三个参数为可选,true代表异步(默认值),false代表同步

objectRequest.send(null);:向服务器发送请求(初始化为GET)

objectRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");:定义Content-type(初始化为POST)

objectRequest.send("first=Joe&last=Blow");:向服务器发送请求(初始化为POST)

ajaxRequest.onreadystatechange = function() {...}:监控服务器响应状态

XMLHttpRequest对象的readyState属性:

状态 值

0 已创建对象,未初始化

1 加载中,还未调用send方法

2 已加载,已调用send方法,头不可用

3 交互,已收到部分数据,状态和响应头不可用

4 完成,所有数据都已接收并可用

一些HTTP状态码:

HTTP状态码 含义

200 OK OK,服务器成功返回了页面

400 Bad Request 由于语法错误导致服务器不识别请求

401 Unauthorized 请求需要用户认证

404 Not found 指定的URL在服务器上找不到

500 Internal Server Error 服务器遇到意外错误,无法完成请求

503 Server Unavailable 由于服务器过载或维护导致当前无法处理请求

ajaxRequest.responseText: 服务器返回的字符串的文本

ajaxRequest.status: 返回的HTTP状态码

ajaxRequest.responseXML: 返回的XML文档对象

ajaxRequest.getResponseHeader("Content-type"): 返回Content-type响应头

ajaxRequest.getAllResponseHeaders(): 返回所有响应头的列表

var url = "http://mydomain?myParams="+"&pseudoParam="+new Date().getTime();避免缓存

var url = "http://mydomain?myParams="+"&pseudoParam="+Math.random();避免缓存

ajaxRequest.setRequestHeader('If-Modified-Since', 'Sat, 03 Jan 2010 00:00:00GMT');避免缓存

ajaxRequest.setRequestHeaer("Cache-Control", "no-cache");避免缓存

JSON: JavaScript Object Notation(JavaScript对象标记),是JavaScript的一个子集

JSON基本类型:

数据类型 示例

Number 5、5.435

String "John Doe"、'red'

Boolean true或false

Array [1,2,3,4]

Object {"Name":"John",

"Age":35,

"Status":true,

}

null null

var myObject = eval(')' + myJSONtext + ')');:eval()函数将myJSONtext文本转换为JavaScript数据结构

var employee = JSON.parse(jsonString);:使用JSON的parse()方法代替eval()函数
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  JavaScript