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

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

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

4、圖片在 html 上一層的路徑，./ 加上圖片的名字。././表示上 2 層路徑。7、案例聯系* 原樣輸出標簽 8、超標簽（ *）資源頂部 href: 的資源的地址，里面的如果是空時”#”表示。target: 設置目標打開的方式 ，默認在當前頁打開。_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* 表格實現 居中加粗 標簽 表格標題寫著 table 里面* 表格標題標簽 *表示幾行。* 表示每行的單元格。表格技巧： 先數有幾行有幾行就有幾個 ，在數每行有多少個單元格 。合并單元格跨行 :rowspan=”幾行 ”跨列 :colspan=”幾列 ”10、表單標簽表示定義一個表單的X圍* form里面的屬性*action=”路徑 ”數據跳到頁面。*method=”請求的方式 ”有以下2 種。1.g

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

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

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

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

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

11、路徑 )；-第一步，創建一個css 文件improt url (div.css);*. 使用頭標簽link，引入外部 css文件第一步，創建一個css文件-第三種結合方式，缺點：在某些瀏覽器下不起作用，一般使用第四種方式。優先級（一般情況）由上到下，由外到內，優先級由低到高。后加載的優先級高。格式選擇器名稱 屬性名 :屬性值 ;屬性名 :屬性值 ;.3、 css 的基本選擇器（ 3 種）要對哪個標簽里面的數據進行操作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;優先級Styleid 選擇器 Class選擇器 標簽選擇器4、 css 的擴展選擇器關聯選擇器* wwwwwwwww設置 div 標簽里面的 P 標簽，嵌套標簽里面的樣式*div p Background-color: green;組合選擇器*111111111222222222222把 div 和 p 標簽設置成相同的樣式，把不同的標簽設置相同的樣式*div,pBackground-

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

14、adding -leftpadding -right外邊距Margin:20px margin: 統一設置上 margin -topmargin -bottommargin -leftmargin -right6、 css 的布局的漂浮（了解）float:屬性值Left: 文本流向對象的右邊。Right:文本流向對象的左邊。7、 css 的布局的定位（了解）position:屬性值absolute:將對象從分檔流中拖出。可以是 top 、bottom 等屬性進行定位。relative:不會將對象從分檔流中拖出。可以是 top 、bottom 等屬性進行定位。8、案例圖文混排案例圖片和文字在一起

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

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

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

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

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

20、里面元素3 4 5 .數組里面有一個屬性 Length: 獲取數組的長度。數組可以存放不同的數據類型的數據。7、 js 的函數*js 里定義函數方法有三種方式函數的參數列表里面，不需要寫 var，直接寫參數名稱第一種方式：使用到一個關鍵字 function*function方法名（參數列表）方法體 ;返回值可有可無使用第一種方式創建函數function test()alert( “qqqq”);調用方法/test();定義一個有參數的方法實現 2 個數的相加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);第二種方式：匿名函數var add= function( 參數列表 ) 方法體和返回值 ;代碼var add3=function(m,n) aler (m+n);調用方法add (5,6);8、 js 的全局變量和局部變量* 全局變量：在script標簽里面定義一個變量，這個變量在頁面中js 部分都可以使用*在放外部使用，在方法內部使用，在另外一個script 標簽中使用局部變量：在方法內部定義一個變量，只能在方法內部使用-游覽器自帶調試工具F12.9、 script 標簽放的位置

22、* 建議把 script 標簽放到 后面。10 丶 js 的重載什么是重載？方法名相同，參數列表不同Js 是否有重載？1、 js 的 String 對象創建 String 對象var str= ”abc”;方法和屬性（文檔）屬性 length: 字符串的長度方法與 html 相關的方法-bold(): 加粗-fontcolor(): 設置字符串的顏色-fontsize():設置字體的大小-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 ():切分字符串，成數組*var str5= ”a-b-c-d”;var arr1 =str5.split( “-”);douc

