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

HTML

前端HTML CSS JavaScipt JQuery

發布時間：2024/1/8 HTML 33 豆豆

生活随笔收集整理的這篇文章主要介紹了前端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><meta charset="utf-8"/></head><body><img src="圖片路徑"></body> </html>

瀏覽器

瀏覽器是用于"運行"HTML頁面的平臺。

用HTML語言寫出來的網頁文件，需要瀏覽器對其解釋渲染。

瀏覽器與HTML文件的關系類似于JVM與java文件的關系。

常用瀏覽器

Chrome 谷歌瀏覽器

Edge Windows自帶的瀏覽器，IE的升級版

FireFox 火狐瀏覽器

safari ios平臺自帶瀏覽器

頁面的基本組成結構

<!DOCTYPE html> <html><head><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>單標簽，行內元素

圖片路徑可以使用相對路徑或絕對路徑

絕對路徑：文件在計算機中的完整路徑
相對路徑：從當前頁出發，找到圖片所在位置
- 使用"…/"跳出當前目錄
- 使用"xxx/"進入xxx目錄

列表ul/ol/li

雙標簽，都是塊級元素，li寫在ul或ol標簽中

通常使用列表實現頁面的水平導航、垂直導航

無序列表ul

默認每個li前用實心圓修飾，通過type屬性更改

square 正方形
dist 默認實心圓
circle 空心圓
none 去掉修飾

有序列表ol

默認每個li前用數字修飾，通過type屬性更改

<ul><li></li><li></li><li></li> </ul>  <ol><li></li><li></li><li></li> </ol>

表格table

雙標簽，table是塊級元素，tr、th、td是行內元素

表格相關標簽作用

table	定義表格
tr	表格中的行
td	一行中的單元格
th	特殊的td，文字加粗居中，使用th實現表頭

合并行rowspan=“n”

給td添加該屬性，表示n行合1行

合并列colspan=“n”

給td添加該屬性，表示n列合1列

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.設置錨點

2.訪問錨點

浮動框架iframe

在頁面中嵌入一個頁面。

marquee標簽

<marquee scrollamount="10" direction="right" behavior="scoll">一段文字 </marquee>

多媒體

公用屬性

controls：顯示控制器
muted：靜音
autoplay：自動播放。chrome瀏覽器視頻需要添加muted屬性后才能使用autoplay
loop：循環

音頻

視頻

表單與表單元素

表單form

雙標簽，塊級元素，用于接收用戶輸入的數據

<form action="表單提交路徑" method="表單提交方式"></form> form標簽核心屬性值作用

action	可以是某個頁面或某個控制器的路徑	將表單中的數據提交到指定路徑
method	post/get	默認為get，提交的數據會暴露在地址欄中，數據長度有限制。post方式不會存在這些問題

表單元素

常用表單元素說明

input	單標簽，行內元素。通過改變type屬性值，變化為不同的表單元素
select	雙標簽，行內元素。下拉框
option	雙標簽，select的子標簽，下拉菜單中的選項。value屬性表示該選項的值，如果不設置，value值默認為option標簽中的文本
textarea	雙標簽，行內元素。文本域。

input標簽的type值作用

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選擇器/標簽選擇器

直接通過標簽名獲取元素，獲取所有對應標簽。

后代選擇器

*表示所有元素

空格
- 得到所有子元素
>
- 得到第一層子元素

div p{/*得到div下的所有子元素p*/ } div>p{/*得到div下第一層子元素p*/ } div *{/*得到div中的所有子元素*/ }

群組選擇器

使用逗號將多個選擇器同時選中

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屬性中

寫在head標簽下的style標簽中

寫在一個獨立的css文件中

1.新建一個.css文件，在其中編寫css樣式

*{margin:0;padding:0; }

2.在頁面中通過link標簽導入

選擇器的優先級

內嵌在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標簽的偽類作用

a:link	未訪問時
a:hover	鼠標懸停
a:active	鼠標按下
a:visited	訪問后

:hover可以適用于很多標簽，如#xx:hover，表示鼠標懸停在id為xx的元素上時

追加內容，通過context屬性編輯追加的內容，同時可以設置其他樣式。

在某個元素之前或之后插入內容說明

:after	之后
:before	之前

<!DOCTYPE html> <html><head><style>p:after{content:"追加的內容";color:red;xx:xx;}</style></head><body><p>My name is Donald</p><p>I live in Ducksburg</p></body> </html>

顯示方式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相關樣式作用

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" /><script></script><title></title></head><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標簽導入

JS中輸出的方式

控制臺輸出

console.log(內容);

