云驹博客

路漫漫其修远兮,吾将上下而求索。

0%

javascript笔记

如何使用

行内式

<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(数据)

强转数字类型

  1. parseInt(被转换数据) // 小数取整
  2. parseInt(数值,进制) //
  3. 把指定数值由指定进制方式转为十进制
  4. parseFloat(被转换数据) // 转换为浮点值
  5. Number(被转换数据) // 有小数带小数
  6. 利用 - * / 也可以转换

十进制转 8 进制

020(十进制前加 0)

十进制转 16 进制

0x20(十进制前加 0x)

转字符串

  1. 被转换数据.toString()
  2. String(被转换数据)

转布尔型(boolean)

  1. !!被转换数据
  2. Boolean()

入口函数

1
2
3
window.onload = function () {
js代码;
};

这个函数的意思就是说,当我们页面加载完毕之后,采取执行函数体里面的 js 部分

window

定时器

定时器 setInterval

1
2
3
setInterval(fun, 间隔时间(毫秒));
setInterval("fun()", 1000);
setInterval(function () {}, 1000);

关闭定时器

1
clearInterval(定时器名称);

等待指定时间后执行指定函数 setTimeout

1
setTimeout(fun, 等待时间(毫秒));

页面跳转

1
window.location.href = "url";

String

方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。

1
indexOf(字符);

返回字符从尾部首次出现的位置

1
lastIndexOf(字符);

获取相应位置字符(参数:字符位置)

1
charAt(字符位置);

获取相应位置字符 unicode 编码(参数:字符位置)

1
charCodeAt(字符位置);

截取字符串(参数一必填,参数二可选)

slice 参数可为负数(负数会转换为 length+负数)

1
slice(起始位置, [结束位置]);

substr 参数二为从起始位置截取字符的数量(负数 ie678 报错,可使用.length+负数)

1
substr(起始位置, [截取数量]);

subString 与 slice 大致相同,不同点是参数最小值自动转换为起始位置

1
subString(起始位置, [结束位置]);

Math

向下取整

1
floor();

四舍五入

1
round();

向上取整

1
ceill();

返回 x 的 y 次幂

1
pow(x, y);

Document

获取 ID

1
getElementById();

获取 class

1
getELementsByClassName();

获取标签节点

1
getElementsByTagName();

获取 name

1
getElementsByName();

获取父节点

1
parentNode;

获取兄弟节点

  1. IE6、7、8 可用
1
nextSibling();
  1. 正常浏览器(非 IE6、7、8)可用
1
nextElementSibling();
  1. IE6、7、8 可用
1
previousSibling();
  1. 正常浏览器(非 IE6、7、8)可用
1
previousElementSibling();
  1. 兼容写法: 先写正常浏览器,后写 IE678。
1
var div = domObj.nextElementsibling || domObj.nextSibling;

获取第一个或最后一个子节点

  1. 获取第一个孩子节点,IE6、7、8 可用
1
firstChild();
  1. 获取第一个孩子节点,正常浏览器(非 IE6、7、8)可用
1
firstElementChild();
  1. 获取最后一个孩子节点,IE6、7、8 可用
1
lastChild();
  1. 获取最后一个孩子节点,正常浏览器(非 IE6、7、8)可用
1
lastElementChild();
  1. 兼容写法: 先写正常浏览器,后写 IE678。
1
var div = domObj.firstElementChild || domObj.firstChild;

获取所有子节点

  1. 返回指定元素的子元素集合,包括 HTML 节点,所有属性,文本节点(火狐、谷歌等高版本浏览器会把换行也看做是子节点)(嫡出)
1
2
childNodes();
// 使用方法:利用元素属性nodeType判断 是否等于 1 等于1时既是元素节点
  1. 选取所有的子节点(只有元素节点)没有兼容性问题(IE6、7、8 注释也会识别为元素节点)(庶出)
1
children();

创建节点

1
createElement(标签名称);

插入节点

  1. 添加节点为最后一个子元素
