JavaWeb學習筆記分享(必看篇)

作者：Eve Cole 更新時間：2025-04-09 04:32:01

自定義列表

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

**在裡面<dt></dt>：上層內容

**在裡面<dd></dd>：下層內容

有序列表

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

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

**在ol標籤裡面<li>具體內容</li>

無序列表

<ul></ul>：無序列表的範圍

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

**在ul標籤裡面<li>具體內容</li>

圖像標籤

--屬性：src、width、height、alt(圖片上顯示的文字，把鼠標移動到圖片上，停留片刻顯示內容或者是圖片顯示出錯時顯示的文字，但有些瀏覽器不顯示，沒有效果)

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

路徑的介紹

*分類：兩類

**絕對路徑eg. http://www.baidu.com/b.jpg

***三種相對路徑一個文件相對於另外一個文件的位置

--html文件和圖片在同一個路徑(目錄)下，可以直接寫文件名稱

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

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

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

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

超鏈接標籤

**鏈接資源

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

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

**target：設置打開的方式，默認是在當前頁打開

--_blank ：在一個新窗口打開

--_self ：在當前頁打開默認的

--<a href="#">鏈接標題</a>：當超鏈接不需要跳轉到頁面時，在href中添加#（佔位符）就可以了

**定位資源

--如果想要定位資源：定義一個位置

--回到這個位置

--原樣輸出標籤：<pre>需要原樣輸入的內容</pre>

表格標籤

*作用：可以對數據進行格式化，使數據顯示更加清晰

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

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

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

--設置對齊方式align ：left center right

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

**使用th也可以表示單元格：表示可以實現居中和加粗

*表格的標題，放在table裡邊<caption></caption>

*操作技巧：

**首先數有多少行，在數每行里面有多少個單元格

*合併單元格

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

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

表單標籤

*例如註冊開心網時，可以提交數據到開心網的服務器，這個過程可以使用表單標籤實現

* <form></form> ：定義一個表單範圍

*屬性：

** action ：提交到的地址，默認提交到當前的頁面

** method ：表單的提交方式

--常用的有兩種： get 和post ，默認是get請求

** get 和post 的區別

1）get請求地址欄會攜帶提交的數據，post不會攜帶（數據在請求體裡面）

2）get請求安全級別較低，post較高

3）get請求數據大小有限制，post沒有限制

** enctype ：一般請求下不需要這個屬性，做文件上傳時候需要設置這個屬性

**輸入項：可以輸入內容或者選擇內容的部分

--大部分的輸入項可使用<input type="輸入項類型"/>

********在輸入項裡面需要有一個name屬性

***普通輸入項：<input type="text"/>

***密碼輸入項：<input type="password"/>

***單選輸入項：<input type="radio"/>

--在裡邊需要屬性name

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

--必須要有一個value值

****實現默認選中的屬性

***checked="checked"

***複選輸入項：<input type="checkbox"/>

**在裡邊需要屬性name

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

**必須要有一個value值

****實現默認選中的屬性

----checked="checked"

***文件輸入項：<input type="file"/>

***下拉輸入項（不是在input標籤裡面的）

</select>

****實現默認選中的屬性

----selected="selected"

*** 文本域（如：註冊賬號時填寫個人信息簡介的方框）

***隱藏項（不會顯示在頁面上，但是存在於html代碼裡面）

***提交按鈕

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

**當在輸入項裡面寫了name屬性之後

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

**?輸入項name的值=輸入的值&

**參數類似於key-value形式

***使用（點擊）圖片來提交

***重置按鈕：回到輸入項的初始狀態

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

案例：使用表單標籤實現註冊頁面

表格單元格內容為空時，一般用佔位符（(轉義空格)）來填充

html中的其他的常用標籤的使用

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

html的頭標籤的使用

**html兩部分組成head 和body

**在head裡面的標籤就是頭標籤

**title標籤：表示在標籤上顯示的內容