24、ument .write( “length: ”+arr1.length);-replace(): 替換字符串傳遞 2 個參數：-第一個參數是原始數據-要替換成的字符*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) ”); / 從第幾位開始到第幾位結束。3,5）從第幾位開始，到第幾位結束，但是不包含最后那一位。2、 js 的 Array 對象創建數組（ 3 種）-var arr1=1,2,3;-var arr2= new Array(3);/ 長度為 3-var arr3=new Array （1，2， 3） ;/ 數組中的元素是123屬性： length: 查看數組的長度方法-contat 方法 : 數組的連接*var arr11=1,2,3;var arr12=4,5,6;doucument.write(

26、arr11.concat(arr12);join(): 根據指定的字符串分割數組*var arr13=new Array(3);arr130= ”a”;arr131= ”b”;arr132= ”c”;document.write(arr13);document.write( “) ”;document.write(arr13.join( “-”);-push():向數組末尾添加元素，返回數組的新的長度如果添加的是一個數組，這個時候把數組當作一個整體字符串加進去。*/ 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():跌倒數組中的元素順序*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);/ 轉換成習慣的格式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();獲取毫秒數getTime()/ 返回的是 197011 至今的毫秒數應用場景：使用毫秒數處理緩存的效果（不含有緩存）3、 js 的 Math 對象數學的運算里面的都是靜態方法，使用可以直接私用Math. 方法（）*ceil(x):向上舍入* floor(x):向下舍入*round(x):四舍五入*random():得到的隨機數（偽隨機數）-得到 0-9 的隨機數Math.

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

34、= ”123”; document.write(parseInt(str3)+1);5、 js 的函數的重載什么事重載？方法名相同，參數不同*js 的重載是否存在？不存在調用最后的一個方法把傳遞的參數保留到 arguments 數組里面*js 里面是否存在重載？js 里面不存在重載。但是可以通過其他方法模擬重載（通過aruguments 數組來實現）*function add1() 比如傳遞的是 2 個參數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);設置 url 地址- document.write(location.href);* 設置 url 地址-頁面上安置一個按鈕， 按鈕上綁定一個事件， 當我點擊這個按鈕，頁面可以跳轉到另外一個頁面-location.href= ”hello.html ”;*history: 請求的 url 的歷史紀錄創建 3 個頁面創建第一個頁面 a.html 寫一個超到 b.html創建

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

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

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

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

41、的層級結構，在內存中分配一個樹形結構，需要把html 中的每部分都封裝成對象document對象：整個文檔element 對象：標簽對象-屬性對象-文本對象-Node 節點對象：這個對象是這些父對象* 如果在對象里面找不到想要的方法，這個時候到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”);/ 傳遞的參數是標簽里面的id 的值/得到 input 里面 value 值Input1.value= ”bbbbb ”;*getElementsByName();-通過標簽的 name 的屬性值得到標簽-返回的是一個集合（數組）-/ 使用 getElementsByName 得到 input 標簽var inputs=document.getElementsByName( “name1”);/ 傳遞的參數標簽里面的name 的值/alert(input

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

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

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

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

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

48、inputid ”);/alert(input1.value);alert(input1.getAttribute(“value”);設置屬性的值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(“li”);alert(lis.length);3、 Node 對象屬性*nodeName*nodeType*nodeValue使用 dom 解析 html 的時候，需要 html 里面的標簽，屬性和文本都封裝成對象標簽節點對應的值屬性節點對應的值nodeType:2nodeName:屬性名稱nodeValue:屬性的值文本節點對應的值nodeType:3nodeName:#textnodeValue: 文本內容4、 Node 對象的屬性值二qqqqqqqw

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

51、4=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.吧文本添加到標簽下面代碼function insert1()/*獲取到 li13 標簽創建 li創建文本把文本添加到 Li 下面獲取到 ul把 Li 添加到 ul 下面*/獲