2310-30三層架構(gòu)四網(wǎng)頁(yè)和js htmljs

1、目錄HTML+CSS21.HTML2瀏覽器3顏色體系41.24 超45表格5表單及元素6下拉列表 select71.8 頭部72.CSS8三種寫法8選擇器82.3 計(jì)量10常用屬性10div+css 布局11擴(kuò)展 1： 基本頁(yè)面布局分析15擴(kuò)展 2：瀏覽器和服務(wù)器請(qǐng)求處理相應(yīng)16Javascript181.概述18開發(fā)環(huán)境：19三大部分組成部分19代碼書寫位置192.語(yǔ)法20變量、數(shù)據(jù)類型、類型轉(zhuǎn)換20for 循環(huán).2.3.switch21方法22字符串.2.6.數(shù)組232.7.擴(kuò)展方法*25BOM 編程253.3.1.alert253.2.new date

2、()263.3.clipboardData26seterval(計(jì)時(shí)器)：263.4.計(jì)時(shí)器)：273.5.settimeOut(history 對(duì)象27location 對(duì)象27navigator 對(duì)象28screen 對(duì)象29event 對(duì)象2..3.10.DOM 編程31Dom 樹概念31獲取 dom 元素31innerText 和 innerHTML324.4.事件32元素的新增 修改 刪除33節(jié)點(diǎn)關(guān)系37節(jié)點(diǎn)屬性374.8.練習(xí)384.HTML+CSSHTML，要手寫，不要使用設(shè)計(jì)器拖，掌握手寫一般難度的 web 網(wǎng)頁(yè)的能力，學(xué)習(xí) html 就是學(xué)習(xí) w

3、3c 組織已經(jīng)規(guī)定好的各種用法，記住，并且靈活使用1.HTML本質(zhì)上就是一段描述網(wǎng)頁(yè)張什么樣子的文本(string)，可以直接查看源代碼，基礎(chǔ) html 頁(yè)面代碼，包含 html，head，bodyhead除了 title，其他的都不直接展示給用戶看，body的內(nèi)容就是展示在瀏覽器界面上的內(nèi)容html，xhtml，xml 的關(guān)系(大小寫敏感，屬性雙引號(hào)，必須結(jié)束)1.1HTML 運(yùn)行原理1.當(dāng)用戶在瀏覽器輸入地址按確定之后瀏覽器就找到對(duì)應(yīng)的服務(wù)器(本質(zhì)上也是一臺(tái)電腦，只是配置好點(diǎn))，服務(wù)器根據(jù)用戶輸入的返回給瀏覽器，找到相應(yīng)的網(wǎng)頁(yè)文件(html 文件)然后，瀏覽器接收到返回的 html 內(nèi)容(

4、就是一堆的字符串)，然后根據(jù) html 語(yǔ)法來普通人能看懂的界面并且展現(xiàn)成2.本地的 html 文件直接用瀏覽器打開，瀏覽器就直接了這個(gè)文件的內(nèi)容(字符串)，然后，展示1.2HTML 編輯html 文件是以“.html”或”.htm”結(jié)尾的文件，任何能夠編輯 txt 文本文件的工具都可以編輯 html 頁(yè)面文件，文件內(nèi)容包含部分和正文部分部分：正文部分：部分是告訴瀏覽器怎么來內(nèi)容這個(gè)文件內(nèi)容，不會(huì)展現(xiàn)給用戶看，正文部分是要展現(xiàn)給用戶看的1.3 瀏覽器在用戶確認(rèn)地址之后接受服務(wù)器返回的 html 頁(yè)面文件，并且顯示成普通人眼可以看的界面的工具包括:IE FF CHORME 等?。罕举|(zhì)，服務(wù)器發(fā)送

5、回來的就是 html 文件的文本各種不同瀏覽器“翻譯”html 代碼的時(shí)候有不同的情況，這就是瀏覽器兼容性主要要測(cè)試的瀏覽器：IE6.0+,FF,CHORME1.4 顏色體系單詞：red blue black 等16 進(jìn)制：#FF000 #00FF00 #0000FF #1.2.#000000 等井號(hào)后面加上三個(gè)進(jìn)制的數(shù)字組成rgb：rgb(219, 98, 248) rgba(89, 60, 150, 0.69) 幾個(gè)數(shù)字，前三位是紅黃藍(lán)數(shù)值，后面一位是3.4.rgb 值：rgb(209, 133, 228)rgba(209, 133, 228, 0.8)兩個(gè)注意一個(gè)有一個(gè) a 一個(gè)沒有，括

6、號(hào)里面前面的數(shù)值用逗號(hào)隔開，前面三個(gè)數(shù)值取值從 0-255，rgba 里面第四個(gè)值表示顏色的，取值從 0.00-1.00 的小數(shù)，rgb 其實(shí)也有第四位取值，就是 11.5html 中和 xml 的注釋是一樣的用“”要想在頁(yè)面上顯示特殊的字符，就需要把特殊字符轉(zhuǎn)義，就和 C#中的一樣各種轉(zhuǎn)義：大于 小于 空格 等換行 和段落center 居中，- 標(biāo)題自動(dòng)格式 , 加粗 ，加粗 , 下劃線 , 字體因?yàn)榘凑站W(wǎng)頁(yè)設(shè)計(jì)理念，html 只頁(yè)面有什么內(nèi)容，格式交給 css 控制，兩者分開，使用各司其職，因此，以上格式div，span不1.6 超路徑問題a：當(dāng)前頁(yè)面相同目錄的 a.html 文件a：當(dāng)前

7、頁(yè)面相同目錄的 a.html 文件a：當(dāng)前頁(yè)面上一級(jí)目錄的 a.html 文件a：當(dāng)前頁(yè)面上兩級(jí)目錄的 a.html 文件a：當(dāng)前根目錄的 a.html 文件a：當(dāng)前頁(yè)面目錄下的 news 文件夾下的的 a.html 文件a：當(dāng)前頁(yè)面目錄下的 news 文件夾下的的 a.html 文件a：當(dāng)前頁(yè)面目錄上一級(jí)目錄下的 news 文件夾下的的 a.html 文件a：當(dāng)前頁(yè)面目錄上兩級(jí)目錄下的 news 文件夾下的的 a.html文件a：當(dāng)前根目錄下的 news 文件夾下的 a.html 文件1.7src：路徑heigth：高度 width：寬度divspanullioltabletrtdththe

8、adtbodytfoot1.8 表格雖然可以直接在 table 下寫 tr 但是在 js 操作的時(shí)候會(huì)出問題， 不要偷懶A1A2A3A4A5B1B2B3B5C1C2C3C4C5D1D2D5E1E4E5F1F2F3tF5theadtheadtheadtbodytbodytbodytfoottfoottfoot在這里，但是不寫內(nèi)容非常多的頁(yè)面內(nèi)容去 top練習(xí)：1.9 表單及元素提交之后會(huì)有x和y軸的點(diǎn)擊坐標(biāo)文本框文件選擇框框復(fù)選框：checked屬性表示是否默認(rèn)被選中單選框：每一組單選選項(xiàng)必須具有相同的name屬性隱藏域大文本框樣子的提交按鈕：src是顯示的，普通按鈕:大都配合js使用重置按鈕：

9、重置當(dāng)前表單上的各個(gè)元素的原始值提交按鈕：提交當(dāng)前表單公共屬性：disabled=disabled 控制這個(gè)表單元素是否能用，不能用的顯示成灰色文本輸入框有 readonly=readonly 控制是否是只能看(只讀)，不可修改的這兩個(gè)屬性在 html 規(guī)范中可以忽略等號(hào)和后面的內(nèi)容，但這樣不符合 xml 規(guī)范，所以建議最好加上1.10 下拉列表 selectsize 屬性控制一次顯示的項(xiàng)目個(gè)數(shù)，分組也算，multiple 控制是否可以多選lable：為其他表單元素提供快速焦點(diǎn)的男賬號(hào)fieldset常用正文1.11 頭部設(shè)置當(dāng)前頁(yè)面所使用的編碼格式，(瀏覽器解釋發(fā)回來的 html 字符串用什

10、么編碼)3秒后刷新本頁(yè)(登陸，登出，發(fā)帖，回復(fù)成功，3秒之后轉(zhuǎn)到*) 3秒后轉(zhuǎn)向另外的頁(yè)面告訴瀏覽器，本頁(yè)不緩存頁(yè)面selectitem1-1selectitem1-2selectitem1-3selectitem1-4selectitem2-1selectitem2-2selectitem2-3selectitem2-4select下拉菜單2.CSS2.1 三種寫法1.直接在內(nèi)的 style 屬性里寫樣式：aaaaa2.在 head里面寫 style，然后在 style里面寫樣式 div color:blue; 3.在外部的一個(gè).css 文件中寫上樣式，然后在需要使用樣式的頁(yè)面上添加.css

11、 文件中寫：div color:blue; 在頁(yè)面上添加：如果一個(gè)元素用了這三種寫法定義了 同一個(gè)屬性，比如上面的代碼就為 div 定義了邊框，那么優(yōu)先使用第一種，然后是第二種，一次類推盡量不要使用第式寫樣式，如果以后要修改的話可能需要改很多很多地方2.2 選擇器一、三大基礎(chǔ)選擇器，說明這個(gè)樣式應(yīng)用于哪些元素1.tag 選擇器(選擇器)：“div color:blue; ”直接寫上 html的名字，表示標(biāo)簽名為 div 的 html 元素采用這個(gè)樣式aaaaa2.ID 選擇器：“#aa color:red; ”一個(gè)#號(hào)加上 html性為 aa 的 html 元素采用這個(gè)樣式bbbbb的 ID

12、屬性值，表示所有 id 屬3.class 選擇器(類選擇器)：“.show color: orange; ”一個(gè)點(diǎn)加上自定義的選擇器名字，命名要有意義，表示所有 class 屬性為 show 的 html 元素采用這個(gè)樣式ccccchtml可以同時(shí)具有多個(gè) class 樣式：ccccc，直接寫上兩個(gè)類選擇器，中間用空格隔開，如果兩個(gè)樣式中定義個(gè)同一個(gè)樣式，不同的屬性，那么按照樣式的順序來，后的起作用div color: blue; #aa color: red; .show color: orange; .error color:black; font-size:50px;aaaaabbbbb

13、ccccc二、 擴(kuò)展選擇器(擴(kuò)展，知道即可)1. tag+class 選擇器：讓相同的 class 名對(duì)于不同的 html 元素具有不同的效果div.error color:#f00span.error color:#ff6a00diverrorspanerror2.關(guān)聯(lián)選擇器：用于滿足第一個(gè)選擇器的 html 元素下滿足第二個(gè)選擇器的 html 元素任何兩種選擇器都可以關(guān)聯(lián)使用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. 偽類選擇器：通常用于給超用注：當(dāng)點(diǎn)擊過后，active 顏色失效2.3 計(jì)量1.2.3.px 像素% 百分比em 相對(duì)最常用的是 px，偶爾會(huì)用到 %， 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; /*表示沒有被點(diǎn)擊過*/a:hover color: red; text-decoration: underline; /*表示鼠標(biāo)指到這里*/a:active color: #0026ff; /*表示鼠標(biāo)按下，還沒有放開*/廣州播客a:visited color: #; /*表示已近點(diǎn)過的*/.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 默認(rèn)排列在一行里面，所以叫行級(jí)元素如 div 默認(rèn)占據(jù)著整塊內(nèi)容，所以叫塊級(jí)元素行級(jí)元素沒有 width height max-width max-height min-width min-height 等屬性就算用 css 設(shè)置了也無效，如果想改變這些屬性，應(yīng)該用在它的屬于塊級(jí)元素的父元素* 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;新式瀏覽器：老式瀏覽器：太多太怪異的浮動(dòng)可能很難做到瀏覽器兼容，所以但實(shí)際開發(fā)效果差不

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 擴(kuò)展 1： 基本頁(yè)面布局分析詳見“頁(yè)面分析”文件夾2.7 擴(kuò)展 2：瀏覽器和服務(wù)器請(qǐng)求處理相應(yīng)http 協(xié)議：1.瀏覽器想服務(wù)器發(fā)送一個(gè)請(qǐng)求報(bào)文請(qǐng)求報(bào)文包括，請(qǐng)求的，請(qǐng)求的 ip，和本機(jī)的操作系統(tǒng)，瀏覽器版本，參數(shù)，支持的壓縮算法等，get2.服務(wù)器按照請(qǐng)求報(bào)文返回一個(gè)響應(yīng)報(bào)文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相應(yīng)報(bào)文包括：請(qǐng)求處理的狀態(tài)碼，當(dāng)前相應(yīng)數(shù)據(jù)的編碼方式(如果是文本才有)，服務(wù)器配置信息，當(dāng)前頁(yè)面數(shù)據(jù)更新的時(shí)間，本次

24、相應(yīng)數(shù)據(jù)的長(zhǎng)度，換一行之后就是相應(yīng)數(shù)據(jù)的正文(如果是 html css js 等就是文本，如果是就是二進(jìn)制數(shù)據(jù))X-ered-By: ASP.NETDate:, 18 Feb 2013 03:44:55 GMTContent-Length: 13520。Javascript為什么要學(xué) jsjs 是什么，有什么特點(diǎn)能做什么js 組成部分 頁(yè)面引入方式基礎(chǔ)語(yǔ)法異常處理 自定義錯(cuò)誤代碼調(diào)試 擴(kuò)展函數(shù) 各大對(duì)象 Bomwindows 對(duì)象對(duì)象 navigator 對(duì)象 screen 對(duì)象 history 對(duì)象location 對(duì)象對(duì)象Dom-dom 樹概念圖獲取節(jié)點(diǎn)增，改，刪節(jié)點(diǎn)練節(jié)點(diǎn)關(guān)系表達(dá)節(jié)點(diǎn)關(guān)系

25、表達(dá) 2練習(xí) 2innerText 和 innerHTML練習(xí) 3練習(xí) 4練習(xí) 5練習(xí) 6練習(xí) 71. 概述因?yàn)?html 本生只能描述頁(yè)面有些什么內(nèi)容，不具備任何的動(dòng)態(tài)計(jì)算和判斷的能力，而且如果所有判斷都要服務(wù)器做的話這樣用戶體驗(yàn)會(huì)非常差，服務(wù)器壓力也很大，所以就產(chǎn)生了 javascript 語(yǔ)言客戶端語(yǔ)言，在瀏覽器上直接運(yùn)行，占用 的是用戶電腦的 Cpujavascript 和 java 沒有關(guān)系，以前名字叫 livescript，因?yàn)槲樟艘恍?java 的特性，所以改了個(gè)名字沾光js 的跨性，因?yàn)?js 是運(yùn)行在瀏覽器里的，現(xiàn)在所有系統(tǒng)都有瀏覽器可以支持javascript 屬于解釋型

