dya04 js_02
生活随笔
收集整理的這篇文章主要介紹了
dya04 js_02
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1 json的入門(mén)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JSON數(shù)據(jù)格式</title> </head> <body> <h2>JSON對(duì)象</h2> <script type="text/javascript">//一個(gè)person對(duì)象的JSON對(duì)象，屬性名：firstname、lastname、age給三個(gè)屬性賦值var person = {firstname : "孫悟空",lastname : "弼馬溫",age : 18}//輸出對(duì)象：對(duì)象名.屬性名document.write("姓名: " + person.firstname + ", 昵稱(chēng): " + person.lastname + ", 年齡: " + person.age + "<br/>");document.write(`姓名: ${person.firstname}, 昵稱(chēng): ${person.lastname}, 年齡: ${person.age} <br/>`); </script> <hr/><h2>創(chuàng)建一個(gè)數(shù)組，其中每個(gè)元素是JSON對(duì)象</h2> <script type="text/javascript">var personArr = [{firstname : "孫悟空",lastname : "弼馬溫",age : 18},{firstname : "豬八戒",lastname : "天蓬元帥",age : 19},{firstname : "沙和尚",lastname : "卷簾大將",age : 28}];//遍歷輸出每個(gè)JSON對(duì)象的屬性值/*Java中寫(xiě)法：for(類(lèi)型 變量名: 集合)JavaScript中寫(xiě)法：for(類(lèi)型 變量名 of 集合)*/for(let person of personArr) {document.write(`姓名: ${person.firstname}, 昵稱(chēng): ${person.lastname}, 年齡: ${person.age} <br/>`)}</script> <hr/><h2>JSON對(duì)象,其中屬性是集合</h2> <script type="text/javascript"> var xiyouji = {name : "唐僧",age : 15,brothers : [{firstname : "孫悟空",lastname : "弼馬溫",age : 18},{firstname : "豬八戒",lastname : "天蓬元帥",age : 19},{firstname : "沙和尚",lastname : "卷簾大將",age : 28}] } document.write(`師傅 姓名: ${xiyouji.name}, 年齡: ${xiyouji.age}<br/>`); document.write("徒弟們: <br/>")for(let personJson of xiyouji.brothers) {document.write(`姓名: ${personJson.firstname}, 昵稱(chēng): ${personJson.lastname}, 年齡: ${personJson.age} <br/>`)}</script> </body> </html>2 json和字符串的相互轉(zhuǎn)化
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JSON有關(guān)的函數(shù)</title> </head> <body> <script type="text/javascript">//定義一個(gè)字符串，屬性名一定是雙引號(hào)var jsonStr = '{"name":"悟空", "age":18}';document.write("類(lèi)型:" + typeof(jsonStr));//把字符串轉(zhuǎn)成JSON對(duì)象var jsonObj = JSON.parse(jsonStr);document.write("<hr/>");document.write(jsonObj.name + " ====== " + jsonObj.age);document.write("<hr/>");//把JSON對(duì)象轉(zhuǎn)成字符串var jsonStr2 = JSON.stringify(jsonObj);document.write("jsonStr2 = " + jsonStr2 + "<br/>");document.write("jsonStr2 類(lèi)型:" + typeof(jsonStr2));</script></body> </html>3 window.confirm 確認(rèn)操作
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>window中的方法</title> </head> <body> <input type="button" value="刪除訂單" onclick="delOrder()" /> <script type="text/javascript">function delOrder() {/*** 出現(xiàn)一個(gè)確定框，有2個(gè)按鈕* 點(diǎn)確定，返回true，否則返回false*/// var flag = window.confirm("您確定要?jiǎng)h除此訂單嗎?");var flag = confirm("2222222222 您確定要?jiǎng)h除此訂單嗎?");// 如果選擇的是 確定, 返回true; 否則 返回falseconsole.log(flag);if(flag) {document.write("用戶(hù)選擇的是確定! 執(zhí)行刪除操作!")}else {document.write("用戶(hù)選擇的是取消! 可能是用戶(hù)誤操作!")}} </script> </body> </html>4 location對(duì)象
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>BOM：location對(duì)象</title> </head> <body> <!--點(diǎn)擊以后調(diào)用方法--> <input type="button" onclick="location.reload()" value="刷新"> <br/> <input type="button" onclick="history.back()" value="后退"> <br/> <input type="button" onclick="history.go(-1)" value="后退"> <br/><script type="text/javascript">//1. 獲取屬性值，得到當(dāng)前訪(fǎng)問(wèn)的地址console.log("當(dāng)前頁(yè)面地址: " + location.href);//2. 設(shè)置屬性值，跳轉(zhuǎn)到指定的頁(yè)面(常用)// location.href = "http://www.jd.com"; // (推薦)//location是window的一個(gè)屬性，省略了window//window.location.href = "http://www.baidu.com";//location對(duì)象默認(rèn)的屬性是href，href也可以省略// location = "http://www.tianmao.com";//獲取?后面的參數(shù)字符串let canshu = location.search;console.log(canshu);//顯示現(xiàn)在的時(shí)間document.write(new Date().toLocaleString()) </script> </body> </html>5 倒計(jì)時(shí)跳轉(zhuǎn)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>跳轉(zhuǎn)</title> </head> <body> <span id="counter">5</span>秒以后跳轉(zhuǎn)<script type="text/javascript">/*分析：1.用到倒計(jì)時(shí)：window.setInterval()2.頁(yè)面跳轉(zhuǎn)：location.href3.修改標(biāo)簽中文字使用屬性：innerText*/// 聲明一個(gè)變量var num = 5;// 每隔1秒更新秒數(shù)setInterval(function(){// 判斷if(num == 0) {location.href = "http://www.baidu.com";} else {// 將變化后的秒數(shù)顯示在標(biāo)簽中document.getElementById("counter").innerText = num;}// 讓總秒數(shù)-1num--;}, 1000);</script> </body> </html>6 會(huì)動(dòng)的時(shí)鐘
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>會(huì)動(dòng)的時(shí)鐘</title> </head> <body> <input type="button" value="開(kāi)始" id="btnBegin"> <!--disabled就元素不可用--> <input type="button" value="暫停" id="btnPause" disabled="disabled"> <hr/><h1 id="clock" style="color: darkgreen"></h1><script type="text/javascript">// 變量var timer;// 需求1: 點(diǎn)擊開(kāi)始按鈕, 就將電子始終開(kāi)始走document.getElementById("btnBegin").onclick = function() {// setInterval(函數(shù), 2000)timer = setInterval(function() {// 將當(dāng)前時(shí)間顯示 id=clock的標(biāo)簽中document.getElementById("clock").innerText = new Date().toLocaleString();}, 1000);// 讓開(kāi)始按鈕 不可用document.getElementById("btnBegin").disabled = true;// 讓暫停按鈕 可用document.getElementById("btnPause").disabled = false;}// 需求2: 點(diǎn)擊結(jié)束按鈕, 將電子鐘暫停document.getElementById("btnPause").onclick = function() {// setInterval(函數(shù), 2000)clearInterval(timer);// 讓開(kāi)始按鈕 可用document.getElementById("btnBegin").disabled = false;// 讓暫停按鈕 不可用document.getElementById("btnPause").disabled = true;} </script> </body> </html>7 innerHtml 和 innerText的區(qū)別
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>innerText和innerHTML的區(qū)別</title> </head> <body> <input type="button" value="改內(nèi)容" id="btn"> <hr/> <span id="content1">xxxxxxx</span> <span id="content2">xxxxxxx</span><script type="text/javascript">// 需求: 點(diǎn)擊按鈕后, 將內(nèi)容放到 span標(biāo)簽中// 1 給按鈕綁定單擊事件document.getElementById("btn").onclick = function() {// 將內(nèi)容放到 span標(biāo)簽中document.getElementById("content1").innerText = "<h1 style='color:red'>32期 天生傲嬌111</h1>";document.getElementById("content2").innerHTML = "<h1 style='color:green'>32期 天生傲嬌222</h1>";} </script> </body> </html>8 dom的常用操作(查)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>DOM：查找元素的方法</title><style>table {/*細(xì)邊框樣式*/border-collapse: collapse;width: 500px;}</style> </head> <body> <input type="button" value="(通過(guò)標(biāo)簽名)給表格奇偶行添加不同的背景色" id="b1"> <hr/> <table border="1"><tr><td>100</td><td>100</td><td>100</td></tr><tr><td>100</td><td>100</td><td>100</td></tr><tr><td>100</td><td>100</td><td>100</td></tr><tr><td>100</td><td>100</td><td>100</td></tr><tr><td>100</td><td>100</td><td>100</td></tr> </table><script type="text/javascript">// 目標(biāo): 單擊按鈕時(shí), 讓表格隔行變色// 單擊按鈕時(shí)document.getElementById("b1").onclick = function () {// 獲取頁(yè)面中的所有trvar trObjArr = document.getElementsByTagName("tr");for (let i = 0; i < trObjArr.length; i++) {const trObj = trObjArr[i];// 判斷if(i%2==0) {trObj.style.backgroundColor = "lightyellow";}else {trObj.style.backgroundColor = "lightblue";}}}</script><hr/> <input type="button" value="(通過(guò)name屬性)選中所有的商品" id="b2"/> <hr/> <!--要選中一個(gè)checkbox需要設(shè)置checked=true，表示選中，否則就沒(méi)選中--> <input type="checkbox" name="product" >自行車(chē) <input type="checkbox" name="product">電視機(jī) <input type="checkbox" name="product">洗衣機(jī)<script type="text/javascript">//通過(guò)css的#id選擇器來(lái)選中元素// 1 給按鈕綁定單擊事件// document.getElementById("b2").onclick = function () {// alert(1111);// }document.querySelector("#b2").onclick = function() {// 根據(jù)name屬性值 選中一組標(biāo)簽對(duì)象var productObjArr = document.getElementsByName("product");for (const productObj of productObjArr) {productObj.checked = true; // ture 選中, false 取消選中}} </script> <hr/><input type="button" value="(通過(guò)類(lèi)名)給a添加鏈接" id="b3"/> <hr/> <a class="company">傳智播客</a> <a class="company">傳智播客</a> <a class="company">傳智播客</a><script type="text/javascript">document.getElementById("b3").onclick = function () {// 根據(jù)class屬性值 獲取一組標(biāo)簽var companyObjArr = document.getElementsByClassName("company");for (let i = 0; i < companyObjArr.length; i++) {const companyObj = companyObjArr[i];companyObj.href = "http://www.itcast.cn";}} </script> </body> </html>9 dom 增
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="myDiv"></div> <script>// 目標(biāo): 創(chuàng)建a標(biāo)簽顯示到頁(yè)面上// 方式一// // 創(chuàng)建a標(biāo)簽 <a></a>// var aObj = document.createElement("a");// // 設(shè)置屬性 <a href="http://www.jd.com"></a>// aObj.setAttribute("href", "http://www.jd.com");// // 設(shè)置內(nèi)容 <a href="http://www.jd.com">京東</a>// aObj.innerText = "京東";// // 將a標(biāo)簽 放到 div中// document.getElementById("myDiv").appendChild(aObj);// 方式二var str = "<a href='http://www.baidu.com'>百度</a>";document.getElementById("myDiv").innerHTML = str; </script> </body> </html>10 二級(jí)聯(lián)動(dòng)
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><title>省市聯(lián)動(dòng)</title> </head> <body> <select id="province"><option>--請(qǐng)選擇省份--</option> </select> <select id="city"><option>--請(qǐng)選擇城市--</option> </select> </body><script>// 省份數(shù)據(jù)var provinces= ["廣東省","湖南省","廣西省"];// 城市數(shù)據(jù)，數(shù)據(jù)是一個(gè)二維數(shù)組，一維中每個(gè)元素是一個(gè)數(shù)組var cities = [["深圳","廣州","東莞"],["長(zhǎng)沙市","郴州市","湘潭市"],["南寧市","桂林市","柳州市"]];// 需求1: 初始化省級(jí)信息var provinceStr = `<option>--請(qǐng)選擇省份--</option>`;for (let i = 0; i < provinces.length; i++) {provinceStr += `<option value="${i}">${provinces[i]}</option>`;}//console.log(provinceStr);document.getElementById("province").innerHTML = provinceStr;// 需求2: 當(dāng)省發(fā)生變化時(shí), 加載市級(jí)信息document.getElementById("province").onchange = function () {console.log(this.value);//var provinceVal = document.getElementById("province").value;var provinceVal = this.value;var cityArr = cities[provinceVal];var cityStr = `<option>--請(qǐng)選擇城市--</option>`;if(cityArr!=null && cityArr.length>0) {for (let i = 0; i < cityArr.length; i++) {cityStr += `<option value="${i}">${cityArr[i]}</option>`;}//console.log(cityStr);}document.getElementById("city").innerHTML = cityStr;}</script> </html>11 正則寫(xiě)法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>正則表達(dá)式</title> </head> <body> <script type="text/javascript">/*** 創(chuàng)建正則表達(dá)式的2種方式：* 1. new RegExp("正則表達(dá)式")* 2. /正則表達(dá)式/** 判斷正則表達(dá)式是否匹配字符串的方法：* boolean 正則表達(dá)式對(duì)象.test(字符串) 如果匹配返回true，否則返回false* 與Java不同，Java默認(rèn)是精確匹配。JS默認(rèn)是模糊匹配，只要包含這個(gè)正則表達(dá)式的內(nèi)容就可以* 結(jié)論：如果要在JS中精確匹配，必須以^開(kāi)頭，以$結(jié)尾*/// 匹配含有三個(gè)數(shù)字var reg1 = new RegExp("\\d{3}");// document.write(reg1.test("123") + "<br/>"); // true// document.write(reg1.test("a123") + "<br/>"); // true// document.write(reg1.test("123z") + "<br/>"); // true// document.write(reg1.test("a123z") + "<br/>"); // truedocument.write("<hr/>")// 匹配以3個(gè)數(shù)字開(kāi)頭的var reg2 = new RegExp("^\\d{3}");// document.write(reg2.test("123") + "<br/>"); // true// document.write(reg2.test("a123") + "<br/>"); // false// document.write(reg2.test("123z") + "<br/>"); // true// document.write(reg2.test("a123z") + "<br/>"); // false//// document.write("<hr/>");// 匹配三個(gè)數(shù)字結(jié)尾的// var reg3 = new RegExp("\\d{3}$");// document.write(reg3.test("123") + "<br/>"); // true// document.write(reg3.test("a123") + "<br/>"); // true// document.write(reg3.test("123z") + "<br/>"); // false// document.write(reg3.test("a123z") + "<br/>"); // false//// document.write("<hr/>");// 正確寫(xiě)法var reg4 = new RegExp("^\\d{3}$");document.write(reg4.test("123") + "<br/>"); // truedocument.write(reg4.test("a123") + "<br/>"); // falsedocument.write(reg4.test("123z") + "<br/>"); // falsedocument.write(reg4.test("a123z") + "<br/>"); // falsedocument.write("<hr/>");/*使用第2種寫(xiě)法*/var reg5 = /^\d{3}$/;document.write(reg5.test("123") + "<br/>"); // truedocument.write(reg5.test("a123") + "<br/>"); // falsedocument.write(reg5.test("123z") + "<br/>"); // falsedocument.write(reg5.test("a123z") + "<br/>"); // false</script> </body> </html>12 正則修飾符
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>正則表達(dá)式匹配模式</title> </head> <body> <script type="text/javascript">/*i 忽略大小寫(xiě)比較1. new RegExp("正則表達(dá)式","匹配模式")2. /正則表達(dá)式/匹配模式*/var reg1 = new RegExp("^cat$");document.write(reg1.test("CAT") + "<br/>"); // falsedocument.write(reg1.test("Cat") + "<br/>"); // falsedocument.write("<hr/>");var reg2 = new RegExp("^cat$", "i");document.write(reg2.test("CAT") + "<br/>"); // truedocument.write(reg2.test("Cat") + "<br/>"); // truedocument.write("<hr/>");var reg3 = /^cat$/;document.write(reg3.test("CAT") + "<br/>"); // falsedocument.write(reg3.test("Cat") + "<br/>"); // falsedocument.write("<hr/>");var reg4 = /^cat$/i;document.write(reg4.test("CAT") + "<br/>"); // truedocument.write(reg4.test("Cat") + "<br/>"); // true </script> </body> </html>13 注冊(cè)案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>驗(yàn)證注冊(cè)頁(yè)面</title><style type="text/css">body {margin: 0;padding: 0;font-size: 12px;line-height: 20px;}.main {width: 525px;margin-left: auto;margin-right: auto;}.hr_1 {font-size: 14px;font-weight: bold;color: #3275c3;height: 35px;border-bottom-width: 2px;border-bottom-style: solid;border-bottom-color: #3275c3;vertical-align: bottom;padding-left: 12px;}.left {text-align: right;width: 80px;height: 25px;padding-right: 5px;}.center {width: 280px;}.in {width: 130px;height: 16px;border: solid 1px #79abea;}.red {color: #cc0000;font-weight: bold;}div {color: #F00;}</style><script type="text/javascript">function checkAll() {// 如果通過(guò)了所有的校驗(yàn), 返回true; 否則 返回falsevar flag1 = checkUser();var flag2 = checkMobile();return flag1 && flag2;}// 需求: 校驗(yàn)用戶(hù)名function checkUser() {// 1 獲取用戶(hù)輸入的值let userVal = document.getElementById("user").value;// 2 創(chuàng)建正則對(duì)象 : 用戶(hù)名 只能由英文字母和數(shù)字組成，長(zhǎng)度為4～16個(gè)字符，并且以英文字母開(kāi)頭var reg = /[a-zA-Z]\w{3,15}/;// 3 通過(guò)正則校驗(yàn), 返回boolean結(jié)果var flag = reg.test(userVal);// 4 判斷if(flag) {// 4.1 如果合法, 顯示對(duì)勾圖片, 返回truedocument.getElementById("userInfo").innerHTML = `<img src="img/gou.png" width="20"/>`;return true;}else {// 4.2 如果不合法, 提示錯(cuò)誤信息, 返回falsedocument.getElementById("userInfo").innerHTML = `用戶(hù)名格式不對(duì)!`;return false;}}// 校驗(yàn)手機(jī)號(hào)的格式function checkMobile() {// 1 獲取用戶(hù)輸入的值let mobileVal = document.getElementById("mobile").value;// 2 創(chuàng)建正則對(duì)象 : 手機(jī)號(hào)：/^1[3456789]\d{9}$/var reg = /^1[3456789]\d{9}$/;// 3 通過(guò)正則校驗(yàn), 返回boolean結(jié)果var flag = reg.test(mobileVal);// 4 判斷if(flag) {// 4.1 如果合法, 顯示對(duì)勾圖片, 返回truedocument.getElementById("mobileInfo").innerHTML = `<img src="img/gou.png" width="20"/>`;return true;}else {// 4.2 如果不合法, 提示錯(cuò)誤信息, 返回falsedocument.getElementById("mobileInfo").innerHTML = `手機(jī)號(hào)格式不對(duì)!`;return false;}}</script></head><body><!--表單提交事件: return true 正常提交, return false 沒(méi)辦法提交--><form action="server" method="post" id="myform" onsubmit="return checkAll()"><table class="main" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="img/logo.jpg" alt="logo" /><img src="img/banner.jpg" alt="banner" /></td></tr><tr><td class="hr_1">新用戶(hù)注冊(cè)</td></tr><tr><td style="height:10px;"></td></tr><tr><td><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><!-- 不能為空， 輸入長(zhǎng)度必須介于 5 和 10 之間 --><td class="left">用戶(hù)名：</td><td class="center"><input id="user" name="user" type="text" class="in" onblur="checkUser()"/><span id="userInfo" style="color:red"></span></td></tr><tr><!-- 不能為空， 輸入長(zhǎng)度大于6個(gè)字符 --><td class="left">密碼：</td><td class="center"><input id="pwd" name="pwd" type="password" class="in" /></td></tr><tr><!-- 不能為空， 與密碼相同 --><td class="left">確認(rèn)密碼：</td><td class="center"><input id="repwd" name="repwd" type="password" class="in"/></td></tr><tr><!-- 不能為空， 郵箱格式要正確 --><td class="left">電子郵箱：</td><td class="center"><input id="email" name="email" type="text" class="in"/></td></tr><tr><!-- 不能為空， 使用正則表達(dá)式自定義校驗(yàn)規(guī)則,1開(kāi)頭，11位全是數(shù)字 --><td class="left">手機(jī)號(hào)碼：</td><td class="center"><input id="mobile" name="mobile" type="text" class="in" onblur="checkMobile()"/><span id="mobileInfo" style="color:red"></span></td></tr><tr><!-- 不能為空， 要正確的日期格式 --><td class="left">生日：</td><td class="center"><input id="birth" name="birth" type="text" class="in"/></td></tr><tr><td class="left"> </td><td class="center"><input name="" type="image" src="img/register.jpg" /></td></tr></table></td></tr></table></form></body> </html>總結(jié)
以上是生活随笔為你收集整理的dya04 js_02的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 三盘惠普双循环的磁盘阵列恢复
- 下一篇： 同步一篇博客222