上篇回顧
javascript的簡單定義及瞭解javascript
引入方式及存在方式html
定義變量的方式及須要注意的地方java
常量以及標識符node
運算符之間的一些比較web
控制語句有哪些編程
基本數據類型及其方法數組
函數的簡單介紹及使用瀏覽器
BOM
一、瞭解
BOM（瀏覽器對象模型），能夠對瀏覽器窗口進行訪問和操做。使用 BOM，開發者能夠移動窗口、改變狀態欄中的文本以及執行其餘與頁面內容不直接相關的動做。app
使 JavaScript 有能力與瀏覽器「對話」。 從而提供與瀏覽器交互的方法和接口ide
二、window對象
|
1
2
3
4
5
|
//window對象
全部瀏覽器都支持 window 對象 表示瀏覽器窗口
概念上講.一個html文檔對應一個window對象.
功能上講: 控制瀏覽器窗口的.
使用上講: window對象不須要建立對象,直接使用便可.
|
三、window對象方法
|
1
2
3
4
5
6
7
8
9
10
11
|
alert() 顯示帶有一段消息和一個確認按鈕的警告框。
confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
// 其方法有返回值,結果爲布爾值 能夠進行一系列的判斷
prompt() 顯示可提示用戶輸入的對話框。
// 其方法有返回值,輸入有內容，即返回內容;點取消則返回null
open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。
close() 關閉瀏覽器窗口。
setInterval() 按照指定的週期（以毫秒計）來調用函數或計算表達式。
clearInterval() 取消由 setInterval() 設置的 timeout。
setTimeout() 在指定的毫秒數後調用函數或計算表達式。
clearTimeout() 取消由 setTimeout() 方法設置的 timeout。
scrollTo() 把內容滾動到指定的座標。
|
// 實例 // 在輸入框,實現點擊顯示當前時間,並有stop按鈕 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #show{ width: 200px; height: 50px; } </style> </head> <body> <input type="text" id="show" onclick="begin()"> <!--綁定點擊事件並觸發begin函數--> <button onclick="end()">Stop</button> <!--綁定點擊事件並觸發end函數--> <script> function showtime() { var date_time = new Date().toLocaleString(); // 獲取當前事件 var content = document.getElementById("show"); // 找到id爲。。的標籤 content.value = date_time; // 對標籤的value進行賦值 } var clock; // 聲明變量 function begin() { // 變量未被定義則爲undefined if (clock==undefined){ showtime(); // 執行函數 clock = setInterval(showtime,1000); // 屢次計時 單位毫秒 } } function end() { clearInterval(clock); // 清空屢次定時器 clock=undefined; // 從新賦值 } </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="f1()">點我</button>
<button onclick="f2()">中止</button>
<script>
var my_var;
function f1() {
my_var = setTimeout(function () {alert("Hello World")},3000);
// 等待三秒 彈出框Hello World
}
function f2() {
clearTimeout(my_var);
// 清除單次計時器
// 且必須在3000毫秒以前點擊 不然無效
}
</script>
</body>
</html>
四、History
History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。
History 對象是 window 對象的一部分，可經過 window.history 屬性對其進行訪問。
length 返回瀏覽器歷史列表中的 URL 數量。
|
1
2
3
4
5
|
// history方法
back() 加載 history 列表中的前一個 URL。
forward() 加載 history 列表中的下一個 URL。
go() 加載 history 列表中的某個具體頁面。
|
<a href="rrr.html">click</a> <button onclick=" history.forward()">>>></button> <button onclick="history.back()">back</button> <button onclick="history.go()">back</button> // go裏面的參數 1 和 -1 對應
五、location
Location 對象包含有關當前 URL 的信息。
Location 對象是 Window 對象的一個部分，可經過 window.location 屬性來訪問。編寫時可不使用 window 這個前綴。
Location提供的方法
- location.hostname 返回 web 主機的域名
- location.pathname 返回當前頁面的路徑和文件名
- location.port 返回 web 主機的端口 （80 或 443）
- location.protocol 返回所使用的 web 協議（http:// 或 https://）
- location.assign(URL) 加載新文檔
- location.replace(newurl) 加載新文檔
- location.reload() 從新加載 相似於瀏覽器刷新的快捷鍵F5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<button onclick="newurl()">加載assign文檔</button>
<button onclick="myurl()">加載replace文檔</button>
<button onclick="flush()">刷新文檔</button>
<script>
console.log(location.hostname);
console.log(location.pathname);
console.log(location.port);
console.log(location.protocol);
console.log(location.href);
// assign
function newurl() {
location.assign("http://www.xiaohuar.com/")
}
// replace
function myurl() {
location.replace("http://www.xiaohuar.com/")
}
// assign與replace的區別 assign可返回 replace不可返回上個url
// reload
function flush() {
location.reload()
}
</script>
</body>
</html>
DOM
一、定義
文檔對象模型（Document Object Model，DOM）是一種用於HTML和XML文檔的編程接口。
DOM 是 W3C（萬維網聯盟）的標準。DOM 定義了訪問 HTML 和 XML 文檔的標準
- 什麼是 XML DOM？ －－－－>XML DOM 定義了全部 XML 元素的對象和屬性，以及訪問它們的方法。
- 什麼是 HTML DOM？－－－－>HTML DOM 定義了全部 HTML 元素的對象和屬性，以及訪問它們的方法。
經過可編程的對象模型，JavaScript 得到了足夠的能力來建立動態的 HTML。
- JavaScript 可以改變頁面中的全部 HTML 元素
- JavaScript 可以改變頁面中的全部 HTML 屬性
- JavaScript 可以改變頁面中的全部 CSS 樣式
- JavaScript 可以對頁面中的全部事件作出反應
如此可見，體會到JavaScript的強大之處。
針對HTML DOM學習
- 如何改變 HTML 元素的內容 (innerHTML)
- 如何改變 HTML 元素的樣式 (CSS)
- 如何對 HTML DOM 事件對出反應
- 如何添加或刪除 HTML 元素
二、節點類型
根據 W3C 的 HTML DOM 標準，HTML 文檔中的全部內容都是節點：
- 整個文檔是一個文檔節點
- 每一個 HTML 元素是元素節點
- HTML 元素內的文本是文本節點
- 每一個 HTML 屬性是屬性節點
- 註釋是註釋節點
節點樹中的節點彼此擁有層級關係。
父（parent）、子（child）和同胞（sibling）等術語用於描述這些關係。父節點擁有子節點。同級的子節點被稱爲同胞（兄弟或姐妹）。
- 在節點樹中，頂端節點被稱爲根（root）
- 每一個節點都有父節點、除了根（它沒有父節點）
- 一個節點可擁有任意數量的子
- 同胞是擁有相同父節點的節點
下面的圖片展現了節點樹的一部分，以及節點之間的關係：
三、節點屬性
直接查找
|
1
2
3
4
|
document.getElementById 根據ID獲取一個標籤
document.getElementsByName 根據name屬性獲取標籤集合
document.getElementsByClassName 根據
class
屬性獲取標籤集合
document.getElementsByTagName 根據標籤名獲取標籤集合
|
間接查找
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
parentNode
// 父節點
childNodes
// 全部子節點
firstChild
// 第一個子節點
lastChild
// 最後一個子節點
nextSibling
// 下一個兄弟節點
previousSibling
// 上一個兄弟節點
parentElement
// 父節點標籤元素
children
// 全部子標籤
firstElementChild
// 第一個子標籤元素
lastElementChild
// 最後一個子標籤元素
nextElementtSibling
// 下一個兄弟標籤元素
previousElementSibling
// 上一個兄弟標籤元素
|
四、節點操做
內容
|
1
2
3
|
innerText 文本內容
innerHTML HTML內容
|
屬性
|
1
2
3
|
attributes
// 獲取全部標籤屬性
setAttribute(key,value)
// 設置標籤屬性
getAttribute(key)
// 獲取指定標籤屬性
|
node（節點）增、刪、改、查
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
// 增
document.createElement(name)
// 將建立標籤由document來
父級標籤.appendchild(name)
// 由父級標籤添加
// 刪
獲取刪除的標籤
父級標籤.removeChild(name)
// 改
第一種方式:
先進行刪除、再進行增長 增刪進行配合操做
第二中方式:
使用setAttribute();方法修改屬性
使用innerHTML屬性修改元素的內容
// 查
...
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.replece{
width: 100px; height: 100px;
background-color: gray;
}
div{
width: 300px; height: 200px;
background-color: #8aab30;
}
.replece{
width: 300px; height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<button onclick="rep()">替換</button>
<div class="div1" id="xx">
Hello World
<a href="http://www.baidu.com" class="go">百度</a>
<div class="replece"></div>
</div>
<!--<img src="timg.jpg" alt="">-->
<script>
// 增
var ele_div = document.getElementsByClassName("div1")[0]; // 經過class找標籤
add_p = document.createElement("p"); // 由文檔對象建立標籤
add_p.innerHTML = "Hello girl"; // 爲建立的標籤進行添加內容
ele_div.appendChild(add_p); // 添加操做由父級標籤來添加
// 刪
var del_a = document.getElementsByClassName("go")[0]; // 獲取刪除的標籤啊
var father = del_a.parentNode; // 刪除標籤的父級標籤
father.removeChild(del_a); // 父級進行刪除
// 改
function rep() {
var ele_replace = document.getElementsByClassName("replece")[0];
var ele_img = document.createElement("img");
ele_img.setAttribute("src","go_top.png");
var father = ele_replace.parentNode;
father.appendChild(ele_img);
father.replaceChild(img,ele_replace);
}
</script>
</body>
</html>
// 注意點: 根據class獲取獲得的是數組 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1,.div2,.div3,.div4{ width: 300px; height: 100px; } .div1{ background-color: green; } .div2{ background-color: yellow; } .div3{ background-color: rebeccapurple; } .div4{ background-color: deeppink; } </style> </head> <body> <div class="div1"> <button onclick="add()">add</button> hello div1 </div> <div class="div2"> <button onclick="del()">del</button> hello div2 </div> <div class="div3"> <button onclick="change()">change</button> <p>hello div3</p> </div> <div class="div4">hello div4</div> <script> function change() { var img=document.createElement("img");//<img src=""> //img.setAttribute("src","meinv.jpg"); img.src="meinv.jpg"; var ele=document.getElementsByTagName("p")[0]; var father=document.getElementsByClassName("div3")[0]; father.replaceChild(img,ele) } function add() { var ele=document.createElement("p");//<p></p> ele.innerHTML="<h1>hello p</h1>"; //ele.innerText="<h1>hello p</h1>"; ele.style.color="red"; ele.style.fontSize="10px"; var father=document.getElementsByClassName("div1")[0]; father.appendChild(ele) } function del() { var father=document.getElementsByClassName("div1")[0]; var son=father.getElementsByTagName("p")[0]; father.removeChild(son) } </script> </body> </html>
class操做
|
1
2
3
4
5
|
// 經過Elements去調用
className
// 獲取全部類名
classList.remove(cls)
// 刪除指定類
classList.add(cls)
// 添加類
|
事件
對於事件須要注意的要點：
- this
- event
- 事件鏈以及跳出
this標籤當前正在操做的標籤，event封裝了當前事件的內容。
DOM拾遺
A，簡單獲取select標籤選中的文本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="" id="xx"> <option value="0">北京</option> <option value="1">上海</option> <option value="2">廣州</option> </select> <script> sel = document.getElementById('xx'); text = sel.selectedOptions[0].innerHTML; console.log(text) </script> </body> </html>
實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="sx" id="provinces">
<option value="">省份</option>
</select>
<select name="sx" id="citys" size="1">
<option value="">城市</option>
</select>
<script>
// 數組
var data = {"陝西":["西安","咸陽","寶雞"],"山西":["太原","晉城","大同"]};
// 經過ID取到對應標籤
var pro_ele = document.getElementById("provinces");
var city_ele = document.getElementById("citys");
// 遍歷 i 爲 鍵
for (var i in data){
// 建立option標籤
var pro_child = document.createElement("option");
// 賦值
pro_child.innerHTML = i;
// 父級追加
pro_ele.appendChild(pro_child)
}
// 怎樣獲取到選擇的省份
// 綁定onchange事件
pro_ele.onchange = function () {
// 若是下一次進入 默認清空內容 保留第一個option
city_ele.length = 1;
// this.selectedIndex代指選中索引
// this.options獲取select標籤的option標籤數組
var province = this.options[this.selectedIndex].innerHTML; // 取到選中的文本
// 索引取值
var citys = data[province];
for (var i in citys){
var city_child = document.createElement("option");
city_child.innerHTML = citys[i];
city_ele.appendChild(city_child);
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="func1()">全選</button>
<button onclick="func2()">取消</button>
<button onclick="func3()">反選</button>
<table>
<tr>
<td><input type="checkbox"></td>
<td>籃球</td>
<td>足球</td>
<td>乒乓球</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>紅茶</td>
<td>綠茶</td>
<td>咖啡</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>桌子</td>
<td>椅子</td>
<td>櫃子</td>
</tr>
</table>
<script>
var inputs = document.getElementsByTagName("input");
// 全選
function func1() {
for (var i=0;i<inputs.length;i++){
inputs[i].checked = true;
}
}
// 取消
function func2() {
for (var i=0;i<inputs.length;i++){
inputs[i].checked = false;
}
}
// 反選
function func3() {
for (var i=0;i<inputs.length;i++){
inputs[i].checked = !inputs[i].checked;
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.div1{
height: 1500px;
background-color: red;
}
.div2{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: gray;
opacity: 0.6;
}
.div3{
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
width: 100px;
height: 100px;
background-color: yellow;
}
/* display:none即隱藏內容 */
.xs{
display: none;
}
</style>
</head>
<body>
<div class="div1">
<button onclick="show()">顯示</button>
<br>
<p>Hello World</p>
</div>
<div class="div2 xs"></div>
<div class="div3 xs">
<button onclick="off()">取消</button>
</div>
<script>
var ele_show1 = document.getElementsByClassName("div2")[0];
var ele_show2 = document.getElementsByClassName("div3")[0];
function show() {
// 刪除class帶有xs的屬性,即解除限制
ele_show1.classList.remove("xs");
ele_show2.classList.remove("xs");
}
function off() {
// 添加class名字
ele_show1.classList.add("xs");
ele_show2.classList.add("xs");
}
</script>
</body>
</html>
// onfocus和onblur事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="show" value="用戶名/手機號/郵箱" onfocus="begin()" onblur="end()"> <script> var content = document.getElementById("show"); function begin() { if (content.value == "用戶名/手機號/郵箱"){ content.value = ""; } } function end() { var result = content.value; if (!result.trim()){ content.value = "用戶名/手機號/郵箱" } } </script> </body> </html>
// 解除事件傳播 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ width: 300px; height: 300px; background-color: antiquewhite; } .inner{ width: 100px; height: 100px; background-color: rebeccapurple; } </style> </head> <body> <div class="outer" onclick="func2()"> <div class="inner"></div> </div> <script> var ele=document.getElementsByClassName("inner")[0]; ele.onclick= function (e) { alert("I am inner!"); // 解除事件傳播 e.stopPropagation() }; function func2() { alert("I am outer!") } </script> </body> </html>
// onsubmit事件 能夠用做匹配驗證 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" id="form1"> <input type="text" name="username"> <input type="submit" value="註冊"> </form> <script> var ele = document.getElementById("form1"); ele.onsubmit = function (e) { alert("驗證失敗"); // return false; e.preventDefault(); } </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>輸入一個0到9的數字</p>
<input id="numb">
<button onclick="func1()">提交驗證</button>
<p id="ret"></p>
<script>
function func1() {
var x, text;
x = document.getElementById("numb").value;
console.log(x);
if (isNaN(x) || x < 0 || x > 10){
text = "輸入錯誤";
return false
}else {
text = "輸入正確";
}
document.getElementById("ret").innerHTML = text;
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#txt{
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<div id="txt">啤酒飲料礦泉水，花生瓜子八寶粥</div>
<script>
setInterval(function () {
var txt = document.getElementById('txt').innerText;
var a = txt.charAt(0);
var b = txt.substring(1, txt.length);
var new_txt = b+a;
document.getElementById('txt').innerText = new_txt;
}, 500)
</script>
</body>
</html>