26、語(yǔ)言(也被成為語(yǔ)言)，而 c#屬于編譯型語(yǔ)言，解釋型語(yǔ)言在執(zhí)行的時(shí)候由系統(tǒng)的一個(gè)解釋器來解釋一條執(zhí)行一條，一條條的翻譯成機(jī)器可以識(shí)別的指令然后執(zhí)行，常見的解釋型語(yǔ)言有：批處理 bat，sql 語(yǔ)句等1.1.開發(fā)環(huán)境：VS 即可 由于 js 是一門非常靈活的動(dòng)態(tài)語(yǔ)言，所以有時(shí)候不能點(diǎn)出來的，方法，屬性也是可以使用的，能點(diǎn)出來的也有報(bào)錯(cuò)的幾率，vs2012 的智能提示很好，要太過于依賴智能提示使用，但不調(diào)試工具，每種瀏覽器按 F12，就會(huì)彈出開發(fā)火狐需要安裝 firebug工具，具體用法，在遇到錯(cuò)誤后說，1.2.三大部分組成部分1.ECMAScript：基礎(chǔ)語(yǔ)法有標(biāo)準(zhǔn)，所有瀏覽器支持都一樣2.BO

27、M：瀏覽器對(duì)象模型沒有的標(biāo)準(zhǔn)，新式瀏覽器支持差不多，老式的差很多，主要有：打開新窗口，關(guān)閉窗口，操作地址欄，歷史3.DOM：文檔對(duì)象模型，獲取屏幕分辨率等有標(biāo)準(zhǔn)，基本上瀏覽器都支持，但又細(xì)微差別注：DOM 實(shí)際上是包含在 BOM 下的，但因?yàn)樗匾?，所以這里也列出1.3.代碼書寫位置1.在頁(yè)面任意位置寫 script里，然后在這個(gè)里面寫 js 代碼，但是一般寫在頭部同一個(gè)頁(yè)面中可以包含多個(gè) script代碼段，如果其中一個(gè)代碼段里面代碼有錯(cuò)誤，那這個(gè)代碼段就中斷執(zhí)行，但不影響其他代碼段執(zhí)行2.ss 一樣也可以寫在外部的一個(gè).js 文件中，alert(abc);在頁(yè)面文件上寫上： 即可，但不