**<meta>標籤：設置頁面的一些相關內容

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

--<meta http-equiv="refresh" content="10;url=Test_form.html" />定時跳轉到指定頁面

**base標籤：設置超鏈接的基本的設置

--可以統一設置超鏈接的打開方式<base target="_blank" />

**link標籤：引入外部文件

框架標籤的使用

**<frameset>

**rows ：按照行進行劃分

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

**cols ：按照列進行劃分

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

**<frame> 具體顯示的頁面

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

*使用框架標籤的時候，不能寫在head和body裡面，使用了框架標籤，需要把body去掉，寫在head外邊

*如果在左邊的頁面超鏈接，想讓內容顯示在右邊的頁面中，可以設置超鏈接裡面的target屬性，將target的值設置為框架中的名字

**<a href="http://www.baidu.com" target="right">百度</a><br/>

</frameset>

知識總結

1）html操作思想：使用標籤把要操作的數據包起來，通過修改標籤的屬性值，來實現標籤內數據樣式的變化

2）font標籤屬性：size 取值範圍1-7 color：十六進制數#ffffff

3）標題標籤<h1></h1>......<h6></h6> ：從h1到h6字體越來越小，自動換行

4）註釋

CSS的簡介

**CSS：層疊樣式表

** 層疊：一層一層的

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

**使頁面顯示效果更加好

**CSS將網頁內容和顯示樣式進行分離，提高了顯示功能

CSS和html的結合方式（四種結合方式）

1）在每個html標籤上面都有一個屬性style，把CSS和html結合在一起

-- <div style="background-color:red;color:green;" id="" >天之道，損有餘而補不足，是故虛勝實，不足勝有餘。 </div>

2）使用html的一個標籤實現<style>標籤，寫在head裡面

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

css代碼;

</style>

----代碼實現<head>

div{

background-color:blue;

color:red;

}

</style>

</head>

<body>

天之道，損有餘而補不足，是故虛勝實，不足勝有餘。

</div>

</body>

3）在style標籤裡面使用語句

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

-- 第一步：創建一個css文件

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

@import url(div.css);

</style>

4）使用頭標籤link，引入外部css文件放在<head></head>裡邊

-- 第一步：創建一個css文件

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

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

****優先級（一般）

由上到下，由內到外，優先級由低到高。

後加載的優先級高

****格式：選擇器名稱{屬性名:屬性值;屬性名:屬性值;......}

css的基本選擇器（三種）

**要對那個標籤裡面的數據進行操作

1）標籤選擇器div {css代碼}

--使用標籤名作為選擇器的名稱

<head>

div{

background-color:blue;

color:red;

}

</style>

</head>

<body>

<div>aaaaaa</div>

</body>

2）class選擇器.名稱{}

**每個html標籤都有一個屬性class

**<head>

div.test{

background-color:blue;

color:red;

}

p.test{

background-color:blue;

color:red;

}

可以簡寫為：

.test{

background-color:blue;

color:red;

}

</style>

</head>

**<body>

<div>aaaaaa</div>

<p>bbbbbbbbb</p>

</body>

3）id選擇器#名稱{}

**每個html標籤上面都有一個屬性id

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

--<head>

div#test{

background-color:blue;

color:red;

}

p#test{

background-color:blue;

color:red;

}

可以簡寫為：

#test {

background-color:blue;

color:red;

}

</style>

</head>

--<body>

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

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

</body>

**優先級style > id選擇器> class選擇器> 標籤選擇器

css的擴展選擇器(了解)

1）關聯選擇器嵌套標籤的樣式的設置

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

**設置div標籤裡面p標籤的樣式，嵌套標籤裡面的樣式

--<head>

div p {

background-color:blue;

color:red;

}

</style>

</head>

--<body>

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

<p>aaaaaa</p>

</body>

2）組合選擇器不同標籤設置相同的樣式

**<div>1111</div>

