JavaWeb-JavaScript

1、javascript的简介
* 是基于对象和事件驱动的语言，应用与客户端。
- 基于对象：
** 提供好了很多对象，可以直接拿过来使用
- 事件驱动：
** html做网站静态效果，javascript动态效果

	- 客户端：专门指的是浏览器

* js的特点
	（1）交互性
		- 信息的动态交互

	（2）安全性
		- js不能访问本地磁盘的文件

	（3）跨平台性
		- java里面跨平台性，虚拟机
		- 只有能够支持js的浏览器，都可以运行

* javascript和java的区别（雷锋和雷峰塔）
	（1）java是sun公司，现在oracle；js是网景公司
	（2）JavaScript 是基于对象的，java是面向对象
	（3）java是强类型的语言，js是弱类型的语言
		- 比如java里面 int i = "10";
		- js:  var i = 10; var m = "10";
	（4）JavaScript只需解析就可以执行，而java需要先编译成字节码文件，再执行。

* javascript的组成（下面js）
	三部分组成
	（1）ECMAScript
		- ECMA : 欧洲计算机协会
		- 有ECMA组织制定的js的语法，语句.....

	（2）BOM
		- broswer object model: 浏览器对象模型

	（3）DOM
		- document object model：文档对象模型

2、js和html的结合方式（两种）
第一种：
- 使用一个标签

第二种：
	- 使用script标签，引入一个外部的js文件
	*** 创建一个js文件，写js代码
	- 	<script type="text/javascript" src="1.js"></script>

** 使用第二种方式时候，就不要在script标签里面写js代码了，不会执行。

3、js的原始类型和声明变量
** java的基本数据类型 byte short int long float double char boolean

** 定义变量 都使用关键字 var

** js的原始类型（五个）		
	- string: 字符串
		*** var str = "abc";

	- number：数字类型
		*** var m = 123;

	- boolean：true和false
		*** var flag = true;

	- null
		*** var date = new Date();
		*** 获取对象的引用，null表示对象引用为空 ，所有对象的引用也是object				
	- undifined
		*** 定义一个变量，没有赋值
		*** var aa;
** typeof(); 查看当前变量的数据类型

4、js的语句
- java里面的语句：
** if判断
** switch语句
** 循环 for while do-while

-js里面的这些语句
	** if判断语句
		**** =:表示赋值
		**** ==：表示判断

	** switch语句
		- java里面支持数据类型 string支持吗？在jdk1.7开始支持
		- js里面都支持
		- switch(a) {
			case 5:
				break;
			case 6:
				break;
			default:
			......
		 }
	** 循环语句 for  while    do-while
		- while循环
		**** var i = 5;
		while(i>1) {
			alert(i);
			i--;
		}

		- for循环
		*** for(int i=0;i<=10;i++) { }
		for(var mm=0;mm<=3;mm++) {
			alert(mm);
		}

	** i++ ++i和java里面一样

5、js的运算符
** += ： x+=y; ===> x=x+y;

** js里面不区分整数和小数
	var j = 123;
	alert(j/1000*1000);  
	//  j/1000*1000    在java里面得到结果是 0 
	// 在js里面不区分整数和小数，123/1000=0.123 * 1000 = 123

** 字符串的相加和相减的操作
	var str = "123";

	** 如果相加时候，做是字符串连接
	** 如果相减，做的是相减的运算

	* //字符串的操作
	var str = "456";
	//alert(str+1);   //在java里面操作的结果是 4561 ，在js里面还是 4561
	alert(str-1);    //相减时候，执行减法的运算

	* 提示NaN:表示不是一个数字

** boolean类型也可以操作
	*** 如果设置成true，相当于这个值是1
	*** 如果设置成false，相当于这个值是0

** == 和 === 区别
	** 做判断

	** == 比较的只是值
	** === 比较的是值和类型

** 引入知识
	直接向页面输出的语句（可以把内容显示在页面上）
	* document.write("aaa");
	document.wirte("<hr/>");
	** 可以向页面输出变量，固定值和html代码

