當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

01-HTML+CSS+JS【常用总结+案例练习】

發布時間：2024/3/26 HTML 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 01-HTML+CSS+JS【常用总结+案例练习】小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

- - HTML
  - - 第一部分
    - 第二部分
    - 第三部分
    - 總結
  - CSS
  - - 選擇器
    - 常用樣式
    - 總結
  - JavaScript
  - - ECMA Script
    - - 基本語法
      - JS對象
    - BOM瀏覽器對象模型
    - DOM文檔對象模型
    - - 事件
- 案例：
- - 案例1-注冊表單校驗
  - 案例2-5秒后跳轉到百度官網
  - 案例3-全選和全不選和反選
  - 案例4-省市二級聯動
  - 案例5-表格隔行換色
  - 案例6-輪播圖
  - 案例7-定時彈廣告
  - 案例8-會跳動的時鐘

不要死記硬背，要學會運用，案例驅動，通過案例學習

前端知識點細，碎，多

HTML 網頁的骨架，用來書寫網頁的。 Css 美化網頁的。 javaScript 網頁的靈魂，用來交互前端頁面和后臺服務器之間的數據的，沒有js。那么html+css就是一個靜態頁面，不會和后臺服務器進行數據的交互。開發中也就沒有什么意義了。

HTML

HTML：**超文本標記語言**（HyperText Markup Language）它通過標記符號來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網頁文件，然后根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執行過程。補充：網頁存放在服務器上，運行在瀏覽器上，運行之前先從服務器上下載到本地，在本地瀏覽器上解析。 Html5 2014年10月29日，萬維網聯盟 ,經過8年的努力制定的HTML5標準規范目前支持的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari(蘋果系統)，Opera等。**不同的瀏覽器之間是有差異，同一個網頁運行可能會不同。** 網頁內容包含： HTML代碼、CSS代碼、JavaScript代碼等內容。 1)HTML代碼：結構層（好比人的骨骼/身體）負責從語義的角度搭建頁面結構 2)CSS代碼：表現層（好比人的穿衣打扮）負責從審美的角度美化頁面 3)JavaScript代碼：行為層（好比一個人能歌善舞）負責從交互的角度提升用戶體驗。網頁根據內容是否改變分為：靜態頁面、動態頁面 4)靜態頁面：編寫之后在瀏覽器不再改變的網頁。HTML就是用于編寫靜態網頁的。 5)動態頁面：會根據不同的情況展示不同的內容。例如：登錄成功后右上角顯示用戶名。 HTML的特點： 1、 HTML文件不需要編譯，直接使用瀏覽器解析即可。 2、 HTML文件的擴展名是*.html 或 *.htm。 3、 HTML結構都是由標簽組成。 4、標簽名預先定義好的，我們只需要了解其功能即可。1) 標簽名不區分大小寫，通常都是小寫。2) 通常情況下標簽由開始標簽和結束標簽組成。叫做雙標簽。例如：<a>www.baidu.com</a> 超鏈接3) 如果沒有結束標簽，建議以/結尾。叫做單標簽。例如：<img src="" width="" height="" />img：稱為標簽名5、 HTML結構包括兩部分：頭head和體body。 HTML屬性特點： 1、 HTML屬性一般都出現在HTML標簽中, 是HTML標簽的一部分。 2、標簽可以有屬性,它包含了額外的信息.屬性的值一定要在雙引號中。 3、標簽可以擁有多個屬性。 4、一般屬性由屬性名和屬性值成對組成的。例如：  <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: 藍色建議然后每種顏色使用兩個數字表示。舉例：紅色： #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 每段文字可以實現換行，每一行之間沒有留白單標簽`特殊字符實體標簽：1.在html中所有的特殊字符實體標簽的格式：&開始，;結尾2.舉例：< < less than> > greater than空格  版權符號：© ? 2003-現在 Taobao.com 版權所有人民幣符號：¥`顯示圖片的標簽img 屬性： 1.src:表示引入的圖片的服務器地址1)src="../img/美女.jpg" : ..表示當前頁面demo01.html的父目錄：c_img_032)然后找到c_img_03的同級目錄：img3)img/美女.jpg:找到img下面的美女.jpg 2.alt:如果加載圖片失敗，顯示alt中的屬性值內容 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:默認的，數字2)a:小寫字母3)A:大寫字母4)i:羅馬數字5)I:羅馬數字`超鏈接標簽：a 屬性：1.href:要跳轉的服務器地址2.target:以何種方式打開要跳轉的新頁面：1）_blank:新的窗口打開2）_self:覆蓋當前頁面，屬于默認的打開方式 a標簽實現空連接：不能跳轉1.<a href="#"> 這種不建議使用2.javascript:void(0); 表示使用我們后面學習的語言javascript中的空函數void(0)3.javascript: 建議使用 a標簽的錨點連接例如： <a href="#maodian">找錨點</a>======================================================================================================。。。。。。省略一萬行============== <a name="maodian">錨點在這呢</a>====== `表格標簽 1)<table>表格標簽border表格邊框的寬度width表格的寬度height表格的高度cellpadding單元格邊沿與其內容之間的空白cellspacing單元格之間的空白bgcolor :background color表格的背景顏色 2) <tr>表格中的行標簽align單元格內容的水平對齊方式,取值：left 左、right 右、center 居中 3)<td>表格中一行中的列標colspan單元格可橫跨的列數(橫向合并單元格)columnrowspan單元格可橫跨的行數(縱向合并單元格)align單元格內容的水平對齊方式,取值：left 左、right 右、center 居中（了解）表格標簽的子標簽：1.整個表格的標題：caption2.tbody:表格體標簽,默認就存在的<table border="1px" cellpadding="0px" cellspacing="0px" width="400px" height="400px"><caption>聯系人</caption><tbody><tr><th>姓名</th><th colspan="2">手機號</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.單獨存在無意義，必須借助于子標簽，子標簽內容必須書寫在form標簽文本中，否則后臺無法獲取到前端瀏覽器提交的數據2.form表單標簽常見屬性：1）action="提交數據到服務器的地址"2）method="前端瀏覽器提交到后臺服務器數據的提交方式" 注意： 1.常見的提交方式有兩種：get post 2.如果不書寫提交方式，默認是get請求方式，對于post請求方式必須書寫post 3.get和post的請求方式區別：a:get請求的數據放到請求服務器的地址后面：例如：http://www.baidu.com?username=zhangsan&password=1234get請求缺點：不安全所有數據都放到url后面，大小有限制只能傳輸字符數據get優點：快可以作為商品分享b:post請求的數據不放到請求服務器的地址后面：數據放到請求體中http://www.baidu.compost請求缺點：慢post請求優點：1）安全2）可以傳輸的數據沒有限制可以傳輸圖片音頻視頻`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 ：提交按鈕，后續可以使用js操作等 2.name屬性：1）使用在單選按鈕上，多個單選按鈕的name屬性值相同，那么就會實現只能選擇一個的效果2）在實際開發中我們必須給input標簽書寫name屬性，后臺服務器就可以通過name屬性值獲取輸入框的value屬性值 3.value屬性，后臺服務器獲取的就是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屬性值舉例：當前頁面被選中的是碩士，那么后臺可以根據edu獲取碩士的value屬性值sh2)size:下拉框每次顯示的選項個數3)multiple="multiple" 表示下拉框可以展示多個選項3.子標簽option屬性：1）value屬性：必須書寫，如果不書寫，后臺獲取的就是option的文本值2) selected="selected" 表示頁面一加載下拉框被選中的項eg:<form action="#" method="get"><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="#">自我描述：<br><textarea rows="10" cols="20"></textarea><button type="submit">登錄</button><button type="button">注冊</button><button type="reset">重置</button> </form>`label標簽【可以實現通過文本選中某個指定的標簽】比較常見的應用場景是單選按鈕。說明：使用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"><input type="number"><input type="search"><input type="submit"> </form>

