自定義列表

    <dl></dl>：表示列表的范圍

        **在里面 <dt></dt>：上層內(nèi)容

        **在里面 <dd></dd>：下層內(nèi)容

 

有序列表

    <ol></ol>：有序列表的范圍

        --屬性 type：設(shè)置排序方式，1(默認(rèn)),a,i、、

        **在ol標(biāo)簽里面 <li>具體內(nèi)容</li>

   

無(wú)序列表

    <ul></ul>：無(wú)序列表的范圍

        --屬性 type：circle(空心圓)、disc(默認(rèn)的實(shí)心圓)、square(實(shí)心方塊)

        **在ul標(biāo)簽里面 <li>具體內(nèi)容</li>

 

圖像標(biāo)簽

    --屬性：src、width、height、alt(圖片上顯示的文字，把鼠標(biāo)移動(dòng)到圖片上，停留片刻顯示內(nèi)容 或者是圖片顯示出錯(cuò)時(shí)顯示的文字，但有些瀏覽器不顯示，沒(méi)有效果)

        ** <img src="圖片的路徑"/>

 

路徑的介紹

    *分類(lèi)：兩類(lèi)

    **絕對(duì)路徑 eg. http://www.baidu.com/b.jpg

    ***三種相對(duì)路徑 一個(gè)文件相對(duì)于另外一個(gè)文件的位置

        --html文件和圖片在同一個(gè)路徑(目錄)下，可以直接寫(xiě)文件名稱(chēng)

        --在html文件中，使用與其在同一個(gè)路徑下的img文件夾下的a.jpg文件 使用方法：img\a.jpg

            **d:\htmlstudy\code\4.html

            **d:\htmlstudy\code\img\a.jpg

        --圖片在html文件的上層目錄中，此時(shí)圖片使用方法：../c.png     ../表示上層路徑    

               

超鏈接標(biāo)簽

    **鏈接資源

    -- <a href="鏈接到資源的路徑">顯示在頁(yè)面上的內(nèi)容</a>

        **href：鏈接的資源的地址

        **target：設(shè)置打開(kāi)的方式，默認(rèn)是在當(dāng)前頁(yè)打開(kāi)

            --_blank ：在一個(gè)新窗口打開(kāi)

            --_self ：在當(dāng)前頁(yè)打開(kāi) 默認(rèn)的

    --<a href="#">鏈接標(biāo)題</a>：當(dāng)超鏈接不需要跳轉(zhuǎn)到頁(yè)面時(shí)，在href中添加#（占位符）就可以了

    **定位資源

        --如果想要定位資源：定義一個(gè)位置

            <a name="top">頂部</a>

        --回到這個(gè)位置

                <a href="#top">回到頂部</a>

               

        --原樣輸出標(biāo)簽：<pre>需要原樣輸入的內(nèi)容</pre>

           

表格標(biāo)簽

    *作用：可以對(duì)數(shù)據(jù)進(jìn)行格式化，使數(shù)據(jù)顯示更加清晰

    *屬性 border(表格線粗細(xì)) bordercolor(表格線顏色) cellspacing(單元格間距離) width height

    *<table></table> ： 表示表格的范圍

    **在table里面，表示一行 <tr></tr>

    --設(shè)置對(duì)齊方式 align ：left center right

        ***在tr里面，表示一行里邊的單元格 <td></td>

        **使用th也可以表示單元格：表示可以實(shí)現(xiàn)居中和加粗

    *表格的標(biāo)題，放在table里邊 <caption></caption>

    *操作技巧：

        **首先數(shù)有多少行，在數(shù)每行里面有多少個(gè)單元格   

    *合并單元格

        **rowspan ：跨行（縱向合并）

            <td rowspan="3" align="center">13</td>

        **colspan ：跨列（橫向合并）

            <td colspan="3" align="center">表格練習(xí)</td>

 

表單標(biāo)簽

*例如注冊(cè)開(kāi)心網(wǎng)時(shí)，可以提交數(shù)據(jù)到開(kāi)心網(wǎng)的服務(wù)器，這個(gè)過(guò)程可以使用表單標(biāo)簽實(shí)現(xiàn)

* <form></form> ：定義一個(gè)表單范圍

*屬性：

        ** action ：提交到的地址，默認(rèn)提交到 當(dāng)前的頁(yè)面

        ** method ： 表單的提交方式

            --常用的有兩種： get 和 post ，默認(rèn)是get請(qǐng)求

        ** get 和 post 的區(qū)別

            1）get請(qǐng)求地址欄會(huì)攜帶提交的數(shù)據(jù)，post不會(huì)攜帶（數(shù)據(jù)在請(qǐng)求體里面）

            2）get請(qǐng)求安全級(jí)別較低，post較高

            3）get請(qǐng)求數(shù)據(jù)大小有限制，post沒(méi)有限制

        ** enctype ：一般請(qǐng)求下不需要這個(gè)屬性，做文件上傳時(shí)候需要設(shè)置這個(gè)屬性

    **輸入項(xiàng)：可以輸入內(nèi)容或者選擇內(nèi)容的部分

        --大部分的輸入項(xiàng)可使用 <input type="輸入項(xiàng)類(lèi)型"/>

        ********在輸入項(xiàng)里面需要有一個(gè)name屬性

 

        ***普通輸入項(xiàng)：<input type="text"/>

        ***密碼輸入項(xiàng)：<input type="password"/>

        ***單選輸入項(xiàng)：<input type="radio"/>

            --在里邊需要屬性 name

            --name的屬性值必須要相同

            --必須要有一個(gè)value值

            ****實(shí)現(xiàn)默認(rèn)選中的屬性

                ***checked="checked"

        ***復(fù)選輸入項(xiàng)：<input type="checkbox"/>

            **在里邊需要屬性 name

            **name的屬性值必須要相同

            **必須要有一個(gè)value值

            ****實(shí)現(xiàn)默認(rèn)選中的屬性

                ----checked="checked"

        ***文件輸入項(xiàng)：<input type="file"/>

        ***下拉輸入項(xiàng)（不是在input標(biāo)簽里面的）

            <select name="birth">

                <option value="0">請(qǐng)選擇</option>

                <option value="1991">1991</option>

                <option value="1992">1992</option>

                <option value="1993">1993</option>

            </select>

            ****實(shí)現(xiàn)默認(rèn)選中的屬性

                ----selected="selected"

        *** 文本域（如：注冊(cè)賬號(hào)時(shí)填寫(xiě)個(gè)人信息簡(jiǎn)介的方框）

            <textarea cols="5" rows="20"></textarea>

        ***隱藏項(xiàng)（不會(huì)顯示在頁(yè)面上，但是存在于 html代碼里面）

            <input type="hidden"/>

        ***提交按鈕

            <input type="submit"/>

            <input type="submit" value="按鈕標(biāo)題"/>

            --提交之前地址：C:\Users\HappyDog\Desktop\index.html   

            **當(dāng)在輸入項(xiàng)里面寫(xiě)了name屬性之后

            --file:///c:/users/happydog/desktop/index.html?phone=123123&pwd=12321312&sex=man&love=y&love=pp&birth=1992&tex=1231245

 

            **?輸入項(xiàng)name的值=輸入的值&

            **參數(shù)類(lèi)似于key-value形式

 

        ***使用（點(diǎn)擊）圖片來(lái)提交

            <input type="image" src="圖片路徑"/>

 

        ***重置按鈕 ：回到輸入項(xiàng)的初始狀態(tài)

            <input type="reset"/>

            <input type="reset" value="按鈕標(biāo)題"/>

 

        ***普通按鈕（和js在一起使用的）

            <input type="button" value=""/>

 

案例：使用表單標(biāo)簽實(shí)現(xiàn)注冊(cè)頁(yè)面

    表格單元格內(nèi)容為空時(shí)，一般用占位符（&nbsp;(轉(zhuǎn)義空格)）來(lái)填充

 

html中的其他的常用標(biāo)簽的使用

    ** b(加粗) s(刪除線) u(下劃線) i(斜體) pre(原樣輸出) sub(下標(biāo)) sup(上標(biāo)) div(自動(dòng)換行) span(在一行顯示) p(段落標(biāo)簽)   

 

