前端三件套 HTML+CSS+JS基礎知識內容筆記
HTML基礎
HTML5標籤
doctype 標籤
| HTML 版本 | doctype 聲明 |
|---|---|
| HTML5 | <!doctype html> |
| XHTML1.0 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| HTML4.0 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "//www.w3.org/TR/html4/loose.dtd"> |
html標籤
<html>
文件的全部內容
</html>
head標籤
<html>
<head>文件頭</head>
<body>文件主體</body>
</html>
meta標籤
<html>
<head>
<meta charset="utf-8" />
</head>
<body>文件主體</body>
</html>
title標籤
<html>
<head>
<meta charset="utf-8">
<title>窗體標題</title>
</head>
<body>文件主體</body>
</html>
body標籤
<html>
<head>
<meta charset="utf-8">
<title>窗體標題</title>
</head>
<body>
body 標籤裡面的文本
<!--body 標籤裡面的文本 -->
</body>
</html>
文本和超鏈接標籤
標題標籤
<h1> 這是 h1 標籤效果 </h1>
<h2> 這是 h2 標籤效果 </h2>
<h3> 這是 h3 標籤效果 </h3>
<h4> 這是 h4 標籤效果 </h4>
<h5> 這是 h5 標籤效果 </h5>
<h6> 這是 h6 標籤效果 </h6>
段落標籤
<p> 段落正文內容 </p>
換行標籤
一行文本 <br> 另起一行
水平標籤
<hr 屬性 =" 屬性值 ">
強調標籤
<b> 要以粗體顯示的文字 </b>
<strong> 要以粗體顯示的文字 </strong>
圖片標籤與超鏈接標籤
圖片標籤
<img src="路徑" alt="提示資訊" align="對齊方式" border="邊框大小" width="寬度" height="高度"/>
| 屬性 | 說明 | 默認值 |
|---|---|---|
| src | 圖 片 地 址, 接 受 GIF、JPG 及 PNG 格式。若圖片文件與該 html 文件處於同一目錄,則只寫文件名稱,否則必須添加正確的相對路徑或絕對路徑 | left |
| width、height | 設定線條厚度。以像素作單位 | 2 |
| align | 設定線條長度。可以是絕對值(以像素為單位)或相對值 | 100% |
| alt | 設定線條顏色。#0000FF 代表藍色,也可以採用顏色的名稱,即 color="blue" | 黑色 |
| noshade | 設定線條為平面顯示,若取消此項則具有陰影或立體 | — |
超鏈接標籤
<a 屬性 ="屬性值"> 鏈接顯示文本 </a>
| 屬性 | 說明 | 默認值 |
|---|---|---|
| href | 鏈接的目標 URL | — |
| target | 在何處打開目標 URL。僅在 href 屬性存在時使用 | _self |
音頻標籤影片標籤
音頻標籤
<audio width="640" height="360" src="music.mp3" controls="true">
您的瀏覽器不支援 audio 元素!
</ audio >
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果是 autoplay,則音頻在就緒後馬上播放 |
| controls | controls | 如果是 controls,則向用戶顯示控制項,如播放按鈕 |
| end | 數字值 | 定義播放器在音頻流中的何處停止播放。默認聲音會播放到結尾 |
| loopend | 數字值 | 定義在音頻流中循環播放停止的位置,默認是end 屬性的值 |
| loopstart | 數字值 | 定義在音頻流中循環播放的開始位置。默認是start 屬性的值 |
| playcount | 數字值 | 定義音頻片斷播放多少次,默認是 1 |
| src | url地址 | 所播放音頻的 url地址 |
| start | 數字值 | 定義播放器在音頻流中開始播放的位置。默認聲音在開頭進行播放 |
影片標籤
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的瀏覽器不支援 audio 元素!
</video>
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果是 autoplay,則影片在就緒後馬上播放 |
| src | url地址 | 所播放影片的 url地址 |
| perload | none | metadata | auto | 用於指定影片或音頻數據是否預載入:none(不進行預載入)、metadata(只預載入媒體的元數據)和 auto(預載入全部影片或音頻) |
| loop | loop | 用於指定是否循環播放影片或音頻 |
| poster | url地址 | 影片載入時顯示的影像,或者在用戶點擊播放按鈕前顯示的影像 |
| controls | controls | 如果是 controls,則向用戶顯示控制項,如播放按鈕 |
| width | 數字值 | 用於指定影片的寬度 |
| height | 數字值 | 用於指定影片的高度 |
列表、div 以及 span 標籤
列表標籤
一、無序列表
<ul type="項目符號類,取值為 disc(默認值,實心圓)、circle(空心圓環)和 square(正方形)">
<li> 第 1 項 </li>
<li> 第 2 項 </li>
</ul>
二、有序列表
<ol type="序列類型" start="序號起始值">
<li> 第一項 </li>
<li> 第二項 </li>
</ol>
三、自定義列表
<dl>
<dt> 名詞 1<dd> 解釋 1
<dt> 名詞 2<dd> 解釋 2
<dt> 名詞 3<dd> 解釋 3
</dl>
div 標籤
div標籤沒有特定的含義,只是作為組合其他 HTML 元素的容器,默認情況下,div標籤將佔滿一行,當存在多個div標籤時,將按照從上到下的方式排列。
<div>
其他標籤或內容
</div>
span標籤
span 標籤也沒有特定的含義,可作為文本的容器。span 標籤與 div 標籤不同,默認情況下,多個 span 標籤可以存在於同一行,將按照從左到右的方式進行排列。
<span> 文本 </span>
表格標籤
……| 標籤 | 描述 | |
|---|---|---|
| …… |
表格標籤 | |
| 行標籤 | ||
| …… | 單元格標籤 |
<table>
<tr>
<td>單元格內的文字</td>
<td>單元格內的文字</td>
<tr>
<tr>
<td>單元格內的文字</td>
<td>單元格內的文字</td>
<tr>
</table>
colspan 表示跨越的列數,rowspan 表示跨越的行數
<table>
<tr>
<td colspan=「所跨的列數」> 單元格內容 </td>
</tr>
</table>
其他相關標籤
- 表格標題標籤 *caption*,用於描述整個表格的標題。
- 表格表頭 *th*,用於定義表格的表頭,通常是表格的第一行數據,以粗體、居中的樣式顯示數據。
- 表格數據的分組標籤 *thead*、*tbody* 和 *tfoot*,這 3 個標籤通常配合使用,主要對表格數據進行邏輯分組。
表單標籤
| 表單控制項標籤寫法 | 說明 |
|---|---|
<input type="text"> |
單行文本輸入框。使用的是 input 標籤和 type 屬性 |
<input type="submit"> |
將表單中的資訊提交給表單中 action 屬性所指向的地址 |
<input type="checkbox"> |
複選框 |
<input type="radio"> |
單選鈕 |
<input type="password"> |
密碼輸入框(輸入的文字用 * 表示) |
<select> |
下拉框 |
<textArea> |
多行文本輸入框 |
<form name="表單名字" action="URL" method="get/post">
表單元素
</form>
get方式提交:使用 get 方式提交數據時,表單數據會附加在 URL 之後,由用戶端直接發送至伺服器,所以速度比 post 快,但缺點是數據長度不能太長。
post方式提交:使用 post 時,表單數據是與 URL 分開發送的,客戶端的電腦會通知伺服器來讀取數據,所以通常沒有數據長度上的限制,缺點是速度比 get 慢。
輸入框
文本框:表單中最常用的輸入元素就是文本框(text),它提供給用戶輸入的單行文本資訊,如用戶名的輸入。文本框的用法很簡單,只需將 input 標籤的 type 屬性設置為 text 即可。
<input name="表單元素名稱" type="text" id="表單元素名稱" value="值" />
| input標籤屬性 | 說明 |
|---|---|
| type | 指 定 表 單 元 素 的 類 型, 可 用 的 選 項 有 text、password、checkbox、radio、submit、reset、file、hidden、image 和button,默認為 text |
| name | 指定表單元素的名稱 |
| value | 指定表單元素的初始值 |
| size | 指定表單元素的初始寬度。如果 type 為 text 或 password,則表單元素的大小以字元為單位;對於其他輸入類型,寬度以像素為單位 |
| maxlength | 指定可在 text 或 password 元素中輸入的最大字元串,默認無限制 |
| checked | 此屬性只有一個值,為 checked,表示選中狀態,如果不選中,則無須添加此屬性 |
| readonly | 當文本框標籤的 readonly 屬性指定為 readonly 時,文本框中的值不允許更改 |
密碼框: 密碼框主要用於一些保密資訊的輸入,如密碼。因為用戶輸入時,顯示的不是輸入的內容,而是「*」。
<input type="password" id="userPwd" name="userPwd" />
多行文本域:多行文本域用於顯示或輸入兩行或兩行以上的文本,它使用的標籤是 textarea。
<textarea name="指定名稱" cols="列數" rows="行數">
文本域的內容
</textarea>
單選按鈕
<input type ="radio" name="名稱" value ="值" checked="checked" />
複選框
<input type ="checkbox" name="名稱" checked="checked" />
下拉框
<select name="指定列表的名稱" size="行數">
<option value="可選擇的值" selected="selected"> 顯示項的內容 </option>
<option value="可選擇的值"> 顯示項的內容 </option>
</select>
表單驗證
<input type="text" name="usr_name" required="required" />
required 屬性可應用於大多數 input 標籤上。在提交時,如果元素中的內容為空白,則不允許提交,同時在瀏覽器中顯示資訊提示文字,提示用戶該元素中必須輸入內容。
類型匹配驗證
| type 屬性 | 說明 |
|---|---|
| 在提交表單時,會自動驗證值是否符合 e-mail 格式要求 | |
| url | 在提交表單時,會自動驗證值是否符合 url 格式要求 |
| number | 在提交表單時,會自動驗證值是否為數字,並可以配合 min、max 以及 step 屬性進行數值的限定 |
| range | 在提交表單時,會自動驗證值是否在指定的範圍內的數字,使用配合 min、max 以及 step 屬性進行數值的限定,顯示為滑動條 |
| date | 用於選取年、月、日 |
控制字元數量
驗證輸入範圍
自定義錯誤消息
CSS基礎語法
樣式表的分類
外部樣式表
1、鏈接外部樣式: 鏈接外部樣式表是指通過HTML的link鏈接標籤,建立樣式文件和網頁的關聯。
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
2、導入樣式表: 在網頁中,還可以使用@import方法導入樣式表。
<head>
<style type="text/css">
@import "css/style.css";
</style>
</head>
內嵌樣式表
<head>
<style type=」text/css」>
選擇符 {樣式屬性:屬性值;......}
選擇符 {樣式屬性:屬性值;......}
</style>
</head>
行內樣式表
<標籤名 style="樣式屬性:屬性值;" >......</標籤名>
<p style="color:red; font-size:30px; font-family:黑體;">
CSS基本選擇器
標籤選擇器
<style type="text/css">
標籤名 {
屬性1:屬性值1;
屬性2:屬性值2;
}
</style>
類選擇器
1、定義類樣式
<style type="text/css">
.類名 {
屬性1:屬性值1;
}
</style>
2、應用類樣式
<標籤名 class="類名"> 標籤內容 </標籤名>
ID選擇器
<style type="text/css">
#ID標識名 {
屬性1:屬性值1;
屬性2:屬性值2;
}
</style>
CSS 擴展選擇器
組合選擇器
p,.red,#header {
color:red;
font-size:12px;
}
包含選擇器(後代選擇器)
#header ul li a {
color:red;
font-size:12px;
}
交集選擇器
p.red {
color: red;
font-size: 23px;
}
偽類選擇器
標籤名:偽類名{
屬性:屬性值;
}
| 常用偽類 | 含義 | 應用場景 |
|---|---|---|
| a:link | 未單擊訪問時的超鏈接樣式(未訪問) | 常用,超鏈接主樣式 |
| a:visited | 單擊訪問後的超鏈接樣式(已訪問) | 區分是否已被訪問 |
| a:hover | 滑鼠懸浮在超鏈接上的樣式(滑鼠懸停) | 常用,實現動態效果 |
| a:active | 滑鼠單擊未釋放的超鏈接樣式(正被點擊) | 少用,通常與 link 一致 |
CSS的特性
CSS繼承性
CSS3 的繼承性,亦稱為樣式表的層疊性。樣式表的繼承規則是,所有在元素中嵌套的元素都會繼承外層指定的樣式,有時會將很多層樣式疊加在一起,但另行更改除外。
<body>
<p>段落文字</p>
<p id="p1">段落文字</p>
</body>
body {
font-size: 12px;
font-style: italic;
}
#p1 {
font-size: 30px;
}
這裡標籤p中的內容會繼承body定義的屬性,即示例中的段落文字同樣會以斜體的12像素大小的文字顯示,除非定義新的樣式。
CSS3 層疊性和優先順序
如果多個選擇器定義的樣式規則不發生衝突,則元素將應用所有選擇器定義的樣式。
如果多個選擇器定義的樣式規則發生了衝突,則 CSS 按照選擇器的優先順序來處理,元素將應用優先順序高的選擇器定義的樣式。
CSS 規定選擇器總原則是:越特殊的樣式,優先順序越高。
選擇符優先順序從高到低:
行內樣式 > ID樣式 > 類樣式 >元素選擇符
內嵌樣式 > 內部樣式 > 外部樣式
常用的樣式屬性
字體屬性
| 屬性名 | 說明 | 舉例 |
|---|---|---|
| font | 設置字體的所有樣式屬性 | font:bold 12px 宋體 |
| font-family | 定義字體類型 | font-family: 宋體 |
| font-size | 定義字體大小 | font-size:12px |
| font-weight | 定義字體的粗細 | font-weight:bold |
| color | 字體顏色 | color:red;( 顏 色 取 值 可 以 為顏 色 的 英 文 單 詞, 也 可 以 采 用#000000-#FFFFFF 之間的取值) |
文本屬性
| 屬性名 | 說明 | 應用場景 |
|---|---|---|
| line-height | 設置行高(即行間距),常用取值為 25px、28px | 布局多行文本 |
| text-align | 設 置 對 齊 方 式, 常 用 的 取 值 為left、right 以及 center | 各種元素對齊 |
| letter-spacing | 設 置 字 符 間 距, 常 用 的 取 值 為3px、8px | 加大字元間間隔 |
| text-ecoration | 設 置 文 本 修 飾, 常 用 的 取 值 為underline(下劃線)、none | 加下劃線,中劃線等 |
邊距和填充
邊距是指頁面中元素與元素之間的間距,margin 分為上、下、左、右 4 個方向,可以單獨設置 margin-top、margin-left、margin-right、margin-bottom,也可以使用複合屬性 margin 進行設置。
使用複合屬性 margin 設置邊距時,存在 4 種方式。
元素的填充也稱為內邊距,它是指元素內容與邊框之間的距離,填充分為上、下、左、右四個方向,可通過padding-top、padding-left、padding-right、padding-bottom分別設置四個方向的內邊距,也可以通過複合屬性padding設置。
邊框屬性
1、border 屬性
| 屬性名 | 說明 | 示例 |
|---|---|---|
| border-style | 設置邊框的樣式,取值:none 無邊框、solid 實線以及 dashed 虛線等 | border-style:solid |
| border-width | 設置邊框的寬度 | border-width:1px |
| border-color | 設置邊框的顏色 | border-color:redborder |
| border | 複合屬性,用於設置邊框寬度、樣式以及顏色 | border:1px solid red |
2、border-radius
| 語法 | 說明 |
|---|---|
| border-radius:參數 1 | 參數 1:4 個角 |
| border-radius:參數 1 參數 2 | 參數 1:左上角、右下角參數 2:左下角、右上角 |
| border-radius:參數 1 參數 2 參數 3 | 參數 1:左上角參數 2:左下角、右上角參數 3:右下角 |
| border-radius:參數 1 參數 2 參數 3 參數 4 | 4個參數對應左上角、右上角、右下角和左下角 |
列表屬性
| 屬性名 | 說明 |
|---|---|
| list-style-type | 用於設定列表項的符號,取值:None(無)、Disc(實心圓)、Circle(空心圓)、Square(實心方塊)。 |
| list-style-image | 用於設定影像作為列表項目符號,其值為影像對應的url。 |
| list-style-position | 用於設定項目符號在列表項的位置,取值:inside、outside(默認值)。 |
| list-style | 複合屬性,用於設置列表屬性,其順序為:list-style-type、list-style-position、list-style-image。 |
背景和陰影屬性
背景屬性
| 屬性 | 說明 |
|---|---|
| background-color | 用於設置元素的背景顏色 |
| background-image | 用於設置元素的背景圖片 |
| background-repeat | 用於設置元素的背景圖片重複方式 |
| background-position | 用於設置元素的背景圖片位置 |
| background-size | 用於設置元素的背景圖片大小 |
| background | 複合屬性,用於設置元素的背景效果 |
| background-repeat的值 | 默認值,表示背景影像在縱向和橫向上平鋪 |
|---|---|
| no-repeat | 表示背景影像不平鋪 |
| repeat-x | 表示背景影像只在水平方向上平鋪 |
| repeat-y | 表示背景影像只在垂直方向上平鋪 |
背景圖片的定位
background-position: 關鍵字 | 百分比 | 像素值
| 取值 | 說明 |
|---|---|
| 關鍵字 | 水平方向:left、center、right;垂直方向:top、center、bottom。 |
| 百分比 | 使用百分比表示背景位置,常用的數值:水平方向:0%(左) 50%(中) 100%(右)垂直方向:0%(上) 50%(中) 100%(下) |
| 像素值 | 背景圖片左頂點相對於元素左頂點的偏移量,當為正值時,水平向右、垂直向下偏移,當為負值時,水平向左、垂直向上偏移。 |
CSS Sprites
CSS Sprites,在中國也稱之為 CSS 精靈,是一種圖片網頁應用處理方式。它允許將一個頁面涉及到的所有零星圖片均包含到一張大圖中。
其實,CSS Sprites 的目的是通過整合圖片,減少對伺服器的請求數量以及請求的位元組數,從而加快頁面的載入速度。
背景的漸變
線性漸變
background: linear-gradient(<angle> || <direction>,< color_stop>, <color_stop>...);
| 取值 | 說明 |
|---|---|
<angle> |
通過角度來確定漸變的方向。角度是指水平線和漸變線之間的角度,逆時針方向計算。 |
<direction> |
通過代表方向的關鍵詞來確定漸變的方向。 |
<color_stop> |
用於指定終止色,其中可以設置多個終止色,用於實現多種顏色之間的漸變。 |
徑向漸變
background: radial-gradient (<shape> || <size> at <position>, <color_stop>, ...);
| 取值 | 說明 |
|---|---|
<position> |
主要用來定義徑向漸變的圓心位置。 |
<shape> |
主要用來定義徑向漸變的形狀。包括兩個值「circle」(圓形)和「ellipse」(橢圓形)。 |
<size> |
主要用於設置漸變半徑的大小,從而用來確定徑向漸變的結束形狀大小。可以設置數值、百分比以及關鍵字。 |
<color_stop> |
徑向漸變線上的終止色 |
陰影屬性
文字陰影
text-shadow: h-shadow v-shadow blur color;
| 取值 | 說明 |
|---|---|
| h-shadow | 必需,陰影的水平距離。 |
| v-shadow | 必需,陰影的垂直距離。 |
| blur | 可選,陰影的模糊半徑。 |
| color | 可選,陰影的顏色。 |
盒子陰影
box-shadow: h-shadow v-shadow blur spread color;
| 取值 | 說明 |
|---|---|
| h-shadow | 必需,陰影的水平距離。 |
| v-shadow | 必需,陰影的垂直距離。 |
| blur | 可選,陰影的模糊半徑。 |
| spread | 可選,陰影的大小 |
| color | 可選,陰影的顏色。 |
盒子模型
標準文檔流
塊狀標籤和行內標籤
在 CSS 中將 HTML 中標籤分為塊狀標籤和行內標籤
1、常見的塊狀標籤
標題(<h1>~<h6>)、
段落(<p>)、
水平線(<hr/>)、
列表(<ul>、<ol>、<li>、<dl>、<dt>、<dd>)、
表格(<table>)、
層(<div>)、
表單 (<form>)
2、常見的行內標籤
影像(<img>)、範圍(<span>)、換行(<br/>)、超鏈接(<a>)
行內標籤與塊狀標籤的區別:
1、排列方式不同
行內元素按照
從左到右的方式進行排列,多個行內元素顯示在同一行,只有當一行排列完畢後,才會開始一個新行。塊狀元素各佔據一行,則按照自上而下的方式進行排列。
2、內嵌元素不同
塊狀元素可以包含行內元素和塊狀元素。行內元素不能包含塊狀元素,只能包含
文本或者其他
行內元素。
3、屬性設置不同
行內元素與塊狀元素的屬性設置不同,主要體現在
盒子模型中,行內元素設置width 屬性、height 屬性時無效,但可以設置 line-height 屬性,再設置margin 屬性、padding 屬性時,對於上下方向上的設置無效。
display 屬性
CSS 中 display 可以隱藏 HTML 元素包括 div 層(不佔用位置)
display:none | block;
visibility 屬性
CSS 中 visibility 可以隱藏/顯示 html 元素包括 div 層(佔用位置)
visibility:hidden | visible;
盒子浮動
float屬性
float : none | left | right
| 參數 | 說明 |
|---|---|
| left | 表示文本或影像會移動到父元素的左側 |
| right | 表示文本或影像會移動到父元素的右側 |
| none | 是默認值,表示文本或影像會顯示於它在文檔中出現的位置 |
清除浮動
浮動產生的原因:
一個盒子里使用了 CSS float 浮動屬性,導致父級對象盒子不能被撐開,這樣 CSS float 浮動就產生了。左邊盒子使用左浮動,右邊盒子使用右浮動,兩個盒子被包在另外一個盒子中。
浮動產生的負作用:
- 背景不能顯示
- 邊框不能撐開
- margin padding設置值不能正確顯示
清除浮動影響的方法:
1、對父級設置適合 CSS 高度
- 對父級設置適合高度樣式清除浮動,一般設置高度需要能確定內容高度才能設置。比如我們知道內容高度是 100px+ 上下邊框為 2px,這樣具體父級高度為 102px。
2、clear: both 清除浮動
- 在父級 「
</div>」 結束前加此div引入「clear:both」樣式即可清除浮動。
3、父級 div 定義 overflow:hidden
- 對父級CSS選擇器加
overflow: hidden樣式,可以清除父級內使用float產生浮動。優點是可以很少CSS程式碼即可解決浮動產生。
盒子定位
靜態定位
position 屬性的默認值static表示 CSS 文檔流定位,元素框正常生成。就是按照正常的布局流從上到下從左到右布局。
position: static;
相對定位
相對定位可以將指定的標籤從本來應該顯示的位置移動到一個相對位置。
position: relative;
固定定位
position: fixed;
絕對定位
絕對定位可以將指定的標籤放置在絕對坐標位置上,絕對定位使標籤的位置與文檔流無關,因此不佔據空間,可以浮在網頁上。
position: absolute;
z-index 屬性
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
z-index:數字; /*數學越大層級越高*/
頁面布局與規劃
表格布局
- HTML5 的表格標籤除了以網格形式顯示數據以外,還可以被應用於對網頁內容的布局。
- 傳統表格布局方式實際上利用了 table 標籤所具有的無邊框特性,因此可以將網頁中的內容按版式劃分放入表格的各單元格中,從而實現複雜的排版組合。
流式布局
瀑布流布局
瀑布流布局是流式布局的一種,是當下比較流行的一種網站頁面布局,視覺表現為參差不齊的多欄布局,隨著頁面滾動條向下滾動,這種布局還會不斷載入數據塊並附加至當前尾部。
<body>
<h1> 流式布局 </h1>
<img src="logo.jpg">
<p>
流式布局基本沒有對文字圖片資訊的位置控制,它所遵從的是從左至右,然後從上到下的順序
</p>
</body>
masonry 實現瀑布流布局
masonry 是一個 javascript 插件,通過該插件可以輕鬆實現瀑布流布局,和 CSS 中 float 的效果不太一樣的地方在於 float 先水平排列,然後再垂直排列,使用 masonry 則垂直排列元素,然後將下一個元素放置到網格中的下一個開發區域。這種效果可以最小化處理 不同高度的元素在垂直方向的間隙。
<body>
<div id="grid">
<div class="grid-item a"> </div>
<div class="grid-item b"> </div>
......
<div class="grid-item d"> </div>
<div class="grid-item e"> </div>
</div>
</body>
<style type="text/css">
#grid { width: 1000px;margin: 0 auto;}
.grid-item { width: 200px; float: left;}
.a { background: lightblue; height: 200px;}
.b { background: lightcoral; height: 300px;}
.c { background: lightgreen; height: 500px;}
.d { background: lightsalmon; height: 350px;}
.e { background: lightseagreen; height: 150px;}
</style>
<script src="masonry.pkgd.min.js"></script>
<script type="text/javascript">
var msnry = new Masonry('#grid', {
itemSelector: '.grid-item',
columnWidth: 200
});
</script>
div布局
上下結構
上中下結構
上導航中下結構
左窄右寬結構
內容左中右
導航內容左中右
內容右窄左寬
內容左窄右寬
JavaScript基礎語法
使用方式
<script> </Script>標籤中直接編寫腳本程式程式碼- 腳本程式程式碼放置在一個單獨的文件中,然後在網頁文件中引用這個腳本程式文件
- 將腳本程式程式碼作為某個 HTML 頁面元素的事件屬性值或超鏈接的 href 屬性值
HTML 文件混合方式
<body>
<script type="text/javascript">
document.write("<h2> 歡迎來到 JavaScript 課堂 </h2>");
</script>
</body>
JS 文件引用方式
- 創建 JavaScript 文件,命名為demo1.js html
- 頁面,在
<script>標籤中引用 JavaScript 文件
<body>
<script src="../js/demo1.js" type="text/javascript"></script>
</body>
HTML程式碼嵌入方式
<body>
<a href="javascript:document.write('<h2> 歡迎來到 JavaScript 課堂 </h2>');">hello</a>
</body>
JavaScript核心語法
變數
三種使用方式
- 先聲明再賦值 如:var message; message = "hi";
- 同時聲明和賦值變數 如:var message = "hi";
- 不聲明直接賦值 如:message = "hi";
變數命名規則
- 第一個字元必須是一個字母、下劃線(_)或一個美元符號($)
- 其他字元可以是字母、下劃線、美元符號或數字
- 區分大小寫
- 不能與關鍵字同名,如 while、for 和 if 等
數據類型
JavaScript 中有 5 種簡單數據類型,也稱為基本數據類型
- undefined
- null
- boolean
- number
- string
另外還有一種複雜數據類型——object對象類型
由於JavaScript中的變數是弱類型,可通過typeof操作符獲取變數的數據類型
| 數據類型 | 數據值 | typeof |
|---|---|---|
| number類型 | 浮點數、整數 | number |
| boolean類型 | true、false | boolean |
| string類型 | 單引號或雙引號引起來的若干字元 | string |
| null類型 | 只存在一個值null,表示對象不存在 | object |
| undefined類型 | 只存在一個值undefined,表示未賦值或未聲明的變數 | undefined |
JavaScript注釋
- 單行注釋://
- 多行注釋: /* 注釋內容 */
// 聲明並初始化一個變數
var v = 5;
/* 使用 for 循環輸出 Hello5 次 */
document.write("Hello!<br/>");
document.write("Hello!<br/>");
document.write("Hello!<br/>");
document.write("Hello!<br/>");
document.write("Hello!<br/>");
/*
這些注釋不會顯示在頁面上,
但是可以通過頁面的源程式碼查看到
*/
順序結構
順序結構,顧名思義就是程式按照語句出現的先後順序依次執行
<body>
<script type="text/javascript">
document.write(" 程式開始執行……<br/>");
document.write(" 程式正在執行中……<br/>");
document.write(" 程式執行完畢……<br/>");
</script>
</body>
選擇結構
- 選擇結構:需要根據特定的條件執行不同的語句
- JavaScript中選擇結構使用if語句和switch語句
- if 語句有 3 種形式:單分支、雙分支和多分支
1、if 單分支語句
if( 條件表達式 ) {
語句或語句塊
}
2、if 雙分支語句
if( 條件表達式 ) {
語句或語句塊 1
} else{
語句或語句塊 2
}
3、if 多分支語句
if( 條件表達式 1){
語句或語句塊 1
}
else if( 條件表達式 2){
語句或語句塊 2
}......
else if( 條件表達式 n){
語句或語句塊 n
}
else{
語句或語句塊 n+1
}
4、switch 語句
switch(表達式){
case 取值 1:語句或語句塊 1; break;
case 取值 2:語句或語句塊 2; break;
......
case 取值 n:語句或語句塊 n; break;
default: 語句或語句塊 n+1; break;
}
循環結構
while 循環語句
while (條件表達式){
語句或語句塊
}
do-while循環語句
do {
語句或語句塊
}while(條件表達式);
for循環語句
for(初始化表達式 ; 循環條件表達式 ; 循環後的操作表達式){
語句或語句塊
}
break 語句和 continue 語句
JavaScript跳轉語句:break語句和continue語句
break語句用於中斷循環
continue語句用於跳過本次循環要執行的剩餘語句,然後開始下一次循環
var i = 1;
var sum = 0;
while (i <= 20) {
if (i % 2 != 0) {
i++;
continue; // 是奇數就結束本次循環,開始下一次循環
}
sum = sum + i;
if (sum > 30) {
document.write( "當加到:" + i + "時,累加和已經超過 30");
break; // 累加和超過 30,跳出循環
}
i++;
}
自定義函數
函數的定義
- 函數就是為了完成程式中的某些特定功能而進行專門定義的一段程式程式碼
- 函數包括自定義函數和系統函數
- 使用函數可以實現特定的功能,在使用函數前必須對函數進行定義,程式碼放置在
<script></script>標籤之間
function 函數名 (形式參數 1, 形式參數 2,…, 形式參數 n){
語句
}
使用 function 關鍵字。function 後是函數名,JavaScript 中的函數不必說明返回值的類型。
函數的命名規則與變數名的命名規則相同。
函數名後的 () 可以包含若干參數,也可以選擇不帶任何參數。
最後是一對 {},包含具體實現程式中的某些特定功能的若干語句或腳本程式碼
<body>
<script type="text/javascript">
// 參數 width、height 表示使用此函數時,要傳遞所求的長方形的寬度和高度值
function getArea (width,height) {
var result = width*height;
document.write(" 面積為:+ result);
}
</script>
</body>
函數的調用
- 函數是不會自動執行的,調用一個函數的方法是使用函數名稱,並且在函數名後用括弧包含所需要傳入的參數值
- 調用函數的語句也需要放置在
<script>和</script>里
<body>
<script type="text/javascript">
//1、函數的創建
// 參數 width、height 表示使用此函數時,要傳遞所求的長方形的寬度和高度值
function getArea (width, height) {
var result = width * height;
document.write(" 面積為:+ result);
}
</script>
//2、函數的使用
<h1> //寬度是:3,高度是:4 的長方形
<script type="text/javascript">getArea(3,4);</script>
</h1>
</body>
函數的參數
函數參數作用:調用函數時將數據傳遞給被調函數的方式
JavaScript中函數參數的特殊性
-
函數聲明了參數,調用時也可以不傳遞參數,這在其他程式語言中是會出現編譯錯誤的
-
不管函數聲明時有多少個參數,調用函數時可以傳遞若干個參數值給函數,並且實際傳遞的參數值還可以在函數內部獲得
在函數被調用時,一個 arguments 對象就會被創建,它只能使用在函數體中,以數組的形式來管理函數的實際參數
函數的返回值
函數的返回值能夠將一個函數內部產生的結果返回給外部語句使用
實現函數返回值的語句是 return
return 返回值 ;
<script type="text/javascript">
// 創建有返回值的函數
function getArea(width,height) {
var result = width * height;
return result;
}
</script>
<h1> 寬度是:3,高度是:4 的長方形面積是:<br/>
<script type="text/javascript">
// 調用有返回值的函數
var area = getArea(3,4);
document.write(area);
</script>
</h1>
匿名函數
語法一:
(function (形式參數列表){
語句
})(實際參數列表);
<script type="text/javascript">
// 定義函數
function(width,height) {
// 計算長方形的面積
}
</script>
<h1> 寬度是:3,高度是:4 的長方形面積是:<br/>
<script type="text/javascript">
// 調用匿名的函數
(function(width,height){
// 輸出長方形的面積
document.write(width*height);
})(3,4);
</script>
</h1>
語法二:
var 變數 = (function (形式參數列表){
語句
} );
變數(實際參數列表);
<script type="text/javascript">
// 定義函數
var area=function(width,height) {
document.write(width*height);
};
</script>
<h1> 寬度是:3,高度是:4 的長方形面積是:<br/>
<script type="text/javascript">
// 調用函數
area(3,4);
</script>
</h1>
變數的作用域
- 變數的作用域主要分為全局變數和局部變數兩種
- 全局變數是在函數體外部聲明的,可以在任何地方,包括函數的內部使用
- 局部變數是在函數體內聲明的,只能在函數體內使用。局部變數隨著函數的結束而消失
<script type="text/javascript">
var width=40;
function showWidth(){
var width=50;
document.write("<h3> 寬度是:"+width+"</h3>");
}
showWidth();
document.write("<h3> 寬度是:"+width+"</h3>");
</script>
系統函數
parseInt () 函數
parseInt()函數將字元串轉換為整數。它從字元串的開頭開始解析,在第一個非整數位置停止解析並返回前面讀到的所有整數如果字元串不是以整數開頭,將返回 NaN(Not a Number:非數字值)
| parseInt (string) | |
|---|---|
| 字元串 | 結果 |
| 「150cats」 | 150 |
| 「cats」 | NaN |
| 「6」 | 6 |
| 「-6」 | -6 |
| 「6.56」 | 6 |
parseFloat () 函數
parseFloat()函數和parseInt()函數類似,只不過它是返回一個浮點數
| parseFloat (string) | |
|---|---|
| 字元串 | 結果 |
| 「route66.5」 | NaN |
| 「8.5dogs」 | 8.5 |
| 「6」 | 6 |
| 「6.56」 | 6.56 |
| 「.7」 | 0.7 |
isNaN () 函數
isNaN()函數用於判斷參數是否是NaN(不是數字)。如果是 NaN, 那麼 isNaN 函數返回 true ,否則返回 false
| isNaN (參數) | |
|---|---|
| 參數 | 結果 |
| 『134』 | false |
| '2a34' | true |
| '2.34' | false |
| ' ' (空格) | false |
| 'wh' | true |
eval () 函數
eval()函數運行是以字元串形式表示的 JavaScript 程式碼串,並返回執行程式碼串後的結果
JavaScript事件介紹
事件
JavaScript 是基於對象、採用事件驅動的腳本語言
事件:用戶使用滑鼠或鍵盤在瀏覽器窗口或頁面元素上執行的操作
事件源:產生事件的元素
事件處理程式:對事件進行處理的程式或函數
事件驅動:將一段程式程式碼與某個事件源上發生的事件進行綁定,當觸發此事件,瀏覽器就會自動執行與之綁定的程式程式碼
事件與處理程式的綁定
在JavaScript 中,有兩種方式將對象事件與處理程式程式碼進行綁定
1、在事件源對象所對應的 HTML 頁面標籤上增加一個要處理的事件屬性,讓事件屬性值等於處理該事件的函數名或程式程式碼
<script type="text/javascript">
function changeSize() {
var obj=document.getElementById("text");
obj.style.fontSize = "30px";
}
</script>
<p id="text" onClick="changeSize()"> 事件與處理程式的綁定 </p>
2、可以直接在 JavaScript 程式碼中設置元素對象的事件屬性,讓事件屬性值等於處理該事件的函數名或程式程式碼
<p id="text"> 事件與處理程式的綁定 </p>
<script type="text/javascript">
function changeSize() {
var obj = document.getElementById("text");
obj.style.fontSize="30px";
}
document.getElementById("text").onclick=changeSize;
</script>
</p>
JavaScript的常用事件
滑鼠事件
onclick 事件:滑鼠單擊頁面元素時觸發的事件
<script type="text/javascript">
function showGender(obj) {
alert("你選擇的性別是:"+obj.value);
}
</script>
<h2> 性別:
<input type="radio" value=" 男 " name="gender" onClick="showGender(this)"/> 男
<input type="radio" value=" 女 " name="gender" onClick="showGender(this)"/> 女
</h2>
其他事件
onload 事件:頁面載入完成後立即發生
<body>
<script type="text/javascript">
window.onload = function() {
alert(" 頁面載入完成 ");
}
</script>
</body>
onblur 事件:游標或者焦點離開元素後觸發的事件
<body>
<p>請輸入密碼:<input type="password" id="txtPwd" onblur="checkPwd(this)"/></p>
<script type="text/javascript">
function checkPwd(obj) {
var pwd = obj.value;
if (pwd.length >= 6){
alert("密碼輸入正確");
}else {
alert("密碼的長度必須是 6 位或以上");
}
}
</script>
</body>
onchange事件:輸入框的值發生了變化或者改變下拉列表框的選項時會觸發的事件
<script type="text/javascript">
function changeLink(obj) {
var site = obj.value;
if(site != "請選擇") {
window.open(site);
}
}
</script>
表單事件
單擊表單元素的「提交按鈕」會觸發form標籤的 onsubmit 事件,瀏覽器對這個事件的默認處理方式是提交數據給 action 屬性指定的頁面進行處理
如果要阻止提交數據到指定的頁面,就需要編寫一個事件處理程式來改變瀏覽器對form標籤的 onsubmit 事件的默認處理方式
<script type="text/javascript">
function check() {
// 獲取輸入在 id="name" 文本框中的內容
var userName = document.getElementById("name").value;
if(userName.trim().length>0) {
return true;
} else {
alert(" 請輸入用戶名 ");
return false;
}
}
</script>
<form action="info.html" onSubmit="return check()">
<p> 用戶名:<input type="text" id="name"/></p>
<p><input type="submit" value="提交"/></p>
</form>
瀏覽器對象模型
BOM 是瀏覽器對象模型的簡稱。JavaScript 將整個瀏覽器窗口按照實現的功能不同拆分成若干個對象
一個完整的 BOM 主要包括 window 對象、history 對象、location 對象和 document 對象等

BOM中,整個對象的層次關係如下圖

window 對象
window 對象處於對象模型的第一層,對於每個打開的窗口系統都會自動將其定義為window 對象
window 對象常用屬性
| 屬性 | 含義 |
|---|---|
| document | 窗口中當前顯示的文檔對象 |
| history | history 對象保存窗口最近載入的 URL |
| location | 當前窗口的 URL |
| status | 狀態欄文本 |
window 對象常用方法
| 方法 | 說明 |
|---|---|
| prompt | 顯示可提示用戶輸入的對話框 |
| alert | 顯示帶有一個提示消息和一個確定按鈕的警示框 |
| confirm | 顯示一個帶有提示資訊、確定和取消按鈕的確認框 |
| close | 關閉瀏覽器窗口 |
| open | 打開一個新的瀏覽器窗口,載入給定URL所指定的文檔 |
| setTimeout | 在設定的毫秒數後調用函數或計算表達式 |
| setInterval | 按照設定的周期(以毫秒計)來重複調用函數或表達式 |
| clearInterval | 取消重複設置,與setInterval對應 |
使用window對象創建對話框
alert() 方法彈出警告對話框
<body>
<script type="text/javascript">
var age = 23;
var name = "張三";
window.alert(" 我是:" + name + "\n 年齡是:" + age);
</script>
</body>

prompt() 方法創建提示對話框
<body>
<script type="text/javascript">
var name = window.prompt(" 請輸入昵稱:");
window.alert("歡迎你:"+ name);
</script>
</body>

confirm() 方法創建確認對話框
<body>
<script type="text/javascript">
var flag = window.confirm(" 確認刪除嗎 ?");
if(flag) {
window.alert(" 執行刪除操作 ");
} else {
window.alert(" 取消刪除操作 ");
}
</script>
</body>

使用window對象操作窗口
window對象的 open() 方法和 close() 方法用於打開和關閉窗口
open方法的第一個參數是新窗口的URL,第二個參數是給新窗口的命名,第三個參數是設置新窗口的特徵
| 名稱 | 說明 |
|---|---|
| height、width | 窗口文檔顯示區的高度、寬度,單位為像素 |
| left、top | 窗口與螢幕左邊、頂端的距離,單位為像素 |
<body>
<script type="text/javascript">
var newWin;
window.onload = function(){
newWi n = window.open("adv.html","adv","width=800,height=500,left=275,top=118");
}
</script>
<h2>主頁面</h2>
<a href="javascript:newWin.close()">關閉廣告</a>
</body>

history對象
history對象保存了當前瀏覽器窗口中打開頁面的一個歷史記錄列表,使用 history對象可以將當前瀏覽器頁面跳轉到某個曾經打開過的頁面
| 方法 | 描述 |
|---|---|
| back() | 後退一個頁面,相當於瀏覽器後退按鈕 |
| forward() | 前進一個頁面,相對於瀏覽器前進按鈕 |
| go() | 打開一個指定位置的頁面 |
可以使用
history.go(-1)和history.go(1)代替histroy.back()和history.forward()
<body>
<a href="//www.baidu.com"> 打開百度頁面 </a><br/>
<a href="javascript:window.history.forward()"> 前進 </a><br/>
<a href="javascript:window.history.back()"> 後退 </a><br/>
<a href="javascript:window.history.go(1)"> 前進 </a><br/>
<a href="javascript:window.history.go(-1)"> 後退 </a>
</body>

location對象
location對象用於管理當前打開窗口的URL資訊,相當於瀏覽器的地址欄
| 名稱 | 描述 |
|---|---|
| href 屬性 | 返回或設置當前頁面的 URL |
| hostname 屬性 | 返回 Web 主機的域名 |
| pathname 屬性 | 返回當前頁面的路徑和文件名 |
| port 屬性 | 返回 Web 主機的埠(80 或 443) |
| protocol 屬性 | 返回所使用的 Web 協議(// 或 //) |
| reload() 方法 | 重新載入當前頁面,相對於瀏覽器的刷新按鈕 |
| assign() 方法 | 載入新的文檔 |
<script type="text/javascript">
window.onload = function() {
var info = document.getElementById("info");
info.innerHTML=" 主機域名:" +
window.location.hostname+"<br/> URL 地址:"+
window.location.href +"<br/> 主機埠:"+
window.location.port +"<br/>Web 協議:"+
window.location.protocol+"<br/> 頁面的路徑和文件名:" + window.location.pathname;
}
function changURL() {
// 獲取選擇的列表項的值
var url = document.getElementById("sel").value;
window.location.href = url; // 設置當前瀏覽器窗口地址欄的 URL
}
</script>


screen對象
window.screen 對象包含了用戶螢幕的相關資訊,在編寫時可以不使用window前綴
| 屬性 | 描述 |
|---|---|
| availWidth | 返回顯示器幕的可用寬度(除 Windows 任務欄之外) |
| availHeight | 返回顯示器幕的可用高度(除 Windows 任務欄之外) |
| colorDepth | 返回目標設備或緩衝器上的調色板的比特深度 |
| pixelDepth | 返回顯示器幕的顏色解析度(比特每像素) |
| width | 返回顯示器螢幕的寬度 |
| height | 返回顯示器螢幕的高度 |
<h3> 你的螢幕:</h3>
<script type="text/javascript">
document.write(" 總寬度 / 高度 :");
document.write(screen.width+"*"+screen.height);
document.write("<br/>");
document.write(" 可用寬度 / 高度 :");
document.write(screen.availWidth+"*"+screen.availHeight);
document.write("<br/>");
document.write(" 色彩深度 :");
document.write(screen.colorDepth);
document.write("<br/>");
document.write(" 色彩解析度 :");
document.write(screen.pixelDepth);
</script>

navigator對象
navigator對象包含了瀏覽器的有關資訊
navigator 對象的實例是唯一的,可以用 window 對象的 navigator 屬性來引用它
| 方法 | 描述 |
|---|---|
| javaEnabled() | 規定瀏覽器是否啟用 Java |
| taintEnabled() | 規定瀏覽器是否啟用數據污點,僅適用於 IE 瀏覽器(Data Tainting) |
navigator對象的常用屬性如下
| 屬性 | 描述 |
|---|---|
| appCodeName | 返回瀏覽器的代號 |
| appMinorVersion | 返回瀏覽器的次級版本 |
| appName | 返回瀏覽器的名稱 |
| appVersion | 返回瀏覽器的平台和版本資訊 |
| browserLanguage | 返回當前瀏覽器的語言 |
| cookieEnabled | 返回瀏覽器中是否啟用 cookie 的布爾值 |
| cpuClass | 返回瀏覽器系統的 CPU 等級 |
| onLine | 返回系統是否處於聯機模式的布爾值 |
| platform | 返回運行瀏覽器的作業系統平台 |
| systemLanguage | 返回作業系統使用的默認語言 |
| userAgent | 返回由客戶機發送伺服器的 user-agent 頭部的值 |
| userLanguage | 返回作業系統的自然語言設置 |
<body>
<div id="info"></div>
<script type="text/javascript">
var info = "<p> 瀏覽器代號 :" + navigator.appCodeName + "</p>";
info+="<p> 瀏覽器名稱 :"+navigator.appName+"</p>";
info+="<p> 瀏覽器版本 :"+navigator.appVersion+"</p>";
info+="<p> 是否處於聯機模式 :"+navigator.onLine+"</p>";
info+="<p> 啟用 Cookies:"+navigator.cookieEnabled+"</p>";
info+="<p> 硬體平台 :"+navigator.platform+"</p>";
info+="<p> 用戶代理 :"+navigator.userAgent+"</p>";
info+="<p> 是否啟用 Java:"+navigator.javaEnabled()+"</p>";
document.getElementById("info").innerHTML=info;
</script>
</body>

由於 navigator 會誤導瀏覽器檢測,所以可以使用對象檢測來嗅探不同的瀏覽器。但不同的瀏覽器支援不同的對象,因此對於不同的瀏覽器,要使用不同的對象來檢測
| 集合 | 描述 |
|---|---|
| 返回對文檔中所有嵌入式對象的引用 | |
| plugins[] | 該集合是一個 plugin 對象的數組,其中的元素代表瀏覽器已經安裝的插件。plugin對象提供的是有關插件的資訊,其中包括它所支援的 MIME 類型的列表 |
| 雖然 plugins[ ] 數組是由 IE4 定義的,但是在 IE4 中它卻總是空的,因為 IE4 不支援插件和 plugin 對象 |
<body>
<h2> 你的瀏覽器安裝了以下插件:</h2>
<script type="text/javascript">
var plug = navigator.plugins;
for (var i=0; i<plug.length;i++){
document.write(plug[i].name+"<br/>")
}
</script>
</body>

文檔對象模型
DOM(Document Object Model)是文檔對象模型的簡稱
DOM 把HTML 文檔看成由元素、屬性和文本組成的一棵倒立的樹

可以把HTML 文檔中的每個成分看成一個節點,所以 DOM 的核心操作是查看節點、創建節點、增加節點、刪除節點以及替換節點
整個文檔是一個文檔節點
每個HTML 標籤是一個元素節點
包含在HTML 元素中的文本是文本節點
每個HTML 屬性是一個屬性節點
注釋屬於注釋節點 HTML 文檔中的節點彼此間都存在關係,類似一張家族圖譜
<html>
<head>
<meta charset="utf-8">
<title> 文檔對象模型節點的特點 </title>
</head>
<body>
<h1> 文檔對象模型概述</h1>
<p>DOM: 文檔對象模型</p>
</body>
</html>

- 除文檔根節點之外的每個節點都有父節點
- 大部分元素節點都有子節點
- 當節點共享同一個父節點時,它們就是同輩
- 節點也可以擁有後代,後代指某個節點的所有子節點,或者這些子節點的子節點,以此類推
- 節點也可以擁有先輩。先輩是某個節點的父節點,或者父節點的父節點,以此類推
整個HTML 文檔在DOM 中是一個document 對象
| 屬性 | 含義 |
|---|---|
| bgColor | 頁面的背景顏色 |
| fgColor | 文本的前景顏色 |
| title | 頁面標題 |
<body>
<h2>document 對象的常用屬性</h2>
<script type="text/javascript">
document.title="document 對象的常用屬性";
document.bgColor="blue";
document.fgColor="white";
</script>
</body>

通過 id 查找 HTML 元素
使用 document.getElementById(id) 方法可以通過 id 獲取 HTML 頁面的元素
<p id="intro"> 你好,世界! </p>
<p>本案例演示了 <b>getElementById</b> 的用法! </p>
<script type="text/javascript">
var x=document.getElementById("intro");
document.write("<p> 該文本來自 id 為 intro 的段落 :"+x.innerHTML+"</p>");
</script>

innerHTML屬性是一個字元串,用來設置或獲取位於對象起始和結束標籤之間的HTML內容
- 使用 document.getElementsByName(name) 方法可以通過name獲取頁面元素
- 參數 name 為必選項,為字元串類型
- 返回值為數組對象,如果無符合條件的對象,則返回空數組
示例:使用getElementsByName() 方法模擬購物車的全選功能
<script type="text/javascript">
function check() {
var cb1 = document.getElementById("allCheck");
var chs = document.getElementsByName("item");
for(var i=0; i<chs.length;i++) {
chs[i].checked = cb1.checked;
}
}
function checkItem() {
var checked=0;
var notchecked=0;
var cb1 = document.getElementById("allCheck");
var chs = document.getElementsByName("item");
for(var i=0; i<chs.length;i++) {
if(chs[i].checked) {
checked++;
} else {
notchecked++;
}
}
if(checked == chs.length){
cb1.checked=true;
}else
if(notchecked == chs.length){
cb1.checked=false;
}else{
cb1.checked=false;
}
}
</script>
通過 name 查找 HTML 元素
- 使用 document.getElementsByName(name) 方法可以通過name獲取頁面元素
- 參數 name 為必選項,為字元串類型
- 返回值為數組對象,如果無符合條件的對象,則返回空數組
示例: 使用getElementsByName() 方法模擬購物車的全選功能
<script type="text/javascript">
function check() {
var cb1 = document.getElementById("allCheck");
var chs = document.getElementsByName("item");
for(var i=0; i<chs.length;i++) {
chs[i].checked = cb1.checked;
}
}
function checkItem() {
var checked=0;
var notchecked=0;
var cb1 = document.getElementById("allCheck");
var chs = document.getElementsByName("item");
for(var i=0; i<chs.length;i++) {
if(chs[i].checked) {
checked++;
}else{
notchecked++;
}
}
if(checked == chs.length){
cb1.checked=true;
}else if(notchecked == chs.length){
cb1.checked=false;
}else{
cb1.checked=false;
}
}
</script>
通過標籤名查找 HTML 元素
- 使用 document.getElementsByTagName(tagname) 方法可以通過標籤名訪問頁面元素
- 參數 tagname 為必選項,為字元串類型
- 返回值是指定標籤名的對象的集合,如果無符合條件的對象,則返回空數組
示例:當滑鼠移動到頁面中的菜單上時,修改菜單的背景影像以
<script type="text/javascript">
var navUl = document.getElementById("nav");
var lis = navUl.getElementsByTagName("li");
for (var i=0; i<lis.length;i++) {
lis[i].onmouseover=function() {
this.style.backgroundImage="url(../img/bg2.gif)";
}
lis[i].onmouseout=function() {
this.style.backgroundImage="url(../img/bg1.gif)";
}
}
</script>

通過類名查找 HTML 元素
- 使用 document.getElementsByClassName(classname) 方法可以通過類名訪問頁面元素
- 參數 classname為必選項,是字元串類型,指需要獲取的元素類名
- 返回值為NodeList 對象,表示指定類名的元素集合。可通過節點列表中的節點索引號來訪問列表中的節點
可以使用NodeList對象的length屬性來確定指定類名的元素個數,並循環各個元素來獲取需要的元素
示例:使用getElementsByClassName() 方法實現斑馬線效果
<ul id="ul1">
<li class="box"> 通過 id 查找 HTML 元素 </li>
<li> 通過 name 查找 HTML 元素 </li>
<li class="box"> 通過標籤名查找 HTML 元素 </li>
<li> 通過類名查找 HTML 元素 </li>
<li class="box"> 我是帶有 box 樣式的列表項 </li>
</ul>
<script type="text/javascript">
window.onload=function() {
var ul1=document.getElementById("ul1");
var box=ul1.getElementsByClassName("box");
for(var i=0; i<box.length;i++) {
box[i].style.background="yellow"; }}
</script>

使用document 對象改變 HTML輸出流
JavaScript 中的 document 對象能夠動態地創建 HTML 內容。document.write() 方法可用於直接向 HTML 的輸出流寫內容
示例:頁面中動態輸出當前的日期

不要在文檔載入完成之後使用
document.write()方法,這樣做會覆蓋該文檔中所有的內容
使用document對象改變HTML內容
修改 HTML 內容最簡單的方法是使用 innerHTML 屬性
document.getElementById(id).innerHTML = 新的 HTML 內容
示例:使用 innerHTML 在頁面中動態添加內容
<script type="text/javascript">
function insert() {
var obj = document.getElementById("content");
obj.innerHTML="<h2> 我是動態添加的內容 </h2>"
}
</script>
<div id="content"> </div>
<input type="button" value="向頁面中添加內容" onClick="insert()"/>


使用document對象改變HTML樣式
如果需要改變 HTML 元素的樣式,可使用以下語法
document.getElementById(id).style.property= 新樣式
<script type="text/javascript">
function insert() {
var obj = document.getElementById("content");
obj.innerHTML="<h2> 我是動態添加的內容 </h2>"
}
function changeStyle() {
var content = document.getElementById("content");
content.style.borderColor="red";
content.style.color="orange";
content.style.borderStyle="solid";
content.style.borderWidth="2px";
}
</script>
<div id="content"> </div>
<input type="button" value=" 向頁面中添加內容 " onClick="insert()"/>
<input type="button" value=" 修改頁面樣式 " onClick="changeStyle();"/>

每個 HTML 對象都有用於訪問 CSS 樣式的 style 屬性,style 對象中包含一系列與 CSS 屬性相對應的屬性
style 對象的屬性同CSS的屬性命名不同,它刪除了「-」,第一個單詞後面的每個單詞首字母大寫
使用document對象改變HTML屬性
document.getElementById(id).attribute= 新屬性值
示例:添加修改 HTML 樣式
<p>
<img id="image" src="../img/smiley.gif" width="160" height="120"/>
</p>
<p>
<input type="button" value="更換圖片" onClick="changePic()"/>
</p>
<script type="application/javascript">
function changePic() {
var img = document.getElementById("image");
img.src = "../img/landscape.jpg";
}
</script>
DOM 節點操作
可以根據層級關係來查找節點,在 DOM 中每個節點都具有訪問其他節點的屬性
| 屬性 | 描述 |
|---|---|
| parentNode | 當前節點的父節點引用 |
| childNodes | 當前節點的所有子節點 |
| firstChild | 當前節點的第一個子節點 |
| lastChild | 當前節點的最後一個子節點 |
| previousSibling | 當前節點的前一個兄弟節點 |
| nextSibling | 當前節點的後一個兄弟節點 |
示例:使用屬性查找節點,並設置其樣式
function getChildren() {
var div1 = document.getElementById("test");
var ps = div1.childNodes;
for(var i=0; i<ps.length;i++) {
// 如果子節點是元素節點
if(ps[i].nodeType==1) {
ps[i].style.color="blue";
}
}
}
function getParent() {
var div1=document.getElementById("test");
var parent=div1.parentNode;
parent.style.backgroundColor="pink";
}

childNodes 屬性,它返回當前節點的所有子節點,其中子節點包括元素節點、屬性節點和文本節點
通過節點對象的 nodeType 屬性可以判斷屬於哪種類型的節點
當 nodeType 是 1 時就是元素節點;nodeType 為 2 時是屬性節點;nodeType 為 3 時則是文本節點
動態添加和刪除節點
添加節點
- 使用 createElement 創建節點
- 使用 appendChild(node) 方法將指定的節點追加到現有節點的末尾
刪除節點
- 使用 removeChild 刪除節點
使用 DOM 刪除元素時,需要清楚地知道要刪除元素的父元素
示例:動態添加和刪除節點
<input type="button" value="添加" onClick="ins()"/>
<input type="button" value="刪除" onClick="del()"/>
<script type="text/javascript">
var sel=document.createElement("select");
var option1=document.createElement("option");
option1.value="yellow";
option1.innerHTML=" 黃色 ";
sel.appendChild(option1);
var option2=document.createElement("option");
option2.value="red";
option2.innerHTML=" 紅色 ";
sel.appendChild(option2);
var option3=document.createElement("option");
option3.value="blue";
// 創建一個文本節點
var txt=document.createTextNode(" 藍色 ");
option3.appendChild(txt);
sel.appendChild(option3);
//select 的 onchange 事件處理
sel.onchange=function() {
document.body.bgColor=this.value;
}
// 將 select 中的第一個元素節點移動到 select 子節點的末尾
sel.appendChild(sel.firstChild);
function ins() {
document.body.appendChild(sel);
}
// 刪除 select 節點
function del() {
document.body.removeChild(sel);
}
</script>


JavaScript對象
JavaScript 的內部對象
JavaScript 提供了一些非常有用的內部對象,按使用方式可分為兩種
實例對象。在引用該對象的屬性和方法時,必須先使用 new 關鍵字創建一個對象實例,然後再使用「對象實例名 . 成員」的格式來進行訪問
靜態對象。在引用該對象的屬性和方法時不需要使用 new 關鍵字來創建對象實例,可以直接使用「類名 . 成員」的格式來進行訪問
Object對象
Object 對象提供了一種創建自定義對象的簡單方式,因為它不需要開發人員定義構造函數
在程式運行時可以為JavaScript 對象添加屬性,因此使用 Object 對象創建出自定義對象非常簡便
對象的屬性可以使用索引運算符「[ ]」進行訪問
示例:Object 對象的用法
<script type="text/javascript">
var person = new Object();
person.name="Tom";
person.age=25;
function getAttr(attr) {
alert(person[attr]);
}
</script>
<p><input type="button" value=" 顯示姓名 " onClick="getAttr('name')"/> </p>
<p><input type="button" value=" 顯示年齡 " onClick="getAttr('age')"/></p>


Date對象
通過創建 Date 對象,可以獲取本地電腦中的日期與時間
初始化 Date 對象有 4 種方式
new Date() // 當前日期和時間
new Date(milliseconds) // 返回從 1970 年 1 月 1 日至今的毫秒數
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)
示例:Date 對象的用法
<script type="text/javascript">
var now = new Date();
document.write(now+"<br/>");
var date1 = new Date("October 13, 1975 11:13:00")
document.write(date1+"<br/>");
var date2 = new Date(79,5,24)
document.write(date2+"<br/>");
var date3 = new Date(79,5,24,11,33,0)
document.write(date3+"<br/>");
var date4 = new Date(60*60*1000);
document.write(date4);
</script>

| 方法 | 功能 |
|---|---|
| getDate() | 返回一個月中的某一天(1 ~ 31) |
| getDay() | 返回一周中的某一天(0 ~ 6),0 為周日,1 為周一,以此類推 |
| getFullYear() | 以四位數返回年份 |
| getHours() | 返回小時(0 ~ 23) |
| getMilliseconds() | 返回毫秒 |
| getMinutes() | 返回分鐘(0 ~ 59) |
| getMonth() | 返回月份(0 ~ 11),0 為一月,1 為二月,以此類推 |
| getSeconds() | 返回秒數(0 ~ 59) |
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒數 |
示例:Date 對象中方法的使用
<span id="myclock"></span>
<script type="text/javascript">
function showTime() {
var now = new Date();
var year = now.getFullYear(); // 獲取年份
var month = now.getMonth()+1; // 獲取月份
var day = now.getDate(); // 獲取日
var hour = now.getHours(); // 獲取小時
var minutes = now.getMinutes(); // 獲取分鐘
var seconds = now.getSeconds(); // 獲取秒
var week = now.getDay();
var weekStr;
switch(week){
case 0:
weekStr="星期天";
break;
case 6:
weekStr="星期六";
break;
case 5:
weekStr="星期五";
break;
case 4:
weekStr="星期四";
break;
case 3:
weekStr="星期三";
break;
case 2:
weekStr="星期二";
break;
case 1:
weekStr="星期一";
break;
}
document.getElementById("myclock").innerHTML=year+" 年 "+ checkTime(month)+" 月 "+checkTime(day)+" 日 <br/>"+weekStr+"<br/>" +checkTime(hour)+":"+checkTime(minutes)+":"+checkTime(seconds);
}
function checkTime(i) {
if(i<10){
i="0"+i; // 在小於 10 的數字前加一個 0
}
return i;
}
// 每隔 500 毫秒取一次當前的時間
window.setInterval("showTime()",500);
window.onload = showTime;
</script>

示例:使用 Date 對象進行倒計時,顯示距離國慶節的剩餘時間
<span id="time"></span>
<script type="text/javascript">
function remainTime() {
var now = new Date();// 當前時間
var year = now.getFullYear();
var month = now.getMonth()+1;
// 如果當前月份超過 10 月,則計算下一年的 10 月 1 日
if(month>=10) year+=1;
var future = new Date(year,9,1);
var remain = future.getTime()-now.getTime();// 毫秒
// 計算剩餘的天數
var days = parseInt(remain/(24*60*60*1000));
// 計算剩餘的小時數
var hours = parseInt(remain/(60*60*1000)%24);
// 計算剩餘的分鐘數
var minutes = parseInt(remain/(60*1000)%60);
var seconds = parseInt(remain/1000%60); // 計算剩餘的秒數
days = checkTime(days);
hours = checkTime(hours);
minutes = checkTime(minutes);
seconds = checkTime(seconds);
document.getElementById("time").innerHTML="<h2> 距離國慶節還剩 <br/>" +days+" 天 "+hours+" 小時 " +minutes+" 分鐘 " + seconds+" 秒 </h2>";
}
function checkTime(i) {
if(i<10) i="0"+i; // 將 0 ~ 9 的數字前面加上 0
return i;
}
window.onload=remainTime;
window.setInterval("remainTime()",500);
</script>

Image對象
網頁中使用圖片,只需要調用 標籤,然後在 src 屬性中設置圖片的絕對路徑或相對路徑即可
如果實現動畫或者影像效果,則需要使用影像快取技術,讓用戶對影像效果獲得較好的體驗,使用這種技術需要藉助Image對象
示例:頁面中顯示一幅默認影像和一個按鈕,點擊按鈕後,快速切換至另一幅圖片
<head>
<meta charset="utf-8">
<title> 使用影像快取技術</title>
<script type="text/javascript">
var picObj = new Image();
picObj.src="../img/pc.jpg";
function changePic() {
document.getElementById("pic").src=picObj.src;
}
</script>
</head>
<body>
<p><img src="../img/mobile.jpg" id="pic" width="200"/></p>
<p><input type="button" value=" 切換" onClick="changePic()"/></p>
</body>


Math對象
JavaScript 中的基本數值運算符可以用來進行一些簡單的數學計算,而使用Math 對象可以進行更多的高級運算,如平方根、三角函數、對數和隨機數等
與其他對象不同,Math 不需要使用new 關鍵字創建對象的實例
Math對象中常用的方法
| 方法 | 功能 |
|---|---|
| Math.abs(number) | 返回number 的絕對值 |
| Math.ceil(number) | 對number 向上取整,如Math.ceil(67.6) 返回值是68 |
| Math.floor(number) | 對number 向下取整,如Math.floor (67.6) 返回值是67 |
| Math.max(number1,number2) | 返回number1 與number2 中的較大值 |
| Math.min(number1,number2) | 返回number1 與number2 中的較小值 |
| Math.pow(x,y) | 返回x 的y 次冪 |
| Math.random() | 返回0 和1 之間的偽隨機數,可能為0,但總是小於1 |
| Math.round(number) | 返回最接近number 的整數 |
| Math.sqrt(number) | number 的平方根 |
示例:使用Math對象,完成一個猜數遊戲
var number=Math.floor(1+10*Math.random()); // 獲取1 到10 之間的整數
function guess_click() {
var info = document.getElementById("guess").value; // 獲取用戶輸入的內容
if(info.trim()!=null && info.trim()!="" && !isNaN(info)) {
var input=Math.floor(info); // 向下取整
if(number == input) {
alert(" 猜對了!");
} else if( number > input) {
alert(" 猜小了! ");}
else {
alert(" 猜大了!");
}
} else {
alert(" 請輸入整數"); }
}

數組
1、數組列表
數組列表用於表示一組數據的集合,它由一對方括弧([])包圍,列表中的每個元素用逗號分隔,數組元素可以是任意類型的數據(包括其他數組),數組的定義
var arr=["happy",12,45.6];
每個數組變數都有一個length屬性,表示該數組中元素的個數
定義一個數組變數後,就可以使用「
數組變數名[索引號]」的格式來訪問每個數組元素數組列表中的第一個元素的索引號為0,其後的每個元素的索引號依次遞增,最後的元素索引為數組的長度-1
如果數組元素本身是一個數組,那麼這個元素稱為子數組,可以使用「
數組變數名[子數組索引號][子數組中的元素索引號]」的格式來訪問子數組中的元素
示例:數組列表的用法,遍曆數組列表中的元素
<body>
<script type="text/javascript">
var arr=[' 白色',' 紫色',' 橙色',' 紅色'];
for(var i=0; i<arr.length;i++) {
document.write(arr[i]+"<br/>");
}
</script>
</body>

數組元素的下標不僅可以是數字,還可以是文本
示例:使用數組文本下標的方式來獲取數組中的元素
<body>
<script type="text/javascript">
var arr=[]; // 聲明數組變數
arr[' 暖色調']=[' 紅色',' 橙色',' 黃色'];
arr[' 冷色調']=[' 綠色',' 青色',' 藍色'];
document.write("<h2>");
// 輸出冷色調的第3 種顏色
document.write(arr[' 冷色調'][2]);
document.write("</h2>");
</script>
</body>

2、Array
- JavaScript 中提供了一個名為Array 的內部對象,可用它來創建數組。通過調用Array 對象的各種方法,可以方便地對數組進行排序、刪除和合併等操作
- Array 對象創建數組常用的3種方式
var arr = new Array() //數組初始元素個數為0
var arr = new Array(4); //創建具有指定大小的Array 對象
var arr = new Array(1,2,3); //用指定的元素列表去初始化Array 對象,數組的長度是設置的元素的數目
String對象
當某字元串使用單引號或雙引號標註時,可以被當作字元串對象實例進行處理,從而直接調用String 對象的屬性和方法
常用屬性:length
常用方法
| 方法 | 描述 |
|---|---|
| charAt() | 返回字元串對象中指定索引處的字元,索引從0 開始,如"Hello World".charAt(3),返回字元"l" |
| indexOf() | 返回某個子字元串在目標字元串中首次出現的位置,如"Hello World".indexOf("a"),返回-1,在目標字元串中沒有子字元串"a",故返回-1 |
| substr() | 從指定索引位置開始截取指定長度的字元串, 如"Hello World".substr(2,3),返回"llo"。第一個參數表示從索引為2 的字元開始截取,即"l",第二個參數表示截取的長度 |
| substring() | 返回指定索引範圍內的字元串, 如"Hello World".substring(2,3),返回"l",返回索引2和3 間的字元串,並且包括索引2 對應的字元,不包括索引3 對應的字元 |
| toLowerCase() | 將字元串轉化為小寫 |
| toUpperCase() | 將字元串轉化為大寫,如"Hello World".toUpperCase(),返回" HELLO WORLD" |
| split() | 返回按照指定分隔符拆分的若干子字元串數組,如var arr="hello,world".split(",");arr 是數組變數,其中第一個元素是"hello",第二個元素是"world" |
示例:驗證用戶輸入的電子郵箱和密碼是否合法
function $(id) {
// 獲取HTML 頁面中指定id 的元素
return document.getElementById(id);
}
function check() {
if(checkEmail() && checkPwd()) {
return true;
}
return false;
}
function checkEmail() {
var email = $("email").value;
var obj=$("span_email");
obj.innerHTML="";
if(email=="") {
obj.innerHTML="Email 地址不能為空";
return false;
}
if(email.indexOf("@")==-1) {
obj.innerHTML="Email 地址格式不正確,必須包含@";
return false;
}
if(email.indexOf(".")==-1) {
obj.innerHTML="Email 地址格式不正確,必須包含.";
return false;
}
return true;
}
function checkPwd() {
var pwd = $("pwd").value;
var obj = $("span_pwd");
obj.innerHTML="";
if(pwd=="") {
obj.innerHTML="密碼不能為空";//使用innerHTML 屬性設置標籤中的內容
return false;
}
if(pwd.length<6) {
obj.innerHTML=" 密碼必須等於或大於6 個字元";
return false;
}
return true;
}

對象的創建
類(class)是一個模板,模板描述了本類中所有對象共同的屬性和行為
定義JavaScript 類,需要編寫一個函數,函數名為對象的類名,在函數體中定義屬性和方法,即JavaScript 中的函數也是對象
用function 創建類時,要求屬性和方法必須使用this 關鍵字來引用,表示當前類的實例。
示例:使用編寫函數的方式創建類
<script type="text/javascript">
// 創建Book 類型
function Book(name,author,price) {
this.name=name;
this.author=author;
this.price=price;
this.show = function() {
alert(" 書名:"+this.name+"\n 作者:"+this.author+"\n 價格:"+this.price);
};
}
var book=new Book("《鋼鐵是怎樣煉成的》","奧斯特洛夫斯基","26.00 元");
book.show();
</script>

對象常用語句
1、with 語句
在一段連續的程式程式碼中,在with 關鍵字後的小括弧中寫出這個對象的名稱,就可以在其後大括弧里的執行語句中直接引用該對象的屬性名或方法名,省略對象實例名和點(.)
with (對象名稱){
執行語句塊
}
<script type="text/javascript">
function showTime() {
var time = new Date();
with(time) {
var hh=getHours(); // 獲取小時
var mm=getMinutes(); // 獲取分鐘
var ss=getSeconds(); // 獲取秒
}
document.getElementById("time").innerHTML=hh+":"+mm+":"+ss;
}
window.setInterval("showTime()",500);
window.onload=showTime;
</script>
<span id="time"></span>

2、for…in 語句
對某個對象的所有屬性進行循環操作,它將某個對象的所有屬性名稱逐一賦值給一個變數,不需要事先知道對象屬性的個數
根據索引取出每個數組元素
for (變數 in 對象){
執行語句
}
使用for…in 語句遍歷對象屬性
<script type="text/javascript">
function Person() {
this.name=" 張三";
this.age="24";
this.gender=" 男";
}
var person = new Person();
var info="";
for(var prop in person) {
info +=prop+"<br/>";
}
document.write(info);
</script>

jQuery
為了解決開發過程中的兼容性問題,產生了許多JavaScript庫,目前被頻繁使用的JavaScript庫包括 jQuery、Prototype、Spry 和 Ext JS
其中使用最廣泛的JavaScrip庫是jQuery, 是於2006年創建的一個JavaScript庫
集 JavaScript、CSS、DOM 和 Ajax 於一體的強大框架體系
它的主旨是以更少的程式碼實現更多的功能(Write less,do more)
jQuery 基本功能
- 訪問和操作 DOM 元素
- 對頁面事件的處理
- 大量插件在頁面中的運用
- 與 Ajax 技術的完美結合
- 大幅提高開發效率
搭建 jQuery 開發環境
- 下載 jQuery 文件庫(//jquery.com)
- 引入 jQuery 文件庫
在頁面<head></head> 標籤對中加入如下程式碼:
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"> </script>
示例:單擊按鈕時,隱藏的
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
$("#info").show(2000);//show(2000) 表示用 2 秒顯示標籤
});
});
</script>
<input type="button" value=" 顯示 " id="btn"/>
<div id="info" style= "display:none">
<img src="../img/mobile.jpg" width="350"/>
</div>
- \(符號標誌:是JQuery對象的簡寫形式,\)()等效於jQuery(),是jQuery程式的標誌
- 隱式循環:當使用jQuery查找符合要求的元素後,無須一一遍歷每一個元素,直接通過jQuery命令操作符合要求的元素
- 鏈式書寫:可以將針對於同一個對象多個操作命令寫在一個語句中,還可以插入換行和空格
jQuery 基本選擇器
基本選擇器
基本選擇器是由標籤 id、class、標籤名和多個選擇符組成
| 選擇器 | 功能 | 返回值 |
|---|---|---|
| #id | 根據 id 屬性值選取元素 | 單個元素 |
| .class | 根據 class 屬性值選取元素 | 元素集合 |
| element | 根據給定的標籤名選取元素 | 元素集合 |
| * | 選取所有元素,包括 html 和 body | 元素集合 |
| selector1,selector2,…,selectorN | 將每一個選擇器匹配到的元素合併後一起返回 | 元素集合 |
示例:使用jQuery 顯示元素並設置其樣式
<script type="text/javascript">
$(function() {
// 選取 <div> 和 <span> 元素,合併選取
$("div,span").css("display","block");
// 根據 id 屬性值選取元素
$("#one").css("color","#f30");
// 根據給定的標籤名選取元素
$("span").css("font-size","20px");
// 根據 class 屬性值選取元素
$("div.two").css("background-color","#ccc");
$("#one,span").css("border-style","dashed");
});
</script>
<div id="one"> 設置了 div 的 id 屬性 </div>
<div class="two"> 設置了 div 的 class 屬性 </div>
<span> SPAN </span>

