JavaScript学习参考结构


JavaScript的作用

嵌入动态文本于HTML页面。

对浏览器事件做出响应。

读写HTML元素(改变HTML内容、改变HTML样式、改变HTML图像)。

在数据被提交到服务器之前验证数据(验证输入)。

基础

JavaScript 可以通过不同的方式来输出数据:

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

变量var 单变量,多变量

数据类型:字符串、数字、布尔、数组、对象、null、undefined

函数 有参函数 无参函数

运算符

判断

JavaScript中支持两个中条件语句,分别是:if 和 switch

    if(条件){
 
    }else if(条件){
         
    }else{
 
    }
    switch(name){
        case '1':
            age = 123;
            break;
        case '2':
            age = 456;
            break;
        default :
            age = 777;
    }

循环

javaScript中支持三种循环语句,分别是:

方法一:

var names = ["alex", "tony", "rain"];
 
for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
}

方法二

var names = ["alex", "tony", "rain"];

for(var index in names){
    console.log(index);
    console.log(names[index]);
}

方法三

while(条件){
    // break;
    // continue;
}

验证

异常处理

1 2 3 4 5 6 7 8 9 10

try { //这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行 } catch (e) { // 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。 //e是一个局部变量,用来指向Error对象或者其他抛出的对象 } finally { //无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。 }

注:主动跑出异常 throw Error('xxxx')

JS对象

数字Number 对象方法

方法

描述

toString

把数字转换为字符串,使用指定的基数。

toLocaleString

把数字转换为字符串,使用本地数字格式顺序。

toFixed

把数字转换为字符串,结果的小数点后有指定位数的数字。

toExponential

把对象的值转换为指数计数法。

toPrecision

把数字格式化为指定的长度。

valueOf

返回一个 Number 对象的基本数字值。

字符串String 对象方法

方法

描述

anchor()

创建 HTML 锚。

big()

用大号字体显示字符串。

blink()

显示闪动字符串。

bold()

使用粗体显示字符串。

charAt()

返回在指定位置的字符。

charCodeAt()

返回在指定的位置的字符的 Unicode 编码。

concat()

连接字符串。

fixed()

以打字机文本显示字符串。

fontcolor()

使用指定的颜色来显示字符串。

fontsize()

使用指定的尺寸来显示字符串。

fromCharCode()

从字符编码创建一个字符串。

indexOf()

检索字符串。

italics()

使用斜体显示字符串。

lastIndexOf()

从后向前搜索字符串。

link()

将字符串显示为链接。

localeCompare()

用本地特定的顺序来比较两个字符串。

match()

找到一个或多个正则表达式的匹配。

replace()

替换与正则表达式匹配的子串。

search()

检索与正则表达式相匹配的值。

slice()

提取字符串的片断,并在新的字符串中返回被提取的部分。

small()

使用小字号来显示字符串。

split()

把字符串分割为字符串数组。

strike()

使用删除线来显示字符串。

sub()

把字符串显示为下标。

substr()

从起始索引号提取字符串中指定数目的字符。

substring()

提取字符串中两个指定的索引号之间的字符。

sup()

把字符串显示为上标。

toLocaleLowerCase()

把字符串转换为小写。

toLocaleUpperCase()

把字符串转换为大写。

toLowerCase()

把字符串转换为小写。

toUpperCase()

把字符串转换为大写。

toSource()

代表对象的源代码。

toString()

返回字符串。

valueOf()

返回某个字符串对象的原始值。

日期Date 对象方法

方法

描述

Date()

返回当日的日期和时间。

getDate()

从 Date 对象返回一个月中的某一天 (1 ~ 31)。

getDay()

从 Date 对象返回一周中的某一天 (0 ~ 6)。

getMonth()

从 Date 对象返回月份 (0 ~ 11)。

getFullYear()

从 Date 对象以四位数字返回年份。

getYear()

请使用 getFullYear() 方法代替。

getHours()

返回 Date 对象的小时 (0 ~ 23)。

getMinutes()

返回 Date 对象的分钟 (0 ~ 59)。

getSeconds()

返回 Date 对象的秒数 (0 ~ 59)。

getMilliseconds()

返回 Date 对象的毫秒(0 ~ 999)。

getTime()

返回 1970 年 1 月 1 日至今的毫秒数。

getTimezoneOffset()

返回本地时间与格林威治标准时间 (GMT) 的分钟差。

getUTCDate()

根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。

getUTCDay()

根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。

getUTCMonth()

根据世界时从 Date 对象返回月份 (0 ~ 11)。

getUTCFullYear()

根据世界时从 Date 对象返回四位数的年份。

getUTCHours()

根据世界时返回 Date 对象的小时 (0 ~ 23)。

getUTCMinutes()

根据世界时返回 Date 对象的分钟 (0 ~ 59)。

getUTCSeconds()

根据世界时返回 Date 对象的秒钟 (0 ~ 59)。

getUTCMilliseconds()

根据世界时返回 Date 对象的毫秒(0 ~ 999)。

parse()

返回1970年1月1日午夜到指定日期(字符串)的毫秒数。

setDate()

设置 Date 对象中月的某一天 (1 ~ 31)。

setMonth()

设置 Date 对象中月份 (0 ~ 11)。

setFullYear()

设置 Date 对象中的年份(四位数字)。

setYear()

请使用 setFullYear() 方法代替。

setHours()

设置 Date 对象中的小时 (0 ~ 23)。

setMinutes()

设置 Date 对象中的分钟 (0 ~ 59)。

setSeconds()

设置 Date 对象中的秒钟 (0 ~ 59)。

setMilliseconds()

设置 Date 对象中的毫秒 (0 ~ 999)。

setTime()

以毫秒设置 Date 对象。

setUTCDate()

根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。

setUTCMonth()

根据世界时设置 Date 对象中的月份 (0 ~ 11)。

setUTCFullYear()

根据世界时设置 Date 对象中的年份(四位数字)。

setUTCHours()

根据世界时设置 Date 对象中的小时 (0 ~ 23)。

setUTCMinutes()

根据世界时设置 Date 对象中的分钟 (0 ~ 59)。

setUTCSeconds()

根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。

setUTCMilliseconds()

根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。

toSource()

返回该对象的源代码。

toString()

把 Date 对象转换为字符串。

toTimeString()

把 Date 对象的时间部分转换为字符串。

toDateString()

把 Date 对象的日期部分转换为字符串。

toGMTString()

请使用 toUTCString() 方法代替。

toUTCString()

根据世界时,把 Date 对象转换为字符串。

toLocaleString()

根据本地时间格式,把 Date 对象转换为字符串。

toLocaleTimeString()

根据本地时间格式,把 Date 对象的时间部分转换为字符串。

toLocaleDateString()

根据本地时间格式,把 Date 对象的日期部分转换为字符串。

UTC()

根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。

valueOf()

返回 Date 对象的原始值。

布尔Boolean 对象方法

方法

描述

toSource()

返回该对象的源代码。

toString()

把逻辑值转换为字符串,并返回结果。

valueOf()

返回 Boolean 对象的原始值。

数组 (Array)对象方法

方法

描述

concat()

连接两个或更多的数组,并返回结果。

join()

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

pop()

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

push()

向数组的末尾添加一个或更多元素,并返回新的长度。

reverse()

颠倒数组中元素的顺序。

shift()

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

slice()

从某个已有的数组返回选定的元素

sort()

对数组的元素进行排序

splice()

删除元素,并向数组添加新元素。

toSource()

返回该对象的源代码。

toString()

把数组转换为字符串,并返回结果。

toLocaleString()

把数组转换为本地数组,并返回结果。

unshift()

向数组的开头添加一个或更多元素,并返回新的长度。

valueOf()

返回数组对象的原始值

算数Math 对象方法

方法

描述

abs(x)

返回数的绝对值。

acos(x)

返回数的反余弦值。

asin(x)

返回数的反正弦值。

atan(x)

以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。

atan2(y,x)

返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。

ceil(x)

对数进行上舍入。

cos(x)

返回数的余弦。

exp(x)

返回 e 的指数。

floor(x)

对数进行下舍入。

log(x)

返回数的自然对数(底为e)。

max(x,y)

返回 x 和 y 中的最高值。

min(x,y)

返回 x 和 y 中的最低值。

pow(x,y)

返回 x 的 y 次幂。

random()

返回 0 ~ 1 之间的随机数。

round(x)

把数四舍五入为最接近的整数。

sin(x)

返回数的正弦。

sqrt(x)

返回数的平方根。

tan(x)

返回角的正切。

toSource()

返回该对象的源代码。

valueOf()

返回 Math 对象的原始值。

正则表达式

修饰符

修饰符

描述

i

执行对大小写不敏感的匹配。

g

执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。

m

执行多行匹配。

方括号

方括号用于查找某个范围内的字符:

表达式

描述

[abc]

查找方括号之间的任何字符。

[^abc]

查找任何不在方括号之间的字符。

[0-9]

查找任何从 0 至 9 的数字。

[a-z]

查找任何从小写 a 到小写 z 的字符。

[A-Z]

查找任何从大写 A 到大写 Z 的字符。

[A-z]

查找任何从大写 A 到小写 z 的字符。

[adgk]

查找给定集合内的任何字符。

[^adgk]

查找给定集合外的任何字符。

(red|blue|green)

查找任何指定的选项。

元字符

元字符(Metacharacter)是拥有特殊含义的字符:

元字符

描述

.

查找单个字符,除了换行和行结束符。

\w

查找单词字符。

\W

查找非单词字符。

\d

查找数字。

\D

查找非数字字符。

\s

查找空白字符。

\S

查找非空白字符。

\b

匹配单词边界。

\B

匹配非单词边界。

\0

查找 NUL 字符。

\n

查找换行符。

\f

查找换页符。

\r

查找回车符。

\t

查找制表符。

\v

查找垂直制表符。

\xxx

查找以八进制数 xxx 规定的字符。

\xdd

查找以十六进制数 dd 规定的字符。

\uxxxx

查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词

描述

n+

匹配任何包含至少一个 n 的字符串。

n*

匹配任何包含零个或多个 n 的字符串。

n?

匹配任何包含零个或一个 n 的字符串。

n{X}

匹配包含 X 个 n 的序列的字符串。

n{X,Y}

匹配包含 X 至 Y 个 n 的序列的字符串。

n{X,}

匹配包含至少 X 个 n 的序列的字符串。

n$

匹配任何结尾为 n 的字符串。

^n

匹配任何开头为 n 的字符串。

?=n

匹配任何其后紧接指定字符串 n 的字符串。

?!n

匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象属性

属性

描述

FF

IE

global

RegExp 对象是否具有标志 g。

1

4

ignoreCase

RegExp 对象是否具有标志 i。

1

4

lastIndex

一个整数,标示开始下一次匹配的字符位置。

1

4

multiline

RegExp 对象是否具有标志 m。

1

4

source

正则表达式的源文本。

1

4

RegExp 对象方法

方法

描述

FF

IE

compile

编译正则表达式。

1

4

exec

检索字符串中指定的值。返回找到的值,并确定其位置。

1

4

test

检索字符串中指定的值。返回 true 或 false。

1

4

支持正则表达式的 String 对象的方法

方法

描述

FF

IE

search

检索与正则表达式相匹配的值。

1

4

match

找到一个或多个正则表达式的匹配。

1

4

replace

替换与正则表达式匹配的子串。

1

4

split

把字符串分割为字符串数组。

函数

顶层函数(全局函数)

函数

描述

decodeURI()

解码某个编码的 URI。

decodeURIComponent()

解码一个编码的 URI 组件。

encodeURI()

把字符串编码为 URI。

encodeURIComponent()

把字符串编码为 URI 组件。

escape()

对字符串进行编码。

eval()

计算 JavaScript 字符串,并把它作为脚本代码来执行。

getClass()

返回一个 JavaObject 的 JavaClass。

isFinite()

检查某个值是否为有穷大的数。

isNaN()

检查某个值是否是数字。

Number()

把对象的值转换为数字。

parseFloat()

解析一个字符串并返回一个浮点数。

parseInt()

解析一个字符串并返回一个整数。

String()

把对象的值转换为字符串。

unescape()

对由 escape() 编码的字符串进行解码。

顶层属性(全局属性)

方法

描述

Infinity

代表正的无穷大的数值。

java

代表 java.* 包层级的一个 JavaPackage。

NaN

指示某个值是不是数字值。

Packages

根 JavaPackage 对象。

undefined

指示未定义的值。

JS HTML DOM

Document 对象集合

集合

描述

all[]

提供对文档中所有 HTML 元素的访问。

anchors[]

返回对文档中所有 Anchor 对象的引用。

applets

返回对文档中所有 Applet 对象的引用。

forms[]

返回对文档中所有 Form 对象引用。

images[]

返回对文档中所有 Image 对象引用。

links[]

返回对文档中所有 Area 和 Link 对象引用。

Document 对象属性

属性

描述

body

提供对 <body> 元素的直接访问。 对于定义了框架集的文档,该属性引用最外层的 <frameset>。

cookie

设置或返回与当前文档有关的所有 cookie。

domain

返回当前文档的域名。

lastModified

返回文档被最后修改的日期和时间。

referrer

返回载入当前文档的文档的 URL。

title

返回当前文档的标题。

URL

返回当前文档的 URL。

Document 对象方法

方法

描述

close()

关闭用 document.open() 方法打开的输出流,并显示选定的数据。

getElementById()

返回对拥有指定 id 的第一个对象的引用。

getElementsByName()

返回带有指定名称的对象集合。

getElementsByTagName()

返回带有指定标签名的对象集合。

open()

打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。

write()

向文档写 HTML 表达式 或 JavaScript 代码。

writeln()

等同于 write() 方法,不同的是在每个表达式之后写一个换行符。

HTML、CSS、事件、节点

事件句柄 (Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,可将之插入 HTML 标签以定义事件的行为。

属性

此事件发生在何时...

onabort

图像的加载被中断。

onblur

元素失去焦点。

onchange

域的内容被改变。

onclick

当用户点击某个对象时调用的事件句柄。

ondblclick

当用户双击某个对象时调用的事件句柄。

onerror

在加载文档或图像时发生错误。

onfocus

元素获得焦点。

onkeydown

某个键盘按键被按下。

onkeypress

某个键盘按键被按下并松开。

onkeyup

某个键盘按键被松开。

onload

一张页面或一幅图像完成加载。

onmousedown

鼠标按钮被按下。

onmousemove

鼠标被移动。

onmouseout

鼠标从某元素移开。

onmouseover

鼠标移到某元素之上。

onmouseup

鼠标按键被松开。

onreset

重置按钮被点击。

onresize

窗口或框架被重新调整大小。

onselect

文本被选中。

onsubmit

确认按钮被点击。

onunload

用户退出页面。

鼠标 / 键盘属性

属性

描述

altKey

返回当事件被触发时,"ALT" 是否被按下。

button

返回当事件被触发时,哪个鼠标按钮被点击。

clientX

返回当事件被触发时,鼠标指针的水平坐标。

clientY

返回当事件被触发时,鼠标指针的垂直坐标。

ctrlKey

返回当事件被触发时,"CTRL" 键是否被按下。

metaKey

返回当事件被触发时,"meta" 键是否被按下。

relatedTarget

返回与事件的目标节点相关的节点。

screenX

返回当某个事件被触发时,鼠标指针的水平坐标。

screenY

返回当某个事件被触发时,鼠标指针的垂直坐标。

shiftKey

返回当事件被触发时,"SHIFT" 键是否被按下。

IE 属性

除了上面的鼠标/事件属性,IE 浏览器还支持下面的属性:

属性

描述

cancelBubble

如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。

fromElement

对于 mouseover 和 mouseout 事件,fromElement 引用移出鼠标的元素。

keyCode

对于 keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件,它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。

offsetX,offsetY

发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。

returnValue

如果设置了该属性,它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle,可以取消发生事件的源元素的默认动作。

srcElement

对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。

toElement

对于 mouseover 和 mouseout 事件,该属性引用移入鼠标的元素。

x,y

事件发生的位置的 x 坐标和 y 坐标,它们相对于用CSS动态定位的最内层包容元素。

标准 Event 属性

下面列出了 2 级 DOM 事件标准定义的属性。

属性

描述

bubbles

返回布尔值,指示事件是否是起泡事件类型。

cancelable

返回布尔值,指示事件是否可拥可取消的默认动作。

currentTarget

返回其事件监听器触发该事件的元素。

eventPhase

返回事件传播的当前阶段。

target

返回触发此事件的元素(事件的目标节点)。

timeStamp

返回事件生成的日期和时间。

type

返回当前 Event 对象表示的事件的名称。

标准 Event 方法

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法:

方法

描述

initEvent()

初始化新创建的 Event 对象的属性。

preventDefault()

通知浏览器不要执行与事件关联的默认动作。

stopPropagation()

不再派发事件。

JS windows

window

Window 对象属性

属性

描述

closed

返回窗口是否已被关闭。

defaultStatus

设置或返回窗口状态栏中的默认文本。

document

对 Document 对象的只读引用。请参阅 Document 对象。

history

对 History 对象的只读引用。请参数 History 对象。

innerheight

返回窗口的文档显示区的高度。

innerwidth

返回窗口的文档显示区的宽度。

length

设置或返回窗口中的框架数量。

location

用于窗口或框架的 Location 对象。请参阅 Location 对象。

name

设置或返回窗口的名称。

Navigator

对 Navigator 对象的只读引用。请参数 Navigator 对象。

opener

返回对创建此窗口的窗口的引用。

outerheight

返回窗口的外部高度。

outerwidth

返回窗口的外部宽度。

pageXOffset

设置或返回当前页面相对于窗口显示区左上角的 X 位置。

pageYOffset

设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

parent

返回父窗口。

Screen

对 Screen 对象的只读引用。请参数 Screen 对象。

self

返回对当前窗口的引用。等价于 Window 属性。

status

设置窗口状态栏的文本。

top

返回最顶层的先辈窗口。

window

window 属性等价于 self 属性,它包含了对窗口自身的引用。

screenLeft screenTop screenX screenY

只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop,而 Firefox 和 Safari 支持 screenX 和 screenY。

  • screenLeft
  • screenTop
  • screenX
  • screenY

只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop,而 Firefox 和 Safari 支持 screenX 和 screenY。

Window 对象方法

方法

描述

alert()

显示带有一段消息和一个确认按钮的警告框。

blur()

把键盘焦点从顶层窗口移开。

clearInterval()

取消由 setInterval() 设置的 timeout。

clearTimeout()

取消由 setTimeout() 方法设置的 timeout。

close()

关闭浏览器窗口。

confirm()

显示带有一段消息以及确认按钮和取消按钮的对话框。

createPopup()

创建一个 pop-up 窗口。

focus()

把键盘焦点给予一个窗口。

moveBy()

可相对窗口的当前坐标把它移动指定的像素。

moveTo()

把窗口的左上角移动到一个指定的坐标。

open()

打开一个新的浏览器窗口或查找一个已命名的窗口。

print()

打印当前窗口的内容。

prompt()

显示可提示用户输入的对话框。

resizeBy()

按照指定的像素调整窗口的大小。

resizeTo()

把窗口的大小调整到指定的宽度和高度。

scrollBy()

按照指定的像素值来滚动内容。

scrollTo()

把内容滚动到指定的坐标。

setInterval()

按照指定的周期(以毫秒计)来调用函数或计算表达式。

setTimeout()

在指定的毫秒数后调用函数或计算表达式。

screen、

location

Location 对象属性

属性

描述

hash

设置或返回从井号 (#) 开始的 URL(锚)。

host

设置或返回主机名和当前 URL 的端口号。

hostname

设置或返回当前 URL 的主机名。

href

设置或返回完整的 URL。

pathname

设置或返回当前 URL 的路径部分。

port

设置或返回当前 URL 的端口号。

protocol

设置或返回当前 URL 的协议。

search

设置或返回从问号 (?) 开始的 URL(查询部分)。

Location 对象方法

属性

描述

assign()

加载新的文档。

reload()

重新加载当前文档。

replace()

用新的文档替换当前文档。

history

History 对象属性

属性

描述

length

返回浏览器历史列表中的 URL 数量。

History 对象方法

方法

描述

back()

加载 history 列表中的前一个 URL。

forward()

加载 history 列表中的下一个 URL。

go()

加载 history 列表中的某个具体页面。

popupalert

alert()   显示带有一段信息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后,用户需要点击确定按钮才能继续进行操作。

语法:alert("文本")

确认框

确认框用于使用户可以验证或者接受某些信息。

当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。

如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。

语法:confirm("文本")

提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

语法:prompt("文本","默认值")

ajax获取数据 json格式化到js能接收的数据 js处理处理数据(dom、bom、事件) 提交数据流程反过来

参考

timing http://www.w3school.com.cn/js/js_timing.asp

cookies http://www.w3school.com.cn/js/js_cookies.asp

JS实例http://www.w3school.com.cn/example/jseg_examples.asp

JS对象实例 http://www.w3school.com.cn/example/jsrf_examples.asp

库jqueryhttp://www.w3school.com.cn/jquery/jquery_reference.asp

jQuery手册 http://jquery.cuishifeng.cn/index.html

JavaScript 参考手册http://www.w3school.com.cn/jsref/index.asp

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券