第三部分

div標簽：主要結合css技術用來頁面的布局，單獨使用沒有效果，屬于塊級標簽p標簽屬于塊級標簽，具有留白span標簽：單獨使用沒有意義，和css一起使用，可以設置字體樣式，從html5后取代了font. span標簽屬于行內標簽(共處一行的標簽：input span a等)

總結

第一章、HTML概述1、HTML：超文本標簽語言標簽語言，超文本(文本，音頻，視頻....)2、作用：編寫網頁3、HTML文件：【1】后綴名: .html .htm【2】書寫內容：普通文本，標簽【3】運行：瀏覽器運行html4、HTML文件基本結構：【1】文檔聲明： <!doctype html>【2】根標簽： <html></html>【3】頭部，主體： head標簽 body標簽第二章、標簽和屬性1、標簽組成： <標簽名> 標簽體 </標簽名> <br>2、分類：【1】是否有標簽體：雙標簽，單標簽【2】是否會換行：塊標簽，內聯標簽3、標簽屬性： <font color="red">傳智播客</font>屬性寫法：開始標簽內部屬性名="屬性值"作用：給標簽添加額外的修飾效果4、學習HTML：知道標簽的基本作用知道標簽的常用屬性第三章、常用標簽1、新聞字體標簽：修飾文章【1】標題標簽 h標簽分類：h1~h6特點：1、給文字設置標題； 2、獨占一行，文字加粗效果屬性：align:水平對齊方式 left,center,right【2】水平線標簽： hr標簽作用：在頁面上設置水平線，區分標題和正文屬性：noshade="noshade"color="red"size="數字"【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】作用：數據表格--格式化展示數據頁面布局（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表單的作用：提供一系列的組件，收集用戶在頁面上輸入或者選擇的數據；把數據提交給服務器；【2】form標簽：action="url"：設置提交數據的地址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" >重置用戶輸入的內容普通按鈕： <input type="button" value="普通按鈕">button類：<button>注冊</button> 提交表單數據H5的新特性： input標簽的 type日期： <input type="date"> 日期插件數字： <input type="number">數字email：<input type="email">

CSS

選擇器