過濾選擇器
基本過濾選擇器
過濾選擇器附加在所有選擇器的後面,通過特定的過濾規則來篩選出一部分元素,書寫時以冒號(:)開頭
過濾選擇器可以分為
- 基本過濾選擇器
- 內容過濾選擇器
- 可見性過濾選擇器
- 屬性過濾選擇器
| 選擇器 | 功能 | 返回值 |
|---|---|---|
| first() 或 :first | 獲取第一個元素 | 單個元素 |
| last() 或 :last | 獲取最後一個元素 | 單個元素 |
| :not(selector) | 獲取除給定選擇器之外的所有元素 | 元 素 集 合, 如$("li:not(.title)") 獲 取class 不是 title 的 |
| :even | 獲取索引值為偶數的元素,索引號從 0 開始 | 元素集合 |
| :odd | 將每一個選擇器匹配到的元素合併後一起返回 | 元素集合 |
| :eq(index) | 獲取索引值等於 index 的元素,索引號從 0 開始 | 單個元素,如 $(「li:eq(1)」) 獲取索引等於 1 的 <li> 元素 |
| :gt(index) | 獲取索引值大於 index 的元素,索引號從 0 開始 | 元素集合,如 $("li:gt(1)") 獲取索引大於但不包括 1 的 <li> 元素 |
| :lt(index) | 獲取索引值小於 index 的元素,索引號從 0 開始 | 元素集合,如 $("li:lt(1)") 獲取索引小於但不包括 1 的 <li> 元素 |
| :header | 獲取所有標題元素,如 h1~h6 | 元素集合 |
| :animated | 獲取正在執行動畫效果的元素 | 元素集合 |
示例:使用基本過濾器定位 DOM 元素,改變元素樣式
<script type="text/javascript">
$(function() {
$("#btnTitle").click(function() {
// 單獨使用過濾選擇器,等同於附加在基本選擇器 * 的後面
$(":header").css("color","#f00");});
$("#btnEven").click(function() {
// 獲取索引值為偶數的 <li> 元素
$("li:even").css("color","#00f");});
$("#btnOdd").click(function() {
// 獲取索引值為奇數的 <li> 元素
$("li:odd").css("color","#f93");});
});
</script>