html的頭標(biāo)簽的使用

    **html兩部分組成 head 和 body

    **在head里面的標(biāo)簽就是頭標(biāo)簽

    **title標(biāo)簽：表示在標(biāo)簽上顯示的內(nèi)容

    **<meta>標(biāo)簽 ：設(shè)置頁(yè)面的一些相關(guān)內(nèi)容

        --<meta name="keywords" content="" />

        --<meta http-equiv="refresh" content="10;url=Test_form.html" />定時(shí)跳轉(zhuǎn)到指定頁(yè)面

    **base標(biāo)簽 ：設(shè)置超鏈接的基本的設(shè)置

        --可以統(tǒng)一設(shè)置超鏈接的打開(kāi)方式 <base target="_blank" />

    **link標(biāo)簽 ：引入外部文件

 

框架標(biāo)簽的使用

    **<frameset>

        **rows ：按照行進(jìn)行劃分

            <frameset rows="80,*"> 分成上下兩部分，上邊80，下邊任意

        **cols ：按照列進(jìn)行劃分

            <frameset cols="80,*"> 分成左右兩部分，左邊80，右邊任意

    **<frame> 具體顯示的頁(yè)面

        **<frame name="lower_left" src="b.html">

    *使用框架標(biāo)簽的時(shí)候，不能寫(xiě)在head和body里面，使用了框架標(biāo)簽，需要把body去掉，寫(xiě)在head外邊

 

    *如果在左邊的頁(yè)面超鏈接，想讓內(nèi)容顯示在右邊的頁(yè)面中，可以設(shè)置超鏈接里面的target屬性，將target的值設(shè)置為框架中的名字

        **<a target="right">百度</a><br/>

    <frameset rows="80,*">

        <frame name="top" src="a.html">

        <frameset cols="120,*">

            <frame name="left" src="b.html">

            <frame name="right" src="http://www.baidu.com">

        </frameset>

    </frameset>

知識(shí)總結(jié)

    1）html操作思想：使用標(biāo)簽把要操作的數(shù)據(jù)包起來(lái)，通過(guò)修改標(biāo)簽的屬性值，來(lái)實(shí)現(xiàn)標(biāo)簽內(nèi)數(shù)據(jù)樣式的變化

    2）font標(biāo)簽 屬性：size 取值范圍1-7 color：十六進(jìn)制數(shù) #ffffff

    3）標(biāo)題標(biāo)簽 <h1></h1>......<h6></h6> ：從h1到h6字體越來(lái)越小，自動(dòng)換行

    4）注釋

 

CSS的簡(jiǎn)介

    **CSS：層疊樣式表

        ** 層疊：一層一層的

        ** 樣式表：很多的屬性和屬性值

    **使頁(yè)面顯示效果更加好

    **CSS將網(wǎng)頁(yè)內(nèi)容和顯示樣式進(jìn)行分離，提高了顯示功能

 

CSS和html的結(jié)合方式（四種結(jié)合方式）

    1）在每個(gè)html標(biāo)簽上面都有一個(gè)屬性 style，把CSS和html結(jié)合在一起

        -- <div style="background-color:red;color:green;" id="" class="" >天之道，損有余而補(bǔ)不足，是故虛勝實(shí)，不足勝有余。</div>

    2）使用html的一個(gè)標(biāo)簽實(shí)現(xiàn) <style>標(biāo)簽，寫(xiě)在head里面

        -- <style type="text/css">

                css代碼;

         </style>

 

    ----代碼實(shí)現(xiàn)<head>   

                <style type="text/css">

                    div{

                        background-color:blue;

                        color:red;

                    }       

                </style>

                </head>

                <body>   

                    <div id="" class="">

                        天之道，損有余而補(bǔ)不足，是故虛勝實(shí)，不足勝有余。

                    </div>

                </body>

    3）在style標(biāo)簽里面 使用語(yǔ)句

        @import url(css文件的路徑)；

               

        -- 第一步：創(chuàng)建一個(gè)css文件

        ---- <style type="text/css">

                @import url(div.css);

         </style>

    4）使用頭標(biāo)簽 link，引入外部css文件 放在<head></head>里邊

        -- 第一步：創(chuàng)建一個(gè)css文件

        -- <link rel="stylesheet" type="text/css" href="css文件的路徑"/>

    ****第三種結(jié)合方式的缺點(diǎn)：在某些瀏覽器下不起作用，一般使用第四種方式

    ****優(yōu)先級(jí)（一般）

        由上到下，由內(nèi)到外，優(yōu)先級(jí)由低到高。

        后加載的優(yōu)先級(jí)高

    ****格式：選擇器名稱(chēng){屬性名:屬性值;屬性名:屬性值;......}

 

css的基本選擇器（三種）

    **要對(duì)那個(gè)標(biāo)簽里面的數(shù)據(jù)進(jìn)行操作

    1）標(biāo)簽選擇器 div {css代碼}

        --使用標(biāo)簽名作為選擇器的名稱(chēng)

        <head>   

            <style type="text/css">

                div{

                    background-color:blue;

                    color:red;

                }   

            </style>

        </head>

        <body>

            <div>aaaaaa</div>

         </body>

    2）class選擇器 .名稱(chēng) {}

        **每個(gè)html標(biāo)簽都有一個(gè)屬性 class

        **<head>   

                <style type="text/css">

                    div.test{

                        background-color:blue;

                        color:red;

                    }   

                    p.test{

                        background-color:blue;

                        color:red;

                    }

            可以簡(jiǎn)寫(xiě)為：

                    .test{

                        background-color:blue;

                        color:red;

                    }

                </style>

         </head>

        **<body>

            <div class="test">aaaaaa</div>

            <p class="test">bbbbbbbbb</p>

         </body>   

    3）id選擇器 #名稱(chēng) {}

        **每個(gè)html標(biāo)簽上面都有一個(gè)屬性 id

        --<div id="test">cccccccccc</div>

        --<head>   

                <style type="text/css">

                    div#test{

                        background-color:blue;

                        color:red;

                    }   

                    p#test{

                        background-color:blue;

                        color:red;

                    }

            可以簡(jiǎn)寫(xiě)為：

                    #test {

                        background-color:blue;

                        color:red;

                    }

                </style>

         </head>

        --<body>

            <div id="test">aaaaaa</div>

            <p id="test">bbbbbbbbb</p>

         </body>

    **優(yōu)先級(jí) style > id選擇器 > class選擇器 > 標(biāo)簽選擇器

 

css的擴(kuò)展選擇器(了解)

    1）關(guān)聯(lián)選擇器 嵌套標(biāo)簽的樣式的設(shè)置

        **<div><p>wwwwwwwwww</p></div>

        **設(shè)置div標(biāo)簽里面p標(biāo)簽的樣式，嵌套標(biāo)簽里面的樣式

        --<head>   

                <style type="text/css">

                    div p {

                        background-color:blue;

                        color:red;

                    }    

                </style>

         </head>

        --<body>

            <div><p>wwwwwwwwww</p></div>

            <p>aaaaaa</p>

         </body>

    2）組合選擇器 不同標(biāo)簽設(shè)置相同的樣式

        **<div>1111</div>

         <p>2222</p>

        **把div和p標(biāo)簽設(shè)置成相同的樣式，把不同的標(biāo)簽設(shè)置成相同的樣式

        --<head>   

                <style type="text/css">

                    div,p {

                        background-color:blue;

                        color:red;

                    }    

                </style>

         </head>

        --<body>

            <div>1111</div>

            <p>2222</p>

         </body>

    3）偽（類(lèi)）元素選擇器

        ** css里面提供了一些定義好的樣式，可以拿過(guò)來(lái)使用

        **比如 超鏈接

            **超鏈接的狀態(tài)

                --原始狀態(tài) 鼠標(biāo)放上去 點(diǎn)擊 點(diǎn)擊之后

                 :link :hover :active :visited

        代碼實(shí)現(xiàn)：       

        <head>   

                <style type="text/css">

                    /*原始狀態(tài)*/

                    a:link {

                        background-color:red;

                    }

                    /*懸停狀態(tài)*/

                    a:hover {

                        background-color:green;

                    }

                    /*點(diǎn)擊狀態(tài)*/

                    a:active {

                        background-color:blue;

                    }

                    /*點(diǎn)擊之后狀態(tài)*/

                    a:visited {

                        background-color:gray;

                    }                               

                </style>

         </head>

        <body>

            <a >點(diǎn)擊鏈接到百度網(wǎng)頁(yè)</a>

        </body>   

 