28、要寫成，這樣的話瀏覽器不認(rèn)識(shí)3.在 a的 href 屬性里：如點(diǎn)擊4.在的 onclick 等事件里寫：如：點(diǎn)擊實(shí)際開發(fā)中使用 1,2 兩種注：在使用第二種當(dāng)時(shí)的時(shí)候，在 script 開始里加上 defer=defer屬性可以吧這個(gè)文件里的所有 js 代碼延defer=defer頁(yè)面 html 代碼加載完畢之后再執(zhí)行， 如： script src=js.js在 ie3 以前的瀏覽器，會(huì)直接吧 js 代碼顯示在界面上，所以吧里面所有內(nèi)容用“”括2. 語(yǔ)法大小寫敏感，嚴(yán)格區(qū)分大小寫，.是弱類型語(yǔ)言，一個(gè)變量用“var”，不像 C#那么嚴(yán)謹(jǐn)，因?yàn)槭恰皠?dòng)態(tài)類型”，可以隨時(shí)改變變量成另外

29、一種類型的值注釋方法和 c#，Java 都一樣，單行用/，多行用/*/第一個(gè) js 程序PS:由此可見，js 語(yǔ)法和 c#語(yǔ)法有很大的相似程度，所以不要寫著寫著就“串線”了2.1.變量、數(shù)據(jù)類型、類型轉(zhuǎn)換1.js 是弱類型語(yǔ)言，在一個(gè)變量的時(shí)候直接使用 var 關(guān)鍵字就可以了。這個(gè)變量可以指向任何類型的數(shù)據(jù)，也可以再任何時(shí)候更改指向其他類型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 中如果要輸出特殊符號(hào)，也需要用到轉(zhuǎn)譯符，和 c#中一樣，轉(zhuǎn)譯符是“/”2.雖然編寫代碼的時(shí)候不需要數(shù)據(jù)的類型，但是解釋器內(nèi)部還是會(huì)做類型的轉(zhuǎn)換，在某些操作的時(shí)候，程序員也需要做類型轉(zhuǎn)換的3.在很多情況下會(huì)遇到需要將 “1”+“2” = 3 這樣的需求，這個(gè)時(shí)候就需要做數(shù)據(jù)類型轉(zhuǎn)換了，吧前面兩個(gè)字符串轉(zhuǎn)換成數(shù)字parseIn(valu)：講傳進(jìn)來的參數(shù)轉(zhuǎn)換成等效的數(shù)字parseFloat(valu):轉(zhuǎn)換成小數(shù)以上兩種方式轉(zhuǎn)換是吧字符串里的字符一個(gè)一個(gè)的轉(zhuǎn)換，知道轉(zhuǎn)換所有的字符，如果中間遇到不能轉(zhuǎn)換的就停止，再后面的都不會(huì)繼續(xù)了，不要想當(dāng)然的會(huì)跳過之后繼續(xù)轉(zhuǎn)換，如果知道所有字符沒有一個(gè)是