CSS 通常稱為CSS樣式或層疊樣式表，又稱之為網頁的美容師，主要用于設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（高寬、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。CSS+DIV布局更佳靈活，更容易繪制出用戶需要的結構。CSS (Cascading Style Sheets) ：指層疊樣式表樣式：給HTML標簽添加需要顯示的效果。層疊：使用不同的添加方式，給同一個HTML標簽添加樣式，最后所有的樣式都疊加到一起，共同作用于該標簽。 `樣式的屬性：字體顏色：color 字體大小：font-size 邊框：border：border-width border-style border-color 注意：這里的像素單位px不能省略，省略，效果就不會出現了。border: 1px solid red;`CSS和HTML結合的方式方式一：使用HTML標簽的style屬性（行內） <div style="color: yellow;font-size: 100px;border-width: 1px;border-style: solid;border-color: red">div哈哈哈</div>方式二：在head標簽使用style標簽設置（內部）<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選擇器作用于某一個特定的標簽上。根據指定標簽的id來設置css樣式。說明：一個頁面中要求id的屬性值唯一。不能重復。格式： #ID選擇器的名稱｛css代碼；｝ <標簽名 id=” ID選擇器的名稱” />`class選擇器作用在一組標簽之上。說明：ID選擇器只能作用單個標簽。而class選擇器可以作用在單個或者多個標簽上。格式： .class選擇器的名稱｛css代碼；｝ <標簽名 id=” ID選擇器的名稱” />`組合選擇器應用場景：如果頁面不同的選擇器想使用相同的css樣式。組合選擇器可以使用任意的選擇器來組合，個數可以任意個。格式選擇器1, 選擇器2... {css代碼 }`關聯選擇器格式父標簽的選擇器后代標簽選擇器｛css代碼；｝例如：通過id為a的標簽找到下面的所有的span標簽，也就是說，關聯選擇器更加強調的是通過父親查找孩子<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>`屬性選擇器(了解) 屬性選擇器是在原有選擇器的基礎上，通過**標簽的屬性**，再次對標簽進行篩選。格式選擇器名[屬性名="屬性值"] {css樣式； }

常用樣式