內容過濾選擇器
內容過濾選擇器根據元素中的文字內容或所包含的子元素特徵來獲取元素
| 選擇器 | 功能 | 返回值 |
|---|---|---|
| :contains(text) | 獲取含有文本內容為 text 的元素 | 元素集合 |
| :empty | 獲取不包含後代元素或者文本的空元素 | 元素集合 |
| :has(selector) | 獲取含有後代元素為 selector 的元素 | 元素集合 |
| :parent | 獲取含有後代元素或者文本的非空元素 | 元素集合 |
在 :contains(text) 內容過濾選擇器中,如果參數 text 內容出現在匹配元素的任何後代元素中,也認為該元素含有文本內容 text。如果參數 text 使用英文字母,則有大小寫的區別
<input>、<img>、<br> 和 <hr> 等標籤屬於不包含後代元素和文本的空元素
示例:使用內容過濾選擇器查找 DOM 元素,改變元素樣式
$(function() {
$("#btnContain").click(function() {
// 獲取含有文本內容為 A 的 div
$("div:contains('A')").css("background-color","#f00");
});
$("#btnEmpty").click(function() {
$("div:empty").css("background-color","#0f0"); //獲取不包含後代元素或文本的div
});
$("#btnHas").click(function() {
$("div:has(span)").css("background-color","#00f"); //獲取含有後代元素為span的元素
});
$("#btnParent").click(function() {
//獲取含有後代元素或者文本的div元素
$("div:parent").css("background-color","white"); }); });

