注冊用戶即可下載全站資源 關注Java幫幫微信公眾號
 

Web-第三天 JavaScript學習【悟空教程】

88
發表時間:2018-11-07 13:20來源:Java幫幫-微信公眾號

JavaScript入門1

今日內容介紹

  • 使用JS完成簡單的數據校驗

  • 使用JS完成圖片輪播效果

  • 使用JS完成頁面定時彈出廣告

今日內容學習目標

  • 掌握JavaScript的基本語法

  • 掌握JavaScript的對象獲取

  • 掌握JavaScript標簽的基本操作

  • 使用JS可以獲得指定元素

  • 使用JS可以對指定元素的樣式進行操作(獲得或修改)

  • 使用JS可以編寫定時程序

第1章 案例:使用JS完成注冊頁面的校驗

1.1 案例介紹

用戶在提交表單時,需要對用戶的填寫的數據進行校驗。本案例只對用戶名、密碼、確認密碼和郵箱進行校驗。


1.2 相關知識點:

1.2.1 JavaScript的概述

1.2.1.1 什么是JavaScript

JavaScript是web上一種功能強大的編程語言,用于開發交互式的web頁面。它不需要進行編譯,而是直接嵌入在HTML頁面中,由瀏覽器執行。

  • JavaScript 被設計用來向 HTML 頁面添加交互行為。

  • JavaScript 是一種腳本語言(腳本語言是一種輕量級的編程語言)。

  • JavaScript 由數行可執行計算機代碼組成。

  • JavaScript 通常被直接嵌入 HTML 頁面。

  • JavaScript 是一種解釋性語言(就是說,代碼執行不進行預編譯)。

JavaScript的組成:

  • ECMAScript:語法,語句.

  • BOM:瀏覽器對象

  • DOM:Document Object Model.操作文檔中的元素和內容.

1.2.1.2 JavaScript的作用

使用JavaScript添加頁面動畫效果,提供用戶操作體驗。主要應用有:嵌入動態文本于HTML頁面、對瀏覽器事件做出響應、讀寫HTML元素、驗證提交數據、檢測訪客的瀏覽器信息等。


1.2.1.3 JavaScript的引入

在HTML文件中引入JavaScript有兩種方式,一種是在HTML文檔直接嵌入JavaScript腳本,稱為內嵌式,另一種是鏈接外部JavaScript腳本文件,稱為外聯式。對他們的具體講解如下:

1) 內嵌式,在HTML文檔中,通過<script>標簽引入,如下

<script type="text/javascript">

//此處為JavaScript代碼

</script>

2) 外聯式,在HTML文檔中,通過<script src=””>標簽引入.js文件,如下:

<script src="1.js" type="text/javascript" charset="utf-8"></script>


1.2.2 基本語法

1.2.2.1 變量

1) 在使用JavaScript時,需要遵循以下命名規范:

  • 必須以字母或下劃線開頭,中間可以是數字、字符或下劃線

  • 變量名不能包含空格等符號

  • 不能使用JavaScript關鍵字作為變量名,如:function

  • JavaScript嚴格區分大小寫。

2) 變量的聲明

var 變量名; //JavaScript變量可以不聲明,直接使用。默認值:undefined

3) 變量的賦值

var 變量名 = ; //JavaScript變量是弱類型,及同一個變量可以存放不同類型的數據

1.2.2.2 數據類型

