2310-30三层架构四网页和js htmljs

1、目录HTML+CSS21.HTML2浏览器3颜色体系41.24 超45表格5表单及元素6下拉列表 select71.8 头部72.CSS8三种写法8选择器82.3 计量10常用属性10div+css 布局11扩展 1： 基本页面布局分析15扩展 2：浏览器和服务器请求处理相应16Javascript181.概述18开发环境：19三大部分组成部分19代码书写位置192.语法20变量、数据类型、类型转换20for 循环.2.3.switch21方法22字符串.2.6.数组232.7.扩展方法*25BOM 编程253.3.1.alert253.2.new date

2、()263.3.clipboardData26seterval(计时器)：263.4.计时器)：273.5.settimeOut(history 对象27location 对象27navigator 对象28screen 对象29event 对象2..3.10.DOM 编程31Dom 树概念31获取 dom 元素31innerText 和 innerHTML324.4.事件32元素的新增 修改 删除33节点关系37节点属性374.8.练习384.HTML+CSSHTML，要手写，不要使用设计器拖，掌握手写一般难度的 web 网页的能力，学习 html 就是学习 w

3、3c 组织已经规定好的各种用法，记住，并且灵活使用1.HTML本质上就是一段描述网页张什么样子的文本(string)，可以直接查看源代码，基础 html 页面代码，包含 html，head，bodyhead除了 title，其他的都不直接展示给用户看，body的内容就是展示在浏览器界面上的内容html，xhtml，xml 的关系(大小写敏感，属性双引号，必须结束)1.1HTML 运行原理1.当用户在浏览器输入地址按确定之后浏览器就找到对应的服务器(本质上也是一台电脑，只是配置好点)，服务器根据用户输入的返回给浏览器，找到相应的网页文件(html 文件)然后，浏览器接收到返回的 html 内容(

4、就是一堆的字符串)，然后根据 html 语法来普通人能看懂的界面并且展现成2.本地的 html 文件直接用浏览器打开，浏览器就直接了这个文件的内容(字符串)，然后，展示1.2HTML 编辑html 文件是以“.html”或”.htm”结尾的文件，任何能够编辑 txt 文本文件的工具都可以编辑 html 页面文件，文件内容包含部分和正文部分部分：正文部分：部分是告诉浏览器怎么来内容这个文件内容，不会展现给用户看，正文部分是要展现给用户看的1.3 浏览器在用户确认地址之后接受服务器返回的 html 页面文件，并且显示成普通人眼可以看的界面的工具包括:IE FF CHORME 等住：本质，服务器发送

5、回来的就是 html 文件的文本各种不同浏览器“翻译”html 代码的时候有不同的情况，这就是浏览器兼容性主要要测试的浏览器：IE6.0+,FF,CHORME1.4 颜色体系单词：red blue black 等16 进制：#FF000 #00FF00 #0000FF #1.2.#000000 等井号后面加上三个进制的数字组成rgb：rgb(219, 98, 248) rgba(89, 60, 150, 0.69) 几个数字，前三位是红黄蓝数值，后面一位是3.4.rgb 值：rgb(209, 133, 228)rgba(209, 133, 228, 0.8)两个注意一个有一个 a 一个没有，括

6、号里面前面的数值用逗号隔开，前面三个数值取值从 0-255，rgba 里面第四个值表示颜色的，取值从 0.00-1.00 的小数，rgb 其实也有第四位取值，就是 11.5html 中和 xml 的注释是一样的用“”要想在页面上显示特殊的字符，就需要把特殊字符转义，就和 C#中的一样各种转义：大于 小于 空格 等换行 和段落center 居中，- 标题自动格式 , 加粗 ，加粗 , 下划线 , 字体因为按照网页设计理念，html 只页面有什么内容，格式交给 css 控制，两者分开，使用各司其职，因此，以上格式div，span不1.6 超路径问题a：当前页面相同目录的 a.html 文件a：当前

7、页面相同目录的 a.html 文件a：当前页面上一级目录的 a.html 文件a：当前页面上两级目录的 a.html 文件a：当前根目录的 a.html 文件a：当前页面目录下的 news 文件夹下的的 a.html 文件a：当前页面目录下的 news 文件夹下的的 a.html 文件a：当前页面目录上一级目录下的 news 文件夹下的的 a.html 文件a：当前页面目录上两级目录下的 news 文件夹下的的 a.html文件a：当前根目录下的 news 文件夹下的 a.html 文件1.7src：路径heigth：高度 width：宽度divspanullioltabletrtdththe

8、adtbodytfoot1.8 表格虽然可以直接在 table 下写 tr 但是在 js 操作的时候会出问题， 不要偷懒A1A2A3A4A5B1B2B3B5C1C2C3C4C5D1D2D5E1E4E5F1F2F3tF5theadtheadtheadtbodytbodytbodytfoottfoottfoot在这里，但是不写内容非常多的页面内容去 top练习：1.9 表单及元素提交之后会有x和y轴的点击坐标文本框文件选择框框复选框：checked属性表示是否默认被选中单选框：每一组单选选项必须具有相同的name属性隐藏域大文本框样子的提交按钮：src是显示的，普通按钮:大都配合js使用重置按钮：

9、重置当前表单上的各个元素的原始值提交按钮：提交当前表单公共属性：disabled=disabled 控制这个表单元素是否能用，不能用的显示成灰色文本输入框有 readonly=readonly 控制是否是只能看(只读)，不可修改的这两个属性在 html 规范中可以忽略等号和后面的内容，但这样不符合 xml 规范，所以建议最好加上1.10 下拉列表 selectsize 属性控制一次显示的项目个数，分组也算，multiple 控制是否可以多选lable：为其他表单元素提供快速焦点的男账号fieldset常用正文1.11 头部设置当前页面所使用的编码格式，(浏览器解释发回来的 html 字符串用什

10、么编码)3秒后刷新本页(登陆，登出，发帖，回复成功，3秒之后转到*) 3秒后转向另外的页面告诉浏览器，本页不缓存页面selectitem1-1selectitem1-2selectitem1-3selectitem1-4selectitem2-1selectitem2-2selectitem2-3selectitem2-4select下拉菜单2.CSS2.1 三种写法1.直接在内的 style 属性里写样式：aaaaa2.在 head里面写 style，然后在 style里面写样式 div color:blue; 3.在外部的一个.css 文件中写上样式，然后在需要使用样式的页面上添加.css

11、 文件中写：div color:blue; 在页面上添加：如果一个元素用了这三种写法定义了 同一个属性，比如上面的代码就为 div 定义了边框，那么优先使用第一种，然后是第二种，一次类推尽量不要使用第式写样式，如果以后要修改的话可能需要改很多很多地方2.2 选择器一、三大基础选择器，说明这个样式应用于哪些元素1.tag 选择器(选择器)：“div color:blue; ”直接写上 html的名字，表示标签名为 div 的 html 元素采用这个样式aaaaa2.ID 选择器：“#aa color:red; ”一个#号加上 html性为 aa 的 html 元素采用这个样式bbbbb的 ID

12、属性值，表示所有 id 属3.class 选择器(类选择器)：“.show color: orange; ”一个点加上自定义的选择器名字，命名要有意义，表示所有 class 属性为 show 的 html 元素采用这个样式ccccchtml可以同时具有多个 class 样式：ccccc，直接写上两个类选择器，中间用空格隔开，如果两个样式中定义个同一个样式，不同的属性，那么按照样式的顺序来，后的起作用div color: blue; #aa color: red; .show color: orange; .error color:black; font-size:50px;aaaaabbbbb

13、ccccc二、 扩展选择器(扩展，知道即可)1. tag+class 选择器：让相同的 class 名对于不同的 html 元素具有不同的效果div.error color:#f00span.error color:#ff6a00diverrorspanerror2.关联选择器：用于满足第一个选择器的 html 元素下满足第二个选择器的 html 元素任何两种选择器都可以关联使用3. 组合选择器：一般用于多种样式的公共部分.error, .errorbig, .errorsmall color: #ffd800; .error font-size: 15px; div, span, input

14、 color:red divdivspanspantag选择器和tag选择器div input color: #ff0000; span input color: #0094ff; id选择器和tag选择器#diva input color: #ff0000; class选择器和tag选择器.show input color: #ff0000; cccccddddd4. 伪类选择器：通常用于给超用注：当点击过后，active 颜色失效2.3 计量1.2.3.px 像素% 百分比em 相对最常用的是 px，偶尔会用到 %， em 基本用不到2.4 常用属性background-color: re

15、d; border-width: 1px; border-style: solid; border-color: #ff0000;border:1px solid #ff0000; border: none;display: none; display: block; visibility: hidden;visibility: visible;cursor: poer; cursor: text;list-style-type: none; color: #000;font-size: 30px;font-family: YaHei;a font-size: 30px; color: bla

16、ck; text-decoration: none; a:link color: #b200ff; /*表示没有被点击过*/a:hover color: red; text-decoration: underline; /*表示鼠标指到这里*/a:active color: #0026ff; /*表示鼠标按下，还没有放开*/广州播客a:visited color: #; /*表示已近点过的*/.errorbig font-size: 25px; .errormorbig font-size: 35px; aaaaaafont-weight: bold;text-decoration: unde

17、rline;text-decoration: line-through;text-decoration: overline;text-decoration: wavy;等等等等等等等等等等等等等等等等等等等2.5div+css 布局如 span 默认排列在一行里面，所以叫行级元素如 div 默认占据着整块内容，所以叫块级元素行级元素没有 width height max-width max-height min-width min-height 等属性就算用 css 设置了也无效，如果想改变这些属性，应该用在它的属于块级元素的父元素* font: 12px/1.5 Tahoma, Helvet

18、ica, Arial, sans-serif;body margin: 0; padding: 0; .base text-align: center; font-size:30px; background-color:#808080; height:98px;border:1px solid #000;#diva, #divb, #divc, #divd, #dive text-align: center; width: 100px; height: 100px;color: #000; font-size: 50px;#diva background-color:red; float: l

19、eft; #divb background-color: yellow; float: left; #divc background-color: blue; #divd background-color: green; float: left; #dive background-color: purple; float: left; otherAABBCCDDEEoha 689ohb 689divInfo.innerHTML = oha.offsetWidth + x + oha.offsetHeight;新式浏览器：老式浏览器：太多太怪异的浮动可能很难做到浏览器兼容，所以但实际开发效果差不

20、多)要换一种写法(无法做到 100%相同，新式浏览器：* font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif; body margin: 0; padding: 0; .base text-align: center; font-size: 30px; background-color: #808080; height: 100px; #diva, #divb, #divc, #divd, #dive text-align: center; width: 100px; height: 100px; color: #000; font-size

21、: 50px; #diva background-color: red; float: left; #divb background-color: yellow; float: left; #divc background-color: blue; #divd background-color: green; float: left; #dive background-color: purple; float: left; otherAABBCCDDEEoha 689ohb 689divInfo.innerHTML = oha.offsetWidth + x + oha.offsetHeigh

22、t;老式浏览器：2.6 扩展 1： 基本页面布局分析详见“页面分析”文件夹2.7 扩展 2：浏览器和服务器请求处理相应http 协议：1.浏览器想服务器发送一个请求报文请求报文包括，请求的，请求的 ip，和本机的操作系统，浏览器版本，参数，支持的压缩算法等，get2.服务器按照请求报文返回一个响应报文HTTP/1.1 200 OKCache-Control: privateContent-Type: text/html; charset=utf-8 Server:-IIS/8.0X-AspNetMvc-Ver: 3.0X-AspNet-Ver: 4.0.30319GET /photos.htm

23、l HTTP/1.1Accept: text/html, application/xhtml+xml, */*Accept-Language: en-US,en;q=0.5,zh-Hans;q=0.3User-Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0) Accept-Encoding: gzip, deflateHost: DNT: 1Connection: Keep-Alive相应报文包括：请求处理的状态码，当前相应数据的编码方式(如果是文本才有)，服务器配置信息，当前页面数据更新的时间，本次

24、相应数据的长度，换一行之后就是相应数据的正文(如果是 html css js 等就是文本，如果是就是二进制数据)X-ered-By: ASP.NETDate:, 18 Feb 2013 03:44:55 GMTContent-Length: 13520。Javascript为什么要学 jsjs 是什么，有什么特点能做什么js 组成部分 页面引入方式基础语法异常处理 自定义错误代码调试 扩展函数 各大对象 Bomwindows 对象对象 navigator 对象 screen 对象 history 对象location 对象对象Dom-dom 树概念图获取节点增，改，删节点练节点关系表达节点关系

25、表达 2练习 2innerText 和 innerHTML练习 3练习 4练习 5练习 6练习 71. 概述因为 html 本生只能描述页面有些什么内容，不具备任何的动态计算和判断的能力，而且如果所有判断都要服务器做的话这样用户体验会非常差，服务器压力也很大，所以就产生了 javascript 语言客户端语言，在浏览器上直接运行，占用 的是用户电脑的 Cpujavascript 和 java 没有关系，以前名字叫 livescript，因为吸收了一些 java 的特性，所以改了个名字沾光js 的跨性，因为 js 是运行在浏览器里的，现在所有系统都有浏览器可以支持javascript 属于解释型

26、语言(也被成为语言)，而 c#属于编译型语言，解释型语言在执行的时候由系统的一个解释器来解释一条执行一条，一条条的翻译成机器可以识别的指令然后执行，常见的解释型语言有：批处理 bat，sql 语句等1.1.开发环境：VS 即可 由于 js 是一门非常灵活的动态语言，所以有时候不能点出来的，方法，属性也是可以使用的，能点出来的也有报错的几率，vs2012 的智能提示很好，要太过于依赖智能提示使用，但不调试工具，每种浏览器按 F12，就会弹出开发火狐需要安装 firebug工具，具体用法，在遇到错误后说，1.2.三大部分组成部分1.ECMAScript：基础语法有标准，所有浏览器支持都一样2.BO

27、M：浏览器对象模型没有的标准，新式浏览器支持差不多，老式的差很多，主要有：打开新窗口，关闭窗口，操作地址栏，历史3.DOM：文档对象模型，获取屏幕分辨率等有标准，基本上浏览器都支持，但又细微差别注：DOM 实际上是包含在 BOM 下的，但因为它太重要了，所以这里也列出1.3.代码书写位置1.在页面任意位置写 script里，然后在这个里面写 js 代码，但是一般写在头部同一个页面中可以包含多个 script代码段，如果其中一个代码段里面代码有错误，那这个代码段就中断执行，但不影响其他代码段执行2.ss 一样也可以写在外部的一个.js 文件中，alert(abc);在页面文件上写上： 即可，但不

28、要写成，这样的话浏览器不认识3.在 a的 href 属性里：如点击4.在的 onclick 等事件里写：如：点击实际开发中使用 1,2 两种注：在使用第二种当时的时候，在 script 开始里加上 defer=defer属性可以吧这个文件里的所有 js 代码延defer=defer页面 html 代码加载完毕之后再执行， 如： script src=js.js在 ie3 以前的浏览器，会直接吧 js 代码显示在界面上，所以吧里面所有内容用“”括2. 语法大小写敏感，严格区分大小写，.是弱类型语言，一个变量用“var”，不像 C#那么严谨，因为是“动态类型”，可以随时改变变量成另外

29、一种类型的值注释方法和 c#，Java 都一样，单行用/，多行用/*/第一个 js 程序PS:由此可见，js 语法和 c#语法有很大的相似程度，所以不要写着写着就“串线”了2.1.变量、数据类型、类型转换1.js 是弱类型语言，在一个变量的时候直接使用 var 关键字就可以了。这个变量可以指向任何类型的数据，也可以再任何时候更改指向其他类型var a = 1;alert(a);/弹出1a = a;alert(a);/弹出aa = true;alert(a);/弹出truealert(o World !);var da = new Date();alert(da.toDateString();在

30、 js 中如果要输出特殊符号，也需要用到转译符，和 c#中一样，转译符是“/”2.虽然编写代码的时候不需要数据的类型，但是解释器内部还是会做类型的转换，在某些操作的时候，程序员也需要做类型转换的3.在很多情况下会遇到需要将 “1”+“2” = 3 这样的需求，这个时候就需要做数据类型转换了，吧前面两个字符串转换成数字parseIn(valu)：讲传进来的参数转换成等效的数字parseFloat(valu):转换成小数以上两种方式转换是吧字符串里的字符一个一个的转换，知道转换所有的字符，如果中间遇到不能转换的就停止，再后面的都不会继续了，不要想当然的会跳过之后继续转换，如果知道所有字符没有一个是

31、能转换的，那么就返回一个NaN2.2.for 循环和 C#中用法一样2.3.switchvar tmp = a;switch (tmp) case a:break;case b:break;.write(B);.write(A);for (var i = 0; i 10; i+) alert(aa);String字符串类型Date时间类型Array数组，字典，集合，强大Object对错吧Number 数值 undefinde“找不到” null空function 方法类型NaN不是数字，not a numberinfiniti无穷大数字任何数除以零即可2.4.方法定义和使用方法和 C#中的一样

32、，都是为了达到代码复用的功能，住：在浏览器遇到 script的时候，会优先运行这个里的式语言，就是 function，这样，不管方法是在调用之前还是之后，后可以被调用到2.5.字符串字符串的引号括起来就可以了：var a = aaa;length 属性：得到这个字符串的长度：alert(a.length)split 方法：根据指定的分隔符，把一个字符串分割成多个字符串1.2.substr 和 substring 方法：两个都是截取一定长度的字符串3.substr 是从下标为第一个参数的地方截取第二个参数长度的内容Substring 是从第一个下标一直截取到第二个下标的内容Trim 方法：去除字

33、符串两头的空格Indexof 方法：找出这个字符串里，指定字符或字符串第一次出现的位置.var a = aa|bb|cc|dd;alert(a.substr(1, 3);/弹出“a|b” alert(a.substring(2, 5);/弹出“|bb”var a = aa|bb|cc|dd;a.split(|);/有名字的方法，叫做命名方法，名字就Testfunction test() alert(这里是Test方法); /没有名字的方法叫做方法,方法可以定义一个变量来接收他，var test2 = function () alert(这个方法是谁呢？) ; test();/调用

34、test这个命名方法test2();/调用test2这个方法case c:.write(C);break;case d:.write(D);default:8.LastIndexOf 方法：找出这个字符串里，指定字符或字符串最后出现的位置9.CharAt 方法：找出参数所指定的下表位置的字符2.6.数组超级强大的装载数据的综合体第一种：普通数组alert(arr);/a,b,c,dfor (var i = 0; i arr.length; i+) alert(arri);for (var item in arr) alert(item);/0 1 2 3for (var item in win

35、dow) function() = aaa;this.age = 20;this. = ;this.sayHi = function () alert(啊哈); ;var p = new();for (var item in p) /alert(typeof (pitem).toLowerCase();switch (typeof (pitem) .wrin(item + );var arr = new Array();arr0 = a;arr1 = b;arr2 = c;arr3 = d;var arr = new Array(1,2,3,4,a,true);var arr = 1, 2,

36、3, 4, a, true;var a = aa|bb|cc|dd;alert(a.indexOf(c);/弹出“6”alert(a.lastIndexOf(c);/弹出“7”用法二：键值对集合: 键值对集合其实就是一个对象，里面每个键就是一个字段。如果是键值对的话，这个 array 的 length 永远都是 0；所以不能用 for 循环，只能用 forin 循环/键值对集合其实就是一个对象，里面每个键就是一个字段。var arr = name: bbb, age: 20, gender: true ;alert();alert(arr.age);alert(arr.gender);aler

37、t();var arr = name: aaa, age: 10, gender: true , name: bbb, age: 20, gender: false , name: ccc, age: 30, gender: false , name: ddd, age: 40, gender: true ; alert(arr);var arr = new Array();arrname = aaa;arrage = 20;arrgender = true;arr0 = bb;/这样就加了一个不是键值对的数据，长度在这里才变成1/for (var i = 0; i arr.length; i

38、+) /alert(arri);/for (var item in arr) alert(arritem); /这里每个item只是key，和C#中的foreach很像alert();alert(arr.age);alert(arr.gender);alert();/alert(arr.a);/这个是不行滴case string: alert(pitem); break;case number: alert(pitem); break;case function: pitem(); break;default: alert(pitem);2.7.扩展方法*为当前系统定义的类型加上本来不存在的方

39、法给自定义类添加扩展方法3. BOM 编程BOM 全名 Bowser Object m，浏览器模型对象，顾名思义就是操作浏览器的(整个浏览器窗口，除去页面展示区外的)，bom 变成就是学习浏览器已经定义好的一些值属于 window 对象的很多方法3.1.alert函数是弹出一个消息提示，它会阻断页面所有代码的继续执行，直到用户点了确定/定义一个空的对象类function() ;/为这个空的类添加一个sayHi方法alert(你好啊);/创建对象var p1 = new();/后面就可以直接调用这个添加的方法了p1.sayHi();.prototype.sayHi = function () S

40、totype.is = function () return this.indexOf() 0;var str = ;if (str.is() alert(yes);else alert(no);3.2.new date()创建一个时间对象默认是当前时间3.3.clipboardData(剪切板，不兼容火狐，op)：setData(“Text”,val),设置剪贴板的值getData(“Text”)剪贴板的值，返回剪贴板的内容clearData(“Text”)清空剪贴板关于各种浏览器的兼容写法直接上网一搜就 OK 了，大把的代码a)b)c)d)seterval(计时器)：3.4.varerid

41、 = seterval(function() ,1000);/设置一个计时器 clearerval(erid);/清楚一个计时器a)b)varenum = seterval(function () , 1000);clearerval(enum);var val = clipboardData.getData(text); clipboardData.setData(text, 这里是的); alert(clipboardData.getData(text);alert(new Date().toLocaleDateString();alert(aaa);aaaaalert(bbb);bbbb

42、b计时器)：3.5.settimeOut(var timeid = setTimeout(function() ,1000);/设置一个计时器 clearTimeout(timeid);/清楚一个计时器a)b)history 对象3.6.浏览器历史back(),/返回一页go(-1);/返回一页或者多页go(1);/前进一页或多页forward();/前进一页location 对象3.7.a)alert(location);/直接取值可以取到完整的地址location = ht;/直接赋值可以转向b)c)d)e)f)hash属性：获取当前地址栏后面#后面的值，包括#host属性：取得当前地址栏