可見性過濾選擇器
可見性過濾選擇器根據元素是否可見的特徵來獲取元素
| 選擇器 | 功能 | 返回值 |
|---|---|---|
| :hidden | 選取不可見元素 | 元素集合,如 $(":hidden") 選取所有隱藏的元素 |
| :visible | 選取可見元素 | 元素集合,如 $(":visible") 選取所有可見的元素 |
不可見元素包括:css 樣式中 display 屬性值為 none 的元素、type 屬性值為 hidden 的 元素及寬高設置為 0 的元素
示例:使用可見性過濾選擇器鎖定 DOM 元素,改變元素樣式
<script type="text/javascript">
$(function() {
$("#btnShow").click(function() {
$(".pic:hidden").show().addClass("current");
});
$("#btnHidden").click(function() {
$(".pic:visible").hide();
});
});
</script>
<img src="../img/mobile.jpg" class="pic"/>
<p><input type="button" value=" 顯示 " id="btnShow"/>
<input type="button" value=" 隱藏 " id="btnHidden"/></p>

屬性過濾選擇器
屬性過濾選擇器根據元素的某個屬性獲取元素,以「[」號開始、以「]」號結束
| 選擇器 | 說明 | 返回值 |
|---|---|---|
| [attribute] | 獲取擁有該屬性的所有元素,如 $('li[title]') 表示獲取所有包含title 屬性的 <li> 元素 |
元素集合 |
| [attribute=value] | 獲取某屬性值為 value 的所有元素,如 $('li[title=test2]') 表示獲取所有包含 title 屬性且屬性值等於 test2 的<li>元素 |
元素集合 |
| [attribute!=value] | 獲取某屬性值不等於 value 的所有元素,如 $('li[title!=test2]') 表示獲取所有包含 title 屬性且屬性值不等於 test2 的<li>元素 |
元素集合 |
| [attribute^=value] | 選取屬性值以 value 開頭的所有元素,如 $('a[href^="mailto:"]') 表示獲取所有包含 href 屬性,且屬性值以 mailto: 開頭的 <a> 元素 |
元素集合 |
| [attribute\(=value] | 選取屬性值以 value 結束的所有元素,如 `\)('a[href$=".zip"]')` 表示獲取所有包含 href 屬性,且屬性值以 .zip 結尾的` ` 元素 | 元素集合 | |
| [attribute*=value] | 選 取 屬 性 值 中 包 含 value 的 所 有 元 素, 如 $('a[href*="jquery.com"]') 表示獲取所有包含 href 屬性且屬性值中包含 jquery.com的 <a> 元素 |
元素集合 |
[selector1][selector2]…[selectorN] |
合併多個選擇器,滿足多個條件,每選擇一次將縮小一次範圍,如 $('li[id][title^=test]') 選取所有擁有屬性 id 且屬性 title 以 test開頭的 <li> 元素 |
元素集合 |
使用屬性過濾選擇器鎖定 DOM 元素,全選篩選框
<script type="text/javascript">
$(function() {// 頁面載入事件
$("input[type='button']").click(function() {
$("input[name='songs']").attr("checked","checked");
});
});
</script>
<p>
請選擇喜歡的歌曲:<br/>
<input type="checkbox" name="songs"/> 小幸運
<input type="checkbox" name="songs"/> 非酋
<input type="checkbox" name="songs"/> 佛系少女
<input type="checkbox" name="songs"/> 醉赤壁
</p>
<input type="button" value=" 全選 "/>

層次選擇器
層次選擇器通過 DOM 元素之間的層次關係獲取元素,其主要的層次關係包括後代、父子、相鄰和兄弟關係。層次選擇器由兩個選擇器組合而成
| 名稱 | 語法 | 功能 | 返回值 |
|---|---|---|---|
| 後代選擇器 | selector1 selector2 | 從 selector1 的後代元素里選取 selector2 | 元素集合,如 $(「#nav span」) 表示選取 #nav下所有的<span>元素 |
| 子選擇器 | selector1>selector2 | 從 selector1 的子元素里選取 selector2 | 元素集合,如("#nav>span")表示選取 #nav 的子元素<span> |
| 相鄰元素選擇器 | selector1+selector2 | 從 selector1 後面的第一個兄弟元素里選取 selector2 | 元素集合,如 $("h2+dl") 表示選取緊鄰<h2>元素之後的同輩元素 <dl> |
| 同輩元素選擇器 | selector1~selector2 | 從 selector1 後面的所有兄弟元素里選取 selector2 | 元 素 集 合, 如 $("h2~dl") 表 示 選 取<h2> 元素之後所有的同輩元素<dl> |
selector1 selector2 與 selector1>selector2 所選擇的元素集合是不同的,前者的層次關係是祖先與後代,而後者是父子關係
selector1+selector2 可以使用 jQuery 對象的 next() 方法代替
selector1~selector2 從 selector1 後面的所有兄弟元素里選取 selector2,不能獲取前面部分,可以使用nextAll() 方法代替。而 siblings() 方法獲取全部的相鄰元素,不分前後
selector1 selector2 與 selector1:has(selector2) 雖然這兩個選擇器都要求 selector2 是 selector1 的後代元素,但是前者最終選取的是後代元素,後者最終選取的是擁有這些後代元素的元素
使用層次選擇器鎖定 DOM 元素
<script type="text/javascript">
$(function() {// 頁面載入完畢事件
// 設置標題的顏色
$(":header").css("color","red");
// 設置第一層無序列表的字體顏色
$(":header+ul>li").css("color","green");
// 設置第二層無序列表的字體顏色
$(":header+ul>li>ul>li").css("color","blue");
});
</script>
html程式碼略

表單選擇器
| 選擇器 | 功能 | 返回值 |
|---|---|---|
| :input | 獲取 <input><textarea><select><button> 元素 |
元素集合 |
| :text | 獲取符合 [type=text] 的<input> 元素 |
元素集合 |
| :password | 獲取符合 [type=password] 的 <input> 元素 |
元素集合 |
| :radio | 獲取符合 [type=radio] 的 <input> 元素 |
元素集合 |
| :checkbox | 獲取符合 [type=checkbox] 的 <input> 元素 |
元素集合 |
| :image | 獲取符合 [type=image] 的 <input> 元素 |
元素集合 |
| :file | 獲取符合 [type=file] 的 <input> 元素 |
元素集合 |
| :hidden | 參考「可見性過濾選擇器」 | 元素集合 |
| :button | 獲取 <button> 元素和符合 [type=button] 的 <input> 元素 |
元素集合 |
| :submit | 獲取符合 [type=submit] 的 <input> 元素 |
元素集合 |
| :reset | 獲取符合 [type=reset] 的 <input> 元素 |
元素集合 |
表單對象屬性過濾選擇器
表單對象屬性過濾選擇器也是專門針對錶單元素的選擇器,它屬於過濾選擇器的範疇,可以附加在其他選擇器的後面,主要功能是對所選擇的表單元素進行過濾
| 選擇器 | 功能 |
|---|---|
| :enabled | 選取可用的表單元素 |
| :disabled | 選取不可用的表單元素 |
| :checked | 選取被選中的 <input>元素 |
| :selected | 選取被選中的 <option> 元素 |
示例:使用表單選擇器和表單對象屬性過濾選擇器鎖定 DOM 元素
$(function() {// 頁面載入完畢事件
$("#pa :button").click(function() {
// 選擇器 #pa 後的空格表示獲取後代元素
$("#pa :text:enabled").css("border","1px solid red");
});
$("#pb :button").click(function() {
$("#pb :radio:checked").parent().css("background-color","#63c");
});
$("#pc :button").click(function() {
$("#pc :checkbox:checked").parent().css("background-color","#63c");
});
$("#pd :button").click(function() {
var info = " 你最喜歡的球星是:"
info += $("#pd :input option:selected").val();
alert(info);
});
});

DOM 對象
通過傳統的 JavaScript 方法訪問 DOM 中的元素,可生成 DOM 對象。如:
var obj=document.getElementById("content")
使用JavaScript中的getElementById ()方法,在文檔中選擇id="content"的匹配元素,最後將生成的DOM對象儲存在obj變數中
jQuery 對象
使用 jQuery 選擇器選擇頁面中的元素,是為了生成 jQuery 對象,jQuery 對象具有特有的方法和屬性,完全能夠實現傳統 DOM 對象的所有功能
使用jQuery操作元素
- 使用選擇器獲取某個元素
- 使用jQuery對象的方法操作元素
jQuery 對象和 DOM 對象的相互轉換
jQuery 對象轉換成 DOM 對象
- 使用 jQuery 中的 get() 方法,其語法結構為:get([index])
- 如果get()方法不帶參數,get()方法會返回所有匹配元素的DOM對象,並將它們包含在一個數組中
DOM 對象轉換成 jQuery 對象
- 對於一個 DOM 對象,只需要用 \(() 將它包裝起來就可以獲得對應的 jQuery 對象,其語法結構為:\)(DOM 對象 )
- 示例:使用 DOM 對象更改頁面中文本字體的顏色
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("h3").click(function() {
this.style.color="red";//DOM 對象
});
});
</script>
<body>
<h3> 全部商品分類 </h3>
</body>