【基本類型】

  • Undefined ,Undefined 類型只有一個值,即 undefined。當聲明的變量未初始化時,該變量的默認值是 undefined。

  • Null ,只有一個專用值 null,表示空,一個占位符。值 undefined 實際上是從值 null 派生來的,因此 ECMAScript 把它們定義為相等的。

  • alert(null == undefined);  //輸出 "true",盡管這兩個值相等,但它們的含義不同。

    • Boolean,有兩個值 true 和 false

    • Number,表示任意數字

    • String,字符串由雙引號(")或單引號(')聲明的。JavaScript 沒有字符類型

【引用類型】

  • 引用類型通常叫做類(class),也就是說,遇到引用值,所處理的就是對象。

  • JavaScript是基于對象而不是面向對象。對象類型的默認值是null.

  • JavaScript提供眾多預定義引用類型(內置對象)。

1.2.2.3 運算符

JavaScript運算符與Java運算符基本一致。

  • 算術運算符

  • 賦值運算符

  • 比較運算符

  • 邏輯運算符


1.2.2.4 運算符操作

JavaScript規范規定以下操作規則(了解)

  • Boolean運算

  • 等性運算

1.2.2.5 基本操作

  • alert() :向頁面中彈出一個提示框!!

  • innerHTML :向頁面的某個元素中寫一段內容,將原有的東西覆蓋

1.3 案例分析


1.4 案例實現

  • 步驟1:表單<form> 添加提交事件

  • 步驟2:編寫check()函數,進行校驗

<script type="text/javascript">

function check(){

//1 用戶名

var loginName = document.getElementById("loginnameId").value;

if(loginName == ""){

alert("用戶名不能為空");

return false;

}

//2 密碼

var loginpwd = document.getElementById("loginpwdId").value;

if(loginpwd == ""){

alert("密碼不能為空");

return false;

}

//3 確認密碼

var reloginpwd = document.getElementById("reloginpwdId").value;

if(reloginpwd != loginpwd){

alert("密碼和確認密碼不一致");

return false;

}

//4 郵箱

var email = document.getElementById("emailId").value;

if(! /^([0-9a-zA-Z_-])+@([0-9a-zA-Z_-])+(\.[0-9a-zA-Z]+)$/.test(email)){

alert("郵箱格式不正確");

document.getElementById("emailId").focus(); //提示信息之后獲得焦點

return false;

}

return true;

}

</script>


1.5 案例總結

1.5.1 JS中正則匹配的方式:

正則的匹配:

JS中有兩種匹配正則的方式:

* 使用String對象中的match方法.

* 使用正則對象中的test方法.


1.5.2 JS中的函數編寫方式:

函數:實現一定功能的代碼塊,類似與Java中的方法。關鍵字function,函數名自定義。

<script type="text/javascript">

//方式1:聲明函數

function demo01(){

alert("案例1");

}

// 方式1:調用函數

demo01();

//方式2:聲明匿名函數

var demo02 = function(){

alert("案例2");

};

//方式2:調用函數

demo02();

</script>

第2章 案例:輪播圖

2.1 案例需求

第一天完成首頁中,“輪播圖”只提供一張圖片進行顯示。現需要編寫程序,完成自動切換圖片功能。

2.2 相關知識點:定時器setInterval

window.setInterval(code, millisec) 按照指定的周期(間隔)來執行函數或代碼片段。

參數1code 必需。執行的函數名或執行的代碼字符串。

參數2millisec 必須。時間間隔,單位:毫秒。

返回值:一個可以傳遞給 window.clearInterval() 從而取消對 code 的周期性執行的值。

例如:

   * 方式1:函數名 , setInterval(show , 100);

   * 方式2:函數字符串, setInterval("show()" , 100);

  • window對象提供都是全局函數,調用函數時window可以省略。

    • window.setInterval() 等效 setInterval()

2.3 案例分析

1. 編寫html頁面,為頁面設置加載事件onload

2. 編寫事件觸發函數

3. 獲得輪播圖圖片

4. 開啟定時器,2000毫秒重新設置圖片的src屬性

2.4 案例實現

  • 步驟1:為輪播圖img標簽添加id屬性

  • 步驟2:編寫js代碼,頁面加載觸發指定函數

<script type="text/javascript">

// 加載成功啟動監聽器,5秒執行一次

window.onload = function () {

setInterval(changeImage , 5000);

}

//3張照片之間切換  

var num = 1 ;

function changeImage(){

if(num >= 3){

num = 1;

}

var imageObj = document.getElementById("imgId");

imageObj.src = "../img/"+ ++num +".jpg";

}

</script>

第3章 案例:定時彈廣告

3.1 案例需求

在平日瀏覽網頁時,頁面一打開5秒后顯示廣告,然后5秒后再隱藏廣告。

3.2 相關知識點

3.2.1 JavaScript定時器:setTimeout

  • setTimeout() 在指定的毫秒數后調用函數或執行代碼片段。

setTimeout(code,millisec)

code 必需。要調用的函數或要執行的代碼字符串。

millisec 必需。在執行代碼前需等待的毫秒數。

  • setInterval() 以指定周期執行函數或代碼片段。(上一個案例已經講解)

  • clearInterval() 取消由 setInterval() 設置的 timeout。

  • clearTimeout() 取消由 setTimeout() 方法設置的 timeout。(本案例不使用,此處一并講解)


3.2.2 JavaScript樣式獲得或修改

  • 獲得或設置樣式

obj.style.屬性  ,獲得指定“屬性”的值。

obj.style.屬性= ,給指定“屬性”設置內容。

如果屬性由多個單詞使用-”連接,需要將“-”刪除,并將后一個單詞首字母大寫。

例如:background-color 需要改成 backgroundColor

  • 實例:

<div id="divId" style="height:100px;width:100px;margin:10px;padding:20px"></div>

<script type="text/javascript">

//1 獲得div對象

var divObj = document.getElementById("divId");

//2 獲得高度

// * divObj.style.height 數據為"100px"

// * 使用parseInt() ,將字符串“100px”轉換成數字“100

var height = window.parseInt(divObj.style.height);

//3 將原始高度翻倍,再設置給div

// * 注意:必須添加單位,否則無效

divObj.style.height = height * 2 + "px";

</script>

3.3 案例分析

1. 頁面加載成功后觸發onload()事件

2. 加載成功后,觸發延遲定時器,5秒后,開始顯示廣告。

3. 顯示廣告開始后,5秒后再次隱藏廣告

3.4 案例實現

  • 步驟1:在頁面中,添加廣告位div,并設置頁面加載事件

<body onload="init()">

<!-- 整體的DIV -->

<div>

<!-- 定時彈出廣告的div -->

<div id="divAd" style="width:99%;display: none;">

<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%"/>

</div>  ….

  • 步驟2:編程JS實現

<!—html頁面中引入js文件-->

<script src="ad.js"></script>

<!—ad.js內容如下-->

var time;

function init(){

// 設置定時操作:

time = setInterval("showAd()",5000);

}

function showAd(){

// 獲得div元素

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

divAd.style.display = "block";

// 清除之前的定時操作:

clearInterval(time);

// 重新設置一個定時:5秒鐘隱藏:

time = setInterval("hideAd()",5000);

}

function hideAd(){

// 獲得div元素

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

divAd.style.display="none";

clearInterval(time);

}


3.5 總結:BOMBrowser Object Mode


3.5.1 BOM Window對象(掌握)

  • 方法:定時器

函數名

描述

setInterval()

按照指定的周期(以毫秒計)來調用函數或計算表達式

clearInterval()

取消由 setInterval() 設置的 timeout

setTimeout()

在指定的毫秒數后調用函數或計算表達式。

clearTimeout()

取消由 setTimeout() 方法設置的 timeout

  • 方法:消息框

函數名

描述

alert()

顯示帶有一段消息和一個確認按鈕的警告框

confirm()

顯示帶有一段消息以及確認按鈕和取消按鈕的確認框

確認框:

 確定返回true

 取消返回false

prompt()

顯示可提示用戶輸入的提示框

點擊確定獲得用戶輸入數據


3.5.2 BOM Location對象

  • href屬性:設置或返回完整的 URL。

<script type="text/javascript">

function change(){

location.href = "http://polkscan.com";

}

</script>

<input type="button" value="點我" onclick="change()"/>

3.5.3 BOM History對象(了解)

  • go() 方法:跳轉到指定頁面

a) go(-1) 加載前一個連接,等效back()

