HTML筆記大全

1、HTML 的簡介HTML: 超文本標記語言，網(wǎng)頁語言。超文本標記語言：超出文本的X疇。標記： HTML 所有操作都是通過標簽實現(xiàn)的。標簽就是標記。HTML 的后綴 .htm 或者 .html。HTML 規(guī)X：開始 結(jié)束 。成對出現(xiàn)。特殊的標簽單個出現(xiàn) 換行。內(nèi)容： 1.設(shè)置相關(guān)內(nèi)容 標題 2.顯示在頁面上的內(nèi)容3.標簽成對出現(xiàn) 4.標簽不區(qū)分大小寫。5.有些標簽沒有結(jié)束標簽，在標簽內(nèi)結(jié)束， 水平線。HTML 的核心思想（ *）網(wǎng)頁很多數(shù)據(jù)，不同的數(shù)據(jù)需要顯示的效果不一樣，這個時候需要使用標簽把要操作的數(shù)據(jù)（包裝起來），通過修改標簽的屬性值 實現(xiàn)標簽數(shù)據(jù)樣式的變化。一個標簽相當于一個容器，想要修

2、改容器內(nèi)的樣式，只需要改變?nèi)萜鞯膶傩灾?，就可以實現(xiàn)容器內(nèi)數(shù)據(jù)的樣式變化。HTML 最常用的標簽文字標簽和注釋標簽文字標簽：修改文字的樣式- 屬性size:文字的大小X圍1-7超出默認為7。color ：文字顏色兩種表示：1.英文單詞：redgreen。2.使用16 進制表示#ffffff* 注釋標簽：。標題標簽，水平線標簽和特殊字符標題標簽：大小依次變小自動換行 水平線標簽 ： 屬性： *Size: 水平線粗細 *Color: 顏色代碼 換 2 行。特殊字符 :空格： & :&列表標簽展示效果傳智播客 傳智播客 財務(wù)部 財務(wù)部 學(xué)工部 學(xué)工部 人事部 人事部 *: 表示列表X圍*: 表示上層內(nèi)

3、容*: 表示下層內(nèi)容*: 表示下層內(nèi)容.*:有序列表的X圍屬性 type:設(shè)置排序方式1（默認） ai。* 在 ol 標簽里面 具體內(nèi)容 代碼：財務(wù)部 學(xué)工部 人事部 *:有序列表的X圍屬性 type: 實心圓 circle空心圓 disc 實心方塊 square ,默認 disc5、圖像標簽（ *）-src:圖片的路徑-width: 圖片的寬度 height ：圖片的高度 alt：圖片上顯示的文字。6、路徑的介紹絕對路徑：完整的路徑。相對路徑：一個文件相對于類外一個文件的位置。*html文件和圖片在同一個路徑下，直接把名字寫在路徑下。圖片在 html 下一層的路徑，把后面的路徑拿過來用。*

4、圖片在 html 上一層的路徑，./ 加上圖片的名字。././表示上 2 層路徑。7、案例聯(lián)系* 原樣輸出標簽 8、超標簽（ *）資源頂部 href: 的資源的地址，里面的如果是空時”#”表示。target: 設(shè)置目標打開的方式 ，默認在當前頁打開。_blank : 在新的頁面打開。_self:在當前頁面打開。定位資源如果想定位資源：定義一個位置頂部 回到這個位置回到頂部 9、表格標簽（ *重要的很 *）表格的X圍屬性： border= ”1”bordercolor= ”blue”cellspacing=”0”width= ”40”height=”40”.border: 表格線borderco

5、lor: 表格線顏色cellspacing:單元格之間的距離。表示行 在行標簽的里面表示行里面的單元格 在 tr 和 td 標簽下屬性：顯示方式 align: left center right* 表格實現(xiàn) 居中加粗 標簽 表格標題寫著 table 里面* 表格標題標簽 *表示幾行。* 表示每行的單元格。表格技巧： 先數(shù)有幾行有幾行就有幾個 ，在數(shù)每行有多少個單元格 。合并單元格跨行 :rowspan=”幾行 ”跨列 :colspan=”幾列 ”10、表單標簽表示定義一個表單的X圍* form里面的屬性*action=”路徑 ”數(shù)據(jù)跳到頁面。*method=”請求的方式 ”有以下2 種。1.g