css的盒子模型(了解) 對(duì)數(shù)據(jù)進(jìn)行操作，需要把數(shù)據(jù)放到一個(gè)區(qū)域里面（div）

    1）邊框 border ：統(tǒng)一設(shè)置

            也可以分別設(shè)置：上 border-top 下：border-bottom 左：border-left 右：border-right

        --<head>   

                <style type="text/css">

                    div {

                        width: 200px;

                        height: 100px;

                        border: 2px solid blue;

                    }

                    #div12 {

                        border-right: 2px dashed yellow;

                    }

                </style>

         </head>

        --<body>

            <div id="div11">AAAAAAAAA</div>

            <div id="div12">BBBBBBBBB</div>

         </body>

    2) 內(nèi)邊距 padding ：統(tǒng)一設(shè)置 內(nèi)容距離上下左右四條邊的距離

            也可以分別設(shè)置：上下左右

        <head>   

                <style type="text/css">

                    div {

                        width: 200px;

                        height: 100px;

                        border: 2px solid blue;

                    }

                    #div21 {

                        padding: 20px;

                    }

                    #div22 {

                        padding-left: 30px;

                    }

                </style>

         </head>

        <body>

            <div id="div21">AAAAAAAAA</div>

            <div id="div22">BBBBBBBBB</div>

         </body>

    3) 外邊距 margin ：統(tǒng)一設(shè)置 div距離最外邊四條邊的距離

                也可以分別設(shè)置：上下左右。。。

 

css的布局的漂?。私猓?float ：left right

 

css的布局的定位 (了解)

    *position

        **屬性值：

            --static：默認(rèn)值，無(wú)特殊定位

            --absolute：

                將對(duì)象從文檔流中拖出，使用left,right,top,bottom等屬性相對(duì)于其進(jìn)行絕對(duì)定位

            --relative：不會(huì)將對(duì)象從文檔流中拖出，對(duì)象不可層疊，但將依據(jù)left,right,top,bottom等屬性在正常文檔流中偏移位置。

 

案例：圖文混排案例

    **圖片和文字在一起顯示

案例：圖像簽名

 

javascript的簡(jiǎn)介：是基于對(duì)象和事件驅(qū)動(dòng)的腳本語(yǔ)言，主要應(yīng)用在客戶(hù)端

    *基于對(duì)象：提供好了很多對(duì)象，可以直接拿過(guò)來(lái)使用

    *事件驅(qū)動(dòng)：html做網(wǎng)站靜態(tài)效果，javascript動(dòng)態(tài)效果

    *客戶(hù)端：專(zhuān)門(mén)指的是瀏覽器

    * js的特點(diǎn)：

        1）交互性 信息的動(dòng)態(tài)交互

        2）安全性 js不能訪問(wèn)本地磁盤(pán)的文件

        3）跨平臺(tái)性 java里面跨平臺(tái)性，虛擬機(jī)；只要能夠支持js的瀏覽器，都可以運(yùn)行

   

    *javascript和java的區(qū)別：兩者之間沒(méi)有什么任何關(guān)系

        1）java是sun公司，現(xiàn)在是Oracle；js是網(wǎng)景公司

        2）java是面向?qū)ο蟮?，js是基于對(duì)象的

        3）java是強(qiáng)類(lèi)型的語(yǔ)言，js是弱類(lèi)型的語(yǔ)言

            --比如：java里面 int i = "10";會(huì)報(bào)錯(cuò)

            --js: var i = 10; var i = "10";都不報(bào)錯(cuò)

        4）js只需要解析就可以執(zhí)行，而java需要先編譯成字節(jié)碼文件，在執(zhí)行

 

    *js的組成（三部分）：

        1）ECMAScript

            -- ECMA ：歐洲計(jì)算機(jī)協(xié)會(huì)

            --由ECMA組織制定的js語(yǔ)法，語(yǔ)句...

        2）BOM

            --broswer object model:瀏覽器對(duì)象模型

        3）DOM

            --document object model：文檔對(duì)象模型

           

js與html的結(jié)合方式（兩種）

    1）使用一個(gè)標(biāo)簽 <script type="text/javascript"> js代碼；</script>

 

    2）使用script標(biāo)簽，引入一個(gè)外部的js文件

        -- 創(chuàng)建一個(gè)js文件，寫(xiě)js代碼

        -- <script type="text/javascript" src="js的路徑"></script>

    注意：使用第二種方式的時(shí)候，就不要在script標(biāo)簽里面寫(xiě)js代碼了，不會(huì)執(zhí)行

 

js的原始類(lèi)型和聲明變量

    *java的基本數(shù)據(jù)類(lèi)型：byte short int long float double char bolean

    *js定義變量 都是用關(guān)鍵字 var

    *js的原始類(lèi)型（五個(gè)）

        --string 字符串 var str = "abc";

        --number 數(shù)字類(lèi)型 var m = 123;

        --boolean true和false var flag = true;

        --null var date = new Date();

            **獲取對(duì)象的引用，null表示對(duì)象引用為空，所有對(duì)象的引用也是object

        --undifined 定義一個(gè)變量，但是沒(méi)有賦值 var aa;

    * typeof(變量名稱(chēng)) 查看當(dāng)前變量的數(shù)據(jù)類(lèi)型

   

js的語(yǔ)句

    **java里面的語(yǔ)句 if判斷("="表示賦值；"=="等于，表示判斷) switch語(yǔ)句 循環(huán)語(yǔ)句（for while do-while）

    **js里面的這些語(yǔ)句

        --if判斷語(yǔ)句

        --switch(a) {

            case 5: ...

                    break;

            case 6: ...

                    break;

            default:...

            ........

        }

    **循環(huán)語(yǔ)句 for while do-while

        --var i = 5;

         while(i>0) {

            alert(i);

            i--;

         }

        --for(var i = 0;i<=5;i++){

            alert(i);

        }

 

js的運(yùn)算符

    **js里面不區(qū)分整數(shù)和小數(shù)

        --var j = 123;

         alert(j/1000*1000);

         ** j/1000*1000 在java里面得到結(jié)果是0

         ** 在js里面不區(qū)分整數(shù)和小數(shù)， 123/1000*1000 = 0.123*1000 = 123

    **字符串的相加和相減的操作

        --var str = "123";

         alert(str + 1); 在java和js中的結(jié)果都是1231，做的是字符串的連接

         alert(str - 1); 相減時(shí)候，執(zhí)行減法的運(yùn)算，如果str中不是數(shù)字，會(huì)提示NaN：表示不是一個(gè)數(shù)字

    **boolean類(lèi)型也可以操作

        ***如果設(shè)置成true，相當(dāng)于這個(gè)值是1；如果設(shè)置成false，相當(dāng)于這個(gè)值是0；

    ** == 和 === 區(qū)別

        **都是做判斷

        ** == 比較的只是值； === 比較的是值和類(lèi)型

    **直接向頁(yè)面輸出的語(yǔ)句（可以把內(nèi)容顯示在頁(yè)面上），可以向頁(yè)面輸出變量，固定值和html代碼。Document.write("") 里面是雙引號(hào)，如果設(shè)置標(biāo)簽的屬性需要使用單引號(hào)。

        -- document.write("aaaa");

        -- document.write("<hr/>");

            ***document.write("<table border='1' bordercolor='red'>");

            ***document.write("</table>");

練習(xí)：實(shí)現(xiàn)99乘法表

 

js的數(shù)組

    *java里面的數(shù)組 定義 int[] arr = {1,2,3};

    *js數(shù)組的定義方式（三種）

        1）var arr = [1,2,3];var arr = [1,"2",3];var arr = [1,2,true]; 都可以

        2）使用內(nèi)置對(duì)象 Array對(duì)象

            var arr1 = new Array(5); // 定義一個(gè)數(shù)組，數(shù)組的長(zhǎng)度是5

            arr1[0] = "1";

            ......

        3）使用內(nèi)置對(duì)象 Array對(duì)象

            var arr2 = new Array(3,4,5); // 定義一個(gè)數(shù)組，數(shù)組里的元素是3,4,5

    * 數(shù)組里面有一個(gè)屬性 length ：獲取到數(shù)組的長(zhǎng)度

    * 數(shù)組的長(zhǎng)度是可變的，數(shù)組可以存放不同的數(shù)據(jù)類(lèi)型的數(shù)據(jù)。

 