b) go(1)  加載后一個鏈接,等效forward()

JavaScript入門1—事件

3.6 總結:事件

  • 常見事件

事件名

描述

onload

某個頁面或圖像被完成加載

onsubmit

提交按鈕被點擊

onclick

鼠標點擊某個對象

ondblclick

鼠標雙擊某個對象

onblur

元素失去焦點

onfocus

元素獲得焦點

onchange

用戶改變域的內容

onkeydown

某個鍵盤的鍵被按下

onkeypress

某個鍵盤的鍵被按下或按住

onkeyup

某個鍵盤的鍵被松開

onmousedown

某個鼠標按鍵被按下

onmouseup

某個鼠標按鍵被松開

onmouseover

鼠標被移到某元素之上

onmouseout

鼠標從某元素移開

onmousemove

鼠標被移動

  • 參考:

HTML代碼

<input id="e01" type="text" /><span id="textMsg"></span> <br/>

<hr/>

<div id="e02" ></div><span id="divMsg"></span> <br/>

<hr/>

<input id="e03" type="button" value="可以點擊"/><span id="buttonMsg"></span> <br/>

JavaScript代碼

<script type="text/javascript">


// 頁面加載事件:當整個html頁面加載成功調用

window.onload = function(){

// 文本框事件

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

e01.onfocus = function(){

html("textMsg","文本框獲得焦點:focus");

}

e01.onblur = function(){

html("textMsg","文本框失去焦點:blur");

}

e01.onkeydown = function(){

html("textMsg","鍵盤按下:keydown");

}

e01.onkeypress = function(){

append("textMsg","鍵盤按:keypress");

}

e01.onkeyup = function(){

append("textMsg","鍵盤彈起:keyup");

}


// 鼠標事件

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

var i = 0;

e02.onmouseover = function(){

html("divMsg","鼠標移上:mouseover");

}

e02.onmousemove = function(){

//html("divMsg","鼠標移動:mousemove , " + i++);

}

e02.onmouseout = function(){

html("divMsg","鼠標移出:mouseout");

}

e02.onmousedown = function(){

html("divMsg","鼠標按下:mousedown");

}

e02.onmouseup = function(){

html("divMsg","鼠標彈起:mouseup");

}


// 按鈕事件

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

e03.onclick = function () {

html("buttonMsg","單擊:click");

}

e03.ondblclick= function () {

html("buttonMsg","雙擊:dblclick");

}

};