6、et和 post, 默認是get。2.get請求攜帶提交數(shù)據(jù)，安全性低，數(shù)據(jù)大小有限制。Post 相反。*enctype:做文件上傳需要設(shè)置這個屬性。輸入項：可以輸入內(nèi)容和選擇內(nèi)容的部分。必須加一個 name 屬性。必須有一個 value 屬性值-大部分的輸入項使用普通輸入項： 密碼輸入項： 單選輸入項： 文件輸入項： 上傳用。在里面加屬性： name=”-Name 屬性值一定要一樣實現(xiàn)默認選項 checked=”checked”放在想選擇的屬性上 。多選輸入項： 在里面加屬性： name=”-Name 屬性值一定要一樣-必須有一個 value 屬性值。必須加一個name 屬性。* 下拉輸入項

7、（不是在input 標簽里面的）。1992selected=”selected” 1993 1993 *選項實現(xiàn)默認選項 selected=”selected”放在想選擇的屬性上文本域隱藏項（代碼中有而在頁面上不會顯示）提交按鈕輸入項 name 的值 =輸入的值參數(shù)類似于 key=value 形式 .圖片提交按鈕： 重置按鈕 (回到輸入項的初始狀態(tài) )普通按鈕11、案例：使用表單來實現(xiàn)注冊頁面。-使用表格實現(xiàn)頁面效果。-超不想要她有結(jié)果href= ”#”-如果表格里面的單元格沒有內(nèi)容，使用空格作為占位符&nasp;-使用圖片提交表單 。12、html 中其他的常用標簽的使用b：加粗s：刪除線u

8、：下劃線i：斜體pre:原樣輸出sub:下標sup:上標div:自動換行顯示塊span:不會自動換行在一行顯示塊p:段落標簽比br 標簽多換一行。13、html 的頭標簽的使用*html 兩部分組成head 和 body在 head 里面的標簽是頭標簽*title: 表示游覽器顯示的內(nèi)容。*meta: 設(shè)置頁面上的一些內(nèi)容。*content: 內(nèi)容的意思。refresh: 刷新后面 3 表示內(nèi)容刷新的時間為3 秒.*base 標簽：設(shè)置超的基本設(shè)置*link 標簽：引入外部文件明天 css，可以使用 link 標簽引入 css 文件。14、框架標簽的使用*-row: 按照行進行劃分*-cols

9、:按照列劃分*frameset cols=”80,* ”*-具體顯示的頁面-* 使用框架標簽的時候，不能寫在body 里面，使用框架標簽，需要把body去掉。例子：/ 把頁面劃分成上下2 部分/ 上面頁面/ 把下面頁面劃分成左右2 部分。/ 左邊頁面/ 右邊頁面如果在左邊的頁面設(shè)置超，讓內(nèi)容顯示在右邊的頁面中設(shè)置超里面的屬性，target 值成名稱超 115、 a 標簽的擴展百度是網(wǎng)絡(luò)資源-當 a 標簽里面訪問網(wǎng)路資源的時候，必須要家一個協(xié)議: 表示一個網(wǎng)路的公共協(xié)議。-如果加上 協(xié)議之后，自動識別訪問資源是一個網(wǎng)絡(luò)資源。- 當瀏覽器里面找到相關(guān)協(xié)議，首先看這個協(xié)議是不是公共協(xié)議 。如果不是公

10、共協(xié)議，回去本地電腦支持這個協(xié)議的應(yīng)用程序。1、 css 的簡介css: 層疊樣式表層疊：一層一層的樣式表：很多屬性和屬性值使頁面顯示效果更加好*css 將頁面內(nèi)容和顯示樣式進行分離，提高了顯示功能。2、 css和 html 的結(jié)合方式（ 4 種結(jié)合方式）*. 在每個 html 標簽上面都有一個屬性style ，把 css 和 html 結(jié)合在一起。-*. 使用 html 的一個標簽實現(xiàn)標簽，寫在 里面。*css 代碼 ;*div background-color:blue;color:red;*. 在 style 標簽里面使用語句（在某些瀏覽器下不起作用）import url (css 文件

11、路徑 )；-第一步，創(chuàng)建一個css 文件improt url (div.css);*. 使用頭標簽link，引入外部 css文件第一步，創(chuàng)建一個css文件-第三種結(jié)合方式，缺點：在某些瀏覽器下不起作用，一般使用第四種方式。優(yōu)先級（一般情況）由上到下，由外到內(nèi)，優(yōu)先級由低到高。后加載的優(yōu)先級高。格式選擇器名稱 屬性名 :屬性值 ;屬性名 :屬性值 ;.3、 css 的基本選擇器（ 3 種）要對哪個標簽里面的數(shù)據(jù)進行操作A:標簽選擇器使用標簽名 作為選擇器的名稱div background-color:gray;color:white;B:class選擇器每個 html 標簽都有一個屬性 clas