**把div和p標籤設置成相同的樣式，把不同的標籤設置成相同的樣式

--<head>

div,p {

background-color:blue;

color:red;

}

</style>

</head>

--<body>

</body>

3）偽（類）元素選擇器

** css裡面提供了一些定義好的樣式，可以拿過來使用

**比如超鏈接

**超鏈接的狀態

--原始狀態鼠標放上去點擊點擊之後

:link :hover :active :visited

代碼實現：

<head>

/*原始狀態*/

a:link {

background-color:red;

}

/*懸停狀態*/

a:hover {

background-color:green;

}

/*點擊狀態*/

a:active {

background-color:blue;

}

/*點擊之後狀態*/

a:visited {

background-color:gray;

}

</style>

</head>

<body>

<a href="http://www.baidu.com">點擊鏈接到百度網頁</a>

</body>

css的盒子模型(了解) 對數據進行操作，需要把數據放到一個區域裡面（div）

1）邊框border ：統一設置

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

--<head>

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) 內邊距padding ：統一設置內容距離上下左右四條邊的距離

也可以分別設置：上下左右

<head>

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 ：統一設置div距離最外邊四條邊的距離

也可以分別設置：上下左右。。。

css的佈局的漂浮（了解） float ：left right

css的佈局的定位(了解)

*position

**屬性值：

--static：默認值，無特殊定位

--absolute：

將對像從文檔流中拖出，使用left,right,top,bottom等屬性相對於其進行絕對定位

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

案例：圖文混排案例

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

案例：圖像簽名

javascript的簡介：是基於對象和事件驅動的腳本語言，主要應用在客戶端

*基於對象：提供好了很多對象，可以直接拿過來使用

*事件驅動：html做網站靜態效果，javascript動態效果

*客戶端：專門指的是瀏覽器

* js的特點：

1）交互性信息的動態交互

2）安全性js不能訪問本地磁盤的文件

3）跨平台性java裡面跨平台性，虛擬機；只要能夠支持js的瀏覽器，都可以運行

*javascript和java的區別：兩者之間沒有什麼任何關係

1）java是sun公司，現在是Oracle；js是網景公司

2）java是面向對象的，js是基於對象的

3）java是強類型的語言，js是弱類型的語言

--比如：java裡面int i = "10";會報錯

--js: var i = 10; var i = "10";都不報錯

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

*js的組成（三部分）：

1）ECMAScript

-- ECMA ：歐洲計算機協會

--由ECMA組織製定的js語法，語句...

2）BOM

--broswer object model:瀏覽器對像模型

3）DOM

--document object model：文檔對像模型

js與html的結合方式（兩種）

1）使用一個標籤<script type="text/javascript"> js代碼；</script>

2）使用script標籤，引入一個外部的js文件

-- 創建一個js文件，寫js代碼

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

注意：使用第二種方式的時候，就不要在script標籤裡面寫js代碼了，不會執行

js的原始類型和聲明變量

*java的基本數據類型：byte short int long float double char bolean

*js定義變量都是用關鍵字var

*js的原始類型（五個）

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

--number 數字類型var m = 123;

--boolean true和false var flag = true;

--null var date = new Date();

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

--undifined 定義一個變量，但是沒有賦值var aa;

* typeof(變量名稱) 查看當前變量的數據類型

js的語句

**java裡面的語句if判斷("="表示賦值；"=="等於，表示判斷) switch語句循環語句（for while do-while）

**js裡面的這些語句

--if判斷語句

--switch(a) {

case 5: ...

break;

case 6: ...

break;

default:...

........

}

**循環語句for while do-while

--var i = 5;

while(i>0) {

alert(i);

i--;

}

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

alert(i);

}

js的運算符

**js裡面不區分整數和小數

--var j = 123;

alert(j/1000*1000);

** j/1000*1000 在java裡面得到結果是0

** 在js裡面不區分整數和小數， 123/1000*1000 = 0.123*1000 = 123

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

