学习总结-JavaScript基础知识

简介

JavaScript是网景公司开发的基于对象(Object)和事件驱动(Event Driven)并具有安全性能的一种动态脚本语言，是一种可以直接运行于web浏览器脚本语言。

组成

1. ECMAScript：JavaScript标准。
2. DOM：文档对象模型。
3. BOM：浏览器对象模型。

加载

页面载入时，会首先先执行body中的JavaScript；调用时才会执行head中的JavaScript。
使用window.onload或在body标签中设置onload事件，会在页面加载完后执行相应的方法。

弹框

1. alert：提示框；
2. confirm：确认框；
3. prompt：输入框。

<script type="text/javascript">
	alert("提示框");
	confirm("确认框");
	prompt("输入提示信息", "默认值");
</script>

JS数据类型

JavaScript的所有类型都用var声明，type()方法可以返回变量的类型。

1. 数值类型 number：int、float、double等都属于数值类型。
2. 字符串类型 String：字符串和字符都属于该类型。
3. 对象类型 Object：所有new出来的对象都属于该类型。
4. 布尔类型 Boolean：true、false。
5. undefined：变量默认的初始值。

String类型常用方法

1. indexOf(“字符” [, 起始下标]")：获取字符在字符串中的索引位，没有则返回-1。
2. charAt(index)：获取指定索引位的字符。
3. split(“字符”)：按指定字符分割字符串，返回数组。
4. substr(起始位置，截取长度)：截取字符串。
5. substring(起始位置，结束位置)：截取字符串。
   …

<script type="text/javascript">
	var str = "123456789 asdfghjkl asdfgh";
	var index = str.indexOf("a", 12);
	var cha = charAt(14);
	var strs = str.split(" ");
	var str1 = str.substr(0, 5);
	var str2 = str.substring(0, 7);
</script>

Array类型常用方法

1. push()：追加元素到数组末尾，并返回新数组长度。
2. pop()：删除并返回最后一个元素。
3. sort()：数组排序。
4. reverse()：颠倒数组。
5. join(“字符”)：用指定字符连接数组元素并返回字符串。

<script type="text/javascript">
	var arr1 = new Array();
	var arr2 = [1, 2, 8, 4, 5];
	var len = arr2.push(6);
	var del = arr2.pop();
	arr2.sort();
	arr2.reverse();
	var str = arr2.join("-");
</script>

JS函数

1. 系统函数：parseInt()/parseFloat()/…类型转换；isNaN()检查参数是否为非数字类型。
2. 自定义函数：function 函数名(参数列表){ JS 语句；[return 返回值]}。

document获取标签对象

1. getElementById()：根据id获取。
2. getElementsByName()：根据标签属性name获取。
3. getElementsByClassName()：根据class 属性名获取。
4. getElementsByTagName()：根据标签名获取。

var first = document.getElementById("first");
var second = document.getElementsByName("second");
var third = document.getElementsByClassName("third");
var divs = document.getElementsByTagName("div");

history控制好页面跳转

1. back()：后退一步。
2. forward()：前进一步。
3. go(num)：根据num的正负值前进或后退多少步。

<a href = "javascript:back()">后退</a>
<a href = "javascript:forward()">前进</a>
<a href = "javascript:go(-1)">go</a>

location设置当前页面URL信息

1. href：可以设置并跳转到指定的URL。
2. target：可以设置跳转时的方式，_self or _blank。

HTML中常见事件

1. onclick：点击事件。
2. ondblclick：双击事件。
3. onload：页面加载完成时事件，一般用在body标签中。
4. onfocus：获得焦点事件。
5. onblur：失去焦点事件。
6. onkeydown：按下键盘事件。
7. onkeypress：按住键盘事件。
8. onkeyup：放开键盘事件。
9. onchange：框内容改变事件。
10. onmouseover:：鼠标经过事件。
11. onmouseleave：鼠标离开事件。
    …

JS标签对象常用方法

1. 标签对象设置样式：每个标签都含有style属性，通过该属性可以设置自己想要的样式，类似于赋值语句，如：test.style.color = “red”;
2. getAttribute(属性名)：获取标签指定属性名的值。
3. setAttribute(属性名，值)：设置标签指定属性为某值。

增删子节点

1. createElenment(标签名)：创建指定标签名的节点，属于document的方法。
2. appendChild(子节点)：在某标签下追加指定的子节点。
3. insertBefore(newNode, oldNode)：在某标签下的oldNode子节点前插入新的结点。
4. replaceChild(newNode, oldNode)：在某标签下用新的子节点替换旧的子节点，返回旧子节点对象的引用。
5. removeChild(delNode)：在某标签下删除指定的子节点。

<script type="text/javascript">
	var test = document.getElementById("test");
	var test2 = document.getElementById("test2");
	var p1 = document.createElement("p");
	p1.innerHTML = "123456";
	var p2 = document.createElement("p");
	p2.innerHTML = "asddfggh";
	test.insertBefore(p1, test2);
	test.replaceChild(p2, p1);
	test.removeChild(p2);
</script>

时间对象Date

1. getFullYear()：获取年。
2. getMonth()：获取月，从0开始。
3. getDate()：获取日。
4. getDay()：获取星期，从0开始。
5. getHours()：时。
6. getMinutes()：分。
7. getSeconds()：秒

<script type="text/javascript">
	//时间对象
	var date = new Date();
	//年
	var year = date.getFullYear();
	//月，从0开始，需要加1
	var month = date.getMonth() + 1;
	//日
	var day = date.getDate();
	//星期，从0开始
	var weekDay = ["日", "一", "二", "三", "四", "五", "六"];
	week = weekDay[date.getDay()];
	//小时
	var hour = date.getHours();
	//分钟
	var minute = date.getMinutes();
	//秒
	var second = date.getSeconds();
	//毫秒
	var milli = date.getMilliseconds();	
</script>

定时

1. setTimeout(执行的方法，触发时间)：设置定时，经过毫秒级单位时间后执行一次方法。
2. setInterval(执行的方法，时间间隔)：设置定时，每经过一定的时间就执行方法。