js的函數(shù)（方法）

    **在js里面定義函數(shù)（方法）有三種方式 函數(shù)的參數(shù)列表里面，不需要寫(xiě)var，直接寫(xiě)參數(shù)名稱(chēng)

        1）使用到一個(gè)關(guān)鍵字 function

            *** function 方法名(參數(shù)列表) {

                    方法體;

                    返回值可有可無(wú)（根據(jù)實(shí)際需要）;

             }

            代碼實(shí)現(xiàn)：// 使用第一種方式創(chuàng)建函數(shù)

                            function test() {

                                alert("qqqqqq");

                            }

                            // 調(diào)用方法

                            test();

 

                            // 定義一個(gè)有參數(shù)的方法 實(shí)現(xiàn)兩個(gè)數(shù)的相加

                            function add1(a,b) {

                                var sum = a+b;

                                alert(sum);

                            }

                            add1(3,5);

 

                            function add2(a,b,c) {

                                var sum1 = a+b+c;

                                return sum1;

                            }

                            alert(add2(7,8,9));

        2）匿名函數(shù)

            var add = function(參數(shù)列表) {

                方法體和返回值;

            }

            代碼實(shí)現(xiàn)： var add3 = function(m,n) {

                            alert(m+n);

                        }

                        // 調(diào)用方法

                        add3(8,9);

        3）一般也稱(chēng)為動(dòng)態(tài)函數(shù)，用的少，了解即可

            *使用到j(luò)s里面的一個(gè)內(nèi)置對(duì)象 Function

            var add = new Function("參數(shù)列表","方法體和返回值");

            var add4 = new Function("x,y","var sum;sum=x+y;return sum;");

            alert(add4(9,10));

            // 或者下邊的代碼

            var canshu = "x,y";

            var fangfati = "var sum;sum=x+y;return sum;";

            var add4 = new Function(canshu,fangfati);

            alert(add4(5,3));

 

js的全局變量和局部變量

    **全局變量：在script標(biāo)簽里面定義一個(gè)變量，這個(gè)變量在頁(yè)面中js部分都可以使用

        --在方法外部使用，在方法內(nèi)部使用，在另一個(gè)script標(biāo)簽使用

    **局部變量：在方法內(nèi)部定義一個(gè)變量，只能在方法內(nèi)部使用

        --只能在方法內(nèi)部使用，如果在方法的外部調(diào)用這個(gè)變量，提示出錯(cuò)

        --ie自帶了一個(gè)調(diào)試工具，ie8以上的版本中，鍵盤(pán)上的F12,再頁(yè)面下方出現(xiàn)一個(gè)條 看控制臺(tái)可以看到錯(cuò)誤

 

script標(biāo)簽應(yīng)該放置的位置

    **建議把script標(biāo)簽放到</body>后面

    **如果現(xiàn)在有這樣一個(gè)需求：

        --在js里面需要獲取到input里面的值，如果把script標(biāo)簽放在head里面，會(huì)出現(xiàn)問(wèn)題

        --html解析是從上到下解析的，script標(biāo)簽放到的是head里面，直接在里面取input的值，因?yàn)轫?yè)面還沒(méi)有解析到input那一行，肯定取不到

 

js的重載 js不存在重載，但是可以模擬實(shí)現(xiàn)

    例子：function add11(a,b) {

        return a+b;

    }

    function add11(a,b,c) {

        return a+b+c;

    }

    function add11(a,b,c,d) {

        return a+b+c+d;

    }

    alert(add11(2,2)); // NaN

    alert(add11(2,2,3)); // NaN

    alert(add11(2,2,4,5)); // 13

 

js的String對(duì)象

    ** 創(chuàng)建String對(duì)象 var str = "abc'；

    **方法和屬性（文檔）

        --屬性 length ：字符串的長(zhǎng)度

        --方法

            1）與html相關(guān)的方法

                -- bold():加粗 fontcolor():設(shè)置字符串的顏色 fontsize():設(shè)置字體的大小 link():將字符串顯示成超鏈接

            2）與java相似的方法

                --concat():連接字符串 charAt():返回指定位置的字符串 indexOf():返回字符串位置 split():切分字符串 成數(shù)組 replace("",""):替換字符串--傳遞兩個(gè)參數(shù)：第一個(gè)參數(shù)是原始字符，第二個(gè)參數(shù)是要替換成的字符 substr(5,3)從第五位開(kāi)始，向后截取三個(gè)字符 substring(3,5) 從第三位開(kāi)始包括第三位到第五位結(jié)束，不包括第五位 [3,5)

 

js的Array對(duì)象

    **創(chuàng)建數(shù)組的三種方法

        1）var arr1 = [1,2,3];

        2）var arr1 = new Array(3); // 長(zhǎng)度是三

        3）var arr1 = new Array(1,2,3); // 元素是1,2,3

        var arr = []; //創(chuàng)建一個(gè)空數(shù)組

    **屬性 length：查看數(shù)組的長(zhǎng)度

    **方法

        concat();連接數(shù)組 join();根據(jù)指定的字符分割數(shù)組 push();向數(shù)組末尾添加元素，返回?cái)?shù)組的新的長(zhǎng)度**如果添加的是一個(gè)數(shù)組，這個(gè)時(shí)候把數(shù)組當(dāng)做一個(gè)整體字符串添加進(jìn)去 pop();刪除并返回?cái)?shù)組的最后一個(gè)元素 reverse();顛倒數(shù)組中的元素的順序

 

js的Date對(duì)象

    ** 在java里面獲取當(dāng)前時(shí)間

        Date date = new Date();

        // 格式化 //toLocaleString()

   

    ** js里面獲取當(dāng)前時(shí)間

        var date = new Date();

        // 轉(zhuǎn)換成習(xí)慣的格式 date.toLocaleString();

 

js的Math對(duì)象 數(shù)學(xué)的運(yùn)算

    ** 里面的都是靜態(tài)方法，使用可以直接使用 Math.方法();

 

js的全局函數(shù)

    **由于不屬于任何一個(gè)對(duì)象，直接寫(xiě)名稱(chēng)使用

    ** eval(); 執(zhí)行js代碼(如果字符串是一個(gè)js代碼，使用方法直接執(zhí)行)

        -- var str = "alert('1234');";

         // alert(str); //alert('1234');

         eval(str); // 1234

    ** .....

 

js的函數(shù)的重載 什么是重載？方法名相同，參數(shù)不同

    *js不存在函數(shù)的重載，只會(huì)調(diào)用最后一個(gè)方法，但是可以通過(guò)其他方式模擬重載。js的函數(shù)把傳遞的參數(shù)保存到 arguments數(shù)組里面 可以利用判斷arguments數(shù)組的長(zhǎng)度 來(lái)對(duì)應(yīng)返回不同的處理結(jié)果

    模擬重載效果代碼實(shí)現(xiàn)：

    function add1() {

        if(arguments.length ==2 ) {

            return arguments[0] + arguments[1];

        } else if ( arguments.length == 3) {

            return arguments[0] + arguments[1] + arguments[2];

        } else if ( arguments.length == 4) {

            return arguments[0] + arguments[1] + arguments[2] + arguments[3];

        } else {

            return 0;

        }

    }

    // 調(diào)用

    alert(add1(1,2)); //3

    alert(add1(1,2,3)); //6

    alert(add1(1,2,3,4)); //10

    alert(add1(1,2,3,4,5)); //0

 

