javaScript笔记

javascript

运行在客户端的脚本语言（轻量级、弱类型 ）

javascript应用：
（1）表单验证
（2）ajax请求
（3） 网页特效

javascript组成：
(1)ECMAScript，描述了该语言的语法和基本对象。
(2)文档对象模型（DOM），描述处理网页内容的方法和接口。
(3)浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

javascript代码编写位置：

(1) 写在body的任何地方
(2) 写在标签中
代码必须写在

<script type="text/javascript">
		js代码..........
</script>

(3) 写在.js结尾的文件中
使用时必须要引用：

<script src="js文件的路径及名称"type="text/javascript"charset="utf-8"></script>

输出：显示数据

(1) 使用 window.alert() 弹出警告框。 特点：警告框显示（html标签当成文本显示）
(2) 使用 document.write() 方法将内容写到 HTML 文档中。 特点：显示在网页文档中（能解析html标签及css）
(3) 使用 console.log() 写入到浏览器的控制台。 特点：显示在控制台(F12–>console)

(4) 使用 innerHTML 写入到 HTML 元素。 后续章节（用得很多）

变量与数据类型（弱类型）：
语法：

var   变量名 = 值;

查看原始数据类型：

typeof( 变量或值 );

注意：
javascript上要区分大小写

原始数据类型：
(1)number
(2)boolean
(3)string
(4)unfined：变量未初始化
(5)null：空的
(6)对象：

其它知识：
(1)取页面的元素的值（取值）：

var  变量名 = document.getElementById('标签的id名称').value;	//注意：取出来都是string 

(2)给页面元素赋值（赋值）：

 document.getElementById('标签的id名称').value = '值';

数据类型转换：
parseInt() 转为int
parseFloat() 转为float

标签应用事件：

<a onclick="函数名">  点我 </a>

js代码中：

function  函数名(){
		相关代码.......
	}

事件注册及使用：
语法：

元素对象.事件名 = function(){
	相关代码.......
}

例如：
在网页加载完毕后会执行function中的代码

window.onload = function(){
	相关代码......
}

例如：
在对id名称叫btn1的按钮做点击行为时，会执行function中的代码

document.getElementById('btn1').onclick = function(){
	相关代码......
}

Array：数组对象

创建语法：

new Array();
	new Array(size);
	new Array(element0, element1, ..., elementn);

定义数组并初始化：

//方式1：
	var arr = new Array();			//创建时length为0
	arr[下标] =  元素;

//方式2：
	var arr = new Array(3);
	arr[下标] =  元素;

//方式3：
	var arr = new Array(10,20,30,40,50);

//方式4：简洁方式
	var arr = [元素1,元素2,元素n]

数组的访问与输出：
访问：
通过下标访问，从0开始

获得数组的长度：

数组名.length;

循环输出（访问）：

for(var i=0;i<数组名.length;i++){
	数组名[i]
}

排序语法：

数组名.sort(function(a,b){
	return a-b;		-->升序(如果是其它类型需要使用parseInt转换
});

数组名.sort(function(a,b){
	return b-a;		-->降序
});

数组名.sort(function(a,b){
	Math.random()-0.5;		-->随机排序
});

document常用方法：

document(DOM对象)：
文档对象模型，提供了网页文档操作的方法和属性

常用方法：
getElementById()：根据标签id名称来获取元素，因为id名称不允许重名，因此返回：单个对象
getElementsByTagName()：根据标签名称来获取元素，能获取同名的所有标签，因此返回：数组
getElementsByClassName(‘class名称’)：根据标签的class名称来取值，因为class可以重复调用，因此返回数组
getElelemmentsByName()：根据标签的name来获取元素，可以相同，因此返回：数组
…

获取的属性：
innerHTML：设置或获取指定元素上值
注意：
表单因为有value属性，因此可以通过value属性来取值和赋值
但其它元素没有value属性，就可以通过innerHTML和innerText来取值和赋值

style：设置或获取指定元素的样式

var spans = document.getElementsByTagName('span');	//获取页面中所有的span标签

//获取某个元素：
	spans[下标].属性
	
//循环操作每个元素：
	for(var i=0;i<spans.length;i++){
		spans[i].属性 .........
	}

Date：日期对象

语法：

var  对象名 = new Date();
	var 对象名 = new Date(2012,5,5);	//通过构造方法设置日期

常用方法：

setxxx()方法组：设置日期的	
	如：
		setFullYear(2012)：设置年份
		setMonth(4)：设置月份
		.....
		也可以var 对象名 = new Date(年,月,日......);

	getxxx()方法组：获取指定的部份
	如：
		getFullYear()：获取年份
		getMonth()：获取 月份
		...	

	toxxx()方法组：获取指定格式的日期
	常用：
		toLocaleString()：获取日期和时间部份
		toLocaleDateString()：获取日期部份
		toLocaleTimeString()：获取时间部份

String：字符串

常用属性：

length：获取字符的长度

常用方法：

toUppercase()：转为大写
toLowerCase()：转为小写

charAt(位置)：返回指定位置上的字符			返回值：位置上的字符
charCodeAt(位置)：返回指定位置上的字符的编码		返回值：编码


indexOf('字符')：查找字符第一次出现的位置
lastIndexOf('字符')：查找最后一次出现的位置		返回值：从0截取的索引（未找到-1）

substr(start,length)：从start开始截取length个字符，	返回值：截取后的字符串
substring(start,end)：截取范围内的字符串		返回值：截取后的字符中（含start 不含end)