31、能轉(zhuǎn)換的，那么就返回一個(gè)NaN2.2.for 循環(huán)和 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時(shí)間類型Array數(shù)組，字典，集合，強(qiáng)大Object對(duì)錯(cuò)吧Number 數(shù)值 undefinde“找不到” null空function 方法類型NaN不是數(shù)字，not a numberinfiniti無窮大數(shù)字任何數(shù)除以零即可2.4.方法定義和使用方法和 C#中的一樣

32、，都是為了達(dá)到代碼復(fù)用的功能，住：在瀏覽器遇到 script的時(shí)候，會(huì)優(yōu)先運(yùn)行這個(gè)里的式語(yǔ)言，就是 function，這樣，不管方法是在調(diào)用之前還是之后，后可以被調(diào)用到2.5.字符串字符串的引號(hào)括起來就可以了：var a = aaa;length 屬性：得到這個(gè)字符串的長(zhǎng)度：alert(a.length)split 方法：根據(jù)指定的分隔符，把一個(gè)字符串分割成多個(gè)字符串1.2.substr 和 substring 方法：兩個(gè)都是截取一定長(zhǎng)度的字符串3.substr 是從下標(biāo)為第一個(gè)參數(shù)的地方截取第二個(gè)參數(shù)長(zhǎng)度的內(nèi)容Substring 是從第一個(gè)下標(biāo)一直截取到第二個(gè)下標(biāo)的內(nèi)容Trim 方法：去除字