43、里的主机地址，带端口，不带协议，不带请求文件名 hostname属性：取得当前地址栏里的主机地址，不带端口不带协议不带请求文件名 href属性：取得当前地址栏里的全地址，所有的都带pathname属性：请求文件名btn1.onclick = function () history.go(-1); ;btn2.onclick = function () history.go(-2); ;btn3.onclick = function () history.back(); ;btn4.onclick = function () history.forward(); ;clearTimeout(ti

44、m);var tim = setTimeout(function () , 1000);g)h)i)j)port属性：当前地址栏的端 protocol：当前地址的协议search：当前地址栏?后面的数据，包括?reload方法：重新加载当前页面，就是刷新navigator 对象3.8.appCodeName：与浏览器相关的内部代码名 appName：浏览器的正式名称appVer：浏览器的版本号Enabled：返回用户浏览器是否启用了 language：浏览器支持的语言userAgent ： 包 含 以 下 属 性 中 所 有 或 一 部 分 的 字 符 串 ： appCodeName,1.2.

45、.appName,appVer,language,platformuserLanguage：用户在自己的操作系统上设置的语言7.if (verStr.indexOf(MSIE 3.0) != -1 | verStr.indexOf(MSIE 4.0) != -1 | verStr.indexOf(MSIE 5.0) != -1 | verStr.indexOf(MSIE 5.1) != -1) alert(IE6.0以下浏览器.); else alert(IE6.0以上浏览器.); var verStr = navigator.appVer;else if (app.indexO

46、f() != -1) alert(非IE浏览器);if (app.indexOf(Netsc) != -1) var app = navigator.appName;alert(location);/直接取得完整的地址location = ht;/设置值可以直接转向 alert(location.hash);alert(location.host); alert(location.hostname); alert(location.href); alert(location.pathname); alert(location.port); alert(tocol); alert(locatio

47、n.search); location.reload();location.href = ht;/也可以直接转向谷歌，火狐，opera 等弹出“非 IE 浏览器的提示，IE 则是两种提示”screen 对象3.9.1.availHeight：当前屏幕除去任务栏后可以用的区域的高度，PS：任务栏不是只能在下面availWidth：当前屏幕除去任务栏后可以用的区域的宽度，PS：任务栏不是只能在下面height：屏幕的完整高度，包含任务栏width：屏幕的完整宽度，包含任务栏2.3.4./注：测试电脑的分辨率为1920 x1080，任务栏在左侧alert(screen.availHeight);/1