12、s -aaaaa.hahaBackground-color:orange;C:id 選擇器每個 html 標簽上面都有一個屬性 id-bbbbbbb-#hehe Background-color:#333300;優(yōu)先級Styleid 選擇器 Class選擇器 標簽選擇器4、 css 的擴展選擇器關(guān)聯(lián)選擇器* wwwwwwwww設(shè)置 div 標簽里面的 P 標簽，嵌套標簽里面的樣式*div p Background-color: green;組合選擇器*111111111222222222222把 div 和 p 標簽設(shè)置成相同的樣式，把不同的標簽設(shè)置相同的樣式*div,pBackground-

13、color:orange;偽元素選擇器*css 里面提供了一些定義好的樣式，可以拿過來使用比如超超的狀態(tài)原始狀態(tài)鼠標放上去的狀態(tài)點擊點擊之后:link:hover:action:visited記憶的方法： lvha5、 css 的盒子模型在進行布局前需要把數(shù)據(jù)封裝到一塊一塊的區(qū)域內(nèi)（div）邊框Border :2px solid blue;/粗細虛線藍色border: 統(tǒng)一設(shè)置border-topborder-bottomborder-leftborder-right內(nèi)邊距Padding:20px;padding:統(tǒng)一設(shè)置上 padding -top 下 padding -bottom 左 p

14、adding -leftpadding -right外邊距Margin:20px margin: 統(tǒng)一設(shè)置上 margin -topmargin -bottommargin -leftmargin -right6、 css 的布局的漂?。私猓ゝloat:屬性值Left: 文本流向?qū)ο蟮挠疫叀ight:文本流向?qū)ο蟮淖筮叀?、 css 的布局的定位（了解）position:屬性值absolute:將對象從分檔流中拖出?？梢允?top 、bottom 等屬性進行定位。relative:不會將對象從分檔流中拖出?？梢允?top 、bottom 等屬性進行定位。8、案例圖文混排案例圖片和文字在一起

15、顯示9、案例圖像簽名在圖片上面顯示文字1、 javascript 的簡介是基于對象和事件驅(qū)動的語言，應(yīng)用于客戶端。-基于對象：提供好了很多對象，可以直接拿過來使用。-事件驅(qū)動：*html做靜態(tài)效果，javascript 動態(tài)效果。-客戶端：專門指的是瀏覽器。js 的特點1.交互性 信息的動態(tài)交互。2.安全性 -js 不能訪問本地磁盤的文件。3.跨平臺性 -只能支持 js 的瀏覽器，都可以運行。*javascript 和 java 的區(qū)別java 是 sun 公司，現(xiàn)在是 oracle；Js是網(wǎng)景公司。Javascript 是基于對象的， java 是面向?qū)ο蟮腏ava 是強類型語言， js 是

16、弱類型語言。4.Javascript 只需解析就可以執(zhí)行，而java 需要編譯和解譯才能執(zhí)行。Js 的組成（ 3 部分）*ECMAScript: ECMA:歐洲計算機協(xié)會制定的js 語法和語句。*Bom ：瀏覽器對象模型。*Dom:文檔對象模型。2、 js 和 html 的結(jié)合方式（ 2 種）* 第一種：使用一個標簽 js 代碼； * 第二種：使用 script 標簽，引入一個外部 js 文件創(chuàng)建一個 js 文件，寫 js 代碼 。3、 js 的原始類型和聲明變量java 的基本數(shù)據(jù)類型 byte short int long float double char Boolean定義變量都使用關(guān)

