JavaWeb進修筆記分享(必看篇)。本站提示廣大學習愛好者：（JavaWeb進修筆記分享(必看篇)）文章只能為提供參考，不一定能成為您想要的結果。以下是JavaWeb進修筆記分享(必看篇)正文
自界說列表
<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.百度.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.百度.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.百度.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 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.百度.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.百度.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" >
<div>
<select id="select1" multiple="multiple" >
<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" >
<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進修筆記分享(必看篇)就是小編分享給年夜家的全體內容了，願望能給年夜家一個參考，也願望年夜家多多支撐。