6、实现99乘法表（输出到页面上）
* document.write("

");
//循环行 9
for(var i=1;i<=9;i++) {

		document.write("<tr>");
		//循环列
		for(var j=1;j<=i;j++) {
			document.write("<td>");
			//运算
			document.write(j+"*"+i+"="+i*j);
			document.write("</td>");
		}
		//document.write("<br/>");
		document.write("</tr>");
	}
	document.write("</table>");

- document.write里面是双引号，如果设置标签的属性需要使用单引号
- document.write可以输出变量，还可以输出html代码

7、js的数组
* 什么是数组？
- 使用变量，var m = 10;
- java里面的数组 定义 int[] arr = {1,2,3};

* 定义方式（三种）
	第一种： var arr = [1,2,3];   var arr = [1,"4",true];
	第二种：使用内置对象 Array对象
		var arr1 = new Array(5);  //定义一个数组，数组的长度是5
		arr1[0] = "1";

	第三种：使用内置对象 Array
		var arr2 = new Array(3,4,5); //定义一个数组，数组里面的元素是3 4 5 

* 数组里面有一个属性  length：获取到数组的长度

* 数组可以存放不同的数据类型的数据

8、js的函数
** 在java里面定义方法
public 返回类型void /int 方法名(参数列表) {
方法体;
返回值;
}

	public int add(int a,int b) {
		int sum = a+b;
		return sum;
	}

** 在js里面定义函数（方法）有三种方式
	**** 函数的参数列表里面，不需要写var，直接写参数名称
	第一种方式：
		**** 使用到一个关键字 function
		**** function 方法名(参数列表) {
			方法体;
			返回值可有可无（根据实际需要）;
		 }

		**** 代码
		//使用第一种方式创建函数
		function test() {
			alert("qqqqq");
		}

		//调用方法
		//test();

		//定义一个有参数的方法  实现两个数的相加
		function add1(a,b) {
			var sum = a+b;
			alert(sum);		
		}

		//add1(2,3);

		//有返回值的效果
		function add2(a,b,c) {
			var sum1 = a+b+c;
			return sum1;
		}
		alert(add2(3,4,5));
	
	第二种方式：
		**** 匿名函数
			var add = function(参数列表) {
				方法体和返回值;
			}
		**** 代码
		//第二种方式创建函数
		var add3 = function(m,n) {
			alert(m+n);
		}

		//调用方法
		add3(5,6);
	
	第三种方式：（用的少，了解）
		*** 动态函数
		*** 使用到js里面的一个内置对象 Function
			var add = new Function("参数列表","方法体和返回值");

9、js的全局变量和局部变量
** 全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用
- 在方法外部使用，在方法内部使用，在另外一个script标签使用

** 局部变量：在方法内部定义一个变量，只能在方法内部使用
	- 如果在方法的外部调用这个变量，提示出错
	- SCRIPT5009: “nn”未定义 
	12-js的局部变量.html, 行18 字符3

** ie自带了一个调试工具，ie8及其以上的版本中，键盘上 F12，在页面下方出现一个条

10、script标签放在的位置
* 建议把script标签放到 后面
* 如果现在有这样一个需求：
在js里面需要获取到input里面的值，如果把script标签放到head里面
会出现问题。
html解析是从上到下解析的，script标签放到的是head里面，直接在里面取input里面的值，
因为页面还没有解析到input那一行，肯定取不到。

11、js的重载
* 什么是重载？方法名相同，参数列表不同
- java里面有重载，肯定有

* js里面是否有重载？

12、今天的内容的总结
* css
** css和html的四种结合方式(*******)

	** css的基本选择器(********)
		* 标签选择器 div {css代码}
		* class选择器 .名称 {}
		* id选择器   #名称{}
	
	** css的扩展选择器(了解)
		* 关联选择器
			*** 嵌套标签的样式的设置
		* 组合选择器
			*** 不同标签设置相同的样式
		* 伪元素选择器
			** a标签的状态
				lv ha
	** 盒子模型(了解)
		* 边框 border
			上下左右
		* 内边距 padding
			上下左右
		* 外边距 margin
			上下左右
	
	** 漂浮(了解)
		float : left right
	
	** 定位(了解)
		position：absolute  relative

* javascript(*******)
	** 什么是javascript
		- 基于对象和事件驱动的语言，应用与客户端。
		- 特点：
			交互性  安全性  跨平台性

		- javascript和java区别

		- 组成（3部分）
			* ECMAScript
			* bom
			* dom

	** js和html的结合方式（两种）
		第一种 <script type="text/javascript"> js代码; </script>
		第二种 <script type="text/javascript" src="js的路径"> </script>
	
	** js的数据类型
		* 五种原始类型
			string  number boolean null undifined
		* 定义变量使用  var
	
	** js的语句
		* if
		* switch
		* for while do-while
	
	** js的运算符
		* 字符串的操作
			*** 字符串相加：连接
			*** 字符串相减：执行相减运算
		* boolean类型相加
			true： 1
			false：0
		* == 和 === 区别
			** == ： 判断值
			** === ： 判断值和类型
	
	** js的数组
		三种定义方式
		** var arr = [1,2,"3"];
		** var arr1 = new Array(9); //长度9
		** var arr2 = new Array(1,2,3); //元素是 1 2 3

		** 属性 length：数组的长度
	
	** js的函数
		*** function add(a,b) {方法体和返回值;}
		*** var add1 = function(m,n) {方法体和返回值;}
		*** var add2 = new Function("a,b","方法体和返回值");

		**** 不要忘记调用，不然不起作用的
	
	** js的全局变量和局部变量
		** 全局变量：在页面中任何js的部分，都可以使用
		** 局部变量：在方法内部定义一个变量，这个 变量只能在方法内部使用
	
	** script标签位置
		** 建议放在</body>后面
	
	** js的重载（回去思考这个问题）

1、js的String对象
** 创建String对象
*** var str = “abc”;

** 方法和属性（文档）
	*** 属性 length：字符串的长度

	*** 方法
	（1）与html相关的方法
		- bold()：加粗
		- fontcolor(): 设置字符串的颜色
		- fontsize(): 设置字体的大小

		- link(): 将字符串显示成超链接
			**** str4.link("hello.html")
		
		- sub() sup(): 下标和上标

	（2）与java相似的方法
		- concat(): 连接字符串
			** //concat方法
			var str1 = "abc";
			var str2 = "dfg";
			document.write(str1.concat(str2));

		- charAt():返回指定指定位置的字符串
			** var str3 = "abcdefg";
			document.write(str3.charAt(20)); //字符位置不存在，返回空字符串
		
		- indexOf()： 返回字符串位置
			** var str4 = "poiuyt";
			document.write(str4.indexOf("w")); //字符不存在，返回-1
		
		- split()：切分字符串，成数组
			** var str5 = "a-b-c-d";
			var arr1 = str5.split("-");
			document.write("length: "+arr1.length);
		
		- replace() ： 替换字符串
			* 传递两个参数：
				-- 第一个参数是原始字符
				-- 要替换成的字符
			* var str6 = "abcd";
			document.write(str6);
			document.write("<br/>");
			document.write(str6.replace("a","Q"));
		
		- substr()和substring()
			* var str7 = "abcdefghuiop";
			//document.write(str7.substr(5,5));  //fghui  从第五位开始，向后截取五个字符
				*** 从第几位开始，向后截取几位

			document.write("<br/>");
			document.write(str7.substring(3,5)); //de  从第几位开始到第几位结束  [3,5)
				*** 从第几位开始，到第几位结束，但是不包含最后哪一位

2、js的Array对象
** 创建数组（三种）
- var arr1 = [1,2,3];
- var arr2 = new Array(3); //长度是3
- var arr3 = new Array(1,2,3); //数组中的元素是1 2 3

	- var arr = [];  //创建一个空数组

** 属性：length：查看数组的长度

** 方法
	- concat方法： 数组的连接
		* var arr11 = [1,2,3];
		var arr12 = [4,5,6];
		document.write(arr11.concat(arr12));

	- join()：根据指定的字符分割数组
		* var arr13 = new Array(3);
		arr13[0] = "a";
		arr13[1] = "b";
		arr13[2] = "c";

		document.write(arr13);
		document.write("<br/>");
		document.write(arr13.join("-"));
	
	- push():向数组末尾添加元素，返回数组的新的长度
		** 如果添加的是一个数组，这个时候把数组当做一个整体字符串添加进去

		* //push方法
		var arr14 = new Array(3);
		arr14[0] = "tom";
		arr14[1] = "lucy";
		arr14[2] = "jack";
		document.write("old array: "+arr14);

		document.write("<br/>");
		document.write("old length:"+arr14.length);

		document.write("<br/>");
		document.write("new length: "+arr14.push("zhangsan"));

		document.write("<br/>");
		document.write("new array: "+arr14);

		* 		var arr15 = ["aaa","bbb","ccc"];
		var arr16 = ["www","qqq"];

		document.write("old array:"+arr15);
		document.write("<br/>");
		document.write("old length:"+arr15.length);

		document.write("<br/>");
		document.write("new length:"+arr15.push(arr16));
		document.write("<br/>");
		document.write("new array: "+arr15);
		for(var i=0;i<arr15.length;i++) {
			alert(arr15[i]);
		}
	
	- pop()：表示 删除最后一个元素，返回删除的那个元素
		* var arr17 = ["zhangsan","lisi","wangwu","zhaoliu"];
		document.write("old array: "+arr17);
		document.write("<br/>");

		document.write("return: "+arr17.pop());
		document.write("<br/>");
		document.write("new array: "+arr17);
	
	- reverse():颠倒数组中的元素的顺序
		* var arr17 = ["zhangsan","lisi","wangwu","zhaoliu"];
		document.write("old array: "+arr17);
		document.write("<br/>");

		document.write("return: "+arr17.pop());
		document.write("<br/>");
		document.write("new array: "+arr17);

		//reverse方法
		document.write("<hr/>");
		var arr18 = ["zhangsan1","lisi1","zhaoliu1","niuqi1"];
		document.write("old array: "+arr18);
		document.write("<br/>");
		document.write("new array:"+arr18.reverse());

3、js的Date对象
** 在java里面获取当前时间
Date date = new Date();
//格式化
//toLocaleString() //2015年4月17日 11:17:12

** js里面获取当前时间
	var date = new Date();
	//获取当前时间
	var date = new Date();
	document.write(date);  // Fri Apr 17 10:47:46 UTC+0800 2015 

	//转换成习惯的格式
	document.write("<hr/>");
	document.write(date.toLocaleString());

** 获取当前的年方法
	getFullYear()：得到当前的年
		**** document.write("year: "+date.getFullYear());

** 获取当前的月方法
	getMonth()：获取当前的月
		*** 返回的是 0-11月，如果想要得到准确的值，加1
		**** var date1 = date.getMonth()+1;
		document.write("month: "+date1);

** 获取当前的星期
	getDay()：星期,返回的是 (0 ~ 6)
	** 外国朋友，把星期日作为一周的第一天，星期日返回的是 0
	   而星期一到星期六 返回的是 1-6
	** document.write("week: "+date.getDay());

** 获取当前的日
	getDate()：得到当前的天 1-31
	** document.write("day: "+date.getDate());

** 获取当前的小时
	getHours()：获取小时
	** document.write("hour: "+date.getHours());

** 获取当前的分钟
	getMinutes()：分钟
	** document.write("minute: "+date.getMinutes());

** 获取当前的秒
	getSeconds(): 秒
	** document.write("second: "+date.getSeconds());

** 获取毫秒数
	getTime()
	返回的是1970 1 1 至今的毫秒数

	** 应用场景：
		*** 使用毫秒数处理缓存的效果（不有缓存）
			http://www.baidu.com?毫秒数

4、js的Math对象
* 数学的运算
** 里面的都是静态方法，使用可以直接使用 Math.方法()

** ceil(x): 向上舍人

** floor(x)：向下舍人

** round(x)：四舍五入

** random()：得到随机数（伪随机数）
	- 得到0-9的随机数
		Math.random()*10
		Math.floor(Math.random()*10));

