jsvascript

JavaScript

js能做什么?

1、能写动态效果

2、前后台数据交互

3、局部刷新

js分为几部分?

三部分

1、ECMA 基础核心语法

2、BOM (Browser Object Model) 浏览器对象模型

3、DOM (Document Object Model) 文档对象模型

输出

1、在文档流输出

1
document.write();

2、弹框

1
alert();

3、控制台输出

1
console.log();

4、在页面头部显示

1
document.title = '';

变量

变量声明

标量

1
var name = value;

数组

1
2
3
4
5
var arr = [1,2,3,4];	

var arr = new Array();
arr[0] = 1;
arr[1] = 2;

页面资源加载完成后触发

1
2
3
4
window.onload = function()
{

}

变量分类

全局变量

1、在函数体外声明的变量

2、在整个脚本有效

3、必须先声明后使用

局部变量

1、声明在函数体内

2、在函数内部有效

获取元素

1、根据html标签id获取

1
document.getElementById('id');

获取的是单一对象

document不能改变

2、根据html标签类型获取

1
document.getElementsByTagName('html');

获取的是对象集合,拥有length属性

document可以改变为父级标签对象

3、根据css名获取

1
document.getElementsByClassName(‘classname’);

获取的是对象集合,拥有length属性

4、根据name属性获取

1
document.getElementsByName(‘name’);

获取的是对象集合,拥有length属性

js三步走

1、先获取

1
var oBtn = document.getElementById('btnid');

2、加事件

1
2
3
4
5
var oBtn = document.getElementById('btnid');
oBtn.onclick = function()
{

}

3、再操作

1
2
3
4
5
var oBtn = document.getElementById('btnid');
oBtn.onclick = function()
{
alert('具体操作');
}

函数

1、普通函数

1
2
3
4
5
6
function func()
{

}

func();

2、匿名函数

1
2
3
4
5
6
var func = function ()
{

}

func();

3、事件函数

1
2
3
4
5
6
var oBtn = document.getElementById()

oBtn.onclick = function()
{

}

4、行间触发函数(一般不用)

1
<input type="button" value="提交" onclick = "func()" />

关于事件

1、加载完成事件

1
window.onload

2、鼠标点击事件

1
obj.onclick

注:点击页面任意处触发点击事件

1
document.onclick

3、鼠标移入事件

1
obj.onmouseover

4、鼠标移出事件

1
obj.onmouseout

5、鼠标滚动事件

1
window.onscroll

6、鼠标摁下事件

1
obj.onmousedown

7、鼠标弹起事件

1
obj.onmouseup

8、鼠标移动事件

1
document.onmousemove

9、鼠标得到焦点

1
obj.onfocus

10、鼠标失去焦点

1
obj.onblur

11、改变窗口大小

1
window.onresize

12、键盘按下事件

1
obj.onkeydown

关于单双引号

js里面没有像php是否解析变量的区别

但是,单引号不能嵌套单引号,双引号不能套双引号

关于报错

如果报错,无论什么类型的错误,代码终止,后续代码不执行

关于数据类型

严格来说只有一种类型,就是对象

日常可见的有对象,字符串,数字,布尔,数组,null,undefined

点和中括号的区别

1
2
3
4
5
6
var bgc = 'background';
function show()
{
document.body.style[bgc] = 'red';
document.body.style.bgc = 'red'; //这是错误的
}

如果变量名和对象的属性名相同

点变量名取不到对象的属性

但是中括号可以

中括号可以代替点

改变className

1
obj.className = XXX

标签内容

1、获取

1
obj.innerHTML

2、设置

1
obj.innerHTML = XXX

关于input标签的value属性

无论input框中输入什么类型的值,获取出来后得到的都是string

关于NaN

不能用来做比较

判断是否为NaN

1
isNaN()

关于数字

1、number

1
2
3
4
var str = 'ab.123'; //NaN
var str = '12.abc'; //NaN
var str = '123.1'; //123.1
var str = '123'; //123

2、parseInt

1
2
3
var str = 'abc.123'; //NaN
var str = '123.abc'; //123
var str = '123.123.abc'; //123

3、parseFloat

1
2
3
var str = 'abc.123.456';  //NaN
var str = '123.abc'; //123
var str = '123.123.abc'; //123.123

使用number字符串中不能出现字母,如果有字母就是NaN

使用parseFloat首个字符是字母就是NaN,如果是整型或者是浮点型,会去除后面的字符串,保留前面的整型或者浮点数

如果使用parseInt首个字符是字母就是NaN,如果是整型或者是浮点型,会去除后面的字符串和小数,保留前面的整型

自定义行间属性

1
2
3
4
5
6
7
8
9
10
11
window.onload = function()
{
var oBtn = document.getElementById('btn');

oBtn.info = "value";

oBtn.onclick = function()
{
alert(oBtn.info);
}
}

在html上直接写属性不兼容“高级”浏览器

设置行间属性

1、设置

1
setAttribute('name',vlaue);

2、获取

1
getAttribute('name');

undefined出现的几种情况

1、函数未传参

2、变量定义了没赋值

3、未定义变量用typeof检测

4、函数没有返回值

5、函数有return关键字,但是没有值

为false的几种情况

1、’’ 空字符串

2、false

3、null

4、undefined

5、NaN

6、0

定时器

一次性

1
var timer = setTimeout(func, ms);

清空定时器

1
clearTimeout(timer);

周期性

1
var timer = setInterval(func,ms);

清空定时器

1
clearInterval(timer);

注意:开启了定时器就必须清空定时器

1
2
3
setInterval(function(a,b){
alert(a+b); //3
}, 1000, 1,2);

随机数函数