`邊框和尺寸 1、border ：設置邊框的樣式。1）格式：border：邊框寬度(border-width) 邊框樣式邊框顏色。2）例如：style="border:1px solid #f00" 表示1像素實邊紅色。邊框樣式取值：solid 實線，none 無邊，dashed虛線等。2、width、height：用于設置標簽的寬度、高度。格式： width:標簽具體的寬度。 height:標簽具體的高度。`轉換：display(掌握) HTML提供豐富的標簽，這些標簽被定義成了不同的類型，一般分為：塊標簽和行內標簽。 1、塊標簽：以區域塊方式出現。每個塊標簽獨自占據一整行或多整行。1）常見的塊元素：<h1>、<div>、<ul>等2）默認可以設置高度和寬度 2、行內元素：不必在新的一行開始，同時也不強迫其他元素在新的一行顯示。1）常見的行內元素：<span>、<a> 等2）設置高度和寬度無效在開發中，如果希望行內元素具有塊元素的特性，或者希望塊元素具有行內元素的特性。也就是希望行內元素和塊元素之間相互轉換。需要使用display屬性將**行內元素轉換成塊級元素** 或者將**塊級元素轉換為行內元素**。選擇器 {display : 屬性值 } 常用的屬性值：inline：此元素將顯示為行內元素（行內元素默認的display屬性值）block：此元素將顯為塊元素（塊元素默認的display屬性值）none：此元素將被隱藏，不顯示，也不占用頁面空間。`字體：color、line-height color：顏色字體顏色 line-height: 行高設置行高`背景 background-color：顏色; 設置元素的背景顏色 background-image : url(圖片的路徑地址); background-repeat: 背景平鋪方式; 背景平鋪方式取值： no-repeat：不平鋪 repeat-x ：橫向平鋪 repeat-y ：縱向平鋪注意：圖片默認是平鋪滿整個盒子的`邊框(盒模型)(了解) 1、盒子模型有哪些部分組成元素的內容(高度、寬度)、內邊距（padding）、邊框（border）和外邊距（margin）組成。 2、盒子模型大小受哪些部分影響盒子模型的大小受元素的內容(高度、寬度)、內邊距（padding）、邊框（border）的影響，不受外邊距的影響 3、外邊距影響在頁面中的位置

總結

1、CSS作用：美化HTML頁面（給html標簽添加樣式）;2、CSS選擇器：【1】基本選擇器：id選擇器： #id值{樣式} 選中頁面唯一標簽class選擇器： .class屬性值{ 樣式 }元素選擇器： div{ }通用（選擇所有）： *{ }【2】擴展選擇器：層級選擇器： div span{}屬性過濾： input[type='text']{}【3】其他：并集（組合）： div,span{}交集（同時滿足）： div#myDiv{}偽類（操作狀態）：a:link{} 默認狀態a:active{} 正在被點擊a:visited{} 已經被點擊過一次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】盒子模型：盒子模型內容：邊框：border（4個邊）內容：內邊距：padding(4個)外邊距：margin(4個)設置塊元素水平居中： margin:auto;

JavaScript

作用：用于開發交互式的web頁面 1995年時，Netscape（網景）公司推出Navigator瀏覽器網景公司大牛Brendan Eich（布蘭登·艾奇）據說用了10天就把JavaScript搞了出來，剛出來叫LiveScript 微軟參考JavaScript弄了個名為JScript瀏覽器腳本語言 1997年弄出了ECMAScript作為標準。這里ECMAscript和JavaScript可以看做表達的同一個東西。 **JavaScript特點** 1. 它不需要進行編譯，而是直接嵌入在HTML頁面中，**由瀏覽器執行**。 2. JavaScript 被設計用來向 HTML 頁面添加交互行為 3. JavaScript **是一種腳本語言**（腳本語言是一種輕量級的編程語言）。說明：腳本語言就是一種輕量級的編程語言。一般都由相應的腳本引擎來[解釋執行](解釋執行不依賴于平臺，因為編譯器會根據不同的平臺進行解析。例如JS語言無論在windows平臺還是在Lunix平臺都可以使用。故可移植性強。使用解釋執行的程序我們一般稱為解釋程序)。例如JavaScript語言就由瀏覽器引擎來解析和執行。在計算機上不需要安裝其他的軟件。而java語言就不是腳本語言，必須在計算機安裝jdk之后才可以運行。腳本語言除了JavaScript 語言，還有PHP,Python等語言。 4. 重點強調一下：JavaScript(js)是弱類型語言，js變量聲明不需要指明類型，而java屬于強類型語言。例如java中定義變量時會根據不同的數據類型書寫不同的數據類型的關鍵字，而js不是。 **JavaScript組成**| **組成部分** | **作用** | | --------------- | ---------------------------------------------------------- | | **ECMA Script** | 構成了JS核心的語法基礎 | | **BOM** | Browser Object Model 瀏覽器對象模型，用來操作瀏覽器上的對象 | | **DOM** | Document Object Model 文檔對象模型，用來操作網頁中的元素（標簽） |

ECMA Script

基本語法

`js和html整合: 在html中編寫js代碼方式1: 內聯式在html頁面添加 <script>在標簽體中編寫js代碼</script> 方式2: 外聯式1.編寫外部的js文件*.js2.在使用的html頁面引入<script src="外部js文件的位置"></script>注意事項: 1.一個頁面中可以同時出現多個 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中關鍵字typeof可以查看某個變量的具體數據類型，使用格式：typeof 變量名`數據類型：5種基本數據類型和1種引用數據類型數字類型：number 包含了小數和整數布爾類型：boolean 只有兩個值： true（真）| false（假）字符串類型：String 包含字符和字符串，既可以使用雙引號又可以使用單引號未定義類型：undefined 只有一個值，即 undefined未定義空類型：null 只有一個值 null，表示空對象補充:值 undefined 實際上是從值 null 派生來的，因此 ECMAScript 把它們定義為相等的。 alert(null == undefined); 輸出 "true"，盡管這兩個值相等，但它們的含義不同。2、引用數據類型(復合數據類型) object : 對象`運算符： 1、賦值運算符：等號(=), 舉例： var x = 5。 2、比較運算符： > < >= <= == != === !== 注意：1. === 和 == 區別1）=== 比較數據類型，然后比較數值2）== 比較數值，不考慮數據類型2.!== 和 != 的區別1）!== 是 === 的取反2）!= 是 == 的取反3、邏輯運算符： && || ！ && 并且，雙與：只有運算符兩側都為true，結果才是true；一假即假。 || 或者，雙或：只要運算符兩側有一個是true，結果就是true；一真即真。 ! 取反： !true = false; !false=true;注意：1. 在js中，不光boolean值能夠參與邏輯運算。所有的值都能參與邏輯運算2. 數字0，空字符串‘’或者"", false, 空null, undefined, NaN3. NaN: Not a Number 不是一個數字例如： 1 -‘abc’ -> 表示1減去字符’abc’--》不屬于一個數字--》NaN4、算數運算符： + - * / % 注意： + 號比較特殊因為除了可以進行算數運算，還可以進行字符串的拼接。這點和java是一樣的。5、三元運算符：條件表達式1 ? 條件表達式2 : 條件表達式3; `JS流程控制 js也存在if、if-else、switch、for、while、do-while等邏輯語句，與java使用方式一致`var聲明變量全局作用域、let聲明變量是局部作用域`Js函數一、普通函數 js中，通過**function**關鍵字來定義函數格式 function 函數名(參數列表) {//形參類型不需要書寫，直接書寫變量名即可js邏輯代碼 }1、函數需要被調用才能執行。 2、 js中，如果函數需要返回值我們直接return就行了。定義函數的時候不需要聲明返回值的類型，因為js是弱數據類型，返回什么數據類型都是let。 3、在js中，如果我們需要給函數傳遞參數，那么我們直接寫變量名就行，不需要聲明傳入變量的類型。 4、在js中，不存在函數重載的概念，如果2個函數名相同，后面出現的函數會覆蓋前面的函數。1、如果函數的聲明帶有參數，但是調用時不帶參數，函數也可以正常被調用。 2、如果函數聲明時沒有參數列表，調用的時候傳入參數，函數也能照樣執行。 3、在JS中,可以使用arguments來獲取實際傳入的參數。arguments是實參的參數數組。二、匿名函數 function(參數列表){js邏輯代碼 } **第一種：** 將匿名函數賦值給一個變量，使用變量調用函數。 let fn = function(參數列表) {js邏輯代碼 }； **第二種：** 匿名函數直接作為另一個函數的實際參數傳遞。 //調用函數，第二個參數是匿名函數 function fn(x,y){//輸出x和yconsole.log('x='+x); //x=100console.log('y='+y); //y=function(){console.log(5);}//調用匿名函數y(); } fn(100,function(){console.log(5); }); `定時器setInterval var timer = window.setInterval(code, millisec) 按照指定的周期（間隔）來執行函數或代碼片段。參數1： code 必須寫。執行的函數名或執行的代碼字符串。參數2： millisec 必須寫。時間間隔，單位：毫秒。window可以理解為瀏覽器窗口。后面會講解。 timer 返回值：一個可以傳遞給 window.clearInterval(定時器的返回值) 從而取消對 code 的周期性執行的值。在關閉定時器時需要使用定時器的返回值作為參數，否則不知道關閉哪個定時器。例如：方式：函數名， setInterval(show, 1000); show 表示函數名，1000表示每隔1000毫秒執行這個函數。`定時器：setTimeout setTimeout() 在指定的毫秒數后調用函數或執行代碼片段。和setInterval()不同的是setTimeout() 只是執行一次，而setInterval()每隔指定的時間就會執行，如果不停止計時器就會一直執行代碼片段。 window.setTimeout(code,millisec) 參數： code 必需。要調用的函數。 millisec 必需。在執行代碼前需等待的毫秒數。`JavaScript樣式獲取或修改 obj.style.樣式名獲得指定“樣式”的值。樣式名包括標簽的寬、高、背景顏色等。 obj.style.樣式名= 樣式值給指定“樣式”設置樣式。注意：如果屬性有多個單詞使用“-”連接，樣式名書寫的時候需要將“-”刪除，并將后一個單詞首字母大寫。例如：background-color 需要改成 backgroundColor