48、080alert(screen.availWidth);/1858alert(screen.height);/1080alert(screen.width);/19203.10. event 对象returnValue 属性可以元素的默认行为function MyReturn() window.event.returnValue = false;function MyReturn1() return false;1else alert(神马破浏览器啊);3.6.1srcElement 对象表示触发当前事件的元素对象function btnClick() /代表触发事件的对象divMain.in

49、nerHTML = window.event.srcElement.value;function linkClick() /代表触发事件的对象divMain.innerHTML = window.event.srcElement.innerHTML;超154324. DOM 编程4.1.Dom 树概念浏览器在接收到服务器返回的 html 之后就启动器一行一行的代码字符串，然后在内存中生成一个树形结构的 dom 树，然后通过 dom 树呈现出界面(不严谨)，为什么要有 dom 树？为了程序员能通过 js 代码操作 dom 树，达到改变界面的目的可以放大出来的 dom 树就像上面的图一样，从根节点

50、 html 节点开始，一层一层向下包最终括获取 dom 元素4.2.四大重要方法.3.4.geementById();找到第一个 id 属性为参数的元素.geementsByName();找到所有 name 属性为参数的元素列表.geementsByTagName();找到所有名为参数的元素列表.geementsByClaame();找到所有 class 属性为参数的元素列表.geementById(diva);.geementsByName(gender);.geementsByTagName(input);超3超24.2.2其他快速获取元素的方法1234取得所有 eleme