replace()：替换

split('分割符')：按指定的符号分割为数组			返回值：数组 

Math对象：数学工具

语法：

Math.属性
Math.函数()

常用的属性：
Math.PI

常用的函数：

round()：四舍五入
	ceil()：上舍入
	floor()：下舍入
	random()：随机数 0-1之间的
	.....

产生范围内随机数：

Math.floor(Math.random() * 上限)     //注意：不含上限

function对象：函数
语法：

function    函数名(参数1,参数n){
		相关代码........
	
		return 值;			//有这句代码：表示函数有返回值	没有这句代码：表示函数没有返回值
	}

Golbal：全局对象

全局属性：

NaN：非数字的值
undefined：未定义的值

全局函数：

isNaN()：判断是否非数字		//不是数字：true	是数字：false

	eval()：将字符串按表达式执行		//例如：eval("10+10")可以得到结果：20
	
	parseInt()：转为整数
	parseFloat()：转为小数

	Number()：转数值

window(BOM 宿主对象)

：
浏览器对象

常用的属性：
closed：窗口是否关闭
…
document：对document对象的引用
location：对location对象的引用
history：对history的引用
navigatator：对navigatator对象的引用
screen：对screen对象的引用
…………

常用的方法：

alert()：消息警告框
prompt()：提示输入对话框			返回：输入的内容和null
comfirm()：带消息以及确定和取消按钮的对话框	返回：true和false

setInterval(要执行的函数,间隔时间)：每当经过间隔时间时就会执行指定的函数
clearInterval()：清空由setInterval()设置的计时器
例如：

setInterval(myTime,1000)：每隔1秒 钟执行一下myTime函数(一直执行行)

setTimeout()：到达指定的间隔时后执行函数
clearTimeout()：清空由setTimeout()设置的计时器
例如：

setTimeout(myTime,1000)：1秒钟后执行myTime函数，然后就结束

它们语法：

setInterval(要执行的函数,间隔时间);		->间隔时间是毫秒：1000毫秒是1秒
setInterval(function(){.........},间隔时间);

表单

表单获取：

var f = document.forms[索引]
或者
var f = document.forms['表单id']
或者
var f = document.forms['表单name'];

表单的属性：
f.action
f.method
f.name
…
只要是表单的属性，都可以在js中使用
表单提交：

f.submit('页面');

表单重置：

f.reset();

表单元素的索引：

f[索引].属性

节点

获取子节点：
children：获取所有子元素（只获取html子元素本身） 返回：HTMLCellection
childnodes：获取所有的子节点(包含：文本节点、注释节点…) 返回：NodeList
例如：

<ul>
		<!--注释-->
		<li>aaaa</li>
		<!--注释-->
		<li>aaaa</li>
	<ul>
//chilren获取：2个
//childNodes获取：9个

firstChild和lastChild：获取第1个子节点 和 最后一个子节点			返回：node

firstElementChild  和 lastElementChild：获取第1个子元素 和 最后一个子元素	返回：HTMLElement

插入节点与创建节点：

创建节点：

document.createElement('节点名称');

例如：

var newNode = document.createElement('li');		表示创建li
	var  newNode = document.createElement('option');	表示创建option
	//设置节点显示的内容：
	newNode.innerHTML = "内容";

案例：创建多选框
var chk = document.createElement('input');
chk.type = 'checkbox';
chk.vaue = '足球';

插入节点：
insertBefore()：法在您指定的已有子节点之前插入新的子节点。
语法：

元素.insertBefore(新节点,已存在的节点);

appendChild()：可向节点的子节点列表的末尾添加新的子节点。
语法：

元素.appendChild(新节点);

克隆节点：cloneNode()
语法：
元素.cloneNode(true)：将子孙元素一起克隆
元素.loneNode(false)：只克隆元素本身

例如：
	document.getElementById('ul1').cloneNode(true);		//会克隆ul本身和里面的所有li或更深的孙子元素
	document.getElementById('ul1').cloneNode(false);		//只克隆<ul>本身

删除节点：
removeChild(index)：删除子节点
remove()：删除选中节点，包含子节点
例如：

document.getElementById('#p2').remove();		-->删除p2元素

其它：
parentNode：获取父节点

动态添加事件：

元素.addEventListener('事件',function(){...........});
document.getElementById('#p2').addEventListener('事件',function(){...........});		-->为id为p2的元素添加点击事件

遍历获取的元素集合/数组

元素集合.forEach(function(item){		//注意：item 自己取的參數名
	.............
});

下拉列表框

取值：
取标签本身：

var sel1 = document.getElementById('sel1');

选中项的下标(索引)

var sel_index = sel1.selectedIndex;

选中项的value值(设置了才能取，没有设置就取不到)

var sel_value = sel1.value;

选中项的文本值（之间的数据）

var sel_text = sel1.options[sel_index].innerText;	//或者innerHTML		options表示取到<select>中所有的<option>标签