JS對象

`數組Array let arr = [18]; new Array(); 創建空數組 new Array(3); 創建包含指定個數的數組 new Array(ele1,ele2...); 創建包含指定元素的數組 ## 特征 - 數組長度可變 - 數組中可以存放任何類型的值 ## 常用屬性 - length 長度 ## 常用方法 - join("分隔符"); 按指定的分隔符分割 - sort(); 操作數組結構對數組進行排序 - reverse(); 顛倒數組中元素的順序 - concat();連接兩個或更多的數組，并返回結果sort() 對于排序函數sort如果操作的數組存儲的是字符串，那么就是無參的。按照編碼值升序排序。對于排序函數sort如果操作的數組存儲的是數值，那么就是有參的。按照大小排序。對數組進行排序，不帶參數是按照編碼值進行排序。如果不是按照編碼值排序,那么必須指定比較器。說明：由于字符串都是按照編碼值比較大小的，也可以將這個方法這樣理解使用：如果要對數字進行排序，必須指定比較器。如果是按字符串進行排序，那么就是無參。 // 定義數組 let a1=['kaja','aha','abclaja','0aa','abcde','ahd','AKAJA']; // 使用數組對象中的函數對上述數組進行排序 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; }); 最后結果： [345, 200, 108, 99, 34, 10, 9, 2] 數值大小降序`RegExp正則對象 a.編寫正則表達式var reg = new RegExp(正則表達式, 匹配模式);var reg = /正則表達式/匹配模式匹配模式i: 忽略大小寫g: 全局匹配(模糊匹配)[] : 可選的值有哪些{} : 可選值出現的位數* : 0到多次? : 0次或1次+ : 1次到多次^ : 以什么開頭$ : 以什么結尾b.校驗正則表達式.test("被校驗的字符串"); 返回boolean值let result = reg.test(字符串);`Date對象 - toLocaleString(); ★★★ 根據本地時間格式，把 Date 對象轉換為字符串。 - getFullYear(); 從 Date 對象以四位數字返回年份。 - getMonth(); 從 Date 對象返回月份 (0 ~ 11)。 - getDate(); 從 Date 對象返回一個月中的某一天 (1 ~ 31)。 - getHours() ; 返回 Date 對象的小時 (0 ~ 23)。 - getMinutes(); 返回 Date 對象的分鐘 (0 ~ 59)。 - getSeconds() ;返回 Date 對象的秒數 (0 ~ 59)。 - getMilliseconds() 返回 Date 對象的毫秒(0 ~ 999)。 - getTime() ★★★返回 1970 年 1 月 1 日至今的毫秒數。類似于Java中的System.currentTimeMillis()`全局對象 - parseInt(要轉換的對象); 嘗試轉換為Int類型 "9.9超市" - parseFloat(要轉換的對象); 嘗試轉換為float類型 - String(要轉換的對象); 強制轉換為String類型 - Number(要轉換的對象); 強制轉換為number類型 - Boolean(要轉換的對象)); 強制轉換為Boolean類型 - encodeURI(); 編碼 - decodeURI(); 解碼 - isNaN(); - eval(); 將字符串轉換成js可以執行的代碼 let str = "alert('hello 美女')";`String對象 1.雙引號 2.構造方法了解 let s1=new String("abc"); 3.單引號推薦 let s2='def'; 4.反單引號：let s3 = `efg`; 注意：使用反單引號主要目的為了方便字符串的拼接，省去了字符串+拼接的麻煩 let s3 = `efg`; `${s3}你好` 結果是 efg你好 ${變量}這種寫法只能書寫在反單引號中，${變量}大括號中的變量不一定是反單引號定義的，可以是單引號定義的

BOM瀏覽器對象模型

BOM對象：Browser Object Model 瀏覽器對象模型。把整個瀏覽器當做一個對象來處理。Window對象：表示瀏覽器整個窗口。就是上述空白的地方，不包括工具欄和地址欄。 History對象：表示瀏覽器中的向后和向前的左右箭頭。 Location對象：表示瀏覽器中的地址欄。 Navigator (了解)存放有關瀏覽器的信息 Screen(了解)存放客戶端顯示屏幕的信息 **補充：** 所有JavaScript全局對象、函數以及變量均自動成為window對象的成員。就是都可以使用window對象來調用，例如上述history和location對象都可以使用window對象來調用。舉例：window.history 、 window.location` Window對象（掌握） 1、方法：定時器 setInterval()按照指定的周期（以毫秒計）來調用函數或計算表達式。 clearInterval()取消由 setInterval() 設置的定時器。 setTimeout()在指定的毫秒數后調用函數或計算表達式。2、方法：消息框1）提示框：alert(提示信息);2）確認框：confirm(提示信息);方法返回值：確定返回true取消返回false3）輸入框：prompt(提示信息, 默認值);方法返回值：點擊確定：輸入框的內容點擊取消：null`Lation對象(理解) | **屬性** | **對應的值** | | --------- | ------------------------------------------------------------ | | 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值來實現窗口的跳轉。就是在頁面加載的時候直接訪問http://www.baidu.com** <script type="text/javascript">/** 需求：設置location的href值來實現窗口的跳轉。* 就是在頁面加載的時候直接訪問http://www.baidu.com*/window.location.href="http://www.baidu.com";// alert(window.location.href); </script>`History對象（理解） window.history用來訪問瀏覽器歷史瀏覽記錄。例如： <script type="text/javascript">//點擊按鈕跳轉到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() 據本地時間格式，把 Date 對象轉換為字符串。

