JS的經常使用操做
1、使用 JS 完成註冊表單數據校驗
1.需求分析javascript
用戶在進行註冊的時候會輸入一些內容，可是有些用戶會輸入一些不合法的內容，這樣 會致使服務器的壓力過大，此時咱們須要對用戶輸入的內容進行一個校驗(前端校驗和後臺 校驗)，前端校驗防君子不防小人。php
2.技術分析html
2.1 javasscript 的介紹前端
Java 與 javascript 有什麼區別？java
它們沒有關係，雷鋒和雷峯塔的關係。node
2.2 javascript 的做用 ？正則表達式
HTML：它是整個網站的骨架。數組
CSS：它是對整個網站骨架的內容進行美化(修飾)瀏覽器
Javascript：它可以讓整個頁面具備動態效果。緩存
2.3 javascript 的組成部分
ECMAScript:它是整個javascript 的核心，包含(基本語法、變量、關鍵字、保留字、數 據類型、語句、函數等等)
DOM：文檔對象模型，包含(整個 html 頁面的內容)、
BOM：瀏覽器對象模型,包含(整個瀏覽器相關內容)
2.4 javascript 語法
區分大小寫
變量是弱類型的(String str=」aaa」 ,var str=」123」;)
每行結尾的分號無關緊要(建議你們寫上)
註釋與 java、php 等語言相同。
2.5javascript 的變量
變量能夠不用聲明，變量是弱類型。統一使用 var 來定義！定義變量的時候不要使用關鍵字 和保留字。
2.6 javascript 數據類型
Javascript 數據類型分爲原始數據類型和引用數據類型
原始數據類型：
string、number、boolean、null、undefined
引用數據類型：
2.7 javascript 運算符
其它運算符與 java 大致一致，須要注意其等性運算符。
== 它在作比較的時候會進行自動轉換。
=== 它在作比較的時候不會進行自動轉換。
2.8 javascript 語句
全部語句與 java 大致一致。
2.9 獲取元素內容
獲取元素
document.getElementById(「id 名稱」);
獲取元素裏面的值
document.getElementById(「id 名稱」).value;
批註 [ThinkPad1]: 若是 id 是一個字符串，那麼必須
加上引號，若是是一個變量那麼不須要。
2.10 javascript 事件
表單提交事件：onsubmit
2.11 javascripte 的輸出
警告框：alert();
向頁面指定位置寫入內容：innerHTML(屬性)
向頁面寫入內容：document.write(「」);
3.步驟分析
第一步：肯定事件(onsubmit)併爲其綁定一個函數
第二步：書寫這個函數(獲取用戶輸入的數據<獲取數據時須要在指定位置定義一個 id>)
第三步：對用戶輸入的數據進行判斷
第四步：數據合法(讓表單提交)
第五步：數據非法(給出錯誤提示信息，不讓表單提交)
問題：如何控制表單提交？
關於事件 onsubmit：通常用於表單提交的位置，那麼須要在定義函數的時候給出一個 返回值。 onsubmit = return checkForm() 4.代碼實現 JS 代碼：
<script>
function checkForm(){
//alert("aa");
/**校驗用戶名*/
//1.獲取用戶輸入的數據
var uValue = document.getElementById("user").value;
//alert(uValue);
if(uValue==""){
//2.給出錯誤提示信息
alert("用戶名不能爲空!");
return false;
}
/*校驗密碼*/
var pValue = document.getElementById("password").value;
if(pValue==""){
alert("密碼不能爲空!");
return false;
}
/**校驗確認密碼*/
var rpValue =
document.getElementById("repassword").value;
if(rpValue!=pValue){
alert("兩次密碼輸入不一致!");
return false;
}
/*校驗郵箱*/
var eValue = document.getElementById("eamil").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-
9_-])+/.test(eValue)){
alert("郵箱格式不正確!");
return false;
}
}
</script>
Html 部分：
<form action="#" method="get" name="regForm"
onsubmit="return checkForm()">
須要在指定位置添加 id
2、使用 JS 完成首頁輪播圖效果案例
1.需求分析
咱們但願在首頁完成對輪播圖的效果實現：
2.技術分析
獲取元素 document.getElementById(「id 名稱」)
事件(onload)
定時操做：setInterval(「changeImg()」,3000);
3.步驟分析
第一步：肯定事件(onload)併爲其綁定一個函數
第二步：書寫綁定的這個函數
第三步：書寫定時任務(setInterval)
第四步：書寫定時任務裏面的函數
第五步：經過變量的方式，進行循環(獲取輪播圖的位置，並設置 src 屬性)
4.代碼實現 JS 代碼：
<script>
function init(){
**//在循環的時候須要注意到了最後一張圖片的時候要重置。**
//書寫輪圖片顯示的定時操做
setInterval("changeImg()",3000);
}
//書寫函數
var i=0
function changeImg(){
i++;
//獲取圖片位置並設置src屬性值
document.getElementById("img1").src="../img/small0"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
Html：
<body onload="init()">
在指定位置定義 id。
三 、使用 JS 完成頁面定時彈出廣告
1.需求分析
咱們但願在首頁中的頂部作一個定時彈出廣告圖片。其實現效果以下：
2.技術分析
獲取圖片的位置(document.getElementById(「」))
隱藏圖片：display：none
定時操做：setInterval(「顯示圖片的函數」，3000);
3.步驟分析
第一步：在頁面指定位置隱藏一個廣告圖片(使用 display 屬性的 none 值)
第二步：肯定事件(onload)併爲其綁定一個函數
第三步：書寫這個函數(設置一個顯示圖片的定時操做)
第四步： 書寫定時器中的函數(獲取廣告圖片的位置並設置屬性style的display值block)
第五步：清除顯示圖片的定時操做()
第六步：書寫隱藏圖片的定時操做
第七步：書寫定時器中的函數(獲取廣告圖片的位置並設置屬性 style 的 display 值 none)
第八步：清除隱藏圖片的定時操做()
4.代碼實現
<script>
function init(){
//書寫輪圖片顯示的定時操做
setInterval("changeImg()",3000);
//1.設置顯示廣告圖片的定時操做
time = setInterval("showAd()",3000);
}
//書寫函數
var i=0
function changeImg(){
i++;
//獲取圖片位置並設置src屬性值
document.getElementById("img1").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
//2.書寫顯示廣告圖片的函數
function showAd(){
//3.獲取廣告圖片的位置
var adEle = document.getElementById("img2");
//4.修改廣告圖片元素裏面的屬性讓其顯示
adEle.style.display = "block";
//5.清除顯示圖片的定時操做
clearInterval(time);
//6.設置隱藏圖片的定時操做
time = setInterval("hiddenAd()",3000);
}
//7.書寫隱藏廣告圖片的函數
function hiddenAd(){
//8.獲取廣告圖片並設置其style屬性的display值爲none
document.getElementById("img2").style.display= "none";
//9.清除隱藏廣告圖片的定時操做
clearInterval(time);
}
</script>
Html 代碼：
<body onload="init()">
<!--定時彈出廣告圖片位置-->
<img src="../img/f001a62f-a49d-4a4d-b56f-
2b6908a0002c_g.jpg" width="100%" style="display: none"
id="img2"/>
四.基礎總結
5.1 javascript 的引入方式
內部引入方式
直接將 javascript 代碼寫到
<script type=」text/javascript」></script>
外部 引入方式
須要建立一個.js文件，在裏面書寫javascript代碼，而後在html文件中經過script
標籤的 src 屬性引入該外部的 js 文件
5.2 BOM 對象
BOM 對象：瀏覽器對象模型(操做與瀏覽器相關的內容)
** Window 對象**
Window 對象表示瀏覽器中打開的窗口。
setInterval():它有一個返回值，主要是提供給 clearInterval 使用。
setTimeout():它有一個返回值，主要是提供給 clearTimeout 使用。
clearInterval():該方法只能清除由 setInterval 設置的定時操做
clearTimeout():該方法只能清除由 setTimeout 設置的定時操做
彈出框的幾個方法：
<script>
//警告框
//alert("aaa");
//確認按鈕
//confirm("您確認刪除嗎？");
//提示輸入框
prompt("請輸入價格：");
</script>
</head>
** Location 對象**
Location 對象包含有關當前 URL 的信息。
href:該屬性能夠完成經過 JS 代碼控制頁面的跳轉。
<html>
<head>
<meta charset="UTF-8">
<title>location對象</title>
<script>
function tiao(){
window.location.href="http://www.itcast.cn";
}
</script>
</head>
<body>
<a href="#" onclick="tiao()">跳轉到首頁</a>
</body>
</html>
** History 對象**
History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。
歷史頁面：使用 location 頁面(把 href 屬性值改成當前的 history)
History 頁面代碼：
<input type="button" value=" 返 回 上 一 個 頁 面 " onclick="javascript:history.back()"/>
go(參數)
參數：-1 返回上一個歷史記錄頁面；-2 返回上上一個歷史記錄頁面，1 進入下一個歷 史記錄頁面。
讓按鈕點擊失效：onclick=」javascript:volid(0)」
** Navigator 對象**
Navigator 對象包含有關瀏覽器的信息。(該對象開發中不怎麼經常使用)
** Screen 對象**
Screen 對象包含有關客戶端顯示屏幕的信息。(該對象開發中不怎麼經常使用)
五 、使用 JS 完成註冊頁面表單校驗
JS的事件
1.需求分析
以前咱們已經使用彈出框的方式實現了表單校驗的功能，可是此種方式用戶體驗效果極差！
咱們但願作成以下這種效果：
2.技術分析
3.步驟分析
第一步：肯定事件(onfocus 聚焦事件)併爲其綁定一個函數
第二步：書寫綁定函數(在輸入框的後面給出提示信息)
第三步：肯定事件(onblur 離焦事件)併爲其綁定一個函數
第四步：書寫函數(對數據進行校驗，分別給出提示)
4.代碼實現
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用戶註冊校驗</title>
<script type="text/javascript">
//聚焦事件
function checkfocus(id,message){
document.getElementById(id).innerHTML="<font color='gray'>"+message+"</font>";
}
//失焦事件
function chekBlur(id,message){
var uValue=document.getElementById(id).value;
if(uValue==""){
document.getElementById(id+"span").innerHTML="<font color='red'>"+message+"</font>";
}else{
document.getElementById(id+"span").innerHTML="";
}
}
</script>
</head>
<body>
<form action="#" method="post">
用戶名：<input type="text" name="username" id="user" onfocus="checkfocus('userspan','用戶名必填')" onblur="chekBlur('user','用戶名不能爲空')"/><span id="userspan"></span><br>
密碼:<input type="password" name="pwd" /><br>
確認密碼：<input type="password" name="pwd2" /><br>
郵箱：<input type="text" name="emial"/><br>
<input type="submit" value="註冊"/>
</form>
<a href="${pageContext.request.contextPath }/hello.jsp">跳轉到你好頁面</a>
<input type="button" value="下一個頁面" onclick="lestPage()">
<script type="text/javascript">
function lestPage(){
//window.history.forward();
window.history.go(1);
}
</script>
</body>
</html>
6、使用JS完成表格的一個隔行換色
1.需求分析 咱們但願在後臺頁面中實現一個隔行換色的效果顯示全部的用戶信息，顯示效果以下：
2.技術分析 新標籤的學習
<thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody>
肯定事件(頁面加載事件onload)
獲取元素：獲取表格(document.getElementById()),最終是爲了獲取表格中tbody裏面的行數(長度)。
Tbody裏面的行數(rows.length)
JS的遍歷(for循環)
獲取奇數行和偶數行(對遍歷中角標對2取餘)
設置背景顏色(.style.backgroundColor)
3.步驟分析
第一步：肯定事件(onload)併爲其綁定一個函數
第二步：書寫函數(獲取表格)
第三步：獲取tbody裏面的行數
第四步：對tbody裏面的行進行遍歷
第五步：獲取奇數行和偶數行(角標對2取餘)
第六步：分別對奇數行和偶數行設置背景顏色
4.代碼實現
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表格隔行換色</title>
<script type="text/javascript">
window.onload=function(){
//1 先獲取表格
var tabEle=document.getElementById("tbl");
//2 獲取表格裏面table裏面的行數（長度）tBodies[0]表示一個tbody
var tbodylen=tabEle.tBodies[0].rows.length;
//對table裏面的行進行遍歷
for(var i=0;i<tbodylen;i++){
if(i%2==0){
tabEle.tBodies[0].rows[i].style.backgroundColor="pink";
}else{
tabEle.tBodies[0].rows[i].style.backgroundColor="gold";
}
}
}
</script>
</head>
<body>
<table width="500px" align="center" border="1px" id="tbl">
<thead>
<tr>
<td>編號</td>
<td>用戶名</td>
<td>密碼</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>張三</td>
<td>123456</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>123456</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>123456</td>
</tr>
<tr>
<td>4</td>
<td>小6</td>
<td>123456</td>
</tr>
<tr>
<td>5</td>
<td>田七</td>
<td>123456</td>
</tr>
<tr>
<td>6</td>
<td>王二麻子</td>
<td>123456</td>
</tr>
</tbody>
</table>
</body>
</html>
HTML代碼：
給table裏面添加一個id=「tbl」,在table裏面添加新標籤<thead></thead>和<tbody></tbody>、
5.實現一個表格的高亮顯示
爲了增強對事件的學習，添加此案例：
分析：
第一步：肯定事件(onmouseover和onmouseout)並分別爲其綁定一個函數 第二步：獲取鼠標移上去的那行，對其設置背景顏色
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表格高亮顯示</title>
<script type="text/javascript">
function changeColor(id,flag){
if(flag=="over"){
document.getElementById(id).style.backgroundColor="red";
}else if(flag="out"){
document.getElementById(id).style.backgroundColor="white";
}
}
</script>
</head>
<body>
<table width="500px" align="center" border="1px" >
<thead>
<tr>
<td>編號</td>
<td>用戶名</td>
<td>密碼</td>
</tr>
</thead>
<tbody>
<tr onmousemove="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
<td>1</td>
<td>張三</td>
<td>123456</td>
</tr>
<tr onmousemove="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2','out')">
<td>2</td>
<td>李四</td>
<td>123456</td>
</tr>
<tr onmousemove="changeColor('tr3','over')" id="tr3" onmouseout="changeColor('tr3','out')">
<td>3</td>
<td>王五</td>
<td>123456</td>
</tr>
<tr onmousemove="changeColor('tr4','over')" id="tr4" onmouseout="changeColor('tr4','out')">
<td>4</td>
<td>小6</td>
<td>123456</td>
</tr>
<tr onmousemove="changeColor('tr5','over')" id="tr5" onmouseout="changeColor('tr5','out')">
<td>5</td>
<td>田七</td>
<td>123456</td>
</tr>
<tr onmousemove="changeColor('tr6','over')" id="tr6" onmouseout="changeColor('tr6','out')">
<td>6</td>
<td>王二麻子</td>
<td>123456</td>
</tr>
</tbody>
</table>
</body>
</html>
6.總結：
回顧以前已經使用過的事件(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout)
onfocus/onblur:聚焦離焦事件，用於表單校驗的時候比較合適。
onclick/ondblclick:鼠標單擊和雙擊事件
onkeydown/onkeypress：搜索引擎使用較多
onload：頁面加載事件，全部的其它操做(匿名方式)均可以放到這個綁定的函數裏面去。若是是有名稱，那麼在html頁面中只能寫一個。
onmouseover/onmouseout/onmousemove：購物網站商品詳情頁。
onsubmit：表單提交事件 ，有返回值，控制表單是否提交。
onchange:當用戶改變內容的時候使用這個事件(二級聯動)
7、使用JS完成全選和選不選操做
1.需求分析
咱們但願在後臺系統實現一個批量刪除的操做(全選全部的複選框)
2.技術分析
肯定事件(鼠標單擊事件onclick)，事件綁定到編號前面的複選框裏面
獲取編號前面的複選框的狀態(是否選中)
獲取複選框：var checkAllEle = document.getElementById(「id」) 獲取複選框的狀態：checkAllEle.checked?
獲取下面全部的複選框：
document.getElementsByName(「name」);
3.步驟分析
第一步：肯定事件(onclick)併爲其綁定一個函數
第二步：書寫函數(獲取編號前面的複選框，獲取其狀態)
第三步：判斷編號前面複選框的狀態(若是爲選中，獲取下面全部的複選框，並將其狀態置爲選中)
第四步：判斷編號前面複選框的狀態(若是爲未選中，獲取下面全部的複選框，並將其狀態置爲未選中)
4.代碼實現
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>複選框的使用</title>
<script type="text/javascript">
function checkAll(){
//1 先獲取checkAll該元素
var checkAllEle = document.getElementById("checkAll");
//2 判斷複選框的狀態
if(checkAllEle.checked==true){
//3 獲取全部複選框的名字
var checkEles=document.getElementsByName("checkOne");
//4 遍歷複選框 設置複選框的狀態爲選中
for(var i=0;i<checkEles.length;i++){
checkEles[i].checked=true;
}
}else{
//5 獲取全部選中的全部複選框的名字
var checkEles=document.getElementsByName("checkOne");
//6 遍歷複選框，設置複選框的狀態爲選中
for(var i=0;i<checkEles.length;i++){
checkEles[i].checked=false;
}
}
}
</script>
</head>
<body>
<table width="500px" align="center" border="1px" >
<thead>
<tr>
<td><input type="checkbox" onclick="checkAll()" id="checkAll"/></td>
<td>編號</td>
<td>用戶名</td>
<td>密碼</td>
</tr>
</thead>
<tbody>
<tr>
<td> <input type="checkbox" name="checkOne" ></td>
<td>1</td>
<td>張三</td>
<td>123456</td>
</tr>
<tr >
<td> <input type="checkbox" name="checkOne" ></td>
<td>2</td>
<td>李四</td>
<td>123456</td>
</tr>
<tr >
<td> <input type="checkbox" name="checkOne" ></td>
<td>3</td>
<td>王五</td>
<td>123456</td>
</tr>
<tr >
<td> <input type="checkbox" name="checkOne" ></td>
<td>4</td>
<td>小6</td>
<td>123456</td>
</tr>
<tr >
<td> <input type="checkbox" name="checkOne" ></td>
<td>5</td>
<td>田七</td>
<td>123456</td>
</tr>
<tr >
<td> <input type="checkbox" name="checkOne" ></td>
<td>6</td>
<td>王二麻子</td>
<td>123456</td>
</tr>
</tbody>
</table>
</body>
</html>
5.總結 5.1 javascript的DOM操做
Document:整個html文件都成爲一個document文檔
Element:全部的標籤都是Element元素
Attribute：標籤裏面的屬性
Text：標籤中間夾着的內容爲text文本
Node:document、element、attribute、text統稱爲節點node.
Document對象
每一個載入瀏覽器的 HTML 文檔都會成爲 Document 對象。
後面兩個方法獲取以後須要遍歷！
如下兩個方法很重要，可是在手冊中查不到！
建立文本節點：document.createTextNode()
建立元素節點：document.createElement()
Element對象
咱們所認知的html頁面中全部的標籤都是element元素
element.appendChild() 向元素添加新的子節點，做爲最後一個子節點。
element.firstChild 返回元素的首個子節點。
element.getAttribute() 返回元素節點的指定屬性值。
element.innerHTML 設置或返回元素的內容。
element.insertBefore() 在指定的已有的子節點以前插入新節點。
element.lastChild 返回元素的最後一個子元素。
element.setAttribute() 把指定屬性設置或更改成指定值。
element.removeChild() 從元素中移除子節點。
element.replaceChild() 替換元素中的子節點。
Attribute對象
咱們所認知的html頁面中全部標籤裏面的屬性都是attribute
5.2 DOM練習
在頁面中使用列表顯示一些城市
text
咱們但願點擊一個按鈕實現動態添加城市。
分析： 事件(onclick)
獲取ul元素節點 建立一個城市的文本節點 建立一個li元素節點 將文本節點添加到li元素節點中去。 使用element裏面的方法appendChild()來添加子節點
代碼： JS代碼
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function addEle(){
//1 先獲取ul元素節點
var ulEle=document.getElementById("ul1");
//2 建立文本節點
var text=window.prompt("請輸出城市名稱");//動態但願用戶能夠輸入城市名稱
var textNode=document.createTextNode(text);//深圳
//3 建立屬性節點
var elementNode=document.createElement("li");//<li></li>
//4 吧文本節點添加到元素節點中去
elementNode.appendChild(textNode);
//5 吧元素節點添加到ul中去
ulEle.appendChild(elementNode);
}
</script>
</head>
<body>
<input type="button" value="添加節點" id="buttonEle" onclick="addEle()">
<ul id="ul1">
<li>上海</li>
<li>北京</li>
<li>合肥</li>
</ul>
</body>
</html>
8、使用JS完成省市二級聯動
1.需求分析
咱們但願在註冊頁面中添加一個字段(籍貫)，當用戶選擇一個具體的省份，在後面的下拉列表中動態加載該省份下全部的城市。顯示的效果以下：
2.技術分析
事件(onchange)
使用一個二維數組來存儲省份和城市(二維數組的建立？)
獲取用戶選擇的省份(使用方法傳參的方式：this.value)
遍歷數組(獲取省份與用戶選擇的省份比較，若是相同了，繼續遍歷該省份下全部的城市)
建立文本節點和元素節點並進行添加操做
createTextNode()
createElement()
appendChild()
3.步驟分析
第一步：肯定事件(onchange)併爲其綁定一個函數
第二步：建立一個二維數組用於存儲省份和城市
第三步：獲取用戶選擇的省份
第四步：遍歷二維數組中的省份
第五步：將遍歷的省份與用戶選擇的省份比較
第六步：若是相同，遍歷該省份下全部的城市
第七步：建立城市文本節點
第八步：建立option元素節點
第九步：將城市文本節點添加到option元素節點中去
第十步：獲取第二個下拉列表，並將option元素節點添加進去
第十一步：每次操做前清空第二個下拉列表的option內容。
4.代碼實現 JS代碼：
<script>
//1.建立一個二維數組用於存儲省份和城市
var cities = new Array(3);
cities[0] = new Array("武漢市","黃岡市","襄陽市","荊州市");
cities[1] = new Array("長沙市","郴州市","株洲市","岳陽市");
cities[2] = new Array("石家莊市","邯鄲市","廊坊市","保定市");
cities[3] = new Array("鄭州市","洛陽市","開封市","安陽市");
function changeCity(val){
//7.獲取第二個下拉列表
var cityEle = document.getElementById("city");
//9.清空第二個下拉列表的option內容
cityEle.options.length=0;
//2.遍歷二維數組中的省份
for(var i=0;i<cities.length;i++){
//注意，比較的是角標
if(val==i){
//3.遍歷用戶選擇的省份下的城市
for(var j=0;j<cities[i].length;j++){
//alert(cities[i][j]);
//4.建立城市的文本節點
var textNode = document.createTextNode(cities[i][j]);
//5.建立option元素節點
var opEle = document.createElement("option");
//6.將城市的文本節點添加到option元素節點
opEle.appendChild(textNode);
//8.將option元素節點添加到第二個下拉列表中去
cityEle.appendChild(opEle);
}
}
}
}
</script>
Html代碼：
<select onchange="changeCity(this.value)">
<option>--請選擇--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">
</select>
九 .DOM總結
5.1 javascript內置對象
Array對象
數組的建立：
數組的特色： 長度可變！ 數組的長度=最大角標+1
Boolean對象 對象建立：
若是value 不寫，那麼默認建立的結果爲false
Date對象
getTime() 返回 1970 年 1 月 1 日至今的毫秒數。
_解決瀏覽器緩存問題
Math和number對象
與java裏面的基本一致。
String對象
match() 找到一個或多個正則表達式的匹配。
substr() 從起始索引號提取字符串中指定數目的字符。
substring() 提取字符串中兩個指定的索引號之間的字符。
例子：
<script> var str = "-a-b-c-d-e-f-"; var str1 = str.substr(2,4);//-b-c //alert(str1); var str2 = str.substring(2,4);//-b alert(str2); </script>
RegExp對象
正則表達式對象
test 檢索字符串中指定的值。返回 true 或 false。
5.2 全局函數
全局屬性和函數可用於全部內建的 JavaScript 對象
關於編碼和解碼的一組方法：
<script>
var str = "張三";
//alert(encodeURI(str));//%E5%BC%A0%E4%B8%89
//alert(encodeURIComponent(str));//%E5%BC%A0%E4%B8%89
//alert(decodeURI(encodeURI(str)));//張三
//alert(decodeURIComponent(encodeURIComponent(str)));//張三
var str1 = "http://www.itheima.cn";
//alert(encodeURI(str1));//http://www.itheima.cn
//alert(encodeURIComponent(str1));//http%3A%2F%2Fwww.itheima.cn
//alert(decodeURI(encodeURI(str1)));//http://www.itheima.cn
//alert(decodeURIComponent(encodeURIComponent(str1)));//http://www.itheima.cn
var str2 = "alert('abc')";
//alert(str2);
eval(str2);
</script>
``
- 1. js經常使用操做
- 2. 1 js中經常使用的操做
- 3. js的經常使用操做
- 4. JavaScript(js)對象經常使用操做，JS操做JSON總結
- 5. js經常使用DOM操做 經常使用DOM整理
- 6. JS中表單經常使用操做
- 7. js經常使用JSON數據操做
- 8. JS操做JSON經常使用方法
- 9. js 對 select 經常使用操做
- 10. JS 經常使用數組操做
- 更多相關文章...
- • 一級緩存常用操作 - Hibernate教程
- • Redis的基礎事務和常用操作 - Redis教程
- • 常用的分佈式事務解決方案
- • Composer 安裝與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Window下Ribbit MQ安裝
- 2. Linux下Redis安裝及集羣搭建
- 3. shiny搭建網站填坑戰略
- 4. Mysql8.0.22安裝與配置詳細教程
- 5. Hadoop安裝及配置
- 6. Python爬蟲初學筆記
- 7. 部署LVS-Keepalived高可用集羣
- 8. keepalived+mysql高可用集羣
- 9. jenkins 公鑰配置
- 10. HA實用詳解
- 1. js經常使用操做
- 2. 1 js中經常使用的操做
- 3. js的經常使用操做
- 4. JavaScript(js)對象經常使用操做，JS操做JSON總結
- 5. js經常使用DOM操做 經常使用DOM整理
- 6. JS中表單經常使用操做
- 7. js經常使用JSON數據操做
- 8. JS操做JSON經常使用方法
- 9. js 對 select 經常使用操做
- 10. JS 經常使用數組操做