--var str = "123";

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

alert(str - 1); 相減時候，執行減法的運算，如果str中不是數字，會提示NaN：表示不是一個數字

**boolean類型也可以操作

***如果設置成true，相當於這個值是1；如果設置成false，相當於這個值是0；

** == 和=== 區別

**都是做判斷

** == 比較的只是值； === 比較的是值和類型

**直接向頁面輸出的語句（可以把內容顯示在頁面上），可以向頁面輸出變量，固定值和html代碼。 Document.write("") 裡面是雙引號，如果設置標籤的屬性需要使用單引號。

-- document.write("aaaa");

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

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

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

練習：實現99乘法表

js的數組

*java裡面的數組定義int[] arr = {1,2,3};

*js數組的定義方式（三種）

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

2）使用內置對象Array對象

var arr1 = new Array(5); // 定義一個數組，數組的長度是5

arr1[0] = "1";

......

3）使用內置對象Array對象

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

* 數組裡面有一個屬性length ：獲取到數組的長度

* 數組的長度是可變的，數組可以存放不同的數據類型的數據。

js的函數（方法）

**在js裡面定義函數（方法）有三種方式函數的參數列表裡面，不需要寫var，直接寫參數名稱

1）使用到一個關鍵字function

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

方法體;

返回值可有可無（根據實際需要）;

}

代碼實現：// 使用第一種方式創建函數

function test() {

alert("qqqqqq");

}

// 調用方法

test();

// 定義一個有參數的方法實現兩個數的相加

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）匿名函數

var add = function(參數列表) {

方法體和返回值;

}

代碼實現： var add3 = function(m,n) {

alert(m+n);

}

// 調用方法

add3(8,9);

3）一般也稱為動態函數，用的少，了解即可

*使用到js裡面的一個內置對象Function

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

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標籤裡面定義一個變量，這個變量在頁面中js部分都可以使用

--在方法外部使用，在方法內部使用，在另一個script標籤使用

**局部變量：在方法內部定義一個變量，只能在方法內部使用

--只能在方法內部使用，如果在方法的外部調用這個變量，提示出錯

--ie自帶了一個調試工具，ie8以上的版本中，鍵盤上的F12,再頁面下方出現一個條看控制台可以看到錯誤

script標籤應該放置的位置

**建議把script標籤放到</body>後面

**如果現在有這樣一個需求：

--在js裡面需要獲取到input裡面的值，如果把script標籤放在head裡面，會出現問題

--html解析是從上到下解析的，script標籤放到的是head裡面，直接在裡面取input的值，因為頁面還沒有解析到input那一行，肯定取不到

js的重載js不存在重載，但是可以模擬實現

例子：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對象

** 創建String對象var str = "abc'；

**方法和屬性（文檔）

--屬性length ：字符串的長度

--方法

1）與html相關的方法

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

2）與java相似的方法

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

js的Array對象

**創建數組的三種方法

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

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

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

var arr = []; //創建一個空數組

**屬性length：查看數組的長度

**方法

concat();連接數組join();根據指定的字符分割數組push();向數組末尾添加元素，返回數組的新的長度**如果添加的是一個數組，這個時候把數組當做一個整體字符串添加進去pop();刪除並返回數組的最後一個元素reverse();顛倒數組中的元素的順序

js的Date對象

** 在java裡面獲取當前時間

Date date = new Date();

// 格式化//toLocaleString()

** js裡面獲取當前時間

var date = new Date();

// 轉換成習慣的格式date.toLocaleString();

js的Math對像數學的運算

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

js的全局函數

**由於不屬於任何一個對象，直接寫名稱使用

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

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

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

eval(str); // 1234

** .....

js的函數的重載什麼是重載？方法名相同，參數不同

*js不存在函數的重載，只會調用最後一個方法，但是可以通過其他方式模擬重載。 js的函數把傳遞的參數保存到arguments數組裡面可以利用判斷arguments數組的長度來對應返回不同的處理結果