DOM文檔對象模型

DOM:document object model 文檔對象模型。用來操作html頁面中所有html標簽的。在使用dom操作html標簽之前，瀏覽器會將html頁面中的標簽加載到內存中形成一個dom樹，上面最大的對象時document。我們可以通過document調用屬性或者函數獲取html標簽。 `標簽屬性和文本的操作 | **屬性名** | **描述** | **element.getAttribute(屬性的名稱); | 根據標簽的屬性的名字來獲取屬性的值 | element.setAttribute(屬性的名稱, 值); | 給標簽設置一個屬性 | element.removeAttribute(屬性的名稱); | 根據標簽的屬性的名字來刪除屬性 | element.children; | 獲取當前元素（標簽）的子元素注意：獲取的子級（一層），不管嵌套(不包括孫子，只包括兒子) | | element.nodeName/tagName; | 獲取標簽名注意：獲取的是大寫的字符串的標簽名 | element.innerHTML; | 獲取當前元素（標簽）的文本內容 <div>哈哈<div> `獲取標簽(元素) document.getElementById(id名稱); 通過元素（標簽）的id屬性值獲取標簽對象，返回的是**單個的標簽對象**注意：只能從document下面去獲取 document.getElementsByName(name屬性名稱); 通過元素（標簽）的name屬性值獲取標簽對象，返回的是標簽對象的**數組**。注意：只能從document下面去獲取 document/parentNode.getElementsByTagName(標簽名); 通過元素（標簽）的名稱獲取標簽的對象,返回的是標簽對象的**數組**。注意：可以從document或者某一個父級標簽下面去document/parentNode.getElementsByClassName(類名); 通過元素（標簽）的class屬性獲取標簽對象，返回的是標簽對象的**數組**。注意：可以從document或者某一個父級標簽下面去獲取1.根據標簽id屬性值獲取標簽對象： ~~~js document.getElementById(id名稱); ~~~ 2.根據標簽名獲取標簽的數組： ~~~jslet arrDivs = document.getElementsByTagName('標簽名'); ~~~ 3.根據name屬性值獲取標簽的數組： ~~~js document.getElementsByName('name屬性值') ~~~ 4.根據class屬性值獲取的數組： ~~~js let arrReds = document.getElementsByClassName('class屬性值'); ~~~ `新增元素 document.createElement(元素名稱); 在頁面上根據標簽名來創建元素，返回創建的標簽（元素）對象注意：只能從document下面去創建元素<li></li>parentNode.appendChild(要添加的元素對象); 在某一個父級元素（標簽)下面去添加一個元素，每次添加到父級元素的**最后面**，相當于一個追加的操作parentNode.insertBefore(要添加的元素對象，在誰的前面添加); 在某一個父級元素（標簽)下面去添加一個元素，可以指定在哪一個子元素（標簽）的前面添加1.創建標簽： ~~~js document.createElement('標簽名') ~~~ 2.添加父標簽的最后一個孩子位置： ~~~js 父標簽對象.appendChild(子標簽對象) ~~~ 3.向父標簽的指定位置添加： ~~~js 父標簽對象.inertBefore(要添加的子標簽對象,添加到哪個子標簽前面的對象) ~~~ `刪除元素 element.remove(); 刪除當前的元素（標簽） parentNode.removeChild(要刪除的子元素); 通過父級元素（標簽）刪除子元素（標簽）

事件