17、鍵字 var*js 的原始類型有（ 5 個）-string: 字符串-number: 數(shù)字類型-boolean:true和 false-null* var str=”adc”;*var m=123;* var flag=ture;*var data=new Data();獲取對象的引用， null 表示對象引用為空，所有的對象的引用也是object .-undifined* 定義一個變量，沒有賦值。var aa;typeof(); 查看當前變量的數(shù)據(jù)類型。4、 js 的語句-java 里面的語句*if 判斷* switch 語句 *for whiledo-while5、 js 的運算符*+=

18、: x+=y; =x=x+y;*js 里面不區(qū)分整數(shù)和小數(shù)。var j=123;alert(j/1000*1000);j/1000*1000在 java 里面得到結(jié)果為 0./j/1000*1000123/1000*1000=123字符串的相加和相減的操作var str=”123”;/ alert(str+1);/在 java 和 js 相同結(jié)果都是alert(str-1);/ js 執(zhí)行的是正常運算122.4561.提示： NaN：表示不是一個數(shù)字*Boolean類型也可以操作如果設(shè)置成 true ，相當于這個值是 1.如果設(shè)置成 false，相當于這個值是 0.*= 和 =的區(qū)別： *做判

19、斷時*=:比較的只是數(shù)值。*=:比較的是數(shù)值和類型。*/*引入知識-直接向頁面輸出的語句（可以把內(nèi)容顯示在頁面上）*document.write(“aaaa”);document.write( “ ”);可以向頁面輸出變量，固定值和 html 代碼。6、 js 的數(shù)組定義方式（ 3 種）-第一種： var arr=1,2,3; var arr=1,4,ture;-第二種：使用內(nèi)置對象Arrayvar arr1=new Array (5); / 定義一個數(shù)組，長度為5.arr10= ”1”;-第三種：使用內(nèi)置對象Arrayvar arr2=new Array(3,4,5);/ 定義一個數(shù)組，數(shù)組

20、里面元素3 4 5 .數(shù)組里面有一個屬性 Length: 獲取數(shù)組的長度。數(shù)組可以存放不同的數(shù)據(jù)類型的數(shù)據(jù)。7、 js 的函數(shù)*js 里定義函數(shù)方法有三種方式函數(shù)的參數(shù)列表里面，不需要寫 var，直接寫參數(shù)名稱第一種方式：使用到一個關(guān)鍵字 function*function方法名（參數(shù)列表）方法體 ;返回值可有可無使用第一種方式創(chuàng)建函數(shù)function test()alert( “qqqq”);調(diào)用方法/test();定義一個有參數(shù)的方法實現(xiàn) 2 個數(shù)的相加function add1(a,b)var sum=a+b;alert(sum);add1( 2,3 );有返回值的效果function

21、add2 (a,b,c) varsum1=a+b+c;return sum1;aler (add2(3,4,5);第二種方式：匿名函數(shù)var add= function( 參數(shù)列表 ) 方法體和返回值 ;代碼var add3=function(m,n) aler (m+n);調(diào)用方法add (5,6);8、 js 的全局變量和局部變量* 全局變量：在script標簽里面定義一個變量，這個變量在頁面中js 部分都可以使用*在放外部使用，在方法內(nèi)部使用，在另外一個script 標簽中使用局部變量：在方法內(nèi)部定義一個變量，只能在方法內(nèi)部使用-游覽器自帶調(diào)試工具F12.9、 script 標簽放的位置

22、* 建議把 script 標簽放到 后面。10 丶 js 的重載什么是重載？方法名相同，參數(shù)列表不同Js 是否有重載？1、 js 的 String 對象創(chuàng)建 String 對象var str= ”abc”;方法和屬性（文檔）屬性 length: 字符串的長度方法與 html 相關(guān)的方法-bold(): 加粗-fontcolor(): 設(shè)置字符串的顏色-fontsize():設(shè)置字體的大小-link(): 將字符串顯示成超*str4.link( “hello.html ”)-sub()sup: 下標和上標與 java 相似的方法-concat():連接字符串var str1=”abc”;var

23、str2=”dfg”;document.write(str1.concat(str2);-charAt(): 返回值指定指定的位置的字符串*var str3= ”sdsadad”;doucument.write(str3.charAt(20);/ 字符位置不存在，返回空字符串-indexof(): 返回字符串位置* var str4= ”sfdsasd”;document.write(str4.indexof( “w”);/ 字符不存在， 返回值為 -1。split ():切分字符串，成數(shù)組*var str5= ”a-b-c-d”;var arr1 =str5.split( “-”);douc

24、ument .write( “l(fā)ength: ”+arr1.length);-replace(): 替換字符串傳遞 2 個參數(shù)：-第一個參數(shù)是原始數(shù)據(jù)-要替換成的字符*var str6= ”abcd”;document.write(str6);document.write( “ ”);document.write(str6.replace( “a”,”Q”);-substr()和 substring()*var str7= ”sadasfasdaf”;/document.write(str7.substr(5,5);/從第五個開始，向后截取五個字符。從第幾個開始，向后截取幾位document.

25、write( “ ”);document.write( “str7.substring(3,5) ”); / 從第幾位開始到第幾位結(jié)束。3,5）從第幾位開始，到第幾位結(jié)束，但是不包含最后那一位。2、 js 的 Array 對象創(chuàng)建數(shù)組（ 3 種）-var arr1=1,2,3;-var arr2= new Array(3);/ 長度為 3-var arr3=new Array （1，2， 3） ;/ 數(shù)組中的元素是123屬性： length: 查看數(shù)組的長度方法-contat 方法 : 數(shù)組的連接*var arr11=1,2,3;var arr12=4,5,6;doucument.write(

26、arr11.concat(arr12);join(): 根據(jù)指定的字符串分割數(shù)組*var arr13=new Array(3);arr130= ”a”;arr131= ”b”;arr132= ”c”;document.write(arr13);document.write( “) ”;document.write(arr13.join( “-”);-push():向數(shù)組末尾添加元素，返回數(shù)組的新的長度如果添加的是一個數(shù)組，這個時候把數(shù)組當作一個整體字符串加進去。*/ push 方法var arr14=new Array(3);arr140= ”tom ”;arr141= ”luck”;arr1