js的bom對(duì)象

    **bom ：broswer object model:瀏覽器對(duì)象模型

    **有哪些對(duì)象？

        -- navigator ：獲取客戶(hù)機(jī)的信息（瀏覽器的信息）

        -- screen : 獲取屏幕的信息

        -- location ：請(qǐng)求的url地址

            *** href屬性

                1）獲取到請(qǐng)求的url地址

                    --document.write(location.href);

                2）設(shè)置url地址

                    --頁(yè)面上安置一個(gè)按鈕，按鈕上綁定一個(gè)事件，當(dāng)點(diǎn)擊這個(gè)按鈕，頁(yè)面可以跳轉(zhuǎn)到另外一個(gè)頁(yè)面

                    <body>

                    <input type="button" value="JumpBaidu" onclick="href1();"/>

                    <script type="text/javascript">

                        function href1() {

                            //alert("aaaa");

                            location.;

                        }    

                    </script>

                    </body>

        -- history ：請(qǐng)求的url的歷史記錄

            -- 創(chuàng)建三個(gè)頁(yè)面（模擬上下歷史的效果）

                1）創(chuàng)建一個(gè)頁(yè)面a.html 寫(xiě)一個(gè)超鏈接 到 b.html

                2）創(chuàng)建 b.html 超鏈接到 c.html

                3）創(chuàng)建 c.html

            -- 到訪問(wèn)的上一個(gè)頁(yè)面

                history.back();

                history,go(-1);

            -- 到訪問(wèn)的下一個(gè)頁(yè)面

                history.forward();

                history.go(1);   

        -- window（重點(diǎn)掌握） 窗口對(duì)象 頂層對(duì)象（所有bom對(duì)象都是在window里面操作的）

            **方法

                -- window.alert(); 簡(jiǎn)寫(xiě)為：alert(); 頁(yè)面彈出一個(gè)窗口，顯示內(nèi)容

                -- confirm("顯示的消息內(nèi)容"); 確認(rèn)提示框 有返回值 true和false

                -- prompt(); 輸入的對(duì)話框（現(xiàn)在使用的不多） ，有兩個(gè)參數(shù)：顯示內(nèi)容和默認(rèn)值

                -- open("url地址","","窗口特征，比如窗口寬度和高度"); 打開(kāi)一個(gè)新窗口

                -- close(); 關(guān)閉窗口（瀏覽器兼容性比較差）

                -- 做一些定時(shí)器

                    *** setInterval("js代碼",毫秒數(shù)); window.setInterval("alert('123');",3000); 表示每三秒執(zhí)行一次alert方法

                    *** setTimeout("js代碼",毫秒數(shù)); 表示在毫秒數(shù)之后執(zhí)行，但是只會(huì)執(zhí)行一次

                    ***clearInterval(); 清除掉setInterval設(shè)置的定時(shí)器

                        -- var id1 = setInterval("alert('123');",3000);

                         clearInterval(id1);   

                    ***clearTimeout(); 清除掉setTimeout設(shè)置的定時(shí)器

 

js的dom對(duì)象

    **dom ：document object model: 文檔對(duì)象類(lèi)型

    **文檔：超文本文檔（超文本標(biāo)記文檔） html、xml

    **對(duì)象：提供了屬性和方法

    **模型：使用屬性和方法操作超文本標(biāo)記型文檔

    ***可以使用js里面的dom里面提供的對(duì)象，使用這些對(duì)象的屬性和方法，對(duì)標(biāo)記型文檔進(jìn)行操作

    ***想要對(duì)標(biāo)記型文檔進(jìn)行操作，首先需要把標(biāo)記型文檔里面的所有內(nèi)容封裝成對(duì)象

        -- 需要把html里面的標(biāo)簽、屬性、文本內(nèi)容都封裝成對(duì)象

    ***要想對(duì)標(biāo)記型文檔進(jìn)行操作，解析標(biāo)記型文檔

    ***解析過(guò)程：根據(jù)html的層級(jí)結(jié)構(gòu)，會(huì)在內(nèi)存中分配一個(gè)樹(shù)形結(jié)構(gòu)，需要把html中的每部分封裝成對(duì)象

        *只能有一個(gè)根節(jié)點(diǎn)

            在根節(jié)點(diǎn)下面可以有多個(gè)子節(jié)點(diǎn)，沒(méi)有子節(jié)點(diǎn)的節(jié)點(diǎn)稱(chēng)為葉子節(jié)點(diǎn)

        -- document對(duì)象：整個(gè)html文檔

        -- element對(duì)象：標(biāo)簽對(duì)象

        -- 屬性對(duì)象

        -- 文本對(duì)象

        ** Node節(jié)點(diǎn)對(duì)象：是這些對(duì)象的父對(duì)象

 

DHTML：是很多技術(shù)的簡(jiǎn)稱(chēng)

    ** html：封裝數(shù)據(jù)

    ** css：使用屬性和屬性值設(shè)置樣式

    ** dom：操作html文檔（標(biāo)記型文檔）

    ** javascript：專(zhuān)門(mén)指的是js的語(yǔ)法語(yǔ)句（ECMAScript）

 

document對(duì)象 表示整個(gè)文檔

    **常用方法

        -- write()方法：1)向頁(yè)面輸出變量 2)向頁(yè)面輸出html代碼

        -- getElementById(); 表示通過(guò)id得到元素（標(biāo)簽）   

            <body>   

                <input type="text" id="nameid" value="aaaaa"/><br/>

                <script type="text/javascript">

                    // 使用getElementById得到input標(biāo)簽的對(duì)象

                    var input1 = document.getElementById("nameid");

                    // 得到input里面的value值

                    alert(input1.value);

                    // 向input里面設(shè)置一個(gè)值value

                    input1.value = "bbbbbbb";

                </script>

            </body>       

        -- getElementsByName(); 通過(guò)標(biāo)簽的name的屬性值得到標(biāo)簽，返回的是一個(gè)集合（數(shù)組）

            <body>   

                <input type="text" name="name1" value="aaaaa"/><br/>

                <input type="text" name="name1" value="bbbb"/><br/>

                <input type="text" name="name1" value="ccccc"/><br/>

                <script type="text/javascript">

                    var input1 = document.getElementsByName("name1"); // 傳遞的參數(shù)是標(biāo)簽里面的name的值

                    for(var i =0;i<input1.length;i++) { // 通過(guò)遍歷，得到每個(gè)標(biāo)簽里面的具體的值

                        var inputs = input1[i]; // 每次循環(huán)得到input對(duì)象，賦值到inputs里面

                        alert(inputs.value); // 得到每個(gè)input標(biāo)簽里面的value值

                    }

                </script>

            </body>

        -- getElementsByTagName("標(biāo)簽的名稱(chēng)"); 返回的是一個(gè)集合（數(shù)組）

            <body>   

                <input type="text" name="name1" value="aaaaa"/><br/>

                <input type="text" name="name1" value="bbbb"/><br/>

                <input type="text" name="name1" value="ccccc"/><br/>

                <script type="text/javascript">

                    var inputs1 = document.getElementsByTagName("input"); //傳遞的參數(shù)是標(biāo)簽的名稱(chēng)

                    for(var i =0;i<inputs1.length;i++) {

                        var input1 = inputs1[i];

                        alert(input1.value);

                    }

                </script>

            </body>

        ****注意的地方：只有一個(gè)標(biāo)簽，這個(gè)標(biāo)簽只能使用name獲取到，這個(gè)時(shí)候，使用getElementsByName返回的是一個(gè)數(shù)組，但是現(xiàn)在只有一個(gè)元素，這個(gè)時(shí)候不需要遍歷，而是可以直接通過(guò)數(shù)組的下標(biāo)獲取到值

            <input type="text" name="name1" value="aaaaa"/>

            var input1 = document.getElementsByName("name1")[0];

            alert(input1.value);

 

案例：window彈窗案例

    **實(shí)現(xiàn)過(guò)程：1）需要?jiǎng)?chuàng)建一個(gè)頁(yè)面：兩個(gè)輸入項(xiàng)和一個(gè)按鈕，按鈕上邊有一個(gè)事件，作用是彈出一個(gè)新窗口

         2）創(chuàng)建彈出頁(yè)面：表格 每一行表格上有一個(gè)按鈕和編號(hào)和姓名；按鈕上有一個(gè)事件:把當(dāng)前的編號(hào)和姓名，賦值到第一個(gè)頁(yè)面相應(yīng)的位置       

    **跨頁(yè)面的操作 opener :可以得到創(chuàng)建這個(gè)窗口的窗口，也就是可以得到父窗口

 

案例：在末尾添加節(jié)點(diǎn)

    1）創(chuàng)建li標(biāo)簽

    2）創(chuàng)建文本

    3）把文本加入到li下面

    4）把li加入到ul下面

    <body>

        <ul id="ulid">

            <li>1111</li>

            <li>2222</li>

            <li>3333</li>

        </ul> <br/>

        <input type="button" value="add" onclick="add1();"/>

        <script type="text/javascript">

            function add1() {

                // 獲取到ul標(biāo)簽

                var ul1 = document.getElementById("ulid");

                // 創(chuàng)建標(biāo)簽

                var li1 = document.createElement("li");

                // 創(chuàng)建文本

                var tex1 = document.createTextNode("4444");

                // 把文本加入到li下面

                li1.appendChild(tex1);

                // 把li加入到ul下面

                ul1.appendChild(li1);

            }

        </script>

     </body>

 