5、js的全局函数
* 由于不属于任何一个对象，直接写名称使用

** eval() ： 执行js代码（如果字符串是一个js代码，使用方法直接执行）
	**** var str = "alert('1234');";
	//alert(str);
	eval(str);

** encodeURI() ：对字符进行编码 
	- %E6%B5%8B%E8%AF%95%E4%B8%AD%E6%96%87aaa1234

   decodeURI()  ：对字符进行解码

   encodeURIComponent() 和 decodeURIComponent()
 
** isNaN():判断当前字符串是否是数字
	-- var str2 = "aaaa";
	alert(isNaN(str2));
	*** 如果是数字，返回false
	*** 如果不是数字，返回true

** parseInt()：类型转换
	** var str3 = "123";
	document.write(parseInt(str3)+1);

6、js的函数的重载
** 什么是重载？方法名相同，参数不同

** js的重载是否存在？ 不存在
	** 调用最后一个方法
	** 把传递的参数保存到 arguments数组里面

** js里面是否存在重载？(面试题目)
	（1）js里面不存在重载。
	（2）但是可以通过其他方式模拟重载的效果 （通过aruguments数组来实现）

	*** function add1() {
		//比如传递的是两个参数
		if(arguments.length == 2) {
			return arguments[0]+arguments[1];

		} else if (arguments.length == 3) {
			return arguments[0]+arguments[1]+arguments[2];

		} else if (arguments.length == 4) {

			return arguments[0]+arguments[1]+arguments[2]+arguments[3];
		} else {
			return 0;
		}
	}

