JavaScript
1.JavaScript概述
1.1.JavaScript是幹什麼的？
1. HTML 定義了網頁的內容
2. CSS 描述了網頁的佈局
3. JavaScript 指定了網頁的行爲
1.2.Js歷史
1995年5月，網景公司，叫Brendan Eich的哥們，10天，LiveScript
1995年12月，改名爲JavaScript
1996年8月，微軟，Jscript
1997-1999年，ECMA國際組織，ECMAScript，基於已有的JavaScript和Jscript，提出了標準的Script語法規則，JavaScript和Jscript都遵循這套標準。
1999-以後，ECMAScript不斷的更新
與java的關係？
不好意思，只是蹭了下你的熱度，我們其實沒關係
1.3.js特點
JavaScript 是腳本語言，不需要編譯，是解釋運行的語言。
JavaScript 是可插入 HTML 頁面的編程代碼，可由所有的現代瀏覽器執行。
JavaScript 是基於對象，弱類型的語言。
JavaScript 很容易學習。
1.4.js優點：
交互性：可以與用戶進行動態交互。
安全性：只能在瀏覽器內運行，不能訪問本地硬盤或其他資源。
跨平臺：有瀏覽器即可運行，與操作環境無關。
2.在html中引入js代碼（案例一）
2.1.直接在html中書寫js代碼
在html中可以在script標籤內部直接書寫js代碼，通常寫在head中！
2.2.引入外部的js文件
如果js代碼特別多的情況下, 可以將js代碼抽取到一個獨立的文件中, 在html中通過script標籤引入該js文件.
注意: script標籤如果是用來引入外部的js文件, 標籤內部不要再書寫js代碼, 並且標籤不要自閉, 否則可能會導致引入失敗！！！
案例一：在html中引入js
<!-- 第一種方式 --> <script type="text/javascript"> function fn1() { alert("引入js的第一種方式") } </script> <!-- 第二種方式（先創建demo.js文件，裏面直接寫js代碼） --> <script type="text/javascript" src="demo.js"></script> |
3.JavaScript語法
3.1.註釋
單行註釋: // 註釋內容
多行註釋: /* 註釋內容 */
3.2.數據類型
3.2.1基本數據類型
Ø 數值類型(number)
Ø 字符串類型(string)
Ø 布爾類型(boolean)
Ø undefined類型
Ø null類型
（1）數值類型
在js中, 所有的數值底層都是浮點型¸ 在需要時, 整型和浮點型會自動的進行類型的轉換.
例如：2.4+3.6=6
特殊值：
Infinity 正無窮大
-Infinity 負無窮大
NaN (not a number) 非數字 ：NaN和任何數值都不相等, 包括它本身. 如果要判斷一個值是否是非數字, 不能用 NaN == xx 來判斷, 而是應該使用 isNaN(xx) 進行判斷。
在js中, 爲number類型提供了對應的包裝對象 – Number。
（2）字符串類型
在js中, 字符串類型是基本數據類型的一種, 字符串常量, 可以用單引號或者雙引號引起來！
例如：var s1 = “aaa”; var s2 = ‘bbb’;
在js中, 爲string類型提供了對應的包裝對象 – String。
（3）布爾類型
boolean, 值爲true或false
在js中, 爲boolean類型提供了對應的包裝對象 – Boolean。
（4）undefined
undefined類型的值只有一個, 就是undefined. 表示變量未定義。如果聲明瞭一個變量, 但是沒有初始化值, 該變量的值就是undefined
例如：var a; 則a的值即爲undefined。
（5）null
null類型的值也只有一個, 就是null, 表示此處的值現在爲空。常用來作爲函數的返回值, 表示該返回值是一個沒有任何內容的空對象
3.2.2.複雜數據類型
複雜數據類型: 對象(普通對象 數組 函數)（後面詳講）
3.2.3.js中的數據類型的轉換（案例二）
js中的數據類型在需要時會自動的進行類型轉換, 轉換時遵循如下規則:
數值類型:
轉字符串類型, 直接轉成對應值的字符串, 3 --> "3"
轉布爾類型, 0和NaN轉成false, 其他數值轉成true
在需要時, 會自動轉成對應的包裝對象 100 --> new Number(100)
字符串:
空字符串(""): 轉數值爲0, 轉布爾值爲false
非空純數值字符串("123"): 轉數值爲對應的數值, 轉布爾值爲true
非空非數值字符串("abc"): 轉數值爲NaN, 轉布爾值爲true
在需要時, 會自動轉成對應的包裝對象. "aaa" --> new String("aaa")
布爾類型:
true: 轉數值爲 1, 轉字符串爲"true"
false: 轉數值爲 0, 轉字符串爲"false"
在需要時, 會自動轉成對應的包裝對象.
undefined
轉數值爲NaN, 轉字符串爲"undefined", 轉布爾值爲false, 轉對象會拋出異常!
null
轉數值爲 0, 轉字符串爲"null", 轉布爾值爲false, 轉對象會拋出異常!
案例二：數據類型轉換
<!-- 數據類型轉換 --> <script type="text/javascript"> //1.數值類型 //1.1.彈出數字6與字符串"66"的和 alert(6+"66"); //1.2.對數字進行判斷，若爲0或NaN，則彈出"世界如此美好！" 若爲其他數字，則彈出"我卻如此暴躁！" if(3){ alert("我卻如此暴躁！"); }else{ alert("世界如此美好！"); } //2.字符串 //2.1.彈出字符串"1000"與數字334的差 alert("1000"-334); //2.2.字符串判斷，若爲空字符串("")，彈出"師傅，大師兄說的對！"，若爲非空字符串，彈出"大師兄，師傅被妖怪抓走了！" if("123"){ alert("大師兄，師傅被妖怪抓走了！"); }else{ alert("師傅，大師兄說的對！"); }
//3.布爾類型 /* 已知：var a = [3>2>1, 1<2<3] 則a[0]和a[1]的值分別是什麼？*/ var a = [3>2>1, 1<2<3]; alert(a[0]); //false alert(a[1]); //true </script> |
3.3.變量的定義
在js中有數據類型, 但是變量不區分類型, 所以稱js是一門弱類型的語言。
在js中通過var關鍵字聲明變量, 變量不區分類型, 可以指向任意類型的值!
例如：var s1 = “aaa”; var i = 100;
3.4.運算符（案例三）
JS中的運算符和Java中的運算符大致相同
JS中與java運算符不同之處：
比較運算符除了“==”，還有“===”
== 在進行比較時, 如果兩端的值不是同一種數據類型, 先自動轉成同一種數據類型, 再進行比較, 如果轉換之後再比較, 相等則返回true, 不相等則返回false;
=== 爲嚴格相等，在進行比較時, 如果兩端的值不是同一種數據類型, 直接返回false; 如果是同一種類型再次比較值是否相等, 是則返回true, 不是則返回false
typeof: 用來返回變量/常量/表達式的數據類型
格式：var x = 123; typeof x
delete: 用來刪除數組中的元素或者刪除對象中的屬性或方法。。。
格式：var arr = [123,”abc”,true]; delete arr[1];
案例三：運算符
<!-- 運算符演示 --> <script type="text/javascript"> //1.分別用"=="和"==="判斷數字666和字符串"666"是否相等 alert(666=="666"); //true alert(666==="666"); //false //2.分別對x進行不同的賦值，利用typeof查看x的數據類型 var x = "1"; alert(typeof x); //3.問題：判斷typeof 6+"66" 的值是什麼？ alert(typeof 6+"66");//number66 //4.刪除下面數組中的第二個元素 var arr = [111,"abc",true]; delete arr[1]; alert(arr); alert(arr[1]); </script> |
3.5.語句
JS中的語句和Java中的語句也大致相同
if條件語句
如果判斷條件不是布爾類型, 會自動轉換成布爾值!
switch語句
語法和Java中大致相同, 並且也支持字符串類型
循環語句
while(){} do{}while() for(){} 語法和Java中的很相似, 但是js中不支持增強for循環
3.6.函數（案例四）
3.6.1.通過function關鍵字來定義一個函數
function 函數名(形參列表){
函數體
}
調用函數: 函數名(實參列表)
3.6.2.通過函數表達式來定義一個函數
var fn = function (形參列表){
函數體
}
調用函數: 函數名(實參列表)
案例四：函數
<!-- 函數演示 --> <script type="text/javascript"> //1.分別用兩種方式定義一個方法，將姓名與年齡作爲參數傳入，調用方法時彈出姓名與年齡 //方式一 function fn1(name,age){ alert(name+":"+age); } fn1("蘭姐",18); //方式二 var fn2 = function(name,age){ alert(name+":"+age); } fn2("剛哥",19); </script> |
3.7.數組
3.7.1.通過Array()構造函數來創建數組
var arr1 = new Array(); //創建一個空數組
var arr2 = new Array(10); //創建一個長度爲10的空數組
var arr3 = new Array(“aa”, 55, true); //創建一個具有指定初始值的數組
3.7.2.通過數組直接量來創建數組
var arr4 = []; //創建一個空數組
var arr5 = [“x”, 100, false]; //創建一個具有指定初始值的數組
數組中的細節問題:
>> 數組的長度可以被任意改變
var arr =[“aa”, “bb”, “cc”]; arr.length=1; //[“aa”]
>> 如果數組中某一個位置沒有元素, 該位置的值爲undefined
var arr =[“aa”, “bb”, “cc”]; arr[10]; //undefined
>> JS中的數組可以存放任意類型的數據
var arr = [“x”, 100, false];
3.8.js中的內置對象（案例五）
3.8.1.String對象
創建：
var str1 = new String(“xxx”); //創建字符串對象
var str2 =“xxx”; //創建字符串基本類型，但是也可以
常用屬性和方法：
str.length 返回字符串長度。
str.charAt(index) 返回指定索引位置處的字符。
例如：var str = "abcdeabc"; x.charAt(3) // 3
str.indexOf(subString, startIndex) 返回第一次出現子字符串的位置。
例如：var str = "abcdeabc"; x.indexOf("bc",2) // 6，從第3個開始數
str.lastIndexOf(substring, startindex) 返回最後出現子字符串的位置。
例如：var str = "abcdeabc"; x.lastIndexOf("bc",8); // 6，從後往前數
str.split(delimiter) 將字符串按照指定字符分割爲字符串數組。
例如：var str = "a:b:c:d"; str.split(":") //返回爲一個數組[a,b,c,d]
str.slice(start, end) 提取字符串的某個部分，含頭不含尾。
例如：var str = "abcdeabc"; str.slice(2,4); // cd
str.substr(start, length) 返回從指定位置開始的指定長度的子字符串。
例如：var str = "abcdeabc"; str.substr(2,4); //cdea
str.toLowerCase( ) 字符串中的字母轉換爲小寫。
例如：var str = "ABCDE"; str.toLowerCase(); //abcde
str.toUpperCase( ) 字符串中的字母轉化爲大寫。
例如：var str = "abcde"; str.toUpperCase(); //ABCDE
str.match(regexp) 在字符串中查找指定匹配正則表達式的值。
str.replace(regexp, replaceText) 字符串中匹配正則的值替換爲其他值。
str.search(regexp) 查找與正則表達式匹配的第一個子字符串的位置。
3.8.2.RegExp 對象（正則表達式）
創建：
var reg1 = new RegExp("", "");
var reg2 = /xxx/;
標識符: g à Global 全局查找 i à IgnoreCase 忽略大小寫
如果正則需要從頭到尾都匹配，需要以”^”開頭，以”$”結尾。
reg.test(str); 檢查字符串是否符合該正則, 如果符合返回true, 不符合返回false！！！
3.8.3.Array對象
創建：
var arr1 = new Array();
var arr2 = [];
常用屬性和方法：
arr.length 返回數組中元素的個數
例如：var arr = ["a","b","c"]; arr.length; // 3
arr.concat(arr1,arr2,arr3...) 將多個數組合併成一個
例如：
var arr1 = ["a","b","c"]; var arr2 = ["d","e","f"]; var arr3 = ["x","y","z"];
arr1.concat(arr2,arr3); // ["a","b","c","d","e","f","x","y","z"]
arr.join(string) 將數組中所有元素按照指定字符串連接成一個字符串
例如：var arr = ["aaa",123,true]; arr.join("-"); // aaa-123-true
arr.reverse( ) 返回一個元素順序被反轉的 Array 對象。
例如：var arr = ["a","b","c"]; arr.reverse(); //["c","b","a"]
arr.slice(start, end) 返回一個數組的一段，含頭不含尾。
例如：var arr = ["a","b","c",1,2,3]; arr.slice(2,4); // ["c",1]
arr.splice(start, deleteCount,value...)
從一個數組中移除一個或多個元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。
例如：var arr = ["a","b","c","d","e","f"]; arr.splice(2,2,"zzz");
// 返回值爲["c","d"]，arr則變爲["a","b","zzz","e","f"]，中間被替換
arr.pop( ) 移除數組中的最後一個元素並返回該元素
例如：var arr = ["aaa",123,"x",true,8]; arr.pop();
//返回值爲 8，arr則變爲["aaa",123,"x",true]
arr.push(value) 在數組的末尾加上一個或多個元素，並返回新數組的長度值
例如：var arr = ["aaa",123,"x",true,8]; arr.push("last")
//返回值爲6，arr則變爲 ["aaa",123,"x",true,8,"last"]
arr.shift( ) 移除數組中的第一個元素並返回該元素
例如：var arr = ["aaa",123,"x",true,8]; arr.shift()
//返回值爲 "aaa" ，arr則變爲[123,"x",true,8]
arr.unshift(value) 爲數組的開始部分加上一個或多個元素,並且返回該數組的新長度
例如：var arr = ["aaa",123,"x",true,8]; arr.unshift("first")
//返回值爲6，arr則變爲["first","aaa",123,"x",true,8]
arr.sort(sortfunction) 返回排序後的數組。
3.8.4.date對象
創建：
var date1 = new Date(); // 當前時間
var date2 = new Date(年,月,日[,時,分,秒]); //指定時間，可以只有年月日
注意：當創建指定時間的時候，月是從0開始，例如：
var date2 = new Date(2008,7,8,20,0,0);
這個時間是2008年8月8日晚上8點整
常用方法：
data.toLocaleString() 把日期(一個數值)轉變成本地日期格式字符串
例如：var date2 = new Date(2008,7,8); date2.toLocaleString();
// "2008/8/8 上午12:00:00"
data.getFullYear() 獲取日期對象中所表示時間的年份
例如： var date = new Date(2008,7,8); date.getFullYear(); // 2008
data.getMonth() 獲取日期對象中所表示時間的月份，返回一個 0 到 11 之間的整數，0表示一月。
例如：var date = new Date(2008,7,8); date.getMonth(); // 7
data.getDate() 獲取日期對象中所表示一個月的日期值，返回值是一個處於 1 到 31 之間的整數，代表了相應的日期值。
例如：var date = new Date(2008,7,8); date.getDate(); // 8
data.getDay() 獲取日期對象中所表示一個周的日期值。 返回的值是一個處於 0 到 6 之間的整數，0表示週日，6表示週六。
例如：var date = new Date(2008,7,8); date.getDay(); // 5，表示週五
data.getTime() 返回從 1970 年 1 月 1 日至指定時間的毫秒數。
例如：var date = new Date(2008,7,8); date.getTime(); //1218124800000
3.8.5.Math對象
Math可以直接拿來用！
常用屬性和方法：
Math.PI 返回圓周率的值，約等於 3.141592653589793。
例如：var num = Math.PI; // num 的值爲3.141592653589793。
Math.exp(number) 返回 e（自然對數的底）的冪。
例如：Math.exp(1) // e1 約等於2.718281828459045
Math.abs(number) 返回數字的絕對值。
例如：Math.abs(-5) // 5
Math.ceil(number) 向上取整
例如：Math.ceil(3.14) // 4
Math.floor(number) 向下取整
例如：Math.floor(3.14) // 3
Math.round(number) 四捨五入到整數
例如：Math.round(5.67) // 6
Math.random() 返回介於 0 和 1 之間的僞隨機數。
案例五：js內置對象
<!-- js內置對象 --> <script type="text/javascript"> //一、字符串String //1.將字符串中所有的"java"提取到一個數組中 var str = "zhang,java,wang,JAVA,li,java,zhao"; var reg1 = /java/g; alert(str.match(reg1)); //2.將字符串中所有的"java"不分大小寫提取到一個數組中 var reg2 = /java/ig; alert(str.match(reg2)); //3.將所有的"java"不分大小寫，全部換成"C++" alert(str.replace(reg2,"C++")); //4.查找第一個"java"出現的位置(不分大小寫) alert(str.search(reg2));
//二、正則 //檢查str字符串是否符合如下正則 var reg3 = /wang/; var reg4 = /^wang$/; alert(reg3.test(str)); alert(reg4.test(str));
//三、數組 //對arr進行排序，思考排序後的順序 var arr = ["aaa",123,"x",true,8]; alert(arr.sort());
//四、Math對象 //1.返回一個1-100之間的隨機整數 alert(Math.ceil(Math.random()*100)); //2.返回一個30-50直接的隨機數 alert(Math.round(Math.random()*20+30)); </script> |
3.8.6.全局對象
全局對象沒有語法。直接調用其方法。
parseFloat(numString) 將字符串轉換成浮點數。
例如：parseFloat("13.14") // 返回number類型的13.14
parseInt(numString) 將字符串轉成整數，非四捨五入。
例如：parseInt("9.99") // 返回number類型的9
isNaN(numValue) 判斷一個值是否爲非數字。
例如： isNaN("abc") // true
isNaN("123") // false
eval(codeString) 判斷一個字符串並將其以腳本代碼的形式執行
例如：eval("alert(1+2)"); //會直接將"alert(1+2)"當作代碼執行，彈出3
3.9.自定義對象（案例6）
3.9.1.方式一：構造函數定義對象
function Person(){} // 定義一個空的Person對象
function Person2(參數1,參數2...){
對象內容...
} //定義一個帶參數的對象
3.9.2.方式二：對象直接量
var p3 = {
"key1" : "value1",
"key2" : "value2".........
}
3.9.3.對象中取值：
P3.key1 或者 p3["key1"]
案例六：自定義對象
<!-- 自定義對象 --> <script type="text/javascript"> //1.分別用兩種方式定義一個對象，包含姓名和年齡，以及彈出姓名年齡的方法 //方式一 function Person1(){}; var p1 = new Person1(); p1.name = "尼古拉斯趙四"; p1.age = 1; p1.run = function(){ alert(this.name+":"+this.age) } p1.run();
function Person2(name,age){ this.name = name; this.age = age; this.run = function(){ alert(this.name+":"+this.age); } } var p2 = new Person2("尼古拉斯趙四",30); p2.run();
//方式二 var p3 = { "name" : "尼古拉斯趙四", "age" : "80", "run" : function(){ alert(this.name+":"+this.age); } } p3.run(); </script> |
4.DHTML
4.1.DHTML概述
DHTML: Dynamic HTML 動態的 html
DHTML並不是一門新的技術, 而是將現有的HTML, CSS, JavaScript整合在一起, 形成了DHTML技術.
DHTML分爲BOM和DOM。
BOM：Browse Object Modle 即瀏覽器對象模型，其中封裝了瀏覽器操作相關對象。
DOM：Document Object Modle 即文檔對象模型，將整個HTML文檔按照文檔結構組織成了樹形結構。
4.2.BOM（案例7）
4.2.1.Window 對象
此對象爲全局對象，因此，調用方法或屬性時，可以省略window。
常用事件：
onclick事件 – 當窗口被點擊時觸發
onfocus事件 – 當窗口獲得焦點時觸發
onblur事件 – 當窗口失去焦點時觸發
onload事件 – 當整個html文檔加載完之後立即觸發
常用方法：
alert() – 消息對話框
confirm() – 確認對話框
4.2.2.location對象
屬性：
href – 獲取或設置瀏覽器地址欄url。。。
案例7：BOM
<!-- BOM --> <script type="text/javascript"> //window對象 //1.在按鈕點擊時彈出提示框 function clickfn(){ alert("按鈕被點擊"); } //2.輸入框1獲得焦點時彈出提示框 function focusfn(){ alert("輸入框1獲得焦點 "); } //3.輸入框2失去焦點時彈出提示框 function blurfn (){ alert("輸入框2失去焦點"); } //4.彈出輸入框3中的value值 οnlοad=function(){ //獲取輸入框3的input按鈕 var inp = document.getElementById("input3"); alert(inp.value); } //5.點擊刪除商品按鈕，彈出提示是否刪除,如果確定，則彈出商品已刪除，否則彈出商品還在 function delfn(){ if(confirm("確認刪除商品？")){ alert("商品已刪除"); }else{ alert("商品還在"); } } //location對象 //1.彈出當前url alert(location.href); //2.將頁面url設置爲"http://www.baidu.com" alert("此頁面將跳轉到tmooc"); location.href = "http://www.baidu.com"; </script> |
4.3.DOM（DOM案例）
4.3.1.獲取元素
document.getElementById("id值"); 通過id值獲取指定id的元素
document.getElementsByName("name屬性值"); 通過name屬性獲取指定name值的所有元素組成的集合數組
document.getElementsByTagName("元素名"); 通過元素的名稱獲取指定元素名的所有元素組成的集合數組
value屬性： 獲取或設置輸入框的value值
innerText： (部分瀏覽器不支持) 獲取或設置元素內的文本內容
innerHTML： 獲取或設置元素的html內容
4.3.2.元素的增刪改
docuemnt.createElement("div"); 創建一個div元素
body.appendChild(oDiv); 往body中追加一個子元素
body.removeChild(oDiv); 刪除oDiv子元素
body.replaceChild(oNewDiv, oDiv); 用oNewDiv替換已有的子元素oDiv
body.insertBefore(oDiv1, oDiv); 往body中插入一個子元素oDiv1, 子元素是插入在oDiv的前面
oDiv.cloneNode([boolean]); 克隆oDiv元素, 參數默認值爲false, 表示只克隆元素本身, 不克隆oDiv內的所有子孫元素, 如果希望克隆元素還克隆元素內容所有子孫元素, 可以傳入參數true！！！
Dom案例一
/* --通過ID獲取並彈出用戶名輸入框的值-- */ function demo1(){ //根據ID獲取用戶名輸入框，un即代表整個輸入框 var un = document.getElementById("username"); alert(un.value); //可以自己設置value值 un.value = "蘭姐"; }
/* --通過name屬性獲取並彈出密碼輸入框的值-- */ function demo2(){ //根據name屬性獲取密碼輸入框，因爲name屬性可以重複，所以獲取的是一個集合數組 var pwarr = document.getElementsByName("password"); //在數組中獲取第一個元素 var pw = pwarr[0]; alert(pw.value); }
/* --通過元素名稱獲取並彈出確認密碼輸入框的值-- */ function demo3(){ //根據標籤名獲取確認密碼輸入框，同樣，獲取的是一個數組 var inparr = document.getElementsByTagName("input"); //獲取第三個元素 var pw2 = inparr[2]; alert(pw2.value); }
/* --獲取元素內容-- */ function demo4(){ var oP = document.getElementById("pid"); //獲取p標籤中的文本內容 innerText(部分瀏覽器不支持) alert(oP.innerText); //獲取p標籤中的所有html內容 innerHTML(絕大部分瀏覽器都支持) alert(oP.innerHTML); //設置p標籤中的html內容 oP.innerHTML = "<font color='blue'>我要變身了...!</font>"; } |
Dom案例二
/* --添加節點: 添加一個div元素到body的最後面-- */ function addNode(){ //獲取父元素 //var oBody = document.getElementsByTagName("body")[0]; //body是document的子對象，所以可以直接獲取 var oBody = document.body;
//創建一個遊離div元素 var oNewDiv = document.createElement("div"); //給div中添加內容 oNewDiv.innerHTML = "我是新來的....!";
//將div元素掛載到父元素上 oBody.appendChild(oNewDiv); }
/* --刪除節點: 刪除body中id值爲 div_3 的div元素-- */ function deleteNode(){ //獲取父元素body var oBody = document.body;
//獲取要刪除的元素div_3 var oDiv_3 = document.getElementById("div_3");
//解除父子關係 oBody.removeChild(oDiv_3); }
/* --更新節點: 用新節點替換id值爲 div_2 的div元素 -- */ function updateNode(){ //創建一個新節點 var oNewDiv = document.createElement("div"); oNewDiv.innerHTML = "我是來替換的~!";
//獲取被替換的元素 var oDiv_2 = document.getElementById("div_2");
//獲取父元素, 並通過父元素替換子元素 var oBody = oDiv_2.parentNode; oBody.replaceChild(oNewDiv, oDiv_2); }
/* --克隆節點、插入節點到指定元素的前面--*/ function copyNode(){ //獲取指定元素 var oDiv_4 = document.getElementById("div_4");
//克隆元素 var oCloneDiv = oDiv_4.cloneNode(true); //false 默認值, 只克隆元素本身, 不克隆元素內容
//獲取父元素body var oBody = document.body; var oDiv_2 = document.getElementById("div_2"); //將克隆元素插入到指定位置 oBody.insertBefore(oCloneDiv,oDiv_2); } |
Dom案例三
/* --通過js實現訪QQ列表好友分組-- */ function openDiv(thisobj){ var oDiv = thisobj.parentNode.getElementsByTagName("div")[0]; /* 當點擊一個分組時, 如果這個分組是展開的, 點擊之後應該關閉當前分組 當點擊一個分組時, 如果這個分組是關閉的, 點擊之後應該先關閉所有, 再展開當前分組 */
if(oDiv.style.display == "block"){//分組是展開的 oDiv.style.display = "none"; }else{//分組是關閉的 //獲取所有的分組, 依次關閉分組 var arrDiv = document.getElementsByTagName("div"); for(var i=0; i<arrDiv.length; i++){ arrDiv[i].style.display = "none"; } //將div由隱藏設置爲顯示(展開分組) oDiv.style.display = "block"; } } |
Dom案例四
var data = { "北京市": ["海淀區","朝陽區","豐臺區"], "河北省": ["石家莊","唐山","秦皇島"], "遼寧省": ["瀋陽","大連","鞍山"], "山東省": ["青島","濟南","煙臺"] }
//練習1 function getCountry(thisobj){ //當選項切換時, 觸發onchange事件, 執行getCountry函數, 在函數中獲取當前選中的國家並彈出! alert(thisobj.value); }
//練習2 function selectCity(thisobj){ //1.獲取用戶選中的省份 var prov = thisobj.value;//thisobj-->省份的select //2.根據省份獲取省份對應的城市列表 var citys = data[prov];
//3.將省份對應的所有城市作爲option選項依次填充到城市select中 //>>獲取城市select var oCitySele = document.getElementById("city");
//>>在填充城市列表數據之前, 先清空之前的數據 oCitySele.innerHTML = "<option>--選擇城市--</option>";
//填充城市列表數據 for(var i=0; i<citys.length; i++){ var opt = document.createElement("option"); opt.innerHTML = citys[i]; oCitySele.appendChild(opt); } } |