/**

* 指定位置顯示指定信息

* @param objId ,元素的id屬性值

* @param  text,需要顯示文本信息

*/

function html(objId,text){

document.getElementById(objId).innerHTML = text;

}

/**

* 指定位置追加指定信息

* @param objId ,元素的id屬性值

* @param  text,需要顯示文本信息

*/

function append(objId,text){

document.getElementById(objId).innerHTML += text;

}

</script>


  • event屬性

屬性名

描述

clientX

返回當事件被觸發時,鼠標指針的水平坐標。

clientY

返回當事件被觸發時,鼠標指針的垂直坐標。

keyCode

返回當事件被觸發時,鍵盤輸入ASCII

  • event方法:

方法名

描述

preventDefault()

阻止瀏覽器默認行為

stopPropagation()

阻止事件的傳播

  • 阻止瀏覽器默認行為

<a href="http://www.baidu.com" onclick="one()">百度</a><br/>

<a href="http://polkscan.com" onclick="return two()">Java幫幫</a><br/>

<script type="text/javascript">

function one(){

alert("我之后,百度繼續訪問");

}


function two(event){

alert("我之后,Java幫幫不再訪問");

//方式1

//return false;

//方式2

var event = event || window.event;

event.preventDefault();

}

</script>

  • 阻止事件的傳播

<!--區域1-->

<div id="e1" style="width:200px ; height: 200px; background-color: #f00;">

<div id="e2" style="width:100px ; height: 100px; background-color: #0f0;"></div>

</div>

<hr />

<!--區域2-->

<div id="e3" style="width:200px ; height: 200px; background-color: #f00;">

<div id="e4" style="width:100px ; height: 100px; background-color: #0f0;"></div>

</div>

<script type="text/javascript">

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

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

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

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

//設置“區域1”事件

e1.onclick = function(){

alert("e1");

}

e2.onclick = function(){

alert("e2,同時e1也觸發");

}

//設置“區域2”事件

e3.onclick = function(){

alert("e3");

}

e4.onclick = function(event){

alert("e4e3不觸發");

var event = event || window.event;

event.stopPropagation();

}

</script>


JavaScript入門2

今日內容介紹

  • 使用JS完成表單校驗

  • 使用JS完成表格的隔行換色

  • 使用JS完成復選框的全選效果

  • 使用JS完成省市聯動效果

今日內容學習目標

  • 使用JS可以編寫各種事件

  • 使用JS可以獲得指定元素

  • 使用JS可以創建元素

  • 使用JS可以對元素的屬性進行操作

  • 使用JS可以對元素的標簽體進行操作

  • 使用JS可以對指定元素的樣式進行操作(獲得或修改)

第4章 案例:完善注冊表單校驗

4.1 案例介紹

昨天我們已經完成了表單數據校驗,整個實現過程存在兩處不足的地方:

1. 使用彈出框進行提示,用戶體驗不友好,可以將錯誤提示信息現在在對應的表單元素后面

2. 在編寫程序時存在多處重復代碼,為了達到代碼的重復利用,將進行內容抽取成,編寫自定義函數。

4.2 相關知識點

4.2.1 標簽體內容:innerHTML

  • innerHTML - HTML 元素的內部文本

獲得:document.getElementById(“divId”).innerHTML

設置:document.getElementById(“divId”).innerHTML = "...."

4.2.2 相關事件

  • 常見事件

事件名

描述

onsubmit

提交按鈕被點擊

onblur

元素失去焦點

onfocus

元素獲得焦點

4.3 案例分析

1. 校驗不通過,在當前標簽后面,紅色字體提示

2. 對所有需要校驗的表單項進行全部校驗

