2018-07-09 第六十四天 JavaScript

JavaScriptjavascript

1、JS中event事件css

1.什麼是事件：html

事件是能夠被 JavaScript 偵測到的行爲java

網頁中的每一個元素均可以產生某些能夠觸發 JavaScript 函數的事件。比方說，咱們能夠在用戶點擊某按鈕時產生一個 onClick 事件來觸發某個函數node

事件一般與函數配合使用，這樣就能夠經過發生的事件來驅動函數執行。瀏覽器

<body onload="getTime()">app

<input type="button" value="提交" onclick="calc()"/>dom

<input type="button" value="暫停" onclick="pauseTime()"/>函數

<input type="button" value="繼續" onclick="continueTime()"/>學習

2.有哪些事件：

3.事件的觸發：

<!DOCTYPE html>

<html>

<head>

function demo1(){

console.log("個人demo1");

}

function demo2(){

console.log("鼠標移動");

}

function demo3(){

console.log("鍵盤彈起");

}

function demo4(){

console.log("內容改變");

}

function demo5(val){

console.log(val);

}

function demo6(){

console.log("頁面加載完成");

}

</script>

<style>

.div1{

width: 200px;

height: 200px;

border: 1px solid red;

}

</style>

</head>

</select>

</body>

</html>

<!--

總結事件的通常使用狀況:

onclick、ondblclick、按鈕使用（按鈕是絕對不會結合onchange、onblur事件）

onchange、onkeydown、onkeyup onblur、onfocus、結合單行文本框和多行文本框

onchange:下拉框

onload：做用body

onmouseover、onmouseout、onmousemove：某些塊元素上結合使用

-->

2、JS中BOM對象

1.什麼是BOM：

BOM是Browser Object Model的簡寫，即瀏覽器對象模型。

BOM由一系列對象組成，是訪問、控制、修改瀏覽器的屬性的方法

BOM沒有統一的標準(每種客戶端均可以自定標準)。

BOM的頂層是window對象

2.什麼是DOM：

DOM是Document Object Model的簡寫，即文檔對象模型。

DOM用於XHTML、XML文檔的應用程序接口(API)。

DOM提供一種結構化的文檔描述方式，從而使HTML內容使用結構化的方式顯示。

DOM由一系列對象組成，是訪問、檢索、修改XHTML文檔內容與結構的標準方法。

DOM標準是由w3c制定與維護。DOM是跨平臺與跨語言的。

DOM的頂層是document對象

藍色框內是歸DOM管的，紅色框內歸BOM管的；也能夠說DOM也是歸BOM管的

BOM 是爲了操做瀏覽器出現的 API，window 是其根對象。

DOM 是爲了操做文檔出現的 API，document 是其根對象。

3、BOM

A、

<!DOCTYPE html>

<html>

<head>

function demo1(){

/*彈框一，只是含有肯定按鈕*/

window.alert("外面還在下暴雨，今天咱們兩個分開了");

}

function demo2(){

/*彈框二，含有取消的彈框*/

var flag= window.confirm("是否刪除");

alert(flag);

}

function demo3(){

/*彈框三，含有輸入內容的彈框*/

var pr= window.prompt("請輸入暱稱","例如：李白");

//返回輸入的內容

alert(pr);

}

function getTime(){

var date=new Date();

//得到系統時間

var time =date.toLocaleString();

//得到span對象

var span =document.getElementById("span1");

//得到span中的內容對象

span.innerHTML=time;

}

/*js中的定時器*/

/*1s後執行方法的調用 ---調用一次*/

window.setTimeout("getTime()",1000);

/*每間隔1s就會調用方法 ---調用屢次*/

var ti= window.setInterval("getTime()",1000);

var ti1= window.setInterval("getTime1()",1000);

function stop1(){

//清除定時器的操做

window.clearInterval(ti);

}

function close1(){

//關閉當前的窗口

window.close();

//打開指定的窗口

window.open("http://www.baidu.com");

}

</script>

</head>

當前的時間是：<span id="span1"></span>

<hr/>

</body>

</html>

B、

<!DOCTYPE html>

<html>

<head>

/*location對象的學習*/

function demo1(){

//127.0.0.1:8020

var host=window.location.host;

//127.0.0.1

var hostname= window.location.hostname;

var urll=window.location.href;

//8020

var port=window.location.port;

//console.log(host+"--"+hostname+"---"+urll+"---"+port)

/**實現頁面的跳轉*/

// window.location.href="http://www.baidu.com";

//*從新加載網頁

window.location.reload();

}

/*History對象學習*/

function demo2(){

//返回瀏覽器歷史列表中的 URL 數量。

var len= window.history.length;

// console.log(len);

//前進按鈕

// window.history.forward();

//後退

// window.history.back();

//正數前進負數：後退 0:刷新

window.history.go(0);

}

/*****Screen對象*******/