27、42= ”jack”;document.write( “ oldarray:”+arr14);document.write ( “ ”);document.write( “old length: ”+arr14.length);document.write ( “ ”);document.write(new length: +arr14.push( “zhangsan”);document.write ( “ ”);document.write( “new array: ”+arr14);var arr15= “aaa”,”bbb”,”ccc”;var arr16= “www ”,”qqq”;

28、document.write( “old array: ”+arr15);document.write ( “ ”);document.write( “old lenth: ”+arr15.length);document.write ( “ ”);document.write( “new length: ”+arr15.push(arr16);document.write ( “ ”);document.write ( “new array:”+arr15);for(var i=0;iarr15.length;i+)alert(arr15i)pop ():白哦是刪除最后一個元素，返回刪除的那

29、個元素*var arr17= “zhangsan”,”lisi”,”wangwu”,”zhaoliu”;doucument.write( “old array:”+arr17);doucument.write( “ ”);doucument.write( “return: ”arr17.pop();doucument.write( “ ”);doucument.write( “new array:”+arr17);-reverse():跌倒數(shù)組中的元素順序*var arr18= “zhangsan”,”lisi”,”wangwu ”,”zhaoliu”;doucument.write( “ol

30、d array: ”+arr18);doucument.write( “ ”);doucument.write( “new array: ”+arr18.reverse();*js里面獲取當前時間var data=new Data();/獲取當前時間var date=new Data()doucument.write (data);/ 轉(zhuǎn)換成習慣的格式doucument.write(“ ”);document.write (data.toLocaleString();獲取當前年的方法 getFullYear(); 得到當前的年*document.write( “year:”+data.getF

31、ullYear();獲取當前年的方法getMonth(); 得到當前月* 返回的是 0-11 月，如果想得到準確的值，加1var data1= data.getMonth()+1;document.write( “month: ”+data1);獲取當前星期的方法getDay():星期，返回的是（06）獲取當前日的方法getData(): 得到當前的天1-31document.write( “day:”+data.getDate();獲取當前小時getHours():獲取小時document.write( “hour:”+data.getHours();獲取當前分鐘getMinutes():獲

32、取分鐘document.write( “minute: ”+data.getMinutes();獲取當前秒getSeconds():獲取秒document.write( “second:”+data.getSeconds();獲取毫秒數(shù)getTime()/ 返回的是 197011 至今的毫秒數(shù)應(yīng)用場景：使用毫秒數(shù)處理緩存的效果（不含有緩存）3、 js 的 Math 對象數(shù)學(xué)的運算里面的都是靜態(tài)方法，使用可以直接私用Math. 方法（）*ceil(x):向上舍入* floor(x):向下舍入*round(x):四舍五入*random():得到的隨機數(shù)（偽隨機數(shù)）-得到 0-9 的隨機數(shù)Math.

33、random()*10Math.floor(Math.random()*10);4、 js 的全局函數(shù)由于不屬于任何以惡搞對象，直接寫名稱就可以使用*eval();執(zhí)行 js 代碼（如果字符串是一個js 代碼，使用方法直接執(zhí)行）eval(str);*encodeURL() 和 decodeURLencodeURLComponent()和 decodeURLponent()isNaN(): 判斷當前字符串是否是數(shù)字-var str2=”aaaaaa”; alert(isNaN(str2();如果是數(shù)字，返回 false如果不是數(shù)字，趕回 true*parseInt(): 類型轉(zhuǎn)換var str3

34、= ”123”; document.write(parseInt(str3)+1);5、 js 的函數(shù)的重載什么事重載？方法名相同，參數(shù)不同*js 的重載是否存在？不存在調(diào)用最后的一個方法把傳遞的參數(shù)保留到 arguments 數(shù)組里面*js 里面是否存在重載？js 里面不存在重載。但是可以通過其他方法模擬重載（通過aruguments 數(shù)組來實現(xiàn)）*function add1() 比如傳遞的是 2 個參數(shù)If(arguments.length=2)return arguments0+arguments1;else if(arguments.length=3) Return arguments

35、0+arguments1+arguments2;else if(arguments.length=4) Return arguments0+arguments1+arguments2+arguments3; else return 0;6、 js 的 bom 對象*bom:browserobject model : 瀏覽器對象模型navigator: 獲取客戶機的信息（瀏覽器的信息）-navigator.appName-document.write(navigator.appName);*screen: 獲取屏幕信息-document.write(screen.width);dcument.w

36、rite( “ ”);document.write(screen.height);*lacation: 請求 url 地址-href 屬性獲取到請求的 URL的地址-document.write(location.href);設(shè)置 url 地址- document.write(location.href);* 設(shè)置 url 地址-頁面上安置一個按鈕， 按鈕上綁定一個事件， 當我點擊這個按鈕，頁面可以跳轉(zhuǎn)到另外一個頁面-location.href= ”hello.html ”;*history: 請求的 url 的歷史紀錄創(chuàng)建 3 個頁面創(chuàng)建第一個頁面 a.html 寫一個超到 b.html創(chuàng)建

37、 b.html 超到 c.html創(chuàng)建 c.html-到訪問的上一個頁面 history.back(); history.go(-1); -到訪問的下一個頁面 history.forward(); history.go(1);*window(*)窗口對象頂層對象（所用的 Bom 對象都是在 windom 里面的操作）方法-window.alert():頁面會彈出一個框，顯示內(nèi)容簡寫 alert()-confirm() 確認框var flag=windom.confirm( “顯示的內(nèi)容 ”);-prompt(): 輸入的對話框- mpt( “please input : ”,”0”);-mpt

38、( “在顯示的內(nèi)容 ”,”輸出框里面的默認值”);-open(): 打開一個新的窗口*open( “打開的新窗口的地址url ”,”,窗口特征，比如窗口的寬度和高度”)-創(chuàng)建一個按鈕，點擊這個按鈕，打開一個新的窗口。-windom.open( “hello.html ”,”,width=200,height=100 ”);-close(): 關(guān)閉窗口（瀏覽器兼容差）-windom.close();做定時器* setInterval( “js 代碼 ”,”毫秒數(shù) ”)表示每 3 秒，執(zhí)行一次 alert 方法。window.setInterval( “alert(123);”,3000”)*se

39、tTime( “js 代碼 ”,”毫秒數(shù) ”)1 秒 =1000 毫秒表示在毫秒數(shù)之后執(zhí)行，但是只會執(zhí)行一次-表示 4 秒之后執(zhí)行js 代碼，只會執(zhí)行一次-window.setTimeout( “alert ”(abc);,4000);*clearInterval():清除 setInterval 設(shè)置的定時器var id1= setInterval( “alert ”(123);”,3000); 通過 setInterval 會有一個返回值clearInterval(id1);*clearTimeout(): 清除 setTimeout 設(shè)置的定時器var id2=setTime(“aler

40、t( abc);,4000);claerTimeout(id2);7、 js 的 dom 對象*dom: document object model:文檔對象模型文檔：超文本文檔（超文本標記文檔）html 、xml對象：提供了屬性和方法模型：使用屬性和方法操作超文本標記型文檔可以使用 js 里面的 dom 里面提供的對象，使用這些對象的屬性和方法，對標記型文檔進行操作想要對標記型進行操作，首先需要對標記型文檔里面所有內(nèi)容封裝成對象需要把 html 里面的標簽，屬性，文檔內(nèi)容都封裝成對象要想對標記型文檔進行操作，解析標記型文檔畫圖分析，如何使用 dom 解析 html* 解析過程根據(jù) html

41、的層級結(jié)構(gòu)，在內(nèi)存中分配一個樹形結(jié)構(gòu)，需要把html 中的每部分都封裝成對象document對象：整個文檔element 對象：標簽對象-屬性對象-文本對象-Node 節(jié)點對象：這個對象是這些父對象* 如果在對象里面找不到想要的方法，這個時候到Node 對象里面去找。8、 document 對象表示整個文檔* 常用方法*write() 方法 :1） 向頁面輸出變量（值）2） 向頁面輸出 html 代碼-var str =”abc”;document.write(str);document.write( “ ”);* getElementById();-通過 id 得到元素（標簽）.-/ 使用

42、getElementById 得到 input 標簽Var intput1=document.getElentById( “nameid”);/ 傳遞的參數(shù)是標簽里面的id 的值/得到 input 里面 value 值Input1.value= ”bbbbb ”;*getElementsByName();-通過標簽的 name 的屬性值得到標簽-返回的是一個集合（數(shù)組）-/ 使用 getElementsByName 得到 input 標簽var inputs=document.getElementsByName( “name1”);/ 傳遞的參數(shù)標簽里面的name 的值/alert(input

43、s.length);/遍歷數(shù)組for(var i=0;iinputs.length;i+) / 通過遍歷數(shù)組，得到標簽里面的var input1=inputsi;/ 每次循環(huán)得到input 對象，賦值到input1 里面alert(input1.value);/ 得到每個 input 標簽里面的value 值* getElementsByTagName(“標簽名稱 ”);-通過標簽名得到元素-/ 演示 getElementsByTagNamevar inputs1=document.getElementsByTagName( “input ”);/ 傳遞的參數(shù)， 標簽名稱/alert(inpu

44、ts1.length);/ 遍歷數(shù)組，得到每個input 標簽for(var m=0;minputs1.length;m+) / 得到每個 input 標簽var input1=inputs1m;/ 得到 value 值alert(input1.value);*注意的地方* 只有一個標簽，這個標簽只能使用 name 獲取到，這個使用，使用 getElementsByName 返回的是一個數(shù)組， 但是現(xiàn)在只有一個元素， 這個時候不需要遍歷，而是可以直接通過數(shù)組的下標獲取到值/通過name 得到 input標簽varinputs2=document.getElementsByName( “name

45、11”0);alert(inputs2.value);varinputs=document.getElementsByTagName( “input ”)0;alert(inputs.value);9、 案例： window 彈窗案例-實現(xiàn)過程1、創(chuàng)建一個頁面有兩個輸出項和一個按鈕按鈕上面有一個事件：彈出一個新窗口 open 2、創(chuàng)建彈出頁面表格每一行有一個按鈕和編號和XX按鈕上有一個事件：把當前的編號的XX，賦值到第一個頁面相應(yīng)的位置*/實現(xiàn) s1 方法function s1 (num1,name1)需要把 num1 和 name1 賦值到 window 頁面跨頁面的操作 opener: 得

46、到創(chuàng)建這個窗口的窗口得到 window 頁面var pwin=window.opener; / 得到 window 頁面 pwin.document.getElementById( “numid ”).value=num1; pwin.document.getElementById( “nameid”).value=name1;關(guān)閉窗口window.close();opener:屬性，獲取創(chuàng)建當前窗口的窗口-做這個案例時候會有一個問題* 由于我們現(xiàn)在訪問的是本地文件，js 安全性， 谷歌瀏覽器安全級別很高，不允許訪問本地文件在實際開發(fā)中，沒有這樣的問題，實際中不可能訪問本地文件1、案例一：在末

47、尾添加節(jié)點第一步：獲取到ul 標簽第二步：創(chuàng)建li 標簽第三步：創(chuàng)建文本第四步：把文本添加到第五步：把里面添加到document.createElement( “標簽名稱 ”)方法document.createTextNode( “文本內(nèi)容 ”);li 下面，使用appendChild 方法。ul 末尾，使用appendChild 方法。2、元素對象（element對象）* 要操作對象，首先必須獲取到element ，使用document里面相應(yīng)的方法獲取* 方法獲取屬性里面的值getAttribute(“屬性名稱 ”)var input1=document.getElementById( “

48、inputid ”);/alert(input1.value);alert(input1.getAttribute(“value”);設(shè)置屬性的值input1.setAttribute( “classs”,”haha”);刪除屬性input1.removeAttribute( “name”);不能刪除 value想要獲取標簽下面的子標簽使用屬性 childNodes,但是這個屬性兼容性很差獲取標簽下面子標簽的唯一辦法，使用getElementsByTagName 方法-var ul11=document.getElementById( “ulid1 ”);獲取 ul 下面的子標簽var lis

49、=ul11.childNodes;alert(lis.length);var lis=ul11.getElementsByTagName(“l(fā)i”);alert(lis.length);3、 Node 對象屬性*nodeName*nodeType*nodeValue使用 dom 解析 html 的時候，需要 html 里面的標簽，屬性和文本都封裝成對象標簽節(jié)點對應(yīng)的值屬性節(jié)點對應(yīng)的值nodeType:2nodeName:屬性名稱nodeValue:屬性的值文本節(jié)點對應(yīng)的值nodeType:3nodeName:#textnodeValue: 文本內(nèi)容4、 Node 對象的屬性值二qqqqqqqw

50、wwwww父節(jié)點-ul 是 li 的父節(jié)點-parentNode-/ 得到 li1var li1=document.getElementById( “l(fā)i1”);得到 ulvar ul1=li1.parentNode;alert(ul1.id);子節(jié)點-li 是 ul 的子節(jié)點-childNodes:得到所以子節(jié)點，但是兼容性差-firstChild: 獲取第一個子節(jié)點-/ 獲取 ulvar ul1=document.getElementById( “ulid ”);第一個子節(jié)點var li1=ul1.firstChild;-lastChild:獲取最后一個子節(jié)點得到最后一個子節(jié)點var li

51、4=ul1.lastChild;alert(li4.id);同輩節(jié)點-li 直接關(guān)系是同輩節(jié)點-nextSibling:返回一個給定節(jié)點的下一個兄弟節(jié)點。previousSibling:返回一個給定節(jié)點的上一個兄的節(jié)點。-/ 獲取 li 的 id 的 li3 的上一個和下一個兄弟節(jié)點var li3=document.getElementById( “l(fā)i3”);/alert(li3.nextSibling.id);alert(li3.previousSibling.id);5、操作 dom 樹*appendChild 方法-添加子節(jié)點到末尾-特點：類似于剪切粘貼的效果*insertBefore(newNode,oldNode) 方法-在某個節(jié)點之間插入一個新的節(jié)點-兩個參數(shù)要插入的節(jié)點在誰之前插入-插入一個節(jié)點，節(jié)點不存在，創(chuàng)建1.創(chuàng)建標簽2.創(chuàng)建文本3.吧文本添加到標簽下面代碼function insert1()/*獲取到 li13 標簽創(chuàng)建 li創(chuàng)建文本把文本添加到 Li 下面獲取到 ul把 Li 添加到 ul 下面*/獲