01-HTML+CSS+JS【常用总结+案例练习】
生活随笔
收集整理的這篇文章主要介紹了
01-HTML+CSS+JS【常用总结+案例练习】
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
文章目錄
- HTML
- 第一部分
- 第二部分
- 第三部分
- 總結(jié)
- CSS
- 選擇器
- 常用樣式
- 總結(jié)
- JavaScript
- ECMA Script
- 基本語法
- JS對象
- BOM瀏覽器對象模型
- DOM文檔對象模型
- 事件
- 案例：
- 案例1-注冊表單校驗
- 案例2-5秒后跳轉(zhuǎn)到百度官網(wǎng)
- 案例3-全選和全不選和反選
- 案例4-省市二級聯(lián)動
- 案例5-表格隔行換色
- 案例6-輪播圖
- 案例7-定時彈廣告
- 案例8-會跳動的時鐘
不要死記硬背，要學會運用，案例驅(qū)動，通過案例學習
不要死記硬背，要學會運用，案例驅(qū)動，通過案例學習
不要死記硬背，要學會運用，案例驅(qū)動，通過案例學習
前端知識點 細，碎，多
HTML 網(wǎng)頁的骨架，用來書寫網(wǎng)頁的。 Css 美化網(wǎng)頁的。 javaScript 網(wǎng)頁的靈魂，用來交互前端頁面和后臺服務(wù)器之間的數(shù)據(jù)的，沒有js。那么html+css就是一個靜態(tài)頁面，不會和后臺服務(wù)器進行數(shù)據(jù)的交互。開發(fā)中也就沒有什么意義了。HTML
HTML：**超文本標記語言**（HyperText Markup Language）它通過標記符號來標記要顯示的網(wǎng)頁中的各個部分。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網(wǎng)頁文件，然后根據(jù)標記符解釋和顯示其標記的內(nèi)容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執(zhí)行過程。補充：網(wǎng)頁存放在服務(wù)器上，運行在瀏覽器上，運行之前先從服務(wù)器上下載到本地，在本地瀏覽器上解析。 Html5 2014年10月29日，萬維網(wǎng)聯(lián)盟 ,經(jīng)過8年的努力制定的HTML5標準規(guī)范目前支持的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari(蘋果系統(tǒng))，Opera等。**不同的瀏覽器之間是有差異，同一個網(wǎng)頁運行可能會不同。** 網(wǎng)頁內(nèi)容包含： HTML代碼、CSS代碼、JavaScript代碼等內(nèi)容。 1)HTML代碼： 結(jié)構(gòu)層（好比人的骨骼/身體） 負責從語義的角度搭建頁面結(jié)構(gòu) 2)CSS代碼： 表現(xiàn)層（好比人的穿衣打扮） 負責從審美的角度美化頁面 3)JavaScript代碼： 行為層（好比一個人能歌善舞） 負責從交互的角度提升用戶體驗。網(wǎng)頁根據(jù)內(nèi)容是否改變分為：靜態(tài)頁面、動態(tài)頁面 4)靜態(tài)頁面：編寫之后在瀏覽器不再改變的網(wǎng)頁。HTML就是用于編寫靜態(tài)網(wǎng)頁的。 5)動態(tài)頁面：會根據(jù)不同的情況展示不同的內(nèi)容。例如：登錄成功后右上角顯示用戶名。 HTML的特點： 1、 HTML文件不需要編譯，直接使用瀏覽器解析即可。 2、 HTML文件的擴展名是*.html 或 *.htm。 3、 HTML結(jié)構(gòu)都是由標簽組成。 4、 標簽名預(yù)先定義好的，我們只需要了解其功能即可。1) 標簽名不區(qū)分大小寫，通常都是小寫。2) 通常情況下標簽由開始標簽和結(jié)束標簽組成。叫做雙標簽。例如：<a>www.baidu.com</a> 超鏈接3) 如果沒有結(jié)束標簽，建議以/結(jié)尾。叫做單標簽。例如：<img src="" width="" height="" />img： 稱為標簽名5、 HTML結(jié)構(gòu)包括兩部分：頭head和體body。 HTML屬性特點： 1、 HTML屬性一般都出現(xiàn)在HTML標簽中, 是HTML標簽的一部分。 2、 標簽可以有屬性,它包含了額外的信息.屬性的值一定要在雙引號中。 3、 標簽可以擁有多個屬性。 4、 一般屬性由屬性名和屬性值成對組成的。 例如： <!-- 定義一張圖片，并設(shè)置圖片的寬度和高度--> <img src="images/baby.jpg" width="80" height="50"/>第一部分
`標題標簽 h1.在html中，標題標簽使用hn表示，n的取值范圍是1-6，標題字體依次變小2.標題標簽特點：1）單獨占一行，在html中只要單獨占一行的標簽稱為塊級標簽2）標題標簽是加粗的`水平線 hr1.水平線標簽使用 hr2.水平線標簽屬于單標簽3.hr水平線標簽的屬性：1）size:表示水平線的大小即高度2）noshade="noshade" :表示沒有陰影，即實心，默認是空心的`字體標簽 font1 在html中字體標簽使用 font表示2 在html5后，字體標簽font過時了，但是所有的瀏覽器依然識別3 font字體標簽常見的屬性：1）color:表示字體顏色.color屬性值取值可以有兩種寫法：a:直接書寫英文單詞b:可以使用十六進制方式來表示，表示格式：#RGB, r :紅色 g : 綠色 b: 藍色 建議然后每種顏色使用兩個數(shù)字表示。舉例：紅色： #ff 00 00R G B藍色：#00 00 ff綠色：#00 ff 002)size:表示字體大小：取值1-7，超過最大按照7顯示，小于1，按照1顯示.默認大小是3px3)face:表示字體樣式。宋體 楷體等`格式化標簽:1.加粗標簽：b2.傾斜標簽: i`段落和換行標簽：1.段落標簽：p.每個文字段落之間都會有留白(空白)，單獨占一行，屬于塊級標簽 雙標簽2.換行標簽：br 每段文字可以實現(xiàn)換行，每一行之間沒有留白 單標簽`特殊字符實體標簽：1.在html中所有的特殊字符實體標簽的格式：&開始，;結(jié)尾2.舉例：< < less than> > greater than空格 版權(quán)符號：© ? 2003-現(xiàn)在 Taobao.com 版權(quán)所有人民幣符號：¥`顯示圖片的標簽img 屬性： 1.src:表示引入的圖片的服務(wù)器地址1)src="../img/美女.jpg" : ..表示當前頁面demo01.html的父目錄：c_img_032)然后找到c_img_03的同級目錄：img3)img/美女.jpg:找到img下面的美女.jpg 2.alt:如果加載圖片失敗，顯示alt中的屬性值內(nèi)容 3.title:表示鼠標放到圖片上的說明 4.width:圖片寬度 5.height:圖片高度 6.border:圖片邊框`無序列表標簽ul 說明： 1.無序列表標簽ul單獨使用沒有意義，必須借助于子標簽li一起使用 2.ul具有一個常見的屬性：type,具有三個屬性值1）disc:默認的，表示實心圓2）square:表示實心正方形3) circle:表示空心圓ul>li*4 按tab鍵 快速生成無序的四個列表`有序列表標簽ol 說明： 1.有序列表標簽ol單獨使用沒有意義，必須借助于子標簽li一起使用 2.ol具有一個常見的屬性：type,具有屬性值:1)1:默認的，數(shù)字2)a:小寫字母3)A:大寫字母4)i:羅馬數(shù)字5)I:羅馬數(shù)字`超鏈接標簽：a 屬性：1.href:要跳轉(zhuǎn)的服務(wù)器地址2.target:以何種方式打開要跳轉(zhuǎn)的新頁面：1）_blank:新的窗口打開2）_self:覆蓋當前頁面，屬于默認的打開方式 a標簽實現(xiàn)空連接：不能跳轉(zhuǎn)1.<a href="#"> 這種不建議使用2.javascript:void(0); 表示使用我們后面學習的語言javascript中的空函數(shù)void(0)3.javascript: 建議使用 a標簽的錨點連接 例如： <a href="#maodian">找錨點</a>======================================================================================================。。。。。。省略一萬行============== <a name="maodian">錨點在這呢</a>====== `表格標簽 1)<table>表格標簽border表格邊框的寬度width表格的寬度height表格的高度cellpadding單元格邊沿與其內(nèi)容之間的空白cellspacing單元格之間的空白bgcolor :background color表格的背景顏色 2) <tr>表格中的行標簽align單元格內(nèi)容的水平對齊方式,取值：left 左 、right 右、center 居中 3)<td>表格中一行中的列標colspan單元格可橫跨的列數(shù)(橫向合并單元格)columnrowspan單元格可橫跨的行數(shù)(縱向合并單元格)align單元格內(nèi)容的水平對齊方式,取值：left 左 、right 右、center 居中（了解）表格標簽的子標簽：1.整個表格的標題：caption2.tbody:表格體標簽,默認就存在的<table border="1px" cellpadding="0px" cellspacing="0px" width="400px" height="400px"><!--整個表格的標題：caption--><caption>聯(lián)系人</caption><!--表格體標簽--><tbody><tr><th>姓名</th><!--表示跨2列，手機號占第2 3列--><th colspan="2">手機號</th><!--<th>手機號</th>--></tr><tr><td>張三</td><td>138000000000</td><td>138000000001</td></tr><tr><td>李四</td><td>139000000000</td><td>139000000001</td></tr></tbody></table>第二部分
`form表單標簽1.單獨存在無意義，必須借助于子標簽，子標簽內(nèi)容必須書寫在form標簽文本中，否則后臺無法獲取到前端瀏覽器提交的數(shù)據(jù)2.form表單標簽常見屬性：1）action="提交數(shù)據(jù)到服務(wù)器的地址"2）method="前端瀏覽器提交到后臺服務(wù)器數(shù)據(jù)的提交方式" 注意： 1.常見的提交方式有兩種：get post 2.如果不書寫提交方式，默認是get請求方式，對于post請求方式必須書寫post 3.get和post的請求方式區(qū)別：a:get請求的數(shù)據(jù)放到請求服務(wù)器的地址后面：例如：http://www.baidu.com?username=zhangsan&password=1234get請求缺點：不安全 所有數(shù)據(jù)都放到url后面，大小有限制 只能傳輸字符數(shù)據(jù)get優(yōu)點：快 可以作為商品分享b:post請求的數(shù)據(jù)不放到請求服務(wù)器的地址后面：數(shù)據(jù)放到請求體中http://www.baidu.compost請求缺點：慢post請求優(yōu)點：1）安全2）可以傳輸?shù)臄?shù)據(jù)沒有限制 可以傳輸圖片 音頻 視頻`input標簽： 屬性： 1.type屬性,常見的屬性值：1）text:input輸入標簽的文本，默認的2）password:密碼框 加密2) email:郵件框3）radio：單選按鈕4）checkbox:復選框(多選)5）file:表示上傳的文件6) image:上傳的圖片 了解7) hidden：隱藏域，不在頁面中顯示，但是可以使用8) submit:提交按鈕 通過value屬性來顯示顯示的值9) reset：重置10）button ：提交按鈕，后續(xù)可以使用js操作等 2.name屬性：1）使用在單選按鈕上，多個單選按鈕的name屬性值相同，那么就會實現(xiàn)只能選擇一個的效果2）在實際開發(fā)中我們必須給input標簽書寫name屬性，后臺服務(wù)器就可以通過name屬性值獲取輸入框的value屬性值 3.value屬性，后臺服務(wù)器獲取的就是value屬性對于輸入框輸入的值就是value屬性值 4.checked屬性：使用在單選按鈕和復選框中，表示默認被選中使用：checked="checked" 或者在input標簽中直接書寫checked 5.disabled：使得按鈕不能操作，使用在單選按鈕和復選框使用：disabled="disabled" 或者在input標簽中直接書寫disabled 6.readonly:只讀，一般使用在輸入框中 7.maxlength：允許輸入的最大長度<input type="image" src="../img/美女.jpg"> 兩種方式都可以顯示圖片 <img src="../img/美女.jpg" alt="">`select下拉框標簽：1.單獨存在沒有意義，需要使用子標簽：option表示下拉框的選項，有幾個選項就書寫幾個option2.select標簽的屬性：1)name屬性：后臺可以通過name屬性值獲取當前下拉框被選中項的value屬性值舉例：當前頁面被選中的是碩士，那么后臺可以根據(jù)edu獲取碩士的value屬性值sh2)size:下拉框每次顯示的選項個數(shù)3)multiple="multiple" 表示下拉框可以展示多個選項3.子標簽option屬性：1）value屬性：必須書寫，如果不書寫，后臺獲取的就是option的文本值2) selected="selected" 表示頁面一加載下拉框被選中的項eg:<form action="#" method="get"><!--<select name="edu" size="2">--><!--<select name="edu" multiple="multiple">--><select name="edu"><option value="">-----------請選擇學歷-----------</option><option value="bs">博士</option><option value="sh">碩士</option><option value="bk" selected="selected">本科</option><option value="zk">專科</option></select></form>`文本域標簽：textarea `按鈕標簽：button<form action="#"><!--文本域標簽：textarea:由行和列組成-->自我描述：<br><textarea rows="10" cols="20"></textarea><!--按鈕標簽：button常見屬性type具有屬性值：1.submit ：提交表單2.button：提交按鈕，后續(xù)可以使用js操作3.reset ：重置注意：上述三個屬性值顯示的內(nèi)容在標簽的文本中指定--><button type="submit">登錄</button><button type="button">注冊</button><button type="reset">重置</button> </form>`label標簽【可以實現(xiàn)通過文本選中某個指定的標簽】 比較常見的應(yīng)用場景是單選按鈕。說明：使用label標簽的for屬性值引用要定位的標簽的id屬性值。就是for屬性值必須和id屬性值一致 eg: <form action="#"> 性別： <input type="radio" name="sex" id="male"><label for="male">男</label> <input type="radio" name="sex" id="female"><label for="female">女</label> </form> `html5后對于input標簽的type新增的屬性值 <form action="#"><!--顯示日歷年月日--><input type="date"><input type="color"><input type="datetime-local"><!--郵箱校驗--><input type="email"><!--只能輸入數(shù)字--><input type="number"><!--表示查找--><input type="search"><input type="submit"> </form>第三部分
div標簽：主要結(jié)合css技術(shù)用來頁面的布局，單獨使用沒有效果，屬于塊級標簽p標簽屬于塊級標簽，具有留白span標簽：單獨使用沒有意義，和css一起使用，可以設(shè)置字體樣式，從html5后取代了font. span標簽屬于行內(nèi)標簽(共處一行的標簽：input span a等)總結(jié)
第一章、HTML概述1、HTML：超文本標簽語言 標簽語言，超文本(文本，音頻，視頻....)2、作用：編寫網(wǎng)頁3、HTML文件：【1】后綴名: .html .htm【2】書寫內(nèi)容： 普通文本，標簽【3】運行： 瀏覽器運行html4、HTML文件基本結(jié)構(gòu)：【1】文檔聲明： <!doctype html>【2】根標簽： <html></html>【3】頭部，主體： head標簽 body標簽第二章、標簽和屬性1、標簽組成： <標簽名> 標簽體 </標簽名> <br>2、分類：【1】是否有標簽體：雙標簽 ，單標簽【2】是否會換行： 塊標簽，內(nèi)聯(lián)標簽3、標簽屬性： <font color="red">傳智播客</font>屬性寫法： 開始標簽內(nèi)部 屬性名="屬性值"作用：給標簽添加額外的修飾效果4、學習HTML：知道標簽的基本作用知道標簽的常用屬性第三章、常用標簽1、新聞字體標簽：修飾文章【1】標題標簽 h標簽分類：h1~h6特點：1、給文字設(shè)置標題； 2、獨占一行，文字加粗效果屬性：align:水平對齊方式 left,center,right【2】水平線標簽： hr標簽作用：在頁面上設(shè)置水平線，區(qū)分標題和正文屬性：noshade="noshade"color="red"size="數(shù)字"【3】文字效果： font<font color="red" size="7" face="楷體">傳智播客</font> 【4】加粗/傾斜： <b><i>文字</i></b>【5】換行標簽： br【6】段落標簽： p2、特殊字符：字符實體空格： 大于： >小于： <。。。。。。。。。。。。。。。。3、列表和超鏈接：列表： ul>li ol>li超鏈接：a【1】作用：超鏈接，錨點定位，空鏈接【2】超鏈接：<a href="url" target="_blank">百度</a>3、圖片標簽：img【1】作用：在頁面上引入一張圖片【2】屬性：<img src="../../img/1.jpg" width="200px" height="50%" alt="提示信息" title="標題">4、表格標簽：table【1】作用：數(shù)據(jù)表格--格式化展示數(shù)據(jù) 頁面布局（table,div+css）【2】組成：table：tr：td：th：【3】其他標簽：標題： <caption>表格標題</caption>thead tbody tfoot【4】屬性：border="1px"width="寬度"height="高度"cellspacing="0"cellpadding="10px"【5】跨行跨列表格：跨行： rowspan="2" 從上到下跨列： colspan="2" 從左到右第四章、form表單【1】form表單的作用：提供一系列的組件，收集用戶在頁面上輸入或者選擇的數(shù)據(jù)；把數(shù)據(jù)提交給服務(wù)器；【2】form標簽：action="url"：設(shè)置提交數(shù)據(jù)的地址method="get/post"： post【3】表單項：子標簽input：用戶名： <input type="text" name="userName"> 文本框密碼： <input type="password" name="pwd"> 密碼框性別： 男<input type="radio" name="gender" checked value="男"> .....愛好： 唱 <input type="checkbox" name="hobby" checked value="唱"> .......隱藏域： <input type="hidden" name="id" value="1001" > 文件上傳： <input type="file" name="file">select：下拉框城市： <select name="city" multiple ><option value="sh">上海</option><option value="bj" selected>北京</option></select>textarea：文本域個人簡介：<textarea name="desc" rows="10" cols="20"></textarea>按鈕：input類按鈕：提交按鈕： <input type="submit" value="注冊">圖片提交： <input type="image" src="url" >重置： <input type="reset" >重置用戶輸入的內(nèi)容普通按鈕： <input type="button" value="普通按鈕">button類：<button>注冊</button> 提交表單數(shù)據(jù)H5的新特性： input標簽的 type日期： <input type="date"> 日期插件數(shù)字： <input type="number">數(shù)字email：<input type="email">CSS
選擇器
CSS 通常稱為CSS樣式或?qū)盈B樣式表，又稱之為網(wǎng)頁的美容師，主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體、大小、對齊方式等）、圖片的外形（高寬、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。CSS+DIV布局更佳靈活，更容易繪制出用戶需要的結(jié)構(gòu)。CSS (Cascading Style Sheets) ：指層疊樣式表樣式： 給HTML標簽添加需要顯示的效果。層疊： 使用不同的添加方式，給同一個HTML標簽添加樣式，最后所有的樣式都疊加到一起，共同作用于該標簽。 `樣式的屬性： 字體顏色：color 字體大小：font-size 邊框：border：border-width border-style border-color 注意：這里的像素單位px不能省略，省略，效果就不會出現(xiàn)了。border: 1px solid red;`CSS和HTML結(jié)合的方式 方式一：使用HTML標簽的style屬性（行內(nèi)） <div style="color: yellow;font-size: 100px;border-width: 1px;border-style: solid;border-color: red">div哈哈哈</div>方式二：在head標簽使用style標簽設(shè)置（內(nèi)部）<style type="text/css">/*書寫css樣式作用div標簽*/div{/*字體為黃色*/color: yellow;/*字體大小100px*/font-size: 100px;/*邊框為 1px 實線 邊框顏色為紅色*/border: 1px solid red;}</style>方式三：在head標簽中使用link標簽（外部）(掌握)1.rel="stylesheet" 表示層疊樣式表，不能省略2.type="text/css" 表示引入文件的類型是css文件，可以省略3.href="../css/demo01.css" 引入外部的css文件路徑 <link rel="stylesheet" type="text/css" href="css文件路徑" />選擇器 (理解) `**標簽名選擇器** ：作用在當前頁面的所有該名稱標簽上的。 格式 具體標簽名稱{css代碼; } 例如： div{color:red;font-size: 100px;background-color: yellow;border:1px solid blue; }`id選擇器 作用于某一個特定的標簽上。根據(jù)指定標簽的id來設(shè)置css樣式。 說明：一個頁面中要求id的屬性值唯一。不能重復。 格式： #ID選擇器的名稱 ｛css代碼； ｝ <標簽名 id=” ID選擇器的名稱” />`class選擇器 作用在一組標簽之上。 說明：ID選擇器只能作用單個標簽。而class選擇器可以作用在單個或者多個標簽上。 格式： .class選擇器的名稱 ｛css代碼； ｝ <標簽名 id=” ID選擇器的名稱” />`組合選擇器 應(yīng)用場景：如果頁面不同的選擇器想使用相同的css樣式。 組合選擇器可以使用任意的選擇器來組合，個數(shù)可以任意個。 格式 選擇器1, 選擇器2... {css代碼 }`關(guān)聯(lián)選擇器 格式 父標簽的選擇器 后代標簽選擇器｛css代碼； ｝ 例如：通過id為a的標簽找到下面的所有的span標簽，也就是說，關(guān)聯(lián)選擇器更加強調(diào)的是通過父親查找孩子<style type="text/css">#a span {color: yellow;font-size: 50px;border: 1px solid red;} </style><div id="a"><span>我是span1</span><span>我是span2</span> </div><span>我是span3</span><span>我是span4</span> <div><span>我是span5</span><span>我是span6</span> </div>`屬性選擇器(了解) 屬性選擇器是在原有選擇器的基礎(chǔ)上，通過**標簽的屬性**，再次對標簽進行篩選。 格式 選擇器名[屬性名="屬性值"] {css樣式； }常用樣式
`邊框和尺寸 1、border ：設(shè)置邊框的樣式。1） 格式：border：邊框?qū)挾?span id="ze8trgl8bvbq" class="token punctuation">(border-width) 邊框樣式 邊框顏色。2）例如：style="border:1px solid #f00" 表示1像素實邊紅色。邊框樣式取值：solid 實線，none 無邊，dashed虛線 等。2、width、height：用于設(shè)置標簽的寬度、高度。 格式： width:標簽具體的寬度。 height:標簽具體的高度。`轉(zhuǎn)換：display(掌握) HTML提供豐富的標簽，這些標簽被定義成了不同的類型，一般分為：塊標簽和行內(nèi)標簽。 1、塊標簽：以區(qū)域塊方式出現(xiàn)。每個塊標簽獨自占據(jù)一整行或多整行。1）常見的塊元素：<h1>、<div>、<ul>等2）默認可以設(shè)置高度和寬度 2、行內(nèi)元素：不必在新的一行開始，同時也不強迫其他元素在新的一行顯示。1）常見的行內(nèi)元素：<span>、<a> 等2）設(shè)置高度和寬度無效在開發(fā)中，如果希望行內(nèi)元素具有塊元素的特性，或者希望塊元素具有行內(nèi)元素的特性。 也就是希望行內(nèi)元素和塊元素之間相互轉(zhuǎn)換。 需要使用display屬性將**行內(nèi)元素轉(zhuǎn)換成塊級元素** 或者將**塊級元素轉(zhuǎn)換為行內(nèi)元素**。選擇器 {display : 屬性值 } 常用的屬性值：inline：此元素將顯示為行內(nèi)元素（行內(nèi)元素默認的display屬性值）block：此元素將顯為塊元素（塊元素默認的display屬性值）none：此元素將被隱藏，不顯示，也不占用頁面空間。`字體：color、line-height color： 顏色 字體顏色 line-height: 行高 設(shè)置行高`背景 background-color： 顏色; 設(shè)置元素的背景顏色 background-image : url(圖片的路徑地址); background-repeat: 背景平鋪方式; 背景平鋪方式取值： no-repeat： 不平鋪 repeat-x ： 橫向平鋪 repeat-y ： 縱向平鋪 注意：圖片默認是平鋪滿整個盒子的`邊框(盒模型)(了解) 1、 盒子模型有哪些部分組成 元素的內(nèi)容(高度、寬度)、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成 。 2、 盒子模型大小受哪些部分影響 盒子模型的大小受元素的內(nèi)容(高度、寬度)、內(nèi)邊距（padding）、邊框（border）的影響，不受外邊距的影響 3、外邊距影響在頁面中的位置總結(jié)
1、CSS作用：美化HTML頁面（給html標簽添加樣式）;2、CSS選擇器：【1】基本選擇器：id選擇器： #id值{樣式} 選中頁面唯一標簽class選擇器： .class屬性值{ 樣式 }元素選擇器： div{ }通用（選擇所有）： *{ }【2】擴展選擇器：層級選擇器： div span{}屬性過濾： input[type='text']{}【3】其他：并集（組合）： div,span{}交集（同時滿足）： div#myDiv{}偽類（操作狀態(tài)）：a:link{} 默認狀態(tài)a:active{} 正在被點擊a:visited{} 已經(jīng)被點擊過一次a:hover{} 鼠標懸浮在元素上面3、常用樣式：【1】文本樣式：color:yellowtext-align:centertext-indent: 2emtext-decoration: none,underline【2】文字樣式：font-size:100pxfont-family:楷體font-style:italicfont-weight:bold【3】背景：background-color:redbackground-image:url("../img/1.jpg")background-repeat: no-repeat 【4】邊框：border: 1px solid red;border-radius: 5px【5】盒子模型：盒子模型內(nèi)容：邊框：border（4個邊）內(nèi)容：內(nèi)邊距：padding(4個)外邊距：margin(4個)設(shè)置塊元素水平居中： margin:auto;JavaScript
作用：用于開發(fā)交互式的web頁面 1995年時，Netscape（網(wǎng)景）公司推出Navigator瀏覽器 網(wǎng)景公司大牛Brendan Eich（布蘭登·艾奇）據(jù)說用了10天就把JavaScript搞了出來，剛出來叫LiveScript 微軟參考JavaScript弄了個名為JScript瀏覽器腳本語言 1997年弄出了ECMAScript作為標準。這里ECMAscript和JavaScript可以看做表達的同一個東西。 **JavaScript特點** 1. 它不需要進行編譯，而是直接嵌入在HTML頁面中，**由瀏覽器執(zhí)行**。 2. JavaScript 被設(shè)計用來向 HTML 頁面添加交互行為 3. JavaScript **是一種腳本語言**（腳本語言是一種輕量級的編程語言）。 說明：腳本語言就是一種輕量級的編程語言。一般都由相應(yīng)的腳本引擎來[解釋執(zhí)行](解釋執(zhí)行不依賴于平臺，因為編譯器會根據(jù)不同的平臺進行解析。例如JS語言無論在windows平臺還是在Lunix平臺都可以使用。故可移植性強。使用解釋執(zhí)行的程序我們一般稱為解釋程序)。例如JavaScript語言就由瀏覽器引擎來解析和執(zhí)行。 在計算機上不需要安裝其他的軟件。而java語言就不是腳本語言，必須在計算機安裝jdk之后才可以運行。 腳本語言除了JavaScript 語言，還有PHP,Python等語言。 4. 重點強調(diào)一下：JavaScript(js)是弱類型語言，js變量聲明不需要指明類型，而java屬于強類型語言。 例如java中定義變量時會根據(jù)不同的數(shù)據(jù)類型書寫不同的數(shù)據(jù)類型的關(guān)鍵字，而js不是。 **JavaScript組成**| **組成部分** | **作用** | | --------------- | ---------------------------------------------------------- | | **ECMA Script** | 構(gòu)成了JS核心的語法基礎(chǔ) | | **BOM** | Browser Object Model 瀏覽器對象模型，用來操作瀏覽器上的對象 | | **DOM** | Document Object Model 文檔對象模型，用來操作網(wǎng)頁中的元素（標簽） |ECMA Script
基本語法
`js和html整合: 在html中編寫js代碼 方式1: 內(nèi)聯(lián)式在html頁面添加 <script>在標簽體中編寫js代碼</script> 方式2: 外聯(lián)式1.編寫外部的js文件*.js2.在使用的html頁面引入<script src="外部js文件的位置"></script>注意事項: 1.一個頁面中可以同時出現(xiàn)多個 script 標簽2.script標簽可以寫在頁面的任何位置(注意正確嵌套)3.script標簽一旦引入了外部的js文件,那么標簽體失效4.js的加載順序,從上到下,從左到右<script>// 警告框alert("hello js!"); </script> <script src="../js/first.js">/* 此代碼無效 */alert("hello 啊..."); </script>`變量聲明: var 變量名稱 = 初始值; let 變量名稱 = 初始值; const 常量名稱 = 值; // 常量: 只能賦值一次,初始化時賦值注意：1.在js中關(guān)鍵字typeof可以查看某個變量的具體數(shù)據(jù)類型，使用格式：typeof 變量名`數(shù)據(jù)類型：5種基本數(shù)據(jù)類型和1種引用數(shù)據(jù)類型 數(shù)字類型：number 包含了小數(shù)和整數(shù) 布爾類型：boolean 只有兩個值： true（真）| false（假） 字符串類型：String 包含字符和字符串，既可以使用雙引號又可以使用單引號 未定義類型：undefined 只有一個值，即 undefined未定義 空類型：null 只有一個值 null，表示空對象補充:值 undefined 實際上是從值 null 派生來的，因此 ECMAScript 把它們定義為相等的。 alert(null == undefined); 輸出 "true"，盡管這兩個值相等，但它們的含義不同。2、引用數(shù)據(jù)類型(復合數(shù)據(jù)類型) object : 對象`運算符： 1、賦值運算符：等號(=), 舉例： var x = 5。 2、比較運算符： > < >= <= == != === !== 注意：1. === 和 == 區(qū)別1）=== 比較數(shù)據(jù)類型，然后比較數(shù)值2）== 比較數(shù)值，不考慮數(shù)據(jù)類型2.!== 和 != 的區(qū)別1）!== 是 === 的取反2）!= 是 == 的取反3、邏輯運算符： && || ！ && 并且，雙與：只有運算符兩側(cè)都為true，結(jié)果才是true； 一假即假。 || 或者，雙或：只要運算符兩側(cè)有一個是true，結(jié)果就是true；一真即真。 ! 取反： !true = false; !false=true;注意：1. 在js中，不光boolean值能夠參與邏輯運算。所有的值都能參與邏輯運算2. 數(shù)字0， 空字符串‘’或者"", false, 空null, undefined, NaN3. NaN: Not a Number 不是一個數(shù)字例如： 1 -‘a(chǎn)bc’ -> 表示1減去字符’abc’--》不屬于一個數(shù)字--》NaN4、算數(shù)運算符： + - * / % 注意： + 號比較特殊 因為除了可以進行算數(shù)運算，還可以進行字符串的拼接。這點和java是一樣的。5、三元運算符： 條件表達式1 ? 條件表達式2 : 條件表達式3; `JS流程控制 js也存在if、if-else、switch、for、while、do-while等邏輯語句，與java使用方式一致`var聲明變量全局作用域、let聲明變量是局部作用域`Js函數(shù) 一、普通函數(shù) js中，通過**function**關(guān)鍵字來定義函數(shù) 格式 function 函數(shù)名(參數(shù)列表) {//形參類型不需要書寫，直接書寫變量名即可js邏輯代碼 }1、 函數(shù)需要被調(diào)用才能執(zhí)行。 2、 js中，如果函數(shù)需要返回值我們直接return就行了。 定義函數(shù)的時候不需要聲明返回值的類型，因為js是弱數(shù)據(jù)類型，返回什么數(shù)據(jù)類型都是let。 3、 在js中，如果我們需要給函數(shù)傳遞參數(shù)，那么我們直接寫變量名就行，不需要聲明傳入變量的類型。 4、 在js中，不存在函數(shù)重載的概念，如果2個函數(shù)名相同，后面出現(xiàn)的函數(shù)會覆蓋前面的函數(shù)。1、 如果函數(shù)的聲明帶有參數(shù)，但是調(diào)用時不帶參數(shù)，函數(shù)也可以正常被調(diào)用。 2、 如果函數(shù)聲明時沒有參數(shù)列表，調(diào)用的時候傳入?yún)?shù)，函數(shù)也能照樣執(zhí)行。 3、 在JS中,可以使用arguments來獲取實際傳入的參數(shù)。arguments是實參的參數(shù)數(shù)組。二、匿名函數(shù) function(參數(shù)列表){js邏輯代碼 } **第一種：** 將匿名函數(shù)賦值給一個變量，使用變量調(diào)用函數(shù)。 let fn = function(參數(shù)列表) {js邏輯代碼 }； **第二種：** 匿名函數(shù)直接作為另一個函數(shù)的實際參數(shù)傳遞。 //調(diào)用函數(shù)，第二個參數(shù)是匿名函數(shù) function fn(x,y){//輸出x和yconsole.log('x='+x); //x=100console.log('y='+y); //y=function(){console.log(5);}//調(diào)用匿名函數(shù)y(); } fn(100,function(){console.log(5); }); `定時器setInterval var timer = window.setInterval(code, millisec) 按照指定的周期（間隔）來執(zhí)行函數(shù)或代碼片段。參數(shù)1： code 必須寫。 執(zhí)行的函數(shù)名或執(zhí)行的代碼字符串。 參數(shù)2： millisec 必須寫。時間間隔，單位：毫秒。window可以理解為瀏覽器窗口。后面會講解。 timer 返回值：一個可以傳遞給 window.clearInterval(定時器的返回值) 從而取消對 code 的周期性執(zhí)行的值。 在關(guān)閉定時器時需要使用定時器的返回值作為參數(shù)，否則不知道關(guān)閉哪個定時器。 例如： 方式：函數(shù)名 ， setInterval(show, 1000); show 表示函數(shù)名，1000表示每隔1000毫秒執(zhí)行這個函數(shù)。`定時器：setTimeout setTimeout() 在指定的毫秒數(shù)后調(diào)用函數(shù)或執(zhí)行代碼片段。 和setInterval()不同的是setTimeout() 只是執(zhí)行一次，而setInterval()每隔指定的時間就會執(zhí)行， 如果不停止計時器就會一直執(zhí)行代碼片段。 window.setTimeout(code,millisec) 參數(shù)： code 必需。要調(diào)用的函數(shù)。 millisec 必需。在執(zhí)行代碼前需等待的毫秒數(shù)。`JavaScript樣式獲取或修改 obj.style.樣式名 獲得指定“樣式”的值。樣式名包括標簽的寬、高、背景顏色等。 obj.style.樣式名= 樣式值 給指定“樣式”設(shè)置樣式。注意：如果屬性有多個單詞使用“-”連接，樣式名書寫的時候需要將“-”刪除，并將后一個單詞首字母大寫。例如：background-color 需要改成 backgroundColorJS對象
`數(shù)組Array let arr = [18]; new Array(); 創(chuàng)建空數(shù)組 new Array(3); 創(chuàng)建包含指定個數(shù)的數(shù)組 new Array(ele1,ele2...); 創(chuàng)建包含指定元素的數(shù)組 ## 特征 - 數(shù)組長度可變 - 數(shù)組中可以存放任何類型的值 ## 常用屬性 - length 長度 ## 常用方法 - join("分隔符"); 按指定的分隔符分割 - sort(); 操作數(shù)組結(jié)構(gòu) 對數(shù)組進行排序 - reverse(); 顛倒數(shù)組中元素的順序 - concat();連接兩個或更多的數(shù)組，并返回結(jié)果sort() 對于排序函數(shù)sort如果操作的數(shù)組存儲的是字符串，那么就是無參的。按照編碼值升序排序。 對于排序函數(shù)sort如果操作的數(shù)組存儲的是數(shù)值，那么就是有參的。按照大小排序。對數(shù)組進行排序，不帶參數(shù)是按照編碼值進行排序。如果不是按照編碼值排序,那么必須指定比較器。 說明：由于字符串都是按照編碼值比較大小的，也可以將這個方法這樣理解使用： 如果要對數(shù)字進行排序，必須指定比較器。如果是按字符串進行排序，那么就是無參。 // 定義數(shù)組 let a1=['kaja','aha','abclaja','0aa','abcde','ahd','AKAJA']; // 使用數(shù)組對象中的函數(shù)對上述數(shù)組進行排序 a1.sort(); // 默認是大小升序，按照編碼值升序排序 // 排序后：["0aa", "AKAJA", "abcde", "abclaja", "aha", "ahd", "kaja"] let a2=[10,108,2,9,99,34,345,200]; function(o1,o2){升序：o1 - o2降序：o2 - o1 } a2.sort(function (o1,o2) {return o2 - o1; }); 最后結(jié)果： [345, 200, 108, 99, 34, 10, 9, 2] 數(shù)值大小降序`RegExp正則對象 a.編寫正則表達式var reg = new RegExp(正則表達式, 匹配模式);var reg = /正則表達式/匹配模式匹配模式i: 忽略大小寫g: 全局匹配(模糊匹配)[] : 可選的值有哪些{} : 可選值出現(xiàn)的位數(shù)* : 0到多次? : 0次或1次+ : 1次到多次^ : 以什么開頭$ : 以什么結(jié)尾b.校驗正則表達式.test("被校驗的字符串"); 返回boolean值let result = reg.test(字符串);`Date對象 - toLocaleString(); ★★★ 根據(jù)本地時間格式，把 Date 對象轉(zhuǎn)換為字符串。 - getFullYear(); 從 Date 對象以四位數(shù)字返回年份。 - getMonth(); 從 Date 對象返回月份 (0 ~ 11)。 - getDate(); 從 Date 對象返回一個月中的某一天 (1 ~ 31)。 - getHours() ; 返回 Date 對象的小時 (0 ~ 23)。 - getMinutes(); 返回 Date 對象的分鐘 (0 ~ 59)。 - getSeconds() ;返回 Date 對象的秒數(shù) (0 ~ 59)。 - getMilliseconds() 返回 Date 對象的毫秒(0 ~ 999)。 - getTime() ★★★返回 1970 年 1 月 1 日至今的毫秒數(shù)。類似于Java中的System.currentTimeMillis()`全局對象 - parseInt(要轉(zhuǎn)換的對象); 嘗試 轉(zhuǎn)換為Int類型 "9.9超市" - parseFloat(要轉(zhuǎn)換的對象); 嘗試轉(zhuǎn)換為float類型 - String(要轉(zhuǎn)換的對象); 強制轉(zhuǎn)換為String類型 - Number(要轉(zhuǎn)換的對象); 強制轉(zhuǎn)換為number類型 - Boolean(要轉(zhuǎn)換的對象)); 強制轉(zhuǎn)換為Boolean類型 - encodeURI(); 編碼 - decodeURI(); 解碼 - isNaN(); - eval(); 將字符串轉(zhuǎn)換成js可以執(zhí)行的代碼 let str = "alert('hello 美女')";`String對象 1.雙引號 2.構(gòu)造方法 了解 let s1=new String("abc"); 3.單引號 推薦 let s2='def'; 4.反單引號：let s3 = `efg`; 注意：使用反單引號主要目的為了方便字符串的拼接，省去了字符串+拼接的麻煩 let s3 = `efg`; `${s3}你好` 結(jié)果是 efg你好 ${變量}這種寫法只能書寫在反單引號中，${變量}大括號中的變量不一定是反單引號定義的，可以是單引號定義的BOM瀏覽器對象模型
BOM對象：Browser Object Model 瀏覽器對象模型。把整個瀏覽器當做一個對象來處理。Window對象：表示瀏覽器整個窗口。就是上述空白的地方，不包括工具欄和地址欄。 History對象：表示瀏覽器中的向后和向前的左右箭頭。 Location對象：表示瀏覽器中的地址欄。 Navigator (了解)存放有關(guān)瀏覽器的信息 Screen(了解)存放客戶端顯示屏幕的信息 **補充：** 所有JavaScript全局對象、函數(shù)以及變量均自動成為window對象的成員。就是都可以使用window對象來調(diào)用，例如上述history和location對象都可以使用window對象來調(diào)用。 舉例：window.history 、 window.location` Window對象（掌握） 1、方法：定時器 setInterval()按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式。 clearInterval()取消由 setInterval() 設(shè)置的定時器。 setTimeout()在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式。2、方法：消息框1）提示框：alert(提示信息);2）確認框：confirm(提示信息);方法返回值：確定返回true取消返回false3）輸入框：prompt(提示信息, 默認值);方法返回值：點擊確定：輸入框的內(nèi)容點擊取消：null`Lation對象(理解) | **屬性** | **對應(yīng)的值** | | --------- | ------------------------------------------------------------ | | hash: | #abc | | host: | 127.0.0.1:8020 | | hostname: | 127.0.0.1 | | **href:** | http://127.0.0.1:8020/day03/定時彈廣告/05.location.html?__hbt=1503844483351#abc | | pathname: | /day03/定時彈廣告/05.location.html | | port: | 8020 | | protocol: | http: | | search: | ?__hbt=150384448335 | 例如：location的href值來實現(xiàn)窗口的跳轉(zhuǎn)。就是在頁面加載的時候直接訪問http://www.baidu.com** <script type="text/javascript">/** 需求：設(shè)置location的href值來實現(xiàn)窗口的跳轉(zhuǎn)。* 就是在頁面加載的時候直接訪問http://www.baidu.com*/window.location.href="http://www.baidu.com";// alert(window.location.href); </script>`History對象（理解） window.history用來訪問瀏覽器歷史瀏覽記錄。 例如： <script type="text/javascript">//點擊按鈕跳轉(zhuǎn)到b頁面 前進function toPageB(){// window.history.forward();window.history.go(1);} </script><script type="text/javascript">//后退function toPageA(){//window.history.back();window.history.go(-1);}//前進function toPageC(){//window.history.forward();window.history.go(1);} </script>1. 清除計時器的方法: clearInterval(計時器) 2. 讓元素不可用的屬性是：disabled=true/false 3. toLocaleString() 據(jù)本地時間格式，把 Date 對象轉(zhuǎn)換為字符串。DOM文檔對象模型
DOM:document object model 文檔對象模型。 用來操作html頁面中所有html標簽的。在使用dom操作html標簽之前，瀏覽器會將html頁面中的標簽加載到內(nèi)存中形成一個dom樹，上面最大的對象時document。我們可以通過document調(diào)用屬性或者函數(shù)獲取html標簽。 `標簽屬性和文本的操作 | **屬性名** | **描述** | **element.getAttribute(屬性的名稱); | 根據(jù)標簽的屬性的名字來獲取屬性的值 | element.setAttribute(屬性的名稱, 值); | 給標簽設(shè)置一個屬性 | element.removeAttribute(屬性的名稱); | 根據(jù)標簽的屬性的名字來刪除屬性 | element.children; | 獲取當前元素（標簽）的子元素注意：獲取的子級（一層），不管嵌套(不包括孫子，只包括兒子) | | element.nodeName/tagName; | 獲取標簽名 注意：獲取的是大寫的字符串的標簽名 | element.innerHTML; | 獲取當前元素（標簽）的文本內(nèi)容 <div>哈哈<div> `獲取標簽(元素) document.getElementById(id名稱); 通過元素（標簽）的id屬性值獲取標簽對象，返回的是**單個的標簽對象**注意：只能從document下面去獲取 document.getElementsByName(name屬性名稱); 通過元素（標簽）的name屬性值獲取標簽對象，返回的是標簽對象的**數(shù)組**。注意：只能從document下面去獲取 document/parentNode.getElementsByTagName(標簽名); 通過元素（標簽）的名稱獲取標簽的對象,返回的是標簽對象的**數(shù)組**。注意：可以從document或者某一個父級標簽下面去document/parentNode.getElementsByClassName(類名); 通過元素（標簽）的class屬性獲取標簽對象，返回的是標簽對象的**數(shù)組**。注意：可以從document或者某一個父級標簽下面去獲取1.根據(jù)標簽id屬性值獲取標簽對象： ~~~js document.getElementById(id名稱); ~~~ 2.根據(jù)標簽名獲取標簽的數(shù)組： ~~~jslet arrDivs = document.getElementsByTagName('標簽名'); ~~~ 3.根據(jù)name屬性值獲取標簽的數(shù)組： ~~~js document.getElementsByName('name屬性值') ~~~ 4.根據(jù)class屬性值獲取的數(shù)組： ~~~js let arrReds = document.getElementsByClassName('class屬性值'); ~~~ `新增元素 document.createElement(元素名稱); 在頁面上根據(jù)標簽名來創(chuàng)建元素，返回創(chuàng)建的標簽（元素）對象注意：只能從document下面去創(chuàng)建元素<li></li>parentNode.appendChild(要添加的元素對象); 在某一個父級元素（標簽)下面去添加一個元素，每次添加到父級元素的**最后面**，相當于一個追加的操作parentNode.insertBefore(要添加的元素對象，在誰的前面添加); 在某一個父級元素（標簽)下面去添加一個元素，可以指定在哪一個子元素（標簽）的前面添加1.創(chuàng)建標簽： ~~~js document.createElement('標簽名') ~~~ 2.添加父標簽的最后一個孩子位置： ~~~js 父標簽對象.appendChild(子標簽對象) ~~~ 3.向父標簽的指定位置添加： ~~~js 父標簽對象.inertBefore(要添加的子標簽對象,添加到哪個子標簽前面的對象) ~~~ `刪除元素 element.remove(); 刪除當前的元素（標簽） parentNode.removeChild(要刪除的子元素); 通過父級元素（標簽）刪除子元素（標簽）事件
`HTML 事件可以是瀏覽器行為，也可以是用戶行為。 如果是瀏覽器行為例如是頁面加載完成事件。 如果是用戶行為就是用戶的一切操作都是發(fā)生的事件， 鼠標操作事件(單擊，雙擊，懸浮等)，鍵盤操作事件(鍵盤錄入等)。`事件和事件源綁定綁定事件:<xxx 事件名="函數(shù)名()"></xxx>派發(fā)事件: 注意頁面的加載順序1.獲取事件源標簽對象let 標簽對象 = document.getElementById("id標記");2.派發(fā)事件標簽對象.事件名 = function(){ js代碼 }`常見事件 單擊事件: onclick 表單提交事件: onsubmit 頁面加載成功事件: onload 焦點事件: 獲取焦點: onfocus 失去焦點: onblur表單事件(了解) ondblclick 雙擊事件 onreset 重置 onchange; 改變(熟練使用) 鼠標事件:(了解) onmouseover 懸停 onmouseout 移出 onmousedown 按下 onmouseup 彈起 onmousemove 移動 鍵盤事件:(了解) onkeydown 按下 onkeyup 彈起 onkeypress 按住`html標簽綁定事件 標簽綁定事件：就是讓上述的js事件作用在某個標簽上`靜態(tài)綁定 將事件名作為html標簽的屬性名，在屬性值中調(diào)用js函數(shù)。 <標簽名 事件名="調(diào)用的js函數(shù)" 事件名="調(diào)用的js函數(shù)"....></標簽名> <div onclick="fn1(this);" onmouseover="fn2(this);" onmouseout="fn3(this);">div1</div>`動態(tài)綁定 根據(jù)dom技術(shù)獲取某個標簽對象，使用標簽對象調(diào)用事件名，然后將匿名函數(shù)賦值事件名。標簽對象.事件名 = function(){ js代碼}`代碼演示 1）靜態(tài)綁定：將事件名作為標簽的屬性名，在屬性值中調(diào)用js函數(shù) ~~~html <div onclick="fn(this);">柳巖</div> <script type="text/javascript">// 1、給div標簽綁定單擊事件,輸出div的文本function fn(obj) {//obj=thisconsole.log(obj.innerHTML);} </script> ~~~ 2)動態(tài)綁定：使用標簽對象調(diào)用js事件，使用匿名函數(shù)給其賦值 ~~~js let oDiv = document.getElementsByTagName('div')[0];//給上述div動態(tài)綁定js單擊事件oDiv.onclick = function () {//this表示調(diào)用當前事件onclick的標簽對象oDiv// console.log(oDiv.innerHTML);console.log(this.innerHTML);}; ~~~`靜態(tài)綁定和動態(tài)綁定區(qū)別 靜態(tài)綁定缺點：js和html標簽耦合在一起 動態(tài)綁定：解耦合。案例：
案例1-注冊表單校驗
【1】鼠標離開輸入框的事件，離焦事件onblur
【2】點擊提交按鈕執(zhí)行的提交事件onsubmit。
? 補充：
? 1.對于onsubmit事件表示表單提交就執(zhí)行的事件，如果阻止表單提交，那么該事件綁定的函數(shù)返回false，如果提交表單，那么該事件綁定的函數(shù)返回true，默認返回的是true。
? 2.在js中阻止事件都是返回false，不阻止返回true，默認是true。
需求分析:當點擊"表單提交"按鈕時,對表單中的數(shù)據(jù)進行校驗,如果用戶輸入的數(shù)據(jù)滿足我們想要的格式,則表單可以提交,反之不允許提交.技術(shù)分析:事件: onsubmitdom: 獲取標簽對象,并獲取屬性的值正則: /^[a-zA-Z_$][0-9a-zA-Z_$]{5,11}$/ 步驟分析:1.確定事件給表單綁定表單提交事件<form action="#" onsubmit="return checkForm()"></form>2.編寫事件調(diào)用的函數(shù)function checkForm(){let flag = true;//1.獲取用戶名和密碼的值let username = document.getElementById("usernameId").value;let password = document.getElementById("passwordId").value;//2.編寫正則表達式let zz = /^[a-zA-Z_$][0-9a-zA-Z_$]{5,11}$/;//3.校驗if(zz.test(username)){// 滿足格式,顯示成功的提示信息document.getElementById("usernameMsg").innerHTML='<font color='green'>?</font>';}else{// 不滿足格式,顯示失敗的提示信息document.getElementById("usernameMsg").innerHTML='<font color='red'>?輸入不合法</font>';// 關(guān)閉開關(guān)flag = false;}if(zz.test(password)){// 滿足格式,顯示成功的提示信息document.getElementById("passwordMsg").innerHTML='<font color='green'>?</font>';}else{// 不滿足格式,顯示失敗的提示信息document.getElementById("passwordMsg").innerHTML='<font color='red'>?輸入不合法</font>';// 關(guān)閉開關(guān)flag = false;}return flag;}示例代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script>function checkForm(){let flag = true;//1.獲取用戶名和密碼的值let username = document.getElementById("username").value;let password = document.getElementById("password").value;//alert(username+" : "+password);//2.編寫正則表達式let zz = /^[a-zA-Z_$][0-9a-zA-Z_$]{5,11}$/;//3.校驗if(zz.test(username)){// 滿足格式,顯示成功的提示信息document.getElementById("usernameMsg").innerHTML='<font color="green">?</font>';}else{// 不滿足格式,顯示失敗的提示信息document.getElementById("usernameMsg").innerHTML='<font color="red">?輸入不合法</font>';// 關(guān)閉開關(guān)flag = false;}if(zz.test(password)){// 滿足格式,顯示成功的提示信息document.getElementById("passwordMsg").innerHTML='<font color="green">?</font>';}else{// 不滿足格式,顯示失敗的提示信息document.getElementById("passwordMsg").innerHTML='<font color="red">?輸入不合法</font>';// 關(guān)閉開關(guān)flag = false;}return flag;}</script> </head> <body><!-- 給表單綁定表單提交事件 --><form action="#" onsubmit="return checkForm()">用戶名: <input type="text" name="username" id="username" value="tom"/><span id="usernameMsg"></span><br>密碼: <input type="password" name="password" id="password" value="123"/><span id="passwordMsg"></span><br><input type="submit" value="提交"></form> </body> </html>案例2-5秒后跳轉(zhuǎn)到百度官網(wǎng)
需求分析:當頁面加載成功5秒后,跳轉(zhuǎn)到黑馬官網(wǎng) 技術(shù)分析:事件: 頁面加載事件定時器: setTimeout(函數(shù),5000);location.href = "路徑"; 步驟分析:1.確定事件onload = function(){// 設(shè)置單次執(zhí)行定時器setTimeout(jumpFun,5000);}2.編寫jumpFun函數(shù)function jumpFun(){// 跳轉(zhuǎn)到黑馬官網(wǎng)location.href="路徑";}示例代碼:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script>let interId;onload = function(){// 設(shè)置單次執(zhí)行定時器//setTimeout(jumpFun,5000);interId = setInterval(jumpFun,1000);}let count = 5;function jumpFun() {count--;if(count==0){location.href = "http://www.itheima.com";clearInterval(interId);}else{document.getElementById("spId").innerText = count;}}</script> </head> <body><h1>支付成功,<span id="spId">5</span>秒后跳轉(zhuǎn)到黑馬官網(wǎng)</h1> </body> </html>案例3-全選和全不選和反選
需求分析:當點擊"全選/全不選"復選框時,讓其他復選框的狀態(tài)與之保持一致. 技術(shù)分析:事件: 單擊 onclick操作屬性:checked 步驟分析:1.確定事件給"全選/全不選"復選框綁定單擊事件<input id="all" type="checkbox" onclick="checkAll()" />2.編寫checkAll函數(shù)function checkAll(){//1.獲取"全選/全不選"復選框的狀態(tài) checkedlet flag = document.getElementById("all").checked;//2.獲取其他復選框?qū)ο?并設(shè)置checked屬性}示例代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script>function checkAll(obj) {//1.獲取"全選/全不選"復選框的狀態(tài) checked//let flag = document.getElementById("all").checked;let flag = obj.checked;//alert(flag);//2.獲取其他復選框?qū)ο?并設(shè)置checked屬性let itemObjArr = document.getElementsByName("item");for (let i = 0; i < itemObjArr.length; i++) {itemObjArr[i].checked = flag;}}function reverseSelect() {let itemObjArr = document.getElementsByName("item");for (let i = 0; i < itemObjArr.length; i++) {itemObjArr[i].checked = !itemObjArr[i].checked;}}</script> </head> <body><h3>商品價格列表</h3><input type="checkbox" name="item" value="1500" /> 山地自行車1500<br /><input type="checkbox" name="item" value="200" /> 時尚女裝200<br /><input type="checkbox" name="item" value="3000" /> 筆記本電腦3000元<br /><input type="checkbox" name="item" value="800" /> 情侶手表800<br /><input type="checkbox" name="item" value="2000" /> 桑塔納2000<br /><hr/><!-- TODO:1.確定事件 給"全選/全不選"復選框綁定單擊事件this: 寫在哪個標簽上就代表那個標簽對象--><input type="checkbox" id="all" onclick="checkAll(this)" />全選/全不選 <input type="button" id="reverse" onclick="reverseSelect()" value=" 反 選 "/> </body> </html>案例4-省市二級聯(lián)動
需求分析:當省份的下拉選改變時,根據(jù)選中的省份,查詢對應(yīng)的市,將查詢到的市動態(tài)的展示到市的下拉選中. 技術(shù)分析:事件: onchange操作標簽體: innerHTML 步驟分析:1.確定事件給省份下拉選添加改變事件<select name="pro" onchange="changePro(this)"></select>2.編寫changePro函數(shù)function changePro(obj){//1.獲取value屬性的值let val = obj.value;//2.從二維數(shù)組中查找對應(yīng)的市數(shù)組let cityArr = arr[val];//3.遍歷市數(shù)組,將每一個市拼成option,追加到市的下拉選中let cityStr = '';for(let i=0;i<cityArr.length;i++){cityStr+='<option>'+cityArr[i]+'</option>'}// 獲取市的下拉選對象,并設(shè)置標簽體內(nèi)容document.getElementById("city").innerHTML=cityStr;}示例代碼1
準備Json文件
var china = [{"p_name": "吉林省","p_id": "jl","cities": [{"c_name": "長春","c_id": "cc"},{"c_name": "四平","c_id": "sp"},{"c_name": "通化","c_id": "th"},{"c_name": "松原","c_id": "sy"}]},{"p_name": "遼寧省","p_id": "ln","cities": [{"c_name": "沈陽","c_id": "sy"},{"c_name": "大連","c_id": "dl"},{"c_name": "撫順","c_id": "fs"},{"c_name": "鐵嶺","c_id": "tl"}]},{"p_name": "山東省","p_id": "sd","cities": [{"c_name": "濟南","c_id": "jn"},{"c_name": "青島","c_id": "qd"},{"c_name": "威海","c_id": "wh"},{"c_name": "煙臺","c_id": "yt"}]},{"p_name": "上海市","p_id": "sh","cities": [{"c_name": "閔行區(qū)","c_id": "mh"},{"c_name": "徐匯區(qū)","c_id": "xh"},{"c_name": "黃浦區(qū)","c_id": "hp"},{"c_name": "浦東新區(qū)","c_id": "pd"}]} ];代碼
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title></title><script>// 定義二維數(shù)組:var arr = new Array(4);arr[0] = new Array("哈爾濱","齊齊哈爾","大慶","佳木斯");arr[1] = new Array("長春市","吉林市","四平市","通化市");arr[2] = new Array("沈陽市","錦州市","大連市","鐵嶺市");arr[3] = new Array("鄭州市","洛陽市","安陽市","南陽市");</script><script>function changePro(obj){//1.獲取value屬性的值let val = obj.value;//alert(val);//2.從二維數(shù)組中查找對應(yīng)的市數(shù)組let cityArr = arr[val];//3.遍歷市數(shù)組,將每一個市拼成option,追加到市的下拉選中let cityStr = '<option>==請選擇==</option>';for(let i=0;i<cityArr.length;i++){cityStr+='<option>'+cityArr[i]+'</option>'}// 獲取市的下拉選對象,并設(shè)置標簽體內(nèi)容document.getElementById("city").innerHTML=cityStr;}</script> </head> <body> <form action="#" method="get">籍貫:<select name="pro" onchange="changePro(this)"><option>請選擇</option><option value="0">黑龍江</option><option value="1">吉林</option><option value="2">遼寧</option><option value="3">河南</option></select> 省<select id="city"><option >-請選擇-</option></select> 市 </form> </body> </html>示例代碼2
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Area</title> </head> <body> 省份： <select id="province"><option value="">---請選擇---</option> </select> 市區(qū)： <select id="city"><option value="">---請選擇---</option> </select><script type="text/javascript" src="../js/cities.js"></script> <script type="text/javascript">let oPros = document.getElementById('province');let proValue = oPros.value;for (let i = 0; i < china.length; i++) {proValue = china[i].p_name;let pId = china[i].p_id// alert(oProValue);let option = new Option(proValue,pId);oPros.appendChild(option);}let oCity = document.getElementById('city');oPros.onchange = function () {oCity.options.length = 1;let htmlPid = this.value;for (let i = 0; i < china.length; i++) {let oProChina = china[i];let pId = oProChina.p_id;if(pId === htmlPid){let arrCities = oProChina.cities;console.log(arrCities)for (let j = 0; j < arrCities.length; j++) {let city = arrCities[j];let cName = city.c_name;let cId = city.c_id;let option = new Option(cName,cId);oCity.appendChild(option);}}}} </script> </body> </html>案例5-表格隔行換色
需求分析:當頁面加載成功后,給表格的奇數(shù)行和偶數(shù)行分別添加不同的背景顏色,表頭除外. 技術(shù)分析:事件: onloaddom: 獲取所有的行操作css樣式: 步驟分析:1.確定事件onload = function(){//2.獲取所有的行let trObjArr = document.getElementsByTagName("tr");//遍歷for(let i=1;i<trObjArr.length;i++){if(i%2==0){trObjArr[i].style.backgroundColor="red";}else{trObjArr[i].style.backgroundColor="green";}}}示例代碼
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title></title><script>onload = function(){//2.獲取所有的行let trObjArr = document.getElementsByTagName("tr");//遍歷for(let i=1;i<trObjArr.length;i++){if(i%2==0){trObjArr[i].style.backgroundColor="pink";}else{trObjArr[i].style.backgroundColor="yellow";}}}</script> </head> <body> <table id="tab1" border="1" width="800" align="center" ><tr style="background-color: #999999;"><th>分類ID</th><th>分類名稱</th><th>分類描述</th><th>操作</th></tr><tr><td>1</td><td>手機數(shù)碼</td><td>手機數(shù)碼類商品</td><td><a href="">修改</a>|<a href="">刪除</a></td></tr><tr><td>2</td><td>電腦辦公</td><td>電腦辦公類商品</td><td><a href="">修改</a>|<a href="">刪除</a></td></tr><tr><td>3</td><td>鞋靴箱包</td><td>鞋靴箱包類商品</td><td><a href="">修改</a>|<a href="">刪除</a></td></tr><tr><td>4</td><td>家居飾品</td><td>家居飾品類商品</td><td><a href="">修改</a>|<a href="">刪除</a></td></tr> </table> </body> </html>案例6-輪播圖
1、 為頁面設(shè)置加載事件onload
2、 給輪播圖的圖片設(shè)置一個id
3、 根據(jù)id來獲取到輪播圖的圖片
4、 開啟定時器，2000毫秒重新設(shè)置圖片的src屬性
需求分析:當頁面加載成功后,設(shè)置一個周期執(zhí)行定時器,每隔2秒鐘切換一張圖片,實現(xiàn)輪播效果 技術(shù)分析:事件: onload定時器: setInterval(changeImg,2000);dom操作: 改變圖片的路徑 步驟分析://1.確定事件onload=function(){// 設(shè)置周期執(zhí)行定時器setInterval(changeImg,2000);}//2.編寫changeImg函數(shù)let i = 0;function changeImg(){i++;//獲取圖片標簽,并修改路徑let imgObj = document.getElementById("imgId");imgObj.src = "../img/"+i+".jpg";if(i==4){i = -1;}}示例代碼
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">body {background-color: black;}.container {/*居中*/margin: auto;border: 1px solid black;width: 850px;}img {width: 850px;}</style><script>//1.確定事件onload=function(){// 設(shè)置周期執(zhí)行定時器setInterval(changeImg,2000);}//2.編寫changeImg函數(shù)let i = 0;function changeImg(){i++;//獲取圖片標簽,并修改路徑let imgObj = document.getElementById("imgId");imgObj.src = "../img/"+i+".jpg";if(i==4){i = -1;}}</script></head><body><div class="container"><img src="../img/0.jpg" id="imgId"></div></body> </html>案例7-定時彈廣告
分析：
對于廣告圖片，剛開始是隱藏的，過3秒是顯示，再過3秒隱藏。
window.setTimeout(code,millisec)
參數(shù)：
code 必需。要調(diào)用的函數(shù)。
millisec 必需。在執(zhí)行代碼前需等待的毫秒數(shù)。
注意：
該定時器只執(zhí)行一次
案例8-會跳動的時鐘
1.在頁面上創(chuàng)建一個h1標簽，用于顯示時鐘，設(shè)置顏色和大小。
2.一開始暫停按鈕不可用，設(shè)置disabled屬性，disabled=true表示不可用。
3.創(chuàng)建全局的變量，用于保存計時器
4.為了防止多次點開始按鈕出現(xiàn)bug，點開始按鈕以后開始按鈕不可用，暫停按鈕可用。點暫停按鈕以后，暫停按鈕不可用，開始按鈕可用。設(shè)置disabled=true。
5.點開始按鈕，在方法內(nèi)部每過1秒中調(diào)用匿名函數(shù)，在匿名函數(shù)內(nèi)部得到現(xiàn)在的時間，并將得到的時間顯示在h1標簽內(nèi)部。
6.暫停的按鈕在方法內(nèi)部清除clearInterval()的計時器。
總結(jié)
以上是生活随笔為你收集整理的01-HTML+CSS+JS【常用总结+案例练习】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【安全知识分享】建筑项目施工新员工安全基
- 下一篇： 如何关闭快捷键ctrl+alt+方向键旋