`HTML 事件可以是瀏覽器行為，也可以是用戶行為。如果是瀏覽器行為例如是頁面加載完成事件。如果是用戶行為就是用戶的一切操作都是發生的事件，鼠標操作事件(單擊，雙擊，懸浮等)，鍵盤操作事件(鍵盤錄入等)。`事件和事件源綁定綁定事件:<xxx 事件名="函數名()"></xxx>派發事件: 注意頁面的加載順序1.獲取事件源標簽對象let 標簽對象 = document.getElementById("id標記");2.派發事件標簽對象.事件名 = function(){ js代碼 }`常見事件單擊事件: onclick 表單提交事件: onsubmit 頁面加載成功事件: onload 焦點事件: 獲取焦點: onfocus 失去焦點: onblur表單事件(了解) ondblclick 雙擊事件 onreset 重置 onchange; 改變(熟練使用) 鼠標事件:(了解) onmouseover 懸停 onmouseout 移出 onmousedown 按下 onmouseup 彈起 onmousemove 移動鍵盤事件:(了解) onkeydown 按下 onkeyup 彈起 onkeypress 按住`html標簽綁定事件標簽綁定事件：就是讓上述的js事件作用在某個標簽上`靜態綁定將事件名作為html標簽的屬性名，在屬性值中調用js函數。 <標簽名事件名="調用的js函數" 事件名="調用的js函數"....></標簽名> <div onclick="fn1(this);" onmouseover="fn2(this);" onmouseout="fn3(this);">div1</div>`動態綁定根據dom技術獲取某個標簽對象，使用標簽對象調用事件名，然后將匿名函數賦值事件名。標簽對象.事件名 = function(){ js代碼}`代碼演示 1）靜態綁定：將事件名作為標簽的屬性名，在屬性值中調用js函數 ~~~html <div onclick="fn(this);">柳巖</div> <script type="text/javascript">// 1、給div標簽綁定單擊事件,輸出div的文本function fn(obj) {//obj=thisconsole.log(obj.innerHTML);} </script> ~~~ 2)動態綁定：使用標簽對象調用js事件，使用匿名函數給其賦值 ~~~js let oDiv = document.getElementsByTagName('div')[0];//給上述div動態綁定js單擊事件oDiv.onclick = function () {//this表示調用當前事件onclick的標簽對象oDiv// console.log(oDiv.innerHTML);console.log(this.innerHTML);}; ~~~`靜態綁定和動態綁定區別靜態綁定缺點：js和html標簽耦合在一起動態綁定：解耦合。

案例：

案例1-注冊表單校驗

【1】鼠標離開輸入框的事件，離焦事件onblur

【2】點擊提交按鈕執行的提交事件onsubmit。

? 補充：

? 1.對于onsubmit事件表示表單提交就執行的事件，如果阻止表單提交，那么該事件綁定的函數返回false，如果提交表單，那么該事件綁定的函數返回true，默認返回的是true。

? 2.在js中阻止事件都是返回false，不阻止返回true，默認是true。

需求分析:當點擊"表單提交"按鈕時,對表單中的數據進行校驗,如果用戶輸入的數據滿足我們想要的格式,則表單可以提交,反之不允許提交.技術分析:事件: onsubmitdom: 獲取標簽對象,并獲取屬性的值正則: /^[a-zA-Z_$][0-9a-zA-Z_$]{5,11}$/ 步驟分析:1.確定事件給表單綁定表單提交事件<form action="#" onsubmit="return checkForm()"></form>2.編寫事件調用的函數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>';// 關閉開關flag = false;}if(zz.test(password)){// 滿足格式,顯示成功的提示信息document.getElementById("passwordMsg").innerHTML='<font color='green'>?</font>';}else{// 不滿足格式,顯示失敗的提示信息document.getElementById("passwordMsg").innerHTML='<font color='red'>?輸入不合法</font>';// 關閉開關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>';// 關閉開關flag = false;}if(zz.test(password)){// 滿足格式,顯示成功的提示信息document.getElementById("passwordMsg").innerHTML='<font color="green">?</font>';}else{// 不滿足格式,顯示失敗的提示信息document.getElementById("passwordMsg").innerHTML='<font color="red">?輸入不合法</font>';// 關閉開關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秒后跳轉到百度官網

