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