JavaWeb學習筆記

時間 2019-11-18

標籤 javaweb 學習筆記欄目 Java 简体版

原文原文鏈接

自定義列表 javascript

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

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

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

有序列表 node

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

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

**在ol標籤裏面 <li>具體內容</li> 安全

無序列表 服務器

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

--屬性 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 name="birth">

</select>

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

----selected="selected"

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

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

***隱藏項（不會顯示在頁面上，可是存在於 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="" class="" >天之道，損有餘而補不足，是故虛勝實，不足勝有餘。</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 class="test">aaaaaa</div>

<p class="test">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() {

// 一、獲取到li13標籤

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

// 二、建立li

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

// 三、建立文本

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

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

li15.appendChild(text15);

// 五、獲取ul

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

// 六、把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() {

// 一、獲取到li24標籤

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

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

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

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

// 三、執行刪除（經過父節點刪除）

ul31.removeChild(li24);

}

</script>

</body>

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

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

***不能本身替換本身，經過父節點替換

** cloneNode(boolean) : 複製節點

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

<body>

</ul>

</div>

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

一、獲取到ul

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

三、把複製以後的內容放到div裏面去

** 獲取到div

** appendChild方法

function clone1() {

// 一、獲取ul

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

// 二、複製ul，放到相似剪切板裏面

var ulcopy = ul41.cloneNode(true);

// 三、獲取到div

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

// 四、把副本放到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() {

一、獲取要操做的複選框使用getElementsByName();

二、返回的是數組

**屬性 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() {

一、獲取到要操做的複選框

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

三、獲得每個複選框

四、設置複選框的屬性 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() { // 一個多選框實現全選全不選切換

一、獲得上邊的複選框經過id來獲取

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

三、若是是選中，下面是全選

四、若是不是選中，下面是全不選

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() {

一、獲取 select1 裏面的 option

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

* 遍歷數組，獲得每個 option

二、判斷option是否被選中

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

** selected = true; 選中

** selected = false;未選中

三、若是選中，把選擇的添加到右邊去

四、獲得 select2

五、添加選擇的部分

* 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) {

/* 實現步驟：

一、遍歷二維數組

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

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

四、若是相同，獲取到第一個值後面的元素

五、獲得 city 的 select

六、添加過去使用 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。