3. 第一個校驗不通過的元素獲得焦點

編寫步驟:

1.添加錯誤提示顯示區域 <span id=”usernamespan”></span>

2.表單元素id屬性

3.校驗不同,給span顯示錯誤信息

4.第一個不通過的獲得焦點

4.4 案例實現

4.4.1 修改html,添加錯誤顯示區域

<tr>

<td>用戶名</td>

<td>

<input type="text" id="username" name="username" placeholder="請輸入用戶名"

onfocus="showTips('username','用戶名必須是字母或數字')"

onblur="checkUsername('username','用戶名不能為空!')"/>

<span id="usernamespan"></span>

</td>

</tr>

<tr>

<td>密碼</td>

<td>

<input type="password" id="password" name="password"

onfocus="showTips('password','密碼長度必須6')"

onblur="checkUsername('password','密碼不能為空!')"/>

<span id="passwordspan"></span>

</td>

</tr>

4.4.2 提供JS代碼

<script>

function showTips(uid,info){

// 控制后面的span元素:

document.getElementById(uid+"span").innerHTML ="<font color='gray'>"+info+"</font>";

}


function checkUsername(uid,info){

// 判斷用戶名是否為""

var uValue = document.getElementById(uid).value;

if(uValue == ""){

document.getElementById(uid+"span").innerHTML ="<font color='red'>"+info+"</font>";

}else{

document.getElementById(uid+"span").innerHTML = "";

}

}

</script>

4.5 總結:事件

  • 常見事件

事件名

描述

onload

某個頁面或圖像被完成加載

onsubmit

提交按鈕被點擊

onclick

鼠標點擊某個對象

ondblclick

鼠標雙擊某個對象

onblur

元素失去焦點

onfocus

元素獲得焦點

onchange

用戶改變域的內容

onkeydown

某個鍵盤的鍵被按下

onkeypress

某個鍵盤的鍵被按下或按住

onkeyup

某個鍵盤的鍵被松開

onmousedown

某個鼠標按鍵被按下

onmouseup

某個鼠標按鍵被松開

onmouseover

鼠標被移到某元素之上

onmouseout

鼠標從某元素移開

onmousemove

鼠標被移動

  • 參考:

HTML代碼

<input id="e01" type="text" /><span id="textMsg"></span> <br/>

<hr/>

<div id="e02" ></div><span id="divMsg"></span> <br/>

<hr/>

<input id="e03" type="button" value="可以點擊"/><span id="buttonMsg"></span> <br/>

JavaScript代碼

<script type="text/javascript">


// 頁面加載事件:當整個html頁面加載成功調用

window.onload = function(){

// 文本框事件

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

e01.onfocus = function(){

html("textMsg","文本框獲得焦點:focus");

}

e01.onblur = function(){

html("textMsg","文本框失去焦點:blur");

}

e01.onkeydown = function(){

html("textMsg","鍵盤按下:keydown");

}

e01.onkeypress = function(){

append("textMsg","鍵盤按:keypress");

}

e01.onkeyup = function(){

append("textMsg","鍵盤彈起:keyup");

}


// 鼠標事件

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

var i = 0;

e02.onmouseover = function(){

html("divMsg","鼠標移上:mouseover");

}

e02.onmousemove = function(){

//html("divMsg","鼠標移動:mousemove , " + i++);

}

e02.onmouseout = function(){

html("divMsg","鼠標移出:mouseout");

}

e02.onmousedown = function(){

html("divMsg","鼠標按下:mousedown");

}

e02.onmouseup = function(){

html("divMsg","鼠標彈起:mouseup");

}


// 按鈕事件

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

e03.onclick = function () {

html("buttonMsg","單擊:click");

}

e03.ondblclick= function () {

html("buttonMsg","雙擊:dblclick");

}

};


/**

* 指定位置顯示指定信息

* @param objId ,元素的id屬性值

* @param  text,需要顯示文本信息

*/

function html(objId,text){

document.getElementById(objId).innerHTML = text;

}

/**

* 指定位置追加指定信息

* @param objId ,元素的id屬性值

* @param  text,需要顯示文本信息

*/

function append(objId,text){

document.getElementById(objId).innerHTML += text;

}

</script>

第5章 案例:表格隔行換色

5.1 案例描述

開發中,需要使用表格陳列數據,數據過多不易查看,通常使用隔行換色進行表示。

5.2 案例相關JS函數介紹

5.2.1 相關JS事件

  • onload() 頁面加載成功觸發

    • 方式1:<body>使用onload屬性確定需要執行的函數

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript">