33、符串兩頭的空格Indexof 方法：找出這個(gè)字符串里，指定字符或字符串第一次出現(xiàn)的位置.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方法); /沒有名字的方法叫做方法,方法可以定義一個(gè)變量來接收他，var test2 = function () alert(這個(gè)方法是誰(shuí)呢？) ; test();/調(diào)用

34、test這個(gè)命名方法test2();/調(diào)用test2這個(gè)方法case c:.write(C);break;case d:.write(D);default:8.LastIndexOf 方法：找出這個(gè)字符串里，指定字符或字符串最后出現(xiàn)的位置9.CharAt 方法：找出參數(shù)所指定的下表位置的字符2.6.數(shù)組超級(jí)強(qiáng)大的裝載數(shù)據(jù)的綜合體第一種：普通數(shù)組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”用法二：鍵值對(duì)集合: 鍵值對(duì)集合其實(shí)就是一個(gè)對(duì)象，里面每個(gè)鍵就是一個(gè)字段。如果是鍵值對(duì)的話，這個(gè) array 的 length 永遠(yuǎn)都是 0；所以不能用 for 循環(huán)，只能用 forin 循環(huán)/鍵值對(duì)集合其實(shí)就是一個(gè)對(duì)象，里面每個(gè)鍵就是一個(gè)字段。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;/這樣就加了一個(gè)不是鍵值對(duì)的數(shù)據(jù)，長(zhǎng)度在這里才變成1/for (var i = 0; i arr.length; i

38、+) /alert(arri);/for (var item in arr) alert(arritem); /這里每個(gè)item只是key，和C#中的foreach很像alert();alert(arr.age);alert(arr.gender);alert();/alert(arr.a);/這個(gè)是不行滴case string: alert(pitem); break;case number: alert(pitem); break;case function: pitem(); break;default: alert(pitem);2.7.擴(kuò)展方法*為當(dāng)前系統(tǒng)定義的類型加上本來不存在的方