模擬重載效果代碼實現：

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;

}

// 調用

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對象

**bom ：broswer object model:瀏覽器對像模型

**有哪些對象？

-- navigator ：獲取客戶機的信息（瀏覽器的信息）

-- screen : 獲取屏幕的信息

-- location ：請求的url地址

*** href屬性

1）獲取到請求的url地址

--document.write(location.href);

2）設置url地址

--頁面上安置一個按鈕，按鈕上綁定一個事件，當點擊這個按鈕，頁面可以跳轉到另外一個頁面

<body>

function href1() {

//alert("aaaa");

location.href = "http://www.baidu.com";

}

</script>

</body>

-- history ：請求的url的歷史記錄

-- 創建三個頁面（模擬上下歷史的效果）

1）創建一個頁面a.html 寫一個超鏈接到b.html

2）創建b.html 超鏈接到c.html

3）創建c.html

-- 到訪問的上一個頁面

history.back();

history,go(-1);

-- 到訪問的下一個頁面

history.forward();

history.go(1);

-- window（重點掌握）窗口對象頂層對象（所有bom對像都是在window裡面操作的）

**方法

-- window.alert(); 簡寫為：alert(); 頁面彈出一個窗口，顯示內容

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

-- prompt(); 輸入的對話框（現在使用的不多），有兩個參數：顯示內容和默認值

-- open("url地址","","窗口特徵，比如窗口寬度和高度"); 打開一個新窗口

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

-- 做一些定時器

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

*** setTimeout("js代碼",毫秒數); 表示在毫秒數之後執行，但是只會執行一次

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

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

clearInterval(id1);

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

js的dom對象

**dom ：document object model: 文檔對像類型

**文檔：超文本文檔（超文本標記文檔） html、xml

**對象：提供了屬性和方法

**模型：使用屬性和方法操作超文本標記型文檔

***可以使用js裡面的dom裡面提供的對象，使用這些對象的屬性和方法，對標記型文檔進行操作

***想要對標記型文檔進行操作，首先需要把標記型文檔裡面的所有內容封裝成對象

-- 需要把html裡面的標籤、屬性、文本內容都封裝成對象

***要想對標記型文檔進行操作，解析標記型文檔

***解析過程：根據html的層級結構，會在內存中分配一個樹形結構，需要把html中的每部分封裝成對象

*只能有一個根節點

在根節點下面可以有多個子節點，沒有子節點的節點稱為葉子節點

-- document對象：整個html文檔

-- element對象：標籤對象

-- 屬性對象

-- 文本對象

** Node節點對象：是這些對象的父對象

DHTML：是很多技術的簡稱

** html：封裝數據

** css：使用屬性和屬性值設置樣式

** dom：操作html文檔（標記型文檔）

** javascript：專門指的是js的語法語句（ECMAScript）

document對象表示整個文檔

**常用方法

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

-- getElementById(); 表示通過id得到元素（標籤）

<body>

// 使用getElementById得到input標籤的對象

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

// 得到input裡面的value值

alert(input1.value);

// 向input裡面設置一個值value

input1.value = "bbbbbbb";

</script>

</body>

-- getElementsByName(); 通過標籤的name的屬性值得到標籤，返回的是一個集合（數組）

<body>

var input1 = document.getElementsByName("name1"); // 傳遞的參數是標籤裡面的name的值

for(var i =0;i<input1.length;i++) { // 通過遍歷，得到每個標籤裡面的具體的值

var inputs = input1[i]; // 每次循環得到input對象，賦值到inputs裡面

alert(inputs.value); // 得到每個input標籤裡面的value值

}

</script>

</body>

-- getElementsByTagName("標籤的名稱"); 返回的是一個集合（數組）

<body>

var inputs1 = document.getElementsByTagName("input"); //傳遞的參數是標籤的名稱

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

var input1 = inputs1[i];

alert(input1.value);

}

