一 JS的簡介
JavaScript是基於對象和事件驅動的腳本語言，主要應用在客戶端。
基於對象：提供好了很多對象，可以直接拿過來使用
事件驅動：HTML做網站靜態效果，JavaScript動態效果
客戶端：專門指的是瀏覽器
特點：交互性（信息的動態交互）
安全性（不可以直接訪問本地磁盤）
跨平臺性（只要是可以解析JS的瀏覽器都可以執行，和平臺無關）
JavaScript和Java的區別：
1 Java是sun公司，現在是Oracle；js是網景公司
2 JavaScript是基於對象的，Java是面向對象的
3 Java是強類型的語言，JS是弱類型的語言
比如Java裏面 int ="10";
js:var i=10;var m="10";
4 JavaScript只需解析就可以執行，而Java需要先編譯成字節碼文件，再執行
JavaScript的組成（三部分）
ECMAScript
ECMA：歐洲計算機協會—制定JavaScript語法
BOM：
broswer object model 瀏覽器對象模型
DOM：
document object model 文檔對象模型
二 JS和HTML的結合方式
1 使用一個標籤<script type="text/javascript">js代碼</script>
2 使用script標籤，引入一個外部的js文件
創建一個js文件，demo.js
使用此方式的時候，就不要在script標籤裏寫js代碼了，不會執行
demo.js代碼
alert("第二種方式");html代碼
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
alert("第一種方法");
</script>
<script type="text/javascript" src="demo.js">
</script>
<body>
</body>
</html>
三 JS的原始類型和變量聲明
Java的基本數據類型：byte,short,int,long,float,double,char,double
js的原始類型：
stringL字符串
var str="abc";
number：數字類型
var m=123;
boolean：true和false
var b=true;
null:var date = new Date();
表示獲取一個對象的引用，null表示對象的引用爲空，所有的對象的引用也是object
undifinedL:定義一個變量，沒有賦值。var aa;
typeof():查看的當前變量的類型
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
//定義一個字符串
var str="abc";
alert(str);
//定義一個數字
var m=123;
alert(typeof(m));
//定義一個布爾類型
var flag=true;
</script>
<script type="text/javascript" src="demo.js">
</script>
<body>
</body>
</html>
四 JS的語句
Java裏面的語句
if判斷
switch語句
循環 for while do-while
js裏面的這些語句
if判斷語句:
switch語句:
Java裏面支持數據類型。在JDK1.7開始支持string類型
js裏面都支持
switch(a){
case 5:
break;
case 6:
break;
......
default:
}
for:
while：
do-while：
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
var a=5;
//if判斷
if(a==5)
alert("5");
else
alert("不是5")
var b=6;
//switch語句
switch(b){
case 3:
alert("3");
break;
case 6:
alert("6");
break;
default:
alert("other");
break;
}
//while語句
var i=5;
while(i>1){
alert(i);
i--;
}
//for循環
for(var s=0;s<=5;s++){ //變量是var ，而不是int
alert(s);
}
</script>
<body>
</body>
</html>
五 JS的運算符
+=: x+=y ====>x=x+y
大部分運算與Java都一樣，以下爲不一樣的
在js裏面不區分整數和小數
字符串相加和相減的操作
boolean：如果設置成true,相當於這個值是1；
如果設置成false，相當於這個值是0；
==和===的區別：都是做判斷
==比較的是值；===比較的是值和類型
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
var a=123;
alert(a/1000*1000); //在Java裏面得0，在js裏得123，在js裏面不區分整數和小數
//字符串的操作
var str="456";
alert(str+1);//在Java和js裏都是4561，正常的字符串鏈接
alert(str-1);//相減的時候，執行減法的運算。得455
//如果字符串不是數字，會提示NAN
//boolean類型操作
var flag=true; //等於1
alert(flag+1);
var flag1=false; //等於0
alert(flag1+1);
//==和===的區別
var aa=5;
if(aa==5){
alert("5");
}
else
alert("other");
var aa="5";
if(aa===5){
alert("5");
}
else
alert("other");
</script>
<body>
</body>
</html>
六 99乘法表的練習
<html>
<head>
<title>實現99乘法表</title>
</head>
<body>
<script type="text/javascript">
document.write("<table border='1' bordercolor='red'>");//document裏面使用雙引號，如果設置標籤的屬性需要使用單引號，document可是輸出常量，變量還可以輸出HTML標籤
//循環行
for(var i=1;i<=9;i++){
document.write("<tr>");
for(var j=1;j<=i;j++){
document.write("<td>");
document.write(j+"*"+i+"="+j*i);
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
七 JS的數組
什麼是數組？
使用變量，var m=10;
java裏面的數組，定義 int [] arr ={1,2,3};
定義方式（三種）
第一種：var arr=[1,2,3]; var arr=[1,"4",true];
第二種：使用內置對象 Array var arr1=new Array(5) ; //定義一個數組，長度爲5.
arr1[0]="1";
第三種：使用內置對象Array
var arr2=new Array(3,4,5); //定義一個數組，數組裏面的元素是3,4,5
數組裏面有一個屬性：length—獲取數組的長度
數組裏面可以存放不同的數據類型的數據
<html>
<head>
<title>數組的定義方式</title>
</head>
<body>
<script type="text/javascript">
//第一種方式定義數組
var arr=[1,2,"3"];
document.write("第一種方式"+arr+",數組的長度"+arr.length);
//第二種方式定義數組
var arr1=new Array(3);
arr1[0]="a";
arr1[1]="b";
arr1[2]="c";
document.write(",第二種方式"+arr1);
//第三種方式定義數組
var arr2=new Array(6,7,8);
document.write(",第三種方式"+arr2);
</script>
</body>
</html>
八 JS的函數
在js裏面定義函數（方法）有三種方法
在函數的參數列表裏面，不需要寫var，直接寫變量名稱就可以
第一種：使用一個關鍵字function
function 方法名（參數列表）{
方法體；
返回值可有可無（根據實際需要）
}
第二種：匿名函數
var add = function （參數列表）{ 方法體和返回值}
第三種：動態函數（用得少）
使用js裏面的一個內置對象 Function
var add= new Funcrtion ("參數列表","方法體和返回值");
九 JS的全局變量和局部變量
全局變量：在script標籤裏定義一個變量，這個變量在頁面中js部分都可以使用
局部變量：在方法體內部定義一個變量，只能在方法體內部使用
<html>
<head>
<title>js的變量</title>
</head>
<body>
</body>
<script>\
var aa=10;
alert("在方法外面調用全局變量aa="+aa);
function test(a,b){
var nn=20;
alert("在方法內面調用全局變量aa="+aa);
alert("在方法內面調用局部變量nn="+nn);
}
test();
//alert("在方法外面調用局部變量nn="+nn); //不好使
<script>
alert("在另一個script裏面調用全局變量aa="+aa);
//alert("在另一個script裏面調用局部變量nn="+nn); //不好使
</script>
</html>
十 script放的位置
建議把script標籤放到</body>後面
如果現在有一個這樣的需求：
在js裏面需要獲取到input裏面的值，如果把script標籤放在head裏面
會出現問題
HTML解析是從上到下解析的，script標籤放到的是head裏面，直接在裏面取input裏面的值，
因爲頁面還沒有解析到input那一行，肯定取不到。
十一 JS的重載的簡單介紹
什麼叫重載？方法名相同，參數列表不相同
js是否有重載？沒有
<html>
<head>
<title>js的重載</title>
</head>
<body>
</body>
<script>
function add1(a,b){
return a+b;
}
function add1(a,b,c){
return a+b+c;
}
function add1(a,b,c,d){
return a+b+c+d;
}
alert(add1(2,2)); //NAN
alert(add1(2,2,2)); //NAN
alert(add1(2,2,2,2)); //8
</script>
</html>
十二 JS的string對象
創建String對象
var str="123";
方法和屬性（文檔）
屬性 length：字符串的長度
方法：
1 與HTML相關的方法
bold():加粗
fontcolor():設置字符串的顏色
fontsize():設置字體的大小
link():將字符串顯示成超鏈接
sub():下標
sup():上標
<html>
<head>
<title>String</title>
</head>
<body>
</body>
<script>
//length屬性
var str ="abcde";
document.write(str.length);
//bold方法
document.write("<hr/>");
var str1="jiacu";
document.write(str1.bold());
//fontcolor
document.write("<hr/>");
var str2="字體顏色";
document.write(str2.fontcolor("red"));
//fontsize()
document.write("<hr/>");
var str3="zitidaxiao";
document.write(str3.fontsize(5));
//link
document.write("<hr/>");
var str4="超鏈接";
document.write(str4.link("hello.html")); //點擊超鏈接到hello.html頁面
//sub和sup
document.write("<hr/>");
var str5="100";
var str6="200";
var str7="300";
document.write(str5.sub());
document.write(str7);
document.write(str6.sup());
</script>
</html>
2 與Java相似的方法
concat():鏈接字符串
charAt():返回指定位置的字符串
indexOf():返回字符串位置
split():把字符串切分成字符串數組
replace():替換字符串
傳遞兩個參數：第一個參數是原始的字符，第二個是要替換成的字符
substr():從第幾位開始，向後截取幾位
substring():從第幾位開始，到第幾位結束，但不包含最後那一位
<html>
<head>
<title</title>
</head>
<body>
</body>
<script>
//concat方法
var str1="abc";
var str2="efg";
document.write(str1.concat(str2));
//charAt()
document.write("<hr/>");
var str3="abcdefg";
document.write(str3.charAt(0)); //如果字符的位置不存在，返回空字符串
//indexOf()
document.write("<hr/>");
var str4="hijklmn";
document.write(str4.indexOf("j")); //如果字符不存在，會返回-1
//split()
document.write("<hr/>");
var str5="-b-c-d";
var arr1=str5.split("-");
document.write("分割後數組長度"+arr1.length);
//replace()
document.write("<hr/>");
var str6="abcdefg";
document.write(str6.replace("b","B"));
//substr()和substring()
document.write("<hr/>");
var str7 ="abcdefghijklmn";
document.write("substr的結果"+str7.substr(5,3)+"<br/>") //fgh,從5開始向後截取三位
document.write("substring的結果"+str7.substring(5,3)); //de 截取第三到第四位 [3,5)
</script>
</html>
十三 JS的Array對象
創建數組（三種）
var arr1= [1,2,3];
var arr2=new Array(3);//長度是3
var arr3=new Array(1,2.3);//數組中的元素是1 2 3
屬性：length：查看數組的長度
方法：
concat():鏈接兩個或更多的數組，並返回結果
join():元素通過指定的分隔符進行分割
push():表示向數組末尾添加一個或更多個元素，返回數組的新的長度
pop();刪除最後一個元素並且返回刪除的那個元素
reverse():顛倒數組中元素的順序
<html>
<head>
<title>js的 Array對象</title>
</head>
<body>
</body>
<script>
//length屬性
var arr1=[1,2,3];
document.write(arr1.length);
//concat()
document.write("<hr/>");
var arr11=[1,2,3];
var arr12=[4,5.6];
document.write(arr11.concat(arr12));
//join()
document.write("<hr/>");
var arr2=new Array(3);
arr2[0]="a";
arr2[1]="b";
arr2[2]="c";
document.write(arr2); //默認以分號分隔各個元素
document.write("<br/>");
document.write(arr2.join("-"));//以-進行分隔
//push() 也可以傳進一個數組，把數組當做一個整體元素傳進去，不管數組有多長，新的長度只加1，數組中的所有元素合併成一個整體
document.write("<hr/>");
var arr3=new Array(3);
arr3[0]="tom";
arr3[1]="lily";
arr3[2]="lucy";
document.write(arr3);
document.write("長度爲"+arr3.length);
document.write("<br/>");
document.write("新的長度"+arr3.push("jack"));
//pop()
document.write("<hr/>");
var arr4=["zhangsan","lisi","wangwu","zhaoliu"+"<br/>"];
document.write("old array: "+arr4);
document.write("return: "+arr4.pop()+"<br/>");
document.write("new array: "+arr4);
//reverse()
document.write("<hr/>");
var arr5=["aaaaa","bbbbb","cccc","dddd"];
document.write("old array: "+arr5+"<br/>");
document.write("new array: "+arr5.reverse());
</script>
</html>
十四 JS的Date對象
在Java裏面獲取當前時間
Date date = new Date();
//格式化
//toLocaleString
js裏面獲取當前時間
var date = new Date();
toLocaleString():轉換成本地形式的時間
getFullYear():得到當前的年，返回四位
getYear():得到當前的年，返回兩位
getMonth():得到當前的月(返回的是值0-11)
getDay():獲取當前的星期（返回值0-6）星期日作爲一週的第一天，返回的是0；
getDate():獲取當前的日(1-31)
getHours():獲取當前的小時(0-24)
getMinutes():獲取當前的分鐘（0-59）
getSeconds():獲取當前的秒（0-59）
getTime():獲取毫秒數，返回的是1970年1月1日至今的毫秒數
應用場景：第一次訪問網站很快，第二次訪問網站很快，由於緩存
使用毫秒數來處理緩存的效果（沒有緩存）
<html>
<head>
<title>js的Date對象</title>
</head>
<body>
</body>
<script>
//獲取當前時間
var date =new Date();
document.write(date);
//轉換成習慣的格式
document.write("<hr/>");
document.write(date.toLocaleString());
//得到當前的年
document.write("<hr/>");
document.write("year: "+date.getFullYear());
//獲取當前的月
document.write("<hr/>");
var month=date.getMonth()+1; //返回的是0—11
document.write("Month: "+month);
//獲取當前的星期
document.write("<hr/>");
document.write("Week: "+date.getDay()); //0-6
//獲得當前的日
document.write("<hr/>");
document.write("day: "+date.getDate());
//獲取當前的小時
document.write("<hr/>");
document.write("hour: "+date.getHours());
//獲取當前的分鐘
document.write("<hr/>");
document.write("Minutes: "+date.getMinutes());
//獲取當前的秒
document.write("<hr/>");
document.write("Seconds: "+date.getSeconds());
//獲取當前的毫秒
document.write("<hr/>");
document.write("times: "+date.getTime());
</script>
</html>
十五 JS的Math對象
數學的運算
不像Date，String等，不是對象的方法，是靜態方法，使用可以直接使用Math.方法名稱()
ceil(): 向上舍入
floor():向下舍入
round():四捨五入
random():得到隨機數（僞隨機數）（0.0-1.0）
<html>
<head>
<title>js的Math對象</title>
</head>
<body>
</body>
<script>
var mm=10.4;
document.write("old: "+mm+"<br/>");//10.4
document.write("ceil: "+Math.ceil(mm)+"<br/>"); //11
document.write("floor: "+Math.floor(mm)+"<br/>");//10
document.write("round: "+Math.round(mm));//10
//random()
document.write("<hr/>");
document.write(Math.random());
//得到0-9的隨機數
document.write("<hr/>");
document.write("0-9的隨機數： "+Math.floor(Math.random()*10));
</script>
</html>
十六 JS的全局函數
什麼是全局函數？
不屬於任何一個對象，直接使用名稱使用
eval():執行js代碼（如果字符串是一個js代碼，使用方法直接執行）
encodeURI():表示對字符進行編碼
decodeURI();對字符進行解碼
encodeURIComponent();
decodeURIComponent():
isNaN():返回true和false(不是數字返回true，是數字返回false)
parseInt():類型轉換
<html>
<head>
<title>js的全局函數</title>
</head>
<body>
</body>
<script>
//eval()
var str="alert('eval方法');";
eval(str);
//encodeURI()
document.write("<hr/>");
var str1="測試中文aaaa123"; //中文編碼
var encode1=encodeURI(str1);
document.write("編碼： "+encode1);
//decode()
document.write("<hr/>");
document.write("解碼： "+decodeURI(encode1));
//isNaN()
document.write("<hr/>");
var str2="123";
document.write("isNaN: "+isNaN(str2)+"<br/>");
var str3="abcd";
document.write("isNaN: "+isNaN(str3));
//parseInt():
document.write("<hr/>");
var str4="123";
document.write("以字符串相加的形式： "+str4+1+"<br/>"+"類型轉換後： ");
document.write(parseInt(str4)+1);
</script>
</html>
十七 JS的函數重載
js的重載是否存在，不存在
調用最後一個方法
把傳遞的參數保存到arguments裏
面試：js裏面是否存在重載？
1 JS裏面不存在重載
2 但是可以通過其他方法模擬重載的效果:arguments
<html>
<head>
<title>js的函數重載</title>
</head>
<body>
</body>
<script>
/*function add1(a,b){
//alert("length: "+arguments.length);
for(var i=0;i<arguments.length;i++){
alert("value: "+arguments[i]);
}
return a+b;
}*/
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;
}
}
//調用
document.write("兩個參數結果爲："+add1(1,2)+"<br/>");
document.write("三個參數結果爲："+add1(1,2,3)+"<br/>");
document.write("四個參數結果爲："+add1(1,2,3,4)+"<br/>");
document.write("五個參數"+add1(1,2,3,4,5));
</script>
</html>
十八 JS的bom對象
bom:broswer object model:瀏覽器對象模型
有哪些對象
navigator：獲取客戶機（瀏覽器）的信息
navigator.appName:瀏覽器的名稱
screen：獲取屏幕信息
location：請求的URL地址
href: 獲取請求的URL地址
設置URL地址:頁面上設置一個按鈕，按鈕上綁定一個時間，當我點擊這個按鈕，頁面可以跳轉到另外的壓面
history：請求的url的歷史記錄
history.back():上一個頁面
history.forward():下一個頁面
history.go():傳-1到上一個頁面，傳1到下一個頁面
window：表示一個窗口對象
頂層對象（所有的bom對象都是在window裏面操作的）
方法：
alert()：頁面彈出提示框
confirm():確認提示框，可傳一個參數：顯示的內容
prompt():輸入對話框,可傳兩個參數：顯示的內容和輸入框裏面的默認值
open():打開一個新的窗口，可傳多個參數，
第一個：打開新窗口的URL地址
第二個：空
第三個：窗口特徵：高；寬
close():關閉窗口（瀏覽器兼容性比較差）
做定時器：
setInterval("js代碼",毫秒數):
window.setInterval("alert('123');",300);//代表每三秒執行一次alert
setTimeout("js代碼",毫秒數):表示在毫秒數之後執行，但是隻會執行一次
window.setTimeout("alert('在3秒後執行');",3000);
clearInterval():表示清除通過setInterval設置的定時器
clearTimeout():清除setTimeout設置的定時器
參數爲setInterval何setTimeout返回的值：
var id1=setInterval("alert('23');",3000);
clearInterval(id1);
<html>
<head>
<title>js的bom對象 </title>
</head>
<body>
<input type="button" value="跳轉" οnclick="href1()"/>
<hr/>
<input type="button" value="open" οnclick="open1()"/>
<hr/>
</body>
<script>
document.write("navigator的用法： "+navigator.appName);
document.write("<hr/>");
document.write("screen的用法： "+"<br/>屏幕的寬："+screen.width+" 屏幕的高："+screen.height);
document.write("<hr/>");
document.write("location的用法:<br/>當前的URL地址"+location.href);
//href設置URL地址
function href1(){
//document.write("使用跳轉按鈕進入的頁面");
location.href="hello.html";
}
document.write("<hr/>");
//confirm()
var flag=confirm("confirm提示框");
document.write("confirm有返回值："+flag);
document.write("<hr/>");
//prompt()
var pro = prompt("prompt輸入框:請輸入","0");
document.write("prompt輸入框輸入的內容："+pro);
document.write("<hr/>");
//open()
function open1(){
window.open("hello.html","","width=200,height=100");
}
</script>
</html>
十九 JS的dom對象
dom:document object model:文檔對象模型
文檔：超文本文檔（超文本標記文檔）-html;xml
對象：提供了屬性和方法
模型： 使用屬性和方法操作超文本標記文檔
可以使用js裏面的DOM裏面提供的對象，使用這些屬性和方法，對標記型文檔進行操作
想要對標記型文檔進行操作，首先需要 對標記型文檔裏面的所有內容封裝成對象
需要把HTML裏面的標籤，屬性，文本內容都封裝成對象
要想對標記型文檔進行操作，解析標記型文檔
如何使用DOM解析HTML
解析過程：
根據HTML的層級結構，在內存中分配一個樹形結構，需要把HTML中的每部分封裝成對象
document對象：整個文檔
element對象：標籤對象
屬性對象
文本對象
Node節點對象：這個對象是這些對象的父對象
如果在對象裏面找不到想要的方法，這個時候到Node去找
二十 DHTML的簡介
DHTML:不是一種語言，是很多技術的簡稱（HTML CSS DOM JavaScript）
HTML：封裝數據
CSS：使用屬性和屬性值設置樣式
DOM：操作HTML文檔（標記型文檔）
JavaScript：專門指的是js的語法語句（ECMAScript）
二十一 document對象
document對象：表示整個對象
每個載入的HTML文檔都會成爲document對象
方法：
write():向頁面輸出變量（值）；向頁面輸出HTML代碼
getElementByID()：通過id得到元素（標籤），傳遞的參數是標籤裏面的id的值
得到屬性值：標籤對象.屬性名稱
getElementsByName():通過name得到元素,返回的是一個集合
getElementsByTagName()：通過標籤得到元素
<html>
<head>
<title>js的dom對象</title>
</head>
<body>
<input type="text" id="nameid" value="aaaa"/><br/>
<input type="text" name="name1" value="ccc"/><br/>
<input type="text" name="name1" value="ddd"/><br/>
<input type="text" name="name1" value="eeee"/>
</body>
<script>
var input1=document.getElementById("nameid");
document.write("<hr/>");
document.write("通過id獲取元素對象："+input1+"<br/>");
document.write("value的值： "+input1.value+"<br/>")
//向input裏面設置一個name
input1.name="bbbbbb";
document.write("向input標籤中設置name值： "+input1.name);
document.write("<hr/>");
var inputs = document.getElementsByName("name1");
document.write("通過getElementsByName得到的集合的長度："+inputs.length+"<br/>");
//遍歷數組
for(var i=0;i<inputs.length;i++){//通過遍歷數組，得到每個標籤裏面的具體的值
document.write("輸出得到的集合的第"+(i+1)+"個元素:"+inputs[i]+"<br/>");
//每個元素的value值
document.write("輸出得到的集合的第"+(i+1)+"個元素:"+inputs[i].value+"<br/>");
}
document.write("<hr/>");
var inputss = document.getElementsByTagName("input");//遍歷數組
for(var i=0;i<inputss.length;i++){//通過遍歷數組，得到每個標籤裏面的具體的值
document.write("輸出得到的集合的第"+(i+1)+"個元素:"+inputss[i]+"<br/>");
//每個元素的value值
document.write("輸出得到的集合的第"+(i+1)+"個元素:"+inputss[i].value+"<br/>");
}
</script>
</html>
二十二 案例window彈窗案例
實現過程
1 創建一個頁面
有兩個輸入項和一個按鈕
按鈕上面有一個事件，彈出一個新窗口 open
2 創建彈出的頁面
表格
每一個有一個按鈕和編號和姓名
按鈕上有一個事件：把當前的編號和姓名，賦值到第一個頁面相應的位置
open.xml
<html>
<head>
<title></title>
</head>
<body>
<table border="1" border-color="red">
<tr>
<td>操作</td>
<td>編號</td>
<td>姓名</td>
</tr>
<tr>
<td><input type="button" value="選擇" οnclick="s1('001','張三')"/></td>
<td>001</td>
<td>張三</td>
</tr>
<tr>
<td><input type="button" value="選擇" οnclick="s1('002','趙四')"/></td>
<td>002</td>
<td>趙四</td>
</tr>
<tr>
<td><input type="button" value="選擇" οnclick="s1('003','王五')"/></td>
<td>003</td>
<td>王五</td>
</tr>
</table>
</body>
<script>
/*
*/
function s1(num1,name1){
//需要把num1和name1賦值到window頁面
//跨頁面的操作 opener：得到創建這個窗口的窗口，得到window頁面
var pwin = window.opener;
pwin.document.getElementById("numid").value = num1;
pwin.document.getElementById("nameid").value = name1;
//關閉窗口
window.close();
}
</script>
</html>window.html
<html>
<head>
<title></title>
</head>
<body>
編號：<input type="text" id="numid"/><br/>
編號：<input type="text" id="nameid"/><br/>
<input type="button" value="選擇" οnclick="open1()"/>
</body>
<script>
//彈出窗口的方法
function open1(){
window.open("open.html","","width=250,height=150");
}
</script>
</html>二十三 window彈窗案例需要注意的地方
由於我們現在訪問的是本地文件，JS安全性，谷歌瀏覽器安全級別很高，不允許訪問本地文件
在實際開發中，沒有這樣的問題，實際開發中不可能訪問本地的文件
二十四 案例—在末尾添加節點
<html>
<head>
<title>在末尾添加節點</title>
</head>
<body>
<ul id="ulid">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
<input type="button" value="添加" οnclick="add1();"/>
</body>
<script>
//在末尾添加節點
function add1(){
//獲取元素
var ul1 = document.getElementById("ulid");
//創建標籤
var li1 = document.createElement("li");
//創建文本
var text1 = document.createTextNode("5555");
//把文本加入到li下面
li1.appendChild(text1);
//把li加入到ul下面
ul1.appendChild(li1);
}
</script>
</html>二十五 elementt對象
要操作element對象，首先必須要獲取到element
使用document裏面相應的方法獲取
方法
獲取屬性裏面的值:getAttribute()
可以用戶獲取getElementById()獲取不了的關鍵字的屬性值：class;id
設置屬性的值：setAttribute()
刪除屬性：removeAttribute()
不能刪除value
<html>
<head>
<title>element對象</title>
</head>
<body>
<input type="text" id="inputid" value="aaaa"/>
<hr/>
</body>
<script>
var input1=document.getElementById("inputid");
document.write("用getAttribute獲取value值"+input1.getAttribute("value"));
input1.setAttribute("class","haha");
document.write("<hr/>");
document.write("用setAttribute設置之後的值"+input1.getAttribute("class"));
</script>
</html>使用屬性 childNodes，但是這個屬性的兼容性太差
獲得標籤下面的子標籤的唯一有效辦法，使用getElementsByTagName方法
<html>
<head></head>
<body>
<ul id="ulid">
<li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li>
</ul>
</body>
<script>
//獲取到ul下面的所有子標籤（子元素）
//獲取ul標籤
var ul1 = document.getElementById("ulid");
//獲取ul下面的子標籤
var lis = ul1.childNodes;//兼容性很差
document.write(lis.length+"<br/>");//ie爲3，谷歌火狐爲7
var lis1 = ul1.getElementsByTagName("li");
document.write("用getElementsByTagName方法："+lis1.length);
</script>
</html>二十六 Node對象的屬性
nodeName
nodeType
nodeValue
使用dom解析html時候，需要html裏面的標籤，屬性和文本都封裝成對象
標籤結點對應的值
nodeName：1
nodeType：大寫標籤名稱 比如SPAN
nodeValue：null
屬性節點對應的值
nodeName：2
nodeType：屬性名稱
nodeValue：屬性的值
文本節點對應的值
nodeName：3
nodeType：#text
nodeValue：文本內容
<html>
<head></head>
<body>
<span id="spanid">哈哈哈哈哈</span>
<hr/>
</body>
<script>
//獲取標籤對象
var span1 = document.getElementById("spanid");
document.write(span1.nodeType+"<br/>");//1
document.write(span1.nodeName+"<br/>");//SPAN
document.write(span1.nodeValue+"<hr/>");//null
//屬性
var id1 = span1.getAttributeNode("id");
document.write(id1.nodeType+"<br/>");//2
document.write(id1.nodeName+"<br/>");//id
document.write(id1.nodeValue+"<hr/>");//spanid
//文本
var text1 = span1.firstChild;
document.write(text1.nodeType+"<br/>");//3
document.write(text1.nodeName+"<br/>");//#text
document.write(text1.nodeValue+"<hr/>");//哈哈哈哈哈
</script>
</html><html>
<head></head>
<body>
<ul id="ulid">
<li id="li1">qqqqq</li>
<li id="li2">ppppp</li>
<li id="li3">wwwww</li>
<li id="li4">mmmmm</li>
</ul>
<hr/>
</body>
<script>
/*
父節點:
ul是li的父節點
parentNode
子節點
li是ul的子節點
childNodes:得到所有的子節點，但是兼容性很差
firstChild：獲得第一個子節點
lastChild：獲得最後一個子節點
同輩節點
li之間關係是同輩節點
*/
var li1 = document.getElementById("li1");
var ul1 = li1.parentNode;
document.write("獲取父節點ul的id："+ul1.id);
document.write("<hr/>");
//獲取ul的第一個子節點
var ul11 = document.getElementById("ulid");
var li11 = ul11.firstChild;
document.write("使用firstChild得到第一個子節點："+li11.id+"<br/>");
var li14 = ul11.lastChild;
document.write("使用lastChild得到最後一個子節點："+li14.id+"<hr/>");
//獲得兄弟節點
var li3 = document.getElementById("li3");
document.write("獲得li3的下一個兄弟節點："+li3.nextSibling.id+"<br/>");
document.write("獲得li3的上一個兄弟節點："+li3.previousSibling.id);
</script>
</html>二十七 操作DOM樹
appendChild方法
添加子節點到末尾
特點：類似於剪切的效果
insertBefore()方法
在某個節點之前插入一個新的節點
兩個參數：
newNode:要插入的節點
oldNode：在誰之前插入
removeChild：刪除節點
replaceChild:替換節點
cloneNode(boolean):複製節點
<html>
<head>
<style type="text/css">
#div1{
width:200px;
height:150px;
border:2px solid red;
}
#div2{
width:250px;
height:150px;
border:5px dashed green;
` }
</style>
</head>
<body>
<div id="div1">
<ul id="ulid1">
<li id="li11">lily</li>
<li id="li12">mary</li>
<li id="li13">jack</li>
</ul>
</div>
<div id="div2">
</div>
<input type="button" value="add" οnclick="add1();" />
<input type="button" value="insert" οnclick="insert1();"/>
<input type="button" value="remove" οnclick="remove1();"/>
<input type="button" value="replace" οnclick="replace1();"/>
<input type="button" value="copy" οnclick="copy1();"/>
</body>
<script>
function add1(){
//得到div2
var div2 = document.getElementById("div2");
//獲取ul
var ul1 = document.getElementById("ulid1");
div2.appendChild(ul1);
}
function insert1(){
//在mary之前添加一個人
/*
1 獲取li12標籤
2 創建li
3 創建文本
4 把文本添加到li下面
5 獲取到ul
6 把li添加到ul下面
*/
var li13 = document.getElementById("li12");
var li14 = document.createElement("li");
var text = document.createTextNode("lucy");
li14.appendChild(text);
var ul11 = document.getElementById("ulid1");
ul11.insertBefore(li14,li12);
}
function remove1(){
/*
獲取到要刪除的節點
獲取其父節點
刪除
*/
var li13 = document.getElementById("li13");
var ul12 = document.getElementById("ulid1");
ul12.removeChild(li13);
}
function replace1(){
//將lily替換爲other
/*
1 獲取到要替換的liA
2 創建li的標籤
3 創建文本
4 把文本添加到li的下面
5 獲取父節點ul
6 完成替換
*/
var li11 = document.getElementById("li11");
var li111 = document.createElement("li");
var text = document.createTextNode("other");
li111.appendChild(text);
var ul13 = document.getElementById("ulid1");
ul13.replaceChild(li111,li11);
}
function copy1(){
//把ul複製到另一個div上
/*
1 獲取到ul
2 執行復制方法
3 把複製之後的內容放到div上面
獲取到div
appendChild方法
*/
var ul14 = document.getElementById("ulid1");
var ulcopy = ul14.cloneNode(true);
var div2 = document.getElementById("div2");
div2.appendChild(ulcopy);
}
</script>
</html>二十八 innerHTML屬性
這個屬性不是dom的組成部分，但是大多數瀏覽器都支持的屬性
第一個作用：獲取標籤裏面的文本內容
第二個作用：向標籤裏面設置內容（可以是html代碼）
<html>
<head>
<style type="text/css">
#div11{
width:200px;
height:150px;
border:2px dashed red;
}
</style>
</head>
<body>
<span id="sid">哈哈哈哈</span>
<div id="div11">
</div>
<hr/>
</body>
<script>
var span1 = document.getElementById("sid");
document.write("通過innerHTML獲取內容"+span1.innerHTML);
document.write("<hr/>");
//向div裏面設置內容<h1>AAAAA</h1>
var div11 = document.getElementById("div11");
div11.innerHTML = "<h1>AAAAA</h1>"
</script>
</html>二十九 案例—動態顯示時間
得到當前的時間
var date = new Date();
var d1 = date.toLocaleString();
需要讓頁面每一秒獲取時間
setInterval方法
顯示到頁面上
每一秒向div裏面寫一次時間
使用innerHTML屬性
<html>
<head>
<style type="text/css">
#times{
width:200px;
height:150px;
border:2px dashed red;
}
</style>
</head>
<body>
<div id="times">
</div>
</body>
<script>
function getD1(){
var date = new Date();
var d1 = date.toLocaleString();
var div1 = document.getElementById("times");
div1.innerHTML = d1;
}
setInterval("getD1();",1000);
</script>
</html>三十 案例—全選練習
使用複選框上面一個屬性判斷是否選中
checked屬性
checked=true ：選中，反之，不選中
創建一個頁面
複選框和按鈕
四個複選框表示愛好
還有一個複選框操作，全選和全不選，有一個事件
三個按鈕，分別有事件
全選
全不選
反選
<html>
<head>
</head>
<body>
<input type="checkbox" id="boxid" οnclick="selAllNo();"/>全選/全不選<br/>
<input type="checkbox" name="love"/>籃球<br/>
<input type="checkbox" name="love"/>排球<br/>
<input type="checkbox" name="love"/>羽毛球<br>
<input type="checkbox" name="love"/>乒乓球<hr/>
<input type="button" value="全選" οnclick="selAll();"/>
<input type="button" value="全不選" οnclick="selNo();"/>
<input type="button" value="反選" οnclick="selOther();"/>
</body>
<script>
function selAll(){
/*
1 獲取要操作的複選框
2 返回的是數組
屬性 checked判斷複選框是否選中
遍歷數組，得到每一個複選框checkbox設置其屬性checked=true
*/
var all = document.getElementsByName("love");
for(var i = 0;i<all.length;i++){
var all1 = all[i];
all1.checked = true;
}
}
function selNo(){
var all = document.getElementsByName("love");
for(var i = 0;i<all.length;i++){
var all1 = all[i];
all1.checked = false;
}
}
function selAllNo(){
var check = document.getElementById("boxid");
if(check.checked==true)
selAll();
else
selNo();
}
function selOther(){
var all = document.getElementsByName("love");
for(var i = 0;i<all.length;i++){
var all1 = all[i];
if(all1.checked == false)
all1.checked = true;
else
all1.checked = false;
}
}
</script>
</html>三十一 案例—下拉列表左右選擇
下拉選擇框
創建一個頁面
兩個下拉選擇框
設置屬性multiple
四個按鈕
<html>
<head>
</head>
<body>
<select id ="s1" multiple="multiple" style="width:100px;height:150px">
<option>11111</option>
<option>22222</option>
<option>33333</option>
<option>44444</option>
<option>55555</option>
<option>66666</option>
</select>
<select id ="s2" multiple="multiple" style="width:100px;height:150px">
<option>AAAAA</option>
<option>BBBBB</option>
<option>CCCCC</option>
<option>DDDDD</option>
<option>EEEEE</option>
<option>FFFFF</option>
</select>
<hr/>
<input type="button" value="選中添加到右邊>>" οnclick="selToRight()"/>
<input type="button" value="全部添加到右邊>>" οnclick="allToRight()"/>
<br/>
<input type="button" value="選中添加到左邊<<" οnclick="selToLeft()"/>
<input type="button" value="全部添加到左邊<<" οnclick="allToLeft()"/>
</body>
<script>
function selToRight(){
/*
1 獲取s1裏面的option
2 判斷是否被選中
屬性 selected
3 如果是選中
4 得到s2
5 appendChild方法
*/
var select1 = document.getElementById("s1");
var select2 = document.getElementById("s2");
var options1 = select1.getElementsByTagName("option");
for(var i=0;i<options1.length;i++){
var option1 = options1[i];
if(option1.selected==true){
select2.appendChild(option1);
i--;
}
}
}
function allToRight(){
var select1 = document.getElementById("s1");
var select2 = document.getElementById("s2");
var options1 = select1.getElementsByTagName("option");
for(var i=0;i<options1.length;i++){
var option1 = options1[i];
select2.appendChild(option1);
i--;
}
}
function selToLeft(){
var select1 = document.getElementById("s1");
var select2 = document.getElementById("s2");
var options2 = select2.getElementsByTagName("option");
for(var i=0;i<options2.length;i++){
var option2 = options2[i];
if(option2.selected==true){
select1.appendChild(option2);
i--;
}
}
}
function allToLeft(){
var select1 = document.getElementById("s1");
var select2 = document.getElementById("s2");
var options2 = select2.getElementsByTagName("option");
for(var i=0;i<options2.length;i++){
var option2 = options2[i];
select1.appendChild(option2);
i--;
}
}
</script>
</html>三十二 案例—省市聯動
<html>
<head>
</head>
<body>
<select id ="country" οnchange="add1(this.value);">
<option value="0">--請選擇--</option>
<option value="中國">中國</option>
<option value="美國">美國</option>
<option value="日本">日本</option>
</select>
<select id ="city" >
</select>
</body>
<script>
//創建一個數組存儲數據
var arr = new Array(3);
arr[0]=["中國","北京","吉林","哈爾濱","遼寧"];
arr[1]=["美國","華盛頓","底特律","休斯頓","紐約"];
arr[2]=["日本","東京","北海道","大阪","廣島"];
function add1(val){
/*
1 遍歷二維數組
2 得到也是一個數組
3 拿到的數組中的第一個值和傳遞過來的值作比較
4 如果相同，獲得到第一個值後面的元素
5 得到city的select
6 添加過去，appendChild方法
創建option
由於每次都要向city裏面添加option
第二次添加，會追加
每次添加之前，判斷一下city裏面是否有option，如果有，刪除
*/
var city = document.getElementById("city");
var options = city.getElementsByTagName("option");
for(var m=0;m<options.length;m++){
var op = options[m];
city.removeChild(op);
m--
}
for(var i=0;i<arr.length;i++){
var arr1 = arr[i];
var firstvalue = arr1[0];
if(firstvalue == val){
for(var j=1;j<arr1.length;j++){
var value1=arr1[j];
var option1 = document.createElement("option");
var text1 = document.createTextNode(value1);
option1.appendChild(text1);
city.appendChild(option1);
}
}
}
}
</script>
</html>三十三 案例—動態生成表格
<html>
<head>
</head>
<body>
行: <input type="text" id="row">
列: <input type="text" id="col">
<br/>
<input type="button" value="生成" οnclick="make();">
<hr/>
<div id="divv">
</div>
</body>
<script>
function make(){
/*
1 得到輸入的行和列的值
2 生成表格
循環行
在行裏面循環單元格
3 顯示到頁面上
*/
var rows = document.getElementById("row").value;
var cols = document.getElementById("col").value;
var tab = "<table border='1' bordercolor='red'>";
for(var i=1;i<=rows;i++){
tab +="<tr>";
for(var j=1;j<=cols;j++){
tab +="<td>aaaaa</td>";
}
tab +="</tr>";
}
tab +="</table>";
var divv = document.getElementById("divv");
divv.innerHTML=tab;
}
</script>
</html>