自定義列表
<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中添加#（占位符）就可以了
**定位資源
--如果想要定位資源：定義一個位置
<a name="top">頂部</a>
--回到這個位置
<a href="#top">回到頂部</a>
--原樣輸出標簽：<pre>需要原樣輸入的內容</pre>
表格標簽
*作用：可以對數據進行格式化，使數據顯示更加清晰
*屬性 border(表格線粗細) bordercolor(表格線顏色) cellspacing(單元格間距離) width height
*<table></table> ： 表示表格的范圍
**在table里面，表示一行 <tr></tr>
--設置對齊方式 align ：left center right
***在tr里面，表示一行里邊的單元格 <td></td>
**使用th也可以表示單元格：表示可以實現居中和加粗
*表格的標題，放在table里邊 <caption></caption>
*操作技巧：
**首先數有多少行，在數每行里面有多少個單元格
*合并單元格
**rowspan ：跨行（縱向合并）
<td rowspan="3" align="center">13</td>
**colspan ：跨列（橫向合并）
<td colspan="3" align="center">表格練習</td>
表單標簽
*例如注冊開心網時，可以提交數據到開心網的服務器，這個過程可以使用表單標簽實現
* <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">
<option value="0">請選擇</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
****實現默認選中的屬性
----selected="selected"
*** 文本域（如：注冊賬號時填寫個人信息簡介的方框）
<textarea cols="5" rows="20"></textarea>
***隱藏項（不會顯示在頁面上，但是存在于 html代碼里面）
<input type="hidden"/>
***提交按鈕
<input type="submit"/>
<input type="submit" value="按鈕標題"/>
--提交之前地址：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形式
***使用（點擊）圖片來提交
<input type="image" src="圖片路徑"/>
***重置按鈕 ：回到輸入項的初始狀態
<input type="reset"/>
<input type="reset" value="按鈕標題"/>
***普通按鈕（和js在一起使用的）
<input type="button" value=""/>
案例：使用表單標簽實現注冊頁面
表格單元格內容為空時，一般用占位符（ (轉義空格)）來填充
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 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>
知識總結
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>
<style type="text/css">
div{
background-color:blue;
color:red;
}
</style>
</head>
<body>
<div id="" class="">
天之道，損有余而補不足，是故虛勝實，不足勝有余。
</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>
<style type="text/css">
div{
background-color:blue;
color:red;
}
</style>
</head>
<body>
<div>aaaaaa</div>
</body>
2）class選擇器 .名稱 {}
**每個html標簽都有一個屬性 class
**<head>
<style type="text/css">
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>
<style type="text/css">
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>
<style type="text/css">
div p {
background-color:blue;
color:red;
}
</style>
</head>
--<body>
<div><p>wwwwwwwwww</p></div>
<p>aaaaaa</p>
</body>
2）組合選擇器 不同標簽設置相同的樣式
**<div>1111</div>
<p>2222</p>
**把div和p標簽設置成相同的樣式，把不同的標簽設置成相同的樣式
--<head>
<style type="text/css">
div,p {
background-color:blue;
color:red;
}
</style>
</head>
--<body>
<div>1111</div>
<p>2222</p>
</body>
3）偽（類）元素選擇器
** css里面提供了一些定義好的樣式，可以拿過來使用
**比如 超鏈接
**超鏈接的狀態
--原始狀態 鼠標放上去 點擊 點擊之后
:link :hover :active :visited
代碼實現：
<head>
<style type="text/css">
/*原始狀態*/
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>
<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) 內邊距 padding ：統一設置 內容距離上下左右四條邊的距離
也可以分別設置：上下左右
<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 ：統一設置 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>
<input type="button" value="JumpBaidu" onclick="href1();"/>
<script type="text/javascript">
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>
<input type="text" id="nameid" value="aaaaa"/><br/>
<script type="text/javascript">
// 使用getElementById得到input標簽的對象
var input1 = document.getElementById("nameid");
// 得到input里面的value值
alert(input1.value);
// 向input里面設置一個值value
input1.value = "bbbbbbb";
</script>
</body>
-- getElementsByName(); 通過標簽的name的屬性值得到標簽，返回的是一個集合（數組）
<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"); // 傳遞的參數是標簽里面的name的值
for(var i =0;i<input1.length;i++) { // 通過遍歷，得到每個標簽里面的具體的值
var inputs = input1[i]; // 每次循環得到input對象，賦值到inputs里面
alert(inputs.value); // 得到每個input標簽里面的value值
}
</script>
</body>
-- getElementsByTagName("標簽的名稱"); 返回的是一個集合（數組）
<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"); //傳遞的參數是標簽的名稱
for(var i =0;i<inputs1.length;i++) {
var input1 = inputs1[i];
alert(input1.value);
}
</script>
</body>
****注意的地方：只有一個標簽，這個標簽只能使用name獲取到，這個時候，使用getElementsByName返回的是一個數組，但是現在只有一個元素，這個時候不需要遍歷，而是可以直接通過數組的下標獲取到值
<input type="text" name="name1" value="aaaaa"/>
var input1 = document.getElementsByName("name1")[0];
alert(input1.value);
案例：window彈窗案例
**實現過程：1）需要創建一個頁面：兩個輸入項和一個按鈕，按鈕上邊有一個事件，作用是彈出一個新窗口
2）創建彈出頁面：表格 每一行表格上有一個按鈕和編號和姓名；按鈕上有一個事件:把當前的編號和姓名，賦值到第一個頁面相應的位置
**跨頁面的操作 opener :可以得到創建這個窗口的窗口，也就是可以得到父窗口
案例：在末尾添加節點
1）創建li標簽
2）創建文本
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標簽
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 type="text" name="name1" id="inputid" value="aaaa"/>
<script type="text/javascript">
// 先要獲取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>
<ul id="ulid1">
<li>aaaaaa</li>
<li>bbbbbb</li>
<li>cccccc</li>
</ul>
<script>
// 獲取到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>
<span id="spanid">文本內容</span>
<script type="text/javascript">
// 獲取標簽對象
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>
<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的第一個子節點
// 得到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 id="ulid21">
<li id="li11">西施</li>
<li id="li12">王昭君</li>
<li id="li13">貂蟬</li>
<li id="li14">楊玉環</li>
</ul>
<input type="button" value="insert" onclick="insert1();"/>
<script type="text/javascript">
// 在<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 id="ulid31">
<li id="li21">西施</li>
<li id="li22">王昭君</li>
<li id="li23">貂蟬</li>
<li id="li24">楊玉環</li>
</ul>
<input type="button" value="remove" onclick="remove1();"/>
<script type="text/javascript">
// 刪除<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 id="ulid41">
<li id="li31">西施</li>
<li id="li32">王昭君</li>
<li id="li33">貂蟬</li>
<li id="li34">楊玉環</li>
</ul>
<div id="divv">
</div>
<input type="button" value="clone" onclick="clone1();"/>
<script type="text/javascript">
// 把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>
<span id="sid">測試文本</span>
<div id="div11">
</div>
<script type="text/javascript">
// 獲取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 id="times">
</div>
<script type="text/javascript">
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/>
<input type="button" value="全選" onclick="selAll();"/>
<input type="button" value="全不選" onclick="selNo();"/>
<input type="button" value="反選" onclick="selOther();"/>
<script type="text/javascript">
// 實現全選操作
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>
<option>111</option>
<option>111</option>
</select>
** 創建一個頁面
** 兩個下拉框 設置屬性multiple
** 四個按鈕， 都有事件
** 代碼實現：
<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">
// 實現選中添加到右邊
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 id="countryid" onchange="add1(this.value);">
<option value="0">--請選擇--</option>
<option value="中國">中國</option>
<option value="美國">美國</option>
<option value="德國">德國</option>
<option value="日本">日本</option>
</select>
<select id="cityid">
<option value="" selected>
<option value="">
</select>
<script type="text/javascript">
// 創建一個數組存儲數據
// 使用二維數組
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學習筆記分享(必看篇)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持服務器之家。