1
appendChild();
  1. 将节点插入到指定位置
1
insertBefore(插入的节点, 参照节点);

删除节点

  1. 删除某个子节点
1
removeChild(目标子节点);

复制接点

  1. 接受一个布尔值参数(可选),true 表示深复制(包括子节点),false 表示浅复制(不包括子节点);默认既为 false
1
cloneNode();

获取节点属性

1
getAttribute(属性名称);

设置节点属性

1
setAttribute(属性名称, 值);

文档打印输出

1
write();

Array

数组长度

1
Array.length;

遍历数组

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

1
true;

1
false;

各个数据类型中的真假

数据 结论

数字 所有数字都是真,0 是假
字符串 所有字符串都是真,””是假
对象 所有对象都是真,null 是假
未定义 undefined 是假,没有真

Date

自定义日期时间

1
new Date(指定日期时间("2001/01/18", 2001, 1, 18));

获取日(1-31)

1
getDate();

获取星期(0-6)

1
getDay();

获取月(0-11)

1
getMonth();

获取完整年份

1
getFullYear();

获取小时(0-23)

1
getHours();

获取分钟(0-59)

1
getMinutes();

获取秒(0-59)

1
getSeconds();

获取当前毫秒

1
getMilliseconds();

获取 1970 年 1 月 1 日午夜至当前时间的毫秒数

1
2
3
getTime();
valueOf();
Date.now() + new Date();

函数(function)

函数是由事件驱动的或者当它被调用时执行的重复使用的代码块。

函数声明

1
2
var fun = function(){}
function fun = function(){}

函数声明后需要调用才会执行
在函数体内部声明变量,会把该变量声明提升到函数体的最顶端,只提升变量,不赋值,执行到赋值语句时才赋值。

获取函数形参个数

1
函数名.length;

实参 arguments

获取实参

1
arguments;

获取实参个数

1
arguments.length;

返回正在执行的函数(返回函数)

1
arguments.callee;

在使用递归时推荐使用 arguments.callee 代替函数名本身

表单操作

获取文本框内容

1
文本框对象.value;

设置表单内容

1
表单元素.value = 值;

表单自动获得焦点

1
focus();

选择表单内容

1
select();

弹出警示框

1
alert(); // window.alert()

控制台输出

1
2
3
4
5
6
// 普通输出
console.log();
// 警告(黄色感叹号)
console.warn();
// 错误(红叉叉)
console.error();

事件

事件源.事件 = 事件处理函数

鼠标单击

1
onclick(fun);

鼠标双击

1
ondblclick(fun);

鼠标经过

1
onmouseover(fun);

鼠标离开

1
onmouseout(fun);

获得焦点,表示文本框等获得鼠标光标

1
onfocus(fun);

失去焦点,表示文本框等失去鼠标光标。

1
onblur(fun);

按下并释放键盘上的一个键时触发

1
onkeyup(fun);

文本内容或下拉菜单中的选项发生改变

1
onchange(fun);

用户输入时触发

1
2
oninput(fun);
onpropertychange(fun); // IE 678

设置

设置样式

1
元素.style.样式 = 值;

设置属性

1
元素.属性名称 = 值;

设置 class 值

1
元素.className = 值;

设置元素内容

1
元素.innerHTML = 值;

获取

获取宽度(包括内边距、边框)

1
offsetWidth;

获取宽度(包括内边距不包括边框)

1
clientWidth;

获取属性

1
元素.属性名称;

获取样式

1

面向对象

Object 对象:

属性:

获取已经实例化对象的构造函数

1
constructor;

方法:

判断指定属性是否是构造函数的属性

1
hasOwnProperty();

检测属于什么对象

1
toString.call(值);

判断是否为某一个对象

1
2
a instanceof b; // false
c instanceof c; // true

继承

1
2
3
4
5
6
7
8
var Person = function () {
this.属性 = 值;
};
var Student = function () {
Person.call(this, arguments);
this.属性 = 值;
};
Student.prototype = new Person();