7、js的bom对象
** bom：broswer object model: 浏览器对象模型

** 有哪些对象？
*** navigator： 获取客户机的信息（浏览器的信息）
	- navigator.appName
	- document.write(navigator.appName);

*** screen: 获取屏幕的信息
	- document.write(screen.width);
	document.write("<br/>");
	document.write(screen.height);

*** location: 请求url地址
	- href属性
	**** 获取到请求的url地址
		- document.write(location.href);

	**** 设置url地址
		- 页面上安置一个按钮，按钮上绑定一个事件，当我点击这个按钮，页面可以跳转到另外一个页面
		- location.href = "hello.html";

	**** <input type="button" value="tiaozhuan" onclick="href1();"/>
		- 鼠标点击事件  onclick="js的方法;"
	
*** history：请求的url的历史记录
	- 创建三个页面
		1、创建第一个页面 a.html 写一个超链接 到 b.html
		2、创建b.html 超链接 到 c.html
		3、创建c.html

	- 到访问的上一个页面
		history.back();
		history.go(-1);

	- 到访问的下一个页面
		history.forward();
		history.go(1);

**** window（****）
	* 窗口对象
	* 顶层对象（所用的bom对象都是在window里面操作的）

	** 方法
		- window.alert() : 页面弹出一个框，显示内容
			** 简写alert()
		
		- confirm()： 确认框
			- var flag = window.confirm("显示的内容");
		
		- prompt()： 输入的对话框
			- window.prompt("please input : ","0");
			- window.prompt("在显示的内容","输入框里面的默认值");
		
		- open() :　打开一个新的窗口
			** open("打开的新窗口的地址url","","窗口特征，比如窗口宽度和高度") 
			- 创建一个按钮，点击这个按钮，打开一个新的窗口
			- window.open("hello.html","","width=200,height=100");
		
		- close(): 关闭窗口(浏览器兼容性比较差)
			- window.close();
		
		- 做定时器 
		** setInterval("js代码",毫秒数)  1秒=1000毫秒
			- 表示每三秒，执行一次alert方法
			window.setInterval("alert('123');",3000);
			
		** setTimeout("js代码",毫秒数)
			- 表示在毫秒数之后执行，但是只会执行一次

			- 表示四秒之后执行js代码，只会执行一次
			window.setTimeout("alert('abc');",4000);
		
		** clearInterval(): 清除setInterval设置的定时器
			var id1 = setInterval("alert('123');",3000);//通过setInterval会有一个返回值
			clearInterval(id1);

		** clearTimeout() : 清除setTimeout设置的定时器
			var id2 = setTimeout("alert('abc');",4000);
			clearTimeout(id2);