function demo3(){

var wi=window.screen.width;

var hi=window.screen.height;

console.log(wi+"---"+hi);

}

/****Navigator對象學習*******/

function demo4(){

//用戶代理對象

var us=window.navigator.userAgent;

console.log(us);

}

</script>

</head>

<body>

</body>

</html>

4、DOM

1.什麼是DOM

2.DOM節點分類node

元素節點 element node <a href="連接地址">個人連接</a>

屬性節點 attribute node href="連接地址"

文本節點 text node 連接地址個人連接

3.DOM節點關係

父子關係（parent-child）：<html> 元素做爲父級，<head> 和 <body> 元素做爲子級

兄弟關係（Sibling）:<a> 和 <h1> 元素就是兄弟關係;<title> 和 <h1> 元素並非兄弟關係

4.DOM操做的內容

1.查詢元素（進行操做元素、或者元素的屬性、文本）

2.操做文本

3.操做屬性

4.操做CSS樣式（一個特殊的屬性style）

5.操做元素

5、直接得到對象的方式

<!DOCTYPE html>

<html>

<head>

/*直接得到*/

function demo1(){

//得到id名稱是span1的節點對象--得到單個對象

var span = document.getElementById("span1");

alert(span);

}

function demo2(){

//根據標籤的名稱得到對象---得到的多個對象

var spans=document.getElementsByTagName("span");

//得到具體的某一個對象

alert(spans[2]);

}

function demo3(){

//經過class得到元素對象---得到的多個對象

var sp=document.getElementsByClassName("sp");

alert(sp.length);

}

function demo4(){

//經過name屬性得到元素的對象---得到的多個對象

var inp=document.getElementsByName("inp");

}

</script>

</head>

<body>

<hr />

</body>

</html>

6、間接得到元素對象的方式

<!DOCTYPE html>

<html>

<head>

function demo1(){

//得到div對象

var div=document.getElementById("div1");

//得到子節點--空白的文本也是一個節點

var chi= div.childNodes;

//只是得到span標籤

var sp= div.getElementsByTagName("span");

alert(sp.length);

}

function demo2(){

//得到span對象

var span =document.getElementById("span1");

//得到父節點元素

var div= span.parentNode;

alert(div);

}

function demo3(){

//得到指定的span標籤

var span=document.getElementById("span1");

//得到上一個節點 --包含空白文檔Text

//var sp= span.previousSibling;

//得到上一個節點 --不包含空白文檔Text

//var sp=span.previousElementSibling;

//得到下一個節點 --包含空白文檔Text

//var sp=span.nextSibling;

//得到下一個節點 --不包含空白文檔Text

var sp=span.nextElementSibling;

alert(sp);

}

</script>

</head>

<body>

<hr />

</div>

</body>

</html>

7、DOM對象操做元素樣式&屬性

<!DOCTYPE html>

<html>

<head>

function demo1(){

//操做元素的節點屬性

var inp=document.getElementById("inp");

//得到元素的屬性

//alert(inp.type+"---"+inp.name+"---"+inp.value);

//改變元素的屬性

inp.type="button";

inp.value="測試一下";

}

function demo2(){

//操做元素的樣式

var div=document.getElementById("div1");

//得到樣式--只是支持行內樣式的書寫

var wi= div.style.width;

var he=div.style.height;

//alert(wi+"---"+he);

/*操做css方式一*/

/*div.style.width="300px"

div.style.height="400px";

div.style.backgroundColor="green";*/

/*操做css的方式二 --經過增長calss屬性添加樣式*/

div.className="di";

}

</script>

<style>

/*#div1{

width: 200px;

height: 200px;

border: 3px solid green;

}*/

.di{

width: 300px;

height: 300px;

background-color: pink;

}

</style>

</head>

<body>

<hr />

</body>

</html>

8、JS操做元素的文本內容

<!DOCTYPE html>

<html>

<head>

function demo1(){

//得到div對象

var div =document.getElementById("div1");

//只是得到節點對象的內容，純文本的內容

//alert(div.innerText);

//得到節點的文本內容+html標籤

// alert(div.innerHTML);

//賦予對象節點的文本內容

// div.innerText="<b>baidu</b>";

//會識別HTML對應的代碼

// div.innerHTML="<b>baidu</b>";

//實現內容的累加

div.innerHTML+= "<b>baidu</b>";

}

function demo2(){

//得到input對象

var inp=document.getElementById("inp");

var val= inp.value;

alert(val);

}

function demo3(){

var sel=document.getElementById("sel");

//若是option選項沒有value屬性，得到的值是對應的文本內容

var val= sel.value;

alert(val);

}

function demo4(){

//得到多行文本框的對象

var tex=document.getElementById("tex");

alert(tex.value);

}

</script>

</head>

<body>

<hr />

<span>

咱們都愛笑

</span>

</div>

<hr />

<option value="1">javaSE</option>