jQuery 中使用 DOM 操作元素
元素樣式的操作
1、直接設置元素樣式值:在 jQuery 中,可以通過 css() 方法為某個指定的元素設置樣式值
設置單個屬性:
jQuery 對象.css(name,value); //其中name為樣式名稱,value為樣式的值
同時設置多個屬性:
jQuery 對象.css({name:value,name:value,name:value…});
示例:在 jQuery 中使用 DOM 設置元素的樣式值
<script type="text/javascript">
$(function() {
$("#content").click(function() {
$(this).css("font-weight","bold");
$(this).css("font-style","italic");
$(this).css("background-color","#eee");
});
});
</script>
<body>
<p id="content">Write Less, Do More.</p>
</body>


2、增加類:通過 jQuery 對象的 addClass() 方法增加元素類
增加單個類:
jQuery 對象.addClass(class);
同時增加多個類,以空格隔開類名:
jQuery 對象.addClass(class0 class1…);
示例:在 jQuery 中使用 addClass(class) 方法,給
標籤動態添加樣式
<style type="text/css">
.cls1{
font-weight:bold;
font-style:italic;
background-color:#eee;
}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#content").click(function() {
$(this).addClass("cls1");
});
});
</script>
<p id="content">Write Less, Do More.</p>
3、刪除類:與增加 css 類的 addClass() 方法相反,removeClass() 方法則用於刪除類
jQuery 對象.removeClass([class]);
示例:點擊按鈕後,刪除添加的 <p> 標籤樣式類
<style type="text/css">
.cls1{
font-weight:bold;
font-style:italic;
background-color:#eee;
}
</style>