8、js的dom对象（****）
* dom：document object model: 文档对象模型
** 文档：
超文本文档（超文本标记文档） html 、xml
** 对象：
提供了属性和方法
** 模型：使用属性和方法操作超文本标记型文档

*** 可以使用js里面的dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作

*** 想要对标记型文档进行操作，首先需要 对标记型文档里面的所有内容封装成对象
	-- 需要把html里面的标签、属性、文本内容都封装成对象

*** 要想对标记型文档进行操作，解析标记型文档
	- 画图分析，如何使用dom解析html

*** 解析过程
	根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象，
	- document对象：整个文档
	- element对象：标签对象
	- 属性对象
	- 文本对象

	-- Node节点对象：这个对象是这些对象的父对象
		*** 如果在对象里面找不到想要的方法，这个时候到Node对象里面去找

DOM模型有三种：
	DOM level 1：将html文档封装成对象。
	DOM level 2：在level 1的基础上添加新的功能，例如：对于事件和css样式的支持。
	DOM level 3：支持xml1.0的一些新特性。

* DHTML：是很多技术的简称
	** html: 封装数据
	** css：使用属性和属性值设置样式
	** dom：操作html文档（标记型文档）
	** javascript：专门指的是js的语法语句（ECMAScript）

9、document对象
* 表示整个的文档

** 常用方法
	**** write()方法：
		（1）向页面输出变量（值）
		（2）向页面输出html代码
		- var str = "abc";
		document.write(str);
		document.write("<hr/>");
	
	**** getElementById();
		- 通过id得到元素（标签）
		- //使用getElementById得到input标签
		var input1 = document.getElementById("nameid");  //传递的参数是标签里面的id的值
		//得到input里面的value值
		alert(input1.name);   //标签对象.属性名称
		//向input里面设置一个值value
		input1.value = "bbbbb";
	
	**** getElementsByName();
		- 通过标签的name的属性值得到标签
		- 返回的是一个集合（数组）
		- //使用getElementsByName得到input标签
		var inputs = document.getElementsByName("name1");  //传递的参数是 标签里面的name的值
		//alert(inputs.length);
		//遍历数组
		for(var i=0;i<inputs.length;i++) {   //通过遍历数组，得到每个标签里面的具体的值
			var input1 = inputs[i];  //每次循环得到input对象，赋值到input1里面
			alert(input1.value);    //得到每个input标签里面的value值
		}
	
	**** getElementsByTagName("标签名称");
		- 通过标签名称得到元素
		- //演示getElementsByTagName
		var inputs1 = document.getElementsByTagName("input");  //传递的参数，是标签名称
		//alert(inputs1.length);
		//遍历数组，得到每个input标签
		for(var m=0;m<inputs1.length;m++) {
			//得到每个input标签
			var input1 = inputs1[m];
			//得到value值
			alert(input1.value);
		}

	**** 注意地方
		**** 只有一个标签，这个标签只能使用name获取到，这个使用，使用getElementsByName返回的是一个数组，
		但是现在只有一个元素，这个时候不需要遍历，而是可以直接通过数组的下标获取到值
		//通过name得到input标签
		var inputs2 = document.getElementsByName("name11")[0];
		alert(inputs2.value);

		var inputss = document.getElementsByTagName("input")[0];
		alert(inputss.value);