</script>

</body>

****注意的地方：只有一個標籤，這個標籤只能使用name獲取到，這個時候，使用getElementsByName返回的是一個數組，但是現在只有一個元素，這個時候不需要遍歷，而是可以直接通過數組的下標獲取到值

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

alert(input1.value);

案例：window彈窗案例

**實現過程：1）需要創建一個頁面：兩個輸入項和一個按鈕，按鈕上邊有一個事件，作用是彈出一個新窗口

2）創建彈出頁面：表格每一行表格上有一個按鈕和編號和姓名；按鈕上有一個事件:把當前的編號和姓名，賦值到第一個頁面相應的位置

**跨頁面的操作opener :可以得到創建這個窗口的窗口，也就是可以得到父窗口

案例：在末尾添加節點

1）創建li標籤

2）創建文本

3）把文本加入到li下面

4）把li加入到ul下面

<body>

</ul> <br/>

function add1() {

// 獲取到ul標籤

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

// 創建標籤

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

// 創建文本

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

// 把文本加入到li下面

li1.appendChild(tex1);

// 把li加入到ul下面

ul1.appendChild(li1);

}

</script>

</body>

元素對象（element對象）：要操作element，首先必須要獲取到element 使用document裡面相應的方法獲取

**方法

****獲取屬性裡面的值getAttribute("屬性名稱");

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

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

// 先要獲取input標籤

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

// alert(input1.value);

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

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

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

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

input1.removeAttribute("name");

</script>

** 想要獲取標籤下面的子標籤

**使用屬性childNodes,但是這個屬性兼容性很差

**獲得標籤下面子標籤的唯一有效方法，使用getElementsByTagName方法

<body>

<li>aaaaaa</li>

<li>bbbbbb</li>

<li>cccccc</li>

</ul>

// 獲取到ul標籤

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

// 獲取ul下面的子標籤

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

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

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

alert(lis.length);

</script>

</body>

Node對象的屬性

**nodeName

**nodeType

**nodeValue

**使用dom解析html時候，需要html裡面的標籤，屬性和文本都封裝成對象

**標籤節點對應的值

nodeType : 1

nodeName : 大寫標籤名稱，比如SPAN

nodeValue : null

**屬性節點對應的值

nodeType : 2

nodeName : 屬性名稱

nodeValue : 屬性的值

**文本節點對應的值

nodeType : 3

nodeName : #text

nodeValue : 文本內容

**<body>

// 獲取標籤對象

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); // 文本內容

</script>

</body>

Node對象的屬性二

<ul>

<li>aaaaaa</li>

<li>bbbbb</li>

</ul>

**父節點ul是li的父節點

*** parentNode ：父節點

**子節點li是ul的子節點

*** childNodes : 得到所有子節點，但是兼容性很差

*** firstChild : 獲取第一個子節點

*** lastChild : 獲取最後一個子節點

**同輩節點li與li之間是同輩節點

**nextSibling : 返回一個給定節點的下一個兄弟節點

**previousSibling : 返回一個給定節點的上一個兄弟節點

<body>

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

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

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

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

</ul>

/* // 得到li1

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

// 得到ul

var ul1 = li1.parentNode;

alert(ul1.id); */

/* // 獲取ul的第一個子節點

// 得到ul

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

// 第一個子節點

var li1 = ul1.firstChild;

alert(li1.id);

var li4 = ul1.lastChild;

alert(li4.id); */

//獲取li的id是li3的上一個和下一個兄弟節點

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

var li4 = li3.nextSibling;

var li2 = li3.previousSibling;

alert(li4.id);

alert(li2.id);

</script>

</body>

操作dom樹

** appendChild方法：

*** 添加子節點到末尾

*** 特點：類似於剪切粘貼的效果

** insertBefore(newNode,oldNode);

*** 在某個節點之前插入一個新的節點通過父節點添加

*** 兩個參數1）要插入的節點2)在誰之前插入

