js BOM DOM
BOM對象
BOM（瀏覽器對象模型），能夠對瀏覽器窗口進行訪問和操做。使用 BOM，開發者能夠移動窗口、改變狀態欄中的文本以及執行其餘與頁面內容不直接相關的動做。javascript
簡而言之就是使 JavaScript 有能力與瀏覽器「對話」。html
Window 對象前端
alert() 顯示帶有一段消息和一個確認按鈕的警告框。
confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
prompt() 顯示可提示用戶輸入的對話框。
open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。
close() 關閉瀏覽器窗口。
setInterval() 按照指定的週期（以毫秒計）來調用函數或計算表達式。
clearInterval() 取消由 setInterval() 設置的 timeout。
setTimeout() 在指定的毫秒數後調用函數或計算表達式。
clearTimeout() 取消由 setTimeout() 方法設置的 timeout。
scrollTo() 把內容滾動到指定的座標。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
// alert(123) // 警告功能
// var ret=confirm("是否繼續？");
// console.log(ret)
// var ret=prompt("請輸入一個數字：");
// console.log(ret);
// open函數
//open("http://www.baidu.com","new","height=600,width=600")
//open方法 打開和一個新的窗口 並 進入指定網址.參數1 : 網址.
//調用方式1
//open("http://www.baidu.com");
//參數1 什麼都不填 就是打開一個新窗口. 參數2.填入新窗口的名字(通常能夠不填). 參數3: 新打開窗口的參數.
open('','','width=200,resizable=no,height=100'); // 新打開一個寬爲200 高爲100的窗口
//close方法 將當前文檔窗口關閉.
//close();
function foo(){
console.log("ok")
}
var t=setInterval(foo,1000);
//clearInterval(t);取消上面的
</script>
</head>
<body>
</body>
</html>
var num = Math.round(Math.random()*100); function acceptInput(){ //2.讓用戶輸入(prompt) 並接受 用戶輸入結果 var userNum = prompt("請輸入一個0~100之間的數字!","0"); //3.將用戶輸入的值與 隨機數進行比較 if(isNaN(+userNum)){ //用戶輸入的無效(重複2,3步驟) alert("請輸入有效數字!"); acceptInput(); } else if(userNum > num){ //大了==> 提示用戶大了,讓用戶從新輸入(重複2,3步驟) alert("您輸入的大了!"); acceptInput(); }else if(userNum < num){ //小了==> 提示用戶小了,讓用戶從新輸入(重複2,3步驟) alert("您輸入的小了!"); acceptInput(); }else{ //答對了==>提示用戶答對了 , 詢問用戶是否繼續遊戲(confirm). var result = confirm("恭喜您!答對了,是否繼續遊戲?"); if(result){ //是 ==> 重複123步驟. num = Math.round(Math.random()*100); acceptInput(); }else{ //否==> 關閉窗口(close方法). close(); } }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
var ID;
function start(){
if (ID==undefined){
bar();
ID=setInterval(bar,1000); // 123
//ID=setInterval(bar,1000); // 123
}
}
function bar(){
// 獲取當前時間字符串
var curr_time=new Date();
var s_time=curr_time.toLocaleString();
// 找到標籤，而後對其value賦值
var ele=document.getElementById("timer");
ele.value=s_time;
}
function stop(){
clearInterval(ID);
ID=undefined;
}
</script>
</head>
<body>
<!--onfocus 獲取光標事件-->
<input type="text" id="timer" onfocus="start()">
<button onclick="stop()">end</button>
</body>
</html>
var ID = setTimeout(abc,2000); // 只調用一次對應函數. clearTimeout(ID); function abc(){ alert('aaa'); }
History 對象java
History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。node
History 對象是 window 對象的一部分，可經過 window.history 屬性對其進行訪問。jquery
length 返回瀏覽器歷史列表中的 URL 數量。
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>
Location 對象瀏覽器
Location 對象包含有關當前 URL 的信息。app
Location 對象是 Window 對象的一個部分，可經過 window.location 屬性來訪問。dom
location.assign(URL) location.reload() location.replace(newURL)//注意與assign的區別
DOM對象
DOM 是 W3C（萬維網聯盟）的標準。DOM 定義了訪問 HTML 和 XML 文檔的標準：ide
"W3C 文檔對象模型（DOM）是中立於平臺和語言的接口，它容許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。"
W3C DOM 標準被分爲 3 個不一樣的部分：
核心 DOM - 針對任何結構化文檔的標準模型
XML DOM - 針對 XML 文檔的標準模型
HTML DOM - 針對 HTML 文檔的標準模型
什麼是 XML DOM？ －－－－>XML DOM 定義了全部 XML 元素的對象和屬性，以及訪問它們的方法。
什麼是 HTML DOM？－－－－>HTML DOM 定義了全部 HTML 元素的對象和屬性，以及訪問它們的方法。
整個文檔是一個文檔節點(document對象)
每一個 HTML 元素是元素節點(element 對象)
HTML 元素內的文本是文本節點(text對象)
每一個 HTML 屬性是屬性節點(attribute對象)
註釋是註釋節點(comment對象)
節點(自身)屬性:
attributes - 節點（元素）的屬性節點
nodeType – 節點類型
nodeValue – 節點值
nodeName – 節點名稱
innerHTML - 節點（元素）的文本值
導航屬性:
parentNode - 節點（元素）的父節點 (推薦)
firstChild – 節點下第一個子元素
lastChild – 節點下最後一個子元素
childNodes - 節點（元素）的子節點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<p>hello yuan</p>
</div>
<script>
var div=document.getElementById("div3");
console.log(div.nextElementSibling.nodeName) //推薦使用nextElementSibling
</script>
</body>
</html>
parentElement // 父節點標籤元素
children // 全部子標籤
firstElementChild // 第一個子標籤元素
lastElementChild // 最後一個子標籤元素
nextElementtSibling // 下一個兄弟標籤元素
previousElementSibling // 上一個兄弟標籤元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.item .c1{
display: none;
}
</style>
</head>
<body>
<p>hello P</p>
<div class="c1">
<div class="c2">c22222</div>
<p>c1----PPPP</p>
</div>
<a href="#" id="ID1"></a>
<div>
<div class="item">
<p onclick="foo(this)">菜單一</p>
<div class="c1">111111</div>
</div>
<div class="item">
<p onclick="foo(this)">菜單二</p>
<div class="c1">111111</div>
</div>
<div class="item">
<p onclick="foo(this)">菜單三</p>
<div class="c1">11111111</div>
</div>
</div>
</body>
<script>
function foo(self){
//console.log(self.parentElement.parentElement);
var eles=document.getElementsByClassName("c1");
if(self.nextElementSibling.style.display =="block"){
self.nextElementSibling.style.display="none";
}else{
self.nextElementSibling.style.display="block";}
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
}
.back{
height: 1200px;
width: 100%;
background-color: cornsilk;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
opacity: 0.4;
}
.model{
position: fixed;
width: 400px;
height: 400px;
background-color: white;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
/*z-index: 1000;*/
text-align: center;
}
.con{
margin-top: 100px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="back">
<button onclick="start()">start</button>
<h1>11111111111111</h1>
<img src="12.jpg" alt="">
</div>
<div class="shade hide btn"></div>
<div class="model hide btn">
<div class="con">
用戶名:<input type="text">
<button onclick="stop()">取消</button>
</div>
</div>
<script>
function stop(){
var model=document.getElementsByClassName("model")[0];
var shade=document.getElementsByClassName("shade")[0];
model.classList.add("hide");
// shade.classList.add("hide");
shade.className += " hide";
}
function start(){
var eles=document.getElementsByClassName("btn");
console.log(eles);
for (var i=0;i<eles.length;i++){
console.log(eles[i].classList.remove("hide"));
}
}
</script>
</body>
</html>
HTML的DOM事件
下面是一個屬性列表，這些屬性可插入 HTML 標籤來定義事件動做。
onclick 當用戶點擊某個對象時調用的事件句柄。 ondblclick 當用戶雙擊某個對象時調用的事件句柄。 onfocus 元素得到焦點。 //練習：輸入框 onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證. onchange 域的內容被改變。 應用場景：一般用於表單元素,當元素內容被改變時觸發.（三級聯動） onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交. onkeypress 某個鍵盤按鍵被按下並鬆開。 onkeyup 某個鍵盤按鍵被鬆開。 onload 一張頁面或一幅圖像完成加載。 onmousedown 鼠標按鈕被按下。 onmousemove 鼠標被移動。 onmouseout 鼠標從某元素移開。 onmouseover 鼠標移到某元素之上。 onmouseleave 鼠標從元素離開 onselect 文本被選中。 onsubmit 確認按鈕被點擊。
方法一： <div onclick="alert(123)">點我呀</div> 方法二： <p id="abc">試一試!</p> <script> var ele=document.getElementById("abc"); ele.onclick=function(){ alert("hi"); }; </script>
<div id="abc" onclick="func1(this)">事件綁定方式1</div>
<div id="id123">事件綁定方式2</div>
<script>
function func1(self){
console.log(self.id)
}
//jquery下是$(self), 這種方式this參數必須填寫;
//------------------------------------------
var ele=document.getElementById("id123").onclick=function(){
console.log(this.id);
//jquery下是$(this), 這種方式不須要this參數;
}
</script>
//將內容全選就會觸發，沒有內容也不會觸發（只用於input標籤） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" value="1230"> <script> var ele=document.getElementsByTagName("input")[0]; ele.onselect=function(){ alert(123) } </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
h1{
background-color: darkgray;
color: red;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<h1 class="title">歡迎光臨</h1>
<button onclick="test()">click</button>
<script>
function test(){
var ele=document.getElementsByClassName("title")[0];
// console.log(ele)
// console.log(ele.innerText);
// console.log(typeof ele.innerText);
var content=ele.innerText;
var fist_char=content.charAt(0);//取出字符串的第一個字
var later_string=content.substring(1,content.length);//字符串切片
var new_content=later_string+fist_char;//拼接字符串
// 賦值操做
ele.innerText=new_content;
}
setInterval(test,1000);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
*{margin:0; padding:0; list-style:none;}
body{
font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif;
}
h1{
text-align: center;
color:black;
margin-top: 30px;
letter-spacing: 5px;
}
.box{
width: 1000px;
overflow: hidden;
margin:100px auto 0px;
}
#title{
line-height: 40px;
background-color: rgb(247,247,247);
font-size: 16px;
font-weight: bold;
color: rgb(102,102,102);
overflow: hidden;
}
#title span{
float: left;
width: 166px;
text-align: center;
}
#title span:hover{
/*color: black;*/
cursor: pointer;
}
#content{
margin-top: 20px;
}
#content li{
width: 1050px;
overflow: hidden;
display: none;
background-color: rgb(247,247,247);
}
#content li div{
width: 156px;
margin-right: 14px;
float: left;
text-align: center;
}
#content li div a{
font-size: 14px;
color: black;
line-height: 14px;
/* float: left;*/
display: inline-block;
margin-top: 10px;
}
#content li a:hover{
color: #B70606;
}
#content li div span{
font-size: 16px;
line-height: 16px;
/*float: left;*/
display: block;
color: rgb(102,102,102);
margin-top: 10px;
}
#content img{
float: left;
width: 155px;
height: 250px;
}
#title .select{
background-color: rgb(10,167,112);
color: white;
}
#content .show{
display: block;
}
.show span{
color: red!important;
}
</style>
</head>
<body>
<h1 id="wel">京東商城歡迎您</h1>
<script>
function test(){
var mywel = document.getElementById("wel");
var content = mywel.innerText;
var f_content = content.charAt(0);
var l_content = content.substring(1,content.length);
var new_content = l_content + f_content;
mywel.innerText = new_content;
}
setInterval("test();", 500);
</script>
<div class="box">
<p id="title">
<span class="select">家用電器</span>
<span>傢俱</span>
<span>汽車</span>
<span>食品</span>
<span>女鞋</span>
<span>醫療保健</span>
</p>
<ul id="content">
<li class="show">
<div><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t4786/325/2470647304/119102/9e1a4ed5/59005841Nd786a8df.jpg" alt="冰箱"><a href="#">容聲(Ronshen)冰箱</a><span>價格:5600</span></div>
<div><img src="https://img12.360buyimg.com/n1/s450x450_jfs/t3037/347/1290968859/201366/7c1028a0/57c00194N9d0a54c6.jpg" alt="洗衣機"><a href="#">海爾洗衣機</a><span>價格:5400</span></div>
<div><img src="https://img11.360buyimg.com/n1/jfs/t3289/128/2393835119/236360/af1d283b/57e0f300N53dde603.jpg" alt="電飯煲"><a href="#">福庫(CUCKOO)電飯煲</a><span>價格:3999</span></div>
<div><img src="https://img13.360buyimg.com/n1/jfs/t3235/137/2361713777/152258/a6908440/57e098c2N44a90a5d.jpg" alt="智能電視"><a href="#">三星智能電視</a><span>價格:8999</span></div>
<div><img src="https://img10.360buyimg.com/n1/jfs/t2053/101/1391591157/215066/572e131b/5696ee9bN2376492d.jpg" alt="淨水器"><a href="#">淨水器</a><span>價格:1300</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t3175/78/2357430273/262835/9a8e7f65/57e0a3e9Nbda39dd2.jpg" alt="空氣淨化器"><a href="#">空氣淨化器</a><span>價格:5300</span></div>
</li>
<li>
<div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>
</li>
<li>
<div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
<div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
<div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
<div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
<div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
<div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
</li>
<li>
<div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div>
</li>
<li>
<div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>
</li>
<li>
<div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>
</li>
</ul>
</div>
<script>
var title=document.getElementById('title');
var content=document.getElementById('content');
var category=title.getElementsByTagName('span');
var item=content.getElementsByTagName('li');
for (var i = 0; i < category.length; i++) {
//載入的時候就先遍歷了一次
category[i].index=i;
console.log(category[i].index);
category[i].onclick=function(){
console.log(this.index);//這個是本次的點擊標籤的索引
for (var j = 0; j < category.length; j++) {
category[j].className='';
item[j].className='';
}
this.className='select';
item[this.index].className='show';
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container{
width: 300px;
background-color: purple;
text-align: center;
}
#title{
line-height: 50px;
}
#list{
display: none;
}
#list div{
line-height: 50px;
}
#list .item1{
background-color: green;
}
#list .item2{
background-color: yellow;
}
#list .item3{
background-color: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="title">mouseout演示</div>
<div id="list">
<div class="item1">111</div>
<div class="item2">222</div>
<div class="item3">333</div>
</div>
</div>
<script>
var container=document.getElementById("container");
var list=document.getElementById("list");
var title=document.getElementById("title");
title.onmouseover=function(){
list.style.display="block";
};
container.onmouseleave=function(){
list.style.display="none";
};
// list.onmouseout=function(){
// list.style.display="none";
// }
//onmouseout爲每個子標籤都綁定了離開就觸發的屬性，因此每次離開111不管是否還在最外層盒子裏面都會觸發消失。
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 200px;
height: 100px;
background-color: darkgreen;
}
</style>
</head>
<body>
<div class="div1">
DIV
</div>
<script>
var ele=document.getElementsByClassName("div1")[0];
//鼠標懸浮
ele.onmouseover=function(){
this.style.color="white";
this.style.cursor="pointer";
};
//鼠標未懸浮時
ele.onmouseleave=function(){
this.style.color="black";
};
//鼠標點擊下去後，未離開div都保持此狀態
ele.onmousedown=function(){
this.style.color="red";
}
</script>
</body>
</html>
onload屬性：
這個屬性的觸發標誌着頁面內容被加載完成。
應用場景: 當有些事情咱們但願頁面加載完馬上執行,那麼可使用該事件屬性。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //方式一： // window.onload=function(){ // var ele=document.getElementById("ppp"); // ele.onclick=function(){ // alert(123) // }; // }; function fun1() { var ele=document.getElementById("ppp"); ele.onclick=function(){ alert(123) }; } </script> </head> //方式二： <body onload="fun1()"> <p id="ppp">hello p</p> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
// function foo(){
// var ele=document.getElementsByTagName("p")[0];
// ele.style.color="red";
// }
window.onload=function(){
var ele=document.getElementsByTagName("p")[0];
ele.style.color="red";
}
</script>
</head>
<body>
<p>PPP</p>
</body>
</html>
onsubmit屬性：
是當表單在提交時觸發. 該屬性也只能給form元素使用.應用場景: 在表單提交前驗證用戶輸入是否正確.若是驗證失敗.在該方法中咱們應該阻止表單的提交。
<form id="form">
<input type="text"/>
<input type="submit" value="點我!" />
</form>
<script type="text/javascript">
//阻止表單提交方式1().
//onsubmit 命名的事件函數,能夠接受返回值. 其中返回false表示攔截表單提交.其餘爲放行.
var ele=document.getElementById("form");
ele.onsubmit=function(event) {
// alert("驗證失敗 表單不會提交!");
//方式一：
// return false;
// 阻止表單提交方式2 event.preventDefault(); ==>通知瀏覽器不要執行與事件關聯的默認動做。
alert("驗證失敗 表單不會提交!");
//方式二：
event.preventDefault();
}
Event 對象
Event 對象表明事件的狀態，好比事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
事件一般與函數結合使用，函數不會在事件發生前被執行！event對象在事件發生時系統已經建立好了,而且會在事件函數被調用時傳給事件函數.咱們得到僅僅須要接收一下便可.
好比onkeydown,咱們想知道哪一個鍵被按下了，須要問下event對象的屬性，這裏就時KeyCode；
思考：onclick＝function(event){};這個方法是誰調用的？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="d1">
<script>
var ele=document.getElementById("d1");
//此事件是按鍵鬆開的時候觸發
ele.onkeyup=function(e){
var num=e.keyCode;//這個返回的是按鍵對應的ascii碼。
var alph=String.fromCharCode(num);//這個方法至關於py中的char();
alert(e.keyCode+"----"+alph);
}
</script>
</body>
</html>
<div id="abc_1" style="border:1px solid red;width:300px;height:300px;">
<div id="abc_2" style="border:1px solid red;width:200px;height:200px;">
</div>
</div>
<script type="text/javascript">
document.getElementById("abc_1").onclick=function(){
alert('111');
}
document.getElementById("abc_2").onclick=function(event){
alert('222');
event.stopPropagation(); //阻止事件向外層div傳播.
}
</script>
節點操做
建立節點：
createElement(標籤名) ：建立一個指定名稱的元素。 例：var tag=document.createElement(「input") tag.setAttribute('type','text');
添加節點：
追加一個子節點（做爲最後的子節點）
somenode.appendChild(newnode)
把增長的節點放到某個節點的前邊
somenode.insertBefore(newnode,某個節點);
刪除節點：
removeChild()：得到要刪除的元素，經過父元素調用刪除
替換節點：
somenode.replaceChild(newnode, 某個節點);
節點屬性操做：
一、獲取文本節點的值：innerText innerHTML。
二、attribute操做
elementNode.setAttribute(name,value) elementNode.getAttribute(屬性名) <-------------->elementNode.屬性名(DHTML) elementNode.removeAttribute(「屬性名」);
三、innerHTML 給節點添加html代碼：
該方法不是w3c的標準，可是主流瀏覽器支持 ，
tag.innerHTML = 「<p>要顯示內容</p>」;
四、關於class的操做：
elementNode.className
elementNode.classList.add
elementNode.classList.remove
<script type="text/javascript"> //在第一個div中動態增長一個a標籤. 該a標籤點擊以後跳轉到百度首頁. function addNode(){ //1.得到 第一個div var div = document.getElementById("div_1"); //2.建立a標籤 createElement==>建立一個a標籤 <a></a> var eleA = document.createElement("a"); //3.爲a標籤添加屬性 <a href="http://www.baidu.com"></a> eleA.setAttribute("href", "http://www.baidu.com"); //4.爲a標籤添加內容 <a href="http://www.baidu.com">百度</a> eleA.innerHTML = "百度"; //5.將a標籤添加到div中 div.appendChild(eleA); } //點擊後 刪除div區域2 function deleteNode(){ //1 得到要刪除的div區域 var div = document.getElementById("div_2"); //2.得到父親 var parent = div.parentNode; //3 由父親操刀 parent.removeChild(div); } //點擊後 替換div區域3 爲一個美女 function updateNode(){ //1 得到要替換的div區域3 var div = document.getElementById("div_3"); //2建立img標籤對象 <img /> var img = document.createElement("img"); //3添加屬性 <img src="001.jpg" /> img.setAttribute("src", "001.JPG"); //4.得到父節點 var parent = div.parentNode; //5.替換 parent.replaceChild(img, div); } //點擊後 將div區域4 克隆一份 添加到頁面底部 function copyNode(){ //1.獲取要克隆的div var div = document.getElementById("div_4"); //2.克隆 參數爲true 那麼克隆時克隆全部子元素. false 只克隆本身 var div_copy = div.cloneNode(true); //3.得到父親 var parent = div.parentNode; //4.添加 parent.appendChild(div_copy); } </script>
修改HTML DOM
修改HTML內容：改變元素內容的最簡答的方法是使用 innerHTML ，innerText。
改變 CSS 樣式：
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
改變 HTML屬性 ：
elementNode.setAttribute(name,value)
elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)
建立新的 HTML元素：
createElement(name)；
刪除已有的 HTML 元素：
elementNode.removeChild(node)；
關於class的操做 ：
elementNode.className；
elementNode.classList.add；
elementNode.classList.remove；
<!DOCTYPE html>
<html lang="en">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box1">
<select multiple="multiple" size="10" id="left">
<option>book</option>
<option>book2</option>
<option>book3</option>
<option>book4</option>
<option>book5</option>
<option>book6</option>
</select>
</div>
<div id="choice">
<input class="add" type="button" value="--->" onclick="add()"><br>
<input class="remove" type="button" value="<---" onclick="remove();"><br>
<input class="add-all" type="button" value="====>" onclick="ADDall()"><br>
<input class="remove-all" type="button" value="<===" onclick="remall()">
</div>
<div>
<select multiple="multiple" size="10" id="right">
<option>book9</option>
</select>
</div>
<script>
function add(){
var right=document.getElementById("right");
var options=document.getElementById("left").getElementsByTagName("option");
for (var i=0; i<options.length;i++){
var option=options[i];
if(option.selected==true){
right.appendChild(option);
i--;
}
}
}
function remove(){
var left=document.getElementById("left");
var options=document.getElementById("right").getElementsByTagName("option");
for (var i=0; i<options.length;i++){
var option=options[i];
if(option.selected==true){
left.appendChild(option);
i--;
}
}
}
function ADDall(){
var right=document.getElementById("right");
var options=document.getElementById("left").getElementsByTagName("option");
for (var i=0; i<options.length;i++){
var option=options[i];
right.appendChild(option);
i--;
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select id="province">
<option>請選擇省:</option>
</select>
<select id="city">
<option>請選擇市:</option>
</select>
<script>
data={"河北省":["廊坊","邯鄲"],"北京":["朝陽區","海淀區"]};
var p=document.getElementById("province");
var c=document.getElementById("city");
for(var i in data){
var option_pro=document.createElement("option");
option_pro.innerText=i;//這裏innerHTML和innerText均可以
p.appendChild(option_pro);
}
p.onchange=function(){
pro=(this.options[this.selectedIndex]).innerHTML;
citys=data[pro];
c.options.length=0;
for (var i in citys){
var option_city=document.createElement("option");
option_city.innerHTML=citys[i];
c.appendChild(option_city);
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="select('all');">全選</button>
<button onclick="select('cancel');">取消</button>
<button onclick="select('reverse');">反選</button>
<table border="1" id="Table">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>444</td>
</tr>
</table>
<script>
function select(choice){
var ele=document.getElementById("Table");
var inputs=ele.getElementsByTagName("input");
for (var i=0;i<inputs.length;i=i+1){
var ele2=inputs[i];
if (choice=="all"){
ele2.checked=true;
}else if(choice=="cancel"){
ele2.checked=false;
}
else {
if (ele2.checked){
ele2.checked=false;
}else {
ele2.checked=true;
}
}
}
}
</script>
</body>
</html>
js做用域
JavaScript中，變量的做用域有全局做用域和局部做用域兩種。
在代碼中任何地方都能訪問到的對象擁有全局做用域，通常來講一下幾種情形擁有全局做用域：
最外層函數和在最外層函數外面定義的變量擁有全局做用域。
var name="yuan"; function foo(){ var age=23; function inner(){ console.log(age); } inner(); } console.log(name); // yuan //console.log(age); // Uncaught ReferenceError: age is not defined foo(); // 23 inner(); // Uncaught ReferenceError: inner is not defined
全部末定義直接賦值的變量自動聲明爲擁有全局做用域，例如：
var name="yuan"; function foo(){ age=23; var sex="male" } foo(); console.log(age); // 23 console.log(sex); // sex is not defined
全部window對象的屬性擁有全局做用域。
通常狀況下，window對象的內置屬性都都擁有全局做用域，例如window.alert()、window.location、window.top等等。
局部做用域：和全局做用域相反，局部做用域通常只在固定的代碼片斷內可訪問到，最多見的例如函數內部，全部在一些地方也會看到有人把這種做用域成爲函數做用域。
做用域鏈
在JavaScript中，函數也是對象，實際上，JavaScript裏一切都是對象。函數對象和其它對象同樣，擁有能夠經過代碼訪問的屬性和一系列僅供JavaScript引擎訪問的內部屬性。其中一個內部屬性是[[Scope]]，由ECMA-262標準第三版定義，該內部屬性包含了函數被建立的做用域中對象的集合，這個集合被稱爲函數的做用域鏈，它決定了哪些數據能被函數訪問。
//-----**********************例1********************************* var s=12; function f(){ console.log(s); var s=12; // if s=12 console.log(s) } f(); //-----**********************例2********************************* var s=10; function foo(){ console.log(s); var s=5; console.log(s); function s(){console.log("ok")}// 函數的定於或聲明是在詞法分析時完成的,執行時已再也不有任何操做 console.log(s); } foo(); //-----***********************例3******************************** function bar(age) { console.log(age); var age = 99; var sex= 'male'; console.log(age); function age() { alert(123) }; console.log(age); return 100; } result=bar(5); //-----********************************************************
分析：
當一個函數建立後，它的做用域鏈會被建立此函數的做用域中可訪問的數據對象填充。在函數bar建立時，它的做用域鏈中會填入一個全局對象，該全局對象包含了全部全局變量，以下圖所示：
解析到函數調用時，即bar(5)，會生成一個active object的對象，該對象包含了函數的全部局部變量、命名參數、參數集合以及this，而後此對象會被推入做用域鏈的前端，當運行期上下文被銷燬，活動對象也隨之銷燬。新的做用域鏈以下圖所示：
function bar(age) { console.log(age); var age = 99; var sex="male"; console.log(age); function age(){ alert(123); } ; console.log(age); return 100; } result=bar(5); 一 詞法分析過程(涉及參數，局部變量聲明，函數聲明表達式)： 1-1 、分析參數，有一個參數，造成一個 AO.age=undefine; 1-2 、接收參數 AO.age=5; 1-3 、分析變量聲明，有一個 var age, 發現 AO 上面有一個 AO.age ，則不作任何處理 1-4 、分析變量聲明，有一個 var sex，造成一個 AO.sex=undefine; 1-5 、分析函數聲明，有一個 function age(){} 聲明， 則把原有的 age 覆蓋成 AO.age=function(){}; 二 執行過程： 2-1 、執行第一個 console.log(age) 時，當前的 AO.age 是一個函數，因此輸出的一個函數 2-2 、這句 var age=99; 是對不 AO.age 的屬性賦值， AO.age=99 ，因此在第二個輸出的age是 99; 2-3 、同理第三個輸出的是 99, 由於中間沒有改變 age 值的語句了。 注意：執行階段： function age(){ alert(123) } ; 不進行任何操做，將執行語句複製給age這部操做是在詞法分析時，即運行前完成的。
相關文章
- 1. 【JS】DOM與BOM
- 2. JS之BOM、DOM
- 3. JS(DOM 和 BOM)
- 4. JS的BOM與DOM
- 5. DOM&BOM
- 6. JS事件和BOM和DOM
- 7. JS中的BOM、DOM對象
- 8. JS中的DOM與BOM
- 9. BOM DOM
- 10. JS進階 - JS 、JS-Web-API與DOM、BOM
- 更多相關文章...
- • XML DOM - XML 教程
- • PHP XML DOM - PHP教程
- • 適用於PHP初學者的學習線路和建議
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 【JS】DOM與BOM
- 2. JS之BOM、DOM
- 3. JS(DOM 和 BOM)
- 4. JS的BOM與DOM
- 5. DOM&BOM
- 6. JS事件和BOM和DOM
- 7. JS中的BOM、DOM對象
- 8. JS中的DOM與BOM
- 9. BOM DOM
- 10. JS進階 - JS 、JS-Web-API與DOM、BOM