版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
案例四、金額轉換器學習目標知識鏈接案例實現效果演示目錄學完本章節(jié)應該能做到的事情學習目標壹學習目標會使用querySelector和querySelectorAll查詢接口。理解事件流和事件對象。會字符串連接。PPT模板/moban/會字符串查找。會字符串截取。掌握while和dowhile循環(huán)。能動態(tài)修改網頁的代碼。效果演示完成本案例應該具備的知識知識鏈接貳知識鏈接列表PPT模板/moban/querySelector和querySelectorAll。事件流和事件對象。字符串連接。字符串查找。字符串截取。while和dowhile循環(huán)。動態(tài)修改網頁的代碼。querySelector和querySelectorAll1這兩個方法都可以接受三種類型的參數：id(#)、class(.)、標簽，很像jquery的選擇器0102querySelector：只返回匹配的第一個元素，如果沒有匹配項，返回nullquerySelectorAll：返回匹配的元素集合，如果沒有匹配項，返回空的nodelistquerySelector和querySelectorAll1<divid="left"> leftpanel</div><divid="right"> rightpanel</div><script> vardiv1=document.querySelector("div"); console.log(div1); varp1=document.querySelector("p"); console.log(p1); vardiv2=document.querySelectorAll("div"); console.log(div2); varp2=document.querySelectorAll("p"); console.log(p2);</script>選擇器（queryselector.html）事件流和事件對象2事件流是描述的頁面元素從頁面接受事件的順序，事件流包括兩種模式：冒泡和捕獲。<body> <div> <span>hello</span> </div></body>事件流和事件對象2事件處理函數:就是處理用戶操作的函數，不同的操作對應不同的名稱。事件綁定：使用戶操作時執(zhí)行開發(fā)者指定的代碼的操作。0102行內綁定式：在DOM元素中直接綁定動態(tài)綁定式：在JavaScript代碼中直接綁定03事件監(jiān)聽式：綁定事件監(jiān)聽函數在JavaScript中，有三種常用的綁定事件的方法：事件流和事件對象2行內綁定式（EventInline.html）<buttononclick=”sayhello()”>按鈕</button><script> functionsayhello(){ alert(“hello”); }</script>事件流和事件對象2動態(tài)綁定式（EventDynamic.html）<buttonid=”btn”>按鈕</button><script> document.getElementById(“btn”).onclick=function(){ alert(“hello”); }</script>事件流和事件對象2事件監(jiān)聽式（EventListen.html）<buttonid=”btn”>按鈕</button><script> document.getElementById(“btn”).addEventListener(“click”,function(){ alert(“hello”); });</script>事件流和事件對象2addEventListener()函數語法：elementObject.addEventListener(eventName,handle,useCapture);參數說明：elementObject：DOM對象（即DOM元素）。eventName：事件名稱。注意，這里的事件名稱沒有“on”，如鼠標單擊事件click，鼠標雙擊事件doubleclick，鼠標移入事件mouseover，鼠標移出事件mouseout等。handle：事件句柄函數，即用來處理事件的函數。useCapture：Boolean類型，表示是否使用捕獲型事件流，false表示是冒泡型事件流，true表示是捕獲型事件流，默認為false。事件流和事件對象2冒泡型事件與捕獲型事件對比（EventFlow.html）<div> <span>點擊從控制臺查看事件流</span></div><script> //以下三次綁定中第三個參數，演示冒泡事件時用false,演示捕獲事件時用true document.querySelector("body").addEventListener("click",function(e){ console.log("Hi,Iambody"); },false); document.querySelector("div").addEventListener("click",function(e){ console.log("Hi,Iamdiv"); },false); document.querySelector("span").addEventListener("click",function(e){ console.log("Hi,Iamspan"); },false);</script>事件流和事件對象20102作用：描述事件的特征，包括導致事件的元素、事件的類型以及其他與特定事件相關的信息產生時機：當頁面中一個事件被觸發(fā)時0304支持：所有瀏覽器都支持作用域：event對象必須作為唯一的參數傳給事件處理函數，在該函數內起作用（舊的IE瀏覽器是全局作用域）事件流和事件對象2查看事件對象信息（EventObj.html）<inputid="btn"type="button"value="來啊"/><script>varbtn=document.getElementById("btn");btn.onclick=function(event){console.log(event);}btn.addEventListener("mouseenter",function(event){console.log(event);},false);</script>事件流和事件對象2表4-1事件對象重要的屬性和方法屬性描述bubbles返回布爾值，表示事件是否是冒泡事件類型。cancelable返回布爾值，表示是否為可取消事件。如果可以阻止事件默認操作，則該事件是可取消的。currentTarget返回其事件監(jiān)聽器觸發(fā)該事件的元素。eventPhase返回事件傳播的當前階段。target返回觸發(fā)此事件的元素（事件的目標節(jié)點）。timeStamp返回事件生成的日期和時間。type返回當前Event對象表示的事件的名稱。initEvent()初始化新創(chuàng)建的Event對象的屬性。preventDefault()通知瀏覽器不要執(zhí)行與事件關聯(lián)的默認動作。stopPropagation()不再派發(fā)事件。事件流和事件對象2鼠標點擊目標和點擊坐標（eventObj_click.html）<style> div{ width:300px; height:200px; margin:auto; } #div1{background:#BF5C5E;} #div2{background:#37C365;}</style><divid="div1"> </div><divid="div2"></div><scripttype="text/javascript">vardivs=document.getElementsByTagName("div");divs[0].onclick=divs[1].onclick=function(event){ console.log(event.target);//點擊元素
//相對DOM區(qū)域坐標
console.log(event.clientX+""+event.clientY); //相對DOM區(qū)域坐標（包含滾動條距離）
console.log(event.pageX+""+event.pageY); //相對屏幕的坐標
console.log(event.screenX+""+event.screenY);}</script>事件流和事件對象2按鍵監(jiān)聽（演示時關閉中文輸入法，eventObj_keypress.html） <input><scripttype="text/javascript">vaript=document.querySelector("input");ipt.onkeypress=function(event){ console.log("你在"+event.target+"里按下了鍵：");console.log(event.keyCode+"=="+event.key);}</script>事件流和事件對象2阻止事件傳播（eventObj_stopEventFlow.html）<h2>DOM操作</h2><div><p> <span>hi,welcome</span></p></div><scripttype="text/javascript">varsp=document.getElementsByTagName("span")[0];varpt=document.getElementsByTagName("p")[0];vardv=document.getElementsByTagName("div")[0];
sp.addEventListener("click",function(event){console.log("Thisisspantag");event.stopPropagation();//演示時注釋掉作對比
});pt.addEventListener("click",function(event){console.log("Thisisptag");event.stopPropagation();//演示時注釋掉作對比
});dv.addEventListener("click",function(event){console.log("Thisisdivtag");event.stopPropagation();//演示時注釋掉下一句作對比
});</script>事件流和事件對象2阻止瀏覽器默認動作（eventObj_stopDefault.html）<formaction="/register.php"><inputtype="text"><inputid="submit"type="submit"></form><scripttype="text/javascript">varform=document.querySelector("form");form.addEventListener("submit",function(event){console.log("提交被阻止了。")event.preventDefault();});</script>字符串連接3s1.concat("d","e","f");01加號運算符02concat()方法“abc”+3strArr.join(',')03join()方法字符串連接3加號運算符拼接字符串（stringPlus.html）vars1="abc",s2="def";console.log(s1+s2);//輸出字符串“abcdef”vard1=1,d2='2',d3=3;console.log(d1+d2);//輸出12console.log(d1+d3);//輸出4字符串連接3使用concat()方法把多個字符串連接在一起（concat.html）vars1="abc";vars2=s1.concat("d","e","f");//調用concat()連接字符串console.log(s1);//返回字符串abcconsole.log(s2);//返回字符串“abcdef”字符串連接3借助數組的join方法來連接字符串（join.html）varstrArr=["Java","Script"];console.log(strArr.join(""));//輸出JavaScriptconsole.log(strArr.join(','));//輸出Java,Scriptconsole.log(strArr.join('|'));//輸出Java|Script字符串查找4要查找字符串的第一次出現的起始下標是哪個01charAt()方法02indexOf()方法字符在哪個位置要查找字符串的最后一次出現的起始下標是哪個03lastIndexOf()方法字符串查找4語法：str.charAt(index)index:0到字符串長度-1的一個整數。返回：字符串中的字符從左向右所在位置的索引，第一個字符的索引值為0，最后一個字符（假設該字符位于字符串stringName中）的索引值為stringName.length-1。如果指定的index值超出了該范圍，則返回一個空字符串。str="helloworld!";//字符串總長為12//返回第9個字符：rconsole.log(str.charAt(8));//超出長度，返回空串，不是nullconsole.log(str.charAt(16));charAt（charAt.html）字符串查找4indexOf（indexOf.html））str="helloworld!";//字符串總長為12
console.log(str.indexOf('ell'));//返回1console.log(str.indexOf('ell',2));//返回-1console.log(str.indexOf('wor',-6));//返回6語法：str.indexOf(searchValue[,fromIndex]);searchValue：一個字符串表示被查找的值。formIndex：可選參數，表示調用該方法的字符串中開始查找的位置，可以是任意整數，默認值是0。如果fromIndex<0則查找整個字符串(如同傳進了0)；如果formIndex>=str.length則該方法返回-1。除非被查找的字符串是一個空字符串此時返回str.length。返回：指定值在字符串對象中首次出現的位置，從fromIndex位置開始查找如果不存在則返回-1。字符串查找4lastIndexOf（lastIndexOf.html）str="helloworld!";//字符串總長為12
console.log(str.lastIndexOf('ell'));//返回1console.log(str.lastIndexOf('ell',2));//返回1console.log(str.lastIndexOf('wor',-6));//返回-1語法：str.lastIndexOf(searchValue[,fromIndex]);searchValue：一個字符串表示被查找的值。formIndex：從調用該方法字符串的此位置處開始查找，可以是任意整數，默認值為str.length。如果為負值，則被看作0。如果fromIndex>str.length，則fromIndex被看作str.length。返回：指定值在調用該方法的字符串中最后出現的位置，如果沒有找到則返回-1。字符串截取5截取指定長度字符串它還有其他用法，此處不討論，感興趣的可自行學習01substr()方法02slice()方法截取指定長度字符串截取指定長度字符串03substring()方法從參數的個數及取值上區(qū)分它們字符串截取5varID=;varbirthday=ID.substr(6,8);//生日從第七個字符開始，長度為8console.log(birthday);//返回子字符串“19640307”
vartmp=ID.substr(6);console.log(tmp);//輸出：196403075888
tmp=ID.substr(-3);console.log(tmp);//輸出：888
tmp=ID.substr(-4,2);console.log(tmp);//輸出：58截取身份證號的生日（substr.html）第一個參數表示準備截取的子字符串起始下標，第二個參數表示截取的長度；如果省略第二個參數，則表示截取從起始位置開始到結尾的所有字符；第一個參數為負值，則表示從字符串的尾部開始計算下標位置，即-1表示最后一個字符，-2表示倒數第二個字符，以此類推；字符串截取5varurl="/s";varindex1=url.indexOf("://")+3;varindex2=url.lastIndexOf("/");console.log(index1);//8console.log(index2);//21
console.log(url.substring(index1,index2));//輸出
console.log(url.substring(index2,index1));//輸出console.log(url.substring(index1));//輸出/sconsole.log(url.substring(-3));//輸出/s
console.log(url.slice(index1,index2));//輸出console.log(url.slice(index2,index1));//輸出空字符串console.log(url.slice(-3));//輸出m/s截取網址中的域名（substring.html）第一個參數表示起始下標，第二個參數表示結束下標。如果省略第二個參數，則表示截取從起始位置開始到結尾的所有字符；如果參數值為負值，substring()方法強行傳遞負數，在執(zhí)行時會被當成0處理。如果第一個參數值比第二個參數值大，substring()方法能夠在執(zhí)行截取之前先交換兩個參數第一個參數表示起始下標，第二個參數表示結束下標。與substring相同如果第一個參數值比第二個參數值大，對于slice()方法來說，則被無視為無效，并返回空字符串如果參數值為負值，slice()方法能夠把負號解釋為從右側開始定位while和dowhile循環(huán)6while(expr)statementwhile和dowhile循環(huán)6使用while輸出1-100之間的奇數（while.html）varn=1;//聲明并初始化循環(huán)變量while(n<=100){//循環(huán)條件
if(n%2==1)console.log(n); n++;//遞增循環(huán)變量}while和dowhile循環(huán)6dostatementwhile(expr)while和dowhile循環(huán)6使用do/while輸出1-100之間的奇數（dowhile.html）varn=1;//聲明并初始化循環(huán)變量do{if(n%2==1)console.log(n);n++;//遞增循環(huán)變量}while(n<=100)//循環(huán)條件動態(tài)修改網頁的代碼70102方法一：DOM元素操作在案例“百花爭妍”中有講到方法二：使用innerHTML屬性本節(jié)講述，注意與innerText的區(qū)別動態(tài)修改網頁的代碼7<head><script> functionmyFunction(){ x=document.getElementById("demo"); x.innerHTML="<spanstyle=''>hi,icandoit!</span>"; }</script></head><body> <pid="demo">js能夠改變html的代碼。</p> <buttontype="button"onclick="myFunction()">點擊這里</button></body>動態(tài)改變HTML代碼（innerHTML.html）動態(tài)修改網頁的代碼7動態(tài)改變元素內的文本（innerText.html）<head><script> functionmyFunction(){ x=document.getElementById("demo"); x.innerText="<spanstyle=''>hi,icandoit!</span>"; }</script></head><body> <pid="demo">js能夠改變這里的文本，但是不會解釋執(zhí)行HTML代碼。</p> <buttontype="button"onclick="myFunction()">點擊這里</button></body>完成本章綜合案例案例實現貳設計思路1金額轉換器設計上分為數字金額區(qū)、漢字金額顯示區(qū)、按鈕區(qū)，當點擊按鈕區(qū)數字鍵時輸入區(qū)的數字發(fā)生變化，同時漢字金額顯示區(qū)更新翻譯結果，如果輸入錯誤可以從后邊刪除錯誤的數字或者直接清空（即復位為0）。實現步驟--設計頁面架構2divspaninputspan10個button實現步驟--設計頁面架構2<divclass="area"><span>金額轉換器</span><inputtype="number"value="0"step='1'min='0'id="money"/><spanid="rst">0元</span><button>1</button><button>2</button><button>3</button><button>4</button><button>5</button><button>6</button><button>7</button><button>8</button><button>9</button><button>0</button><button>C</button><button>Back</button></div>實現步驟--美化元素2/*采用網格布局，把界面設計成7行3列的布局*/.area{display:grid;width:300px;height:700px;grid-template-columns:repeat(3,33.3%);grid-template-rows:repeat(7,100px);margin:auto;border:5pxsolid#99c965;padding:10px;background:#d5d1a4;}實現步驟--美化元素2/*標題和翻譯結果都水平居中，文字垂直居中*/.area>span{text-align:center;line-height:100px;}/*標題獨占一行，是通過跨3列的樣式實現的*/.area>span:first-child{grid-column-start:1;grid-column-end:4;background:#e0cc97;border:1pxsolid#ddd;margin-bottom:5px;}實現步驟--美化元素2/*金額的輸入框也是獨占一行，是通過跨3列的樣式實現的*/.area>input{grid-column-start:1;grid-column-end:4;}實現步驟--美化元素2/*翻譯后的漢字金額也獨占一行，是通過跨3列的樣式實現的*/.area>span:nth-child(3){grid-column-start:1;grid-column-end:4;background:#666;border:1pxsolid#ddd;margin:5px0px;color:#fff;}實現步驟--美化元素2經樣式處理后的效果圖實現步驟--事件的綁定2功能按鈕Back作用是刪除最后一位數字；功能按鈕C作用是清除所有輸入的數字，恢復為0；所有數字按鈕點擊時在數字的最后增加相對應的數字。這些按鈕共用一個事件處理函數。varmoney=document.querySelector("#money");//數字框varbtns=document.querySelectorAll('button');//獲取所有按鈕for(varbtnofbtns){//循環(huán)綁定按鈕單擊事件
btn.onclick=btnclick;//所有按鈕共享一個事件處理函數}functionbtnclick(e){vartxt=e.target.innerHTML;//獲取按鈕上的文字，作為處理的依據
if(txt=="Back"){//刪除最后一個數字的按鈕
if(money.value.length>1){money.value=money.value.substr(0,money.value.length-1);}}elseif(txt=="C"){//清空數字，即復位為0money.value=0;}else{//0-9的數字按鈕
if(money.value=="0")money.value=txt;elsemoney.
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年環(huán)路設備項目可行性研究報告
- 2025年導葉位置開關項目可行性研究報告
- 2025年單聯(lián)可調封閉電爐項目可行性研究報告
- 2025至2030年除焦油取樣探頭項目投資價值分析報告
- 2025至2030年金屬方型冷卻塔項目投資價值分析報告
- 2025至2030年虛擬實驗室系統(tǒng)項目投資價值分析報告
- 2025至2030年珍珠棉保護模墊項目投資價值分析報告
- 2025至2030年機油芯扳手項目投資價值分析報告
- 2025至2030年總線制火警電話盤項目投資價值分析報告
- 二零二五年時尚服裝品牌區(qū)域代理合同
- JT-T-1004.1-2015城市軌道交通行車調度員技能和素質要求第1部分：地鐵輕軌和單軌
- （高清版）WST 408-2024 定量檢驗程序分析性能驗證指南
- （正式版）JBT 11270-2024 立體倉庫組合式鋼結構貨架技術規(guī)范
- DB11∕T 2035-2022 供暖民用建筑室溫無線采集系統(tǒng)技術要求
- 《復旦大學》課件
- 針灸與按摩綜合療法
- 煤礦井下安全避險六大系統(tǒng)建設完善基本規(guī)范
- Photoshop 2022從入門到精通
- T-GDWJ 013-2022 廣東省健康醫(yī)療數據安全分類分級管理技術規(guī)范
- 校本課程生活中的化學
- DB43-T 2775-2023 花櫚木播種育苗技術規(guī)程
評論
0/150
提交評論