//js代碼在<body>之前,不能獲得<body>標簽體中的內容,還沒有加載到

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

alert(e01);  //打印:null

function init () {

//頁面加載成功之后執行

var e02 = document.getElementById("e01");

alert(e02.value); //打印:Java幫幫

}

</script>

</head>

<body onload="init()">

<input type="text" name="" id="e01" value="Java幫幫" />

</body>

    • 方式2: 通過window.onload 設置匿名函數

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript">

window.onload = function () {

//頁面加載成功之后執行

var e02 = document.getElementById("e01");

alert(e02.value); //打印:Java幫幫

}

</script>

</head>

<body>

<input type="text" name="" id="e01" value="Java幫幫" />

</body>

5.2.2 this關鍵字

在函數內部this表示:當前操作的元素。

5.3 案例實現

  • 在提供html頁面的基礎上,編寫js代碼

<script type="text/javascript">

window.onload = function () {

var allTr = document.getElementsByTagName("tr");

// 跳過前2

for (var i = 2 ; i < allTr.length ; i ++) {

//給行tr設置背景顏色,奇數行白色,偶數行指定顏色

if(i % 2 == 0){

allTr[i].style.backgroundColor="#FFF";

} else {

allTr[i].style.backgroundColor="#4E7FD1";

}

}

}

</script>

第6章 案例:復選框全選/全不選

6.1 案例描述

開發中,經常需要對表格數據進行“批量處理”,就需要快速的對列表項進行操作,本案例我們來完成“全選和全不選”

6.2 案例相關的JS屬性介紹

6.2.1 單選/復選選中

ele.checked  表示元素是否選中,true表示選中,false表示沒有選中

例如:ele.checked = true; //設置元素被選中。

6.3 案例實現

  • 步驟1:給復選框添加onclick事件

<input type="checkbox" onclick="selectAll(this)" >

  • 步驟2:編寫selectAll(this)處理列表項的復選框是否勾選

<script type="text/javascript">

function selectAll (obj) {

//當前復選框是否選擇,如果選中其他都選中,如果沒有選中其他都不選中。

// * getElementsByClassName 通過標簽class屬性的名稱獲得對應的所有標簽。<xx class="">

var allCheckbox = document.getElementsByClassName("itemSelect");

for (var i = 0 ; i < allCheckbox.length ; i ++) {

allCheckbox[i].checked = obj.checked;

}

}

</script>

第7章 案例:省市二級聯動

7.1 案例介紹

在日常應用中,我們需要完善個人信息,“所在地”要求選擇省市,當選擇省時,該省對應的市將自動的更新。

7.2 案例相關的JS函數

7.2.1 數組:Array

創建語法

new Array();

new Array(size);  // size 數組元素個數,數組成員默認值undefined

new Array(element0, element0, ..., elementn); //參數列表,為數組初始化數據

  • 數組中的每一個成員沒有類型限制,及可以存放任意類型

  • 數組的長度可以自動修改,類似Java中的List 集合等。

7.2.2 元素操作:createElementappendChild

document.createElement() 創建元素節點。

document.createTextNode() 創建文本節點。

ele.appendChild() 向標簽體末尾添加新的子節點。

實例:

<!—HTML代碼-->

<div id="divId"></div>

<!—JavaScript代碼-->

<script type="text/javascript">

//1 獲得div對象(元素--標簽)

var divObj = document.getElementById("divId");

//2 創建a元素

// * createElement 創建指定名稱的元素

var aObj = document.createElement("a");

//2.1 創建文件

var nodeObj = document.createTextNode("xxx");

// * 將文本添加到a元素

aObj.appendChild(nodeObj);


//2.2 a元素設置屬性

// setAttribute(name,value) 給指定的元素設置屬性,name屬性名,value屬性值

aObj.setAttribute("href","http://polkscan.com");

//3 將新創建的a元素,添加到div元素中

// * appendChild 追加子元素

divObj.appendChild(aObj);

</script>

7.3 案例實現

步驟1:給注冊頁面添加select標簽

<select id="provinceId" onchange="selectCity(this.value)" style="width:150px">

<option value="">-----------</option>

<option value="0">北京</option>

<option value="1">吉林省</option>

<option value="2">山東省</option>

<option value="3">河北省</option>

<option value="4">江蘇省</option>

</select>

<select id="cityId" style="width:150px">

<option value="">-----------</option>

</select>

步驟2:js實現

<script type="text/javascript">