39、法給自定義類添加擴(kuò)展方法3. BOM 編程BOM 全名 Bowser Object m，瀏覽器模型對(duì)象，顧名思義就是操作瀏覽器的(整個(gè)瀏覽器窗口，除去頁(yè)面展示區(qū)外的)，bom 變成就是學(xué)習(xí)瀏覽器已經(jīng)定義好的一些值屬于 window 對(duì)象的很多方法3.1.alert函數(shù)是彈出一個(gè)消息提示，它會(huì)阻斷頁(yè)面所有代碼的繼續(xù)執(zhí)行，直到用戶點(diǎn)了確定/定義一個(gè)空的對(duì)象類function() ;/為這個(gè)空的類添加一個(gè)sayHi方法alert(你好啊);/創(chuàng)建對(duì)象var p1 = new();/后面就可以直接調(diào)用這個(gè)添加的方法了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()創(chuàng)建一個(gè)時(shí)間對(duì)象默認(rèn)是當(dāng)前時(shí)間3.3.clipboardData(剪切板，不兼容火狐，op)：setData(“Text”,val),設(shè)置剪貼板的值getData(“Text”)剪貼板的值，返回剪貼板的內(nèi)容clearData(“Text”)清空剪貼板關(guān)于各種瀏覽器的兼容寫法直接上網(wǎng)一搜就 OK 了，大把的代碼a)b)c)d)seterval(計(jì)時(shí)器)：3.4.varerid

41、 = seterval(function() ,1000);/設(shè)置一個(gè)計(jì)時(shí)器 clearerval(erid);/清楚一個(gè)計(jì)時(shí)器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計(jì)時(shí)器)：3.5.settimeOut(var timeid = setTimeout(function() ,1000);/設(shè)置一個(gè)計(jì)時(shí)器 clearTimeout(timeid);/清楚一個(gè)計(jì)時(shí)器a)b)history 對(duì)象3.6.瀏覽器歷史back(),/返回一頁(yè)go(-1);/返回一頁(yè)或者多頁(yè)go(1);/前進(jìn)一頁(yè)或多頁(yè)forward();/前進(jìn)一頁(yè)location 對(duì)象3.7.a)alert(location);/直接取值可以取到完整的地址location = ht;/直接賦值可以轉(zhuǎn)向b)c)d)e)f)hash屬性：獲取當(dāng)前地址欄后面#后面的值，包括#host屬性：取得當(dāng)前地址欄

43、里的主機(jī)地址，帶端口，不帶協(xié)議，不帶請(qǐng)求文件名 hostname屬性：取得當(dāng)前地址欄里的主機(jī)地址，不帶端口不帶協(xié)議不帶請(qǐng)求文件名 href屬性：取得當(dāng)前地址欄里的全地址，所有的都帶pathname屬性：請(qǐng)求文件名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屬性：當(dāng)前地址欄的端 protocol：當(dāng)前地址的協(xié)議search：當(dāng)前地址欄?后面的數(shù)據(jù)，包括?reload方法：重新加載當(dāng)前頁(yè)面，就是刷新navigator 對(duì)象3.8.appCodeName：與瀏覽器相關(guān)的內(nèi)部代碼名 appName：瀏覽器的正式名稱appVer：瀏覽器的版本號(hào)Enabled：返回用戶瀏覽器是否啟用了 language：瀏覽器支持的語(yǔ)言u(píng)serAgent ： 包 含 以 下 屬 性 中 所 有 或 一 部 分 的 字 符 串 ： appCodeName,1.2.

