APP
HTML, CSS, JavaScript
一、HTML
1. HTML4常用標(biāo)簽
1.1 文件標(biāo)簽
-
<html>標(biāo)簽：代表當(dāng)前書寫的是一個HTML文檔 -
<head>標(biāo)簽：存儲的本頁面的一些重要的信息，它不會顯示該標(biāo)簽下有一個子標(biāo)簽
<title>用于定義頁面的標(biāo)題欄的名稱 -
<body>標(biāo)簽：該標(biāo)簽中的書寫的內(nèi)容會顯示出來該標(biāo)簽下的屬性：
HTML中標(biāo)簽的屬性值可以用
' '或" "包圍-
text用于設(shè)置文字的顏色 -
bgcolor用于設(shè)置頁面的背景色 -
background用于設(shè)置頁面的背景圖片需要在當(dāng)前項(xiàng)目下創(chuàng)建文件夾存放HTML中調(diào)用的圖片文件，圖片的路徑不能以
/開始，必須是以這個文件夾開始
-
-
示例Code
<html> <head> <title> this is title </title> </head> <body text="red" bgcolor="pink" background="image/test.JPG"> </body> </html>
1.2 排版標(biāo)簽
-
HTML注釋
<!-- 注釋內(nèi)容 -->VSCode中注釋的快捷鍵
ctrl+/ -
換行標(biāo)簽
<br/>標(biāo)簽就是一個換行（回車）功能標(biāo)簽，標(biāo)簽中的/可有可無的。有/是HTML語言的標(biāo)準(zhǔn)化，但是HTML語言是一門不那么嚴(yán)謹(jǐn)?shù)恼Z言 -
段落標(biāo)簽
在
<p>標(biāo)簽中的內(nèi)容,會在開始與結(jié)束之間產(chǎn)生一個空白行，并且它會自動換行.常用屬性
align它的作用是設(shè)置段落中的內(nèi)容對齊方式 可取值有left（默認(rèn)值是left）、right、center<html> <head> <title> this is title </title> </head> <body text="red" bgcolor="pink" background="image/test.JPG"> hello <br/> hello hello <p align="center">hello</p> <p align="left">hello</p> <p align="right">hello</p> <p align>hello</p> </body> </html> -
水平線標(biāo)簽
<hr>標(biāo)簽會在頁面上產(chǎn)生一個水平線對于hr標(biāo)簽常用屬性:
align：取值有left，right，center代表水平線的位置size：代表水平線厚度（粗細(xì)）width：代表水平線寬度color：水平線的顏色
單位：size="5"，單位為"像素"/"像素點(diǎn)"，像素就是構(gòu)成計(jì)算機(jī)圖片的最小單位，單位也可以使用百分比，如：size="50%"
-
分區(qū)標(biāo)簽
<div>是一個塊標(biāo)簽，用來進(jìn)行布局的，不加屬性值的<div>并沒有什么效果，肉眼也看不見，但<div>與CSS結(jié)合，就會更好對頁面進(jìn)行排版<div>與<span>都是“容器”的作用，區(qū)別：-
<div>標(biāo)簽會自動換行，是塊級元素，<span>標(biāo)簽不會自動換行，是行內(nèi)元素div中的屬性：
- width：設(shè)置div寬
- height：設(shè)置div高
- background或background-color：設(shè)置div背景顏色
- margin：用于設(shè)置本div與其他元素或頁面四周邊框之間的邊距
- padding: div中元素與本div四周邊框之間的距離
VSCode快捷鍵：
div*n快速創(chuàng)建n行div -
<div>：整體劃分區(qū)塊，<span>：局部劃分
-
1.3 字體標(biāo)簽
-
字體標(biāo)簽
<font>標(biāo)簽可以設(shè)置字體，字體的大小和顏色，使用該標(biāo)簽包圍要設(shè)置的內(nèi)容即可常用屬性：
-
face：設(shè)置字體 -
size：設(shè)置字體的大小 -
color：設(shè)置字體的顏色表示字體顏色屬性值的3種方法：
-
使用十六進(jìn)制方式，取值范圍 #000000 ~ #FFFFFF （黑色到白色）
當(dāng)顏色值為#cc3300 時，可簡化成 #c30 這種方式
-
RGB顏色表示法：RGB（x,y,z）其中x、y、z是0 ～ 255之間的整數(shù)
rgb字母大小寫無所謂
- 直接使用給定的值：red、blue
可以使用color屬性的標(biāo)簽：
<font>、<body>等 -
-
-
標(biāo)題標(biāo)記
作用：
<h數(shù)字>標(biāo)簽可以給一段文字起一個標(biāo)題使用方法：在
<h1>到<h6>中標(biāo)題尺寸遞減與普通文本的區(qū)別：自動換行，字體加粗，標(biāo)題與標(biāo)題之間產(chǎn)生一定的距離
-
格式化標(biāo)簽
<b>：使文本內(nèi)容字體加粗<i>：使文本內(nèi)容字體傾斜<del>：為文本內(nèi)容添加刪除線<u>：為文本內(nèi)容添加下劃線
在HTML中允許標(biāo)簽進(jìn)行嵌套的，但是一般都包裹嵌套，而不可以進(jìn)行交叉嵌套
<b> hi how are you doing </b> <br/> <i><b> hi how are you doing </b></i> <br/> <del><b> hi how are you doing </b></del> <br/> <u><del><b> hi how are you doing </b></del></u> <br/>
1.4 列表標(biāo)簽
-
列表標(biāo)記中先設(shè)置列表的類型標(biāo)簽，再用多個子標(biāo)簽
<li>表示列表一行的信息 -
有序列表
<ol>標(biāo)簽中的屬性：-
type：設(shè)置標(biāo)簽顯示的順序的方式常用的屬性值：
- 默認(rèn)值是數(shù)字
- 以英文字母順序：
A - 以羅馬字符順序：
I
-
start：給定義一個數(shù)字，設(shè)置序列從這個數(shù)字開始
-
-
無序列表
<ul>標(biāo)簽中的屬性：-
type：設(shè)置無序列表中的符號形狀常用的屬性值：
- 實(shí)心圓（默認(rèn)值）：
disc - 方塊：
square - 空心圓：
circle
- 實(shí)心圓（默認(rèn)值）：
-
-
示例Code
<ol type="I"> <li>this is the first line</li> <li>this is the second line</li> <li>this is the third line</li> <li>this is the fourth line</li> </ol> <ul type="circle"> <li><b>this is the first line</b></li> <li>this is the second line</li> <li>this is the third line</li> <li>this is the fourth line</li> </ul>
1.5 圖像標(biāo)簽
-
作用：
<img>：圖像標(biāo)簽可以在頁面中引入圖片 -
圖像標(biāo)簽中的屬性：
-
src：用于設(shè)置圖片的路徑 -
width：用于設(shè)置圖片的寬度 -
height：用于設(shè)置圖片的高度 -
border：用于設(shè)置圖片的邊框 -
alt：如果圖片不可以顯示時，默認(rèn)顯示的文本信息 -
title：鼠標(biāo)懸停圖片上，默認(rèn)顯示的文本信息 -
align：圖片附件文字的對齊方式，可取值有常用的屬性值：
left、right、middle、top、bottom
-
1.6 超鏈接標(biāo)簽
-
<a>標(biāo)簽可以實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊這段內(nèi)容后進(jìn)行跳轉(zhuǎn)到其它頁面的操作超鏈接內(nèi)容不僅可以是文本，也可以是圖片等信息
超鏈接標(biāo)簽的常用屬性：
-
href：代表要跳轉(zhuǎn)的路徑屬性值若是網(wǎng)站的地址，則需要加
http:// -
target：性規(guī)定在何處打開這個鏈接文檔常用的屬性值：
_blank：在新窗口中打開頁面_self：在本窗口打開頁面
-
1.7 表格標(biāo)簽
-
定義一個表格先定義
<table>，再定義多個<tr>表示多行，在每個<tr>中定義多個<td>表示每行中的每列下的數(shù)據(jù)單元<table border="1" width="250px" align="center" cellspacing="0 "> <tr align="center"> <td align="right">1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table>
-
<table>標(biāo)簽用于定義整個表格常用的屬性：
-
border：邊框，取值是像素為單位 -
width：代表表格的寬度，取值是像素為單位 -
align：代表該表格在整個頁面中的對其方式常用的屬性值：
left：左對齊right：右對齊center：居中對齊
-
cellspacing：每個單元格之間的間距（通常設(shè)置0表示單線表格）
-
-
<tr>表示表格中的行 (Table Row)常用的屬性：
-
align：統(tǒng)一設(shè)置表格中行的所有數(shù)據(jù)單元內(nèi)容的對齊方式常見的屬性值同
<table>中的<align>
-
-
<td>表示表格中的數(shù)據(jù)單元 (Table DataCell)常用的屬性：
-
colspan：列的合并屬性值為從當(dāng)前列起向右一共要合并的列數(shù)
-
rowspan：行的合并屬性值為從當(dāng)前行起向下一共要合并的行數(shù)
-
align：設(shè)置合并后的數(shù)據(jù)單元內(nèi)容在表格中的對齊方式，或者用于單獨(dú)設(shè)置表格中數(shù)據(jù)單元內(nèi)容的對齊方式常見的屬性值同
<table>中的<align><table border="1" width="250px" align="center" cellspacing="0 "> <tr align="center"> <td colspan="2" align="center">row</td> <td>3</td> </tr> <tr> <td>4</td> <td rowspan="2" align="center">col</td> <td>6</td> </tr> <tr> <td>7</td> <td>9</td> </tr> </table>
-
1.8 表單標(biāo)簽
-
表單概念
通過錄入的信息將要提交的信息，即所有的數(shù)據(jù)形成一個整體，一起提交給服務(wù)器，提交到指定的位置
常見的 登錄頁面、注冊頁面 都離不開表單的應(yīng)用
-
表單標(biāo)簽
<form><form>中的屬性：-
action：將整個表單提交到目的地 -
method：表單提交的方式屬性值：
get：提交時，傳輸數(shù)據(jù)量少，明文提交post：提交時，傳輸數(shù)據(jù)量大，密文提交
-
表單標(biāo)簽常規(guī)寫法
使用段落標(biāo)簽，標(biāo)簽中的內(nèi)容，會在開始與結(jié)束之間產(chǎn)生一個空白行，并且它會自動換行
<form> <p> <input type="xxx"> </p> <p> <input type="xxx"> </p> <p> <input type="xxx"> </p> </form>
-
-
表單標(biāo)簽
<form>中的子標(biāo)簽-
所有表單中的元素都要具有名稱（否則提交到服務(wù)器之后，服務(wù)器無法區(qū)識別多個元素之間的不同）
-
<intput>：提供指定的輸入模式屬性type的常見屬性值：
-
text：type屬性的默認(rèn)值，普通的文本輸入框當(dāng)type為
text時，還可以加入以下屬性placeholder：提示用戶輸入文本的信息maxlength：設(shè)置最多能輸入的字符數(shù)量
<p>帳號：<input name="a" type="text" placeholder="請輸入帳號..." maxlength="5" ></p> -
password：密碼輸入框<p>密碼：<input name="b" type="password"></p> -
checkbox：多選框/復(fù)選框每個帶checkbox屬性的input標(biāo)簽都代表一個選項(xiàng)，要使這些選項(xiàng)成為一組必須要同時給input加入屬性值相同的name屬性
所有的復(fù)選框以組為單位，組內(nèi)的每個復(fù)選框都應(yīng)該具有相同的name值
type屬性值為checkbox的input標(biāo)簽，可以加入屬性值為checked的checked屬性，來實(shí)現(xiàn)默認(rèn)選擇一個選項(xiàng)
<p>愛好： <input type="checkbox" name="gender"> 抽煙 <input type="checkbox" name="gender"> 喝酒 <input type="checkbox" name="gender" checked="checked"> 燙頭 <input type="checkbox" name="gender" checked="checked"> 泡澡 </p> -
radio：單選按鈕每個帶radio屬性的input標(biāo)簽都代表一個選項(xiàng)，要使這些選項(xiàng)成為一組必須要同時給input加入屬性值相同的name屬性
單選框要想可以一次只選擇一個，要具有相同的name值
type屬性值為radio的input標(biāo)簽，可以加入屬性值為checked的checked屬性，來實(shí)現(xiàn)默認(rèn)選擇一個選項(xiàng)
<p>性別： <input type="radio" name="gender"> 男 <input type="radio" name="gender" checked="checked"> 女 </p> -
file：上傳文件<p>頭像： <input type="file"> </p> -
reset：重置按鈕：重置當(dāng)前表單的所有子標(biāo)簽的內(nèi)容 -
submit：提交按鈕：提交當(dāng)前表單的所有子標(biāo)簽的內(nèi)容 -
button：普通按鈕：可以用作取消的按鈕，用于返回上一個頁面或退出<p> <input type="reset" value="清空"> <input type="submit" value="提交"> <input type="button" value="取消"> <button>保存</button> </p>value屬性代表按鈕上顯示的內(nèi)容
-
-
<select>：下拉列表子標(biāo)簽
<option>：列表中的項(xiàng)常見的屬性：
selected：被選中
<p>血型： <select> <option>A型</option> <option>B型</option> <option>C型</option> <option selected="selected">O型</option> </select> </p> -
<textarea>：文本域（多行文本框）可以通過 cols 和 rows 屬性來規(guī)定 textarea 的尺寸，不過更好的辦法是使用 CSS 的 height 和 width 屬性
<p>個人簡介： <textarea cols="10" rows="5"></textarea> </p> -
<button>：按鈕在
<form>表單中，作用和submit一樣<p> <input type="submit" value="提交"> <button>保存</button> </p>不在
<form>表單中，就是普通按鈕（配合后期的JavaScript，可擴(kuò)展性更高）
-
1.9 框架標(biāo)簽
-
框架標(biāo)簽
<frameset>作用：用多個界面拼接成一個界面
使用方法：每個frameset下的子標(biāo)簽可以是frame也可以還是一個frameset
在html標(biāo)簽中frameset標(biāo)簽不能與body標(biāo)簽共存
常用屬性
-
rows：用于將頁面分為幾行內(nèi)容屬性值可以按照需求自定義每部分的百分比，剩下的一部分可以使用
* -
cols：用于將頁面分為幾列內(nèi)容屬性值可以按照需求自定義每部分的百分比，剩下的一部分可以使用
*
-
-
框架標(biāo)簽子標(biāo)簽
<frame>常用屬性
src：表示當(dāng)前行或列的資源路徑
-
示例Code
<frameset rows="10%,*,13%"> <frame src="top.html"></frame> <frameset cols="15%,*"> <frame src="left.html"></frame> <frame src="right.html"></frame> </frameset> <frame src="foot.html"></frame> </frameset>
1.10 其他標(biāo)簽與特殊字符
-
<meta>標(biāo)簽常見的作用：
-
指定頁面的字符編碼方案
常見的編碼表：
ASCII：美國標(biāo)準(zhǔn)信息交換碼， 使用一個字節(jié)的低7位二位進(jìn)制進(jìn)行表示
ISO8859-1：拉丁碼表，歐洲碼表，使用一個字節(jié)的8位二進(jìn)制進(jìn)行表示
GB2312：中國的中文編碼表，最多使用兩個字節(jié)16位二進(jìn)制為進(jìn)行表示
GBK：中國的中文編碼表升級，融合了更多的中文文字符號，最多使用兩個字節(jié)16位二進(jìn)制位表示
Unicode：國際標(biāo)準(zhǔn)碼，融合了目前人類使用的所有字符，為每個字符分配唯一的字符碼。所有的文字都用兩個字節(jié)16位二進(jìn)制位來表示
Unicode只是定義了一個龐大的、全球通用的字符集，并為每個字符規(guī)定了唯一確定的編號，具體存儲成什么樣的字節(jié)流，取決于字符編碼方案
推薦的Unicode編碼是UTF-8和UTF-16
UTF-8：變長的編碼方式，可用1-4個字節(jié)來表示一個字符
-
指定頁面的顯示參數(shù)，如：顯示窗口的寬度、顯示文字和圖形的初始比例
-
設(shè)置頁面加載后在指定的時間后跳轉(zhuǎn)到指定的頁面
<meta>標(biāo)簽必須寫在<head>標(biāo)簽中 -
-
<link>標(biāo)簽作用：一般通過該標(biāo)簽來導(dǎo)入CSS
<link>標(biāo)簽必須寫在<head>標(biāo)簽中 -
特殊字符
作用：在HTML中標(biāo)簽的內(nèi)容有時需要某些特殊字符
如：每個空格需要使用
來表示
2. HTML5新特性
2.1 HTML4和HTML5主要區(qū)別
-
HTML5包含了HTML4的標(biāo)簽
-
H5中大小寫不敏感
可以在標(biāo)簽、屬性、屬性值中隨機(jī)使用大小寫字母
-
屬性值的引號可以省略
-
可以省略結(jié)尾標(biāo)簽（不推薦）
查看源代碼，瀏覽器會自動補(bǔ)全結(jié)尾標(biāo)簽
2.2 新增語義化標(biāo)簽
HTML4中，所有的容器標(biāo)簽95%都會使用div，div過多的話，很難區(qū)分彼此，新增許多語義化標(biāo)簽，讓div“見名知意”
2.3 媒體標(biāo)簽
想在網(wǎng)頁上播放視頻，可以使用<video>標(biāo)簽
2.4 新增表單控件
- 新增了表單
<form>標(biāo)簽下的<input>標(biāo)簽下的type屬性值，代表顯示不同的工具 - 新增了表單
<form>標(biāo)簽下的新標(biāo)簽
二、CSS
1. CSS概述
- CSS是指層疊樣式表 cascading style sheets
- 通過CSS可以讓開發(fā)者定義HTML元素如何顯示，而且CSS可以讓原本HTML不能描述的效果，通過CSS描述出來
2. CSS與HTML結(jié)合的三種方式
-
內(nèi)聯(lián)/行內(nèi)樣式
實(shí)現(xiàn)方式：HTML標(biāo)簽上通過style屬性來引用CSS代碼
優(yōu)缺點(diǎn)：直接通過屬性簡單方便，但是只能對一個標(biāo)簽進(jìn)行修飾
<body> <div style="color:pink">hello, world</div> <font color="pink">hello, world</font> </body> -
內(nèi)部樣式表
通過
<style>標(biāo)簽來聲明我們的CSS，通常<style>標(biāo)簽推薦寫在<head>和<body>之間格式：
選擇器 {屬性:值;屬性:值}優(yōu)缺點(diǎn)：可以通過多個標(biāo)簽進(jìn)行統(tǒng)一的樣式設(shè)置，但是它只能在本頁面上進(jìn)行修飾
<style> div { color:blue; } </style> <body> <div>have a good day</div> </body> -
外部樣式表
需要單獨(dú)定義一個CSS文件，注意CSS文件的后綴名就是
.css實(shí)現(xiàn)方式1：在項(xiàng)目根目錄下，創(chuàng)建css目錄，在css目錄中創(chuàng)建css文件，在
<head>中使用<link>標(biāo)簽引用外部的css文件需要將
<link>中屬性rel的值設(shè)置為stylesheet，屬性href為.css文件的目錄<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../CSS/css_test.css"> </head>實(shí)現(xiàn)方式2：類似于內(nèi)部樣式表，
@import 'CSS文件所在地址'<style> @import '../CSS/css_test.css' </style>兩種實(shí)現(xiàn)方式的區(qū)別：加載順序不同，@import方式導(dǎo)入會先加載html，然后才導(dǎo)入css樣式；如果使用link方式，它會先加載樣式表
-
三種樣式表的優(yōu)先級：內(nèi)聯(lián) > 內(nèi)部 > 外部
3. CSS選擇器、基本屬性、定位
3.1 CSS選擇器
-
作用：在style標(biāo)簽中，通過指定的標(biāo)簽名或標(biāo)簽內(nèi)的屬性值選定某個或多個標(biāo)簽，通過設(shè)定屬性值來修改對應(yīng)標(biāo)簽的樣式
-
元素（標(biāo)簽）選擇器
它可以對頁面上相同的標(biāo)簽進(jìn)行統(tǒng)一的設(shè)置，它描述的就是標(biāo)簽的名稱
-
類選擇器
類選擇器在使用時使用
.來描述，它描述的是元素上的class屬性值需要在元素添加class屬性，選擇器前加
.若選擇器不加任何符號，會先去找與選擇器同名的標(biāo)簽而不是class屬性值VSCode快捷鍵:
div.xxx快速生成div標(biāo)簽和class屬性值為xxx，<div class="xxx"></div> -
id選擇器
它只能選擇一個元素，使用
#引入，引用的是元素的id屬性值。id選擇器，比類選擇器更具有唯一性需要在元素添加id屬性，選擇器前加
#若選擇器不加任何符號，會先去找與選擇器同名的標(biāo)簽而不是id屬性值VSCode快捷鍵:
div#xxx快速生成div標(biāo)簽和id屬性值為xxx，<div id="xxx"></div><style> .a { color:purple; } #b { color:red; } </style> <body> <div class="a">have a good day</div> <div class="a">have a good day</div> <div id="b">have a good day</div> <div>have a good day</div> </body> -
選擇器組
作用：合并相同內(nèi)容的選擇器
使用方法：不同選擇器名之間使用
,進(jìn)行分隔<style> #b,.a { color:purple; } </style> <body> <div class="a">have a good day</div> <div class="a">have a good day</div> <div id="b">have a good day</div> <div>have a good day</div> </body> -
派生選擇器
兩個標(biāo)簽選擇器同時寫在一個內(nèi)容上時(或只寫一個)，這兩個標(biāo)簽下的所有內(nèi)容樣式會被修改
<style> div p { color:purple; } </style> <body> <div> <p>11111</p> <p>22222</p> <p>33333</p> <span> <p>444444</p> <p>555555</p> <p>666666</p> </span> </div> </body>當(dāng)設(shè)置
div > p時，就只會使得div子標(biāo)簽內(nèi)容樣式被修改，而div子標(biāo)簽下子標(biāo)簽的內(nèi)容樣式不被修改<style> div > p { color:purple; } </style> <body> <div> <p>11111</p> <p>22222</p> <p>33333</p> <span> <p>444444</p> <p>555555</p> <p>666666</p> </span> </div> </body> -
CSS偽類
-
CSS偽類可對css的選擇器添加一些特殊效果
-
超鏈接偽類的四種狀態(tài)：
:active向被激活的元素添加樣式（鼠標(biāo)長按時）:hover當(dāng)鼠標(biāo)懸浮在元素上方時，向元素添加樣式:link向未被訪問的鏈接添加樣式:visited向已被訪問的鏈接添加樣式超鏈接的偽類：要遵守使用順序，愛恨原則 LoVeHAte，lvha
<!-- 當(dāng)鼠標(biāo)指向baidu時，字體變小變紅 --> <style> a:hover{ color:red; font-size: small; } a { font-size: large; } </style> <body> <a >baidu</a> </body>超鏈接偽類的四種狀態(tài)測試：
重復(fù)查看
:link效果，需要清除瀏覽器瀏覽數(shù)據(jù)和緩存<style> a:link{ color:blue; font-size: small; } a:visited{ color:yellow; font-size: small; } a:hover{ color:red; font-size: small; } a:active{ color:green; font-size: small; } a { font-size: large; } </style> <body> <a >dubai</a> </body> -
其他偽類
:first-child向元素的第一個子元素添加樣式。作用等同于使用class屬性的標(biāo)簽，用類選擇器來指定這個標(biāo)簽的樣式，只是使用偽類更加便捷
-
3.2 CSS基本屬性
-
文本屬性
單位：px：像素、em：倍數(shù)
line-height的屬性值表示當(dāng)前文本上方和下方的所占空間大小
<style> #title{ font-family:"隸書"; font-size:5em; /* 默認(rèn)字體大小的5倍 */ font-weight: bold; /*字體加粗*/ color:red; /*字體顏色*/ text-align: center; /*居中對齊*/ text-decoration: underline; /*下劃線*/ line-height: 30px; /* 行高*/ } .content{ text-indent:2em; /*首行縮進(jìn)*/ } </style> <body> <p id="title">中華人民共和國萬歲！</p> <p style="text-align: right;">作者：AAA</p> <p class="content">我們相親相愛，是一家人！</p> <p>我們相親相愛，是一家人！</p> </body> -
背景屬性
-
CSS 允許應(yīng)用純色作為背景，也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果
-
一般使用
<div>標(biāo)簽定義好寬高后，不指定background-color屬性則默認(rèn)是白色，為了區(qū)分可以設(shè)置background-color屬性的顏色background-color和background作用相同可相互替換使用color屬性是指div中的文本顏色，不是背景 -
添加
background-image屬性后，原背景會被覆蓋，若添加的圖片尺寸小于背景尺寸，則默認(rèn)使用全背景平鋪效果 -
添加
background-repeat屬性，修改屬性值為no-repeat，則平鋪方式為只是本圖片不重復(fù)的效果其他的平鋪方式：
-
repeat-x：表示橫向平鋪到整個背景上 -
repeat-y：表示縱向平鋪到整個背景上
-
-
添加
background-position屬性，屬性值中第一個數(shù)字參數(shù)表示圖片的左側(cè)與背景左側(cè)的距離，第二個數(shù)字參數(shù)表示圖片的上方與背景上方的距離兩個參數(shù)都可以是負(fù)數(shù)，表示圖片進(jìn)入到背景邊界外的長度（這部分不顯示）；當(dāng)數(shù)字參數(shù)為正數(shù)超過背景范圍后也不顯示超過的圖片部分
-
添加
background-attachment屬性，屬性值為fixed，表示當(dāng)頁面在在滾動時，圖片位置不隨頁面滾動（在div范圍中），該屬性的默認(rèn)值是scroll -
示例Code
<style> div { /*設(shè)置基本的背景屬性*/ width: 500px; height: 500px;/*高度可以不指定，不指定時需要div中有帶內(nèi)容的其他標(biāo)簽，不指定時背景顏色height根據(jù)div中內(nèi)容的長度變化而變化（內(nèi)容會覆蓋背景）；指定height時，背景顏色的height不會隨div中內(nèi)容變化（內(nèi)容同樣會覆蓋背景）*/ background-color: pink; /* 背景顏色 */ /*添加一張圖片到背景中*/ background-image: url("img/cat.gif"); background-repeat: no-repeat; /* 平鋪方式*/ background-position: 0px 100px; /*背景的位置（移動）*/ background-attachment: fixed; /* 固定的背景*/ } </style> <body> <div></div> </body>
-
-
列表屬性
-
通過
ul或ol的選擇器來設(shè)置列表的標(biāo)記形狀-
設(shè)置不同的列表項(xiàng)標(biāo)記為有序列表
-
設(shè)置不同的列表項(xiàng)標(biāo)記為無序列表
-
設(shè)置列表項(xiàng)標(biāo)記為圖像
-
示例code
<style> .a { list-style-type: none;/* 無序列表無標(biāo)記 */ } .b { list-style-type: decimal-leading-zero;/* 有序列表中以0開頭的數(shù)字標(biāo)記 */ } .c { list-style-type: upper-roman;/* 有序列表中標(biāo)記是大寫羅馬數(shù)字(I, II, III, IV, V, 等 */ } .d { list-style-type: upper-alpha;/* 有序列表中標(biāo)記是大寫英文字母The marker is upper-alpha (A, B, C, D, E,等 */ } .e { list-style-image: url('img/list-img-2.gif');/* 設(shè)置列表項(xiàng)標(biāo)記為圖像 */ } </style> <body> <ul class="a"> <li>曹操</li> <li>劉備</li> <li>孫權(quán)</li> </ul> <ol class="b"> <li>呂布</li> <li>趙云</li> <li>典韋</li> </ol> <ol class="c"> <li>關(guān)羽</li> <li>馬超</li> <li>張飛</li> </ol> <ol class="d"> <li>黃忠</li> <li>夏侯惇</li> <li>姜維</li> </ol> <ol class="e"> <li>老孫</li> <li>老楊</li> <li>老西</li> </ol> </body>
-
-
將縱向列表設(shè)置為橫向的顯示效果
為列表中的每個
li添加屬性和屬性值float: left;，一般也會添加屬性和屬性值list-style-type: none;來去除列表項(xiàng)標(biāo)記 -
設(shè)置每個列表項(xiàng)
li中文字的對齊方式text-align、字體大小font-size、顏色color -
設(shè)置每個列表項(xiàng)
li中背景顏色background-color、行高line-height -
設(shè)置每個列表項(xiàng)
li中鼠標(biāo)指向時的顯示樣式cursor -
設(shè)置每個列表項(xiàng)
li中的width，若不設(shè)置則背景顏色會填充整行 -
列表案例：導(dǎo)航條
<style> li{ list-style-type: none; color:white; background-color: black; width: 150px; text-align: center; float: left; /* 將li實(shí)現(xiàn)水平方向顯示*/ line-height: 40px; font-size: 1.3em; cursor: pointer; /* 鼠標(biāo)光標(biāo)顯示樣式 */ } li:hover{ background-color: orange; /* 當(dāng)鼠標(biāo)在此懸浮時，顯示背景顏色為橙色 */ line-height: 50px; /* 當(dāng)鼠標(biāo)在此懸浮時，顯示的行高變大 */ } </style> <body> <ul> <li>apple</li> <li>banana</li> <li>peach</li> </ul> </body>
-
-
邊框?qū)傩?/p>
-
CSS邊框?qū)傩栽试S指定一個元素邊框的樣式和顏色
-
設(shè)置邊框的樣式必要的三個屬性
border-width、border-color、border-style若缺少border-style屬性則不顯示邊框
border-width: 2px; border-color:red; border-style: solid;可以向?qū)傩灾屑尤胛恢?，就可以指定邊框具體某個邊的樣式
border-right-color:green; /* 設(shè)置右邊框的顏色 */ border-bottom-style: dashed; /* 設(shè)置下邊框的樣子 */或使用簡化寫法：為
border屬性指定屬性值線寬、線條形狀、顏色border:10px solid red; -
示例Code
<style> div { width: 400px; height: 40px; margin: 10px; /* div和div彼此之間產(chǎn)生10像素的距離*/ } .a { /* 設(shè)置四個邊 */ border-width: 2px; border-color:red; border-style: solid; border-right-color:green; /* 設(shè)置右邊框的顏色 */ border-bottom-style: dashed; /* 設(shè)置下邊框的樣子 */ } /* 以下是邊框的簡化寫法 */ .b1{ border:10px solid red; } .b2{ border:10px dotted red; } .b3{ border:10px dashed red; } .b4{ border:10px double red; } .b5{ border:10px groove red; } .b6{ border:10px ridge red; } .b7{ border:10px inset red; } .b8{ border:10px outset red; } </style> <body> <div class="a"></div> <div class="b1">實(shí)心線</div> <div class="b2">點(diǎn)線</div> <div class="b3">虛線</div> <div class="b4">雙線</div> <div class="b5">3D效果的凹槽</div> <div class="b6">3D脊邊框</div> <div class="b7">嵌入邊框</div> <div class="b8">突出邊框</div> </body>
-
-
輪廓屬性
輪廓是在邊框外的一層線條，使用方法為
outline屬性指定屬性值線寬、線條形狀、顏色（與邊框border的屬性值寫法相同）<style> div{ width: 400px; height: 200px; border: 30px solid darkcyan; outline: 5px dashed red; /*輪廓*/ } </style> <body> <div></div> </body>
-
盒子模型
CSS盒子模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容
- margin(外邊距) - 盒子與盒子之間的距離
margin使用場景：一般通過margin設(shè)置div在頁面中的位置；div中的元素通過margin可以設(shè)置該元素在div中的位置
當(dāng)div內(nèi)元素的margin超過div的height和width時，該元素可以顯示超出的部分，這是與div中添加背景圖片的不同
更具體的屬性：margin-top、margin-left
-
border(邊框) - 盒子的保護(hù)殼
-
padding(內(nèi)邊距/填充) - 內(nèi)填充，盒子邊與內(nèi)容之間的距離
更具體的屬性：padding-top、padding-left
- content(內(nèi)容) - 盒子的內(nèi)容，顯示的文本或圖像
<style> div{ width: 200px; height: 200px; border:2px solid greenyellow; margin-top: 50px; /*上外邊距*/ margin-left: 100px; /*左外邊距*/ padding-top:20px; /*上內(nèi)邊距*/ padding-left:40px; /*左內(nèi)邊距*/ } </style> <body> <div> <img src="img/cat.gif"> </div> </body>
3.3 CSS定位
-
默認(rèn)定位
-
塊級元素：h1~h6，p, div 等，自上而下，垂直排列（自動換行）；可以改變寬高
-
行內(nèi)元素：a, b, span,等，從左向右，水平排列（不會換行）；不能改變寬高，若在這些標(biāo)簽的選擇器下更改width和height屬性，則無法識別寬高
行內(nèi)元素通過加入 display 屬性設(shè)置屬性值inline-block可以轉(zhuǎn)換為行內(nèi)塊元素，從而改變寬高
-
行內(nèi)塊元素：input, img等，從左向右，水平排列（自動換行）；可以改變寬高
-
示例Code
<style> div{ width: 100px; height: 50px; border :1px solid red; } span{ width: 100px; height: 100px; border :1px solid red; } input{ width: 50px; height: 50px; border :1px solid red; } a { width: 50px; height: 50px; border :1px solid red; /* a標(biāo)簽是行內(nèi)元素，無法改變寬高。但只要轉(zhuǎn)換成行內(nèi)塊元素，就可以改變寬高了。 */ display: inline-block; /* 將a元素，顯示成 行內(nèi)塊 */ } </style> <body> <a href="">aaa</a> <a href="">bbb</a> <a href="">ccc</a> </body>
-
-
浮動定位
-
不僅可以使塊級元素靠著左邊或右邊。還可以消除塊級元素的獨(dú)自占一行的特性
-
float屬性的取值：
none ：不浮動
left：貼著左邊 浮動
right：貼著右邊 浮動
-
示例Code
如圖所示，c1，c2向右浮動直到本行堆滿，c3換行繼續(xù)向右堆
如圖所示，若不指定float屬性，默認(rèn)從左上角開始從上至下堆；所有未指定float屬性的元素為一列從左上第一個位置進(jìn)行向下堆疊
-
-
相對定位
-
和原來的位置進(jìn)行比較，進(jìn)行移動定位（偏移）
-
使用方法：設(shè)定屬性和屬性值
position: relative、top: xxxpx、left: xxxpxtop和left可以為負(fù)值表示向左上移動，正值時表示向右下移動
-
示例Code
-
-
絕對定位
-
選定一個當(dāng)前元素
position: absolute與它的父元素中設(shè)定有position: relative的元素按偏移量top和left的屬性值進(jìn)行偏移如果父級元素定位了，就以父級為參照物；
如果父級沒定位，找爺爺級，爺爺定位了，以爺爺為參照物。
如果爺爺沒定位，繼續(xù)向上找，都沒定位的話，body是最終選擇
-
必須找當(dāng)前元素的父元素作為參照物進(jìn)行絕對定位，不可用與當(dāng)前元素處于同一并列位置的元素作為參照物（位置保持不變，不會以偏移值進(jìn)行偏移）
-
示例Code
<style> .parent{ width: 250px; height: 300px; border: 2px solid red; /* 設(shè)定屬性值為parent的元素是參照物 */ position: relative; } .child{ width: 150px; height: 280px; border: 2px solid green; margin: 15px; /* 設(shè)定屬性值為child的元素是參照物 */ /* position: relative; */ } .mod01{ width: 50px; height: 60px; border: 2px dashed gold; /* 有父元素的時候，設(shè)定屬性值為mod1的元素是參照物, 此時是無效的*/ /* position: relative; */ } .mod02{ width: 50px; height: 60px; border: 2px dashed orange; /* 設(shè)定當(dāng)前的絕對位置元素為mod2 */ position: absolute; /* 設(shè)置偏移值 */ top: 50px; left: 50px; } .mod03{ width: 50px; height: 60px; border: 2px dashed blueviolet; /* 有父元素的時候，設(shè)定屬性值為mod3的元素是參照物, 此時是無效的*/ /* position: relative; */ } </style> <body> <div class="parent"> <div class="child"> <div class="mod01"></div> <div class="mod02"></div> <div class="mod03"></div> </div> </div> </body>
-
-
固定定位
-
將元素的內(nèi)容固定在頁面的某個位置，當(dāng)用戶向下滾動頁面時元素框并不隨著移動
-
使用方法：設(shè)定屬性和屬性值
position: fixed、width: xxxpx、height: xxxpx固定定位同時可以設(shè)定當(dāng)前元素距離頁面左和上的邊距
-
-
z-index
-
如果有重疊元素，使用z軸屬性，定義上下層次
-
z軸屬性，要配合相對或絕對定位來使用
-
z值沒有額定數(shù)值（整型就可以，具體用數(shù)字幾，悉聽尊便）
-
使用方法：為兩個重疊的標(biāo)簽同時設(shè)定屬性和屬性值
position: relative、z-index: xxx其中
z-index的屬性值較大的顯示在上層 -
示例Code
-
4. CSS3
- 圓角與盒子陰影
- 漸變
- 背景
- 過渡
- 動畫
三、JavaScript
1. JavaScript概述
- JavaScript的特點(diǎn)
- 解釋執(zhí)行：事先不編譯，逐行執(zhí)行
- 基于對象：內(nèi)置大量現(xiàn)成對象
- JavaScript的組成
- ECMAScript：定義核心語法，關(guān)鍵字，運(yùn)算符，數(shù)據(jù)類型等系列標(biāo)準(zhǔn)
- DOM：文檔對象模型，將一個html頁面的所有節(jié)點(diǎn)看成是一個一個的對象，更有層次感的管理每一個節(jié)點(diǎn)
- BOM：瀏覽器對象模型，是對瀏覽器窗口進(jìn)行訪問和操作
2. HTML與JavaScript結(jié)合方式
-
行內(nèi)腳本
作為屬性值來使用，一般只寫方法調(diào)用或
return 方法調(diào)用 -
內(nèi)部腳本
-
使用
<script></script> -
標(biāo)準(zhǔn)是寫在head和body之間（脖子位置）
-
-
外部腳本
使用script標(biāo)簽中的屬性src添加
.js文件來引入腳本
3. JavaScript的使用
-
變量
-
在定義變量的時候，所有的數(shù)據(jù)類型都是var
-
聲明變量：
var x、var x,y -
實(shí)際的變量類型
- number：不區(qū)分整型數(shù)值和浮點(diǎn)型數(shù)值
- string：首尾由單引號或雙引號括起
- boolean：true和false也代表1和0
-
自動類型轉(zhuǎn)換
-
數(shù)據(jù)類型相關(guān)函數(shù)
- parseInt
- parseFloat
- typeof：查詢變量的當(dāng)前類型
-
null和undefined
- null：在程序中代表“無值”或者“無對象”，可以通過給一個變量賦值 null 來清除變量的內(nèi)容
- undefined：聲明了變量但從未賦值或者對象屬性不存在
-
算數(shù)運(yùn)算符特殊用法
-可以表示減號，也可以表示負(fù)號，如：x = -y+可以表示加法，也可以用于字符串的連接
-
關(guān)系運(yùn)算符
-
===：類型相同，數(shù)值相同 -
!==：非嚴(yán)格相等，與==類似 -
示例Code
<script> var a = "10"; var b = 10; if (a == b) { alert("a == b");//成立 } if (a !== b) { alert("a !== b");//成立 } if (a === b) { alert("a === b");//不成立 } </script>
-
-
邏輯運(yùn)算符
-
流程控制語句
-
-
字符串處理API
-
數(shù)組
-
創(chuàng)建數(shù)組
var arr1 = new Array(); -
初始化數(shù)組的三種方式：
- 利用索引進(jìn)行初始化
- 使用Array構(gòu)造方法傳參進(jìn)行初始化
- 利用方括號
[]進(jìn)行初始化
數(shù)組類型的返回值類型通常也是用var
-
獲取數(shù)組長度的字段
length -
對數(shù)組進(jìn)行操作的常用方法
- 轉(zhuǎn)字符串：
tostring()、join() - 利用現(xiàn)有數(shù)組創(chuàng)建新數(shù)組：
conact()、slice() - 更改當(dāng)前數(shù)組：反轉(zhuǎn)
reverse()、排序sort()
- 轉(zhuǎn)字符串：
-
-
Math對象
無需創(chuàng)建Math對象，直接把 Math 作為對象使用就可以調(diào)用其所有屬性和方法
-
Number對象
對數(shù)值進(jìn)行四舍五入操作
-
正則表達(dá)式
對字符串執(zhí)行模式匹配
-
日期對象
-
函數(shù)
-
使用關(guān)鍵字
function定義函數(shù)，形參列表中不要加數(shù)據(jù)類型；函數(shù)不寫返回值類型，但是可以有返回值function 函數(shù)名( 形參列表 ) { // 函數(shù)體 return 返回值; } -
參數(shù)對象
arguments是參數(shù)列表內(nèi)容的一個數(shù)組對象，可以使用length獲取參數(shù)列表長度，使用索引下標(biāo)訪問數(shù)組中的元素，參數(shù)數(shù)組索引也是從0開始 -
構(gòu)造函數(shù)
將函數(shù)的返回值直接寫入原來的參數(shù)列表中，參數(shù)和返回值都用字符串表示
var myFunction = new Function("a", "b", "return a * b"); var x = myFunction(4, 3); //使用構(gòu)造函數(shù) console.log(x); -
匿名函數(shù)
var fn = function(a, b) {// 沒有名字的函數(shù)，應(yīng)該用一個變量來接收 return a * 10 + b; }; console.log( fn(3, 4) ); -
全局函數(shù)：直接使用函數(shù)，無需創(chuàng)建對象
isNaNevalencodeURI和decodeURI
-
閉包
-
閉包的概念：指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)，一般情況就是在一個函數(shù)中包含另一個函數(shù)
-
閉包的作用：訪問函數(shù)內(nèi)部變量、保持函數(shù)在環(huán)境中一直存在，不會被垃圾回收機(jī)制處理
-
JavaScript中的全局變量可以不加var聲明，不使用var聲明的變量默認(rèn)是全局變量，作用范圍是整個script標(biāo)簽
-
使用全局變量有時不安全，容易改變變量的值；使用閉包可以實(shí)現(xiàn)全局變量的效果，較為安全，但不推薦大量使用閉包
-
閉包直觀的說就是形成一個不銷毀的棧環(huán)境。在函數(shù)中嵌套一個子函數(shù)，通過父函數(shù)返回值調(diào)用子函數(shù)，在父函數(shù)外可以使用返回值這個變量單獨(dú)調(diào)用子函數(shù)的內(nèi)容，而這個過程中父函數(shù)沒有被銷毀
-
閉包的使用：利用子函數(shù)將父函數(shù)中局部變量改變值
-
應(yīng)用示例：統(tǒng)計(jì)一個函數(shù)被執(zhí)行的次數(shù)
<script> function parent() { var cnt = 0; function child() { return cnt++; } return child; } var fun = parent(); fun();//0 fun();//1 alert(fun());//輸出2 </script><script> function parent() { var cnt = 0; function child() { return cnt += 1; } return child; } var fun = parent(); alert(fun); // 輸出結(jié)果： // function child() { // return cnt++; // } alert(fun());//輸出結(jié)果：1 alert(fun());//輸出結(jié)果：2 alert(parent); // 輸出結(jié)果： // function parent() { // var cnt = 0; // function child() { // return cnt++; // } // return child; // } alert(parent()); // 輸出結(jié)果： // function child() { // return cnt++; // } </script>
-
-
-
JavaScript幾種輸出方式（其中alert、confirm、prompt都是全局方法直接使用）
-
普通彈框
alert("hello，拉勾"); -
控制臺日志輸出
console.log("谷歌瀏覽器按F12進(jìn)入控制臺"); -
頁面輸出
將
<h2>元素輸出到<body>中:document.write("<h2>我愛你中國</h2>");輸出內(nèi)容可以加標(biāo)簽，制作不同的頁面輸出效果
-
確認(rèn)框
confirm("確定刪除嗎？");頁面輸出會顯示確認(rèn)和取消按鈕傳參是彈框提示語句的字符串
一般用var接收boolean類型的返回值，選擇確認(rèn)返回true，選擇取消返回false
-
提示輸入框
prompt("請輸入姓名：");頁面輸出會顯示輸入框和確認(rèn)、取消按鈕傳參是彈框提示語句的字符串
一般用var接收返回值，返回值內(nèi)容為輸入框輸入的字符串內(nèi)容
-
4. DOM操作
4.1 DOM訪問
-
document對象：表示當(dāng)前整個HTML頁面
<!DOCTYPE html>HTML頁面中通常在最上方進(jìn)行聲明文檔類型
!表示聲明，DOCTYPE表示文檔類型，html表示是HTML類型的文檔 -
通過標(biāo)簽的id屬性獲取元素節(jié)點(diǎn)對象
方法
getElementById<body> <form action="" onsubmit="login()"> <p>賬號：<input id="username"></p> <p>電話：<input id="phone"></p> <p><button>登錄</button></p> </form> <script> function login(){ var id = document.getElementById("username"); alert(id); } </script> </body>onsubmit屬性可以在本表單提交后調(diào)用login方法，方法調(diào)用后彈框打印[object HTMLInputElement]，表示getElementById方法獲取的對象類型對該對象調(diào)用
value字段可以獲取具體數(shù)值或字符串<body> <form action="xxx" onsubmit="return login()"> <p>賬號：<input id="username"></p> <p>電話：<input id="phone"></p> <p><button>登錄</button></p> </form> <script> function login(){ var id = document.getElementById("username").value; if (id == "") { alert("賬號不能為空"); return false; } return true; } </script> </body>本表單提交后，屬性
onsubmit獲取返回值，若為true則以繼續(xù)執(zhí)行，若為false則停在此處 -
通過標(biāo)簽的多個相同name屬性獲取元素節(jié)點(diǎn)對象數(shù)組
onchange屬性可以在復(fù)選框選擇時，調(diào)用checkAllBox方法，其中傳入的this參數(shù)代表本input標(biāo)簽（type為checkbox的復(fù)選框）對象通過
getElementsByName方法可以獲取同一name屬性的所有標(biāo)簽對象，方法返回值為由這些對象組成的數(shù)組type屬性值為checkbox的input標(biāo)簽，可以加入屬性值為checked的checked屬性，若不定義這個屬性，checkbox類型的input也會默認(rèn)有這個屬性
<body> <table border="1" cellspacing="0"> <tr align="left"> <td><input type="checkbox" name="cb" onchange="checkAllBox(this)">全選</td> <td>生產(chǎn)日期</td> <td>價格</td> </tr> <tr align="center"> <td><input type="checkbox" name="cb">商品1</td> <td>1990</td> <td>25d</td> </tr> <tr align="center"> <td><input type="checkbox" name="cb">商品2</td> <td>1991</td> <td>30d</td> </tr> <tr align="center"> <td><input type="checkbox" name="cb">商品3</td> <td>1996</td> <td>67d</td> </tr> </table> <p><button>提交訂單</button></p> <script> function checkAllBox(all) { var arr = document.getElementsByName("cb"); for (var n = 0; n < arr.length; n++) { arr[n].checked = all.checked; } } </script> </body> -
通過標(biāo)簽名稱獲得元素節(jié)點(diǎn)對象集，通常拿到元素節(jié)點(diǎn)對象可以使用
.style.屬性值的方式的修改元素節(jié)點(diǎn)的樣式（類似于使用CSS中style標(biāo)簽下的選擇器）使用方法：使用element對象調(diào)用
getElementsByTagName方法取得返回值是數(shù)組，對數(shù)組進(jìn)行遍歷，其中每個數(shù)組元素為相同標(biāo)簽名的元素節(jié)點(diǎn)
4.2 DOM修改
-
獲取或改變HTML中的內(nèi)容
主要是通過獲取到的元素節(jié)點(diǎn)對象調(diào)用
innerHTML字段來獲取或修改標(biāo)簽的內(nèi)容 -
獲取或改變HTML中的樣式
主要是通過獲取到的元素節(jié)點(diǎn)對象調(diào)用
style字段來獲取節(jié)點(diǎn)的style對象，再通過調(diào)用標(biāo)簽的樣式字段來獲取或修改標(biāo)簽的樣式（類似于使用CSS中style標(biāo)簽下的選擇器） -
添加元素節(jié)點(diǎn)
使用
createElement創(chuàng)建節(jié)點(diǎn)，對節(jié)點(diǎn)對象調(diào)用方法setAttribute設(shè)置屬性和屬性值插入節(jié)點(diǎn)一般用父節(jié)點(diǎn)對象調(diào)用方法
appendChild(子節(jié)點(diǎn)對象)使用getElementsByTagName獲取當(dāng)前頁面的節(jié)點(diǎn)對象數(shù)組，通過索引下標(biāo)來訪問某個父節(jié)點(diǎn)
-
刪除元素節(jié)點(diǎn)
通過
parentNode來獲取該節(jié)點(diǎn)的父節(jié)點(diǎn)，通過父節(jié)點(diǎn)方法removeChild(子節(jié)點(diǎn)對象)來刪除子節(jié)點(diǎn) -
替換元素節(jié)點(diǎn)
- 獲取當(dāng)前節(jié)點(diǎn)對象old
- 創(chuàng)建新節(jié)點(diǎn)對象new
- 當(dāng)前節(jié)點(diǎn)對象調(diào)用
parentNode方法獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)，通過父節(jié)點(diǎn)方法replaceChild(new,old)進(jìn)行替換
4.3 事件
-
事件：JavaScript通過捕獲頁面上的操作而做出反饋，事件一般是標(biāo)簽中的屬性，一般將事件屬性的屬性值設(shè)定為JavaScript方法調(diào)用或return 方法調(diào)用
屬性值是
return xxx()，方法返回值為布爾值時有效，方法返回true為執(zhí)行，false為阻止當(dāng)前標(biāo)簽事件發(fā)生（如<a>中會阻止頁面跳轉(zhuǎn)） -
窗口事件
在body和frameset元素中添加onload屬性，將其屬性值設(shè)定為一個JavaScript方法，每當(dāng)頁面加載完成后自動調(diào)用這個方法
-
表單元素事件
表單標(biāo)簽
<form>的子標(biāo)簽中可以添加屬性onblur（失去焦點(diǎn)時執(zhí)行）、onfocus（獲得焦點(diǎn)時執(zhí)行）獲取焦點(diǎn)：通過點(diǎn)擊輸入框、復(fù)選框選項(xiàng)
-
鼠標(biāo)事件
對執(zhí)行腳本進(jìn)行如：單擊、雙擊、移出元素、懸停元素
-
鍵盤事件
-
事件冒泡
-
事件捕獲
4.4 面向?qū)ο驩OP
- 使用Object創(chuàng)建通用對象
- 使用構(gòu)造函數(shù)
- 使用直接量
4.5 JSON
-
JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式
-
作用：互聯(lián)網(wǎng)上來回傳遞數(shù)據(jù)，如果沒有一個統(tǒng)一的格式，解析起來的難度很大，
使用JSON易于人閱讀和編寫，同時也易于機(jī)器解析和生成
-
格式：
{ 屬性1：值1， 屬性2：值2， 。。。。 } -
使用JavaScript可以將JSON看作一個對象，通過
對象.屬性值名的方式獲取JSON對象屬性值常見的用法：JSON數(shù)組（以JSON為元素類型的數(shù)組），同樣可以使用索引下標(biāo)訪問每個JSON對象
-
復(fù)雜的JSON對象
JSON對象的屬性值可以是字符串?dāng)?shù)組，屬性的訪問方式
JSON對象.屬性名[索引]
5. BOM操作
-
BOM操作就是JavaScript對瀏覽器的一些常規(guī)操作的方法
-
window對象：
window是全局的可以直接調(diào)用相應(yīng)的字段-
screen屏幕對象
window.screen屏幕對象，屏幕對象常用字段：width、height -
navigator對象包含有關(guān)訪問者瀏覽器的信息
window.navigator -
location通常用來做頁面跳轉(zhuǎn)，是內(nèi)置的對象可以直接使用該對象調(diào)用字段或方法
location.href：href字段可以指定URL進(jìn)行跳轉(zhuǎn)location.reload()：reload方法可以重新加載當(dāng)前頁面（相當(dāng)于刷新頁面） -
history對象會記錄瀏覽器的痕跡，是內(nèi)置的對象可以直接使用該對象調(diào)用字段或方法
history.go(-1)：跳回上一級頁面history.back()：跳回上一級頁面 -
存儲對象
-
兩種存儲對象的存儲方式：和Java中map很相似，都是鍵值對的方式存數(shù)據(jù)
-
localStorage:本地存儲，在關(guān)閉窗口或標(biāo)簽頁之后將會刪除這些數(shù)據(jù)
常用方法：
getItem、setItem、removeItem -
sessionStorage:會話存儲，就是保持瀏覽器別關(guān)閉，關(guān)閉瀏覽就等于結(jié)束了一次會話，
開啟瀏覽器就意味著創(chuàng)建了一次會話。
常用方法：
getItem、setItem、removeItem、clear -
兩種存儲對象的使用方式：先set再get，若沒有set就get，get方法返回false
-
-
-
計(jì)時操作（常用3個方法都是全局方法可以直接調(diào)用）
-
setInterval：指定時間間隔去執(zhí)行某個方法，該方法返回定時器對象
setInterval(方法名, 毫秒數(shù)) -
clearInterval：和setInterval配合使用，向clearInterval傳入定時器對象，停止定時器
clearInterval(定時器對象) -
setTimeout：設(shè)定指定時間倒計(jì)時完成后執(zhí)行某個方法
setTimeout(方法名, 毫秒數(shù))
-
本文摘自 ：https://www.cnblogs.com/