// 定義二維數組,初始化數據

var cities = new Array(4);

cities[0] = new Array("市轄區","");

cities[1] = new Array("長春市","吉林市","松原市","延邊市");

cities[2] = new Array("濟南市","青島市","煙臺市","濰坊市","淄博市");

cities[3] = new Array("石家莊市","唐山市","邯鄲市","廊坊市");

cities[4] = new Array("南京市","蘇州市","揚州市","無錫市");

//通過選擇的省,顯示對應的所有的市

function selectCity(index){

//通過索引獲得對應的所有的市

var allCity = cities[index];

// 獲得city select 對象

var cityObj = document.getElementById("cityId");

cityObj.innerHTML = "<option value=''>-----------</option>";

//遍歷所有的市

for(var i = 0 ; i < allCity.length ; i ++){

// 獲得具體的市

var cityName = allCity[i];

// 創建option

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

// 創建文本節點

var textNode = document.createTextNode(cityName);

//將文本添加到option

option.appendChild(textNode);

// option追加到select

cityObj.appendChild(option);

}

}

</script>

7.4 總結:DOM

從昨天到現在,所有的案例中,我們獲得元素,創建元素等操作,統稱為DOM操作。接下來我們一起總結一下DOM。


7.4.1 什么是DOM

  • DOM:Document Object Model 文檔對象模型,定義訪問和操作結構化文檔(HTML)的方式。

    • 創建的結構化文檔:html、xml 等

    • DOM包括:核心DOM、HTML DOM、XML DOM。通常情況下HTML DOM 和XML DOM是可以相互使用的。

  • HTML DOM 將 整個HTML文檔呈現成一顆DOM樹,樹中有元素、屬性、文本等成員。

7.4.2 document文檔對象

  • 瀏覽器加載整個HTML文檔形成Document 對象,Document 對象可以訪問和操作HTML文檔中的所有元素。

  • 獲得元素

lgetElementById() 通過id屬性值獲得元素(整個HTML文檔id位置)  

<xxx id=””>

lgetElementsByName() 通過name屬性值獲得所有元素(整個HTML文檔中name可能相同)

<xxx name=””>

lgetElementsByClassName() 通過 class屬性值獲得所有元素

<xxx class=””>

lgetElementsByTagName() 通過標簽名獲得所有的元素

<xxx>

  • 創建

createElement() 創建指定名稱的元素

createTextNode() 創建指定內容的文本節點

  • 常見屬性

childNodes,獲得所有的子節點

nodeName, 返回節點名稱。(標簽名)

nodeType, 返回節點類型。(元素、屬性、文本 等)

nodeValue, 節點的值。(只有文本節點才有該屬性)

7.4.3 element元素對象

  • Element 對象表示 HTML文檔中的元素(HTML稱為標簽)。元素可包含屬性、其他元素或文本。也就是說HTML標簽可以包含屬性,其他子標簽或文本。

appendChild() 給元素追加子元素

<a>

      …

      追加位置

   </a>

insertBefore() 給當前元素前追加兄弟元素

    插入位置

<a>

setAttribute(k,v) 給元素設置屬性

<xxx k=v >

7.4.4 名稱解釋

  • 元素(標簽)Element、屬性Attribute、文本Text 統稱為:節點Node

7.5 總結

7.5.1 全局函數

分類

函數名

描述

轉換

parseFloat()

解析一個字符串并返回一個浮點數。

parseInt()

解析一個字符串并返回一個整數。

執行

eval()

計算 JavaScript 字符串,并把它作為腳本代碼來執行。

編碼

encodeURI()

把字符串編碼為 URI

decodeURI()

解碼某個編碼的 URI

JavaScript入門2擴展

第8章 作業:列表左右選擇(參考)

8.1 案例介紹

  • 在很多應用程序中,都存在需要將若干項添加到另外一個位置,本案例將為大家實現此功能。

8.2 案例分析

當獲得select標簽后,可以通過element的childNodes屬性獲得的子節點(子元素和文本節點),通過子標簽(option) 的 selected屬性判斷是否選中,就可以完成需要功能。

8.3 案例實現

8.3.1 html頁面

<td>

<select id="leftSelectId" style="width:100px" multiple="multiple" size="6">

<option>悟空教程</option>

<option>Java幫幫</option>

<option>Java學院</option>

</select>

</td>

<td>

<input id="left1" type="button" value=">" style="width:50px" onclick="leftToRightOne()"/> <br/>

<input id="left2" type="button" value=">>" style="width:50px"onclick="leftToRightSelect()"/> <br/>