51、nt取得页面上所有表单取得页面上所有alformsimages bodyalert(.all.length);alert(.forms.length);alert(.images.length);表示当前页面的 body 元素 alert(.body);innerText 和 innerHTML4.3.几乎所有 DOM 元素都有 innerText、innerHTML 属性（注意大小写），分别是元素的文本表示形式和 HTML 源代码，这两个属性是可读可写的。内内容用 innerHTML 也可以替代 createElement，属于简单、粗放型、自负的创建的 innerHTML 和的 inner

52、HTML 不一样。/建议，在使用之前要保证标签具有开始和结束标记，否则，会出现一下意想不到的。4.4.事件js 中的事件和 c#中的事件理解起来差不多，作用是一样的，都是在一个事情发生的时候做另外的一些事典型事件：window.onload 和字面意思一样是“window 加载”，当 window 加载完成之后的时机触发事件，被触发的就是一个方法，可以是命名方法，也可以是1. 事件的引入方式方法a.直接在元素的事件属性里写 js 代码b. 在 script 代码段中先获取到元素对象，然后通过.事件名的方式添加var diva =.geementById(diva);diva.innerHTML

53、 = 传智播客;传智播客alert(.geementById(diva).innerText);alert(.geementById(diva).innerHTML);.geementsByClaame(show);注：在第式中，写的代码alert(aaa)其实也是被包含在一个函数中的类似2. 事件名事件还有零级事件这一概念，在js高级中会说4.5.元素的新增 修改 删除4.3.1创建元素使用函数在内存中创建一个元素对象：var newinput =.createElement(input);两种方法为刚才创建的元素设置必须的属性javascript 事件列表解说事件浏览器支持解说一般事件on