45、.appName,appVer,language,platformuserLanguage：用戶在自己的操作系統(tǒng)上設(shè)置的語(yǔ)言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;/設(shè)置值可以直接轉(zhuǎn)向 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;/也可以直接轉(zhuǎn)向谷歌，火狐，opera 等彈出“非 IE 瀏覽器的提示，IE 則是兩種提示”screen 對(duì)象3.9.1.availHeight：當(dāng)前屏幕除去任務(wù)欄后可以用的區(qū)域的高度，PS：任務(wù)欄不是只能在下面availWidth：當(dāng)前屏幕除去任務(wù)欄后可以用的區(qū)域的寬度，PS：任務(wù)欄不是只能在下面height：屏幕的完整高度，包含任務(wù)欄width：屏幕的完整寬度，包含任務(wù)欄2.3.4./注：測(cè)試電腦的分辨率為1920 x1080，任務(wù)欄在左側(cè)alert(screen.availHeight);/1

48、080alert(screen.availWidth);/1858alert(screen.height);/1080alert(screen.width);/19203.10. event 對(duì)象returnValue 屬性可以元素的默認(rèn)行為function MyReturn() window.event.returnValue = false;function MyReturn1() return false;1else alert(神馬破瀏覽器啊);3.6.1srcElement 對(duì)象表示觸發(fā)當(dāng)前事件的元素對(duì)象function btnClick() /代表觸發(fā)事件的對(duì)象divMain.in

49、nerHTML = window.event.srcElement.value;function linkClick() /代表觸發(fā)事件的對(duì)象divMain.innerHTML = window.event.srcElement.innerHTML;超154324. DOM 編程4.1.Dom 樹概念瀏覽器在接收到服務(wù)器返回的 html 之后就啟動(dòng)器一行一行的代碼字符串，然后在內(nèi)存中生成一個(gè)樹形結(jié)構(gòu)的 dom 樹，然后通過 dom 樹呈現(xiàn)出界面(不嚴(yán)謹(jǐn))，為什么要有 dom 樹？為了程序員能通過 js 代碼操作 dom 樹，達(dá)到改變界面的目的可以放大出來的 dom 樹就像上面的圖一樣，從根節(jié)點(diǎn)

50、 html 節(jié)點(diǎn)開始，一層一層向下包最終括獲取 dom 元素4.2.四大重要方法.3.4.geementById();找到第一個(gè) id 屬性為參數(shù)的元素.geementsByName();找到所有 name 屬性為參數(shù)的元素列表.geementsByTagName();找到所有名為參數(shù)的元素列表.geementsByClaame();找到所有 class 屬性為參數(shù)的元素列表.geementById(diva);.geementsByName(gender);.geementsByTagName(input);超3超24.2.2其他快速獲取元素的方法1234取得所有 eleme

51、nt取得頁(yè)面上所有表單取得頁(yè)面上所有alformsimages bodyalert(.all.length);alert(.forms.length);alert(.images.length);表示當(dāng)前頁(yè)面的 body 元素 alert(.body);innerText 和 innerHTML4.3.幾乎所有 DOM 元素都有 innerText、innerHTML 屬性（注意大小寫），分別是元素的文本表示形式和 HTML 源代碼，這兩個(gè)屬性是可讀可寫的。內(nèi)內(nèi)容用 innerHTML 也可以替代 createElement，屬于簡(jiǎn)單、粗放型、自負(fù)的創(chuàng)建的 innerHTML 和的 inner

52、HTML 不一樣。/建議，在使用之前要保證標(biāo)簽具有開始和結(jié)束標(biāo)記，否則，會(huì)出現(xiàn)一下意想不到的。4.4.事件js 中的事件和 c#中的事件理解起來差不多，作用是一樣的，都是在一個(gè)事情發(fā)生的時(shí)候做另外的一些事典型事件：window.onload 和字面意思一樣是“window 加載”，當(dāng) window 加載完成之后的時(shí)機(jī)觸發(fā)事件，被觸發(fā)的就是一個(gè)方法，可以是命名方法，也可以是1. 事件的引入方式方法a.直接在元素的事件屬性里寫 js 代碼b. 在 script 代碼段中先獲取到元素對(duì)象，然后通過.事件名的方式添加var diva =.geementById(diva);diva.innerHTML