<input id="left3" type="button" value=">>>" style="width:50px"onclick="leftToRightAll()"/> <br/>

<input type="button" value="<" style="width:50px"/> <br/>

<input type="button" value="<<" style="width:50px"/> <br/>

<input type="button" value="<<<" style="width:50px"/> <br/>

</td>

<td>

<select id="rightSelectId"  style="width:100px" multiple="multiple" size="6">

<option>孤獨求敗</option>

</select>

</td>

8.3.2 選中一個

/**

* 此處使用 childNodes 獲得所有子節點,也可以使用 <select>標簽特有的屬性options獲得所有的<option>子標簽

*/

function leftToRightOne(){

var leftSelect = document.getElementById("leftSelectId");

var rightSelect = document.getElementById("rightSelectId");

//alert(leftSelect.childNodes[1].nodeName);

for(var i = 0 ; i < leftSelect.childNodes.length ; i ++){

if(leftSelect.childNodes[i].selected){

rightSelect.appendChild(leftSelect.childNodes[i]);

break;

}

}

}

8.3.3 選中多個

/**

* leftSelect.childNodes.length 最終長度為7,獲得4text文本,3option

* * 元素:textoption[1]textoption[2]textoption[3]text

* * 當遍歷時,第一個option移除后,length變成了6,此時i==2,正好是第二個option

*  移除第二個后,此時i=3,正好是第三個option,所以可以正常移動所有

*/

function leftToRightSelect(){

var leftSelect = document.getElementById("leftSelectId");

var rightSelect = document.getElementById("rightSelectId");

for(var i = 0 ; i < leftSelect.childNodes.length ; i ++){

if(leftSelect.childNodes[i].selected){

rightSelect.appendChild(leftSelect.childNodes[i]);

}

}

}

8.3.4 所有,提供3種實現方式

  • 方式1:子元素和文本同時都移動,

function leftToRightAll(){

var leftSelect = document.getElementById("leftSelectId");

var rightSelect = document.getElementById("rightSelectId");

for(var i = 0 ; i < leftSelect.childNodes.length ; i ++){

rightSelect.appendChild(leftSelect.childNodes[i]);

i--; //因為length是不斷變化的,保證一直移除第一個。

}

}

  • 方式2length不斷變化,i不需要變化

function leftToRightAll(){

var leftSelect = document.getElementById("leftSelectId");

var rightSelect = document.getElementById("rightSelectId");

for(var i = 0 ; i < leftSelect.childNodes.length ; ){

rightSelect.appendChild(leftSelect.childNodes[i]);

//因為length是不斷變化的,保證一直移除第一個。

}

}

  • 方式3:采用倒序,不過右邊內容也是倒序的

function leftToRightAll(){

var leftSelect = document.getElementById("leftSelectId");

var rightSelect = document.getElementById("rightSelectId");

for(var i = leftSelect.childNodes.length - 1 ; i >=0 ; i --){

rightSelect.appendChild(leftSelect.childNodes[i]);

}

}



支付寶贊助-Java幫幫社區
微信贊助-Java幫幫社區
Java幫幫公眾號生態

Java幫幫公眾號生態

總有一款適合你

Java幫幫-微信公眾號

Java幫幫-微信公眾號

將分享做到極致

Python幫幫-公眾號

Python幫幫-公眾號

人工智能,爬蟲,學習教程

大數據驛站-微信公眾號

大數據驛站-微信公眾號

一起在數據中成長

九點編程-公眾號

九點編程-公眾號

深夜九點學編程

程序員生活志-公眾號

程序員生活志-公眾號

互聯網,職場,程序員那些事兒

Java幫幫學習群生態

Java幫幫學習群生態

總有一款能幫到你

Java學習群

Java學習群

與大牛一起交流

大數據學習群

大數據學習群

在數據中成長

九點編程學習群

九點編程學習群

深夜九點學編程

python學習群

python學習群

人工智能,爬蟲

測試學習群

測試學習群

感受測試的魅力

Java幫幫生態承諾

Java幫幫生態承諾

一直堅守,不負重望

初心
勤儉
誠信
正義
分享
合作品牌 非盈利生態-優質內容分享傳播者
關于我們
友鏈申請
友鏈交換:加幫主QQ2524138991 留言即可 24小時內答復  
全站內容非商業用途,內容來源于網友,并遵循 許可,如有異議請聯系客服。
會員登錄
獲取驗證碼
登錄
登錄
我的資料
留言
回到頂部