54、clickIE3、N2鼠标点击时触发此事件ondblclickIE4、N4鼠标双击时触发此事件onmousedownIE4、N4按下鼠标时触发此事件onmouseupIE4、N4鼠标按下后松开鼠标时触发此事件onmouseoverIE3、N2当鼠标移动到某对象范围的上方时触发此事件onmousemoveIE4、N4鼠标移动时触发此事件onmouseoutIE4、N3当鼠标离开某对象范围时触发此事件onkeypressIE4、N4当键盘上的某个键被按下并且时触发此事件.onkeydownIE4、N4当键盘上某个按键被按下时触发此事件onkeyupIE4、N4当键盘上某个按键被按放开时触发此事件o

55、nloadIE3、N2页面内容完成时触发此事件onresizeIE4、N4当浏览器的窗口大小被改变时触发此事件onscrol4、N浏览器的滚动条位置发生变化时触发此事件表单相关事件onblurIE3、N2当前元素失去焦点时触发此事件onfocusIE3、N2当某个元素获得焦点时触发此事件onresetIE4、N3当表单中 RESET 的属性被激发时触发此事件onsubmitIE3、N2一个表单被递交时触发此事件oncopyIE5、N当页面当前的被选择内容被后触发此事件oncutIE5、N当页面当前的被选择内容被剪切时触发此事件onpasteIE5、N当内容被粘贴时触发此事件onselectIE