1
2
3
4
function rand(start,end)
{
return parseInt(Math.random()*(end-start+1)+start);
}

调用:

1
rand(0, 10);

获取非行间样式函数

1
2
3
4
function getStyle(obj , sName)
{
return obj.currentStyle ? obj.currentStyle[sName] : getComputedStyle(obj , false)[sName];
}

调用:

1
getStyle(oDiv, 'width');

数组排序

升序

1
2
3
var newArr = arr.sort(function(a,b){
return a-b;
});

降序

1
2
3
var newArr = arr.sort(function(a,b){
return b-a;
});

时间类

实例化

1
var oDate = new Date();

获取年份

1
var oYear = oDate.getFullYear();

获取月份

1
var oMouth = oDate.getMonth()+1;

获取今天

1
var oDay = oDate.getDate();

获取小时

1
var oHour = oDate.getHours();

获取分钟

1
var oMinute = oDate.getMinutes();

获取秒

1
var oSecond = oDate.getSeconds();

获取时间戳

1
var oTime = oDate.getTime();

注:获取的时间戳以毫秒为单位,和php以秒数为单位不同

获取本月天数

1
2
oDate.setMonth(oDate.getMonth()+1 , 0);
var dc = oDate.getDate();

设置时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//设置年,月、日为可选参数
oDate.setFullYear(2018, 5, 29);
//设置月,日为可选参数
oDate.setMonth(5, 29);
//设置日
oDate.setDate(29);
//设置小时,分、秒、毫秒为可选参数
oDate.setHours(23, 59, 59, 000);
//设置分,秒、毫秒为可选参数
oDate.setMinutes(59, 59, 000);
//设置秒,毫秒为可选参数
oDate.setSeconds(59, 000);
//设置毫秒
oDate.setMilliseconds(000);

封闭空间

1
2
3
(function(a, b){
alert(a+b); //3
})(1, 2);

获取浏览器信息

1
window.navtigator.userAgent

获取子标签集合

1
obj.children

获取所有标签

1
document.getElementsByTagName('*');

关于select标签

选项改变事件

1
2
3
4
oSel.onchange = function()
{

}

获取选中的选项

1
var index = oSel.selectedIndex;

获取选项的值

1
oSel.options[index].value

获取选项的文本

1
oSel.options[index].text

添加选项

1
2
3
4
5
6
var oNew = new Option();

oNew.value = value;
oNew.text = text;

oSel.options.add(oNew);

删除选项

1
oSel.options.remove(key);  //key为option对象集合的下标

错误处理

1
2
3
4
5
try{

} catch (e) {
console.log(e);
}

获取屏幕可视区宽高

1
2
3
document.documentElement.clientWidth;

document.documentElement.clientHeight;

获取滚动距离

1
document.body.scrollTop || document.documentElement.scrollTop;

关于盒子模型

获取高度

1
offsetHeight

获取宽度

1
offsetWidth

距离可视区顶部的距离

1
offsetTop

注:如果父级标签有position,参照变为父级, 否则是body

关于DOM树

找到最近的有position的父级标签

1
offsetParent

注:最多能获取到body,再往上获取就是null

获取父级标签

1
parentNode

注:最多能获取到document,再往上获取就是null

创建元素并添加HTML

1
2
3
4
5
6
//创建元素
var newHTML = document.createElement('name'); //name为标签名
//添加至指定位置
parent.insertBefore(newHTML, place); //添加至parent父节点的place位置
//添加至最后
parent.appendChild(newHTML);

删除HTML

1
parent.removeChild(delHTML);

关于键盘事件

1
2
3
4
5
document.onkeydown = function(ev)
{
var oEvent = ev || event;
var kc = oEvent.keyCode; //kc为键盘码
}

阻止默认事件

1
2
3
4
oInput.onkeydown = function()
{
return false;
}

获取鼠标坐标

1
2
3
4
5
6
document.onmousemove = function(ev)
{
var oEvent = ev || event;
var x = oEvent.clientX;
var y = oEvent.clientY;
}

关于弹框

消息提示框

1
alert('msg');

消息对话框

1
var sRes = window.prompt('我是问题');

确认对话框

1
var bRes = window.confirm('你确认删除吗');

关于json

json对象转为json字符串

1
JSON.stringify(jsonObj);

json字符串转为json对象

1
2
3
var jsonObj = eval('(' + jsonStr + ')');

var jsonObj = JSON.parse(jsonStr);

循环取json数据

1
2
3
for (i in jsonObj) {
alert(jsonObj[i]);
}

json排序

1
2
3
4
5
6
7
8
9
10
11
12
var obj = [
{"num":3},
{"num":5},
{"num":1},
{"num":8},
{"num":6},
];

arr.sort(function(json1 , json2){
return json1.num - json2.num;
});
alert(JSON.stringify(arr));

关于ajax

1、创建对象

1
var xhr = new XMLHttpRequest();

2、发送

1
xhr.open('method' , 'url' , async);

method

get/post

url

后台文件地址

async

true/false

注:

method为get时,数据可通过open方法的url地址传到后台

method为post时,数据可通过send方法传到后台

1
xhr.send('name1='+value1+'&name2='+value2);

async为true时,则为异步,就必须设置header

1
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

3、处理结果

1
2
3
4
xhr.onreadystatechange = function()
{

}

后台返回的数据

1
xhr.responseText;

返回XMLHTTP请求的当前状态

1
xhr.readyState = 4;

0 (未初始化)

对象已建立,但是尚未初始化(尚未调用open方法)

1 (初始化)

已调用send()方法,正在发送请求

2 (发送数据)

send方法调用完成,但是当前的状态及http头未知

3 (数据传送中)

已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误

4 (完成)

数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据

返回http状态码

1
xhr.status = 200;