提示框輸出

alert(內容);

頁面輸出

document.write(內容);

JS的組成

ECMAScript

簡稱ES，是JS的標準，也是JS的核心語法。

BOM

瀏覽器對象模型，用于操作瀏覽器。

DOM

文檔對象模型，用于操作元素。

ECMAScript核心語法

數據類型

原始類型

JS中的原始類型說明

數值型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	獲取當前地址的協議名

http://localhost:8080 http是協議protocol localhost是主機名hostname 8080是端口號port 整體是一個站點的名稱

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用于監聽該事件 } event對象常用的屬性和方法作用

e.clientX	獲取當前鼠標的水平位置
e.clientY	獲取當前鼠標的垂直位置
e.stopPropagation()	阻止事件冒泡
e.preventDefault()	阻止默認事件，使用用return false

事件冒泡

文檔中的節點如果有重疊的情況，并且這些重疊的節點都有相同的事件。

默認在子節點觸發事件時，父節點也會觸發事件，這種情況稱為事件冒泡。

如果不希望出現這種情況，就需要阻止事件冒泡。

表單相關

表單中的元素通常都需要設置name屬性，除輸入框外，還需要設置value屬性。

所有的表單元素都可以通過value屬性獲取其值。

獲取表單

id、class、元素選擇器等
document.forms獲取頁面中的表單集合

<form id="form_id" class="form_class" name="form_name"></form><script>var form=document.getElementById("form_id");var form=document.getElementsByClassName("form_class")[0];var form=document.getElementsByName("form_name")[0];var form=document.forms()[0]; </script>

表單提交

表單.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文件

<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><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
$(" : rese t ") /$ (“: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對象);

<h1 id="title">一個標題</h1><script src="js/jquery-3.4.1.min.js"></script> <script>// 通過js的方式獲取到的對象稱為dom對象var domObj = document.querySelector("#title");// 通過jquery的方式獲取到的對象稱為jquery對象var jqueryObj = $("#title");// dom對象只能使用js中的方式操作節點domObj.style.color = "red";// 無法通過使用對方的方式操作節點// jqueryObj.style.color = "blue";//無效// domObj.text("xxx");//無效jqueryObj.css("color","cadetblue");//jquery對象和dom對象的互轉//dom對象轉換為jquery對象 $(dom對象)$(domObj).text("xxxxx");// jquery對象轉換為dom對象 jquery對象[0]或jquery對象.get(0)jqueryObj[0].style.fontSize="20px";jqueryObj.get(0).innerText="hello"; </script>

操作節點

獲取、設置節點的內容

常用函數

節點.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()	滑入/滑出切換
注意	以上函數都可以寫兩個參數，第一個參數是毫秒整數，表示動畫執行時間，第二個參數是一個函數，表示動畫執行結束后的回調函數

//錯誤寫法 $("#md").click(()=>{$("#md").toggle(2000);//不會等待2s后彈出，彈窗和動畫在同時執行alert("xxx"); });//正確寫法 $("#md").click(()=>{//2s動畫結束后再執行第二個函數$("#md").toggle(2000,()=>{alert("xxx");}); });

自定義動畫

//樣式組是必要參數節點.animate({樣式組},持續時間,時間函數,回調函數); animate()支持鏈式寫法，表示在動畫1執行后執行動畫2$("#md").animate({"樣式名":"值","樣式名":"值" },2000,"linear",()=>{動畫執行后的回調函數 }).animate({"樣式名":"值","樣式名":"值" },2000,"linear",()=>{動畫執行后的回調函數 }）;//樣式只能是數值為單位，如顏色無法生效

停止動畫

節點.stop()
- 停止當前正在進行的動畫，如果后續還有動畫會直接執行后續動畫
節點.stop(trur)
- 停止當前所有動畫

節點事件

綁定事件

js中給節點綁定事件

dom對象.on事件名=()=>{函數體; } document.getElementById("md").οnclick=()=>{} //通常是給單個節點綁定事件

jquery中給節點綁定事件

jquery對象.事件函數(函數);

$("#md").click(function(){}); //可以給節點集合中的所有節點統一綁定事件，在函數中可以使用$(this)表示觸發事件的節點 $("div").click(function(){$(this)表示所有div中當前點擊的div });

jquery對象.bind(事件名,函數)

$("div").bind("mouseenter",function(){});

觸發事件

節點.事件函數()//輪播變量 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表示請求后得到的數據} });

前端框架

設計者提供給用戶該框架的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配置拓扑图标签及链路流量
下一篇： 2022跨年烟花代码（三）HTML5点击