前端HTML CSS JavaScipt JQuery
Web前端基礎
應用程序分類
客戶端/服務器
Client/Server CS模式
用戶需要下載客戶端才能使用。如微信、QQ、游戲等。
特點：功能豐富，安裝繁瑣、需要更新、平臺不同，軟件不同，開發成本高。
瀏覽器/服務器
Browser/Server BS模式
用戶只需一個瀏覽器即可使用。如網頁QQ、商業網站等。
特點：功能較為豐富，無需安裝軟件，只需一個瀏覽器，無需更新，平臺無關，開發時只需設計一套頁面。
B/S模式下，用戶訪問便捷，無需安裝多余軟件，企業開發成本低。
所以B/S模式是Java主要開發的模式，一個WEB項目，需要瀏覽器、服務器和數據庫。
用戶通過瀏覽器訪問服務器上的某個地址或頁面，將數據傳遞到后端，再將數據交到數據庫進行訪問和維護。
整個系統中，頁面部分起著承接的作用，可以用于收集用戶數據和呈現服務端的內容。
程序員既要開發服務器端的內容，也要掌握如何將數據渲染在頁面，如何通過頁面獲取用戶數據。
學習Web基礎，就是學習如何編寫頁面，如何通過瀏覽器呈現數據。
Web前端基礎學習路線
HTML --> CSS --> JavaScript --> Jquery
HTML
Hyper Text Markup Language 超文本標記語言
超文本
可以理解為超級文本：超越了文本的限制，如圖片、音頻、視頻等。
也可以理解為超鏈接文本：通過某個連接，可以訪問互聯網中的任意地址。
標記
可以稱為標簽。用<>括起來的一個特定的單詞。
標簽分為單標簽和雙標簽。
單標簽：<meta 屬性名="屬性值"/>
雙標簽：<body 屬性名="屬性值"></body>
標簽中可以加入屬性，雙標簽中可以繼續嵌套標簽。
用HTML標簽寫出的文件保存為.html文件，稱為頁面文件。
標簽的屬性
在標簽中，通過加入 屬性名=“屬性值” ,就可以讓某個標簽擁有指定的特征。
<標簽名 屬性1="值" 屬性2="值" ></標簽名><html><head><!--charset就是一個屬性， utf-8就是該屬性的值--><meta charset="utf-8"/></head><body><!--src就是一個屬性--><img src="圖片路徑"></body> </html>瀏覽器
瀏覽器是用于"運行"HTML頁面的平臺。
用HTML語言寫出來的網頁文件，需要瀏覽器對其解釋渲染。
瀏覽器與HTML文件的關系類似于JVM與java文件的關系。
常用瀏覽器
Chrome 谷歌瀏覽器
Edge Windows自帶的瀏覽器，IE的升級版
FireFox 火狐瀏覽器
safari ios平臺自帶瀏覽器
頁面的基本組成結構
<!-- HTML中的注釋 --> <!-- DOC文檔TYPE類型 說明當前頁面的文檔類型 HTML5--> <!DOCTYPE html> <html><head><!-- meta元 設置頁面的屬性 charset字符集 utf-8表示支持中文的編碼格式 --><meta charset="utf-8"><title>頁面標題</title></head><body>頁面主題內容sdfsdfsdf</body> </html>HTML中表示顏色的方式
顏色的單詞
red、green、blue、pink、gold、gray、orange、brown、purple、skyblue…
顏色的十進制RGB
RGB表示紅綠藍，每個顏色通過0-255范圍內的數字表示其顏色的深淺
RGB(0,0,0) 黑色
RGB(255,255,255) 白色
RGB(255,0,0) 紅色
RGB(255,0,255) 紫色
顏色的十六進制RGB
#000000 黑色
#FF0000 紅色，可以簡寫為#F00
#00FF00 綠色
#00FFFF 青色
常用標簽
頁面中的標簽，也稱為頁面中的元素或節點。所有的元素可以分為兩大類。
標簽的類型
塊級元素
如果一個標簽占滿整行，稱這個標簽為塊級元素。
行內元素
如果一個標簽占一行中的一部分，稱這個標簽為行內元素。
單標簽
| <input /> | 表單元素 | 行內元素 |
| <img src="圖片路徑" alt="替換圖片的文字" title="鼠標懸停時提示文件" width="圖片寬度" height="圖片高度"/> | 圖片 | 行內元素 |
| <br/> | 換行 | 塊級元素 |
| <hr/> | 水平線 | 塊級元素 |
雙標簽
文字
| <h1></h1>~<h6></h6> | 一級標題~六級標簽，文字加粗，一級標題最大 | 塊級元素 |
| <p></p> | 段落 | 塊級元素 |
| <span></span> | 行內標簽 | 行內元素 |
| <sub></sub> | 文字下標 | 行內元素 |
| <sup></sup> | 文字上標 | 行內元素 |
| <b></b> | 文字加粗 | 行內元素 |
| <i></i> | 文字傾斜 | 行內元素 |
| <u></u> | 下劃線 | 行內元素 |
| <font color="" size="" face=""></font> | 已過時。字體 |
iconfont-阿里巴巴矢量圖標庫
HTML Emoji | 菜鳥教程 (runoob.com)
圖片img
<img>單標簽，行內元素
<img src="圖片路徑" alt="無法顯示圖片時的文字" title="鼠標懸停時的文字" width="寬度" height="高度">圖片路徑可以使用相對路徑或絕對路徑
- 絕對路徑：文件在計算機中的完整路徑
- 相對路徑：從當前頁出發，找到圖片所在位置
- 使用"…/"跳出當前目錄
- 使用"xxx/"進入xxx目錄
列表ul/ol/li
雙標簽，都是塊級元素，li寫在ul或ol標簽中
通常使用列表實現頁面的水平導航、垂直導航
無序列表ul
默認每個li前用實心圓修飾，通過type屬性更改
- square 正方形
- dist 默認實心圓
- circle 空心圓
- none 去掉修飾
有序列表ol
默認每個li前用數字修飾，通過type屬性更改
- a/A
- i/I
- 1
表格table
雙標簽，table是塊級元素，tr、th、td是行內元素
| table | 定義表格 |
| tr | 表格中的行 |
| td | 一行中的單元格 |
| th | 特殊的td，文字加粗居中，使用th實現表頭 |
合并行rowspan=“n”
給td添加該屬性，表示n行合1行
合并列colspan=“n”
給td添加該屬性，表示n列合1列
<table border="1" width="400px"><tr><th></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><tr><td rowspan="2">上午</td><td>語文</td><td>數學</td><td>英語</td><td>數學</td><td>語文</td></tr><tr><td>數學</td><td>語文</td><td>數學</td><td>語文</td><td>英語</td></tr><tr><th colspan="6">午休</th></tr><tr><td rowspan="2">下午</td><td>語文</td><td>數學</td><td>數學</td><td>英語</td><td>語文</td></tr><tr><td>英語</td><td>數學</td><td>語文</td><td>數學</td><td>語文</td></tr> </table>a標簽
<a>顯示文字</a>，行內元素
| href | 訪問某個鏈接。如果要訪問錨點，#開頭 |
| target | _self:默認自身頁面訪問，_blank:空白頁面訪問，_parent:父頁面訪問，某個iframe的name:在指定的iframe中訪問 |
| name | 定義錨點 |
超鏈接
<!-- 訪問某個域名 --> <a href="http://baidu.com">跳轉到baidu</a> <!-- 訪問當前項目中的頁面 --> <a href="列表與表格.html">跳轉到表格頁面</a> <!-- 訪問資源 --> <a href="../imgs/flower.webp">跳轉到圖片</a>錨點
1.設置錨點
<a name="錨點名"></a>2.訪問錨點
<a href="#錨點名">訪問錨點</a>浮動框架iframe
在頁面中嵌入一個頁面。
<a target="某個iframe的名稱" href="某個路徑">訪問</a><iframe width="100%" height="600px" name="該iframe的名稱"></iframe>marquee標簽
<!--scrollamount移動速度--> <!--direction方向 left right up down--> <!--behavior行為 alternate往復移動 scoll重復滾動 slide滑到頂端--> <marquee scrollamount="10" direction="right" behavior="scoll">一段文字 </marquee>多媒體
公用屬性
- controls：顯示控制器
- muted：靜音
- autoplay：自動播放。chrome瀏覽器視頻需要添加muted屬性后才能使用autoplay
- loop：循環
音頻
<audio controls autoplay muted loop><source src="音頻文件路徑"></source> </audio>視頻
<video controls autoplay muted loop><source src="視頻文件路徑"></source> </video>表單與表單元素
表單form
雙標簽，塊級元素，用于接收用戶輸入的數據
<form action="表單提交路徑" method="表單提交方式"></form>| action | 可以是某個頁面或某個控制器的路徑 | 將表單中的數據提交到指定路徑 |
| method | post/get | 默認為get，提交的數據會暴露在地址欄中，數據長度有限制。post方式不會存在這些問題 |
表單元素
| input | 單標簽，行內元素。通過改變type屬性值，變化為不同的表單元素 |
| select | 雙標簽，行內元素。下拉框 |
| option | 雙標簽，select的子標簽，下拉菜單中的選項。value屬性表示該選項的值，如果不設置，value值默認為option標簽中的文本 |
| textarea | 雙標簽，行內元素。文本域。 |
| text | 文本框 |
| password | 密碼框 |
| radio | 單選按鈕 |
| checkbox | 復選框 |
| date | 日歷 |
| number | 數字選擇器 |
| file | 提交文件 |
| hidden | 隱藏域 |
| button | 普通按鈕 |
| reset | 重置按鈕 |
| submit | 提交按鈕 |
| name | 用于提交表單時設置提交的參數名 |
| value | 用于輸入框的默認值或單選復選按鈕的默認值 |
| required | 用于輸入框或按鈕設置為必填或必選項 |
| placehoder | 用于輸入框的默認提示文字 |
| checked | 用于單選按鈕和復選框默認選中 |
| selected | 用于下拉菜單默認選中 |
| readonly | 只讀 |
| disabled | 讓某個元素失效 |
| min/max/step | number獨有，設置最小/最大/步長 |
| rows/cols | textarea獨有，設置行數/列數 |
div標簽
雙標簽，塊級元素，沒有任何特點。
頁面的主流布局就是采用div。
CSS
Cascading Style Sheets 層疊樣式表
用于控制HTML中標簽樣式的語言。
可以精確到像素，用于美化HTML標簽。
CSS語法
樣式名:樣式值;
選擇器
用于選中頁面中元素(標簽)的工具
ID選擇器
1.給某個標簽添加id的屬性，對其命名
2.通過**#id名**獲取
通常用于獲取某一個元素，id名稱不要沖突
類選擇器
1.給某些標簽添加class的屬性，對其命名
2.通過**.class名**獲取
通過用于獲取一組元素
元素選擇器/HTML選擇器/標簽選擇器
直接通過標簽名獲取元素，獲取所有對應標簽。
后代選擇器
*表示所有元素
- 空格
- 得到所有子元素
- >
- 得到第一層子元素
群組選擇器
使用逗號將多個選擇器同時選中
p,#md,.mp{} <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>p{color: green;}/* #test{color: red;} */#mp{color: red;}.mp{color: blue;}/* #md下的所有子標簽p */#md p{font-size: 18px;}/* #md下的第一層標簽p */#md>p{background-color: cadetblue;}#md,#md2{font-weight: bold;}</style></head><body><div id="md"><p id="mp">這是一段文字</p><p class="mp">這是一段文字</p><p class="mp">這是一段文字</p><p>這是一段文字</p><p>這是一段文字</p><div id="md2"><p>這是一段文字</p><p class="mp" id="test" style="color: black;">這是一段文字</p><p>這是一段文字</p></div></div></body> </html>CSS寫在哪里
寫在某個標簽的style屬性中
<div style="樣式名:值;"></div>寫在head標簽下的style標簽中
<html><head><style>選擇器{樣式:值;樣式:值;}</style></head> </html>寫在一個獨立的css文件中
1.新建一個.css文件，在其中編寫css樣式
*{margin:0;padding:0; }2.在頁面中通過link標簽導入
<html><head><!--導入css文件--><link rel="stylesheet" href="xxx.css"></head> </html>選擇器的優先級
內嵌在style標簽 >> id選擇器 >> class選擇器 >> 標簽選擇器
在選擇某個元素時，盡量將其層次關系寫具體，如a b c{}
常用樣式
尺寸
只有塊級元素才能設置尺寸。
如果要對某個行內元素設置尺寸，需要先將其轉換為塊級元素。
| width | px/百分比/vw | width:100px/50%/30vw; |
| height | px/百分比/vh | height:100px/50%/30vh; |
背景background
| background-color | 背景色 | 顏色的單詞、十進制RGB、十六進制RGB |
| background-image | 背景圖 | url(圖片路徑) |
| background-size | 背景圖片尺寸 | cover覆蓋、百分比。 cover會完全將區域覆蓋。100%會完整顯示圖片。 |
| background-position | 背景圖片位置 | 10px表示同時向下和向右移動10px |
| background-repeat | 背景圖片是否重復 | 默認重復 no-repeat不重復 repeat-x表示x軸重復 repeat-y表示y軸重復 |
| background-attachment | 背景圖片固定 | fixed表示將背景圖片固定，不隨滾動條滾動 |
| background | 背景樣式簡寫 | 可以同時設置以上多個參數，如 background:#f00 url(圖片地址) no-repeat center 表示圖片能加載則顯示圖片，不能加載顯示背景色，背景圖不重復，居中顯示 |
背景漸變
漸變色css代碼自動生成https://uigradients.com
background: linear-gradient(to 方向, 顏色1, 顏色2，顏色3...) 方向：left right top bottom background: linear-gradient(to right, #fdeff9, #ec38bc)邊框border
邊框會"套"在元素外層，元素原本大小不變，最終所占頁面區域大小為元素大小+邊框寬度
| border-style | 邊框線條樣式 | solid、double、dashed、dotted |
| border-width | 邊框寬度 | px |
| border-color | 邊框顏色 | 顏色的三種寫法 |
| border | 同時設置所有邊框線條、寬度和顏色 | border:1px solid red |
| border-方向-樣式 | 某方向的style或width或color，方向為left、right、top、bottom | border-left-color:red |
| border-方向 | 同時設置某邊框線條、寬度和顏色 | border-top:1px dotted blue; |
| border-上下方向-左右方向-radius | 設置某個方向的邊框為圓角。 | |
| border-radius | 同時設置四個角為圓角。如果正方形，值為邊長的一半，則為圓形 | |
| outline | 輪廓。input文本框默認獲得焦點時，會顯示一個輪廓，通常設置為none去掉輪廓 | |
| border-collapse | 合并相鄰邊框。通常用于合并表格中的td的邊框。 | 表格{border-collapse:collapse} |
字體
| font-size | 字體大小 | 像素。默認16px，最小12px |
| font-weight | 字體粗細 | lighter細，bolder粗 |
| font-family | 字體字型 | 默認微軟雅黑 |
文本
| color | 文本顏色 | 顏色的三種寫法 |
| text-decoration | 文本修飾 | underline下劃線 line-through刪除線 overline上劃線 通常給頁面中的所有a標簽設置text-decoration:none去掉a標簽默認的下劃線 |
| text-align | 文本對齊方式 | 默認left左對齊，right右對齊，center居中 |
| line-height | 行高 | 設置為與文字相同大小時，行間距為0。"垂直居中"時，將行高設置為容器高度。 |
| text-indent | 首行縮進 | 根據文字大小設置縮進的像素。如默認文字16px，首行縮進2個字符，則設置為32px; |
| text-shadow | 文本陰影 | 顏色 水平位置 垂直位置 模糊程度。如#000 4px 5px 3px表示水平向右4px，垂直向下5px，模糊3px |
| letter-spacing | 字符間距 | 像素 |
| word-break | 英文換行方式 | 默認break-word以單詞為單位換行，不會拆分單詞。 break-all以字母為單位換行，會拆分單詞。 |
列表
| list-style-type | 設置列表li前的標記 | 通常設置為none去除標記 |
| list-style-position | 設置列表li前的標記的位置 | 默認outside，標記位于li之外；inside表示標記位于li之中 |
| list-style-image | 設置列表li前的標記為圖片 | url(圖片地址) |
鼠標樣式cursor
| pointer | 指示鏈接的指針(手) |
| move | 可移動的十字箭頭 |
| help | 帶問號的箭頭 |
| progress | 帶載入的箭頭 |
| wait | 載入狀態 |
| crosshair | 十字線 |
| text | 光標 |
偽類
表示某個元素的某種狀態
用于對某些元素在不同的狀態下呈現不同的效果
如a標簽有訪問前、懸停時、按下時、訪問后四種狀態對應四個偽類
| a:link | 未訪問時 |
| a:hover | 鼠標懸停 |
| a:active | 鼠標按下 |
| a:visited | 訪問后 |
:hover可以適用于很多標簽，如#xx:hover，表示鼠標懸停在id為xx的元素上時
追加內容，通過context屬性編輯追加的內容，同時可以設置其他樣式。
| :after | 之后 |
| :before | 之前 |
顯示方式display
控制元素的類型或是否顯示。
| block | 將元素設置為塊級元素，這樣元素就能獨占一行，能設置尺寸 |
| inline | 將元素設置為行內元素，這樣元素占一行中的一部分，不能設置尺寸 |
| inline-block | 將元素設置為行內塊，這樣元素占一行中的一部分，能設置尺寸 |
| none | 將元素不顯示，不保留元素位置 |
浮動float
讓某個元素脫離原本的位置，朝某個方向對齊
| left | 向左浮動 |
| right | 向右浮動 |
| none | 清除浮動 |
float:left和display:inline-block的區別
相同點：都能讓多個塊級元素成為行內塊。
display:inline-block
多個元素最終位于同一行內，可以設置尺寸，元素以下線對齊，保留該行位置，保留元素間的縫隙，后續元素為新的一行
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-J70SoTSw-1681376355475)(HTML&CSS&JS&JQuery.assets/image-20230330113545743.png)]
float:left
多個元素最終位于同一行內，可以設置尺寸，元素以上線對齊，不保留該行位置，不保留元素間的縫隙，后續元素會緊鄰
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-qtSbPbDX-1681376355476)(0413前端部分/CSS.assets/image-20230330113726245.png)]
盒子模型
頁面中的所有塊級元素，都是一個"盒子"，每個"盒子"由元素自身、內邊距padding、邊框border、外邊距marjin組成。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-cTJuR6Lu-1681376355476)(0413前端部分/CSS.assets/image-20230330142609174.png)]
邊框border：元素外的一圈
內邊距padding：邊框與元素自身之間的距離
外邊距marjing：元素A的邊框與元素B的邊框之間的距離
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-1jMweK0x-1681376355476)(0413前端部分/CSS.assets/image-20230330143014516.png)]
| padding | 內邊距。1個參數表示同時設置4個方向。2個參數表示上下 左右。3個參數表示上 左右 下。4個參數表示上 右 下 左順時針。 |
| margin | 外邊距。1個參數表示同時設置4個方向。2個參數表示上下 左右。3個參數表示上 左右 下。4個參數表示上 右 下 左順時針。如果值設置為auto，表示自動將所在的容器剩余距離除以2。 |
| padding-方向 | 某個方向的內邊距。方向可以是left、right、top、bottom |
| margin-方向 | 某個方向的外邊距。 |
一個元素的所占位置是外邊距+邊框+內邊距+元素自身大小。
如果讓某個塊級元素居中，使用margin:上下距離 auto;
盒子模型陰影
元素{box-shadow:#000 4px 4px 4px; }溢出overflow
處理子元素超出父元素的部分
| visible | 默認，溢出部分顯示 |
| hidden | 溢出部分隱藏 |
| scroll | 溢出部分使用滾動條控制 |
定位position
將元素以像素為單位調整位置
| fixed | 固定定位 | 讓元素固定在頁面的某個位置，不會頁面的滾動而改變位置。 |
| absulote | 絕對定位 | |
| relative | 相對定位 |
配合定位使用樣式
| left | 元素距離頁面左邊界的左右距離 | 正值向右，負值向左 |
| top | 元素距離頁面上邊界的上下距離 | 正值向下，負值向上 |
| right | 元素距離頁面右邊界的左右距離 | 正值向左，負值向右 |
| bottom | 元素距離頁面下邊界的上下距離 | 正值向上，負值向下 |
文檔流
頁面中每個元素默認都有自己的位置，這個位置稱為文檔流。
如果某個元素脫離文檔流，就會失去它原本所占的位置，后續元素就會頂替其位置。
可以通過浮動float、固定定位positon:fixed、絕對定位positon:absolute讓元素脫離文檔流。
脫離文檔流后，通過改變left、right、top和bottom移動其位置。
固定定位fixed
讓某個元素脫離文檔流，默認根據頁面的四個邊界進行定位。
絕對定位absolute
讓某個元素脫離文檔流，根據已定位的父元素進行定位。如果沒有已定位的父元素，會根據body定位。
相對定位relative
元素不會脫離文檔流，根據它原本的位置進行定位，定位原點是元素本身的位置。
層疊z-index
對于已定位的元素，可以通過z-index調整層疊順序，值是一個數字，越大離眼睛越近。
#md1{position:relative; z-index:10; } #md2{position:relative; z-index:0; }不透明度opacity
設置某個元素的不透明度，0~1之間的小說表示不透明度。1完全不透明，0完全透明。
如果只是定義背景透明時，使用rgba(red,green,blue,alpha)，alpha使用
div{/*讓div中的所有內容都半透明，如文字*/background-color:#000;opacity:0.5;/*讓div背景半透明，其中的內容不受影響*/background-color:rgba(0,0,0,0.5); }轉換transform
改變元素的狀態，如旋轉、移動、縮放等
| rotate(30deg) | 順時針2D旋轉30度 |
| rotateX/Y/Z(30deg) | 沿X/Y/Z軸3D旋轉30度 |
| translateX/Y(50px) | 朝X或Y軸平移50像素 |
| translate(10px,30px) | 朝右移動像素px,下移動30像素 |
| scale(1.5) | 縮放1.5倍 |
以上所有效果可以通過transform:效果1 效果2 … 同時設置
transform: rotate(30deg) translateX(100px) scale(1.2)過渡transition
設置某個轉換效果完成所需的時間等參數
| transition-duration:3s | 轉換所需時間 |
| transition-delay: 2s | 延時生效 |
| transition-timing-function:linear | 時間函數，linear表示勻速 |
| transition:4s 1s linear | 在1s后，勻速在4s內完成過渡 |
自定義動畫animation
1.定義動畫的關鍵幀
@keyframes 動畫名{0%{/*該階段的樣式*/樣式名:值;}25%{}50%{}75%{}100%{} }2.給某個元素設置animation樣式
#xxx{/*指定動畫名*/animation-name:動畫名;/*動畫執行時間*/animation-duration:3s;/*延時*/animation-delay:3s;/*動畫執行次數 infinite無限*/animation-iteration-count:4;/*動畫時間函數 linear勻速 ease-in ease-out ease-in-out*/animation-timing-function:linear;/*簡寫 只寫一個時間表示用時 寫兩個時間表示第一個是用時，第二個是延時*/animation:動畫名 5s 2s infinite linear; }| animation-name:動畫名 | 執行指定動畫 |
| animation-duration:3s | 動畫執行時間 |
| animation-delay:3s | 動畫延時時間 |
| animation-iteration-count:3 | 動畫執行次數，infinite表示無限 |
| animation-timing-function:linear | 動畫執行時間函數，linear表示勻速 |
| animation:動畫名 5s 2s | 簡寫。只寫一個時間表示用時 寫兩個時間表示第一個是用時，第二個是延時 |
濾鏡filter
<div class="img_filter"><div style="filter: grayscale(100%);">灰度grayscale(100%)</div><div style="filter: blur(2px);">模糊程度blur(2px)</div><div style="filter: brightness(50%);">亮度brightness(50%)</div><div style="filter: contrast(150%);">對比度contrast(150%)</div><div style="filter: hue-rotate(180deg);">色相旋轉hue-rotate(15deg)</div><div style="filter: saturate(300%);">飽和度saturate(300%)</div><div style="filter: sepia(100%);">深褐色sepia(100%)</div><div style="filter: invert(100%);">顏色反轉invert(100%)</div><div style="filter: contrast(150%) saturate(150%) hue-rotate(30deg)">重疊濾鏡</div> </div>[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-61BcMTcm-1681376355476)(0413前端部分/CSS.assets/image-20230403101926444.png)]
作業
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-zphzwqoF-1681376355477)(0413前端部分/CSS.assets/image-20230329171618212.png)]
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-GzJJHINB-1681376355477)(CSS.assets/image-20230329171601926.png)]
JavaScript
1995年網景公司推出，簡稱為JS，
是一門弱類型的面向對象的解釋型腳本語言。
弱類型：沒有數據類型的限制
解釋型：無需編譯，通過解釋器解釋運行，瀏覽器就是一個JS解釋器
script腳本：按指令依次執行
JS的作用
HTML用于定義頁面的內容。
CSS用于控制頁面的外觀和樣式。
JS用于控制頁面的行為。
- 可以在頁面中控制任意元素
- 可以在頁面中動態嵌入元素
- 可以操作瀏覽器
- 可以與用戶進行交互
- …
JS寫在哪里
寫在script標簽中
script標簽是一個雙標簽，可以放在頁面中的任意位置。
<!DOCTYPE html> <html><head><meta charset="utf-8" /><!--寫在head中時，通常用于導入js文件--><script></script><title></title></head><body><!-- 通常將JS的代碼寫在body標簽結束之前，保證頁面中的元素加載完成 --><script>// js代碼</script></body></html>寫在某個標簽的某個事件中
通常用于調用寫好的js方法
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title></head><body><button onclick="alert('hello');">點擊</button></body></html>寫在一個獨立的js文件中
1.新建一個.js文件，在其中編寫js代碼
alert("hello");2.在頁面中通過script標簽導入
<body><script src="xxx.js"></script> </body>JS中輸出的方式
控制臺輸出
console.log(內容);提示框輸出
alert(內容);頁面輸出
document.write(內容);JS的組成
ECMAScript
簡稱ES，是JS的標準，也是JS的核心語法。
BOM
瀏覽器對象模型，用于操作瀏覽器。
DOM
文檔對象模型，用于操作元素。
ECMAScript核心語法
數據類型
原始類型
| 數值型number | 表示任意數字 |
| 字符串string | 用單引號或雙引號引起來的都是字符串 |
| 布爾型boolean | true/false |
| 未定義undefined | 當某個變量沒有聲明或沒有值時 |
| 空null | 某個引用類型變量通過null設置為空 |
引用類型
如對象、數組、函數等都是引用類型
定義變量
var/let 變量名; var name; var age; let sex;標識符的命名規則
- 由字母、數字、下劃線和$符號組成
- 不能以數字開頭
- 不能使用js中的關鍵字
變量的初始化
//先定義后負值 var name; name="Tom"; //定義的同時賦值 var age=20; //同時定義多個 var a,b,c;運算符
js中的boolean類型，0可以表示false，非0可以表示true。
默認true為1，可以用true或false當做數字來運算。
-
算術
+ - * / %+ 兩端如果有一段是字符串，作為拼接使用 + 兩端都是數值，作為相加使用除+外，其余符號都能計算字符串 -
關系
> < >= <= != == 用法同java，比較結果為boolean類型 == 比較值是否相同，不比較數據類型。 如123=="123"結果為true=== 比較值和數據類型是否同時相同。 如123==="123"結果為false，123===123結果為true !== 比較值和數據類型是否同時不同。 如"123"!==123結果為true -
邏輯
&& || ! 用法同java -
賦值和復合賦值
= += -= *= /= %=a*=b+c相當于a=a*(b+c) 符號兩端當做整體運算后賦值給符號左側變量 -
自增自減
++ -- 符號在前，先+1或-1后使用 符號在后，先使用后再+1或-1如果獨立成行，都為+1或-1 var num=1; num++; ++num; console.log(num);//3var i=10; var res=i-- - --i; //10 - 8 i最終為8 -
條件
表達式1?表達式2:表達式3判斷表達式1的結果，結果為true，執行表達式2，結果為false執行表達式3
條件語句
if語句
js中的if語句條件可以是boolean值，也可以是一個數字(0false，非0true)
//單分支 if(){} //雙分支 if(){}else{}//多分支 if(){}else if(){}//嵌套 if(){if(){} }else{if(){} }switch語句
//可以是任意類型 var opt; switch(opt){case 1:break;case "abc":break;case true:break; }循環語句
while
while(){}do-while
do{}while();for
for(;;){}break和continue
continue停止本次循環，執行下一次循環。
break停止所有循環。
JS中的本地對象
數組Array
JS中數組類似于Java中的ArrayList，
- 數組定義時無需指定大小，數組長度由賦值時的最大索引決定
- 數組可以保存不同類型的數據
- 沒有給某個索引賦值時，默認值為undefined
定義數組
var 數組名 = new Array(); var 數組名 = [];數組賦值和讀取
//定義數組 var list = new Array(); // 數組賦值 list[0]=123; list[3]="helo"; list[10]=true; // 數組大小為最大索引+1 console.log(list.length); // 讀取數組中的元素 console.log(list[0]); console.log(list[3]); console.log(list[10]); // 默認沒有給某個索引賦值時，是undefined console.log(list[1]);數組遍歷
//定義數組 var list = new Array(); // 數組賦值 list[0]=123; list[3]="helo"; list[10]=true; //普通for循環遍歷，遍歷每個索引 for(var i=0;i<list.length;i++){console.log(list[i]); } console.log("-----------------"); // 增強for循環遍歷，遍歷不是undefined的元素 var size=0; //index表示賦值的索引 for(var index in list){size++;console.log(list[index]); } console.log(size);數組初始化
var list1 = new Array(元素1,元素2...); var list2 = [元素1,元素2...];數組中的方法
| reverse() | 反轉數組中的元素 | 反轉后的數組 |
| sort() | 對數組中的元素按字母表順序排序 | 排序后的數組 |
| sort(function(a,b){return a-b}) | 按指定函數排序，返回負數升序，正數降序 | 排序后的數組 |
| pop() | 刪除最后一個元素 | 被刪除的元素 |
| push(obj…) | 添加n個元素到數組末尾 | 新數組的長度 |
| shift() | 刪除第一個元素 | 被刪除的元素 |
| unshift(obj…) | 添加n個元素到數組開頭 | 新數組的長度 |
| fill(obj) | 使用obj填充數組 | 填充后的數組 |
| splice(index) | 移除[index,數組.length)的元素 | 被移除的元素數組 |
| splice(index,count) | 從index開始移除count個元素 | 被移除的元素數組 |
| 以上方法在調用后，都會影響原數組 |
| indexOf(元素) | 得到指定元素第一次出現的索引 | 索引，沒有返回-1 |
| lastIndexOf(元素) | 得到指定元素最后一次出現的索引 | 索引，沒有返回-1 |
| concat(元素) | 將數組拼接指定元素 | 拼接后的新數組 |
| join(字符) | 將數組中的元素使用字符拼接為字符串 | 拼接后的返回值 |
| slice(index) | 從index開始截取至末尾的元素 | 截取后的元素數組 |
| slice(start,end) | 截取[start,end)范圍內的元素 | 截取后的元素數組 |
| map(方法名) | 讓數組中的每個元素執行指定的方法 | 執行方法后的數組 |
| 以上方法在調用后，不會影響原數組 |
日期Date
// 創建當前日期對象 var now = new Date();// 得到年份 var year = now.getFullYear(); console.log(year); // 得到月份(0-11表示1-12月) var month = now.getMonth(); console.log(month); // 得到日期 var day = now.getDate(); console.log(day);document.write("<h1>" + year + "年" + (month + 1) + "月" + day + "日</h1>"); // 得到時分秒 console.log(now.getHours()); console.log(now.getMinutes()); console.log(now.getSeconds());// 得到從1970/1/1至今經過了多少毫秒 console.log(now.getTime()); // 以上方法都有對應的set方法用于設置指定值// 得到date的日期部分 console.log(now.toDateString()); // 得到date的時間部分 console.log(now.toTimeString()); // 將date轉換為本地日期格式的字符串 document.write("<br>"+now.toLocaleDateString()) document.write("<br>"+now.toLocaleTimeString()) document.write("<br>"+now.toLocaleString())字符串
JS中的字符串，是一個字符數組。
使用雙引號或單引號或new String()定義字符串。
可以通過下標訪問字符串中的某個字符。
| length | 得到字符串長度 |
| trim()/trimLeft()/trimRight() | 去除首尾/左/右空格 |
| toUpperCase()/toLowerCase() | 轉換大寫/小寫 |
| sub()/sup()/bold()/italics() | 文字下標/上標/加粗/傾斜 |
| charAt(index) | 得到index對應的字符 |
| indexOf(string)/lastIndexOf(string) | 得到string第一次/最后一次出現的索引，沒有返回-1 |
| substring(index)/substring(from,to) | 截取index至末尾/截取[from,to)范圍的字符 |
| substr(index)/substr(index,length) | 截取index至末尾/截取index起length個字符 |
| split(string) | 根據指定內容切分字符串，得到字符串數組 |
| replace(oldStr,newStr) | 替換第一次出現的oldStr為newStr |
| replaceAll(oldStr,newStr) | 替換全部的oldStr為newStr |
| startsWith(str) | 是否以str開頭 |
| endsWith(str) | 是否以str結尾 |
| includes(str) | 判斷是否包含str |
正則表達式
一套自定義規則，用于檢索、修改滿足條件的字符串。
//JS中定義正則表達式 var regex = /規則/; //驗證該字符串是否滿足規則 regex.test(字符串);| /a/ | 檢索字母a |
| /abc|hello/ | 檢索abc或hello整體單詞 |
| /a|b|c/ | 檢索a或b或c |
| /[abc]/ | 檢索a或b或c |
| /[^abc]/ | 檢索除a或b或c之外的內容 |
| /[a-c]/ | 檢索a到c之間的字母 |
| \d | 檢索任意數字，等效于[0-9] |
| \D | 檢索任意非數字，等效于[^0-9] |
| \w | 檢索任意字母、數字、下劃線，等效于[0-9a-zA-Z_] |
| \W | 檢索非字母、數字、下劃線，等效于[^0-9a-zA-Z_] |
| \s | 檢索空格 |
| \S | 檢索非空格 |
| \d{3} | 檢索連續3個數字 |
| \d{3,5} | 檢索最少3個，最多5個連續數字 |
| \d{3,} | 檢索最少3個連續數字 |
| ^ | 是否以指定內容開頭 |
| $ | 是否以指定內容結尾 |
| [a-z]+ | 檢索至少1個小寫字母，相當于[a-z]{1,} |
| [a-z]? | 檢索0個或1個小寫字母，相當于[a-z]{0,1} |
| [a-z]* | 檢索0個或多個小寫字母，相當于[a-z]{0,} |
| . | 檢索任意一個字符，如h.t表示hot或hat之類中間字符未知的情況 |
| \. | 檢索符號. |
| g | 全局匹配，默認情況下正則表達式只會匹配第一次滿足的內容，g表示全文匹配 |
| i | 忽略大小寫匹配 |
QQ郵箱的正則表達式
- www.開頭，可有可無
- qq號碼是非零開頭的5-10位數字
- @qq.com結尾
- 忽略大小寫
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-AIOO3kv1-1681376355477)(HTML&CSS&JS&JQuery.assets/image-20230404153817767.png)]
Math
JS中的Math類似于Java中的Math類，其中的方法可以直接通過Math調用。
| Math.random() | 生成[0,1)內的隨機數 |
| Math.abs(number) | number的絕對值 |
| Math.floor(number) | 向下取整 |
| Math.ceil(number) | 向上取整 |
| Math.round(number) | 四舍五入 |
| Math.sqrt(number) | number開平方 |
| Math.cbrt(number) | number開立方 |
| Math.pom(a,b) | a的b次冪 |
| Math.max(a,b…)/Math.min(a,b…) | 得到參數之間的最大/最小值 |
得到指定范圍的隨機數
-
[a,b)
/* 0<= x < 1 *7 0<= x < 7 +3 3<= x < 10 */ var num=Math.floor(Math.random()*Math.abs(a-b))+Math.min(a,b); -
[a,b]
// [a,b] var num = Math.floor(Math.random() * (Math.abs(a - b) + 1)) + Math.min(a, b);
函數function
類似于java中的方法。是一段獨立的代碼，可以完整一件事情。
定義的函數可以被重復調用，函數能減少重復代碼，達到代碼復用的效果。
調用函數
通過.操作符號，由對象名或類名或直接調用。
var now=new Date(); now.getMonth();//通過對象調用Math.random();//通過類名調用parseInt("123");//直接調用全局函數
JS中可以直接調用的函數
| parseInt(string)/parseFloat(string) | 將string轉換為number,參數必須以數字開頭，轉換后只保留數字部分，如果無法轉換結果為NaN(not a number) |
| Number(string) | 將純數字字符串轉換為number |
| isNaN(obj) | obj is not a number。“obj不是一個數字”,如果結果為true，表示obj不是數字，結果為false，表示obj是數字 |
| eval(string) | 計算一個可計算的字符串。如"3+2*5",可以通過該函數計算出結果 |
自定義函數
function 函數名(形參名1,形參名2...){return 函數體; }var 函數名=new function(形參名1,形參名2...){//函數體 } //通過函數名調用該函數var 函數名=function(形參名1,形參名2...){//函數體 } //通過函數名調用該函數var 函數名=(形參名1,形參名2...)=>{//函數體 } //通過函數名調用該函數函數的分類
-
無參數無返回值
function sayHello(){alert("hello world"); } -
有參數無返回值
function getAge(birthYear){var age=new Date().getFullYear()-birthYear;alert(age); } -
無參數有返回值
function getNowMonth(){return new Date().getMonth()+1; } -
有參數有返回值
function getRandomNum(min,max){return Math.floor(Math.random()*Math.abs(max-min))+Math.min(min,max); } -
匿名函數
頁面中的元素.事件=function(參數){函數體; }頁面中的元素.事件=(參數)=>{函數體; }
BOM
Browser Object Model 瀏覽器對象模型
可以通過JS獲取瀏覽器對象后訪問信息和控制瀏覽器的行為。
彈框
-
警告框，帶有確認按鈕和提示文字
//window表示瀏覽器對象 window.alert("提示文字"); //通常簡寫為 alert("提示文字"); -
輸入框，帶有確認和取消按鈕、輸入框和提示文字，點擊確認后返回輸入的內容
window.prompt("提示文字"); //或 prompt("提示文字"); -
確認框，帶有確認和取消按鈕和提示文字，點擊確認返回true，取消返回false
window.confirm("提示文字"); //或 confirm("提示文字");
window對象
表示瀏覽器窗口對象，可以獲取當前窗口信息，控制該窗口的行為。
| window.innerWidth window.innerHeight | 獲取瀏覽器當前窗口的可視區域寬高 |
| window.screen | 獲取當前screen對象，包含了屏幕相關信息 |
| window.location | 獲取當前location對象，包含了瀏覽器地址欄相關信息 |
| window.history | 獲取當前history對象，包含了瀏覽器歷史記錄相關信息 |
| [window.]alert(“提示文字”) [window.]confirm(“提示文字”) [window.]prompt(“提示文字”) | 警告框 確認框 輸入框 |
| var wid=window.open(“路徑”) | 彈出新窗口打開指定路徑，返回打開的窗口對象 |
| window.close() wid.close() | 關閉本窗口/關閉指定窗口 |
| var myTimeout=[window.]setTimeout(函數,毫秒) | 在指定的毫秒后執行一次函數，返回該延時裝置對象 |
| [window.]clearTimeout(myTimeout) | 關閉指定的延時裝置 |
| var myInterval=[window.]setInterval(函數,毫秒) | 在指定的毫秒后重復執行函數，每次執行都會間隔指定時間，返回該間隔裝置對象 |
| [window.]clearInterval(myInterval) | 關閉指定的間隔裝置 |
| [window.]localStorage | 獲取瀏覽器存儲器對象 |
| [window.]sessionStorage | 獲取瀏覽器會話存儲器對象 |
| []可以省略，如alert()、setInterval()等 |
screen對象
| screen.width | 當前屏幕的寬度 |
| screen.heigth | 當前屏幕可用高度 |
| screen.availWidth | 當前屏幕去除任務欄后的可用寬度 |
| screen.availHeight | 當前屏幕去除任務欄后的可用高度 |
location對象
| location.href | 讀取或者設置瀏覽器當前地址欄的信息 |
| location.assign(“地址”) | 設置瀏覽器跳轉到指定地址 |
| location.replace(“地址”) | 將當前瀏覽器地址替換為指定地址，無法后退 |
| location.reload() | 刷新頁面 |
| location.host | 獲取當前地址的主機名+端口號 |
| location.hostname | 獲取當前地址的主機名 |
| location.port | 獲取當前地址的端口號 |
| location.protocol | 獲取當前地址的協議名 |
localStorage對象
| localStorage.setItem(key,value) | 在瀏覽器本地存儲器中保存一組鍵值對，在同一個站點下，不同頁面之間可以共享 |
| localStorage.getItem(key) | 在瀏覽器本地存儲器中獲取某個鍵的值 |
history對象
| history.forward() | 前進 |
| history.back() | 后退 |
| history.go(1)/history.go(-1) | 前進/后退 |
DOM
Document Object Model 文檔對象模型
- 每個頁面就是一個文檔樹document tree
- 頁面中的每個標簽都是這個樹的節點node
- 根節點是html
- document對象是DOM中的核心對象，表示當前頁面對象
- 通過document對象獲取頁面中的節點后，對其進行操作(設置文本、樣式等)
獲取節點
| document.getElementById(“某個標簽的id名”) | 根據id獲取唯一的一個節點 |
| document.getElementsByClassName(“某些標簽的class名”) | 根據class獲取對應的所有節點 |
| document.getElementsByTagName(“某個標簽名”) | 根據標簽名獲取對應的節點 |
| document.getElementsByName(“某些標簽的name名”) | 根據標簽的name屬性名獲取對應的節點 |
| document.querySelector(“任意選擇器”) | 根據選擇器獲取第一個滿足條件的節點 |
| document.querySelectorAll(“任意選擇器”) | 根據選擇器獲取所有滿足條件的節點 |
內容操作
節點.innerText
獲取或設置雙標簽中的文本
//設置id為md的標簽中的文本為xxx document.getElementById("md").innerText="xxx";//獲取id為md的標簽中的文本 var text=document.getElementById("md").innerText; console.log(text);節點.innerHTML
能識別內容中的HTML元素
//設置id為md的標簽中的文本為xxx document.getElementById("md").innerHTML="xxx";//獲取id為md的標簽中的文本 var text=document.getElementById("md").innerHTML; console.log(text);區別
<p id="test1"></p> <p id="test2"></p><script>document.getElementById("test1").innerText="<h1>innerText</h1>";document.getElementById("test2").innerHTML="<h1>innerHTML</h1>"; </script>[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-DVAd17PC-1681376355478)(HTML&CSS&JS&JQuery.assets/image-20230406155922698.png)]
屬性操作
讀取或設置節點的某個屬性
| 節點.value | 獲取或設置某個節點的value屬性，通常用于表單元素。 |
| 節點.src | 獲取或設置某個節點的src屬性，如img標簽 |
| 節點.href | 獲取或設置某個節點的href屬性，如a標簽 |
| 節點.className | 獲取或設置某個節點的class屬性 |
| 節點.checked | 獲取節點的選擇狀態 |
| 節點.style | 獲取或設置某個節點的style屬性 |
樣式操作
修改單個樣式
節點.style.樣式名=值;
樣式名是駝峰命名法，如設置背景色，css中為background-color，這里寫為backroundColor
修改多個樣式
節點.style.cssText=“樣式名:值;樣式名:值;”
樣式名和css中相同
創建添加刪除節點
創建節點
創建的節點處于"游離狀態",需要將其掛載到某個節點中
document.createElement("標簽名"); document.createElement("div");添加節點
父節點.appendChild(子節點);var mydiv=document.createElement("div"); document.body.appendChild(mydiv);刪除節點
父節點.removeChild(子節點);document.body.removeChild(mydiv);獲取父節點
節點.parentNode獲取子節點
//獲取子節點的數組 父節點.children //獲取第一個子節點 父節點.firstChild //獲取最后一個子節點 父節點.lastChild事件
某個節點的某個行為，稱為這個節點的事件。
| onclick | 鼠標單擊 |
| onchange | 內容改變 |
| onfocus | 獲得焦點 |
| onblur | 失去焦點 |
| onmouseenter/onmouseover | 鼠標移入 |
| onmouseout/onmouseleave | 鼠標移出 |
| onmousemove | 鼠標移動 |
| onmousedown/onmouseup | 鼠標按下/松開 |
| oninput | 文本框輸入 |
| onsubmit | 表單提交 |
| … | 鼠標滾輪監聽、鍵盤監聽等 |
| 記住事件on后的單詞 |
給節點綁定事件
<body><button onclick="sayHello()">按鈕</button> </body><script>//節點.事件=匿名函數按鈕.onclick=()=>{}//定義函數后，在標簽的某個事件屬性中調用function sayHello(){} </script>event對象
在某個匿名函數中傳入一個參數，通常為e或event，就能監聽函數對應的事件
如在onmousexxx事件的函數中添加參數e，就能監聽鼠標狀態mouseevent。
節點.事件=(e)=>{e用于監聽該事件 }| e.clientX | 獲取當前鼠標的水平位置 |
| e.clientY | 獲取當前鼠標的垂直位置 |
| e.stopPropagation() | 阻止事件冒泡 |
| e.preventDefault() | 阻止默認事件，使用用return false |
事件冒泡
文檔中的節點如果有重疊的情況，并且這些重疊的節點都有相同的事件。
默認在子節點觸發事件時，父節點也會觸發事件，這種情況稱為事件冒泡。
如果不希望出現這種情況，就需要阻止事件冒泡。
表單相關
表單中的元素通常都需要設置name屬性，除輸入框外，還需要設置value屬性。
所有的表單元素都可以通過value屬性獲取其值。
獲取表單
- id、class、元素選擇器等
- document.forms獲取頁面中的表單集合
表單提交
表單.onsubmit()事件阻止表單提交
在表單的提交事件中通過 return false 阻止提交輸入框
文本框text、密碼框password、文本域textarea都屬于輸入框
獲取輸入框輸入內容
var input=輸入框對象.value;設置輸入框中的內容
輸入框對象.value=值;單選按鈕、復選框
判斷是否選中
對象.checked獲取其選中狀態，true表示選中，false表示未選中獲取選中項的值
單選和復選都需要設置value屬性，再通過value獲取選中后的值下拉菜單
添加選項
<select> </select><script>//方式一.創建option標簽var opt1=document.createElement("option");//添加到select中select節點.appendChild(opt1);//方式二.new Option();var opt2=new Option();//添加到select中select節點.add(opt2); </script>獲取選中項的值
獲取select的value就是獲取選中項的值。
option如果沒有設置value，select的value就是option中的文本，如果設置了value，select的value才是設置后的值
<select name="booktype" ><option value="1">小說</option><option value="2">漫畫</option><option value="3">雜志</option> </select><script>//獲取選中項的值var booktype=document.querySelector("select[name=booktype]").value; </script>表單綜合練習
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><form action="" method="post">用戶名：<input type="text" name="username" required /><br>密碼：<input type="password" name="pwd" placeholder="至少6位" /><span id="info"></span><br>性別：<input type="radio" name="sex" value="男" checked />男<input type="radio" name="sex" value="女" />女<br>愛好：<input type="checkbox" name="hobby" value="旅游">旅游<input type="checkbox" name="hobby" value="閱讀">閱讀<input type="checkbox" name="hobby" value="音樂">音樂<br><input type="checkbox" id="checkAll">全選<input type="checkbox" id="checkReverse">反選<br>職業：<select id="job"><option>教師</option><option>醫生</option><option>律師</option></select><input type="text" placeholder="請輸入職業" id="newJob" /><br><input type="submit" id="sub" value="注冊" /></form><script>var pwdInput = document.querySelector("input[name=pwd]");//文本框失去焦點事件// pwdInput.οnblur=()=>{// 內容發生改變事件// pwdInput.onchange = () => {// 輸入事件pwdInput.oninput = () => {if (pwdInput.value.length < 6) {document.getElementById("info").innerHTML = "<span style='color:red'>*至少輸入6位密碼</span>"} else {document.getElementById("info").innerHTML = "<span style='color:green'>√</span>"}}// 獲取所有的愛好復選框// document.getElementsByName("hobby")var hobbies = document.querySelectorAll("input[name=hobby]");// 獲取全選按鈕var checkAll = document.getElementById("checkAll");// 全選按鈕單擊事件checkAll.onclick = () => {// 遍歷所有的愛好復選框for (var i = 0; i < hobbies.length; i++) {// 讓愛好復選框的選中狀態改為全選按鈕的選中狀態hobbies[i].checked = checkAll.checked;}}// 獲取反選按鈕var checkReverse = document.getElementById("checkReverse");checkReverse.onclick = () => {// 遍歷所有的愛好復選框for (var i = 0; i < hobbies.length; i++) {// 讓愛好復選框的選中狀態改為自身的相反狀態hobbies[i].checked = !hobbies[i].checked;}}// 獲取文本框var newJob = document.getElementById("newJob");// 文本框失去焦點newJob.onblur = () => {if (newJob.value == "") {return;}if (confirm("確認要添加嗎")) {//創建optionvar opt = document.createElement("option");// opt設置文本opt.innerText = newJob.value;//添加到select中document.querySelector("select").appendChild(opt);//清空文本框newJob.value = "";}}// 表單數據提交可以使用按鈕的單擊事件// document.getElementById("sub").onclick = () => {// 最好使用表單的提交事件 表單對象.onsubmit//頁面中獲取表單的方式：使用選擇器id、class、標簽或document.forms獲取頁面中的所有表單，返回數組document.forms[0].onsubmit = () => {//獲取輸入的內容// document.getElementsByName("pwd")[0]if (pwdInput.value.length < 6) {//阻止表單自動跳轉return false;}// 獲取文本框輸入的值var name = document.querySelector("input[name=username]").value;var pwd = pwdInput.value;// 獲取單選按鈕選中的值,默認選中一個選項后判斷另一個選項是否被選中var sex = document.getElementsByName("sex")[1].checked ? "女" : "男";//定義愛好數組var hobby = [];//獲取被選中的愛好var checkedHobby = document.querySelectorAll("input[name=hobby]:checked");for (var i = 0; i < checkedHobby.length; i++) {hobby.push(checkedHobby[i].value);}var job = document.getElementById("job").value;alert("用戶名：" + name + "\n密碼：" + pwd + "\n性別：" + sex + "\n愛好：" + hobby+"\n職業："+job);}</script></body> </html>作業
-
接收一個學生的5門成績，升序輸出，輸出最大值和平均值
-
打印1-100以內的質數
-
將當前日期輸出為全中文的形式，如"2023/4/3"輸出為 “二零二三年四月三日”
var cn=[“零”,“一”,“二”]; cn[2]+cn[0]+cn[2]+cn[3]
-
動態表格
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-V3nB7eOF-1681376355478)(HTML&CSS&JS&JQuery.assets/image-20230406180309757.png)]
-
隨機點名
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-hlxdoS0M-1681376355478)(0413前端部分/JavaScript.assets/image-20230406180420412.png)]
jQuery
jQuery是一個輕量級的javascript函數庫。
封裝了很多js的內容，本質還是javascript，是一個.js文件。
作用
jQuery的宗旨:“write less,do more”，
意味著用更少的代碼去完成更多的事情。
-
更方便地獲取文檔中的元素，對其進行操作
-
強大的選擇器
-
支持鏈式寫法
-
封裝了ajax，更方便使用
。。。
使用
1.下載jQuery.js文件，添加到項目中
-
官網下載https://jquery.com/download/
-
右鍵鏈接另存為下載
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-8iAuo0Mv-1681376355479)(HTML&CSS&JS&JQuery.assets/image-20230410091802173-1681089809037-1681376038253.png)]
-
-
使用HBuilder中自帶的創建
-
在js目錄下右鍵新建.js文件
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-V0yXeojD-1681376355479)(HTML&CSS&JS&JQuery.assets/image-20230410092031672-1681376038253.png)]
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-NusnXNs5-1681376355479)(HTML&CSS&JS&JQuery.assets/image-20230410092128499-1681376038253.png)]
-
2.在頁面中導入jQuery.js文件
<!-- 導入jquery的js文件 --> <script src="js/jquery-3.6.4.min.js"></script>3.在頁面中編寫jQuery代碼
同js的寫法，在script標簽中編寫jQuery代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><!-- 導入jquery的js文件 --><script src="js/jquery-3.6.4.min.js"></script><style>#md{width: 150px;height: 150px;background-color: skyblue;}</style></head><body><h1>點擊展開/隱藏</h1><div id="md"></div><script>// 編寫jquery代碼$("h1:eq(0)").click(() => {$("#md").toggle(1000);});</script></body> </html>$符號沖突問題
在頁面中引入jquery后，$符號相當于jQuery這個單詞，有特殊的含義。
如果頁面中引入了多個js函數庫，這些函數庫都需要使用 符號，就會出現 符號，就會出現 符號，就會出現沖突。
jQuery中提供了一個noConflict()函數，用于釋放對$的使用權
//釋放$的使用權，重新定義為jq代替$符號 var jq=$.noConfilict();jQuery("#md").text("xxx")//正常,原始寫法 $("#md").text("xxx")//無效，無法繼續使用$符號 jq("#md").text("xxx")//正常，jq當做jQuery使用文檔就緒函數
在js中
//文檔就緒事件 window.onload=()=>{//在頁面中的節點加載后執行，只能定義一個該事件 }在引入jquery后
//文檔就緒函數 $(()=>{//在頁面中的節點加載后執行，能定義多個該函數 })選擇器
基本選擇器
| $(“#id名”); | id選擇器，根據標簽的id名獲取單個節點 |
| $(“.class名”) | 類選擇器，根據標簽的class名獲取多個節點 |
| $(“標簽名”) | 元素選擇器，根據標簽名獲取多個節點 |
| $(“選擇器1,選擇器2…”) | 群組選擇器，根據各個選擇器獲取多個節點 |
| $(“div#md”) | 獲取id為md的div節點 |
層次選擇器
| $(“#md空格*”) | id為md的節點下的所有子節點。*表示所有節點。 |
| $(“#md空格p”) | id為md的節點下的所有p節點。 |
| $(“#md>*”) | id為md的節點下的第一層子節點。 |
| $(“#md>p”) | id為md的節點下的第一層p節點。 |
| $(“#md+p”) | id為md的節點后緊鄰的p節點 |
| $(“#md~p”) | id為md的節點之后同級的p節點 |
注意
-
$(“p .test”) 中間有空格，表示獲取p標簽下class為test的標簽
<p><span class="test"></span><a class="test"></a><!--以上兩個節點都能獲取--> </p> -
$(“p.test”) 中間無空格，表示獲取p標簽中class為test的標簽
<p><span class="test"></span><p class="test"></p><!--只能獲取該節點--> </p>
過濾選擇器
普通過濾
$(“選擇器:特定單詞”)
| $(“tr:odd”) | 奇數索引，得到索引1,3,5… |
| $(“tr:even”) | 偶數索引，得到索引0,2,4… |
| $(“tr:eq(3)”) | 得到指定索引的節點，eq表示equals |
| $(“tr:lt(3)”) | 得到小于指定索引的節點，lt表示less then |
| $(“tr:gt(3)”) | 得到大于指定索引的節點，gt表示greater then |
| $(“td:nth-child(2n-1)”) | 得到所有奇數td。2n-1表示奇數 |
| $(“tr:first”) | 得到所有的tr節點中的第一個節點 |
| $(“tr:last”) | 得到所有的tr節點中的最后一個節點 |
| $(“li:first-child”) | 得到所有作為頭結點的li |
| $(“li:last-child”) | 得到所有作為尾節點的li |
| $(“li:not(:first)”) | 得到所有li中的非頭結點li |
表單元素過濾
| $(“:input”) | 得到所有的表單元素，包含input、select、textarea |
| $(“:text”) | 得到文本框 |
| $(“:password”) | 得到密碼框 |
| $(“:radio”) | 得到單選按鈕 |
| $(“:checkbox”) | 得到復選框 |
| $(“:checked”) | 得到被選中的單選按鈕或復選框 |
| $(“:selected”) | 得到被選中的下拉菜單的option |
| ( " : r e s e t " ) / (":reset")/ (":reset")/(“:submit”) | 得到重置/提交按鈕 |
屬性過濾
| $(“選擇器:not([屬性名])”) | 得到沒有指定屬性的節點 |
| $(“選擇器[屬性名=值]”) | 得到指定屬性名為指定值的節點 |
| $(“:text[name=username]”) | 得到name屬性為username的文本框 |
| $(“:radio[name=sex]:checked”) | 得到name屬性為sex且被選中的單選按鈕 |
| $(“:checkbox[name=hobby]:checked”) | 得到name屬性為hobby且被選中的復選框 |
| $(“選擇器[屬性名^=值]”) | 得到指定屬性名以指定值開頭的節點 |
| ( " 選擇器 [ 屬性名 ("選擇器[屬性名 ("選擇器[屬性名=值]") | 得到指定屬性名以指定值結尾的節點 |
| $("選擇器[屬性名1=值][屬性名2=值]") | 得到同時擁有屬性1和屬性2且指定值的節點 |
| $(“選擇器[屬性名*=值]”) | 得到指定屬性包含指定值的節點 |
| $(“選擇器[屬性名!=值]”) | 得到指定屬性名不為指定值的節點 |
內容(文本)過濾
| $(“p:contains(hello)”) | 得到包含文本hello的p標簽 |
| $(“p:not(:contains(hello))”) | 得到不包含文本hello的p標簽 |
| $(“p:empty”) | 得到沒有任何文本的p標簽 |
js對象(dom對象)和jquery對象
使用jquery中的選擇器獲取到的節點，稱為jquery對象，只能使用jquery的方法操作節點。
使用js中原生的方式獲取到的節點，稱為dom對象，只能使用js中的方法操作節點。
jquery對象和dom對象互轉
-
jquery對象轉換為dom對象
jquery對象.get(0); jquery對象[0]; -
dom對象轉換為jquery對象
$(dom對象);
操作節點
獲取、設置節點的內容
| 節點.val() | 獲取某個節點的value屬性值，相當于js中的 節點.value |
| 節點.val(“值”) | 設置某個節點的value屬性值，相當于js中的 節點.innerText=“內容” |
| 節點.text() | 獲取某個節點的文本，相當于js中的 節點.innerText |
| 節點.text(“內容”) | 設置某個節點的內容，相當于js中的 節點.innerText=“內容” |
| 節點.html() | 獲取某個節點的內容，相當于js中的 節點.innerHTML |
| 節點.html(“內容”) | 設置某個節點的內容，相當于js中的 節點.innerHTML=“內容” |
獲取、設置節點的樣式
| 節點.css(“樣式名”) | 獲取某個節點的某個樣式值 |
| 節點.css(“樣式名”,“值”) | 設置某個節點的某個樣式 |
| 節點.css(“樣式名”,“值”).css(“樣式名”,“值”) | 同時設置某個節點的多個樣式 |
| 節點.css({“樣式名”:“值”,“樣式名”:“值”}) | 同時設置某個節點的多個樣式 |
獲取、設置節點的屬性
| 節點.attr(“屬性名”) | 獲取某個節點的某個屬性 |
| 節點.attr(“屬性名”,“值”) | 設置某個節點的某個屬性為指定值 |
| 節點.removeAttr(“屬性名”) | 移除某個節點的某個屬性 |
| 節點.addClass(“class名”) | 給某個節點追加class值 |
| 節點.removeClass(“class名”) | 移除某個節點的某個class值 |
| 節點.toggleClass(“class名”) | 切換某個節點的class值。如果存在該值則移除，不存在則追加 |
| 節點.hasClass(“class名”) | 判斷某個節點是否存在某個class值 |
"打地鼠"游戲原理：
1.靜態布局：n*n的div容器，默認無背景
2.隨機顯示：定義class，寫上背景圖的樣式，所有的div開始隨機，隨機到的div擁有該class值，其余div移除該class值
3.點擊消失同時計分：給所有div添加單擊事件，判斷單擊的div是否擁有class值，如果有則移除，加分
4.控制游戲時長：開始后，使用setInterval()隨機顯示，使用setTimeout()在10s后移除setInterval()
創建節點
$(“完整標簽”);
//js寫法 document.createElement("div"); //jquery寫法 $("<div></div>");//以上兩種方式創建的節點，都處于游離狀態，需要添加到其他已有節點上才能使用添加節點
| 父節點.append(子節點) | 將子節點添加到父節點中的末尾 |
| 子節點.appendTo(父節點) | 將子節點添加到父節點中的末尾 |
| 父節點.prepend(子節點) | 將子節點添加到父節點中的開頭 |
| 子節點.prependTo(父節點) | 將子節點添加到父節點中的開頭 |
| 原始節點.before(新節點) | 將新節點添加到原始節點之前 |
| 新節點.insertBefore(原始節點) | 將新節點添加到原始節點之前 |
| 原始節點.after(新節點) | 將新節點添加到原始節點之后 |
| 新節點.insertAfter(原始節點) | 將新節點添加到原始節點之后 |
移除節點
| 某節點.remove() | 移除某節點 |
| 某節點.empty() | 移除某節點的子節點 |
復制節點
| 某節點.clone() | 復制節點，不保留節點事件 |
| 某節點.clone(true) | 復制節點，保留節點事件 |
修飾節點
| 舊節點.replaceWith(新節點) | 使用新節點替換舊節點 |
| 新節點.replaceAll(舊節點) | 使用新節點替換舊節點 |
| 節點集合.wrap(指定節點) | 使用指定節點包裹節點集合中的每一個節點 |
| 節點集合.wrapAll(指定節點) | 使用指定節點包裹節點集合中的所有節點 |
| 父節點.wrapInner(指定節點) | 使用指定節點包裹父節點中的所有子節點 |
通過節點獲取節點
| 某節點.next() | 獲取某節點之后緊鄰的一個節點 |
| 某節點.prev() | 獲取某節點之前緊鄰的一個節點 |
| 某節點.nextAll(選擇器) | 獲取某節點之后的所有同級節點，參數可以是指定選擇器 |
| 某節點.prevAll(選擇器) | 獲取某節點之前的所有同級節點，參數可以是指定選擇器 |
| 某節點.sibling(選擇器) | 得到某個節點的所有同級節點 |
| 父節點.children(選擇器) | 得到父節點中的所有子節點 |
| 節點集合.first() | 得到節點集合中的第一個節點 |
| 節點集合.last() | 得到節點集合中的最后一個節點 |
| 子節點.parent() | 得到子節點的父節點 |
| 某節點.index() | 得到某個節點在所在同級節點集合中的索引 |
預設動畫
| show() | 改變某個節點的width和height從0到原始大小，顯示 |
| hide() | 改變某個節點的width和height從原始大小到0，隱藏。最終display:none |
| toggle() | 顯示/隱藏切換 |
| fadeIn() | 改變某個節點的opacity從0到1，淡入 |
| fadeOut() | 改變某個節點的opacity從1到0，淡出，最終display:none |
| fadeToggle() | 淡入/淡出切換 |
| slideUp() | 改變某個節點的height從原始到0，向上滑入，最終display:none |
| slideDown() | 改變某個節點的height從0到原始，向下滑出 |
| slideToggle() | 滑入/滑出切換 |
| 注意 | 以上函數都可以寫兩個參數，第一個參數是毫秒整數，表示動畫執行時間，第二個參數是一個函數，表示動畫執行結束后的回調函數 |
自定義動畫
//樣式組是必要參數 節點.animate({樣式組},持續時間,時間函數,回調函數); animate()支持鏈式寫法，表示在動畫1執行后執行動畫2$("#md").animate({"樣式名":"值","樣式名":"值" },2000,"linear",()=>{動畫執行后的回調函數 }).animate({"樣式名":"值","樣式名":"值" },2000,"linear",()=>{動畫執行后的回調函數 }）;//樣式只能是數值為單位，如顏色無法生效停止動畫
- 節點.stop()
- 停止當前正在進行的動畫，如果后續還有動畫會直接執行后續動畫
- 節點.stop(trur)
- 停止當前所有動畫
節點事件
綁定事件
js中給節點綁定事件
dom對象.on事件名=()=>{函數體; } document.getElementById("md").οnclick=()=>{} //通常是給單個節點綁定事件jquery中給節點綁定事件
- jquery對象.事件函數(函數);
- jquery對象.bind(事件名,函數)
觸發事件
節點.事件函數()//輪播變量 var i = 1; // 每隔2s，讓對應的頭像點擊 setInterval(() => {//觸發節點的單擊事件$("#head>div:eq(" + i + ")").click();// 循環if (i++ == 4) {i = 0;} }, 2000);| click() | 單擊 |
| hover(函數1,函數2) | 鼠標進入時觸發函數1，離開觸發函數2。如果只有一個函數參數，進入和離開都觸發該函數。 |
| mouseenter()/mouseover() | 鼠標進入 |
| mouseout()/mouseleave() | 鼠標離開 |
| mousemove() | 鼠標移動 |
| blur() | 失去焦點 |
| focus() | 獲得焦點 |
| change() | 改變 |
| input() | 輸入 |
| submit() | 表單提交 |
前端框架
設計者提供給用戶該框架的css和js文件。
用于只需要導入css文件和js文件，就通過對應的class，使用該框架中相應的樣式和效果。
任何前端框架都有對應的API，應用程序接口文檔，包含了該框架的用法。
Bootstrap
由Twitter公司推出的一套Web框架。其核心內容是柵格系統。
使用
1.官網下載核心文件https://v3.bootcss.com/
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-TGZjTwp9-1681376355479)(HTML&CSS&JS&JQuery.assets/image-20230412151523560-1681376038253.png)]
2.將解壓后的整個文件夾保存到項目目錄中
3.新建頁面，導入bootstrap中的核心文件
-
css文件
- bootstrap.css或bootstrap.min.css
-
js文件
-
bootstrap依賴于jquery，所以先導入jquery.js文件
-
再導入bootstrap.js或bootstrap.min.js
-
LayUI
由國內開發者設計的一套基于jquery的前端框架。
官網現已下架，但LayUI可以繼續使用。
鏡像網站https://layuion.com/
使用
1.鏡像網站下載
2.解壓后將layui目錄導入到項目目錄中
3.在頁面中導入layui的css文件和js文件
JSON
JavaScript Object Notation JS對象簡譜
是一種數據交換格式，可以理解為保存數據、交換數據的一種格式。
JSON數以鍵值對的形式保存。
“鍵”:值
鍵是一個字符串，值可以是普通類型、對象或數組
值的數據類型
| 字符串 | “name”:“ez” |
| 數值 | “age”:20 |
| 布爾值 | “married”:true |
| 空 | “xxx”:null |
| 對象 | “dog”:{“name”:“旺財”,“type”:“哈士奇”} |
| 數組 | “cars”:[{“name”:“寶馬”},{“name”:“奔馳”}] |
舉例
{"name":"張明","age":20,"pet":{"name":"小哈","type":"狗"},"married":true,"house":null,"family":[{"name":"張三","relation":"老爸"},{"name":"王梅","relation":"老媽"}] }在頁面中讀取json數據
-
$.getJSON(URL,回調函數)
$.getJSON("json/selfinfo.json",(res)=>{console.log(res.name);console.log(res.age);console.log(res.married);console.log(res.house);console.log(res.pet);console.log(res.pet.name);console.log(res.pet.type);console.log(res.family[0]);console.log(res.family[1]); }); -
ajax，異步提交，局部刷新。在保證頁面不重新加載的情況下，只更新部分數據
-
$.ajax();
$.ajax({url:"請求路徑",data:{//請求時攜帶的參數name:'xx',age:20},type:"post/get/put/delete",success:(res)=>{//請求發送成功后的回調函數//res表示請求后得到的數據}，error:(res)=>{//請求發送失敗后的回調函數//res表示請求后得到的數據} });
-
()** | 鼠標離開 |
| mousemove() | 鼠標移動 |
| blur() | 失去焦點 |
| focus() | 獲得焦點 |
| change() | 改變 |
| input() | 輸入 |
| submit() | 表單提交 |
前端框架
設計者提供給用戶該框架的css和js文件。
用于只需要導入css文件和js文件，就通過對應的class，使用該框架中相應的樣式和效果。
任何前端框架都有對應的API，應用程序接口文檔，包含了該框架的用法。
Bootstrap
由Twitter公司推出的一套Web框架。其核心內容是柵格系統。
使用
1.官網下載核心文件https://v3.bootcss.com/
[外鏈圖片轉存中…(img-TGZjTwp9-1681376355479)]
2.將解壓后的整個文件夾保存到項目目錄中
3.新建頁面，導入bootstrap中的核心文件
-
css文件
- bootstrap.css或bootstrap.min.css
-
js文件
-
bootstrap依賴于jquery，所以先導入jquery.js文件
-
再導入bootstrap.js或bootstrap.min.js
-
LayUI
由國內開發者設計的一套基于jquery的前端框架。
官網現已下架，但LayUI可以繼續使用。
鏡像網站https://layuion.com/
使用
1.鏡像網站下載
2.解壓后將layui目錄導入到項目目錄中
3.在頁面中導入layui的css文件和js文件
JSON
JavaScript Object Notation JS對象簡譜
是一種數據交換格式，可以理解為保存數據、交換數據的一種格式。
JSON數以鍵值對的形式保存。
“鍵”:值
鍵是一個字符串，值可以是普通類型、對象或數組
值的數據類型
| 字符串 | “name”:“ez” |
| 數值 | “age”:20 |
| 布爾值 | “married”:true |
| 空 | “xxx”:null |
| 對象 | “dog”:{“name”:“旺財”,“type”:“哈士奇”} |
| 數組 | “cars”:[{“name”:“寶馬”},{“name”:“奔馳”}] |
舉例
{"name":"張明","age":20,"pet":{"name":"小哈","type":"狗"},"married":true,"house":null,"family":[{"name":"張三","relation":"老爸"},{"name":"王梅","relation":"老媽"}] }在頁面中讀取json數據
-
$.getJSON(URL,回調函數)
$.getJSON("json/selfinfo.json",(res)=>{console.log(res.name);console.log(res.age);console.log(res.married);console.log(res.house);console.log(res.pet);console.log(res.pet.name);console.log(res.pet.type);console.log(res.family[0]);console.log(res.family[1]); }); -
ajax，異步提交，局部刷新。在保證頁面不重新加載的情況下，只更新部分數據
-
$.ajax();
$.ajax({url:"請求路徑",data:{//請求時攜帶的參數name:'xx',age:20},type:"post/get/put/delete",success:(res)=>{//請求發送成功后的回調函數//res表示請求后得到的數據}，error:(res)=>{//請求發送失敗后的回調函數//res表示請求后得到的數據} });
-
總結
以上是生活随笔為你收集整理的前端HTML CSS JavaScipt JQuery的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： zabbix配置拓扑图标签及链路流量
- 下一篇： 基于Azure Percept 避障乐高