一、函数（常用的系统函数）
parseInt();
parseFloat();
isNaN();
在页面上显示输出 document.write("内容");//在页面上显示输出内容
获得页面输入的内容 var contect = promp("请输入内容","");
直接在HTML标签中 <input type="" ... οnclick="javascript:alert("欢迎您!")"/>
二、变量的声明和赋值
1、声明变量的同时为变量赋值
2、在一行代码中声明多个变量
3、没有声明变量直接使用
三、数据类型
1、undefined （未定义类型） undefined类型只有一个值，即undefined。当声明的变量未初始化时，该变量的默认值是undefined
2、null （空类型） 表示“什么都没有”的占位符，可以用来检测某个变量是否被赋值。值undefined实际上是值null派生来的，它们定义为相等。
alert(null == undefined) // true 但含义不同，undefined 是声明了变量但未对该变量赋值，null则表示对该变量赋予了一个空值。
3、number （数值类型） 既可以表示整数，又可以表示浮点数。
NaN （Not a Number）表示非数，它是number类型，例如：typeof(NaN) // 返回值为number
4、String （字符串类型） 一组被引号（单引号或双引号）括起来的文本，它不对“字符”或“字符串”加以区别
5、boolean （布尔类型）
四、typeof 运算符
typeof运算符来判断一个值或变量究竟属于哪种数据类型。语法为： typeof(变量或值)
五、Window对象
| 名称 | 说明 |
| screen | 有关客户端的屏幕和显示性能的信息 |
| history | 有关客户访问过的URL的信息 |
| location | 有关当前URL的信息 |
| status | 状态栏中的文本 |
| 名称 | 说明 |
| prompt | 显示可提示用户输入的对话框 |
| alert | 显示一个带有提示信息和一个“确定”按钮的警示框 |
| confirm | 显示一个带有提示信息、“确定”和“取消”铵钮的对话框 |
| close | 关闭浏览器窗口 |
| open | 打开一个新的浏览器窗口，加载给定URL所指定的文档 |
| setTimeout | 在指定的毫秒数后调用函数或计算表达式 |
| setInterval | 按照指定的周期（以毫秒计）来调用函数或表达式 |
1、confirm("对话框中显示的纯文本"); 在confirm弹出的确认对话框中，有一条提示信息，一个“确认”按钮和一个“取消”按钮。返回true或false
2、open("弹出窗口的URL","窗口名称","窗口特征");
3、clearTimeout(t); 清除定时器
| 名称 | 说明 |
| height、width | 窗口文档显示区的高度、宽度，以像素计 |
| left、top | 窗口的X坐标、Y坐标，以像素计 |
| toolbar=yes|no|1|0 | 是否显示浏览器的工具栏，默认是yes |
| scrollbars=yes|no|1|0 | 是否显示滚动条，默认是yes |
| location=yes|no|1|0 | 是否显示地址栏，默认是yes |
| status=yes|no|1|0 | 是否添加状态栏，默认是yes |
| menubar=yes|no|1|0 | 是否显示菜单栏，默认是yes |
| resizable=yes|no|1|0 | 窗口是否可调节尺寸，默认是yes |
| titlebar=yes|no|1|0 | 是否显示标题栏，默认是yes |
| fullscreen=yes|no|1|0 | 是否使用全屏模式显示浏览器，默认是yes |
| 名称 | 说明 |
| onload | 一个页面或一幅图像完成加载 |
| onmouseover | 鼠标移到某元素之上 |
| onclick | 鼠标单击某个对象 |
| onkeydown | 某个键盘按键被按下 |
| onchange | 域的内容被改变 |
六、内置对象
1、Array：用于在单独的变量名中存储一系列的值
2、String：用于支持对字符串的处理
3、Math：使我们有能力执行常用的数学任务，它包含了若干个数字常量和函数
4、Date：用于操作日期和时间
| 值 | 整数 |
| Second(秒)和Minute(分钟) | 0~59 |
| Hour | 0~23 |
| Day | 0~6（一个星期中的每一天） |
| Date | 1~31（一个月中的每一天） |
| Month | 0~11（1~12月） |
| 方法 | 说明 |
| getDate() | 返回Date对象的一个月中的每一天，其值介于1~31之间 |
| getDay() | 返回Date对象的星期中的每一天，其值介于0~6之间 |
| getHours() | 返回Date对象的小时数，其值介于0~23之间 |
| getMinutes() | 返回Date对象的分钟数，其值介于0~59之间 |
| getSeconds() | 返回Date对象的秒数，其值介于0~59之间 |
| getMonth() | 返回Date对象的月份，其值介于0~11之间 |
| getFullYear() | 返回Date对象的年份，其值为4位数 |
| getTime() | 返回自某一时刻（1970年1月1日）以来的毫秒数 |
七、history对象
| 名称 | 描述 |
| back() | 加载history对象列表中的前一个URL |
| forward() | 加载history对象列表中的下一个URL |
| go() | 加载history对象列表中的某个具体的URL |
八、location对象
| 名称 | 描述 |
| host | 设置或返回主机名和当前URL的端口号 |
| hostname | 设置或返回当前URL的主机名 |
| href | 设置或返回完整的URL |
| 名称 | 描述 |
| reload() | 重新加载当前文档 |
| replace() | 用新的文档替换当前文档 |
九、document对象
| 属性 | 描述 |
| referrer | 返回载入当前文档的文档URL |
| URL | 返回当前文档的URL |
1、document . referrer 当前文档如果不是通过超链接访问的，则document . referrer 的值为 null.
十、CSS样式控制元素的显示和隐藏
| 值 | 描述 |
| visible | 表示元素是可见的 |
| hidden | 表示元素是不可见的 |
| 值 | 描述 |
| none | 表示此元素不会被显示 |
| block | 表示此元素将显示为块级元素，此元素前后会带有换行符 |
object.style.visibility/display="值";
| 属性 | 描述 |
| visibility | 设置元素不可见，此元素会占据页面上的空间 |
| display | 设置元素不可见，此元素不会占据页面上的空间 |
十一、DOM对象
1、获取及改变节点属性值的标准方法：
getAttribute("属性名"); //用来获取属性的值,如果属性不存在返回null
setAttribute("属性名","属性值");//用来设置属性的值
2、根据层次关系查找节点
parentNode
firstChild
lastChild
表格实际上由三部分组成，分别是<thead>、<tbody>、<tfood>。由于默认情况下，表格是否有<thead>、<tbody>和<tfood>并不影响表格的布局，因此通常在使用表格时省略这几项。但是在html dom 的层次关系中，即使省略这几项，使用parentNode、firstChild、lastChild表示层次关系时，表格也会默认有<tbody>。
3、创建和增加节点
| 名称 | 描述 |
| createElement(tagName) | 按照给定的标签名称创建一个新的元素节点 |
| appendChild(nodeName) | 向已存在节点列表的末尾添加新的子节点 |
| insertBefore(newNode , oldNode) | 向指定的节点之前插入一个新的子节点 |
| cloneNode(deep) | 复制某个指定的节点 |
说明
insertBefore(newNode,oldNode)中的有两个参数。newNode是必须项，表示新插入的节点；oldNode是可选项，表示新节点被插入到oldNode节点的前面。
cloneNode(deep)中的参数deep是布尔值，当deep的值为true时，会复制指定的节点及它的所有子节点；当deep的值为false时，只复制指定的节点和它的属性。
4、删除和替换节点
| 名称 | 描述 |
| removeChild(node) | 删除指定的节点 |
| replaceChild(newNode,oldNode) | 用其他的节点替换指定的节点 |
5、访问HTML DOM对象的属性
由于HTML 中的每一个节点都是一个对象，所以访问或设置对象的属性值时，可以不使用getAttribute()和setAttribute()方法，而是直接使用“对象名.属性”的方法对对象的属性值进行访问和修改，如：
var imags = document.getElementById("s1");
imags.src = "images/grape.jpg";
十二、表格对象
| 类别 | 名称 | 描述 |
| 属性 | rows[] | 返回包含表格中所有行的一个数组 |
| 方法 | insertRow() | 在表格中插入一个新的行 |
| deleteRow() | 从表格中删除一行 |
insertRow()方法用于在表格中指定位置插入一个新的行，语法为：tableObject.insertRow(index); index 表示新行将被插入到index所在行之前，若index等于表格中的行数，则新行将被插入到表格的末尾；若index等于0，则新行将被插入到表格的第一行，因此 index不能小于0或大于表格中的行数。
deleteRow()方法用于从表格中删除指定位置的行，语法为：tableObject.deleteRow(index); 参数index 是小于表格中所有行数的整数，当index等于0时，表示删除第一行。
| 类别 | 名称 | 描述 |
| 属性 | cells[] | 返回包含行中所有单元格的一个数组 |
| rowIndex | 返回该行在表中的位置 | |
| 方法 | insertCell() | 在一行中的指定位置插入一个空的<td>标签 |
| deleteCell() | 删除行中指定的单元格 |
deleteCell();方法用于删除表格中的单元格，语法为：tableRowObject.deleteRow(index);
| 类别 | 名称 | 描述 |
| 属性 | cellIndex | 返回单元格在某行单元格集合中的位置 |
| innerHTML | 设置或返回单元格的开始标签和结束标签之间的HTML | |
| align | 设置或返回单元格内部数据的水平排列方式 | |
| className | 设置或返回元素的class属性 |
十三、常见样式
| 类别 | 属性 | 描述 |
| 文本属性 | font-size | 字体大小 |
| font-family | 字体类型 | |
| font-style | 字体样式 | |
| color | 设置或检索文本的颜色 | |
| text-align | 文本对齐 | |
| 背景属性 | background-color | 设置背景颜色 |
| background-image | 设置背景图像 | |
| background-repeat | 设置一个指定的图像如何被重复 | |
| 边框属性 | border-width | 设置边框的宽度 |
| border-style | 设置边框的样式 | |
| border-color | 设置边框的颜色 |
| 类别 | 属性 | 描述 |
| background | backgroundColor | 设置元素的背景颜色 |
| backgroundImage | 设置元素的背景图像 | |
| backgroundRepeat | 设置是否及如何重复图像 | |
| text | fontSize | 设置元素的字体大小 |
| fontWeight | 设置字体的粗细 | |
| textAlign | 排列文本 | |
| textDecoration | 设置文本的修饰 | |
| font | 设置同一行字体的属性 | |
| color | 设置文本的颜色 | |
| padding | padding | 设置元素的填充 |
| paddingTop | 设置元素的上、下、左、右 | |
| paddingBottom | 填充 | |
| paddingLeft | ||
| paddingRight | ||
| border | border | 设置四个边框的属性 |
| borderTop | ||
| borderBottom | ||
| borderLeft | ||
| borderRight |
| 属性 | 描述 |
| top | 设置元素的顶边缘距离父元素顶边缘之上或之下的距离 |
| left | 设置元素的左边缘距离父元素左边缘的左边或右边的距离 |
| right | 设置元素的右边缘距离父元素右边缘的左边或右边的距离 |
| bottom | 设置元素的底边缘距离父元素底边缘之上或之下的距离 |
| zIndex | 设置元素的堆叠次序 |
注意：
1、style对象返回的坐标属性值是带有单位（px）
2、在JavaScript中，使用“HTML元素.style.样式属性”的方式只能获取内联样式的属性值，无法获取内部样式表或外部样式表中的属性值，微软为每一个元素提供了一个currentStyle对象，它包含了所有元素的style对象的特性和任何未被覆盖的CSS规则的style特性，currentStyle对象与style对象的使用方式一样。但是currentStyle对象的特性是只读的，如果要给样式属性赋值，必须使用style对象。虽然使用currentStyle可以获取样式属性的值，但是它只局限于IE浏览器，DOM提供了一个getComputedStyle()方法，这个方法接受两个参数，需要获取样式的元素和诸如hover之类的伪元素（如果不需要，也可以为null），语法如下：
document.defaultView.getComputedStyle(元素,null).属性；
虽然getComputedStyle()方法是DOM提供的，但是IE浏览器却不支持，而Firefox浏览器是支持的，因此当使用getCurrentStyle()方法时，最好在多个不同的浏览器上进行测试。
十四、随鼠标滚动
| 属性 | 描述 |
| scrollTop | 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 |
| scrollLeft | 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 |
| clientWidth | 指对象的可见宽度，不包括滚动条等边线，会随窗口的显示大小改变 |
| clientHeight | 指对象的可见高度，也就是说页面浏览器中可以看到内容的这个区域的高度 |
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
| 事件 | 描述 |
| onscroll | 用于捕捉页面垂直和水平滚动 |
| onload | 一个页面或一幅图片完成加载（上传） |
window.οnlοad=函数名称;
window.οnscrοll=函数名称;
注意：解决浏览器不兼容问题
<script type="text/javascript">
adverObject = document.getElementById("adver");//获得层对象
if(adverObject.currentStyle){//IE浏览器
adverTop = parseInt(adverObject.currentStyle.top);
adverLeft = parseInt(adverObject.currentStyle.left);
}else{//Firefox浏览器
adverTop = parseInt(document.defaultView.getComputedStyle(adverObject,null).top);
adverLeft = parseInt(document.defaultView.getComputedStyle(adverObject,null).left);
}
</script>十五、文本框
| 类别 | 名称 | 描述 |
| 事件 | onblur | 失去焦点，当光标离开某个文本框时触发 |
| onfocus | 获得焦点，当光标进入某个文本框时触发 | |
| onkeypress | 某个键盘按键被按下并松开 | |
| 方法 | blur() | 从文本域中设置焦点，即获得鼠标光标 |
| focus() | 在文本域中设置焦点，即获得鼠标光标 | |
| select() | 选取文本域中的内容 | |
| 属性 | id | 设置或返回文本域的id |
| value | 设置或返回文本域的value属性的值 |
十六、正则表达式
1、定义正则表达式
1）普通方式
var reg = / 表达式 / 附加参数
表达式：一个字符串代表了某种规则，其中可以使用某些特殊字符来代表特殊的规则。
附加参数：用来扩展表达式的含义，主要有以下三个参数：
g：代表可以进行全局匹配
i：代表不区分大小写匹配
m：代表可以进行多选匹配
2）构造函数
var reg = new RegExp("表达式","附加参数");
经验总结：
普通方式中的表达式必须是一个常量字符串，而构造函数中的表达式可以是常量字符串，也可以是一个JavaScript变量，例如，根据用户的输入作为表达式的参数：
var reg = new RegExp(document.getElementById("id").value,"g");
2、表达式的模式
1）简单模式
简单模式是指通过普通字符的组合来表达的模式，例如：
var reg = /change/;
2）复合模式
复合模式是指含有通配符来表达的模式，例如：
var reg = /^\w+$/;
| 方法 | 描述 |
| exec | 检索字符中是正则表达式的匹配，返回找到的值，并确定其位置 |
| test | 检索字符串中指定的值，返回true或false |
| 方法 | 描述 |
| match | 找到一个或多个正则表达式的匹配 |
| search | 检索与正则表达式相匹配的值 |
| replace | 替换与正则表达式匹配的字符串 |
| split | 把字符串分割为字符串数组 |
match： 字符串对象.match(searchString 或 regexpObject )
searchString 是要检索的字符串的值, regexpObject 是规定要匹配模式的RegExp对象 例如：
var str = "my cat";
var reg = /cat/;
var result = str.match(reg); 运行代码，result 的值为 cat
replace： 字符串对象.replace(RegExp 对象或字符串，"替换的字符串")
| 符号 | 描述 |
| /.../ | 代表一个模式的开始与结束 |
| ^ | 匹配字符串的开始 |
| $ | 匹配字符串的结束 |
| \s | 任何空白字符 |
| \S | 任何非空白字符 |
| \d | 匹配一个数字字符，等价于[0-9] |
| \D | 除了数字之外的任何字符，等价于[^0-9] |
| \w | 匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9] |
| \W | 任何非单字字符，等价于[^a-zA-Z0-9] |
| . | 除了换行符之外的任意字符 |
| 符号 | 描述 |
| {n} | 匹配前一项n次 |
| {n,} | 匹配前一项n次，或者多次 |
| {n,m} | 匹配前一项至少n次，但是不能超过m次 |
| * | 匹配前一项0次或多次，等价于{0,} |
| + | 匹配前一项1次或多次，等价于{1,} |
| ? | 匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1} |
十七、下拉列表框对象
| 类别 | 名称 | 描述 |
| 事件 | onchange | 当改变选项时调用的事件 |
| 方法 | add() | 向下拉列表框中添加一个选项 |
| 属性 | options[] | 返回包含下拉列表框中的所有选项的一个数组 |
| selectedIndex | 设置或返回下拉列表框中被选项目的索引号 | |
| lenght | 返回下拉列表框中选项的数目 |
options[]：如果把options.length属性设置为0，Select对象中所有选项都会被清除，如果options.length属性的值比当前值小，那么出现在数组尾部的元素都会被丢弃。
add()：下拉列表框对象.add(new,old); new表示新添加到old之前的Option对象，如果old为null，则new直接添加到select的末尾.
经验总结：
在IE浏览器中可以省略null，例如：document.getElementById("city").add(newOption),但这方法仅在IE浏览器中适用
使用new 关键字创建一个Option对象，并同时为option选项赋text值和value值,代码如下：
var newOption = new Option("北京市","01");
| 属性 | 描述 |
| text | 设置或返回某个选项的纯文本值 |
| value | 设置或返回被送往服务器的值 |
十八、数组
在JavaScript中可以使用for(i in array)的方式循环读取数组中的每一个元素。
扫一扫
2698
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