53、 = 傳智播客;傳智播客alert(.geementById(diva).innerText);alert(.geementById(diva).innerHTML);.geementsByClaame(show);注：在第式中，寫的代碼alert(aaa)其實(shí)也是被包含在一個(gè)函數(shù)中的類似2. 事件名事件還有零級(jí)事件這一概念，在js高級(jí)中會(huì)說4.5.元素的新增 修改 刪除4.3.1創(chuàng)建元素使用函數(shù)在內(nèi)存中創(chuàng)建一個(gè)元素對(duì)象：var newinput =.createElement(input);兩種方法為剛才創(chuàng)建的元素設(shè)置必須的屬性javascript 事件列表解說事件瀏覽器支持解說一般事件on

54、clickIE3、N2鼠標(biāo)點(diǎn)擊時(shí)觸發(fā)此事件ondblclickIE4、N4鼠標(biāo)雙擊時(shí)觸發(fā)此事件onmousedownIE4、N4按下鼠標(biāo)時(shí)觸發(fā)此事件onmouseupIE4、N4鼠標(biāo)按下后松開鼠標(biāo)時(shí)觸發(fā)此事件onmouseoverIE3、N2當(dāng)鼠標(biāo)移動(dòng)到某對(duì)象范圍的上方時(shí)觸發(fā)此事件onmousemoveIE4、N4鼠標(biāo)移動(dòng)時(shí)觸發(fā)此事件onmouseoutIE4、N3當(dāng)鼠標(biāo)離開某對(duì)象范圍時(shí)觸發(fā)此事件onkeypressIE4、N4當(dāng)鍵盤上的某個(gè)鍵被按下并且時(shí)觸發(fā)此事件.onkeydownIE4、N4當(dāng)鍵盤上某個(gè)按鍵被按下時(shí)觸發(fā)此事件onkeyupIE4、N4當(dāng)鍵盤上某個(gè)按鍵被按放開時(shí)觸發(fā)此事件o

55、nloadIE3、N2頁(yè)面內(nèi)容完成時(shí)觸發(fā)此事件onresizeIE4、N4當(dāng)瀏覽器的窗口大小被改變時(shí)觸發(fā)此事件onscrol4、N瀏覽器的滾動(dòng)條位置發(fā)生變化時(shí)觸發(fā)此事件表單相關(guān)事件onblurIE3、N2當(dāng)前元素失去焦點(diǎn)時(shí)觸發(fā)此事件onfocusIE3、N2當(dāng)某個(gè)元素獲得焦點(diǎn)時(shí)觸發(fā)此事件onresetIE4、N3當(dāng)表單中 RESET 的屬性被激發(fā)時(shí)觸發(fā)此事件onsubmitIE3、N2一個(gè)表單被遞交時(shí)觸發(fā)此事件oncopyIE5、N當(dāng)頁(yè)面當(dāng)前的被選擇內(nèi)容被后觸發(fā)此事件oncutIE5、N當(dāng)頁(yè)面當(dāng)前的被選擇內(nèi)容被剪切時(shí)觸發(fā)此事件onpasteIE5、N當(dāng)內(nèi)容被粘貼時(shí)觸發(fā)此事件onselectIE

56、4、N當(dāng)文本內(nèi)容被選擇時(shí)的事件btnb.onclick = function () alert(bbb); var btnb =.geementById(btn2);newinput.type = file;/對(duì)于有一些屬性能直接點(diǎn)出來a)b)newinput.setribute(type, file); /對(duì)于一些屬性不能直接點(diǎn)出來，對(duì)應(yīng)的還有 getribute使用第二種c. 找到創(chuàng)建元素要被添加到的元素，這里添加到一個(gè) id 為“fM”的 form 中： var fom =.geementById(fM);d. 調(diào) 用 被 目 標(biāo) 元 素 的 appendChild 方 法 ， 并 把

57、創(chuàng) 建 的 元 素 做 參 數(shù) ：fom.appendChild(newinput);也可以 innerHTML刪除元素找到要?jiǎng)h除的元素的父級(jí)元素(誰(shuí)包含它，誰(shuí)就是這個(gè)元素的父級(jí)元素)調(diào)用父級(jí)元素的 removeChild 方法，并發(fā)要?jiǎng)h除的元素傳進(jìn)去還可以 innerHTML4.3.3練習(xí)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);刪除功能暫時(shí)不用做練習(xí)難點(diǎn)：表格需要使用到兩個(gè)新方法1.表格元素的 insertRow 方法，這個(gè)方法可以再表格的指定行索引出一個(gè)新行，并且返回的行元素的對(duì)象2.行元素的 insertCell 方法，這個(gè)方法可以再這個(gè)航里面指定的列索引出一個(gè)新列，并且返回的列元素對(duì)象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