4、 類切換 toggleClass() 模擬了 addClass() 與 removeClass() 實現樣式切換的過程 通過 toggleClass() 方法可以為元素切換不同的類
jQuery 對象.toggleClass(class);
示例:使用toggleClass(class) 方法,實現增加類樣式和刪除類樣式的切換
<style type="text/css">
.cls1{
font-weight:bold;
font-style:italic;
background-color:#eee;
}
</style>
<script type="text/javascript">
$(function() {
添加類樣式的程式碼略
$("#content").click(function() {
$(this).toggleClass("cls1");
});
});
</script>
<p id="content">Write Less, Do More.</p>
元素內容和值的操作
操作元素內容的方法包括 html() 和 text()
| 語法格式 | 參數說明 | 功能描述 |
|---|---|---|
| html() | 無參數 | 用於獲取第一個匹配元素的 HTML 內容或文本內容 |
| html(content) | content 參數為元素的HTML內容 | 用於設置所有匹配元素的 HTML 內容或文本內容 |
| text() | 無參數 | 用於獲取所有匹配元素的文本內容 |
| text(content) | content 參數為元素的文本內容 | 用於設置所有匹配元素的文本內容 |
示例:在頁面中點擊「增加影像」按鈕後,在
標籤中增加一幅影像
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("input[type='button']").click(function() {
// 設置頁面中所有 <p> 元素內部的 HTML 程式碼
$("p").html("<img src='../img/frozen.jpg'/>");
});
});
</script>
<body>
<p></p>
<input type="button" value=" 增加影像 "/>
</body>

