"— Java攻城獅學習路線 —" 一. JavaScript基礎 輸出 使用 window.alert() 彈出警告框。 使用 document.write() 方法將內容寫到 HTML 文檔中。 使用 innerHTML 寫入到 HTML 元素。 使用 console.log() 寫入到瀏覽器的 ...
— Java攻城獅學習路線 —
一. JavaScript基礎
輸出
- 使用 window.alert() 彈出警告框。
- 使用 document.write() 方法將內容寫到 HTML 文檔中。
- 使用 innerHTML 寫入到 HTML 元素。
- 使用 console.log() 寫入到瀏覽器的控制台。
函數
函數定義
//無參函數 function functionname(){ 執行代碼 } //帶參函數 function myFunction(var1,var2){ 代碼 } //帶返回值函數 function myFunction(){ var x=5; return x; }函數訪問
//訪問無參函數 functionname(); //訪問帶參函數 myFunction(var1,var2); //訪問帶返回值函數 var a=myFunction();
對象
對象定義
var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue" };對象屬性
// 訪問對象的兩種方式 person.lastName; person["lastName"];對象方法
//定義對象方法 methodName : function() { code lines } //訪問對象方法 objectName.methodName()
javascript:void(0)
Javascript:void(0) 中最關鍵的是 void 關鍵字， void 是 JavaScript 中非常重要的關鍵字，該操作符指定要計算一個表達式但是不返回值。
二. JavaScript HTML DOM
- 整個文檔是一個文檔節點
- 每個 HTML 元素是元素節點
- HTML 元素內的文本是文本節點
- 每個 HTML 屬性是屬性節點
- 註釋是註釋節點
改變HTML
訪問
//通過ID獲取 var id = document.getElementById("thisId"); //通過標簽獲取（獲取為一個數組） var tags = document.getElementsByTagName("div"); //通過類名獲取（也為數組） var class = document.getElementsByClassName("className");修改
1.修改HTML內容 document.getElementById(id).innerHTML = "HelloWorld"; 2.修改屬性 //獲取屬性 element.getAttribute("屬性名"); //設置屬性 element.attribute=新屬性值; element.setAttribute("屬性名","修改值"); img.src = "img.jpg"; //設置img的src a.href = "www.baidu.com"; //設置a的鏈接
改變CSS
document.getElementById(id).style.property=新樣式;
document.getElementById("p2").style.color="blue"; //改變p2的字體顏色為藍色事件
事件組成：元素 + 動作 + 反應過程
//事件屬性
<h1 onclick="this.innerHTML='Ooops!'">點擊文本!</h1>
//HTML DOM分配事件
element.onclick = function(){dispalyDate();};
//HTML DOM EventListener
element.addEventListener("click", function(){dispalyDate();});
element.removeEventListener("mousemove", myFunction);
//onload 和 onunload 事件：用戶進入或離開頁面時被觸發
<body onload="checkCookies()">
//onchange 事件：結合對輸入欄位的驗證來使用
<input type="text" id="fname" onchange="upperCase()">
//onmouseover 和 onmouseout 事件：戶的滑鼠移至 HTML 元素上方或移出元素時觸發
element.onmouseover = function(){...};
element.onmouseout = function(){...};DOM節點
添加節點
//添加前需要新鍵節點 var p = document.createElement("p"); //新建元素p var word = document.createTextNode("文本內容"); //添加文本內容 p.appendChild(word);//作為父元素最後一個子元素添加插入節點
element.insertBefore(para,child); //插入指定位置替換節點
parent.replaceChild(para,child);刪除節點
div.removeChild(p);
三. JavaScript 瀏覽器BOM
瀏覽器對象模型（Browser Object Model (BOM)）
Window
表示瀏覽器視窗。所有 JavaScript 全局對象、函數以及變數均自動成為 window 對象的成員。
Window 尺寸
window.innerHeight - 瀏覽器視窗的內部高度(包括滾動條) window.innerWidth - 瀏覽器視窗的內部寬度(包括滾動條)window 方法
window.open() - 打開新視窗 window.close() - 關閉當前視窗 window.moveTo() - 移動當前視窗 window.resizeTo() - 調整當前視窗的尺寸
Window Screen
window.screen 對象包含有關用戶屏幕的信息。
Window Screen 可用寬度
screen.availWidth;Window Screen 可用高度
screen.availHeight
Window Location
window.location 對象用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。
- 屬性
方法
//location.assign() 方法載入新的文檔。 window.location.assign("http://www.w3cschool.cc");
Window History
window.history 對象包含瀏覽器的歷史
- history.back() - 與在瀏覽器點擊後退按鈕相同
- history.forward() - 與在瀏覽器中點擊向前按鈕相同
- history.go() - 跳轉到指定頁面
JavaScript 彈窗
警告框
//用於確保用戶可以得到某些信息 alert("sometext");確認框
//用於驗證是否接受用戶操作 //返回true或false var a = confirm("sometext");提示框
//用於提示用戶在進入頁面前輸入某個值 //如果用戶點擊確認，那麼返回值為輸入的值。如果用戶點擊取消，那麼返回值為 null var a = prompt("sometext","defaultvalue");
JavaScript 計時事件
setInterval()方法
//間隔指定的毫秒數不停地執行指定的代碼。 var timer = setInterval("javascript function",milliseconds);clearInterval()方法
//用於停止 setInterval() 方法執行的函數代碼 clearInterval(timer);setTimeout()方法
//在指定的毫秒數後執行指定代碼 var timer= setTimeout("javascript function", milliseconds);clearTimeout()方法
//停止執行setTimeout()方法的函數代碼 clearTimeout(timer);