元素對(duì)象（element對(duì)象）：要操作element，首先必須要獲取到element 使用document里面相應(yīng)的方法獲取

    **方法

        ****獲取屬性里面的值 getAttribute("屬性名稱(chēng)");

        ****設(shè)置屬性的值 setAttribute(name,value);   

        ****刪除屬性 removeAttribute("屬性名稱(chēng)"); 不能刪除value

 

        <input type="text" name="name1" id="inputid" value="aaaa"/>

        <script type="text/javascript">

            // 先要獲取input標(biāo)簽

            var input1 = document.getElementById("inputid");

            // alert(input1.value);

            alert(input1.getAttribute("value")); //獲取屬性里面的值           

            alert(input1.getAttribute("class"));

            input1.setAttribute("class","haha"); // 設(shè)置屬性的值   

            alert(input1.getAttribute("class"));

            input1.removeAttribute("name");

        </script>

    ** 想要獲取標(biāo)簽下面的子標(biāo)簽

        **使用屬性 childNodes,但是這個(gè)屬性兼容性很差

        **獲得標(biāo)簽下面子標(biāo)簽的唯一有效方法，使用getElementsByTagName方法

        <body>

            <ul id="ulid1">

                <li>aaaaaa</li>

                <li>bbbbbb</li>

                <li>cccccc</li>

            </ul>

            <script>

                // 獲取到ul標(biāo)簽

                var ul1 = document.getElementById("ulid1");

                // 獲取ul下面的子標(biāo)簽

                // var lis = ul1.childNodes;//兼容性很差

                // alert(lis.length); // 有的顯示的是3 有的顯示的是7

                var lis = ul1.getElementsByTagName("li");

                alert(lis.length);

            </script>

        </body>

 

Node對(duì)象的屬性

    **nodeName

    **nodeType

    **nodeValue

    **使用dom解析html時(shí)候，需要html里面的標(biāo)簽，屬性和文本都封裝成對(duì)象

**標(biāo)簽節(jié)點(diǎn)對(duì)應(yīng)的值

    nodeType : 1

nodeName : 大寫(xiě)標(biāo)簽名稱(chēng)，比如SPAN

nodeValue : null

**屬性節(jié)點(diǎn)對(duì)應(yīng)的值

    nodeType : 2

nodeName : 屬性名稱(chēng)

nodeValue : 屬性的值

**文本節(jié)點(diǎn)對(duì)應(yīng)的值

    nodeType : 3

nodeName : #text

nodeValue : 文本內(nèi)容

 

        **<body>

            <span id="spanid">文本內(nèi)容</span>

            <script type="text/javascript">

                // 獲取標(biāo)簽對(duì)象

                var span1 = document.getElementById("spanid");

                // alert(span1.nodeType); // 1

                // alert(span1.nodeName); // SAPN

                // alert(span1.nodeValue); // null

                // 屬性

                var id1 = span1.getAttributeNode("id");

                // alert(id1.nodeType); // 2

                // alert(id1.nodeName); //id

                // alert(id1.nodeValue); // spanid

                //獲取文本

                var text1 = span1.getfirstChild;

                // alert(text1.nodeType); // 3

                // alert(text1.nodeName); //#text

                // alert(text1.nodeValue); // 文本內(nèi)容

</script>

</body>

Node對(duì)象的屬性二

    <ul>

    <li>aaaaaa</li>

<li>bbbbb</li>

</ul>

**父節(jié)點(diǎn) ul是li的父節(jié)點(diǎn)

    *** parentNode ：父節(jié)點(diǎn)

    **子節(jié)點(diǎn) li是ul的子節(jié)點(diǎn)

        *** childNodes : 得到所有子節(jié)點(diǎn)，但是兼容性很差

        *** firstChild : 獲取第一個(gè)子節(jié)點(diǎn)

        *** lastChild : 獲取最后一個(gè)子節(jié)點(diǎn)

    **同輩節(jié)點(diǎn) li與li之間是同輩節(jié)點(diǎn)

        **nextSibling : 返回一個(gè)給定節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)

        **previousSibling :    返回一個(gè)給定節(jié)點(diǎn)的上一個(gè)兄弟節(jié)點(diǎn)

        <body>

        <ul id="ulid">

            <li id="li1">aaaaa</li>

            <li id="li2">bbbbb</li>

            <li id="li3">ccccc</li>

            <li id="li4">ddddd</li>

        </ul>

        <script type="text/javascript">

        /*    // 得到li1

            var li1 = document.getElementById("li1");

            // 得到ul

            var ul1 = li1.parentNode;

            alert(ul1.id); */

 

        /*    // 獲取ul的第一個(gè)子節(jié)點(diǎn)

            // 得到ul

            var ul1 = document.getElementById("ulid");

            // 第一個(gè)子節(jié)點(diǎn)

            var li1 = ul1.firstChild;

            alert(li1.id);

            var li4 = ul1.lastChild;

            alert(li4.id); */

            //獲取li的id是li3的上一個(gè)和下一個(gè)兄弟節(jié)點(diǎn)

            var li3 = document.getElementById("li3");

            var li4 = li3.nextSibling;

            var li2 = li3.previousSibling;

            alert(li4.id);

            alert(li2.id);

        </script>

    </body>   

 

操作dom樹(shù)

    ** appendChild方法：

        *** 添加子節(jié)點(diǎn)到末尾

        *** 特點(diǎn)：類(lèi)似于剪切粘貼的效果

    ** insertBefore(newNode,oldNode);

        *** 在某個(gè)節(jié)點(diǎn)之前插入一個(gè)新的節(jié)點(diǎn) 通過(guò)父節(jié)點(diǎn)添加

        *** 兩個(gè)參數(shù) 1）要插入的節(jié)點(diǎn) 2)在誰(shuí)之前插入

        *** 插入一個(gè)節(jié)點(diǎn)，節(jié)點(diǎn)不存在，創(chuàng)建

            1）創(chuàng)建標(biāo)簽

            2）創(chuàng)建文本

            3）把文本添加到標(biāo)簽下面

    **代碼實(shí)現(xiàn)：（在<li>貂蟬</li>之前添加 <li>董小宛</li>）

        <body>

        <ul id="ulid21">

            <li id="li11">西施</li>

            <li id="li12">王昭君</li>

            <li id="li13">貂蟬</li>

            <li id="li14">楊玉環(huán)</li>

        </ul>

        <input type="button" value="insert" onclick="insert1();"/>

        <script type="text/javascript">

            // 在<li>貂蟬</li>之前添加 <li>董小宛</li>

            function insert1()    {

                // 1、獲取到li13標(biāo)簽

                var li13 = document.getElementById("li13");

                // 2、創(chuàng)建li

                var li15 = document.createElement("li");

                // 3、創(chuàng)建文本

                var text15 = document.createTextNode("董小宛");

                // 4、把文本添加到li下面

                li15.appendChild(text15);

                // 5、獲取ul

                var ul21 = document.getElementById("ulid21");

                // 6、把li添加到ul下面（在<li>貂蟬</li>之前添加 <li>董小宛</li>）

                ul21.insertBefore(li15,li13);

            }

        </script>

    </body>   

    **removeChild方法：刪除節(jié)點(diǎn)

        ***通過(guò)父節(jié)點(diǎn)刪除，不能自己刪除自己

        **代碼實(shí)現(xiàn) : 刪除<li id="li24">楊玉環(huán)</li>

        <body>

        <ul id="ulid31">

            <li id="li21">西施</li>

            <li id="li22">王昭君</li>

            <li id="li23">貂蟬</li>

            <li id="li24">楊玉環(huán)</li>

        </ul>

        <input type="button" value="remove" onclick="remove1();"/>

        <script type="text/javascript">

            // 刪除<li id="li24">楊玉環(huán)</li>

            function remove1()    {

                // 1、獲取到li24標(biāo)簽

                var li24 = document.getElementById("li24");

                // 2、獲取父節(jié)點(diǎn)ul標(biāo)簽

                // 有兩種方式 1）通過(guò)id獲取 2）通過(guò)屬性 parentNode獲取

                var ul31 = document.getElementById("ulid31");

                // 3、執(zhí)行刪除（通過(guò)父節(jié)點(diǎn)刪除）

                ul31.removeChild(li24);

            }

        </script>

    </body>   

    ** replaceChild(newNode,oldNode); 替換節(jié)點(diǎn)

        ***兩個(gè)參數(shù)：1）新的節(jié)點(diǎn)（替換成的節(jié)點(diǎn)） 2）舊的節(jié)點(diǎn)（被替換的節(jié)點(diǎn)）

        ***不能自己替換自己，通過(guò)父節(jié)點(diǎn)替換

    ** cloneNode(boolean) : 復(fù)制節(jié)點(diǎn)

    **代碼實(shí)現(xiàn)：把ul列表復(fù)制到另外一個(gè)div里面

        <body>

            <ul id="ulid41">

                <li id="li31">西施</li>

                <li id="li32">王昭君</li>

                <li id="li33">貂蟬</li>

                <li id="li34">楊玉環(huán)</li>

            </ul>

            <div id="divv">

               

            </div>

            <input type="button" value="clone" onclick="clone1();"/>

            <script type="text/javascript">

                // 把ul列表復(fù)制到另外一個(gè)div里面

                /*

                    1、獲取到ul

                    2、執(zhí)行復(fù)制方法 cloneNode方法復(fù)制 參數(shù)true

                    3、把復(fù)制之后的內(nèi)容放到div里面去

                        ** 獲取到div

                        **    appendChild方法

                */

                function clone1()    {

                    // 1、獲取ul

                    var ul41 = document.getElementById("ulid41");

                    // 2、復(fù)制ul，放到類(lèi)似剪切板里面

                    var ulcopy = ul41.cloneNode(true);

                    // 3、獲取到div

                    var divv = document.getElementById("divv");

                    // 4、把副本放到div里面去

                    divv.appendChild(ulcopy);

                }

            </script>

        </body>       

    **操作dom總結(jié)：

        **獲取節(jié)點(diǎn)使用方法

            getElementById() :    通過(guò)節(jié)點(diǎn)的id屬性，查找對(duì)應(yīng)節(jié)點(diǎn)