獲取或設置元素值:要獲取元素的值,可以通過 val() 方法來實現
jQuery 對象.val([val]);
如果 val() 方法不帶參數,表示獲取某元素的值
如果 val() 方法帶有參數,則表示將參數賦給指定的元素,即設置元素的值
示例:製作頁面登錄框水印特效
<script type="text/javascript">
$(function() {
$("#userEmail").focus(function(){ // 郵箱輸入框獲得焦點
var text_value = $(this).val(); // 獲取當前文本框的值 if(text_value == "[email protected]") {
$(this).val(""); // 如果符合條件,則清空文本框內容
}
});
$("#userEmail").blur(function() { // 郵箱輸入框失去焦點
var text_value = $(this).val(); // 獲取當前文本框的值
if(text_value=="") {
$(this).val("[email protected]"); } // 如果符合條件,則設置內容
});
});
</script>

元素屬性的操作
1、獲取或設置元素的屬性值:通過 attr() 方法可以獲取或設置元素的屬性值
//獲取屬性值,參數name表示屬性的名稱
jQuery 對象.attr(name);
//設置屬性值,參數value表示屬性的值
jQuery 對象.attr(name,value);
//同時設置多個屬性
jQuery 對象.attr({name0:value0,name1:value1…});
//綁定函數,將函數返回值作為元素的屬性值
jQuery 對象.attr(name,function(index){});
示例:在頁面中創建一個 <img> 標籤,當頁面載入完畢後,隨機展示圖片
<script type="text/javascript">
$(function() {
var imgs = new Array();
imgs[0]="../img/img_1.jpg";
imgs[1]="../img/img_2.jpg";
imgs[2]="../img/img_3.jpg";
imgs[3]="../img/img_4.jpg";
$("img").attr("src",function(){
// 隨機產生 0 到 3 之間的數,即隨機產生數組的下標
var i = Math.ceil(Math.random()*3);
// 函數的返回值作為 src 的屬性值
return imgs[i];});});
</script>
<body><img/></body>

2、刪除元素的屬性 可使用 removeAttr() 方法將元素的屬性刪除
jQuery 對象.removeAttr(name);
jQuery 中使用 DOM 操作節點
創建節點元素
通過函數 $(html) 完成元素的創建
調用新元素的上級或者同輩的相關方法,把新元素添加到 DOM 樹中
$(html);
插入節點
動態創建新元素後,需要執行插入或追加操作
按照元素的層次關係來分,可以分為內部和外部兩種方法
1、元素內部插入子節點
| 語法格式 | 功能描述 |
|---|---|
| append(content) | $(A).append(B) 表示將 B 追加到 A 中,如 \(("ul").append(\)li); |
| appendTo(content) | $(A).appendTo(B) 表示把 A 追加到 B 中,如 $li.appendTo("ul") |
| prepend(content) | $(A).prepend(B) 表示將 B 前置插入到 A 中,如 \(("ul").prepend(\)li) |
| prependTo(content) | $(A).prependTo(B) 表示將 A 前置插入到 B 中,如 $li.prependTo("ul") |
示例:在頁面的文本框中輸入流行的歌曲名和歌手後,將其添加到列表的最前面
<script type="text/javascript">
$(function() {
$("#song").blur(function() {
// 輸入框中的內容不為空
if($(this).val()!="") {
// 創建 li 節點,節點的文本內容是在文本框中輸入的
var $li=$("<li>"+$(this).val()+"</li>");
// 將 $li 對象前置插入到 <ul> 元素中
$li.prependTo($("ul"));
// 清空輸入框中的內容
$(this).val("");
}
});
});
</script>