10、案例：window弹窗案例
- 实现过程
1、创建一个页面
** 有两个输入项和一个按钮
** 按钮上面有一个事件：弹出一个新窗口 open

	2、创建弹出页面
		** 表格
		** 每一行有一个按钮和编号和姓名
		** 按钮上有一个事件：把当前的编号和姓名，赋值到第一个页面相应的位置

		****//实现s1方法
		function s1(num1,name1) {
			//需要把num1和name1赋值到window页面
			//跨页面的操作  opener：得到创建这个窗口的窗口 得到window页面
			var pwin = window.opener; //得到window页面
			pwin.document.getElementById("numid").value = num1;
			pwin.document.getElementById("nameid").value = name1;
			//关闭窗口
			window.close();
		}

		－　opener:属性，获取创建当前窗口的窗口

- 做这个案例时候会有一个问题
	*** 由于我们现在访问的是本地文件，js安全性，谷歌浏览器安全级别很高，不允许访问本地文件
	*** 在实际开发中，没有这样的问题，实际中不可能访问本地的文件。
	*** http://www.baidu.com

1、案例一：在末尾添加节点
第一步：获取到ul标签
第二步：创建li标签
document.createElement(“标签名称”)方法
第三步：创建文本
document.createTextNode(“文本内容”);

第四步：把文本添加到li下面
	使用 appendChild方法
第五步：把里添加到ul末尾
	使用 appendChild方法

2、元素对象（element对象）
** 要操作element对象，首先必须要获取到element，
- 使用document里面相应的方法获取

** 方法
	*** 获取属性里面的值
		getAttribute("属性名称")
		- var input1 = document.getElementById("inputid");
		//alert(input1.value);
		alert(input1.getAttribute("value"));
	
	*** 设置属性的值
		input1.setAttribute("class","haha");
	
	*** 删除属性
		input1.removeAttribute("name");

		** 不能删除value

*** 想要获取标签下面的子标签
	** 使用属性 childNodes，但是这个属性兼容性很差
	** 获得标签下面子标签的唯一有效办法，使用getElementsByTagName方法
		- var ul11 = document.getElementById("ulid1");
		//获取ul下面的子标签
		//var lis = ul11.childNodes;
		//alert(lis.length);
		var lis = ul11.getElementsByTagName("li");
		alert(lis.length);

3、Node对象属性一
* nodeName
* nodeType
* nodeValue

* 使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象

* 标签节点对应的值
	nodeType： 1
	nodeName： 大写标签名称  比如SPAN
	nodeValue: null
* 属性节点对应的值
	nodeType： 2
	nodeName： 属性名称
	nodeValue: 属性的值
* 文本节点对应的值
	nodeType： 3
	nodeName： #text
	nodeValue: 文本内容

4、Node对象的属性二

• 
  
• qqqqq
• 
  
• wwww
• 
  

* 父节点
	- ul是li的父节点
	- parentNode
	- //得到li1
	var li1 = document.getElementById("li1");
	//得到ul
	var ul1 = li1.parentNode;
	alert(ul1.id);

* 子节点
	- li是ul的子节点
	- childNodes：得到所有子节点，但是兼容性很差

	- firstChild：获取第一个子节点
		- //获取ul的第一个子节点 id=li1
		//得到ul
		var ul1 = document.getElementById("ulid");
		//第一个子节点
		var li1 = ul1.firstChild;
		alert(li1.id);
	- lastChild：获取最后一个子节点
		//得到最后一个子节点
		var li4 = ul1.lastChild;
		alert(li4.id);

* 同辈节点
	- li直接关系是同辈节点
	- nextSibling: 返回一个给定节点的下一个兄弟节点。
	previousSibling：返回一个给定节点的上一个兄弟节点。

	- //获取li的id是li3的上一个和下一个兄弟节点
	var li3 = document.getElementById("li3");
	//alert(li3.nextSibling.id);
	alert(li3.previousSibling.id);

5、操作dom树
** appendChild方法
- 添加子节点到末尾
- 特点：类似于剪切黏贴的效果

** insertBefore(newNode,oldNode)方法
	- 在某个节点之前插入一个新的节点
	- 两个参数
		* 要插入的节点
		* 在谁之前插入
	- 插入一个节点，节点不存在，创建
		1、创建标签
		2、创建文本
		3、把文本添加到标签下面
	- 代码
	/*
		1、获取到li13标签
		2、创建li
		3、创建文本
		4、把文本添加到li下面
		5、获取到ul
		6、把li添加到ul下面（在<li>貂蝉</li>之前添加 <li>董小宛</li>）		
	*/
	//获取li3 标签
	var li13 = document.getElementById("li13");
	//创建li
	var li15 = document.createElement("li");
	//创建文本
	var text15 = document.createTextNode("董小宛");
	//把文本添加到li下面 appendChild
	li15.appendChild(text15);
	//获取到ul
	var ul21 = document.getElementById("ulid21");
	//在<li>貂蝉</li>之前添加 <li>董小宛</li> 
	//insertBefore(newNode,oldNode)
	ul21.insertBefore(li15,li13);
	
