2018-07-09 第六十四天 JavaScript

JavaScript

一、JS中event事件

1.什麼是事件：

事件是可以被 JavaScript 偵測到的行為

網頁中的每個元素都可以産生某些可以觸發 JavaScript 函數的事件。比方說，我們可以在使用者點選某按鈕時産生一個 onClick 事件來觸發某個函數

事件通常與函數配合使用，這樣就可以通過發生的事件來驅動函數執行。

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：某些塊元素上結合使用

-->

二、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 是其根對象。

三、BOM

A、

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");

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

<hr/>

B、

/*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對象*******/

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>

<body>

四、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.操作元素

五、直接獲得對象的方式

/*直接獲得*/

//獲得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");

<hr />

六、間接獲得元素對象的方式

function demo1(){

//獲得div對象

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

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

var chi= div.childNodes;

//隻是獲得span标簽

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

alert(sp.length);

//獲得span對象

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

//獲得父節點元素

var div= span.parentNode;

alert(div);

//獲得指定的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);

</div>

七、DOM對象操作元素樣式&屬性

//操作元素的節點屬性

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

//獲得元素的屬性

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

//改變元素的屬性

inp.type="button";

inp.value="測試一下";

//操作元素的樣式

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";

/*#div1{

width: 200px;

height: 200px;

border: 3px solid green;

}*/

.di{

width: 300px;

height: 300px;

background-color: pink;

八、JS操作元素的文本内容

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 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);

<span>

我們都愛笑

</span>

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

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

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

</select>

總結：

innerHTML,innerText ,value使用的情景

innerHTML,innerText:通常使用到雙标簽上

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

value:通常是單标簽：input

九、JS中DOM對象操作元素的節點

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("頁面加載完成");

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

<p>

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

</p>

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

節點操作的方法

document.createElement("标簽名");

父節點.appendChild(子節點);

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

父節點.removeChild(子節點)；

父節點.remove();

十、JS中表單操作

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();

賬号:<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>

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();

十一、JS實作打地鼠操作

body{

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

background-repeat: no-repeat;

background-size: 1360px 700px;

table{

margin-top: 90px;

margin-left: 200px;

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);

<div>

<tr>

</tr>

</table>

2018-07-09 第六十四天 JavaScript

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條