當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript基础11-day13【正则表达式(量词、语法、转义字符、元字符)、DOM(节点、事件)、图片切换】
生活随笔
收集整理的這篇文章主要介紹了
JavaScript基础11-day13【正则表达式(量词、语法、转义字符、元字符)、DOM(节点、事件)、图片切换】
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
學(xué)習(xí)地址：
JavaScript基礎(chǔ)、高級(jí)學(xué)習(xí)筆記匯總表【尚硅谷最新版JavaScript基礎(chǔ)全套教程完整版(140集實(shí)戰(zhàn)教學(xué),JS從入門到精通)】
目? ?錄
P88?88.尚硅谷_JS基礎(chǔ)_正則表達(dá)式語法?23:30
量詞
^表示開頭；$表示結(jié)尾
檢查合法手機(jī)號(hào)
P89?89.尚硅谷_JS基礎(chǔ)_正則表達(dá)式語法?23:46
元字符.：表示任意字符
檢查一個(gè)字符串中是否含有 .
檢查一個(gè)字符串中是否含有 \
轉(zhuǎn)義字符
其它重要元字符
1、\w：任意字母、數(shù)字、_ ?[A-z0-9_]? ?\W：除了字母、數(shù)字、_ ?[^A-z0-9_]
2、\d：任意的數(shù)字 [0-9]? ?\D：除了數(shù)字 [^0-9]
3、\s：空格? ?\S：除了空格
4、\b：單詞邊界? ?\B：除了單詞邊界
去除字符串前后空格
P90 90.尚硅谷_JS基礎(chǔ)_郵件的正則?12:02
P91?91.尚硅谷_JS基礎(chǔ)_DOM簡(jiǎn)介?24:01
什么是DOM？
節(jié)點(diǎn)
節(jié)點(diǎn)的屬性
文檔節(jié)點(diǎn)（document）
元素節(jié)點(diǎn)（Element）
文本節(jié)點(diǎn)（Text）
屬性節(jié)點(diǎn)（Attr）
事件
獲取元素節(jié)點(diǎn)
獲取元素節(jié)點(diǎn)的子節(jié)點(diǎn)
獲取父節(jié)點(diǎn)和兄弟節(jié)點(diǎn)
元素節(jié)點(diǎn)的屬性
其他屬性
使用CSS選擇器進(jìn)行查詢
節(jié)點(diǎn)的修改
P92?92.尚硅谷_JS基礎(chǔ)_事件的簡(jiǎn)介?13:21
事件句柄（Event Handlers）
P93?93.尚硅谷_JS基礎(chǔ)_文檔的加載?14:24
文檔加載，從上到下
onload事件
P94?94.尚硅谷_JS基礎(chǔ)_dom查詢?22:31
P95?95.尚硅谷_JS基礎(chǔ)_圖片切換的練習(xí) 26:06
P88?88.尚硅谷_JS基礎(chǔ)_正則表達(dá)式語法?23:30
量詞
- 通過量詞可以設(shè)置一個(gè)內(nèi)容出現(xiàn)的次數(shù)。
- 量詞只對(duì)它前邊的一個(gè)內(nèi)容起作用。
- {n}：正好出現(xiàn)n次。
- {m, n}：出現(xiàn)[m, n]次。
- {m,}：m次及以上。
- +：至少一個(gè)，相當(dāng)于{1,}。
- *：0個(gè)或多個(gè)，相當(dāng)于{0,}。
- ?：0個(gè)或1個(gè)，相當(dāng)于{0,1}。
??
^表示開頭；$表示結(jié)尾
如果在正則表達(dá)式中同時(shí)使用^ $，則要求字符串必須完全符合正則表達(dá)式。
??
檢查合法手機(jī)號(hào)
創(chuàng)建一個(gè)正則表達(dá)式，用來檢查一個(gè)字符串是否是一個(gè)合法手機(jī)號(hào)
手機(jī)號(hào)的規(guī)則：1 3 567890123 （11位）
^1? ? ? [3-9]? ? ? [0-9]{9}$
P89?89.尚硅谷_JS基礎(chǔ)_正則表達(dá)式語法?23:46
元字符.：表示任意字符
- . 表示任意字符
- 在正則表達(dá)式中使用\作為轉(zhuǎn)義字符
- \. 來表示.
- \\ ?表示\
檢查一個(gè)字符串中是否含有 .
檢查一個(gè)字符串中是否含有 \
轉(zhuǎn)義字符
注意：使用構(gòu)造函數(shù)時(shí)，由于它的參數(shù)是一個(gè)字符串，而\是字符串中轉(zhuǎn)義字符，如果要使用\則需要使用\\來代替。
其它重要元字符
1、\w：任意字母、數(shù)字、_ ?[A-z0-9_]? ?\W：除了字母、數(shù)字、_ ?[^A-z0-9_]
??
2、\d：任意的數(shù)字 [0-9]? ?\D：除了數(shù)字 [^0-9]
3、\s：空格? ?\S：除了空格
4、\b：單詞邊界? ?\B：除了單詞邊界
創(chuàng)建一個(gè)正則表達(dá)式檢查一個(gè)字符串中是否含有單詞child。
去除字符串前后空格
P90 90.尚硅谷_JS基礎(chǔ)_郵件的正則?12:02
- 電子郵件：hello ?.nihao ? ? ? ? ?@ ? ? abc ?.com.cn
- 任意字母數(shù)字下劃線 ? ?.任意字母數(shù)字下劃線 ?@ ? 任意字母數(shù)字 ? ? .任意字母（2-5位） ? .任意字母（2-5位）
- \w{3,} ?(\.\w+)* ?@ ?[A-z0-9]+ ?(\.[A-z]{2,5}){1,2}
P91?91.尚硅谷_JS基礎(chǔ)_DOM簡(jiǎn)介?24:01
什么是DOM？
節(jié)點(diǎn)
- 節(jié)點(diǎn)：Node——構(gòu)成HTML文檔最基本的單元。
- 常用節(jié)點(diǎn)分為四類
節(jié)點(diǎn)的屬性
瀏覽器已經(jīng)為我們提供 文檔節(jié)點(diǎn) 對(duì)象，這個(gè)對(duì)象是window屬性，可以在頁面中直接使用，文檔節(jié)點(diǎn)代表的是整個(gè)網(wǎng)頁。
文檔節(jié)點(diǎn)（document）
元素節(jié)點(diǎn)（Element）
文本節(jié)點(diǎn)（Text）
屬性節(jié)點(diǎn)（Attr）
事件
獲取元素節(jié)點(diǎn)
- 通過document對(duì)象調(diào)用
獲取元素節(jié)點(diǎn)的子節(jié)點(diǎn)
通過具體的元素節(jié)點(diǎn)調(diào)用
獲取父節(jié)點(diǎn)和兄弟節(jié)點(diǎn)
通過具體的節(jié)點(diǎn)調(diào)用
元素節(jié)點(diǎn)的屬性
其他屬性
使用CSS選擇器進(jìn)行查詢
節(jié)點(diǎn)的修改
這里的修改我們主要指對(duì)元素節(jié)點(diǎn)的操作。
P92?92.尚硅谷_JS基礎(chǔ)_事件的簡(jiǎn)介?13:21
事件句柄（Event Handlers）
事件，就是用戶和瀏覽器之間的交互行為，比如：點(diǎn)擊按鈕，鼠標(biāo)移動(dòng)、關(guān)閉窗口...
我們可以在事件對(duì)應(yīng)的屬性中設(shè)置一些js代碼，這樣當(dāng)事件被觸發(fā)時(shí)，這些代碼將會(huì)執(zhí)行。
這種寫法我們稱為結(jié)構(gòu)和行為耦合，不方便維護(hù)，不推薦使用。
P93?93.尚硅谷_JS基礎(chǔ)_文檔的加載?14:24
文檔加載，從上到下
瀏覽器在加載一個(gè)頁面時(shí)，是按照自上向下的順序加載的，讀取到一行就運(yùn)行一行。
如果將script標(biāo)簽寫到頁面的上邊，在代碼執(zhí)行時(shí)，頁面還沒有加載，頁面沒有加載 DOM對(duì)象也沒有加載，會(huì)導(dǎo)致無法獲取到DOM對(duì)象。
??
onload事件
js代碼，寫下面比較好一些。
先加載頁面，再加載代碼。頁面先出來，再執(zhí)行代碼。
P94?94.尚硅谷_JS基礎(chǔ)_dom查詢?22:31
獲取元素節(jié)點(diǎn)
dom查詢練習(xí)【1~3】
?
??
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><!-- <link rel="stylesheet" type="text/css" href="style/css.css" /> --><style type="text/css">@CHARSET "UTF-8";body {width: 800px;margin-left: auto;margin-right: auto;}button {width: 300px;margin-bottom: 10px;}#btnList {float: left;}#total {width: 450px;float: left;}ul {list-style-type: none;margin: 0px;padding: 0px;}.inner li {border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float: left;}.inner {width: 400px;border-style: solid;border-width: 1px;margin-bottom: 10px;padding: 10px;float: left;}</style><script type="text/javascript">window.onload = function() {//為id為btn01的按鈕綁定一個(gè)單擊響應(yīng)函數(shù)var btn01 = document.getElementById("btn01");btn01.onclick = function() {//查找#bj節(jié)點(diǎn)var bj = document.getElementById("bj");//打印bj//innerHTML 通過這個(gè)屬性可以獲取到元素內(nèi)部的html代碼alert(bj.innerHTML);};//為id為btn02的按鈕綁定一個(gè)單擊響應(yīng)函數(shù)var btn02 = document.getElementById("btn02");btn02.onclick = function() {//查找所有l(wèi)i節(jié)點(diǎn)//getElementsByTagName()可以根據(jù)標(biāo)簽名來獲取一組元素節(jié)點(diǎn)對(duì)象//這個(gè)方法會(huì)給我們返回一個(gè)類數(shù)組對(duì)象，所有查詢到的元素都會(huì)封裝到對(duì)象中//即使查詢到的元素只有一個(gè)，也會(huì)封裝到數(shù)組中返回var lis = document.getElementsByTagName("li");//打印lis//alert(lis.length);//變量lisfor (var i = 0; i < lis.length; i++) {alert(lis[i].innerHTML);}};//為id為btn03的按鈕綁定一個(gè)單擊響應(yīng)函數(shù)var btn03 = document.getElementById("btn03");btn03.onclick = function() {//查找name=gender的所有節(jié)點(diǎn)var inputs = document.getElementsByName("gender");// alert(inputs.length); // 2for (var i = 0; i < inputs.length; i++) {/** innerHTML用于獲取元素內(nèi)部的HTML代碼的。* 對(duì)于自結(jié)束標(biāo)簽<input/>，這個(gè)屬性沒有意義*/// alert(inputs[i].innerHTML);/** 如果需要讀取元素節(jié)點(diǎn)屬性，* 直接使用 元素.屬性名* 例子：元素.id、元素.name、元素.value* 注意：class屬性不能采用這種方式，【class保留字】* 讀取class屬性時(shí)需要使用 元素.className*/alert(inputs[i].className);alert(inputs[i].type);alert(inputs[i].name);alert(inputs[i].value);}};//查找#city下所有l(wèi)i節(jié)點(diǎn)//返回#city的所有子節(jié)點(diǎn)//返回#phone的第一個(gè)子節(jié)點(diǎn)//返回#bj的父節(jié)點(diǎn)//返回#android的前一個(gè)兄弟節(jié)點(diǎn)//讀取#username的value屬性值//設(shè)置#username的value屬性值//返回#bj的文本值};</script></head><body><div id="total"><div class="inner"><p>你喜歡哪個(gè)城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>東京</li><li>首爾</li></ul><br><br><p>你喜歡哪款單機(jī)游戲?</p><ul id="game"><li id="rl">紅警</li><li>實(shí)況</li><li>極品飛車</li><li>魔獸</li></ul><br /><br /><p>你手機(jī)的操作系統(tǒng)是?</p><ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul></div><div class="inner">gender:<input class="hello" type="radio" name="gender" value="male" />Male<input class="hello" type="radio" name="gender" value="female" />Female<br><br>name:<input type="text" name="name" id="username" value="abcde" /></div></div><div id="btnList"><div><button id="btn01">查找#bj節(jié)點(diǎn)</button></div><div><button id="btn02">查找所有l(wèi)i節(jié)點(diǎn)</button></div><div><button id="btn03">查找name=gender的所有節(jié)點(diǎn)</button></div><div><button id="btn04">查找#city下所有l(wèi)i節(jié)點(diǎn)</button></div><div><button id="btn05">返回#city的所有子節(jié)點(diǎn)</button></div><div><button id="btn06">返回#phone的第一個(gè)子節(jié)點(diǎn)</button></div><div><button id="btn07">返回#bj的父節(jié)點(diǎn)</button></div><div><button id="btn08">返回#android的前一個(gè)兄弟節(jié)點(diǎn)</button></div><div><button id="btn09">返回#username的value屬性值</button></div><div><button id="btn10">設(shè)置#username的value屬性值</button></div><div><button id="btn11">返回#bj的文本值</button></div></div></body> </html>P95?95.尚硅谷_JS基礎(chǔ)_圖片切換的練習(xí) 26:06
??
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}#outer {width: 500px;margin: 50px auto;padding: 10px;background-color: greenyellow;text-align: center; /* 設(shè)置文本居中 */}</style><script type="text/javascript">window.onload = function() {/** 點(diǎn)擊按鈕切換圖片*///獲取兩個(gè)按鈕var prev = document.getElementById("prev");var next = document.getElementById("next");/** 要切換圖片就是要修改img標(biāo)簽的src屬性*///獲取img標(biāo)簽var img = document.getElementsByTagName("img"); // 獲取集合var img = document.getElementsByTagName("img")[0]; // 取出集合的第1個(gè)元素//創(chuàng)建一個(gè)數(shù)組，用來保存圖片的路徑var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];//創(chuàng)建一個(gè)變量，來保存當(dāng)前正在顯示的圖片的索引var index = 0;//獲取id為info的p元素var info = document.getElementById("info");//設(shè)置提示文字info.innerHTML = "一共 " + imgArr.length + " 張圖片，當(dāng)前第 " + (index + 1) + " 張";//分別為兩個(gè)按鈕綁定單擊響應(yīng)函數(shù)prev.onclick = function() {index--; // 切換到上一張時(shí)，索引index自減if (index < 0) { // 判斷index是否小于0index = imgArr.length - 1;}img.src = imgArr[index];//當(dāng)點(diǎn)擊按鈕以后，重新設(shè)置信息info.innerHTML = "一共 " + imgArr.length + " 張圖片，當(dāng)前第 " + (index + 1) + " 張";};next.onclick = function() {index++; // 切換到下一張時(shí)，索引index自增if (index > imgArr.length - 1) {index = 0;}//切換圖片就是修改img的src屬性//要修改一個(gè)元素的屬性 元素.屬性 = 屬性值img.src = imgArr[index];//當(dāng)點(diǎn)擊按鈕以后，重新設(shè)置信息info.innerHTML = "一共 " + imgArr.length + " 張圖片，當(dāng)前第 " + (index + 1) + " 張";};};</script></head><body><div id="outer"><p id="info"></p><img src="img/1.jpg" alt="冰棍" /><button id="prev">上一張</button><button id="next">下一張</button></div></body> </html>2021年1月18日、2021年1月19日，這兩天又沒學(xué)習(xí)（看小說）。得趕緊學(xué)習(xí)。希望能好好學(xué)習(xí)~
2021年1月20日晚，看完了正則表達(dá)式，該看dom了，21號(hào)再看dom。早睡早起~
? ?終于看完了，沖沖沖~
與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的JavaScript基础11-day13【正则表达式(量词、语法、转义字符、元字符)、DOM(节点、事件)、图片切换】的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript基础09-day11
- 下一篇： JavaScript基础12-day14