如何使用
行内式
<button onclick="alert('hello world')">hello</button>
内嵌式
<script>
js代码块
</script>
外链式
<script src="my.js" type="text/javascript"></script>
编码
### 把字符串作为URI组件进行编码
encodeURIComponent(字符串)
### 把字符串作为URI组件进行解码
decodeURIComponent(编码数据)
在函数体内部,但是没有声明 var 的变量也是全局变量
自定义属性
obj.属性名 = 值;
多分支语句
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| switch(参数){ case 参数1: 执行代码; break; case 参数2: 执行代码; break; case 参数3: 执行代码; break; ...... default: 执行代码; break; }
|
内置对象
Arguments 函数参数集合
Array 数组
Boolean 布尔对象
Date 日期时间对象
Error 异常对象
Function 函数构造器
Math 数学对象
Number 数值对象
Object 基础对象
RegExp 正则表达式对象
数据类型
检测数据类型
typeof(被检测数据)
检测是否是数字
isNaN(数据)
强转数字类型
- parseInt(被转换数据) // 小数取整
- parseInt(数值,进制) //
- 把指定数值由指定进制方式转为十进制
- parseFloat(被转换数据) // 转换为浮点值
- Number(被转换数据) // 有小数带小数
- 利用 - * / 也可以转换
十进制转 8 进制
020(十进制前加 0)
十进制转 16 进制
0x20(十进制前加 0x)
转字符串
- 被转换数据.toString()
- String(被转换数据)
转布尔型(boolean)
- !!被转换数据
- Boolean()
入口函数
1 2 3
| window.onload = function () { js代码; };
|
这个函数的意思就是说,当我们页面加载完毕之后,采取执行函数体里面的 js 部分
window
定时器
定时器 setInterval
1 2 3
| setInterval(fun, 间隔时间(毫秒)); setInterval("fun()", 1000); setInterval(function () {}, 1000);
|
关闭定时器
等待指定时间后执行指定函数 setTimeout
1
| setTimeout(fun, 等待时间(毫秒));
|
页面跳转
1
| window.location.href = "url";
|
String
方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。
返回字符从尾部首次出现的位置
获取相应位置字符(参数:字符位置)
获取相应位置字符 unicode 编码(参数:字符位置)
截取字符串(参数一必填,参数二可选)
slice 参数可为负数(负数会转换为 length+负数)
substr 参数二为从起始位置截取字符的数量(负数 ie678 报错,可使用.length+负数)
subString 与 slice 大致相同,不同点是参数最小值自动转换为起始位置
1
| subString(起始位置, [结束位置]);
|
Math
向下取整
四舍五入
向上取整
返回 x 的 y 次幂
Document
获取 ID
获取 class
1
| getELementsByClassName();
|
获取标签节点
获取 name
获取父节点
获取兄弟节点
- IE6、7、8 可用
- 正常浏览器(非 IE6、7、8)可用
- IE6、7、8 可用
- 正常浏览器(非 IE6、7、8)可用
1
| previousElementSibling();
|
- 兼容写法: 先写正常浏览器,后写 IE678。
1
| var div = domObj.nextElementsibling || domObj.nextSibling;
|
获取第一个或最后一个子节点
- 获取第一个孩子节点,IE6、7、8 可用
- 获取第一个孩子节点,正常浏览器(非 IE6、7、8)可用
- 获取最后一个孩子节点,IE6、7、8 可用
- 获取最后一个孩子节点,正常浏览器(非 IE6、7、8)可用
- 兼容写法: 先写正常浏览器,后写 IE678。
1
| var div = domObj.firstElementChild || domObj.firstChild;
|
获取所有子节点
- 返回指定元素的子元素集合,包括 HTML 节点,所有属性,文本节点(火狐、谷歌等高版本浏览器会把换行也看做是子节点)(嫡出)
- 选取所有的子节点(只有元素节点)没有兼容性问题(IE6、7、8 注释也会识别为元素节点)(庶出)
创建节点
插入节点
- 添加节点为最后一个子元素
- 将节点插入到指定位置
1
| insertBefore(插入的节点, 参照节点);
|
删除节点
- 删除某个子节点
复制接点
- 接受一个布尔值参数(可选),true 表示深复制(包括子节点),false 表示浅复制(不包括子节点);默认既为 false
获取节点属性
设置节点属性
文档打印输出
Array
数组长度
遍历数组
1 2 3
| for (var i = 0; i < Array.length; i++) { console.log(arr[i]); }
|
向数组的末尾添加一个或多个元素,并返回新的长度
1
| Array.push(新数组值1,新数组值2...)
|
常用方法
1 2 3 4 5 6 7 8 9
| Array.pop(); Array.shift(); Array.unshift();
Array.concat(); Array.join();
Array.split();
|
Boolean
真
假
各个数据类型中的真假
数据 结论
数字 所有数字都是真,0 是假
字符串 所有字符串都是真,””是假
对象 所有对象都是真,null 是假
未定义 undefined 是假,没有真
Date
自定义日期时间
1
| new Date(指定日期时间("2001/01/18", 2001, 1, 18));
|
获取日(1-31)
获取星期(0-6)
获取月(0-11)
获取完整年份
获取小时(0-23)
获取分钟(0-59)
获取秒(0-59)
获取当前毫秒
获取 1970 年 1 月 1 日午夜至当前时间的毫秒数
1 2 3
| getTime(); valueOf(); Date.now() + new Date();
|
函数(function)
函数是由事件驱动的或者当它被调用时执行的重复使用的代码块。
函数声明
1 2
| var fun = function(){} function fun = function(){}
|
函数声明后需要调用才会执行
在函数体内部声明变量,会把该变量声明提升到函数体的最顶端,只提升变量,不赋值,执行到赋值语句时才赋值。
获取函数形参个数
实参 arguments
获取实参
获取实参个数
返回正在执行的函数(返回函数)
在使用递归时推荐使用 arguments.callee 代替函数名本身
表单操作
获取文本框内容
设置表单内容
表单自动获得焦点
选择表单内容
弹出警示框
控制台输出
1 2 3 4 5 6
| console.log();
console.warn();
console.error();
|
事件
事件源.事件 = 事件处理函数
鼠标单击
鼠标双击
鼠标经过
鼠标离开
获得焦点,表示文本框等获得鼠标光标
失去焦点,表示文本框等失去鼠标光标。
按下并释放键盘上的一个键时触发
文本内容或下拉菜单中的选项发生改变
用户输入时触发
1 2
| oninput(fun); onpropertychange(fun);
|
设置
设置样式
设置属性
设置 class 值
设置元素内容
获取
获取宽度(包括内边距、边框)
获取宽度(包括内边距不包括边框)
获取属性
获取样式
面向对象
Object 对象:
属性:
获取已经实例化对象的构造函数
方法:
判断指定属性是否是构造函数的属性
检测属于什么对象
判断是否为某一个对象
1 2
| a instanceof b; c instanceof c;
|
继承
1 2 3 4 5 6 7 8
| var Person = function () { this.属性 = 值; }; var Student = function () { Person.call(this, arguments); this.属性 = 值; }; Student.prototype = new Person();
|