*** 不存在 没有insertAfter()方法

** removeChild方法：删除节点
	- 通过父节点删除，不能自己删除自己
	- /*
		1、获取到li24标签
		2、获取父节点ul标签
		3、执行删除（通过父节点删除）
	*/
	//获取li标签
	var li24 = document.getElementById("li24");
	//获取父节点
	//两种方式  1、通过id获取 ； 2、通过属性 parentNode获取
	var ul31 = document.getElementById("ulid31");
	//删除（通过父节点）
	ul31.removeChild(li24);

** replaceChild(newNode,oldNode)方法: 替换节点
	- 不能自己替换自己，通过父节点替换
	- 两个参数
	** 第一个参数：新的节点（替换成的节点）
	** 第二个参数：旧的节点（被替换的节点）
	- 代码
	/*
		1、获取到li34
		2、创建标签li
		3、创建文本
		4、把文本添加到li下面
		5、获取ul标签（父节点）
		6、执行替换操作 （replaceChild(newNode,oldNode)）
	*/
	//获取li34
	var li34 = document.getElementById("li34");
	//创建li
	var li35 = document.createElement("li");
	//创建文本
	var text35 = document.createTextNode("张无忌");
	//把文本添加到li下面
	li35.appendChild(text35);
	//获取ul
	var ul41 = document.getElementById("ulid41");
	//替换节点
	ul41.replaceChild(li35,li34);

** cloneNode(boolean): 复制节点
	- //把ul列表复制到另外一个div里面
	/*
		1、获取到ul
		2、执行复制方法 cloneNode方法复制 true
		3、把复制之后的内容放到div里面去
			** 获取到div
			** appendChild方法
	*/
	//获取ul
	var ul41 = document.getElementById("ulid41");
	//复制ul，放到类似剪切板里面
	var ulcopy = ul41.cloneNode(true)
	//获取到div
	var divv = document.getElementById("divv");
	//把副本放到div里面去
	divv.appendChild(ulcopy);

** 操作dom总结
	* 获取节点使用方法
		getElementById()：通过节点的id属性，查找对应节点。
		getElementsByName()：通过节点的name属性，查找对应节点。
		getElementsByTagName()：通过节点名称，查找对应节点
	* 插入节点的方法
		insertBefore方法：在某个节点之前插入
		appendChild方法：在末尾添加，剪切黏贴
	* 删除节点方法
		removeChild方法：通过父节点删除
	* 替换节点方法
		replaceChild方法：通过父节点替换

6、innerHTML属性
* 这个属性不是dom的组成部分，但是大多数浏览器都支持的属性

第一个作用：获取文本内容
	*** //获取span标签
	var span1 = document.getElementById("sid");
	alert(span1.innerHTML);

第二个作用：向标签里面设置内容（可以是html代码）
	*** //向div里面设置内容 <h1>AAAAA</h1>
	//获取到div
	var div11 = document.getElementById("div11");
	//设置内容
	div11.innerHTML = "<h1>AAAAA</h1>";

** 练习 ： 向div里面添加一个表格
	- //向div里面添加一个表格
	//var tab = "<table border='1'><tr><td>aaaaaa</td></tr><tr><td>bbbbbb</td></tr><tr><td>cccccc</td></tr></table>";
	
	var tab = "<table>";
	tab += "</table>";

	//相当于 var tab = "<table></table>";

	div11.innerHTML = tab;

7、案例二：动态显示时间
* 得到当前的时间
var date = new Date(); //得到不是常规的格式
var d1 = date.toLocaleString(); //格式化
* 需要让页面每一秒获取时间
setInterval方法 定时器
* 显示到页面上
每一秒向div里面写一次时间
* 使用innerHTML属性
* 代码
function getD1() {
//当前时间
var date = new Date();
//格式化
var d1 = date.toLocaleString();
//获取div
var div1 = document.getElementById(“times”);
div1.innerHTML = d1;
}

//使用定时器实现每一秒写一次时间
setInterval("getD1();",1000);

8、案例三：全选练习
** 使用复选框上面一个属性判断是否选中
- checked属性
- checked=true：选中
- checked=false：不选中

* 创建一个页面
	** 复选框和按钮
		- 四个复选框表示爱好
		- 还有一个复选框操作 全选和选不选，也有一个事件

	** 三个按钮，分别有事件
		- 全选				
		- 全不选
		- 反选
