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. 利用 - * / 也可以转换
  7. 十进制转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()
  2. 正常浏览器(非IE6、7、8)可用

    1
    nextElementSibling()
  3. IE6、7、8可用

    1
    previousSibling()
  4. 正常浏览器(非IE6、7、8)可用

    1
    previousElementSibling()
  5. 兼容写法: 先写正常浏览器,后写IE678。

    1
    var div = domObj.nextElementsibling || domObj.nextSibling;

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

  1. 获取第一个孩子节点,IE6、7、8可用

    1
    firstChild()
  2. 获取第一个孩子节点,正常浏览器(非IE6、7、8)可用

    1
    firstElementChild()
  3. 获取最后一个孩子节点,IE6、7、8可用

    1
    lastChild()
  4. 获取最后一个孩子节点,正常浏览器(非IE6、7、8)可用

    1
    lastElementChild()
  5. 兼容写法: 先写正常浏览器,后写IE678。

    1
    var div = domObj.firstElementChild || domObj.firstChild;

获取所有子节点

  1. 返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点(火狐、谷歌等高版本浏览器会把换行也看做是子节点)(嫡出)

    1
    2
    childNodes()
    // 使用方法:利用元素属性nodeType判断 是否等于 1 等于1时既是元素节点
  2. 选取所有的子节点(只有元素节点)没有兼容性问题(IE6、7、8注释也会识别为元素节点)(庶出)

    1
    children()

创建节点

1
createElement(标签名称)

插入节点

  1. 添加节点为最后一个子元素

    1
    appendChild()
  2. 将节点插入到指定位置

    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
4
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();
-------------本文结束,感谢您的阅读-------------
最近打算存点钱,吃点高端的像沙县小吃这样的餐厅