1.8.1 JavaScript基础
(1) JavaScript介绍：
什么是JavaScript？
JavaScript 是一种客户端脚本语言（脚本语言是一种轻量级的编程语言）。
JavaScript 通常被直接嵌入 HTML 页面。
JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
特点：弱类型和基于对象。(因为面向对象需要具有封装、继承、多态的特征)
JavaScript语言中包含三个核心：ECMAScript基本语法、DOM、BOM
在HTML中如何使用JavaScript(三种)
11. 使用标签：
2 属性：
3 charset（可选）字符集设置、
4 defer（可选执行顺序）值：defer、
5 language(已废除)、
6 src（可选）使用外部的js脚本文件
7 type(必选)类型：值：text/javascript
8
9
10
11 javaScript语言
12 //-->
13
14
152. 在html标签的事件中，超级链接里。
16
17 点击
18
193. 外部导入方式（推荐）：
20
(2) JavaScript的语法：
1.区分大小写：变量名、函数名、运算符以及其他一切东西都是区分大小写的。
2.他和Python一样属于弱类型语言。
3.每行结尾的分号可有可无。(js中的每条语句之间的分割符可以是回车换行也可以是";"分号(推荐))
4.脚本注释：// 单行注释 和 /* 多行注释 */
5.括号表示代码块:{ }
6.变量的定义：使用var关键字来声明。
1 变量的命名规范是：字母数字，$符和下划线构成，但是不可以以数字开始。
2 变量名不可以使用关键字.
3
4 typeof函数获取一个变量的类型：
5 * undefined - 如果变量是 Undefined 类型的
6 * boolean - 如果变量是 Boolean 类型的
7 * number - 如果变量是 Number 类型的 (整数、浮点数)
8 * string - 如果变量是 String 类型的 （采用""、 ''）
9 * object - 如果变量是一种引用类型或 Null 类型的
10 如：new Array()/ new String()...
11 * function -- 函数类型
12
7.JavaScript的数据类型：
1 undefined 类型
2 null 类型（对象）
3 boolean 类型
4 number 类型
5 八进制数和十六进制数 012
6 浮点数
7 特殊的 Number 值
8 string 类型
9 var s = "hello";
10 document.write(s+"
");
11 document.write(s[1]+"
"); //使用下标可以取出对应的字符
12 document.write(s.length+"
");//求长度
13
14 object引用类型
15 引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是对象。
16 Object 对象自身用处不大，不过在了解其他类之前，还是应该了解它。
17 因为 ECMAScript 中的 Object 对象与 Java 中的 java.lang.Object 相似，
18 ECMAScript 中的所有对象都由这个对象继承而来，Object 对象中的所有属性
19 和方法都会出现在其他对象中，所以理解了 Object 对象，就可以更好地理解其他对象。
20
8.类型转换：
1 使用：Number（）、parseInt() 和parseFloat（） 做类型转换
2 Number()强转一个数值(包含整数和浮点数)。
3 *parseInt()强转整数，
4 *parseFloat（）强转浮点数
5
6 函数isNaN()检测参数是否不是一个数字。 is not a number
7
8 ECMAScript 中可用的 3 种强制类型转换如下：
9 Boolean(value) - 把给定的值转换成 Boolean 型；
10 Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；
11 String(value) - 把给定的值转换成字符串；
(3） JavaScript的运算符
1.一元运算符
1 delete：用于删除对象中属性的 如：delete o.name; //删除o对象中的name属性
2 void ： void 运算符对任何值返回 undefined。没有返回值的函数真正返回的都是 undefined。
3 ++ -- : 一元加法和一元减法
2.位运算符
1 位运算 NOT ~
2 位运算 AND &
3 位运算 OR |
4 位运算 XOR ^ (不同为1，相同则为0)
5 左移运算 <<
6 右移运算 >>
3.逻辑运算符
1 逻辑 NOT ! 运算符 非
2 逻辑 AND && 运算符 与
3 逻辑 OR || 运算符 或
4.乘性运算符
1*（ 乘） /(除) %（取模）求余
5.加性运算符
1 + -
2 *其中+号具有两重意思：字串连接和数值求和。
3 就是加号”+“两侧都是数值则求和，否则做字串连接
6.关系运算符:
1> >= < <=
7.等性运算符
1== === != !==
8.条件运算符
1 ? : (三元运算符)
9.赋值运算符
1= += -= *= /= %= >>= <<=
10.逗号运算符
1用逗号运算符可以在一条语句中执行多个运算。
2var iNum1=1, iNum2=2, iNum3=3;
(4） javaScript（语句流程控制）
11. 判断语句 if语句； if... else ... if ... else if ... else...
2
32. 多分支语句： switch（）{。 case ：。。。。}
4 switch (i) {
5 case 20: alert("20");
6 break;
7 case 30: alert("30");
8 break;
9 case 40: alert("40");
10 break;
11 default: alert("other");
12 }
133. 循环语句（迭代语句）
14 for：
15
16 while
17
18 do...while
19
20 *for-in 语句: 语句是严格的迭代语句，用于枚举对象的属性。
21 var a = [10,20,30,40,50];
22 //迭代的是数组的下标。
23 for(i in a){
24 document.write(a[i]);
25 }
26 //输出： 1020304050
27
284. break 和 continue 语句对循环中的代码执行提供了更严格的控制。
29
305. with 语句用于设置代码在特定对象中的作用域。
(5） 本节扩充知识：
11. 在网页文档中获取一个节点对象（HTML标签）
2 document.getElementById("mid"); //获取标签id属性值为mid的节点对象
3
42. 定时相关函数：
5 setTimeout(vCode, iMilliSeconds [, sLanguage]) -- 单次定时执行指定函数
6 clearTimeout(iTimeoutID) -- 取消上面的单次定时
7
8 setInterval(vCode, iMilliSeconds [, sLanguage]) --无限次定时执行指定函数
9 clearInterval(iIntervalID)-- 取消上面的多次定时
本节作业：
一、理论作业：
1. 什么是JavaScript？
2. 在HTML中嵌入JavaScript的方法有几种？
3. JavaScript的常用类型都有哪些？
4. 常用的JavaScript的类型转换函数有那两个？
5. 我们使用哪个函数判断是否不是一个整数？
6. JavaScript语言的运算符都有哪些？
二、代码题：
1. 参考课程代码做一个简单的计算器
2. （选做）一个倒计时的按钮（10,9,8,7,...这是是个灰色不可点击的，当为0是会换成同意字样，并可点击。）
3. （选做） 做一个倒计时（时 分 秒）。可选带暂停效果
三、预习作业：
1. JavaScript的函数如何定义和调用。
2. 常用的系统函数都有哪些。
3. 对象的应用与声明。
1.8.2 JavaScript函数和对象
(1) JavaScript的函数
1标准格式： function 函数名（[参数列表..]）{
2 函数体。。。
3 [return 返回值;]
4 }
5
6JavaScript三种定义函数方法：
7 *第一种是使用function语句定义函数
8 如上面格式
9
10 第二种是使用Function()构造函数来定义函数（不常用）
11 var 函数名 = new Function(“参数1”，”参数2”，”参数3”……”函数体”);
12 如：
13 var 函数名 = new Function(”x”,”y”,”var z=x+y;return z;”);
14
15 *第三种是在表达式中定义函数
16 var 函数名 = function(参数1，参数2，…){函数体};
17 //例如：
18 //定义
19 var add = function(a,b){
20 return a+b;
21 }
22 //调用函数
23 document.write(add(50,20));
24
25 arguments 对象
26 在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们。
27 例如，在函数 sayHi() 中，第一个参数是 message。用 arguments[0]
28 也可以访问这个值，即第一个参数的值（第一个参数位于位置 0，
29 第二个参数位于位置 1，依此类推）。
30
31 关于变量和参数问题：
32 函数外面定义的变量是全局变量，函数内可以直接使用。
33 在函数内部没有使用var定义的=变量则为全局变量，
34 *在函数内使用var关键字定义的变量是局部变量，即出了函数外边无法获取。
35 js函数定义的参数没有默认值（目前只有最新的火狐浏览器支持）
(2) 系统中常用的内置函数
1escape() //字串编码
2unescape() //字串反编码
3*eval() //将参数字符串作为脚本代码来执行。
4*isNaN() // is not a number (不是一个数值)
5*parseInt()
6*parseFloat()
(3) JavaScript的对象的定义和使用
11.使用原始的方式创建内置对象
2 var myObject = new Object();
3 myObject.name = “lijie”;
4 myObject.age = 20;
5 myObject.say = function(){...}
6
72.直接创建自定义对象
8 var 对象名 = {属性名1：属性值，属性名2：属性值2，…….}
9
103.使用自定义构造函数创建对象
11 function pen(name,color,price){
12 //对象的name属性
13 this.name = name;
14 //对象的color属性
15 this.color = color;
16 //对象的piece属性
17 this.price = price;
18 //对象的say方法
19 this.say = function(){};
20 }
21
22 var pen = new pen(“铅笔”,”红色”,20);
23 pen.say();
24--------------------------------------------------------------
25测试类型:
261.typeof() //global对象的其中一个方法，typeof()
272.对象.constructor; //查看当前对象的构造函数是谁
28
29if(arr.constructor==Array){
30 alert("数组"); //数组推荐用这种方法，因为typeof得到是object
31}
(4) 常用技巧函数
1HTML的标签（节点）操作:
2document.write(""); //输出的
3document.getElementById("id名")； //获取html页面标签中，标签id属性等于此值的对象。
4 如：var id = document.getElementById("hid"); //获取id值为hid的标签对象
5
6document.getElementsByTagName("标签名"); //获取当前文档执行的标签对象
7
8html标签对象的操作：
9 标签对象.innerHTML="内容"；//在标签对象内放置指定内容
10 标签对象.style.css属性名="值" //改变标签对象的样式。
11 示例：id.style.color="red";
12 注意：属性名相当于变量名,所以css属性名中的减号要去掉，将后面的首字母大写。
13 如：font-size（css）---> fontSize(JS属性)
14 标签对象.value； //获取标签对象的value值
15 标签对象.value=”值“；//设置标签对象的value值
本节作业：
一、理论作业：
1. JavaScript三种定义函数方法?
2. arguments对象的理解？
3. 简述JS中全局变量和局部变量的作用域？
4. 系统中常用的内置函数有哪些？
二、代码题：
1. 作业全选/全不选/反选的实例
2. 做一个文件进度条的特效。
3. 使用自定义构造函数创建对象
4. （选做） 做一个树形菜单的点击效果
三、预习作业：
1. JavaScript中常用内置对象都有哪些？
2. 如何使用Date获取当前时间。
3. 如何创建一个数组对象。
4. 如何使用对象的基本操作for..in。
1.8.3 JavaScript的内置对象
(1) for…in语句
1for(var i in window){
2 document.write(i+”----”+window[i]);
3}
4这种语句可以遍历对象中的所有属性或数组中的所有元素。
(2) with语句
1如果使用with语句，就可以简化对象属性调用的层次。
2 document.write(‘test1’);
3 document.write(‘test2’);
4 document.write(‘test3’);
5可以使用with来简化：
6 with(document){
7 write(‘test1’);
8 write(‘test2’);
9 write(‘test3’);
10 }
(3) JavaScript内置对象
1 * Array（数组）
2 var a= new Array(); //创建一个空数组
3 a = new Array(10); //创建一个数组单元为10个的数组。
4 a = new Array(10,20,30);//创建一个指定数组单元的数组。
5
6 a=['a','b','c','d']; //快捷定义数组
7 常用属性：
8 length--获取长度。
9
10 常用方法：
11 toString() 把数组转换为字符串，并返回结果。
12 sort() 对数组的元素进行排序
13 join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
14 pop() 删除并返回数组的最后一个元素
15 push() 向数组的末尾添加一个或更多元素，并返回新的长度。
16
17 。。。。。
18
19* Boolean 布尔值包装类对象
20 方法：toSource() 返回该对象的源代码。
21 toString() 把逻辑值转换为字符串，并返回结果。
22 valueOf() 返回 Boolean 对象的原始值。
23* Date
24 var dd = new Date();
25
26 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
27 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
28 getMonth() 从 Date 对象返回月份 (0 ~ 11)。
29 getFullYear() 从 Date 对象以四位数字返回年份。
30 getYear() 请使用 getFullYear() 方法代替。
31 getHours() 返回 Date 对象的小时 (0 ~ 23)。
32 getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
33 getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
34 getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
35 getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
36 同上还有很多set方法用来设置。
37
38* Math 对象用于执行数学任务。方法是静态的。
39 abs(x) 返回数的绝对值。
40 ceil(x) 对数进行上舍入。
41 floor(x) 对数进行下舍入。
42 random() 返回 0 ~ 1 之间的随机数。
43 round(x) 把数四舍五入为最接近的整数。
44
45 max(x,y) 返回 x 和 y 中的最高值。
46 min(x,y) 返回 x 和 y 中的最低值。
47
48* Number
49 toString();
50 toFixed 把数字转换为字符串，结果的小数点后有指定位数的数字。
51
52* String 子串处理对象
53 anchor() 创建 HTML 锚。
54 *charAt() 返回在指定位置的字符。
55 charCodeAt()返回在指定的位置的字符的 Unicode 编码。
56 *indexOf() 检索字符串。
57 *lastIndexOf() 从后向前搜索字符串。
58 match() 找到一个或多个正在表达式的匹配。
59 *replace() 替换与正则表达式匹配的子串。
60 search() 检索与正则表达式相匹配的值。
61 slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。
62 split() 把字符串分割为字符串数组。
63 substr() 从起始索引号提取字符串中指定数目的字符。
64 *substring() 提取字符串中两个指定的索引号之间的字符。
65 toLocaleLowerCase() 把字符串转换为小写。
66 toLocaleUpperCase() 把字符串转换为大写。
67 *toLowerCase() 把字符串转换为小写。
68 *toUpperCase() 把字符串转换为大写。
69* RegExp
70 exec()正则匹配
71 test()
72 match()
73* Global
74 escape(string) -- 可对字符串进行编码
75 unescape(string) -- 函数可对通过 escape() 编码的字符串进行解码。
76 encodeURI(URIstring) -- 函数可把字符串作为 URI 进行编码。
77 decodeURI(URIstring) -- 函数可对 encodeURI() 函数编码过的 URI 进行解码。
78 *eval(string) -- 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
79 getClass(javaobj) -- 函数可返回一个 JavaObject 的 JavaClass。
80 *isNaN(x) -- 函数用于检查其参数是否是非数字值。
81 Number(object) --函数把对象的值转换为数字。
82 *parseFloat(string) -- 函数可解析一个字符串，并返回一个浮点数。
83 *parseInt(string, radix)
本节作业：
一、理论作业：
1. JavaScript中常用内置对象都有哪些？
3. 如何创建一个数组对象方式有几种。
二、代码题：
1. 做一个注册的表单验证，
2. 实时问候：如：早上好！
3. 给你一个日期"2013-06-01 12:24:36"的时间戳值。
4. 显示中文的星期几。
5. 做一个随机点名系统（点名多次，也不会重复！）;
三、预习作业：
1. JavaScript中常用事件都有哪些？
1.8.4 JavaScript的事件
(1) 事件处理过程
1一、事件源: 任何一个HTML元素（节点） body, div , button p, a, h1 .......
2二、事件: 你的操作
3 鼠标:
4 * click 单击
5 dblclick 双击
6 contextmenu (在body) 文本菜单（鼠标右键使用）
7 要想屏蔽鼠标右键使用return false
8 window.document.oncontextmenu=function(ent){...}
9
10 * mouseover 放上(移入)
11 * mouseout 离开（移出）
12 mousedown 按下
13 mouseup 抬起
14 * mousemove 移动
15 键盘：
16 keypress 键盘事件
17 keydown 按下
18
19 文档：(主要使用在body标签中)
20 * load 加载
21 unload 关闭(为了兼容可使用下面函数)
22 beforeunload 关闭之前
23
24 表单：
25 * focus 焦点
26 * blur 失去焦点
27 * submit 提交事件
28 * change 改变（如下拉框选择事件）
29 其它：
30 * scroll 滚动事件(常用延迟加载、瀑布流技术)
31 window.onscroll=function(){
32 document.documentElement.scrollTop;//获取滚动条的上距离
33 document.documentElement.scrollLeft;//滚动条的左距离
34 }
35
36 selectd 事件
37
38 。。。。
39
40三、事件处理程序
41 使用一个匿名或回调函数
(2) 三种方法加事件
1第一种：
2 格式：
3*第二种：
4
5 对象.on事件=事件处理程序
6
7第三种：(火狐不兼容)
8 事件处理程序
(3) 事件对象
1属性：
2 1. srcElement
3 2. keyCode 键盘值
4
5事件 event window.event
6
7 1. srcElement 代表事件源对象
8 2. keyCode 事件发生时的键盘码 keypress , keydown keyup
9 3. clientX, clientY 坐标位置
10 4. screenX, screenY
11 5. returnValue
12 6. cancelBubble;
13
14//为页面添加鼠标右点击事件
15window.document.oncontextmenu=function(ent){
16 //兼容IE和火狐浏览器兼容
17 var event=ent || window.event;
18 //获取事件坐标位置
19 var x=event.clientX;
20 var y=event.clientY;
21 ...
22}
23
24document.getElementById("one").offsetHeight; //获取one对应对象的高度
25 obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
26 obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
27 obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
28 obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。
29
30document.all ? 'IE' : 'others'：在IE下document.all值为1，而其他浏览器下的值为0；
本节作业：
作业: 1. 完善注册的表单验证提示，
2. 横向的菜单特效
3. 为图片轮换播放添加按钮
5.（选做）滚动图片替换
6.（选做）键盘事件的处理（通过键盘事件移动图层）
预习：1.JavaScript中的其他事件：（滚动事件，键盘事件。。）
2.常用的BOM都有哪些？
3.HTML中的DOM都有哪些？
1.8.5 JavaScript的BOM
1跳转
21. window对象
3 常用的属性：
4 *document ：对 Document 对象的只读引用
5 *history ：对 History 对象的只读引用。
6 *location：用于窗口或框架的 Location 对象
7 Navigator： 对 Navigator 对象的只读引用
8 *parent： 返回父窗口。
9 length: 设置或返回窗口中的框架数量。
10 Screen: 对 Screen 对象的只读引用
11 status: 设置窗口状态栏的文本。
12 top: 返回最顶层的先辈窗口。
13
14 常用方法：
15 alert() 显示带有一段消息和一个确认按钮的警告框。
16 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
17 prompt() 显示可提示用户输入的对话框。
18
19 close() 关闭浏览器窗口。
20 open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
21 scrollTo() 把内容滚动到指定的坐标。
22
23 setTimeout() 在指定的毫秒数后调用函数或计算表达式。
24 clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
25 setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
26 clearInterval() 取消由 setInterval() 设置的 timeout。
27
282. Navigator 对象
29 Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。
30 常用属性：
31 with(document) {
32 write ("你的浏览器信息：
- ");
33 write ("
34 write ("
35 write ("
36 write ("
37 write ("
38 write ("
39 write ("");
40 }
41
42
433. Screen 对象包含有关客户端显示屏幕的信息。
44
45 常用属性：
46 document.write( "屏幕宽度："+screen.width+"px
" );
47 document.write( "屏幕高度："+screen.height+"px
" );
48 document.write( "屏幕可用宽度："+screen.availWidth+"px
" );
49 document.write( "屏幕可用高度："+screen.availHeight+"px" );
50
51 参考了解其他属性信息获取方式
52 网页可见区域宽： document.body.clientWidth
53 网页可见区域高： document.body.clientHeight
54 网页可见区域宽： document.body.offsetWidth (包括边线的宽)
55 网页可见区域高： document.body.offsetHeight (包括边线的高)
56 网页正文全文宽： document.body.scrollWidth
57 网页正文全文高： document.body.scrollHeight
58 网页被卷去的高： document.body.scrollTop
59 网页被卷去的左： document.body.scrollLeft
60 网页正文部分上： window.screenTop
61 网页正文部分左： window.screenLeft
62 屏幕分辨率的高： window.screen.height
63 屏幕分辨率的宽： window.screen.width
64 屏幕可用工作区高度： window.screen.availHeight
65 屏幕可用工作区宽度： window.screen.availWidth
66
674. History 对象包含用户（在浏览器窗口中）访问过的 URL。
68
69
705. Location 对象包含有关当前 URL 的信息。
71
72
73//获取页面中第二form表单中，一个username输入框的值（7种方式）
74 //alert(document.forms[1].username.value);
75 alert(document.myform.username.value);
76 //alert(document.forms.myform.username.value);
77 //alert(document.forms.item(1).username.value);
78 //alert(document.forms['myform'].username.value);
79 //alert(document['myform'].username.value);
80 //alert(document.forms.item('myform').username.value); //火狐不兼容
1.8.6 讲解HTML DOM
(1) 基本概念
1HTML DOM 定义了访问和操作HTML文档的标准方法。
2HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。
3DOM 被分为不同的部分：
4 1.Core DOM
5 定义了一套标准的针对任何结构化文档的对象
6 2.XML DOM
7 定义了一套标准的针对 XML 文档的对象
8 3.HTML DOM
9 定义了一套标准的针对 HTML 文档的对象。
10
11节点：根据 DOM，HTML 文档中的每个成分都是一个节点。
12 DOM 是这样规定的：
13 >整个文档是一个文档节点
14 >每个 HTML 标签是一个元素节点
15 >包含在 HTML 元素中的文本是文本节点
16 >每一个 HTML 属性是一个属性节点
17 >注释属于注释节点
18
19节点彼此间都存在关系。
20 >除文档节点之外的每个节点都有父节点。
21 >大部分元素节点都有子节点。
22 >当节点分享同一个父节点时，它们就是同辈（同级节点）。
23 >节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点
24 >节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点
25
26查找并访问节点
27 你可通过若干种方法来查找您希望操作的元素：
28 >通过使用 getElementById() 和 getElementsByTagName() 方法
29 >通过使用一个元素节点的 parentNode、firstChild 以及 lastChild childNodes属性
30 > nextSibling返回节点之后紧跟的同级节点。/ previousSibling返回节点之前紧跟的同级节点。
31
32节点信息
33 每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
34 nodeName（节点名称）
35 nodeValue（节点值）
36 nodeType（节点类型）
37
38nodeName 属性含有某个节点的名称。
39 元素节点的 nodeName 是标签名称
40 属性节点的 nodeName 是属性名称
41 文本节点的 nodeName 永远是 #text
42 文档节点的 nodeName 永远是 #document
(2) HTML DOM 对象参考
1Document: 代表整个 HTML 文档，可被用来访问页面中的所有元素
2 常用集合属性：forms
3Anchor : 代表 元素
4Area : 代表图像映射中的 元素
5Base : 代表 元素
6Body : 代表 元素
7Button : 代表 元素
8Event : 代表某个事件的状态
9Form : 代表 元素
10Frame : 代表 元素
11Frameset: 代表 元素
12Iframe : 代表 元素
14Input button : 代表 HTML 表单中的一个按钮
15Input checkbox : 代表 HTML 表单中的复选框
16Input file : 代表 HTML 表单中的文件上传
17Input hidden : 代表 HTML 表单中的隐藏域
18Input password : 代表 HTML 表单中的密码域
19Input radio : 代表 HTML 表单中的单选按钮
20Input reset : 代表 HTML 表单中的重置按钮
21Input submit : 代表 HTML 表单中的确认按钮
22Input text : 代表 HTML 表单中的文本输入域（文本框）
23Link : 代表 元素
24Meta : 代表 元素
25Object : 代表 元素
26Option : 代表 元素
27Select : 代表 HTML 表单中的选择列表
28Style : 代表单独的样式声明
29Table : 代表 元素
30TableData : 代表 元素
31TableRow : 代表 元素
32Textarea : 代表 元素
1.8.7 继续讲解DOM(重点讲XML DOM)
(1) HTML的DOM
1Object : 代表 元素
2Option : 代表 元素
3Select : 代表 HTML 表单中的选择列表
4Style : 代表单独的样式声明
5Table : 代表 元素
6TableData : 代表 元素
7TableRow : 代表 元素
8Textarea : 代表 元素
(2) XML的DOM
1DOM （Document Object Model） 文档对象模型
21. document 文档 HTML XML 文件 （标记语言)
3
4
5
6 wwww
7
8
9 节点：
10 将文档想成一个倒树， 每一个部分（根、元素、文本（内容）， 属性， 注释）都是一节点。
11 根据 DOM，HTML 文档中的每个成分都是一个节点。
12
13 DOM 是这样规定的：
14 1. 整个文档是一个文档节点(根节点)
15 2. 每个 HTML 标签是一个元素节点
16 3. 包含在 HTML 元素中的文本是文本节点
17 4. 每一个 HTML 属性是一个属性节点
18 5. 注释属于注释节点
19
202. 父、子和同级节点
21 节点树中的节点彼此之间都有等级关系。
22
23 父、子和同级节点用于描述这种关系。父节点拥有子节点，位于相同层级上的子节点称为同级节点（兄弟或姐妹）。
24 1. 在节点树中，顶端的节点成为根节点
25 2. 根节点之外的每个节点都有一个父节点
26 3. 节点可以有任何数量的子节点
27 4. 叶子是没有子节点的节点
28 5. 同级节点是拥有相同父节点的节点
29
30 只要知道一个节点， 按关系找到其它节点
31 父节点： parentNode
32 子节点（第一个， 最后一个） childNodes firstChild lastChild
33 同胞（同辈）节点 （上一个， 下一个）nextSibling previousSibling
34
353。 获取节点的方式：
36 array getElementsByTagName("节点名"); //获取所对应节点名（所有），返回的是数组
37 object getElementById("id名"); //获取id名的唯一节点对象
38
39 示例：(找节点)
40 document.getElementsByTagName("li"); //所有所有li节点
41 document.getElementById("lid"); //获取id值为lid的唯一节点
42 document.getElementById("uid").getElementsByTagName("li");
43 //获取id值为uid中所有li子节点
44 document.getElementsByTagName("ul")[0].getElementsByTagName("li");
45 //获取第一个ul节点中所有li子节点
46
47 获取到的标记名(多个)、 id（唯一）、 name（多个）
48
494. 每个节点中的内容
50 节点类型nodeType、节点名nodeName，节点值nodeValue
51
52 节点名nodeName：
53 nodeName 是只读的
54 元素节点的 nodeName 与标签名相同
55 属性节点的 nodeName 是属性的名称
56 文本节点的 nodeName 永远是 #text
57 文档节点的 nodeName 永远是 #document
58
59 节点值nodeValue
60 元素节点的 nodeValue 是 undefined
61 文本节点的 nodeValue 是文本自身
62 属性节点的 nodeValue 是属性的值
63
64 nodeType（节点类型）
65 元素类型 节点类型
66 元素 1
67 属性 2
68 文本 3
69 注释 8
70 文档 9
71
72
73 4. Object 对象 （HTML元素 转成的对象(js对象)）
74注意： 如果使用js操作HTML文档， 就需要选将HTML文档结构转成Js对象
75 a. 操作属性:
76 nodeName（节点名称）
77 nodeValue（节点值）
78 nodeType（节点类型）
79 其他属性：（针对于节点）
80 childNodes 返回节点到子节点的节点列表。
81 firstChild 返回节点的首个子节点。
82 lastChild 返回节点的最后一个子节点。
83 nextSibling 返回节点之后紧跟的同级节点。
84 previousSibling 属性可返回某节点之前紧跟的节点（处于同一树层级）
85 parentNode 返回节点的父节点。
86 textContent设置或返回节点及其后代的文本内容。
87
88 b. 操作内容
89 innerText(IE) textContent(FF) //获取的是显示的内容，不包含HTML标签
90 innerHTML //获取的是显示的内容，会包含HTML
91 outerText
92 outerHTML
93 表单
94 value
95 c. 操作样式
96 aobj.style.backgroundColor="red";
97 aobj.style.fontSize="3cm";
98 className
99 aobj.className="test";
100 aobj.className+=" demo";
101 aobj.className="";
102 e. 操作节点：
103 appendChild() 向节点的子节点列表的结尾添加新的子节点。
104 cloneNode() 复制节点。
105 removeChild() 删除（并返回）当前节点的指定子节点。
106 replaceChild() 用新节点替换一个子节点。
107 hasAttributes() 判断当前节点是否拥有属性。
108 hasChildNodes() 判断当前节点是否拥有子节点。
109 insertBefore() 在指定的子节点前插入新的子节点。
110
111 f. 创建节点：
112 * createElement() 创建元素节点
113 createAttribute() 来创建属性节点 可以：元素节点.属性名=值；
114 createTextNode() 来创建新的文本节点 可以：元素节点.innerHTML=文本内容；
115
116 有了以上三点的操作之前先转成对象
117 转成对象的两种形式：
118 1. 标记名(多个)、 id（唯一）、 name（多个）
119 document中的三个方法
120 var objs=document.getElementsByTagName("div"); //获取多个
121 var objs=document.getElementById("one"); //获取一个
122 var objs=document.getElementsByName("two");
123
1.8.8 Ajax
(1) JavaScript版的Ajax实现步骤
1var xmlhttp;
2
3 1. 创建请求对象
4 if(window.XMLHttpRequest){
5 // code for IE7+, Firefox, Chrome, Opera, Safari
6 xmlhttp=new XMLHttpRequest();
7 }else{
8 // code for IE6, IE5
9 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
10 }
11
12 2. 设置回调函数（监听）
13 xmlhttp.onreadystatechange=函数名；
14 或
15 xmlhttp.onreadystatechange=function(){
16 函数体。。。
17 }
18
19 3. 初始化：
20 xmlhttp.open("GET","gethint.php?q="+str,true); //异步以get方式发送到gethint.php
21
22 4. 发送：
23 xmlhttp.send();
(2) xmlhttp请求对象
1属性：
2 *readyState //请求状态：0,1,2,3,4
3 *responseText//响应内容
4 responseXML //xml响应对象
5 *status //浏览器响应状态：200正常， 404 请求地址不存在 ,,
6 statusText //状态内容
7 *onreadystatechange //回调函数属性
8
9方法：
10 abort() //取消当前响应，关闭连接并且结束任何未决的网络活动。
11 getAllResponseHeaders() //把 HTTP 响应头部作为未解析的字符串返回。
12 getResponseHeader() //返回指定的 HTTP 响应头部的值
13 *open() //初始化 HTTP 请求参数
14 *send() //发送 HTTP 请求，使用传递给 open() 方法的参数
15 *setRequestHeader() //向一个打开但未发送的请求设置或添加一个 HTTP 请求。
16
17模拟POST提交代码：
18 xmlhttp.open("POST","ajax_test.php",true);
19 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
20 xmlhttp.send("fname=Bill&lname=Gates");
网友评论