JavaWeb學(xué)習(xí)筆記分享(必看篇)
自定義列表
<dl></dl>：表示列表的范圍
**在里面 <dt></dt>：上層內(nèi)容
**在里面 <dd></dd>：下層內(nèi)容
有序列表
<ol></ol>：有序列表的范圍
--屬性 type：設(shè)置排序方式，1(默認(rèn)),a,i、、
**在ol標(biāo)簽里面 <li>具體內(nèi)容</li>
無序列表
<ul></ul>：無序列表的范圍
--屬性 type：circle(空心圓)、disc(默認(rèn)的實(shí)心圓)、square(實(shí)心方塊)
**在ul標(biāo)簽里面 <li>具體內(nèi)容</li>
圖像標(biāo)簽
--屬性：src、width、height、alt(圖片上顯示的文字，把鼠標(biāo)移動(dòng)到圖片上，停留片刻顯示內(nèi)容 或者是圖片顯示出錯(cuò)時(shí)顯示的文字，但有些瀏覽器不顯示，沒有效果)
** <img src="圖片的路徑"/>
路徑的介紹
*分類：兩類
**絕對(duì)路徑 eg. http://www.baidu.com/b.jpg
***三種相對(duì)路徑 一個(gè)文件相對(duì)于另外一個(gè)文件的位置
--html文件和圖片在同一個(gè)路徑(目錄)下，可以直接寫文件名稱
--在html文件中，使用與其在同一個(gè)路徑下的img文件夾下的a.jpg文件 使用方法：img\a.jpg
**d:\htmlstudy\code\4.html
**d:\htmlstudy\code\img\a.jpg
--圖片在html文件的上層目錄中，此時(shí)圖片使用方法：../c.png ../表示上層路徑
超鏈接標(biāo)簽
**鏈接資源
-- <a href="鏈接到資源的路徑">顯示在頁面上的內(nèi)容</a>
**href：鏈接的資源的地址
**target：設(shè)置打開的方式，默認(rèn)是在當(dāng)前頁打開
--_blank ：在一個(gè)新窗口打開
--_self ：在當(dāng)前頁打開 默認(rèn)的
--<a href="#">鏈接標(biāo)題</a>：當(dāng)超鏈接不需要跳轉(zhuǎn)到頁面時(shí)，在href中添加#（占位符）就可以了
**定位資源
--如果想要定位資源：定義一個(gè)位置
<a name="top">頂部</a>
--回到這個(gè)位置
<a href="#top">回到頂部</a>
--原樣輸出標(biāo)簽：<pre>需要原樣輸入的內(nèi)容</pre>
表格標(biāo)簽
*作用：可以對(duì)數(shù)據(jù)進(jìn)行格式化，使數(shù)據(jù)顯示更加清晰
*屬性 border(表格線粗細(xì)) bordercolor(表格線顏色) cellspacing(單元格間距離) width height
*<table></table> ： 表示表格的范圍
**在table里面，表示一行 <tr></tr>
--設(shè)置對(duì)齊方式 align ：left center right
***在tr里面，表示一行里邊的單元格 <td></td>
**使用th也可以表示單元格：表示可以實(shí)現(xiàn)居中和加粗
*表格的標(biāo)題，放在table里邊 <caption></caption>
*操作技巧：
**首先數(shù)有多少行，在數(shù)每行里面有多少個(gè)單元格
*合并單元格
**rowspan ：跨行（縱向合并）
<td rowspan="3" align="center">13</td>
**colspan ：跨列（橫向合并）
<td colspan="3" align="center">表格練習(xí)</td>
表單標(biāo)簽
*例如注冊(cè)開心網(wǎng)時(shí)，可以提交數(shù)據(jù)到開心網(wǎng)的服務(wù)器，這個(gè)過程可以使用表單標(biāo)簽實(shí)現(xiàn)
* <form></form> ：定義一個(gè)表單范圍
*屬性：
** action ：提交到的地址，默認(rèn)提交到 當(dāng)前的頁面
** method ： 表單的提交方式
--常用的有兩種： get 和 post ，默認(rèn)是get請(qǐng)求
** get 和 post 的區(qū)別
1）get請(qǐng)求地址欄會(huì)攜帶提交的數(shù)據(jù)，post不會(huì)攜帶（數(shù)據(jù)在請(qǐng)求體里面）
2）get請(qǐng)求安全級(jí)別較低，post較高
3）get請(qǐng)求數(shù)據(jù)大小有限制，post沒有限制
** enctype ：一般請(qǐng)求下不需要這個(gè)屬性，做文件上傳時(shí)候需要設(shè)置這個(gè)屬性
**輸入項(xiàng)：可以輸入內(nèi)容或者選擇內(nèi)容的部分
--大部分的輸入項(xiàng)可使用 <input type="輸入項(xiàng)類型"/>
********在輸入項(xiàng)里面需要有一個(gè)name屬性
***普通輸入項(xiàng)：<input type="text"/>
***密碼輸入項(xiàng)：<input type="password"/>
***單選輸入項(xiàng)：<input type="radio"/>
--在里邊需要屬性 name
--name的屬性值必須要相同
--必須要有一個(gè)value值
****實(shí)現(xiàn)默認(rèn)選中的屬性
***checked="checked"
***復(fù)選輸入項(xiàng)：<input type="checkbox"/>
**在里邊需要屬性 name
**name的屬性值必須要相同
**必須要有一個(gè)value值
****實(shí)現(xiàn)默認(rèn)選中的屬性
----checked="checked"
***文件輸入項(xiàng)：<input type="file"/>
***下拉輸入項(xiàng)（不是在input標(biāo)簽里面的）
<select name="birth">
<option value="0">請(qǐng)選擇</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
****實(shí)現(xiàn)默認(rèn)選中的屬性
----selected="selected"
*** 文本域（如：注冊(cè)賬號(hào)時(shí)填寫個(gè)人信息簡(jiǎn)介的方框）
<textarea cols="5" rows="20"></textarea>
***隱藏項(xiàng)（不會(huì)顯示在頁面上，但是存在于 html代碼里面）
<input type="hidden"/>
***提交按鈕
<input type="submit"/>
<input type="submit" value="按鈕標(biāo)題"/>
--提交之前地址：C:\Users\HappyDog\Desktop\index.html
**當(dāng)在輸入項(xiàng)里面寫了name屬性之后
--file:///c:/users/happydog/desktop/index.html?phone=123123&pwd=12321312&sex=man&love=y&love=pp&birth=1992&tex=1231245
**?輸入項(xiàng)name的值=輸入的值&
**參數(shù)類似于key-value形式
***使用（點(diǎn)擊）圖片來提交
<input type="image" src="圖片路徑"/>
***重置按鈕 ：回到輸入項(xiàng)的初始狀態(tài)
<input type="reset"/>
<input type="reset" value="按鈕標(biāo)題"/>
***普通按鈕（和js在一起使用的）
<input type="button" value=""/>
案例：使用表單標(biāo)簽實(shí)現(xiàn)注冊(cè)頁面
表格單元格內(nèi)容為空時(shí)，一般用占位符（ (轉(zhuǎn)義空格)）來填充
html中的其他的常用標(biāo)簽的使用
** b(加粗) s(刪除線) u(下劃線) i(斜體) pre(原樣輸出) sub(下標(biāo)) sup(上標(biāo)) div(自動(dòng)換行) span(在一行顯示) p(段落標(biāo)簽)
html的頭標(biāo)簽的使用
**html兩部分組成 head 和 body
**在head里面的標(biāo)簽就是頭標(biāo)簽
**title標(biāo)簽：表示在標(biāo)簽上顯示的內(nèi)容
**<meta>標(biāo)簽 ：設(shè)置頁面的一些相關(guān)內(nèi)容
--<meta name="keywords" content="" />
--<meta http-equiv="refresh" content="10;url=Test_form.html" />定時(shí)跳轉(zhuǎn)到指定頁面
**base標(biāo)簽 ：設(shè)置超鏈接的基本的設(shè)置
--可以統(tǒng)一設(shè)置超鏈接的打開方式 <base target="_blank" />
**link標(biāo)簽 ：引入外部文件
框架標(biāo)簽的使用
**<frameset>
**rows ：按照行進(jìn)行劃分
<frameset rows="80,*"> 分成上下兩部分，上邊80，下邊任意
**cols ：按照列進(jìn)行劃分
<frameset cols="80,*"> 分成左右兩部分，左邊80，右邊任意
**<frame> 具體顯示的頁面
**<frame name="lower_left" src="b.html">
*使用框架標(biāo)簽的時(shí)候，不能寫在head和body里面，使用了框架標(biāo)簽，需要把body去掉，寫在head外邊
*如果在左邊的頁面超鏈接，想讓內(nèi)容顯示在右邊的頁面中，可以設(shè)置超鏈接里面的target屬性，將target的值設(shè)置為框架中的名字
**<a target="right">百度</a><br/>
<frameset rows="80,*">
<frame name="top" src="a.html">
<frameset cols="120,*">
<frame name="left" src="b.html">
<frame name="right" src="http://www.baidu.com">
</frameset>
</frameset>
知識(shí)總結(jié)
1）html操作思想：使用標(biāo)簽把要操作的數(shù)據(jù)包起來，通過修改標(biāo)簽的屬性值，來實(shí)現(xiàn)標(biāo)簽內(nèi)數(shù)據(jù)樣式的變化
2）font標(biāo)簽 屬性：size 取值范圍1-7 color：十六進(jìn)制數(shù) #ffffff
3）標(biāo)題標(biāo)簽 <h1></h1>......<h6></h6> ：從h1到h6字體越來越小，自動(dòng)換行
4）注釋
CSS的簡(jiǎn)介
**CSS：層疊樣式表
** 層疊：一層一層的
** 樣式表：很多的屬性和屬性值
**使頁面顯示效果更加好
**CSS將網(wǎng)頁內(nèi)容和顯示樣式進(jìn)行分離，提高了顯示功能
CSS和html的結(jié)合方式（四種結(jié)合方式）
1）在每個(gè)html標(biāo)簽上面都有一個(gè)屬性 style，把CSS和html結(jié)合在一起
-- <div style="background-color:red;color:green;" id="" class="" >天之道，損有余而補(bǔ)不足，是故虛勝實(shí)，不足勝有余。</div>
2）使用html的一個(gè)標(biāo)簽實(shí)現(xiàn) <style>標(biāo)簽，寫在head里面
-- <style type="text/css">
css代碼;
</style>
----代碼實(shí)現(xiàn)<head>
<style type="text/css">
div{
background-color:blue;
color:red;
}
</style>
</head>
<body>
<div id="" class="">
天之道，損有余而補(bǔ)不足，是故虛勝實(shí)，不足勝有余。
</div>
</body>
3）在style標(biāo)簽里面 使用語句
@import url(css文件的路徑)；
-- 第一步：創(chuàng)建一個(gè)css文件
---- <style type="text/css">
@import url(div.css);
</style>
4）使用頭標(biāo)簽 link，引入外部css文件 放在<head></head>里邊
-- 第一步：創(chuàng)建一個(gè)css文件
-- <link rel="stylesheet" type="text/css" href="css文件的路徑"/>
****第三種結(jié)合方式的缺點(diǎn)：在某些瀏覽器下不起作用，一般使用第四種方式
****優(yōu)先級(jí)（一般）
由上到下，由內(nèi)到外，優(yōu)先級(jí)由低到高。
后加載的優(yōu)先級(jí)高
****格式：選擇器名稱{屬性名:屬性值;屬性名:屬性值;......}
css的基本選擇器（三種）
**要對(duì)那個(gè)標(biāo)簽里面的數(shù)據(jù)進(jìn)行操作
1）標(biāo)簽選擇器 div {css代碼}
--使用標(biāo)簽名作為選擇器的名稱
<head>
<style type="text/css">
div{
background-color:blue;
color:red;
}
</style>
</head>
<body>
<div>aaaaaa</div>
</body>
2）class選擇器 .名稱 {}
**每個(gè)html標(biāo)簽都有一個(gè)屬性 class
**<head>
<style type="text/css">
div.test{
background-color:blue;
color:red;
}
p.test{
background-color:blue;
color:red;
}
可以簡(jiǎn)寫為：
.test{
background-color:blue;
color:red;
}
</style>
</head>
**<body>
<div class="test">aaaaaa</div>
<p class="test">bbbbbbbbb</p>
</body>
3）id選擇器 #名稱 {}
**每個(gè)html標(biāo)簽上面都有一個(gè)屬性 id
--<div id="test">cccccccccc</div>
--<head>
<style type="text/css">
div#test{
background-color:blue;
color:red;
}
p#test{
background-color:blue;
color:red;
}
可以簡(jiǎn)寫為：
#test {
background-color:blue;
color:red;
}
</style>
</head>
--<body>
<div id="test">aaaaaa</div>
<p id="test">bbbbbbbbb</p>
</body>
**優(yōu)先級(jí) style > id選擇器 > class選擇器 > 標(biāo)簽選擇器
css的擴(kuò)展選擇器(了解)
1）關(guān)聯(lián)選擇器 嵌套標(biāo)簽的樣式的設(shè)置
**<div><p>wwwwwwwwww</p></div>
**設(shè)置div標(biāo)簽里面p標(biāo)簽的樣式，嵌套標(biāo)簽里面的樣式
--<head>
<style type="text/css">
div p {
background-color:blue;
color:red;
}
</style>
</head>
--<body>
<div><p>wwwwwwwwww</p></div>
<p>aaaaaa</p>
</body>
2）組合選擇器 不同標(biāo)簽設(shè)置相同的樣式
**<div>1111</div>
<p>2222</p>
**把div和p標(biāo)簽設(shè)置成相同的樣式，把不同的標(biāo)簽設(shè)置成相同的樣式
--<head>
<style type="text/css">
div,p {
background-color:blue;
color:red;
}
</style>
</head>
--<body>
<div>1111</div>
<p>2222</p>
</body>
3）偽（類）元素選擇器
** css里面提供了一些定義好的樣式，可以拿過來使用
**比如 超鏈接
**超鏈接的狀態(tài)
--原始狀態(tài) 鼠標(biāo)放上去 點(diǎn)擊 點(diǎn)擊之后
:link :hover :active :visited
代碼實(shí)現(xiàn)：
<head>
<style type="text/css">
/*原始狀態(tài)*/
a:link {
background-color:red;
}
/*懸停狀態(tài)*/
a:hover {
background-color:green;
}
/*點(diǎn)擊狀態(tài)*/
a:active {
background-color:blue;
}
/*點(diǎn)擊之后狀態(tài)*/
a:visited {
background-color:gray;
}
</style>
</head>
<body>
<a >點(diǎn)擊鏈接到百度網(wǎng)頁</a>
</body>
css的盒子模型(了解) 對(duì)數(shù)據(jù)進(jìn)行操作，需要把數(shù)據(jù)放到一個(gè)區(qū)域里面（div）
1）邊框 border ：統(tǒng)一設(shè)置
也可以分別設(shè)置：上 border-top 下：border-bottom 左：border-left 右：border-right
--<head>
<style type="text/css">
div {
width: 200px;
height: 100px;
border: 2px solid blue;
}
#div12 {
border-right: 2px dashed yellow;
}
</style>
</head>
--<body>
<div id="div11">AAAAAAAAA</div>
<div id="div12">BBBBBBBBB</div>
</body>
2) 內(nèi)邊距 padding ：統(tǒng)一設(shè)置 內(nèi)容距離上下左右四條邊的距離
也可以分別設(shè)置：上下左右
<head>
<style type="text/css">
div {
width: 200px;
height: 100px;
border: 2px solid blue;
}
#div21 {
padding: 20px;
}
#div22 {
padding-left: 30px;
}
</style>
</head>
<body>
<div id="div21">AAAAAAAAA</div>
<div id="div22">BBBBBBBBB</div>
</body>
3) 外邊距 margin ：統(tǒng)一設(shè)置 div距離最外邊四條邊的距離
也可以分別設(shè)置：上下左右。。。
css的布局的漂?。私猓?float ：left right
css的布局的定位 (了解)
*position
**屬性值：
--static：默認(rèn)值，無特殊定位
--absolute：
將對(duì)象從文檔流中拖出，使用left,right,top,bottom等屬性相對(duì)于其進(jìn)行絕對(duì)定位
--relative：不會(huì)將對(duì)象從文檔流中拖出，對(duì)象不可層疊，但將依據(jù)left,right,top,bottom等屬性在正常文檔流中偏移位置。
案例：圖文混排案例
**圖片和文字在一起顯示
案例：圖像簽名
javascript的簡(jiǎn)介：是基于對(duì)象和事件驅(qū)動(dòng)的腳本語言，主要應(yīng)用在客戶端
*基于對(duì)象：提供好了很多對(duì)象，可以直接拿過來使用
*事件驅(qū)動(dòng)：html做網(wǎng)站靜態(tài)效果，javascript動(dòng)態(tài)效果
*客戶端：專門指的是瀏覽器
* js的特點(diǎn)：
1）交互性 信息的動(dòng)態(tài)交互
2）安全性 js不能訪問本地磁盤的文件
3）跨平臺(tái)性 java里面跨平臺(tái)性，虛擬機(jī)；只要能夠支持js的瀏覽器，都可以運(yùn)行
*javascript和java的區(qū)別：兩者之間沒有什么任何關(guān)系
1）java是sun公司，現(xiàn)在是Oracle；js是網(wǎng)景公司
2）java是面向?qū)ο蟮?，js是基于對(duì)象的
3）java是強(qiáng)類型的語言，js是弱類型的語言
--比如：java里面 int i = "10";會(huì)報(bào)錯(cuò)
--js: var i = 10; var i = "10";都不報(bào)錯(cuò)
4）js只需要解析就可以執(zhí)行，而java需要先編譯成字節(jié)碼文件，在執(zhí)行
*js的組成（三部分）：
1）ECMAScript
-- ECMA ：歐洲計(jì)算機(jī)協(xié)會(huì)
--由ECMA組織制定的js語法，語句...
2）BOM
--broswer object model:瀏覽器對(duì)象模型
3）DOM
--document object model：文檔對(duì)象模型
js與html的結(jié)合方式（兩種）
1）使用一個(gè)標(biāo)簽 <script type="text/javascript"> js代碼；</script>
2）使用script標(biāo)簽，引入一個(gè)外部的js文件
-- 創(chuàng)建一個(gè)js文件，寫js代碼
-- <script type="text/javascript" src="js的路徑"></script>
注意：使用第二種方式的時(shí)候，就不要在script標(biāo)簽里面寫js代碼了，不會(huì)執(zhí)行
js的原始類型和聲明變量
*java的基本數(shù)據(jù)類型：byte short int long float double char bolean
*js定義變量 都是用關(guān)鍵字 var
*js的原始類型（五個(gè)）
--string 字符串 var str = "abc";
--number 數(shù)字類型 var m = 123;
--boolean true和false var flag = true;
--null var date = new Date();
**獲取對(duì)象的引用，null表示對(duì)象引用為空，所有對(duì)象的引用也是object
--undifined 定義一個(gè)變量，但是沒有賦值 var aa;
* typeof(變量名稱) 查看當(dāng)前變量的數(shù)據(jù)類型
js的語句
**java里面的語句 if判斷("="表示賦值；"=="等于，表示判斷) switch語句 循環(huán)語句（for while do-while）
**js里面的這些語句
--if判斷語句
--switch(a) {
case 5: ...
break;
case 6: ...
break;
default:...
........
}
**循環(huán)語句 for while do-while
--var i = 5;
while(i>0) {
alert(i);
i--;
}
--for(var i = 0;i<=5;i++){
alert(i);
}
js的運(yùn)算符
**js里面不區(qū)分整數(shù)和小數(shù)
--var j = 123;
alert(j/1000*1000);
** j/1000*1000 在java里面得到結(jié)果是0
** 在js里面不區(qū)分整數(shù)和小數(shù)， 123/1000*1000 = 0.123*1000 = 123
**字符串的相加和相減的操作
--var str = "123";
alert(str + 1); 在java和js中的結(jié)果都是1231，做的是字符串的連接
alert(str - 1); 相減時(shí)候，執(zhí)行減法的運(yùn)算，如果str中不是數(shù)字，會(huì)提示NaN：表示不是一個(gè)數(shù)字
**boolean類型也可以操作
***如果設(shè)置成true，相當(dāng)于這個(gè)值是1；如果設(shè)置成false，相當(dāng)于這個(gè)值是0；
** == 和 === 區(qū)別
**都是做判斷
** == 比較的只是值； === 比較的是值和類型
**直接向頁面輸出的語句（可以把內(nèi)容顯示在頁面上），可以向頁面輸出變量，固定值和html代碼。Document.write("") 里面是雙引號(hào)，如果設(shè)置標(biāo)簽的屬性需要使用單引號(hào)。
-- document.write("aaaa");
-- document.write("<hr/>");
***document.write("<table border='1' bordercolor='red'>");
***document.write("</table>");
練習(xí)：實(shí)現(xiàn)99乘法表
js的數(shù)組
*java里面的數(shù)組 定義 int[] arr = {1,2,3};
*js數(shù)組的定義方式（三種）
1）var arr = [1,2,3];var arr = [1,"2",3];var arr = [1,2,true]; 都可以
2）使用內(nèi)置對(duì)象 Array對(duì)象
var arr1 = new Array(5); // 定義一個(gè)數(shù)組，數(shù)組的長度是5
arr1[0] = "1";
......
3）使用內(nèi)置對(duì)象 Array對(duì)象
var arr2 = new Array(3,4,5); // 定義一個(gè)數(shù)組，數(shù)組里的元素是3,4,5
* 數(shù)組里面有一個(gè)屬性 length ：獲取到數(shù)組的長度
* 數(shù)組的長度是可變的，數(shù)組可以存放不同的數(shù)據(jù)類型的數(shù)據(jù)。
js的函數(shù)（方法）
**在js里面定義函數(shù)（方法）有三種方式 函數(shù)的參數(shù)列表里面，不需要寫var，直接寫參數(shù)名稱
1）使用到一個(gè)關(guān)鍵字 function
*** function 方法名(參數(shù)列表) {
方法體;
返回值可有可無（根據(jù)實(shí)際需要）;
}
代碼實(shí)現(xiàn)：// 使用第一種方式創(chuàng)建函數(shù)
function test() {
alert("qqqqqq");
}
// 調(diào)用方法
test();
// 定義一個(gè)有參數(shù)的方法 實(shí)現(xiàn)兩個(gè)數(shù)的相加
function add1(a,b) {
var sum = a+b;
alert(sum);
}
add1(3,5);
function add2(a,b,c) {
var sum1 = a+b+c;
return sum1;
}
alert(add2(7,8,9));
2）匿名函數(shù)
var add = function(參數(shù)列表) {
方法體和返回值;
}
代碼實(shí)現(xiàn)： var add3 = function(m,n) {
alert(m+n);
}
// 調(diào)用方法
add3(8,9);
3）一般也稱為動(dòng)態(tài)函數(shù)，用的少，了解即可
*使用到j(luò)s里面的一個(gè)內(nèi)置對(duì)象 Function
var add = new Function("參數(shù)列表","方法體和返回值");
var add4 = new Function("x,y","var sum;sum=x+y;return sum;");
alert(add4(9,10));
// 或者下邊的代碼
var canshu = "x,y";
var fangfati = "var sum;sum=x+y;return sum;";
var add4 = new Function(canshu,fangfati);
alert(add4(5,3));
js的全局變量和局部變量
**全局變量：在script標(biāo)簽里面定義一個(gè)變量，這個(gè)變量在頁面中js部分都可以使用
--在方法外部使用，在方法內(nèi)部使用，在另一個(gè)script標(biāo)簽使用
**局部變量：在方法內(nèi)部定義一個(gè)變量，只能在方法內(nèi)部使用
--只能在方法內(nèi)部使用，如果在方法的外部調(diào)用這個(gè)變量，提示出錯(cuò)
--ie自帶了一個(gè)調(diào)試工具，ie8以上的版本中，鍵盤上的F12,再頁面下方出現(xiàn)一個(gè)條 看控制臺(tái)可以看到錯(cuò)誤
script標(biāo)簽應(yīng)該放置的位置
**建議把script標(biāo)簽放到</body>后面
**如果現(xiàn)在有這樣一個(gè)需求：
--在js里面需要獲取到input里面的值，如果把script標(biāo)簽放在head里面，會(huì)出現(xiàn)問題
--html解析是從上到下解析的，script標(biāo)簽放到的是head里面，直接在里面取input的值，因?yàn)轫撁孢€沒有解析到input那一行，肯定取不到
js的重載 js不存在重載，但是可以模擬實(shí)現(xiàn)
例子：function add11(a,b) {
return a+b;
}
function add11(a,b,c) {
return a+b+c;
}
function add11(a,b,c,d) {
return a+b+c+d;
}
alert(add11(2,2)); // NaN
alert(add11(2,2,3)); // NaN
alert(add11(2,2,4,5)); // 13
js的String對(duì)象
** 創(chuàng)建String對(duì)象 var str = "abc'；
**方法和屬性（文檔）
--屬性 length ：字符串的長度
--方法
1）與html相關(guān)的方法
-- bold():加粗 fontcolor():設(shè)置字符串的顏色 fontsize():設(shè)置字體的大小 link():將字符串顯示成超鏈接
2）與java相似的方法
--concat():連接字符串 charAt():返回指定位置的字符串 indexOf():返回字符串位置 split():切分字符串 成數(shù)組 replace("",""):替換字符串--傳遞兩個(gè)參數(shù)：第一個(gè)參數(shù)是原始字符，第二個(gè)參數(shù)是要替換成的字符 substr(5,3)從第五位開始，向后截取三個(gè)字符 substring(3,5) 從第三位開始包括第三位到第五位結(jié)束，不包括第五位 [3,5)
js的Array對(duì)象
**創(chuàng)建數(shù)組的三種方法
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 = []; //創(chuàng)建一個(gè)空數(shù)組
**屬性 length：查看數(shù)組的長度
**方法
concat();連接數(shù)組 join();根據(jù)指定的字符分割數(shù)組 push();向數(shù)組末尾添加元素，返回?cái)?shù)組的新的長度**如果添加的是一個(gè)數(shù)組，這個(gè)時(shí)候把數(shù)組當(dāng)做一個(gè)整體字符串添加進(jìn)去 pop();刪除并返回?cái)?shù)組的最后一個(gè)元素 reverse();顛倒數(shù)組中的元素的順序
js的Date對(duì)象
** 在java里面獲取當(dāng)前時(shí)間
Date date = new Date();
// 格式化 //toLocaleString()
** js里面獲取當(dāng)前時(shí)間
var date = new Date();
// 轉(zhuǎn)換成習(xí)慣的格式 date.toLocaleString();
js的Math對(duì)象 數(shù)學(xué)的運(yùn)算
** 里面的都是靜態(tài)方法，使用可以直接使用 Math.方法();
js的全局函數(shù)
**由于不屬于任何一個(gè)對(duì)象，直接寫名稱使用
** eval(); 執(zhí)行js代碼(如果字符串是一個(gè)js代碼，使用方法直接執(zhí)行)
-- var str = "alert('1234');";
// alert(str); //alert('1234');
eval(str); // 1234
** .....
js的函數(shù)的重載 什么是重載？方法名相同，參數(shù)不同
*js不存在函數(shù)的重載，只會(huì)調(diào)用最后一個(gè)方法，但是可以通過其他方式模擬重載。js的函數(shù)把傳遞的參數(shù)保存到 arguments數(shù)組里面 可以利用判斷arguments數(shù)組的長度 來對(duì)應(yīng)返回不同的處理結(jié)果
模擬重載效果代碼實(shí)現(xiàn)：
function add1() {
if(arguments.length ==2 ) {
return arguments[0] + arguments[1];
} else if ( arguments.length == 3) {
return arguments[0] + arguments[1] + arguments[2];
} else if ( arguments.length == 4) {
return arguments[0] + arguments[1] + arguments[2] + arguments[3];
} else {
return 0;
}
}
// 調(diào)用
alert(add1(1,2)); //3
alert(add1(1,2,3)); //6
alert(add1(1,2,3,4)); //10
alert(add1(1,2,3,4,5)); //0
js的bom對(duì)象
**bom ：broswer object model:瀏覽器對(duì)象模型
**有哪些對(duì)象？
-- navigator ：獲取客戶機(jī)的信息（瀏覽器的信息）
-- screen : 獲取屏幕的信息
-- location ：請(qǐng)求的url地址
*** href屬性
1）獲取到請(qǐng)求的url地址
--document.write(location.href);
2）設(shè)置url地址
--頁面上安置一個(gè)按鈕，按鈕上綁定一個(gè)事件，當(dāng)點(diǎn)擊這個(gè)按鈕，頁面可以跳轉(zhuǎn)到另外一個(gè)頁面
<body>
<input type="button" value="JumpBaidu" onclick="href1();"/>
<script type="text/javascript">
function href1() {
//alert("aaaa");
location.;
}
</script>
</body>
-- history ：請(qǐng)求的url的歷史記錄
-- 創(chuàng)建三個(gè)頁面（模擬上下歷史的效果）
1）創(chuàng)建一個(gè)頁面a.html 寫一個(gè)超鏈接 到 b.html
2）創(chuàng)建 b.html 超鏈接到 c.html
3）創(chuàng)建 c.html
-- 到訪問的上一個(gè)頁面
history.back();
history,go(-1);
-- 到訪問的下一個(gè)頁面
history.forward();
history.go(1);
-- window（重點(diǎn)掌握） 窗口對(duì)象 頂層對(duì)象（所有bom對(duì)象都是在window里面操作的）
**方法
-- window.alert(); 簡(jiǎn)寫為：alert(); 頁面彈出一個(gè)窗口，顯示內(nèi)容
-- confirm("顯示的消息內(nèi)容"); 確認(rèn)提示框 有返回值 true和false
-- prompt(); 輸入的對(duì)話框（現(xiàn)在使用的不多） ，有兩個(gè)參數(shù)：顯示內(nèi)容和默認(rèn)值
-- open("url地址","","窗口特征，比如窗口寬度和高度"); 打開一個(gè)新窗口
-- close(); 關(guān)閉窗口（瀏覽器兼容性比較差）
-- 做一些定時(shí)器
*** setInterval("js代碼",毫秒數(shù)); window.setInterval("alert('123');",3000); 表示每三秒執(zhí)行一次alert方法
*** setTimeout("js代碼",毫秒數(shù)); 表示在毫秒數(shù)之后執(zhí)行，但是只會(huì)執(zhí)行一次
***clearInterval(); 清除掉setInterval設(shè)置的定時(shí)器
-- var id1 = setInterval("alert('123');",3000);
clearInterval(id1);
***clearTimeout(); 清除掉setTimeout設(shè)置的定時(shí)器
js的dom對(duì)象
**dom ：document object model: 文檔對(duì)象類型
**文檔：超文本文檔（超文本標(biāo)記文檔） html、xml
**對(duì)象：提供了屬性和方法
**模型：使用屬性和方法操作超文本標(biāo)記型文檔
***可以使用js里面的dom里面提供的對(duì)象，使用這些對(duì)象的屬性和方法，對(duì)標(biāo)記型文檔進(jìn)行操作
***想要對(duì)標(biāo)記型文檔進(jìn)行操作，首先需要把標(biāo)記型文檔里面的所有內(nèi)容封裝成對(duì)象
-- 需要把html里面的標(biāo)簽、屬性、文本內(nèi)容都封裝成對(duì)象
***要想對(duì)標(biāo)記型文檔進(jìn)行操作，解析標(biāo)記型文檔
***解析過程：根據(jù)html的層級(jí)結(jié)構(gòu)，會(huì)在內(nèi)存中分配一個(gè)樹形結(jié)構(gòu)，需要把html中的每部分封裝成對(duì)象
*只能有一個(gè)根節(jié)點(diǎn)
在根節(jié)點(diǎn)下面可以有多個(gè)子節(jié)點(diǎn)，沒有子節(jié)點(diǎn)的節(jié)點(diǎn)稱為葉子節(jié)點(diǎn)
-- document對(duì)象：整個(gè)html文檔
-- element對(duì)象：標(biāo)簽對(duì)象
-- 屬性對(duì)象
-- 文本對(duì)象
** Node節(jié)點(diǎn)對(duì)象：是這些對(duì)象的父對(duì)象
DHTML：是很多技術(shù)的簡(jiǎn)稱
** html：封裝數(shù)據(jù)
** css：使用屬性和屬性值設(shè)置樣式
** dom：操作html文檔（標(biāo)記型文檔）
** javascript：專門指的是js的語法語句（ECMAScript）
document對(duì)象 表示整個(gè)文檔
**常用方法
-- write()方法：1)向頁面輸出變量 2)向頁面輸出html代碼
-- getElementById(); 表示通過id得到元素（標(biāo)簽）
<body>
<input type="text" id="nameid" value="aaaaa"/><br/>
<script type="text/javascript">
// 使用getElementById得到input標(biāo)簽的對(duì)象
var input1 = document.getElementById("nameid");
// 得到input里面的value值
alert(input1.value);
// 向input里面設(shè)置一個(gè)值value
input1.value = "bbbbbbb";
</script>
</body>
-- getElementsByName(); 通過標(biāo)簽的name的屬性值得到標(biāo)簽，返回的是一個(gè)集合（數(shù)組）
<body>
<input type="text" name="name1" value="aaaaa"/><br/>
<input type="text" name="name1" value="bbbb"/><br/>
<input type="text" name="name1" value="ccccc"/><br/>
<script type="text/javascript">
var input1 = document.getElementsByName("name1"); // 傳遞的參數(shù)是標(biāo)簽里面的name的值
for(var i =0;i<input1.length;i++) { // 通過遍歷，得到每個(gè)標(biāo)簽里面的具體的值
var inputs = input1[i]; // 每次循環(huán)得到input對(duì)象，賦值到inputs里面
alert(inputs.value); // 得到每個(gè)input標(biāo)簽里面的value值
}
</script>
</body>
-- getElementsByTagName("標(biāo)簽的名稱"); 返回的是一個(gè)集合（數(shù)組）
<body>
<input type="text" name="name1" value="aaaaa"/><br/>
<input type="text" name="name1" value="bbbb"/><br/>
<input type="text" name="name1" value="ccccc"/><br/>
<script type="text/javascript">
var inputs1 = document.getElementsByTagName("input"); //傳遞的參數(shù)是標(biāo)簽的名稱
for(var i =0;i<inputs1.length;i++) {
var input1 = inputs1[i];
alert(input1.value);
}
</script>
</body>
****注意的地方：只有一個(gè)標(biāo)簽，這個(gè)標(biāo)簽只能使用name獲取到，這個(gè)時(shí)候，使用getElementsByName返回的是一個(gè)數(shù)組，但是現(xiàn)在只有一個(gè)元素，這個(gè)時(shí)候不需要遍歷，而是可以直接通過數(shù)組的下標(biāo)獲取到值
<input type="text" name="name1" value="aaaaa"/>
var input1 = document.getElementsByName("name1")[0];
alert(input1.value);
案例：window彈窗案例
**實(shí)現(xiàn)過程：1）需要?jiǎng)?chuàng)建一個(gè)頁面：兩個(gè)輸入項(xiàng)和一個(gè)按鈕，按鈕上邊有一個(gè)事件，作用是彈出一個(gè)新窗口
2）創(chuàng)建彈出頁面：表格 每一行表格上有一個(gè)按鈕和編號(hào)和姓名；按鈕上有一個(gè)事件:把當(dāng)前的編號(hào)和姓名，賦值到第一個(gè)頁面相應(yīng)的位置
**跨頁面的操作 opener :可以得到創(chuàng)建這個(gè)窗口的窗口，也就是可以得到父窗口
案例：在末尾添加節(jié)點(diǎn)
1）創(chuàng)建li標(biāo)簽
2）創(chuàng)建文本
3）把文本加入到li下面
4）把li加入到ul下面
<body>
<ul id="ulid">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul> <br/>
<input type="button" value="add" onclick="add1();"/>
<script type="text/javascript">
function add1() {
// 獲取到ul標(biāo)簽
var ul1 = document.getElementById("ulid");
// 創(chuàng)建標(biāo)簽
var li1 = document.createElement("li");
// 創(chuàng)建文本
var tex1 = document.createTextNode("4444");
// 把文本加入到li下面
li1.appendChild(tex1);
// 把li加入到ul下面
ul1.appendChild(li1);
}
</script>
</body>
元素對(duì)象（element對(duì)象）：要操作element，首先必須要獲取到element 使用document里面相應(yīng)的方法獲取
**方法
****獲取屬性里面的值 getAttribute("屬性名稱");
****設(shè)置屬性的值 setAttribute(name,value);
****刪除屬性 removeAttribute("屬性名稱"); 不能刪除value
<input type="text" name="name1" id="inputid" value="aaaa"/>
<script type="text/javascript">
// 先要獲取input標(biāo)簽
var input1 = document.getElementById("inputid");
// alert(input1.value);
alert(input1.getAttribute("value")); //獲取屬性里面的值
alert(input1.getAttribute("class"));
input1.setAttribute("class","haha"); // 設(shè)置屬性的值
alert(input1.getAttribute("class"));
input1.removeAttribute("name");
</script>
** 想要獲取標(biāo)簽下面的子標(biāo)簽
**使用屬性 childNodes,但是這個(gè)屬性兼容性很差
**獲得標(biāo)簽下面子標(biāo)簽的唯一有效方法，使用getElementsByTagName方法
<body>
<ul id="ulid1">
<li>aaaaaa</li>
<li>bbbbbb</li>
<li>cccccc</li>
</ul>
<script>
// 獲取到ul標(biāo)簽
var ul1 = document.getElementById("ulid1");
// 獲取ul下面的子標(biāo)簽
// var lis = ul1.childNodes;//兼容性很差
// alert(lis.length); // 有的顯示的是3 有的顯示的是7
var lis = ul1.getElementsByTagName("li");
alert(lis.length);
</script>
</body>
Node對(duì)象的屬性
**nodeName
**nodeType
**nodeValue
**使用dom解析html時(shí)候，需要html里面的標(biāo)簽，屬性和文本都封裝成對(duì)象
**標(biāo)簽節(jié)點(diǎn)對(duì)應(yīng)的值
nodeType : 1
nodeName : 大寫標(biāo)簽名稱，比如SPAN
nodeValue : null
**屬性節(jié)點(diǎn)對(duì)應(yīng)的值
nodeType : 2
nodeName : 屬性名稱
nodeValue : 屬性的值
**文本節(jié)點(diǎn)對(duì)應(yīng)的值
nodeType : 3
nodeName : #text
nodeValue : 文本內(nèi)容
**<body>
<span id="spanid">文本內(nèi)容</span>
<script type="text/javascript">
// 獲取標(biāo)簽對(duì)象
var span1 = document.getElementById("spanid");
// alert(span1.nodeType); // 1
// alert(span1.nodeName); // SAPN
// alert(span1.nodeValue); // null
// 屬性
var id1 = span1.getAttributeNode("id");
// alert(id1.nodeType); // 2
// alert(id1.nodeName); //id
// alert(id1.nodeValue); // spanid
//獲取文本
var text1 = span1.getfirstChild;
// alert(text1.nodeType); // 3
// alert(text1.nodeName); //#text
// alert(text1.nodeValue); // 文本內(nèi)容
</script>
</body>
Node對(duì)象的屬性二
<ul>
<li>aaaaaa</li>
<li>bbbbb</li>
</ul>
**父節(jié)點(diǎn) ul是li的父節(jié)點(diǎn)
*** parentNode ：父節(jié)點(diǎn)
**子節(jié)點(diǎn) li是ul的子節(jié)點(diǎn)
*** childNodes : 得到所有子節(jié)點(diǎn)，但是兼容性很差
*** firstChild : 獲取第一個(gè)子節(jié)點(diǎn)
*** lastChild : 獲取最后一個(gè)子節(jié)點(diǎn)
**同輩節(jié)點(diǎn) li與li之間是同輩節(jié)點(diǎn)
**nextSibling : 返回一個(gè)給定節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)
**previousSibling : 返回一個(gè)給定節(jié)點(diǎn)的上一個(gè)兄弟節(jié)點(diǎn)
<body>
<ul id="ulid">
<li id="li1">aaaaa</li>
<li id="li2">bbbbb</li>
<li id="li3">ccccc</li>
<li id="li4">ddddd</li>
</ul>
<script type="text/javascript">
/* // 得到li1
var li1 = document.getElementById("li1");
// 得到ul
var ul1 = li1.parentNode;
alert(ul1.id); */
/* // 獲取ul的第一個(gè)子節(jié)點(diǎn)
// 得到ul
var ul1 = document.getElementById("ulid");
// 第一個(gè)子節(jié)點(diǎn)
var li1 = ul1.firstChild;
alert(li1.id);
var li4 = ul1.lastChild;
alert(li4.id); */
//獲取li的id是li3的上一個(gè)和下一個(gè)兄弟節(jié)點(diǎn)
var li3 = document.getElementById("li3");
var li4 = li3.nextSibling;
var li2 = li3.previousSibling;
alert(li4.id);
alert(li2.id);
</script>
</body>
操作dom樹
** appendChild方法：
*** 添加子節(jié)點(diǎn)到末尾
*** 特點(diǎn)：類似于剪切粘貼的效果
** insertBefore(newNode,oldNode);
*** 在某個(gè)節(jié)點(diǎn)之前插入一個(gè)新的節(jié)點(diǎn) 通過父節(jié)點(diǎn)添加
*** 兩個(gè)參數(shù) 1）要插入的節(jié)點(diǎn) 2)在誰之前插入
*** 插入一個(gè)節(jié)點(diǎn)，節(jié)點(diǎn)不存在，創(chuàng)建
1）創(chuàng)建標(biāo)簽
2）創(chuàng)建文本
3）把文本添加到標(biāo)簽下面
**代碼實(shí)現(xiàn)：（在<li>貂蟬</li>之前添加 <li>董小宛</li>）
<body>
<ul id="ulid21">
<li id="li11">西施</li>
<li id="li12">王昭君</li>
<li id="li13">貂蟬</li>
<li id="li14">楊玉環(huán)</li>
</ul>
<input type="button" value="insert" onclick="insert1();"/>
<script type="text/javascript">
// 在<li>貂蟬</li>之前添加 <li>董小宛</li>
function insert1() {
// 1、獲取到li13標(biāo)簽
var li13 = document.getElementById("li13");
// 2、創(chuàng)建li
var li15 = document.createElement("li");
// 3、創(chuàng)建文本
var text15 = document.createTextNode("董小宛");
// 4、把文本添加到li下面
li15.appendChild(text15);
// 5、獲取ul
var ul21 = document.getElementById("ulid21");
// 6、把li添加到ul下面（在<li>貂蟬</li>之前添加 <li>董小宛</li>）
ul21.insertBefore(li15,li13);
}
</script>
</body>
**removeChild方法：刪除節(jié)點(diǎn)
***通過父節(jié)點(diǎn)刪除，不能自己刪除自己
**代碼實(shí)現(xiàn) : 刪除<li id="li24">楊玉環(huán)</li>
<body>
<ul id="ulid31">
<li id="li21">西施</li>
<li id="li22">王昭君</li>
<li id="li23">貂蟬</li>
<li id="li24">楊玉環(huán)</li>
</ul>
<input type="button" value="remove" onclick="remove1();"/>
<script type="text/javascript">
// 刪除<li id="li24">楊玉環(huán)</li>
function remove1() {
// 1、獲取到li24標(biāo)簽
var li24 = document.getElementById("li24");
// 2、獲取父節(jié)點(diǎn)ul標(biāo)簽
// 有兩種方式 1）通過id獲取 2）通過屬性 parentNode獲取
var ul31 = document.getElementById("ulid31");
// 3、執(zhí)行刪除（通過父節(jié)點(diǎn)刪除）
ul31.removeChild(li24);
}
</script>
</body>
** replaceChild(newNode,oldNode); 替換節(jié)點(diǎn)
***兩個(gè)參數(shù)：1）新的節(jié)點(diǎn)（替換成的節(jié)點(diǎn)） 2）舊的節(jié)點(diǎn)（被替換的節(jié)點(diǎn)）
***不能自己替換自己，通過父節(jié)點(diǎn)替換
** cloneNode(boolean) : 復(fù)制節(jié)點(diǎn)
**代碼實(shí)現(xiàn)：把ul列表復(fù)制到另外一個(gè)div里面
<body>
<ul id="ulid41">
<li id="li31">西施</li>
<li id="li32">王昭君</li>
<li id="li33">貂蟬</li>
<li id="li34">楊玉環(huán)</li>
</ul>
<div id="divv">
</div>
<input type="button" value="clone" onclick="clone1();"/>
<script type="text/javascript">
// 把ul列表復(fù)制到另外一個(gè)div里面
/*
1、獲取到ul
2、執(zhí)行復(fù)制方法 cloneNode方法復(fù)制 參數(shù)true
3、把復(fù)制之后的內(nèi)容放到div里面去
** 獲取到div
** appendChild方法
*/
function clone1() {
// 1、獲取ul
var ul41 = document.getElementById("ulid41");
// 2、復(fù)制ul，放到類似剪切板里面
var ulcopy = ul41.cloneNode(true);
// 3、獲取到div
var divv = document.getElementById("divv");
// 4、把副本放到div里面去
divv.appendChild(ulcopy);
}
</script>
</body>
**操作dom總結(jié)：
**獲取節(jié)點(diǎn)使用方法
getElementById() : 通過節(jié)點(diǎn)的id屬性，查找對(duì)應(yīng)節(jié)點(diǎn)
getElementsByName() : 通過節(jié)點(diǎn)的name屬性，查找對(duì)應(yīng)節(jié)點(diǎn)
getElementsByTagName() : 通過節(jié)點(diǎn)名稱，查找對(duì)應(yīng)節(jié)點(diǎn)
**插入節(jié)點(diǎn)的方法
insertBefore方法 : 在某個(gè)節(jié)點(diǎn)之前插入
appendChild方法 : 在末尾添加，類似于剪貼粘貼
**刪除節(jié)點(diǎn)的方法
removeChild方法 : 通過父節(jié)點(diǎn)刪除
**替換節(jié)點(diǎn)的方法
replaceChild方法 : 通過父節(jié)點(diǎn)替換
innerHTML屬性（重點(diǎn)）
** 這個(gè)屬性不是dom的組成部分，但是大多數(shù)瀏覽器都支持的屬性
** 第一個(gè)作用：獲取文本內(nèi)容
var span1 = document.getElementById("sid");
alert(span1.innerHTML);
** 第二個(gè)作用：向標(biāo)簽里面設(shè)置內(nèi)容（可以是html代碼）
<body>
<span id="sid">測(cè)試文本</span>
<div id="div11">
</div>
<script type="text/javascript">
// 獲取span標(biāo)簽
var span1 = document.getElementById("sid");
//alert(span1.innerHTML); // 測(cè)試文本
// 向div里面設(shè)置內(nèi)容 <h1>AAAAA</h1>
// 獲取div
var div11 = document.getElementById("div11");
div11.innerHTML = "<h1>AAAAA</h1>"; // 設(shè)置內(nèi)容
</script>
</body>
** 練習(xí)：向div里面添加一個(gè)表格
var tab = "<table border='1'><tr><td>aaaaa</td></tr><tr><td>bbbb</td></tr></table>";
div11.innerHTML = tab;
案例：動(dòng)態(tài)顯示時(shí)間
** 得到當(dāng)前時(shí)間
var date = new Date();
var d1 = date.toLocaleString();
** 需要讓頁面每一秒獲取時(shí)間
setInterval方法 定時(shí)器
** 顯示到頁面上
每一秒向div里面寫一次時(shí)間 使用innerHTML屬性
** 代碼實(shí)現(xiàn) 動(dòng)態(tài)顯示時(shí)間
<body>
<div id="times">
</div>
<script type="text/javascript">
function getD1() {
// 當(dāng)前時(shí)間
var date = new Date();
// 格式化
var d1 = date.toLocaleString();
// 獲取div
var div1 = document.getElementById("times");
div1.innerHTML = d1;
}
// 使用定時(shí)器實(shí)現(xiàn)每一秒寫一次時(shí)間
setInterval("getD1();",1000);
</script>
</body>
案例：全選練習(xí)
** 使用復(fù)選框上面一個(gè)屬性判斷是否選中
** checked 屬性
** checked = true; 選中
** checked = false; 未選中
** 創(chuàng)建一個(gè)頁面
** 復(fù)選框 和 按鈕
***四個(gè)復(fù)選框表示愛好
***還有一個(gè)復(fù)選框操作全選和全不選 有一個(gè)事件
***三個(gè)按鈕 全選 全不選 反選 每個(gè)按鍵都分別有事件
**代碼實(shí)現(xiàn)
<body>
<input type="checkbox" id="boxid" onclick="selAllNo();"/>全選/全不選
<br/>
<input type="checkbox" name="love"/>籃球
<input type="checkbox" name="love"/>排球
<input type="checkbox" name="love"/>羽毛球
<input type="checkbox" name="love"/>乒乓球
<br/>
<input type="button" value="全選" onclick="selAll();"/>
<input type="button" value="全不選" onclick="selNo();"/>
<input type="button" value="反選" onclick="selOther();"/>
<script type="text/javascript">
// 實(shí)現(xiàn)全選操作
function selAll() {
/*
1、獲取要操作的復(fù)選框 使用getElementsByName();
2、返回的是數(shù)組
**屬性 checked 判斷復(fù)選框是否選中
** checked = true; // 表示選中
** checked = false; // 表示未選中
**遍歷數(shù)組，得到的是每一個(gè)checkbox
** 把每一個(gè)checkbox屬性設(shè)置為true 即checked = true;
*/
// 獲取要操作的復(fù)選框
var loves = document.getElementsByName("love");
// 遍歷數(shù)組，得到每一個(gè)復(fù)選框
for(var i=0;i<loves.length;i++) {
var love1 = loves[i]; // 得到每一個(gè)復(fù)選框
love1.checked = true; // 設(shè)置屬性為true
}
}
// 實(shí)現(xiàn)全不選操作
function selNo() {
/*
1、獲取到要操作的復(fù)選框
2、返回的是數(shù)組，遍歷數(shù)組
3、得到每一個(gè)復(fù)選框
4、設(shè)置復(fù)選框的屬性 checked = false;
*/
// 獲取要操作的復(fù)選框
var loves = document.getElementsByName("love");
// 遍歷數(shù)組，得到每一個(gè)復(fù)選框
for(var i=0;i<loves.length;i++) {
var love1 = loves[i]; // 得到每一個(gè)復(fù)選框
love1.checked = false; // 設(shè)置屬性為true
}
}
function selOther() { // 實(shí)現(xiàn)反選
var loves = document.getElementsByName("love");
// 遍歷數(shù)組，得到每一個(gè)復(fù)選框
for(var i=0;i<loves.length;i++) {
var love1 = loves[i]; // 得到每一個(gè)復(fù)選框
if(love1.checked == true) {
love1.checked = false;
}
else {
love1.checked = true;
}
}
}
function selAllNo() { // 一個(gè)多選框?qū)崿F(xiàn)全選 全不選切換
/*
1、得到上邊的復(fù)選框 通過id來獲取
2、判斷該復(fù)選框是否選中 if條件 checked == true
3、如果是選中，下面是全選
4、如果不是選中，下面是全不選
*/
var box1 = document.getElementById("boxid");
if(box1.checked == true) {
selAll();
}
else {
selNo();
}
}
</script>
</body>
案例：下拉列表左右選擇
** 下拉選擇框
<select>
<option>111</option>
<option>111</option>
</select>
** 創(chuàng)建一個(gè)頁面
** 兩個(gè)下拉框 設(shè)置屬性multiple
** 四個(gè)按鈕， 都有事件
** 代碼實(shí)現(xiàn)：
<body>
<div id="s1" style="float:left;">
<div>
<select id="select1" multiple="multiple" style="width:100px;height:100px;">
<option>1111111</option>
<option>22222222</option>
<option>33333333</option>
<option>444444444</option>
</select>
</div>
<div>
<input type="button" value="選中添加到右邊" onclick="selToRight();"/><br/>
<input type="button" value="全部添加到右邊" onclick="allToRight();"/>
</div>
</div>
<div id="s2">
<div>
<select id="select2" multiple="multiple" style="width:100px;height:100px;">
<option>AAAAAAAA</option>
<option>BBBBBBBB</option>
</select>
</div>
<div>
<input type="button" value="選中添加到左邊" onclick="selToLeft();"/><br/>
<input type="button" value="全部添加到左邊" onclick="allToLeft();"/>
</div>
</div>
<script type="text/javascript">
// 實(shí)現(xiàn)選中添加到右邊
function selToRight() {
/*
1、獲取 select1 里面的 option
* 使用getElementsByTagName(); 返回的是數(shù)組
* 遍歷數(shù)組，得到每一個(gè) option
2、判斷option是否被選中
* 屬性 selected ，判斷是否被選中
** selected = true; 選中
** selected = false;未選中
3、如果選中，把選擇的添加到右邊去
4、得到 select2
5、添加選擇的部分
* appendChild 方法
*/
// 獲取到 select1 里面的option
// 得到 select1
var select1 = document.getElementById("select1");
// 得到 select2
var select2 = document.getElementById("select2");
// 得到 option
var options1 = select1.getElementsByTagName("option");
// 遍歷數(shù)組
for(var i=0;i<options1.length;i++) {
// 第一次循環(huán) i=0 length:5
// 第二次循環(huán) i=1 length:4
// 第三次循環(huán) i=2 length:3
// 再往后就不滿足條件了 后邊的都循環(huán)不到了
var option1 = options1[i]; // 得到每一個(gè)option對(duì)象
// 判斷是否被選中
if(option1.selected == true) {
// 添加到 select2 里面
select2.appendChild(option1);
i--; // 注意這一點(diǎn)，不寫 會(huì)出問題
}
}
}
// 全部添加到右邊
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>
案例：下拉框聯(lián)動(dòng)效果(省市聯(lián)動(dòng))
** 創(chuàng)建一個(gè)頁面，有兩個(gè)下拉選擇框
** 在第一個(gè)下拉框里面有一個(gè)事件：改變事件 onchange事件
** 方法 add1(this.value); 表示當(dāng)前改變的 option 里面的value值
** 創(chuàng)建一個(gè)二維數(shù)組，存儲(chǔ)數(shù)據(jù)
** 每個(gè)數(shù)組中第一個(gè)元素是國家名稱，后面的元素是國家里面的城市
**代碼實(shí)現(xiàn)：
<body>
<select id="countryid" onchange="add1(this.value);">
<option value="0">--請(qǐng)選擇--</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">
// 創(chuàng)建一個(gè)數(shù)組存儲(chǔ)數(shù)據(jù)
// 使用二維數(shù)組
var arr = new Array(4);
arr[0] = ["中國","南京","撫州","臨洮","日喀則","哈密"];
arr[1] = ["美國","華盛頓","底特律","休斯頓","紐約"];
arr[2] = ["德國","慕尼黑","柏林","法蘭克福","狼堡"];
arr[3] = ["日本","東京","北海道","大阪","廣島","長崎"];
function add1(val) {
/* 實(shí)現(xiàn)步驟：
1、遍歷二維數(shù)組
2、得到的也是一個(gè)數(shù)組（國家對(duì)應(yīng)關(guān)系）
3、拿到數(shù)組中的第一個(gè)值和傳遞過來開的值作比較
4、如果相同，獲取到第一個(gè)值后面的元素
5、得到 city 的 select
6、添加過去 使用 appendChild 方法
** 需要?jiǎng)?chuàng)建option （三步操作）
*/
// 由于每次都要向city里面添加option，第二次添加，前邊第一次的會(huì)保留，追加
// 所以每次添加之前，判斷一下city里面是否有option，如果有，刪除
// 獲取 city 的 select
var city1 = document.getElementById("cityid");
// 得到 city 里面的 option
var options1 = city1.getElementsByTagName("option");
// 遍歷數(shù)組
for(var k=0;k<options1.length;k++) {
// 得到每一個(gè) option
var op = options1[k];
// 刪除這個(gè) option 通過父節(jié)點(diǎn)刪除
city1.removeChild(op);
k--;// 每次刪除 長度都會(huì)減一 k都會(huì)增加一 不執(zhí)行此操作 會(huì)出錯(cuò)
}
// 遍歷二維數(shù)組
for(var i=0;i<arr.length;i++) {
// 得到二維數(shù)組里面的每一個(gè)數(shù)組
var arr1 = arr[i];
// 得到遍歷之后的數(shù)組的第一個(gè)值
var firstvalue = arr1[0];
// 判斷傳遞過來的值和第一個(gè)值是否相同
if(firstvalue == val) { // 相同
// 得到第一個(gè)值后面的元素
// 遍歷數(shù)組 arr1
for(var j=1;j<arr1.length;j++) {
var value1 = arr1[j]; // 得到國家之后 城市的名稱
// alert(value1);
// 創(chuàng)建 option
var option1 = document.createElement("option");
// 創(chuàng)建文本
var text1 = document.createTextNode(value1);
// 把文本添加到option里面
option1.appendChild(text1);
// 添加值到 city 的 select 里面
city1.appendChild(option1);
}
}
}
}
</script>
</body>
以上這篇JavaWeb學(xué)習(xí)筆記分享(必看篇)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Java?MethodHandles介紹與反射對(duì)比區(qū)別詳解
這篇文章主要為大家介紹了Java?MethodHandles介紹與反射對(duì)比區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
boolean是基本數(shù)據(jù)類型Boolean是它的封裝類,和其他類一樣,有屬性有方法,可以new,下面這篇文章主要給大家介紹了關(guān)于Java中Boolean和boolean區(qū)別的相關(guān)資料,需要的朋友可以參考下2022-07-07
Java采用循環(huán)鏈表結(jié)構(gòu)求解約瑟夫問題
這篇文章主要介紹了Java采用循環(huán)鏈表結(jié)構(gòu)求解約瑟夫問題的解決方法,是很多Java面試環(huán)節(jié)都會(huì)遇到的經(jīng)典考題,這里詳細(xì)給出了約瑟夫問題的原理及Java解決方法,是非常經(jīng)典的應(yīng)用實(shí)例,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
Java使用JDBC連接數(shù)據(jù)庫的實(shí)現(xiàn)方法
這篇文章主要介紹了Java使用JDBC連接數(shù)據(jù)庫的實(shí)現(xiàn)方法,包括了詳細(xì)的加載步驟以及完整實(shí)現(xiàn)示例,需要的朋友可以參考下2014-09-09
這篇文章主要介紹了Java編程基礎(chǔ)測(cè)試題分享，具有一定參考價(jià)值，需要的朋友可以了解下。2017-10-10
這篇文章介紹了JAVA中STRING的常用方法，有需要的朋友可以參考一下2013-09-09
Java的Hibernate框架結(jié)合MySQL的入門學(xué)習(xí)教程
Java世界中的SSH三大框架是Web開發(fā)方面的人氣組合,Hibernate便是其中之一,這里我們來整理一下Java的Hibernate框架結(jié)合MySQL的入門學(xué)習(xí)教程,需要的朋友可以參考下2016-07-07
java多線程之Future和FutureTask使用實(shí)例
這篇文章主要介紹了java多線程之Future和FutureTask使用實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
今天教大家深入理解Java的序列化與反序列化,文中介紹的非常詳細(xì),有很多代碼示例,對(duì)正在學(xué)習(xí)Java的小伙伴們很有幫助,需要的朋友可以參考下2021-05-05
這篇文章主要介紹了Java并發(fā)工具類Future使用示例,本文需要注意future.get()方法是阻塞式的，如果調(diào)用該方法的時(shí)候任務(wù)尚未執(zhí)行完成，則會(huì)一直等待下去，直到任務(wù)執(zhí)行結(jié)束，本文通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-06-06