getElementsByName() : 通過(guò)節(jié)點(diǎn)的name屬性，查找對(duì)應(yīng)節(jié)點(diǎn)

getElementsByTagName() : 通過(guò)節(jié)點(diǎn)名稱(chēng)，查找對(duì)應(yīng)節(jié)點(diǎn)

        **插入節(jié)點(diǎn)的方法

            insertBefore方法 : 在某個(gè)節(jié)點(diǎn)之前插入

            appendChild方法 : 在末尾添加，類(lèi)似于剪貼粘貼

        **刪除節(jié)點(diǎn)的方法

            removeChild方法 : 通過(guò)父節(jié)點(diǎn)刪除

        **替換節(jié)點(diǎn)的方法

            replaceChild方法 : 通過(guò)父節(jié)點(diǎn)替換

 

innerHTML屬性（重點(diǎn)）

    ** 這個(gè)屬性不是dom的組成部分，但是大多數(shù)瀏覽器都支持的屬性

    ** 第一個(gè)作用：獲取文本內(nèi)容

        var span1 = document.getElementById("sid");

        alert(span1.innerHTML);

    ** 第二個(gè)作用：向標(biāo)簽里面設(shè)置內(nèi)容（可以是html代碼）

        <body>

            <span id="sid">測(cè)試文本</span>   

            <div id="div11">

               

            </div>

            <script type="text/javascript">

                // 獲取span標(biāo)簽

                var span1 = document.getElementById("sid");

                //alert(span1.innerHTML); // 測(cè)試文本

                // 向div里面設(shè)置內(nèi)容 <h1>AAAAA</h1>

                // 獲取div

                var div11 = document.getElementById("div11");

                div11.innerHTML = "<h1>AAAAA</h1>"; // 設(shè)置內(nèi)容

            </script>

        </body>   

    ** 練習(xí)：向div里面添加一個(gè)表格

        var tab = "<table border='1'><tr><td>aaaaa</td></tr><tr><td>bbbb</td></tr></table>";

        div11.innerHTML = tab;

 

案例：動(dòng)態(tài)顯示時(shí)間

    ** 得到當(dāng)前時(shí)間

        var date = new Date();

        var d1 = date.toLocaleString();

    ** 需要讓頁(yè)面每一秒獲取時(shí)間

        setInterval方法 定時(shí)器

    ** 顯示到頁(yè)面上

        每一秒向div里面寫(xiě)一次時(shí)間 使用innerHTML屬性

    ** 代碼實(shí)現(xiàn) 動(dòng)態(tài)顯示時(shí)間    

        <body>

            <div id="times">

               

            </div>

            <script type="text/javascript">

                function getD1() {

                    // 當(dāng)前時(shí)間

                    var date = new Date();

                    // 格式化

                    var d1 = date.toLocaleString();

                    // 獲取div

                    var div1 = document.getElementById("times");

                    div1.innerHTML = d1;

                }

                // 使用定時(shí)器實(shí)現(xiàn)每一秒寫(xiě)一次時(shí)間

                setInterval("getD1();",1000);

            </script>

        </body>   

 

案例：全選練習(xí)

    ** 使用復(fù)選框上面一個(gè)屬性判斷是否選中

        ** checked 屬性

        ** checked = true; 選中

        ** checked = false; 未選中

** 創(chuàng)建一個(gè)頁(yè)面   

        ** 復(fù)選框 和 按鈕

            ***四個(gè)復(fù)選框表示愛(ài)好

            ***還有一個(gè)復(fù)選框操作全選和全不選 有一個(gè)事件

            ***三個(gè)按鈕 全選 全不選 反選 每個(gè)按鍵都分別有事件

    **代碼實(shí)現(xiàn)

        <body>

            <input type="checkbox" id="boxid" onclick="selAllNo();"/>全選/全不選

            <br/>

            <input type="checkbox" name="love"/>籃球

            <input type="checkbox" name="love"/>排球

            <input type="checkbox" name="love"/>羽毛球

            <input type="checkbox" name="love"/>乒乓球

            <br/>

            <input type="button" value="全選" onclick="selAll();"/>

            <input type="button" value="全不選" onclick="selNo();"/>

            <input type="button" value="反選" onclick="selOther();"/>   

            <script type="text/javascript">

                // 實(shí)現(xiàn)全選操作

                function selAll() {

                    /*

                        1、獲取要操作的復(fù)選框 使用getElementsByName();

                        2、返回的是數(shù)組

                            **屬性 checked 判斷復(fù)選框是否選中

                                ** checked = true; // 表示選中

                                ** checked = false; // 表示未選中

                            **遍歷數(shù)組，得到的是每一個(gè)checkbox

                            ** 把每一個(gè)checkbox屬性設(shè)置為true 即checked = true;

                    */

                    // 獲取要操作的復(fù)選框

                    var loves = document.getElementsByName("love");

                    // 遍歷數(shù)組，得到每一個(gè)復(fù)選框

                    for(var i=0;i<loves.length;i++) {

                        var love1 = loves[i]; // 得到每一個(gè)復(fù)選框

                        love1.checked = true; // 設(shè)置屬性為true

                    }

                }

                // 實(shí)現(xiàn)全不選操作

                function selNo() {

                    /*

                        1、獲取到要操作的復(fù)選框

                        2、返回的是數(shù)組，遍歷數(shù)組

                        3、得到每一個(gè)復(fù)選框

                        4、設(shè)置復(fù)選框的屬性 checked = false;

                    */

                    // 獲取要操作的復(fù)選框

                    var loves = document.getElementsByName("love");

                    // 遍歷數(shù)組，得到每一個(gè)復(fù)選框

                    for(var i=0;i<loves.length;i++) {

                        var love1 = loves[i]; // 得到每一個(gè)復(fù)選框

                        love1.checked = false; // 設(shè)置屬性為true

                    }

                }

                function selOther() { // 實(shí)現(xiàn)反選

                    var loves = document.getElementsByName("love");

                    // 遍歷數(shù)組，得到每一個(gè)復(fù)選框

                    for(var i=0;i<loves.length;i++) {

                        var love1 = loves[i]; // 得到每一個(gè)復(fù)選框

                        if(love1.checked == true) {

                            love1.checked = false;

                        }

                        else {

                            love1.checked = true;

                        }

                    }

                }

                function selAllNo() { // 一個(gè)多選框?qū)崿F(xiàn)全選 全不選切換

                    /*

                        1、得到上邊的復(fù)選框 通過(guò)id來(lái)獲取

                        2、判斷該復(fù)選框是否選中 if條件 checked == true

                        3、如果是選中，下面是全選

                        4、如果不是選中，下面是全不選

                    */

                    var box1 = document.getElementById("boxid");

                    if(box1.checked == true) {

                        selAll();

                    }

                    else {

                        selNo();

                    }

                }

            </script>

        </body>   

 