需求分析:當頁面加載成功5秒后,跳轉到黑馬官網技術分析:事件: 頁面加載事件定時器: setTimeout(函數,5000);location.href = "路徑"; 步驟分析:1.確定事件onload = function(){// 設置單次執行定時器setTimeout(jumpFun,5000);}2.編寫jumpFun函數function jumpFun(){// 跳轉到黑馬官網location.href="路徑";}

示例代碼:

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script>let interId;onload = function(){// 設置單次執行定時器//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>秒后跳轉到黑馬官網</h1> </body> </html>

案例3-全選和全不選和反選

需求分析:當點擊"全選/全不選"復選框時,讓其他復選框的狀態與之保持一致. 技術分析:事件: 單擊 onclick操作屬性:checked 步驟分析:1.確定事件給"全選/全不選"復選框綁定單擊事件<input id="all" type="checkbox" onclick="checkAll()" />2.編寫checkAll函數function checkAll(){//1.獲取"全選/全不選"復選框的狀態 checkedlet flag = document.getElementById("all").checked;//2.獲取其他復選框對象,并設置checked屬性}

示例代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script>function checkAll(obj) {//1.獲取"全選/全不選"復選框的狀態 checked//let flag = document.getElementById("all").checked;let flag = obj.checked;//alert(flag);//2.獲取其他復選框對象,并設置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/><input type="checkbox" id="all" onclick="checkAll(this)" />全選/全不選  <input type="button" id="reverse" onclick="reverseSelect()" value=" 反選 "/>  </body> </html>

案例4-省市二級聯動

需求分析:當省份的下拉選改變時,根據選中的省份,查詢對應的市,將查詢到的市動態的展示到市的下拉選中. 技術分析:事件: onchange操作標簽體: innerHTML 步驟分析:1.確定事件給省份下拉選添加改變事件<select name="pro" onchange="changePro(this)"></select>2.編寫changePro函數function changePro(obj){//1.獲取value屬性的值let val = obj.value;//2.從二維數組中查找對應的市數組let cityArr = arr[val];//3.遍歷市數組,將每一個市拼成option,追加到市的下拉選中let cityStr = '';for(let i=0;i<cityArr.length;i++){cityStr+='<option>'+cityArr[i]+'</option>'}// 獲取市的下拉選對象,并設置標簽體內容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": "閔行區","c_id": "mh"},{"c_name": "徐匯區","c_id": "xh"},{"c_name": "黃浦區","c_id": "hp"},{"c_name": "浦東新區","c_id": "pd"}]} ];

代碼

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title></title><script>// 定義二維數組: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.從二維數組中查找對應的市數組let cityArr = arr[val];//3.遍歷市數組,將每一個市拼成option,追加到市的下拉選中let cityStr = '<option>==請選擇==</option>';for(let i=0;i<cityArr.length;i++){cityStr+='<option>'+cityArr[i]+'</option>'}// 獲取市的下拉選對象,并設置標簽體內容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> 市區： <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-表格隔行換色

需求分析:當頁面加載成功后,給表格的奇數行和偶數行分別添加不同的背景顏色,表頭除外. 技術分析:事件: 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>手機數碼</td><td>手機數碼類商品</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、為頁面設置加載事件onload

2、給輪播圖的圖片設置一個id

3、根據id來獲取到輪播圖的圖片

4、開啟定時器，2000毫秒重新設置圖片的src屬性

需求分析:當頁面加載成功后,設置一個周期執行定時器,每隔2秒鐘切換一張圖片,實現輪播效果技術分析:事件: onload定時器: setInterval(changeImg,2000);dom操作: 改變圖片的路徑步驟分析://1.確定事件onload=function(){// 設置周期執行定時器setInterval(changeImg,2000);}//2.編寫changeImg函數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(){// 設置周期執行定時器setInterval(changeImg,2000);}//2.編寫changeImg函數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)
參數：
code 必需。要調用的函數。
millisec 必需。在執行代碼前需等待的毫秒數。
注意：
該定時器只執行一次

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>定時彈出廣告</title> </head> <body>  <div align="center"><div style="color: darkgreen; font-size: 50px">王者榮耀皮膚</div><div><img src="./img/0.jpg" id="imgId" width="500px" height="300px" ></div><div align="left" id="txtAdvert" style="display: none"><div style="color: red; font-size: 2px">驚喜!還有這種優惠！</div><div><img src="img/index.jpg" id="advertId" width="100px" height="100px" ></div></div> </div><script type="text/javascript">let oImg = document.getElementById('imgId');let i = 1window.setInterval(function () {oImg.src = "img/"+i+".jpg";if(i === 4 ){i = 0;}i++;},3000);let oTxtAdvert = document.getElementById('txtAdvert');window.setInterval(function () {setTimeout(function () {oTxtAdvert.style.display = 'block';},3000);},6000);</script> </body> </html>

案例8-會跳動的時鐘

1.在頁面上創建一個h1標簽，用于顯示時鐘，設置顏色和大小。
2.一開始暫停按鈕不可用，設置disabled屬性，disabled=true表示不可用。
3.創建全局的變量，用于保存計時器
4.為了防止多次點開始按鈕出現bug，點開始按鈕以后開始按鈕不可用，暫停按鈕可用。點暫停按鈕以后，暫停按鈕不可用，開始按鈕可用。設置disabled=true。
5.點開始按鈕，在方法內部每過1秒中調用匿名函數，在匿名函數內部得到現在的時間，并將得到的時間顯示在h1標簽內部。
6.暫停的按鈕在方法內部清除clearInterval()的計時器。

<body><div align="center"><h3 style="color: darkgreen; font-size: 100px" >北京時間</h3><h2 style="color: darkgreen; font-size: 50px" id="timeTxt"></h2><input type="button" value="開始" id="start" disabled="disabled">  <input type="button" value="暫停" id="pause" > </div><script type="text/javascript">let oStart = document.getElementById('start');let oPause = document.getElementById('pause');let oTimeTxt = document.getElementById('timeTxt');let clockTimer// alert(oStart.innerHTML)// alert(oStart)oStart.disabled = false;oStart.onclick = function () {oStart.disabled = true;oPause.disabled = false;clockTimer = window.setInterval(function () {let date = new Date();oTimeTxt.innerHTML = date.toLocaleString();}, 1000);}oPause.onclick = function () {oPause.disabled = true;oStart.disabled = false;clearInterval(clockTimer);}</script></body>

總結

以上是生活随笔為你收集整理的01-HTML+CSS+JS【常用总结+案例练习】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【安全知识分享】建筑项目施工新员工安全基
下一篇： HTML5页面的基本框架结构