* 全选操作
	步骤：
	/*
		1、获取要操作的复选框 
			- 使用getElementsByName()
		2、返回是数组，
			- 属性 checked判断复选框是否选中
				*** checked = true; //表示选中
				*** checked = false;//表示不选中
			- 遍历数组，得到的是每一个checkbox
				* 把每一个checkbox属性checked=true					
	*/

* 全不选操作
	步骤
	/*
		1、获取到要操作的复选框
		2、返回的是数组，遍历数组
		3、得到每一个复选框
		4、设置复选框的属性 checked=false
	*/

* 反选操作
	步骤
	/*
		1、获取到要操作的复选框
		2、返回数组，遍历数组
		3、得到每一个复选框

		4、判断当前的复选框是选中还是不选中
			- if(love1.checked == true) {}
		5、如果选中，属性checked设置成false，否则，设置成true
	*/

* 使用复选框实现全选和全不选
	步骤
	/*
		1、得到上面那个复选框
			- 通过id获取到
		2、判断这个复选框是否是选中
			- if条件，checked==true
		3、如果是选中，下面是全选
		4、如果不是选中，下面是全不选
	*/

9、案例四：下拉列表左右选择
* 下拉选择框

111
111

* 创建一个页面
	** 两个下拉选择框
		- 设置属性 multiple属性
	** 四个按钮，有事件

* 选中添加到右边
	步骤
	/*
		1、获取select1里面的option
			- getElementsByTagName()返回是数组
			- 遍历数组，得到每一个option
		2、判断option是否被选中
			- 属性 selected，判断是否被选中
				** selected= true: 选中
				** selected= false：没有选择
		3、如果是选中，把选择的添加到右边去
		4、得到select2
		4、添加选择的部分
			- appendChild方法
	*/

* 全部添加到右边
	步骤
	/*
		1、获取第一个select下面的option对象
		2、返回数组，遍历数组
		3、得到每一个option对象
		4、得到select2
		5、添加到select2下面
			- appendChild方法
	*/

* 选中添加到左边
	步骤
	/*
		1、获取select2里面的option对象
		2、返回是数组，遍历数组
		3、得到每一个option对象
		4、判断option是否被选中
			- if条件 属性 selected == true：选择
		5、获取select1
		6、添加到select1里面
			- 使用appendChild方法
	*/

* 全部添加到左边
	步骤
	/*
		1、获取select2里面的option对象
		2、返回是数组，遍历数组
		3、得到每一个option对象

		4、获取到select1
		5、添加到select1里面
			- 使用appendChild方法
	*/

10、案例五：省市联动
* 创建一个页面，有两个下拉选择框
* 在第一个下拉框里面有一个事件 ：改变事件 onchange事件
- 方法add1(this.value);表示当前改变的option里面的value值
* 创建一个二维数组，存储数据
* 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市
　　　　*
/*
1、遍历二维数组
2、得到也是一个数组（国家对应关系）

	3、拿到数组中的第一个值和传递过来的值做比较
	4、如果相同，获取到第一个值后面的元素
	5、得到city的select
	6、添加过去（使用）appendChild方法
		- 创建option（三步）
*/

/*
	由于每次都要向city里面添加option
	第二次添加，会追加。

	* 每次添加之前，判断一下city里面是否有option，如果有，删除
*/

11、案例六：动态生成表格
*创建一个页面：两个输入框和一个按钮

*代码和步骤
/*
	1、得到输入的行和列的值
	2、生成表格
		** 循环行
		** 在行里面循环单元格
	3、显示到页面上
		- 把表格的代码设置到div里面
		- 使用innerHTML属性
*/
//获取输入的行和列
var h = document.getElementById("h").value;
var l = document.getElementById("l").value;

//把表格代码放到一个变量里面
var tab = "<table border='1' bordercolor='blue'>";
//循环行
for(var i=1;i<=h;i++) {
	tab += "<tr>";
	//循环单元格
	for(var j=1;j<=l;j++) {
		tab += "<td>aaaaaaa</td>"
	}
	tab += "</tr>";
}

tab += "</table>";

//alert(tab);
//得到div标签
var divv = document.getElementById("divv");
//把table的代码设置到div里面去
divv.innerHTML = tab;

}

1、表单提交方式
* 使用submit提交

…

* 使用button提交表单
	- 代码
	//实现提交方法
	function form1() {
		//获取form
		var form1 = document.getElementById("form1");
		//设置action
		form1.action = "hello.html";
		//提交form表单
		form1.submit();
	}

* 使用超链接提交
	- 代码
	<a href="hello.html?username=123456">使用超链接提交</a>

* onclick：鼠标点击事件
  onchange：改变内容（一般和select一起使用）

  onfocus:得到焦点  (ie5、某些版本的ie6)
  onblur:失去焦点