<option value="2">javaEE</option>

<option value="3">javaME</option>

</select>

<hr />

</body>

</html>

<!--

總結：

innerHTML,innerText ,value使用的情景

innerHTML,innerText:一般使用到雙標籤上

例外（select、textarea）得到值的時候也是用的value屬性

value:一般是單標籤：input

-->

9、JS中DOM對象操做元素的節點

<!DOCTYPE html>

<html>

<head>

function insertNode(){

//建立節點對象

var p = document.createElement("p");

p.innerHTML="照片:";

var inp1=document.createElement("input");

//操做節點對象的屬性

inp1.type="file";

var inp2=document.createElement("input");

inp2.type="button";

inp2.value="刪除";

inp2.onclick=function(){

//移除子節點的操做

/* p.removeChild(inp1);

p.removeChild(inp2);

document.body.removeChild(p);*/

//移除全部的節點

p.remove();

}

//指定元素的對應關係 appendChild:添加到現有元素對象以後

//document.body.appendChild(p);

//得到添指定元素對象

var p1=document.getElementById("p_1");

//在指定元素以前添加對象

document.body.insertBefore(p,p1);

p.appendChild(inp1);

p.appendChild(inp2);

}

//只會執行一個事件，，執行後者綁定的事件

window.onload=function(){

alert("頁面加載完成");

}

window.onload=function(){

alert("頁面加載完成2");

}

</script>

</head>

<p>

姓名:<input type="" name="" id="" value="" />

</p>

<p>

照片:<input type="file" name="" id="" value="" />

</p>

</p>

</body>

</html>

<!--

節點操做的方法

document.createElement("標籤名");

父節點.appendChild(子節點);

父節點.insertBefore(新節點,指定以前的節點);

父節點.removeChild(子節點)；

父節點.remove();

-->

10、JS中表單操做

<!DOCTYPE html>

<html>

<head>

function checkName(){

//得到輸入的值

var val=document.getElementById("zh").value;

//得到span標籤對象

var span =document.getElementById("span_name");

if(val==""||val==null){

span.innerHTML="× 用戶名不能爲空";

span.style.color="red";

return false;

}else{

span.innerHTML="√ 用戶名合法";

span.style.color="green";

return true;

}

//判斷表單內容是否提交

function sub(){

var flag=checkName();

if(flag){

//進行表單數據的提交

document.fom.submit();

}

</script>

</head>

<body>

帳號:<input type="text" name="zh" id="zh" value="" onblur="checkName()" /><span id="span_name"></span> <br />

密碼:<input type="password" name="pwd" id="pwd" value=""/><br />

</form>

</body>

</html>

<!--

readonly和disabled

共同點：是文本框不能夠更該內容

區別：readonly中對應的數據能夠提交到後臺

disabled中對應的數據是沒法提交到後臺

表單提交的形式：

[1]

* <input type="submit" name="" id="" value="提交" />

onsubmit="return checkName()"

[2]<input type="button" name="" id="" value="提交" onclick="sub()" />

document.fom.submit();

-->

11、JS實現打地鼠操做

<!DOCTYPE html>

<html>

<head>

body{

background-image: url("img/bb.jpg");

background-repeat: no-repeat;

background-size: 1360px 700px;

}

table{

margin-top: 90px;

margin-left: 200px;

}

</style>

var imgs;

//遊戲的時間是10s

var time=10;

var showI,stopT,leaT;

var count=0;

//遊戲開始

function begin(){

showI=window.setInterval("showImg()",1500);

//開始計時的操做

stopT=window.setInterval("stopTime()",1000);

}

//展現圖片

function showImg(){

//得到全部的img對象

imgs=document.getElementsByTagName("img");

//產生隨機的下標 0-24

var index=Math.floor(Math.random()*25);

imgs[index].src="img/01.jpg";

//間隔2s後調用地鼠的離開的操做

leaT=window.setTimeout("leaveImg("+index+")",2000);

}

//地鼠回去的操做

function leaveImg(ind){

imgs[ind].src="img/00.jpg";

}

//打擊地鼠的操做

function change(ts){

//點擊的圖片的路徑是01.jpg

//http://127.0.0.1:8020/05JS/img/00.jpg

// alert(ts.src);

var imgU= ts.src.substr(ts.src.length-6,6);

if(imgU=="01.jpg"){

ts.src="img/02.jpg";

count++;

}

//中止計時

function stopTime(){

if(time>0){

time--;

document.getElementById("div1").innerHTML=time;

}else {

gameOver();

}

//中止遊戲的操做

function gameOver(){

//清除全部的定時器

window.clearInterval(showI);

window.clearInterval(stopT);

window.clearTimeout(leaT);

//圖片迴歸以前的操做

for(var i in imgs){

imgs[i].src="img/00.jpg";

}

//統計結果

alert(count);

}

</script>

</head>

<body>

<div>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>