2、元素外部插入同輩節點
| 語法格式 | 功能描述 |
|---|---|
| after(content) | $(A).after(B) 表示將 B 插入到 A 之後,如 \(("ul").after(\)div); |
| insertAfter(content) | $(A).insertAfter(B) 表示將 A 插入到 B 之後,如 $div.insertAfter("ul") |
| before(content) | $(A).before(B) 表示將 B 插入至 A 之前,如 \(("ul").before(\)div) |
| insertBefore(content) | $(A).insertBefore(B) 表示將 A 插入到 B 之前,如 $div.insertBefore("ul") |
示例:在頁面中點擊「流行歌曲」標題,自動添加歌曲列表項
<script type="text/javascript">
$(function() {
$("h3").click(function() {
var $ul=$("<ul></ul>");
var $li1=$("<li> 想起————韓雪 </li>");
var $li2=$("<li> 沒那麼簡單————黃小琥 </li>");
var $li3=$("<li> 指望————郁可唯 </li>");
// 將創建的 <ul> 元素作為 <h3> 元素的同輩元素,插入到 <h3> 元素之後
$(this).after($ul);
$ul.append($li1); // 追加 $ul 對象的子節點
$ul.append($li2);
$ul.append($li3); });});
</script>
<body> <h3> 流行歌曲 </h3> </body>

替換節點
在 jQuery 中,如果要替換元素中的節點,可以使用 replaceWith() 和 replaceAll() 這兩種方法
jQuery 對象.replaceWith(content);
jQuery 對象.replaceAll(selector);
replaceWith() 方法的功能是將所有選擇的元素替換成指定的 HTML 頁面元素
replaceAll() 方法的功能是用所選擇的元素替換指定的
示例:在頁面中點擊「替換」按鈕,將歌曲列表中的最後一首歌曲替換成其他歌曲
<script type="text/javascript">
$(function() {
$("input[type='button']").click(function() {
var $li = $("<li> 也許明天————姚貝娜 </li>");
$("ul li:last").replaceWith($li);
});
});
</script>
<body> <h3> 流行歌曲 </h3>
<ul>
<li> 想起————韓雪 </li>
<li> 沒那麼簡單————黃小琥 </li>
<li> 指望————郁可唯 </li>
</ul>
<input type="button" value=" 替換 "/>
</body>

複製節點
在頁面中,有時候需要複製某個元素節點。可以通過 clone() 方法實現功能
jQuery 對象.clone();
該方法只是複製元素本身,被複制後的新元素不具有任何元素行為。如果需要將該元素的全部行為也進行複製,那麼可以通過 clone(true) 實現
示例:在頁面中插入一幅圖片,當點擊此圖片時,將其複製並粘貼在右側
<script type="text/javascript">
$(function() {
$("img").click(function() {
$(this).clone(true).appendTo($("#p1"));
});
});
</script>
<body>
<p id="p1">
<img src="../img/img_2.jpg"/>
</p>
</body>

刪除節點
在操作頁面時,刪除多餘的或指定的頁面元素是非常必要的。jQuery 中提供了 remove() 方法來刪除元素
jQuery 對象.remove([expr]);
其中參數 expr 為可選項,該參數為篩選元素的 jQuery 表達式,通過該表達式將獲取指定的元素,並進行刪除
示例:在頁面中插入無序列表和按鈕,點擊按鈕時,將無序列表最後一項刪除
<script type="text/javascript">
$(function() {
$("input[type='button']").click(function() {
//$("ul li").remove(); // 刪除所有的列表項
$("ul li").remove("ul li:last"); // 刪除最後一項
});
});
</script>
<body<h3> 流行歌曲:</h3>
<ul>
<li> 一個像夏天一個像秋天————范瑋琪 </li>
<li> 想起————韓雪 </li>
<li> 沒那麼簡單————黃小琥 </li>
<li> 指望———郁可唯 </li>
</ul>
<input type="button" value=" 刪除 "/></body>


遍曆元素
jQuery 中元素的遍歷
在 jQuery 中,可以直接使用 each() 方法實現元素的遍歷
jQuery 對象.each(callback);
參數 callback 是一個function函數,可以給該函數傳遞一個index參數,此形參是遍曆元素的序號。如果需要在函數體中訪問當前遍歷到的元素,可以使用 this 關鍵字
示例:點擊「添加邊框」按鈕後,給頁面圖片添加邊框並設置其 title 屬性
<script type="text/javascript">
$(function() {// 頁面載入完畢事件
$("input[type='button']").click(function() {
$("img").each(function(index, element) {
//jQuery 對象
//$(this).css("border","2px solid red");
//$(this).attr("title"," 第 "+(index+1)+" 幅風景畫 ");
//DOM 對象
this.style.border="2px solid red";
this.title=" 第 "+(index+1)+" 幅風景畫 ";});});});
</script>

jQuery動畫與特效
顯示隱藏動畫效果
show() 法能動態地改變當前元素的高度、寬度和不透明度,最終顯示當前元素
hide() 方法會動態地改變當前元素的高度、寬度和不透明度,最終隱藏當前元素
jQuery 對象.show(duration,[fn]);
jQuery 對象.hide(duration,[fn]);
參數duration 表示動畫效果運行的時間,可以使用關鍵字slow、normal 和fast,分別對應時間長度0.6 秒、0.4秒和0.2 秒。當不設置值時,表示立即顯示/隱藏元素
可選參數fn 為在動畫完成時執行的函數
示例:使用 show() 方法與hide() 方法以動畫的方式顯示和隱藏圖片
<script type="text/javascript">
$(function(){
$("#btn").click(function() {
if($(this).val()==" 顯示") {
$("#pic").show("slow",function() {
$(this).css({"border":"1px solid red","padding":"5px"});
});
$(this).val("隱藏");
} else {
$("#pic").hide("slow");
$(this).val("顯示"); }});});
</script>

toggle()方法
toggle() 方法會動態地改變當前元素的高度、寬度和不透明度,最終切換當前元素的可見狀態
如果元素是可見的,則切換為隱藏狀態;如果元素是隱藏的,則切換為可見狀態
jQuery 對象.toggle(duration,[fn]);
示例:製作可伸縮的垂直菜單的操作
<style>
//其他樣式程式碼略
ul li.down{
background-image:url(../img/down.jpg);
}
</style>


淡入淡齣動畫效果
fadeIn() 方法可以動態地改變當前元素的透明度(其他不變),實現淡入的動畫效果,最終顯示當前元素
fadeOut() 方法可以動態地改變當前元素的透明度(其他不變),實現淡出的動畫效果,最終隱藏當前元素
jQuery 對象.fadeIn(duration,[fn]);
jQuery 對象.fadeOut(duration,[fn]);
示例:使用 fadeIn() 方法與fadeOut() 方法以淡入淡出的方式顯示和隱藏圖片
<script type="text/javascript">
$(function(){
$("#btn").click(function() {
if($(this).val()==「淡入") {
$("#pic").fadeIn("slow",function() {
$(this).css({"border":"1px solid red","padding":"5px"});
});
$(this).val(「淡入");
} else {
$("#pic").fadeOut("slow");
$(this).val(「淡出");
}
});
});
</script>

fadeToggle()方法
fadeToggle() 方法會動態地改變當前元素的透明度,最終切換當前元素的可見狀態
如果元素是可見的,則通過淡出效果切換為隱藏狀態;如果元素是隱藏的,則通過淡入效果切換為可見狀態
jQuery 對象.fadeToggle(duration,[fn]);
示例:使用fadeToggle()方法實現後三項商品類型的動畫效果在淡出和淡入之間切換
<style>
//其他樣式程式碼略
ul li.down{
background-image:url(../img/down.jpg);
}
</style>
<script type="text/javascript">
$(function(){
$("#menu li.lastItem").click(function() {
// 切換菜單
$("#menu li:gt(5):not(:last)").fadeToggle();
// 更換底部箭頭方向
$(this).toggleClass("down");
});
});
</script>
fadeTo() 方法
fadeTo() 方法可以改變元素的透明度到指定某一個值
fadeTo() 方法可以改變元素的透明度到指定某一個值
參數duration 為動畫效果的速度,使用方式與hide()、show() 等方法一致
參數opacity 用於指定不透明值,取值範圍是0 ~ 1(0 代表完全透明,1 代表完全不透明)
示例:使用fadeTo ()方法改變圖片的透明度
<script type="text/javascript">
$(function(){
$("#sel").change(function() {
var opacity = $(this).val();
$("img").fadeTo(3000,opacity);
});
});
</script>

滑入滑齣動畫效果
slideDown() 方法會動態地改變當前元素的高度(其他不變),由上到下滑入,即高度向下增大,使其呈現出一種「滑動」的效果,直至最終顯示當前元素
slideUp() 方法會動態地改變當前元素的高度(其他不變),由下到上滑出,即高度向上減小,直至最終隱藏當前元素
jQuery 對象.slideDown(duration,[fn]);
jQuery 對象.slideUp(duration,[fn]);
示例:製作圖書銷售網站中「我的書庫」菜單的二級菜單滑入滑出的動畫效果
<script type="text/javascript">
$(function(){
$(".secondLi").hover(function() {
$(".secondLi ul").slideDown(2000);
},function(){
$(".secondLi ul").slideUp(2000);
});
});
</script>
html和css程式碼略


slideToggle()方法
slideToggle() 方法會動態地改變當前元素的高度(其他不變),最終切換當前元素的可見狀態
如果元素是可見的,則通過滑出效果切換為隱藏狀態;如果元素是隱藏的,則通過滑入效果切換為可見狀態
jQuery 對象.slideToggle(duration,[fn]);
示例:使用slideToggle()方法實現二級菜單滑入滑出的動畫效果
<script type="text/javascript">
$(function(){
$(".secondLi").click(function() {
$(".secondLi ul").slideToggle(2000);
});
});
</script>
html和css程式碼略
自定義動畫
簡單的動畫
animate() 方法可以動態地改變當前元素的各種 CSS 屬性
jQuery 對象.animate(properties,[duration],[fn]);
參數 properties 使用一個「名:值」形式的對象來設置需要改變的 CSS 屬性。
animate() 方法只能改變可以取數字值的 CSS 屬性,如寬高,邊框粗細,內外邊距,元素位置,字體大小,字體間距,背景定位和透明度。
示例:animate() 方法實現圖片的放大顯示
<script type="text/javascript">
$(function() {
$("img").click(function() {
$(this).animate({width:"180px",height:"180px"},"slow");
});
});
</script>
<body>
<img src="../img/tmac.jpg"/>
</body>


移動位置的動畫
通過 animate() 方法,不僅可以利用動畫效果增加元素的長度和寬度,還能夠利用動畫效果改變元素在頁面中的位置
示例:使用 animate() 方法改變頁面元素的位置
<script type="text/javascript">
$(function() {
$("img").click(function() {
//屬性值前可以加上 "+=" 或 "-=" 運算符號,表示在原先屬性值上累加或累減
$(this).animate({left:"+=100px",top:"+=100px",opacity:0.5},3000);
});
});
</script>
<body>
<img src="../img/tmac.jpg"/>
</body>

隊列中的動畫
所謂「隊列」動畫,是指在元素中執行一個以上的多個動畫效果,即有多個 animate() 方法在元素中執行
根據這些 animate() 方法執行的先後順序,形成了動畫「隊列」,產生「隊列」後,動畫的效果便按「隊列」的順序進行展示
示例:演示隊列中動畫的使用
<script type="text/javascript">
$(function() {
//<div> 元素點擊事件
$("div").click(function() {
$(this).animate({height:100},"slow"); // 第 1 列
$(this).animate({width:100},"slow"); // 第 2 列
$(this).animate({height:50},"slow"); // 第 3 列
$(this).animate({width:50},"slow"); // 第 4 列
});
</script>
<body>
<div> 隊列中的動畫 </div>
</body>

動畫停止
stop() 方法能夠結束當前的動畫,並立即進入到下一個動畫
jQuery 對象.stop([clearQueue],[gotoEnd]);
不帶任何參數的 stop() 方法,則會立即停止當前正在執行的動畫,如果後面還有動畫要繼續,則以當前狀態開始接下來的動畫
learQueue 參數表示是否清空未執行完的動畫隊列,gotoEnd 參數表示是否立即完成正在執行的動畫
示例:避免當用戶游標進入或移出的速度太快,導致移入移出與對應的動畫不一致
<script type="text/javascript">
$(function(){
$(".secondLi").hover(function() {
$(".secondLi ul").stop().slideDown(2000);
},function(){
$(".secondLi ul").stop().slideUp(2000);
});
});
</script>
html和css程式碼略
Vue.js
創建一個vue項目
<!DOCTYPE html>
<html>
<head>
<!-- 引入vue -->
<script src="//cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- 定義一個vive -->
<div id="app">
{{ message }}
</div>
</body>
<script type="text/javascript">
// 定義moldel
var exmpleData = {
message: "hello word"
}
// 創建一個Vue實例或ViewModel,它連接View與 Model
var vm = new Vue({
el: '#app',
data: exmpleData
})
</script>
</html>
常用參數