案例：下拉列表左右選擇

    ** 下拉選擇框

        <select>

            <option>111</option>   

            <option>111</option>   

        </select>       

    ** 創(chuàng)建一個(gè)頁(yè)面

        ** 兩個(gè)下拉框 設(shè)置屬性multiple

        ** 四個(gè)按鈕， 都有事件

    ** 代碼實(shí)現(xiàn)：

        <body>

        <div id="s1" style="float:left;">

            <div>

            <select id="select1" multiple="multiple" style="width:100px;height:100px;">

                    <option>1111111</option>   

                    <option>22222222</option>   

                    <option>33333333</option>   

                    <option>444444444</option>   

            </select>

            </div>

            <div>

            <input type="button" value="選中添加到右邊" onclick="selToRight();"/><br/>

            <input type="button" value="全部添加到右邊" onclick="allToRight();"/>

            </div>

        </div>

        <div id="s2">

            <div>

            <select id="select2" multiple="multiple" style="width:100px;height:100px;">

                    <option>AAAAAAAA</option>

                    <option>BBBBBBBB</option>

            </select>

            </div>

            <div>

            <input type="button" value="選中添加到左邊" onclick="selToLeft();"/><br/>

            <input type="button" value="全部添加到左邊" onclick="allToLeft();"/>

            </div>

        </div>

            <script type="text/javascript">

                // 實(shí)現(xiàn)選中添加到右邊

                function selToRight() {

                    /*

                        1、獲取 select1 里面的 option

                            * 使用getElementsByTagName(); 返回的是數(shù)組

                            * 遍歷數(shù)組，得到每一個(gè) option

                        2、判斷option是否被選中

                            * 屬性 selected ，判斷是否被選中

                                ** selected = true; 選中

                                ** selected = false;未選中   

                        3、如果選中，把選擇的添加到右邊去

                        4、得到 select2

                        5、添加選擇的部分

                            * appendChild 方法

                    */

                    // 獲取到 select1 里面的option

                    // 得到 select1

                    var select1 = document.getElementById("select1");

                    // 得到 select2

                    var select2 = document.getElementById("select2");

                    // 得到 option

                    var options1 = select1.getElementsByTagName("option");

                    // 遍歷數(shù)組

                    for(var i=0;i<options1.length;i++) {

                        // 第一次循環(huán) i=0 length:5

                        // 第二次循環(huán) i=1 length:4

                        // 第三次循環(huán) i=2 length:3

                        // 再往后就不滿足條件了 后邊的都循環(huán)不到了

                        var option1 = options1[i]; // 得到每一個(gè)option對(duì)象

                        // 判斷是否被選中

                        if(option1.selected == true) {

                            // 添加到 select2 里面

                            select2.appendChild(option1);

                            i--; // 注意這一點(diǎn)，不寫(xiě) 會(huì)出問(wèn)題

                        }

                    }

                }

                // 全部添加到右邊

                function allToRight() {

                    var select2 = document.getElementById("select2");

                    var select1 = document.getElementById("select1");

                    var options1 = select1.getElementsByTagName("option");

                    for(var i=0;i<options1.length;i++) {

                        var option1 = options1[i];

                        select2.appendChild(option1);

                        i--;

                    }

                }

                // 右邊的添加到左邊的操作類(lèi)似

            </script>

        </body>

 

案例：下拉框聯(lián)動(dòng)效果(省市聯(lián)動(dòng))

    ** 創(chuàng)建一個(gè)頁(yè)面，有兩個(gè)下拉選擇框

    ** 在第一個(gè)下拉框里面有一個(gè)事件：改變事件 onchange事件

        ** 方法 add1(this.value); 表示當(dāng)前改變的 option 里面的value值

    ** 創(chuàng)建一個(gè)二維數(shù)組，存儲(chǔ)數(shù)據(jù)

        ** 每個(gè)數(shù)組中第一個(gè)元素是國(guó)家名稱(chēng)，后面的元素是國(guó)家里面的城市

**代碼實(shí)現(xiàn)：

        <body>

        <select id="countryid" onchange="add1(this.value);">

            <option value="0">--請(qǐng)選擇--</option>   

            <option value="中國(guó)">中國(guó)</option>   

            <option value="美國(guó)">美國(guó)</option>

            <option value="德國(guó)">德國(guó)</option>

            <option value="日本">日本</option>

        </select>

        <select id="cityid">

            <option value="" selected>

            <option value="">

        </select>

       

        <script type="text/javascript">

            // 創(chuàng)建一個(gè)數(shù)組存儲(chǔ)數(shù)據(jù)

            // 使用二維數(shù)組

            var arr = new Array(4);

            arr[0] = ["中國(guó)","南京","撫州","臨洮","日喀則","哈密"];

            arr[1] = ["美國(guó)","華盛頓","底特律","休斯頓","紐約"];

            arr[2] = ["德國(guó)","慕尼黑","柏林","法蘭克福","狼堡"];

            arr[3] = ["日本","東京","北海道","大阪","廣島","長(zhǎng)崎"];

            function add1(val) {

                /*    實(shí)現(xiàn)步驟：

                    1、遍歷二維數(shù)組

                    2、得到的也是一個(gè)數(shù)組（國(guó)家對(duì)應(yīng)關(guān)系）

                    3、拿到數(shù)組中的第一個(gè)值和傳遞過(guò)來(lái)開(kāi)的值作比較

                    4、如果相同，獲取到第一個(gè)值后面的元素

                    5、得到 city 的 select

                    6、添加過(guò)去 使用 appendChild 方法

                        ** 需要?jiǎng)?chuàng)建option （三步操作）

                */

                // 由于每次都要向city里面添加option，第二次添加，前邊第一次的會(huì)保留，追加

                // 所以每次添加之前，判斷一下city里面是否有option，如果有，刪除

                // 獲取 city 的 select

                var city1 = document.getElementById("cityid");

                // 得到 city 里面的 option

                var options1 = city1.getElementsByTagName("option");

                // 遍歷數(shù)組

                for(var k=0;k<options1.length;k++) {

                    // 得到每一個(gè) option

                    var op = options1[k];

                    // 刪除這個(gè) option 通過(guò)父節(jié)點(diǎn)刪除

                    city1.removeChild(op);

                    k--;// 每次刪除 長(zhǎng)度都會(huì)減一 k都會(huì)增加一 不執(zhí)行此操作 會(huì)出錯(cuò)

                }

 

                // 遍歷二維數(shù)組

                for(var i=0;i<arr.length;i++) {

                    // 得到二維數(shù)組里面的每一個(gè)數(shù)組

                    var arr1 = arr[i];

                    // 得到遍歷之后的數(shù)組的第一個(gè)值

                    var firstvalue = arr1[0];

                    // 判斷傳遞過(guò)來(lái)的值和第一個(gè)值是否相同

                    if(firstvalue == val) { // 相同

                        // 得到第一個(gè)值后面的元素

                        // 遍歷數(shù)組 arr1

                        for(var j=1;j<arr1.length;j++) {

                            var value1 = arr1[j]; // 得到國(guó)家之后 城市的名稱(chēng)

                            // alert(value1);

                            // 創(chuàng)建 option

                            var option1 = document.createElement("option");

                            // 創(chuàng)建文本

                            var text1 = document.createTextNode(value1);

                            // 把文本添加到option里面

                            option1.appendChild(text1);

                            // 添加值到 city 的 select 里面

                            city1.appendChild(option1);

                        }

                    }

                }

            }   

        </script>

        </body>

以上這篇JavaWeb學(xué)習(xí)筆記分享(必看篇)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。