*** 插入一個節點，節點不存在，創建

1）創建標籤

2）創建文本

3）把文本添加到標籤下面

**代碼實現：（在<li>貂蟬</li>之前添加<li>董小宛</li>）

<body>

</ul>

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

function insert1() {

// 1、獲取到li13標籤

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

// 2、創建li

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

// 3、創建文本

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方法：刪除節點

***通過父節點刪除，不能自己刪除自己

**代碼實現: 刪除<li id="li24">楊玉環</li>

<body>

</ul>

// 刪除<li id="li24">楊玉環</li>

function remove1() {

// 1、獲取到li24標籤

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

// 2、獲取父節點ul標籤

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

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

// 3、執行刪除（通過父節點刪除）

ul31.removeChild(li24);

}

</script>

</body>

** replaceChild(newNode,oldNode); 替換節點

***兩個參數：1）新的節點（替換成的節點） 2）舊的節點（被替換的節點）

***不能自己替換自己，通過父節點替換

** cloneNode(boolean) : 複製節點

**代碼實現：把ul列表複製到另外一個div裡面

<body>

</ul>

</div>

// 把ul列表複製到另外一個div裡面

1、獲取到ul

2、執行複制方法cloneNode方法複製參數true

3、把複製之後的內容放到div裡面去

** 獲取到div

** appendChild方法

function clone1() {

// 1、獲取ul

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

// 2、複製ul，放到類似剪切板裡面

var ulcopy = ul41.cloneNode(true);

// 3、獲取到div

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

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

divv.appendChild(ulcopy);

}

</script>

</body>

**操作dom總結：

**獲取節點使用方法

getElementById() : 通過節點的id屬性，查找對應節點

getElementsByName() : 通過節點的name屬性，查找對應節點

getElementsByTagName() : 通過節點名稱，查找對應節點

**插入節點的方法

insertBefore方法: 在某個節點之前插入

appendChild方法: 在末尾添加，類似於剪貼粘貼

**刪除節點的方法

removeChild方法: 通過父節點刪除

**替換節點的方法

replaceChild方法: 通過父節點替換

innerHTML屬性（重點）

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

** 第一個作用：獲取文本內容

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

alert(span1.innerHTML);

** 第二個作用：向標籤裡面設置內容（可以是html代碼）

<body>

</div>

// 獲取span標籤

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

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

// 向div裡面設置內容<h1>AAAAA</h1>

// 獲取div

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

div11.innerHTML = "<h1>AAAAA</h1>"; // 設置內容

</script>

</body>

** 練習：向div裡面添加一個表格

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

div11.innerHTML = tab;

案例：動態顯示時間

** 得到當前時間

var date = new Date();

var d1 = date.toLocaleString();

** 需要讓頁面每一秒獲取時間

setInterval方法定時器

** 顯示到頁面上

每一秒向div裡面寫一次時間使用innerHTML屬性

** 代碼實現動態顯示時間

<body>

</div>

function getD1() {

// 當前時間

var date = new Date();

// 格式化

var d1 = date.toLocaleString();

// 獲取div

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

div1.innerHTML = d1;

}

// 使用定時器實現每一秒寫一次時間

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

</script>

</body>

案例：全選練習

** 使用複選框上面一個屬性判斷是否選中

** checked 屬性

** checked = true; 選中

** checked = false; 未選中

** 創建一個頁面

** 複選框和按鈕

***四個複選框表示愛好

***還有一個複選框操作全选和全不選有一個事件

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

**代碼實現

<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/>

// 實現全選操作

function selAll() {

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

2、返回的是數組

**屬性checked 判斷複選框是否選中

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

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

**遍歷數組，得到的是每一個checkbox

** 把每一個checkbox屬性設置為true 即checked = true;

// 獲取要操作的複選框

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

// 遍歷數組，得到每一個複選框

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

var love1 = loves[i]; // 得到每一個複選框

love1.checked = true; // 設置屬性為true

}

// 實現全不選操作

function selNo() {

1、獲取到要操作的複選框

2、返回的是數組，遍歷數組

3、得到每一個複選框

4、設置複選框的屬性checked = false;

// 獲取要操作的複選框

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

// 遍歷數組，得到每一個複選框

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

var love1 = loves[i]; // 得到每一個複選框

love1.checked = false; // 設置屬性為true

}

function selOther() { // 實現反選

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

// 遍歷數組，得到每一個複選框

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

var love1 = loves[i]; // 得到每一個複選框

if(love1.checked == true) {

love1.checked = false;

}

else {

love1.checked = true;

}

function selAllNo() { // 一個多選框實現全選全不選切換

1、得到上邊的複選框通過id來獲取

2、判斷該複選框是否選中if條件checked == true

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

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

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

if(box1.checked == true) {

selAll();

}

else {

selNo();

}

</script>

</body>

案例：下拉列表左右選擇

** 下拉選擇框

</select>

** 創建一個頁面

** 兩個下拉框設置屬性multiple

** 四個按鈕，都有事件

** 代碼實現：

<body>

<div>

</select>

</div>

<div>

</div>

<div>

<option>AAAAAAAA</option>

<option>BBBBBBBB</option>

</select>

</div>

<div>

</div>

// 實現選中添加到右邊

function selToRight() {

1、獲取select1 裡面的option

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

* 遍歷數組，得到每一個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");

// 遍歷數組

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

// 第一次循環i=0 length:5

// 第二次循環i=1 length:4

// 第三次循環i=2 length:3

// 再往後就不滿足條件了後邊的都循環不到了

var option1 = options1[i]; // 得到每一個option對象

// 判斷是否被選中

if(option1.selected == true) {

// 添加到select2 裡面

select2.appendChild(option1);

i--; // 注意這一點，不寫會出問題

}

// 全部添加到右邊

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--;

}

// 右邊的添加到左邊的操作類似

</script>

</body>

案例：下拉框聯動效果(省市聯動)

** 創建一個頁面，有兩個下拉選擇框

** 在第一個下拉框裡面有一個事件：改變事件onchange事件

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

** 創建一個二維數組，存儲數據

** 每個數組中第一個元素是國家名稱，後面的元素是國家裡面的城市

**代碼實現：

<body>

</select>

</select>

// 創建一個數組存儲數據

// 使用二維數組

var arr = new Array(4);

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

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

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

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

function add1(val) {

/* 實現步驟：

1、遍歷二維數組

2、得到的也是一個數組（國家對應關係）

3、拿到數組中的第一個值和傳遞過來開的值作比較

4、如果相同，獲取到第一個值後面的元素

5、得到city 的select

6、添加過去使用appendChild 方法

** 需要創建option （三步操作）

// 由於每次都要向city裡面添加option，第二次添加，前邊第一次的會保留，追加

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

// 獲取city 的select

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

// 得到city 裡面的option

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

// 遍歷數組

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

// 得到每一個option

var op = options1[k];

// 刪除這個option 通過父節點刪除

city1.removeChild(op);

k--;// 每次刪除長度都會減一k都會增加一不執行此操作會出錯

}

// 遍歷二維數組

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

// 得到二維數組裡面的每一個數組

var arr1 = arr[i];

// 得到遍歷之後的數組的第一個值

var firstvalue = arr1[0];

// 判斷傳遞過來的值和第一個值是否相同

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

// 得到第一個值後面的元素

// 遍歷數組arr1

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

var value1 = arr1[j]; // 得到國家之后城市的名稱

// alert(value1);

// 創建option

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

// 創建文本

var text1 = document.createTextNode(value1);

// 把文本添加到option裡面

option1.appendChild(text1);

// 添加值到city 的select 裡面

city1.appendChild(option1);

}

</script>

</body>

以上這篇JavaWeb學習筆記分享(必看篇)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。