56、4、N当文本内容被选择时的事件btnb.onclick = function () alert(bbb); var btnb =.geementById(btn2);newinput.type = file;/对于有一些属性能直接点出来a)b)newinput.setribute(type, file); /对于一些属性不能直接点出来，对应的还有 getribute使用第二种c. 找到创建元素要被添加到的元素，这里添加到一个 id 为“fM”的 form 中： var fom =.geementById(fM);d. 调 用 被 目 标 元 素 的 appendChild 方 法 ， 并 把

57、创 建 的 元 素 做 参 数 ：fom.appendChild(newinput);也可以 innerHTML删除元素找到要删除的元素的父级元素(谁包含它，谁就是这个元素的父级元素)调用父级元素的 removeChild 方法，并发要删除的元素传进去还可以 innerHTML4.3.3练习var btna =.geementById(btn1);var fom =.geementById(fM);fom.removeChild(btna);var newinput =.createElement(input);newinput.type = file;newinput.setribute(t

58、ype, file);var fom =.geementById(fM);fom.appendChild(newinput);删除功能暂时不用做练习难点：表格需要使用到两个新方法1.表格元素的 insertRow 方法，这个方法可以再表格的指定行索引出一个新行，并且返回的行元素的对象2.行元素的 insertCell 方法，这个方法可以再这个航里面指定的列索引出一个新列，并且返回的列元素对象window.onload = function () var dat = new Array();dat0 = id: 0, title: net, author: yhb, time: 2013-01-

59、 01 ;dat1 = id: 0, title: java, author: zhd, time: 2013-01- 02 ;dat2 = id: 0, title: , author: yzk, time: 2013-01- 03 ;dat3 = id: 0, title: c+, author: zm, time: 2013-01- 04 ;var tb=.geementById(tb1);for (var i = 0; i dength; i+) var ttr = tb.insertRow(1);/两种方式/ttr.insertCell(-1).innerHTML = ;var te

60、=.createElement(input);te.type=checkbox;ttr.insertCell(-1).appendChild(te);ttr.insertCell(-1).innerHTML = dati.title;ttr.insertCell(-1).innerHTML = dati.author;ttr.insertCell(-1).innerHTML = dati.time;var ins =.geementsByTagName(input);for (var i = 0; i =0 ; i-) if (insi.checked) insi.parenement.par