前言

如果這篇文章有幫助到你竹挡，給個??關(guān)注葡兑，??點贊奖蔓，??鼓勵一下作者，接收好挑戰(zhàn)了嗎讹堤？

??筆芯??~

Web模塊

html基本結(jié)構(gòu)

1. html標(biāo)簽是由<>包圍的關(guān)鍵詞吆鹤。
2. html標(biāo)簽通常成對出現(xiàn)，分為標(biāo)簽開頭和標(biāo)簽結(jié)尾洲守。
3. 有部分標(biāo)簽是沒有結(jié)束標(biāo)簽的疑务，為單標(biāo)簽，單標(biāo)簽必須使用/結(jié)尾梗醇。
4. 頁面所有的內(nèi)容知允，都在html標(biāo)簽中。
5. html標(biāo)簽分為三部分：標(biāo)簽名稱婴削，標(biāo)簽內(nèi)容廊镜，標(biāo)簽屬性牙肝。
6. html標(biāo)簽具有語義化唉俗，可通過標(biāo)簽名能夠判斷出該標(biāo)簽的內(nèi)容，語義化的作用是網(wǎng)頁結(jié)構(gòu)層次更清晰配椭，更容易被搜索引擎收錄虫溜，更容易讓屏幕閱讀器讀出網(wǎng)頁內(nèi)容。
7. 標(biāo)簽的內(nèi)容是在一對標(biāo)簽內(nèi)部的內(nèi)容股缸。
8. 標(biāo)簽的內(nèi)容可以是其他標(biāo)簽衡楞。

標(biāo)簽屬性

1. class屬性：用于定義元素的類名
2. id屬性：用于指定元素的唯一id，該屬性的值在整個html文檔中具有唯一性
3. style屬性：用于指定元素的行內(nèi)樣式敦姻，使用該屬性后將會覆蓋任何全局的樣式設(shè)定
4. title屬性：用于指定元素的額外信息
5. accesskey屬性：用于指定激活元素的快捷鍵
6. tabindex屬性：用于指定元素在tab鍵下的次序
7. dir屬性：用于指定元素中內(nèi)容的文本方向瘾境，屬性只有ltr或rtl兩種
8. lang屬性：用于指定元素內(nèi)容的語言

事件屬性

1. window窗口事件，onload镰惦，在網(wǎng)頁加載結(jié)束之后觸發(fā)迷守，onunload，在用戶從網(wǎng)頁離開時發(fā)生（點擊跳轉(zhuǎn)旺入，頁面重載兑凿，關(guān)閉瀏覽器窗口等）
2. form表單事件凯力，onblur，當(dāng)元素失去焦點時觸發(fā)礼华，onchange咐鹤，在元素的值被改變時觸發(fā)，onfocus圣絮，當(dāng)元素獲得焦點時觸發(fā)祈惶，onreset疼进，當(dāng)表單中的重置按鈕被點擊時觸發(fā)议泵，onselect淀弹，在元素中文本被選中后觸發(fā)逻炊，onsubmit赤炒，在提交表單時觸發(fā)
3. keyboard鍵盤事件传睹，onkeydown屹培，在用戶按下按鍵時觸發(fā)轴总，onkeypress帮非，在用戶按下按鍵后氧吐，按著按鍵時觸發(fā)。該屬性不會對所有按鍵生效末盔，不生效的有筑舅，alt,ctrl,shift,esc
4. mouse鼠標(biāo)事件，onclick陨舱，當(dāng)在元素上發(fā)生鼠標(biāo)點擊時觸發(fā)翠拣，onblclick，當(dāng)在元素上發(fā)生鼠標(biāo)雙擊時觸發(fā)游盲，onmousedown误墓，當(dāng)元素上按下鼠標(biāo)按鈕時觸發(fā)，onmousemove益缎，當(dāng)鼠標(biāo)指針移動到元素上時觸發(fā)谜慌，onmouseout，當(dāng)元素指針移出元素時觸發(fā)莺奔，onmouseup欣范，當(dāng)元素上釋放鼠標(biāo)按鈕時觸發(fā)。Media媒體事件令哟，onabort恼琼，當(dāng)退出時觸發(fā)，onwaiting屏富，當(dāng)媒體已停止播放但打算繼續(xù)播放時觸發(fā)晴竞。

文本標(biāo)簽

1. 段落標(biāo)簽<p></p>，段落標(biāo)簽用來描述一段文字
2. 標(biāo)題標(biāo)簽<hx></hx>役听，標(biāo)題標(biāo)簽用來描述一個標(biāo)題颓鲜，標(biāo)題標(biāo)簽總共有六個級別表窘，<h1></h1>標(biāo)簽在每個頁面中通常只出現(xiàn)一次
3. 強(qiáng)調(diào)語句標(biāo)簽，<em></em>甜滨，用于強(qiáng)調(diào)某些文字的重要性
4. 更加強(qiáng)調(diào)標(biāo)簽乐严，<strong></strong>和<em>標(biāo)簽一樣，用于強(qiáng)調(diào)文本衣摩，但它強(qiáng)調(diào)的程度更強(qiáng)一些
5. 無語義標(biāo)簽<span></span>昂验，標(biāo)簽是沒有語義的
6. 短文本引用標(biāo)簽<q></q>，簡短文字的引用
7. 長文本引用標(biāo)簽<blockquote></blockquote>艾扮，定義長的文本引用
8. 換行標(biāo)簽<br/>

多媒體標(biāo)簽

1. 鏈接標(biāo)簽既琴，<a></a>
2. 圖片標(biāo)簽，<img/>
3. 視頻標(biāo)簽泡嘴，<video></video>
4. 音頻標(biāo)簽甫恩，<audio></audio>

列表

1. 無序列表標(biāo)簽，ul,li酌予，<ul></ul>列表定義一個無序列表磺箕，<li></li>代表無需列表中的每一個元素
2. 有序列表，ol,li
3. 定義列表抛虫，<dl></dl>松靡，定義列表通常和<dt></dt>和<dd></dd>標(biāo)簽一起使用

表格

1. 表格標(biāo)簽<table></table>
2. 表格的一行<tr></tr>
3. 表格的表頭<th></th>
4. 單元格<td></td>
5. 表格合并，同一行內(nèi)建椰，合并幾列colspan="2"雕欺，同一列內(nèi)，合并幾行rowspan="3"

表單標(biāo)簽

1. 表單標(biāo)簽<form>

<form></form>表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端棉姐，這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)屠列。

<form method="傳送方式" action="服務(wù)器文件">

action，瀏覽者輸入的數(shù)據(jù)被傳送到的地方

method谅海，數(shù)據(jù)傳送的方式

2. 輸入標(biāo)簽<input/>

name：為文本框命名脸哀，用于提交表單，后臺接收數(shù)據(jù)用扭吁。

value：為文本輸入框設(shè)置默認(rèn)值。

type：通過定義不同的type類型盲镶，input的功能有所不同侥袜。

text    單行文本輸入框
password    密碼輸入框（密碼顯示為***)
radio   單選框 （checked屬性用于顯示選中狀態(tài)）
checkbox    復(fù)選框（checked屬性用于顯示選中狀態(tài)）
file    上傳文件
button  普通按鈕
reset   重置按鈕（點擊按鈕，會觸發(fā)form表單的reset事件）
submit  提交按鈕（點擊按鈕溉贿，會吃飯form表單的submit事件）
email   專門用于輸入 e-mail
url 專門用于輸入 url
number  專門用于number
range   顯示為滑動條枫吧，用于輸入一定范圍內(nèi)的值
date    選取日期和時間（還包含：month、week宇色、time九杂、datetime颁湖、datetime-local）
color   選取顏色
復(fù)制代碼

button按鈕，下拉選擇框<select></select>

<option value="提交值">選項</option>是下拉選擇框里面的每一個選項
復(fù)制代碼

3. 文本域：<textarea></textarea>例隆，當(dāng)用戶想輸入大量文字的時候甥捺，使用文本域。cols镀层，多行輸入域的列數(shù)镰禾，rows，多行輸入域的行數(shù)唱逢。

其他語義化標(biāo)簽

1. 盒子<div></div>
2. 網(wǎng)頁頭部<header></header>吴侦，html5新增語義化標(biāo)簽，定義網(wǎng)頁的頭部坞古，主要用于布局备韧，分割頁面的結(jié)構(gòu)
3. 底部信息<footer></footer>，html5新增語義化標(biāo)簽痪枫，定義網(wǎng)頁的底部盯蝴，主要用于布局，分割頁面的結(jié)構(gòu)
4. 導(dǎo)航<nav></nav>听怕，html5新增語義化標(biāo)簽捧挺，定義一個導(dǎo)航，主要用于布局尿瞭，分割頁面的結(jié)構(gòu)
5. 文章<article></article>闽烙，html5新增語義化標(biāo)簽，定義一篇文章声搁，主要用于布局黑竞，分割頁面的結(jié)構(gòu)
6. 側(cè)邊欄<aside></aside>，語義化標(biāo)簽疏旨，定義主題內(nèi)容外的信息很魂，主要用于布局，分割頁面的結(jié)構(gòu)檐涝。
7. 時間標(biāo)簽<time></time>遏匆，語義化標(biāo)簽，定義一個時間

網(wǎng)頁結(jié)構(gòu)

1. <!DOCTYPE html> 定義文檔類型谁榜，告知瀏覽器用哪一種標(biāo)準(zhǔn)解釋HTML
2. <html></html>可告知瀏覽器其自身是一個 HTML 文檔
3. <body></body>標(biāo)簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容
4. <head></head>標(biāo)簽用于定義文檔的頭部幅聘，它是所有頭部元素的容器
5. <title></title>元素可定義文檔的標(biāo)題
6. <link>標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi)
7. <meta>定義文檔的元數(shù)據(jù)

模塊劃分

1. 常見的企業(yè)網(wǎng)站，多由頭部區(qū)窃植，展示圖片區(qū)域帝蒿，主題區(qū)域，底部信息區(qū)域組成
2. 網(wǎng)頁拆分原則: – 由上到下 - 由內(nèi)到外

CSS代碼語法

1. CSS全稱為層疊樣式表(Cascading Style Sheets)巷怜，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式葛超，如文字大小暴氏、顏色、字體加粗等绣张。
2. css代碼通常存放在<style></style>標(biāo)簽內(nèi)
3. css 樣式由選擇符和聲明組成答渔，而聲明又由屬性和值組成
4. 選擇符{屬性:值}
5. 選擇符：又稱選擇器，指明網(wǎng)頁中要應(yīng)用樣式規(guī)則的元素

CSS 放置位置

1. 行內(nèi)樣式胖替，不建議使用
2. 內(nèi)聯(lián)式樣式表
3. 外聯(lián)樣式表

CSS的繼承

1. CSS的某些樣式是具有繼承性的研儒，繼承是一種規(guī)則，它允許樣式不僅應(yīng)用于某個特定html標(biāo)簽元素独令，而且應(yīng)用于其后代端朵。
2. 不可繼承樣式：display、margin燃箭、border冲呢、padding、background招狸、height敬拓、min-height、max-height裙戏、width乘凸、min-width、max-width累榜、overflow营勤、position、left壹罚、right葛作、top、bottom猖凛、z-index赂蠢、float、clear
3. 可以繼承的樣式：letter-spacing辨泳、word-spacing虱岂、white-space、line-height漠吻、color量瓜、font、font-family途乃、font-size、font-style扔傅、font-variant耍共、font-weight烫饼、text-decoration、text-transform试读、direction杠纵、visibility、cursor

選擇器的種類

1. 標(biāo)簽選擇器:通過標(biāo)簽的名字钩骇，修改css樣式
2. 通配符選擇器:選擇頁面中所有的元素
3. 屬性選擇器
4. 后代選擇器:選擇某個父元素下面所有的元素
5. 一級子元素選則器:選擇某個父元素的直接子元素比藻，后代選擇器是選擇父元素的所有子孫元素，一級子元素原則器只選擇第一級子元素倘屹，不會再向下查找元素
6. id選擇器：通過id查找頁面中唯一的標(biāo)簽
7. class選擇器:通過特定的class（類）來查找頁面中對應(yīng)的標(biāo)簽银亲，以 .class名稱
8. 偽類選擇器::hover鼠標(biāo)移入某個元素;:before在某個元素的前面插入內(nèi)容;:after在某個元素的后面插入內(nèi)容
9. 群組選擇器:可以對多個不同的選擇器設(shè)置相同的樣式

選擇器的優(yōu)先級

1. 當(dāng)有不同的選擇器對同一個對象進(jìn)行樣式指定時，并且兩個選擇器有相同的屬性被賦予不同的值時纽匙。
2. 通過測算那個選擇器的權(quán)重值最高务蝠，應(yīng)用哪一個選擇器的樣式
3. 權(quán)重計算方式:

標(biāo)簽選擇器：1

class選擇器：10

id選擇器：100

行內(nèi)樣式：1000

!important 最高級別，提高樣式權(quán)重烛缔，擁有最高級別
復(fù)制代碼

背景樣式

1. 背景顏色background-color
2. 背景圖片background-image

background-image:url(bg01.jpg);
復(fù)制代碼

3. 背景圖片位置background-position

background-position:10px 100px;

// 代表坐標(biāo)x馏段，y軸
復(fù)制代碼

4. 背景圖片重復(fù)background-repeat

background-repeat:no-repeat

// no-repeat 設(shè)置圖像不重復(fù)，常用

// round 自動縮放直到適應(yīng)并填充滿整個容器

// space 以相同的間距平鋪且填充滿整個容器
復(fù)制代碼

5. 背景圖片定位background-attachment

background-attachment:fixed

// 背景圖像是否固定或者隨著頁面的其余部分滾動

// background-attachment的值可以是scroll（跟隨滾動）践瓷，fixed（固定）
復(fù)制代碼

6. background縮寫

background:#ff0000 url(bg01.jpg) no-repeat fixed center
復(fù)制代碼

字體樣式

1. 字體族font-family

font-family:"微軟雅黑","黑體";
復(fù)制代碼

2. 字體大小font-size

font-size:12px;
復(fù)制代碼

網(wǎng)頁默認(rèn)字體大小是16px

3. 字體粗細(xì)font-weight

font-weight:400;

normal（默認(rèn)）
bold（加粗）
bolder（相當(dāng)于<strong>和<b>標(biāo)簽）
lighter （常規(guī)）
100 ~ 900 整百（400=normal院喜，700=bold）
復(fù)制代碼

4. 字體顏色color

顏色的英文單詞color:red;

十六進(jìn)制色：color: #FFFF00;

RGB(紅綠藍(lán))color:rgb(255,255,0)

RGBA（紅綠藍(lán)透明度）A是透明度在0~1之間取值。color:rgba(255,255,0,0.5)
復(fù)制代碼

5. 字體斜體font-style

font-style:italic

normal 文本正常顯示

italic 文本斜體顯示

oblique 文本傾斜顯示
復(fù)制代碼

文本屬性

1. 行高line-height

line-height:50px;
復(fù)制代碼

可以將父元素的高度撐起來

2. 文本水平對齊方式text-align

left 左對齊
center 文字居中
right 右對齊
復(fù)制代碼

3. 文本所在行高的垂直對齊方式vertical-align

baseline 默認(rèn)

sub 垂直對齊文本的下標(biāo)晕翠，和<sub>標(biāo)簽一樣的效果

super 垂直對齊文本的上標(biāo)喷舀，和<sup>標(biāo)簽一樣的效果

top 對象的頂端與所在容器的頂端對齊

text-top 對象的頂端與所在行文字頂端對齊

middle 元素對象基于基線垂直對齊

bottom 對象的底端與所在行的文字底部對齊

text-bottom 對象的底端與所在行文字的底端對齊
復(fù)制代碼

4. 文本縮進(jìn)text-indent

text-indent:2em;
復(fù)制代碼

通常用在段落開始位置的首行縮進(jìn)

5. 字母之間的間距letter-spacing
6. 單詞之間間距word-spacing
7. 文本的大小寫text-transform

capitalize 文本中的每個單詞以大寫字母開頭。

uppercase 定義僅有大寫字母崖面。

lowercase 定義僅有小寫字母元咙。
復(fù)制代碼

8. 文本的裝飾text-decoration

none 默認(rèn)。
underline 下劃線巫员。
overline 上劃線庶香。
line-through 中線。
復(fù)制代碼

9. 自動換行word-wrap

word-wrap: break-word;
復(fù)制代碼

基本樣式

1. 寬度width

width:200px;
定義元素的寬度
復(fù)制代碼

2. 高度height

height:300px
元素默認(rèn)沒有高度
需要設(shè)置高度
可以不定義高度简识，讓元素的內(nèi)容將元素?fù)胃?復(fù)制代碼

3. 鼠標(biāo)樣式cursor

定義鼠標(biāo)的樣式cursor:pointer

default默認(rèn)
pointer小手形狀
move移動形狀
復(fù)制代碼

4. 透明度opacity

opacity:0.3
復(fù)制代碼

透明度的值0~1之間的數(shù)字赶掖，0代表透明，1代表完全不透明

透明的元素七扰，只是看不到了奢赂，但是還占據(jù)著文檔流
復(fù)制代碼

5. 可見性visibility

visibility:hidden;

visible 元素可見

hidden 元素不可見

collapse 當(dāng)在表格元素中使用時，此值可刪除一行或一列颈走，不會影響表格的布局膳灶。
復(fù)制代碼

6. 溢出隱藏 overflow

設(shè)置當(dāng)對象的內(nèi)容超過其指定高度及寬度時如何顯示內(nèi)容

visible 默認(rèn)值，內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外轧钓。
hidden 內(nèi)容會被修剪序厉，并且其余內(nèi)容是不可見的。
scroll 內(nèi)容會被修剪毕箍，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容弛房。
auto 如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容而柑。
復(fù)制代碼

7. 邊框顏色outline

input文本輸入框自帶邊框文捶，且樣式丑陋，我們可以通過outline修改邊框

outline:1px solid #ccc;

outline:none清除邊框
復(fù)制代碼

樣式重置

早期的網(wǎng)頁沒有css樣式媒咳，為了界面美觀粹排，很多元素自帶margin、padding等樣式伟葫，但這些樣式在不同瀏覽器解析的值都不一樣恨搓，需要將css樣式重置，保證在不同瀏覽器顯示一致筏养。

清除元素的margin和padding
去掉自帶的列表符
去掉自帶的下劃線
復(fù)制代碼

盒模型樣式

1. 塊狀元素想帅、內(nèi)聯(lián)元素和內(nèi)聯(lián)塊狀元素仙蚜。

塊級元素:

• 每個塊級元素都從新的一行開始未玻，并且其后的元素也另起一行颅和。
• 元素的高度、寬度茎辐、行高以及頂和底邊距都可設(shè)置宪郊。
• 元素寬度在不設(shè)置的情況下，是它本身父容器的100%拖陆，除非設(shè)定一個寬度弛槐。

行內(nèi)元素:

• 和其他元素都在一行上
• 元素的高度、寬度依啰、行高及頂部和底部邊距不可設(shè)置
• 元素的寬度就是它包含的文字或圖片的寬度乎串，不可改變。

行內(nèi)塊狀元素:

• 和其他元素都在一行上
• 元素的高度速警、寬度叹誉、行高以及頂和底邊距都可設(shè)置。

2. 元素分類轉(zhuǎn)換display

block：將元素轉(zhuǎn)換為塊級元素

inline：將元素裝換為行級元素

inline-block：將元素轉(zhuǎn)換為內(nèi)聯(lián)塊元素

none: 將元素隱藏

3. 描邊border

border:2px solid #f00;
復(fù)制代碼

線條的樣式：

dashed（虛線）| dotted（點線）| solid（實線）闷旧。
復(fù)制代碼

css樣式中允許只為一個方向的邊框設(shè)置樣式：

下描邊border-bottom:1px solid red;

上描邊border-top:1px solid red;

右描邊border-right:1px solid red;

左描邊border-left:1px solid red;
復(fù)制代碼

4. 間距margin

div{margin:20px 10px 15px 30px;}
復(fù)制代碼

5. 內(nèi)填充padding

padding:10px
復(fù)制代碼

浮動float

1. 浮動原理

• 浮動使元素脫離文檔普通流长豁，漂浮在普通流之上的。

• 浮動元素依然按照其在普通流的位置上出現(xiàn)忙灼，然后盡可能的根據(jù)設(shè)置的浮動方向向左或者向右浮動匠襟，直到浮動元素的外邊緣遇到包含框或者另一個浮動元素為止，且允許文本和內(nèi)聯(lián)元素環(huán)繞它。

• 浮動會產(chǎn)生塊級框（相當(dāng)于設(shè)置了display:block）宅此，而不管該元素本身是什么机错。

2. 清除浮動帶來的影響

clear 清除浮動：

none : 不清除（默認(rèn)值）爬范。

left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許兩邊有浮動對象
復(fù)制代碼

3. 利用偽類實現(xiàn)清除浮動

.clearFix {
    content="";
    display:block;
    width:0;
    height:0;
    clear:both;
}
復(fù)制代碼

定位position

1. 定位功能可以讓布局變的更加自由父腕。
2. 層模型--絕對定位（相對于父類）

絕對定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間青瀑。這一點與相對定位不同璧亮，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置斥难。

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}
復(fù)制代碼

如下圖所示：

如果想為元素設(shè)置層模型中的絕對定位枝嘶，需要設(shè)置position:absolute(絕對定位)，這條語句的作用將元素從文檔流中拖出來哑诊，然后使用left群扶、right、top镀裤、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進(jìn)行絕對定位竞阐。如果不存在這樣的包含塊，則相對于body元素暑劝，即相對于瀏覽器窗口骆莹。

3. 層模型--相對定位（相對于原位置）

相對定位是一個非常容易掌握的概念。如果對一個元素進(jìn)行相對定位担猛，它將出現(xiàn)在它所在的位置上幕垦。然后，可以通過設(shè)置垂直或水平位置傅联，讓這個元素“相對于”它的起點進(jìn)行移動先改。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}
復(fù)制代碼

如下圖所示：

如果想為元素設(shè)置層模型中的相對定位，需要設(shè)置position:relative（相對定位）蒸走，它通過left仇奶、right、top载碌、bottom屬性確定元素在正常文檔流中的偏移位置猜嘱。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于原位置移動嫁艇，移動的方向和幅度由left朗伶、right、top步咪、bottom屬性確定论皆，偏移前的位置保留不動。

4. 層模型--固定定位（相對于網(wǎng)頁窗口）

position:fixed
復(fù)制代碼

與absolute定位類型類似，但它的相對移動的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身点晴。由于視圖本身是固定的感凤，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置粒督，或改變?yōu)g覽器窗口的顯示大小陪竿，因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個位置，不會受文檔流動影響屠橄，這與background-attachment:fixed屬性功能相同族跛。

瀏覽器默認(rèn)樣式

1. 頁邊距

IE默認(rèn)為10px，通過body的margin屬性設(shè)置

要清除頁邊距一定要清除這兩個屬性值

body { margin:0; padding:0;}
復(fù)制代碼

2. 段間距

IE默認(rèn)為19px锐墙，通過p的margin-top屬性設(shè)置

p默認(rèn)為塊狀顯示礁哄，要清除段間距，一般可以設(shè)置

p { margin-top:0; margin-bottom:0;}
復(fù)制代碼

html5

HTML5 的優(yōu)勢

1. 解決跨瀏覽器溪北，跨平臺問題
2. 增強(qiáng)了 web 的應(yīng)用程序

HTML5 廢棄元素

frame frameset noframes
acronym applet dir
basefont big center font strike tt
復(fù)制代碼

HTML5 新增元素

<header>    用于定義文檔或節(jié)的頁眉

<footer>    用于定義文檔或節(jié)的頁腳

<article>   用于定義文檔內(nèi)的文章

<section>   用于定義文檔中的一個區(qū)域（或節(jié)）

<aside> 用于定義與當(dāng)前頁面或當(dāng)前文章的內(nèi)容幾乎無關(guān)的附屬信息

<figure>    用于定義一段獨立的引用桐绒，經(jīng)常與說明(caption)<figcaption>配合使用，通常用在主文中的圖片之拨，代碼茉继，表格等。

<figcaption>    用于表示是與其相關(guān)聯(lián)的引用的說明/標(biāo)題敦锌，用于描述其父節(jié)點<figure>元素里的其他數(shù)據(jù)馒疹。

<hgroup>    用于對多個<h1>~<h6>元素進(jìn)行組合

<nav>   用于定義頁面上的導(dǎo)航鏈接部分

<mark>  用于定義高亮文本

<time>  用于顯示被標(biāo)注的內(nèi)容是日期或時間（24小時制）

<meter> 用于表示一個已知最大值和最小值的計數(shù)器

<progress>  用于表示一個進(jìn)度條

<audio> 定義聲音，比如音樂或其他音頻流

<video> 定義視頻乙墙，比如電影片段或其他視頻流
復(fù)制代碼

HTML5 表單相關(guān)元素和屬性

input新增type類型

color   用來創(chuàng)建一個允 許用戶使用顏色選擇器颖变，或輸入兼容 CSS 語法的顏色代碼的區(qū)域

time    生成一個時間選擇器

datetime    生成一個 UTC 的日期時間選擇器

datetime-local  生成一個本地化的日期時間選擇器

date    顯示一個日期輸入?yún)^(qū)域，可同時使用日期選擇器听想，結(jié)果值包括年腥刹、月、日汉买，不包括時間衔峰。

month   生成一個月份選擇器，它結(jié)果值包括年份和月份蛙粘， 但不包括日期

week    生成一個選擇的幾周的選擇器

email   生成一個 E-mail 輸入框

number  生成一個只能輸入數(shù)字的輸入框

range   生成一個拖動條垫卤，通過拖動條，使得用戶只能輸入指定范圍出牧，指定步長的值

search  生成一個專門用于輸入搜索關(guān)鍵字的文本框

tel 生成一個只能輸入電話號碼的文本框

url 生成一個 URL 輸入框
復(fù)制代碼

HTML5 input新增屬性

placeholder 主要用在文本框穴肘，規(guī)定可描述輸入字段預(yù)期值的簡短的提示信息

autocomplete    為了完成表單的快速輸入，一般瀏覽器提供了自動補(bǔ)全的功能選擇

autofocus   當(dāng)為某個表單控件增加該屬性后舔痕，當(dāng)瀏覽器打開這個頁面评抚， 這個表單控件會自動獲得焦點

list    為文本框指定一個可用的選項列表豹缀，當(dāng)用戶在文本框中輸 入信息時，會根據(jù)輸入的字符慨代，自動顯示下拉列表提示邢笙，供用戶從中選擇

pattern 用于驗證表單輸入的內(nèi)容，通常 HTML5 的 type 屬性侍匙，比如 email氮惯、tel、 number丈积、url 等筐骇，已經(jīng)自帶了簡單的數(shù)據(jù)格式驗證功能了，加上 pattern 屬性后江滨， 驗證會更加高效

novalidate  當(dāng)提交表單時不對其進(jìn)行驗證

required    必需在提交之前填寫輸入字段

spellcheck  拼寫檢查，為<input>厌均、<textarea>等元素新增屬性

formenctype 規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對表單數(shù)據(jù)進(jìn)行編碼

formtarget  帶有兩個提交按鈕的表單唬滑，會提交到不同的目標(biāo)窗口

multiple    一次上傳多個文件

maxlength wrap  <textarea>新增<br />maxlength：用于規(guī)定文本區(qū)域最大字符數(shù)。<br />wrap：是否包含換號符（soft/ hard）
復(fù)制代碼

css3

CSS3 新增選擇器

1. 兄弟選擇器

元素 1 ~ 元素 2 第1個元素之后棺弊，所有的元素2都會被選擇晶密，且這些元素和第一個元素?fù)碛型粋€父元素（兩個元素之間不一定要相鄰）。

2. 屬性選擇器

• E[attribute^=value] 用于選取帶有以指定值開頭的屬性值的元素
• E[attribute$=value] 用于選取屬性值以指定值結(jié)尾的元素
• E[attribute*=value] 用于選取屬性值中包含指定值的元素模她，位置不限稻艰，也不限制整個單詞

3. 偽類選擇器

• :root 選擇文檔的根元素，HTML 里侈净，永遠(yuǎn)是<html>元素
• :last-child 向元素添加樣式尊勿，且該元素是它的父元素的最后一個子元素
• :nth-child(n) 向元素添加樣式，且該元素是它的父元素的第 n 個子元素
• :nth-last-child(n) 向元素添加樣式畜侦，且該元素是它的父元素的倒數(shù)第 n 個子 元素
• :only-child 向元素添加樣式元扔，且該元素是它的父元素的唯一子元素
• :first-of-type 向元素添加樣式，且該元素是同級同類型元素中第一個元 素
• :last-of-type 向元素添加樣式旋膳，且該元素是同級同類型元素中最后一個 元素
• :nth-of-type(n) 向元素添加樣式澎语，且該元素是同級同類型元素中第 n 個元 素
• :nth-last-of-type(n) 向元素添加樣式，且該元素是同級同類型元素中倒數(shù)第 n 個元素
• :only-of-type 向元素添加樣式验懊，且該元素是同級同類型元素中唯一的元素
• :empty 向沒有子元素（包括文本內(nèi)容）的元素添加樣式

4. 偽元素選擇器

• :enabled 向當(dāng)前處于可用狀態(tài)的元素添加樣式擅羞，通常用于定義表單的樣式或者超鏈接的樣式
• :disabled 向當(dāng)前處于不可用狀態(tài)的元素添加樣式，通常用于定義表單的 樣式或者超鏈接的樣式
• :checked 向當(dāng)前處于選中狀態(tài)的元素添加樣式
• :not(selector) 向不是 selector 元素的元素添加樣式
• :target 向正在訪問的錨點目標(biāo)元素添加樣式
• ::selection 向用戶當(dāng)前選取內(nèi)容所在的元素添加樣式

CSS3 新增屬性

1. 新增背景屬性

• background-clip 設(shè)置背景覆蓋范圍 border-box/paddingbox/content-box
• background-origin 設(shè)置背景覆蓋的起點 border-box/paddingbox/content-box
• background-size 設(shè)置背景的大小 cover/contain/長度/百分比

2. 新增的字體文本相關(guān)屬性

• text-overflow 設(shè)置當(dāng)文本溢出元素框時處理方式 clip/ellipsis
• word-wrap 規(guī)定單詞的換行方式 normal/break-word
• word-break 規(guī)定自動換行的方式 normal/break-all/keep-all

3. 新增盒模型屬性

• box-shadow 陰影 h-shadow v-shadow <br />blur spread color inset
• resize 調(diào)整尺寸 none/both/horizontal
• outline-offset 輪廓的偏移量 length/inherit

新增變形動畫屬性

1. transform

• translate(x,y)
• rotate(angle)
• scale(x,y)
• skew(angleX ,angleY)

2. transform-origin

表示元素旋轉(zhuǎn)的中心點义图，默認(rèn)值為 50% 50%减俏。

• 第一個值表示元素旋轉(zhuǎn)中心點的水平位置，它還可以賦值 left歌溉、right垄懂、center骑晶、長度、百分比

• 第二個值表示元素旋轉(zhuǎn)中心點的垂直位置草慧，它還可以賦值 top桶蛔、bottom、 center漫谷、長度仔雷、百分比。

3D 變形屬性

1. transform 3D函數(shù)

transform 增加了三個變形函數(shù)：

• rotateX：表示元素沿著 x 軸旋轉(zhuǎn)舔示。
• rotateY：表示元素沿著 y 軸旋轉(zhuǎn)碟婆。
• rotateZ：表示元素沿著 z 軸旋轉(zhuǎn)。

2. transform-style用來設(shè)置嵌套的子元素在 3D 空間中顯示效果惕稻。

3. perspective設(shè)置成透視效果竖共，透視效果為近大遠(yuǎn)小。

4. perspective-origin設(shè)置 3D 元素所基于的 x 軸和 y 軸俺祠，改變 3D 元素的底部位置公给，該屬性取值同 transform-origin，默認(rèn)值為 50% 50%蜘渣。

5. backface-visibility用來設(shè)置當(dāng)元素背面面向屏幕時是否可見淌铐，通常用于設(shè)置 不希望用戶看到旋轉(zhuǎn)元素的背面。

它的屬性值有visible（背面可見蔫缸，默認(rèn)值）腿准、 hidden（背面不可見）兩個。

CSS3 的過渡屬性

• transition-delay 設(shè)置過渡的延遲時間
• transition-duration 設(shè)置過渡的過渡時間
• transition-timing-function 設(shè)置過渡的時間曲線
• transition-property 設(shè)置哪條 CSS 使用過渡
• transition 一條聲明設(shè)置 所有過渡屬性

CSS3 的動畫屬性

1. animation

• @keyframes 定義動畫選擇器
• animation-name 使用@keyframes 定義的動畫
• animation-delay 設(shè)置動畫的持續(xù)動畫時間
• animation-timing-function 設(shè)置動畫的時間曲線
• animation-iteration-count 設(shè)置動畫播放次數(shù)
• animation-direction 設(shè)置動畫反向播放
• animation-play-state 設(shè)置動畫播放狀態(tài)
• transition 一條聲明設(shè)置所有動畫屬性

CSS3 新增多列屬性

• column-count 設(shè)置元素應(yīng)該被分隔的列數(shù)
• column-width 設(shè)置列的寬度
• columns 一條聲明設(shè)置列寬和列數(shù) column
• column-gap 設(shè)置列之間的間隔
• column-span 設(shè)置元素應(yīng)該橫跨的列數(shù)
• column-rule-style 設(shè)置列之間間隔的樣式
• column-rule-color 設(shè)置列之間間隔的顏色
• column-rule-width 設(shè)置列之間間隔的寬度
• column-rule 一條聲明設(shè)置列之間間 隔所有屬性

CSS3新增單位

px拾碌、em吐葱、rem、vh倦沧、 vw和% 移動端長度單位

使用CSS單位px唇撬、em、rem展融、vh窖认、 vw等實現(xiàn)頁面布局。

• px：絕對單位告希，頁面按精確像素展示
• em：相對單位扑浸，基準(zhǔn)點為父節(jié)點字體的大小，如果自身定義了font-size按自身來計算（瀏覽器默認(rèn)字體是16px）燕偶，整個頁面內(nèi)1em不是一個固定的值喝噪。

em會根據(jù)父級元素的大小而變化，但是如果嵌套了多個元素指么，要計算它的大小酝惧，是很容易出錯的榴鼎，這樣就引申出了rem。

• rem：相對單位晚唇，可理解為”root em”, 相對根節(jié)點html的字體大小來計算巫财，CSS3新加屬性。
• %：% 百分比哩陕，相對長度單位平项，相對于父元素的百分比值
• vw、vh悍及、vmin闽瓢、vmax 主要用于頁面視口大小布局

vw：viewpoint width，視窗寬度心赶，1vw等于視窗寬度的1%扣讼。

vh：viewpoint height，視窗高度园担，1vh等于視窗高度的1%届谈。

• vmin：vw和vh中較小的那個。
• vmax：vw和vh中較大的那個弯汰。

彈性盒模型

彈性盒模型的語法基礎(chǔ)概念

任何一個容器都可以指定彈性布局

JavaScript

JavaScript基礎(chǔ)

1. 外部引入js文件：通過<script src="main.js"></script>
2. 關(guān)鍵詞

3. 變量名大小寫敏感
4. 命名規(guī)范

JavaScript數(shù)據(jù)類型

1. 字符串(String)
2. 數(shù)字（Number）
3. 布爾值（Boolean）
4. 未定義（Undefined）

//undefined有兩種結(jié)果
//1、真的沒定義
alert(typeof dada); //undefined

//2湖雹、定義了咏闪，但是沒有放東西進(jìn)去
var dada;
alert(dada); //undefined
復(fù)制代碼

undefined，表示未定義或只聲明未給值的變量

5. 對象（Object）

js中內(nèi)置了如下的對象：

• Object 是所有JS對象的超類(基類）摔吏，JS中的所有對象都是繼承自O(shè)bject對象的
• Array 數(shù)組對象 定義數(shù)組屬性和方法
• Number 數(shù)字對象
• Boolean 布爾對象 布爾值相關(guān)
• Error 錯誤對象 處理程序錯誤
• Function 函數(shù)對象 定義函數(shù)屬性和方法
• Math 數(shù)學(xué)對象
• Date 日期對象
• RegExp 對象正則表達(dá)式對象 定義文本匹配與篩選規(guī)則
• String 字符串對象 定義字符串屬性和方法

算術(shù)運算

var y = 3;
復(fù)制代碼

強(qiáng)制轉(zhuǎn)換

1. 字符串轉(zhuǎn)數(shù)字parseInt() parseFloat() isNaN()
2. 數(shù)字轉(zhuǎn)為字符串toString()

賦值運算

1. 復(fù)合的賦值運算符 += -= *= /= %=

關(guān)系運算

1. 關(guān)系運算：> < <= >= != == === ==和=== !=和!==

“=”鸽嫂、“==”、“===”有什么區(qū)別征讲？

1. = 是賦值符號
2. == 忽略數(shù)據(jù)類型的判斷 是否相等
3. === 數(shù)值和數(shù)據(jù)類型都要相等才判斷為相等

邏輯運算

• 邏輯與&&
• 邏輯或 ||
• 邏輯非 !
• 復(fù)合邏輯表達(dá)式

三元運算

條件運算符据某？：

三元運算符：(比較表達(dá)式)？結(jié)果1:結(jié)果2
復(fù)制代碼

分支循環(huán)

程序運行的三大結(jié)構(gòu)：順序結(jié)構(gòu)诗箍、選擇結(jié)構(gòu)癣籽、循環(huán)結(jié)構(gòu)

• 單分支選擇：if語句
• 雙分支選擇：if-else語句
• 多分支語句：if-else if-else 語句

switch

語法格式

switch(num){ //表達(dá)式
  case 1:
    //執(zhí)行代碼塊1
    break;  //中斷執(zhí)行，跳出
    ...
  default:  //默認(rèn)滤祖，其他都不是的情況下執(zhí)行
    //執(zhí)行代碼塊
    break;
}

//強(qiáng)調(diào)：break非常重要筷狼，如果不加break的話，程序會一直繼續(xù)往下執(zhí)行匠童；
復(fù)制代碼

while

語法格式:

while循環(huán)的特點：不知道具體執(zhí)行的次數(shù)時埂材，使用最合適

while(條件表達(dá)式){
     //要重復(fù)執(zhí)行的代碼段 - 循環(huán)體
}
復(fù)制代碼

do-while

語法格式：

do{
  //循環(huán)體
}while(循環(huán)條件判斷);
復(fù)制代碼

• do-while是先執(zhí)行循環(huán)體，再檢測循環(huán)條件汤求。
• do-while能保證循環(huán)體至少執(zhí)行一次俏险。
• 其他循環(huán)無法保證循環(huán)至少執(zhí)行一次严拒。

for

for(1循環(huán)變量初始化；2循環(huán)條件判斷；4循環(huán)變量的修改){
  3循環(huán)體
}
復(fù)制代碼

break和continue

1. break 退出循環(huán)
2. continue 跳過本次循環(huán)，繼續(xù)下一次循環(huán)

數(shù)組

1. 數(shù)組定義

var arr = new Array();
var arr = [];
復(fù)制代碼

2. 字面量方式定義

var arr = ["1","2"];
復(fù)制代碼

3. 向數(shù)組賦值

arr[0] = "1";
arr[1] = "2";
alert(arr[0]+","+arr[1]);
復(fù)制代碼

4. 數(shù)組索引

arr[0]+","+arr[1]
復(fù)制代碼

5. 數(shù)組長度

//語法
arr.length

//最后一個元素的索引
arr.length-1
復(fù)制代碼

數(shù)組方法

1. indexOf

數(shù)組可以通過indexOf()來搜索一個指定的元素的位置篙螟，如未找到返回 -1

2. concat

concat()方法把當(dāng)前的 數(shù)組 和 另一個 數(shù)組連接起來摩钙，并返回一個新的 數(shù)組

var newArr = arr1.concat(arr2,"dada");
復(fù)制代碼

3. push和pop

push()向數(shù)組的末尾添加若干元素，pop() 則把 數(shù)組的最后一個元素刪除掉

arr.push("a","b");
console.log(arr);

arr.pop();
console.log(arr);

//空數(shù)組繼續(xù)pop不會報錯脊框，而是返回undefined
復(fù)制代碼

4. unshift和shift

unshift() 向數(shù)組前面添加若干元素，shift() 則把數(shù)組的第一個元素刪除掉

arr.unshift("a","b");
arr.shift();
復(fù)制代碼

5. slice

slice() 截取數(shù)組的部分元素，然后返回一個新的數(shù)組

console.log(arr.slice(0,3)); //從索引0開始劈彪，到索引3結(jié)束，但不包括3

console.log(arr.slice(3));  //從索引3開始到結(jié)束
復(fù)制代碼

如果不給slice()傳遞任何參數(shù)顶猜，就會從頭到尾截取所有元素沧奴。利用這一點，可以很容易的復(fù)制一份新的數(shù)組

6. sort

sort() 可以對當(dāng)前數(shù)組排序

var arr = ["b","c","a"];
arr.sort();
arr;//["a","b","c"]
復(fù)制代碼

7. reverse

reverse() 把整個數(shù)組的元素給掉個個

8. join

join() 方法把數(shù)組的每個元素用指定的字符串連接起來

var arr = ["a","b","c"];
arr.join("-"); //"a-b-c"
復(fù)制代碼

9. splice

可以從指定的索引開始刪除若干元素长窄，然后再從該位置添加若干元素

二維數(shù)組

var arr = [[1,2,3],["a","b","c"],"dadaqianduan"];
var x = arr[1][1]; //b
復(fù)制代碼

字符串

1. 字符串屬性length-字符串的長度屬性
2. slice()

slice(start[,end])滔吠，start--開始索引 end--結(jié)束索引
復(fù)制代碼

3. substr()

substr(start[,length])，start：開始挠日，取length個字符
復(fù)制代碼

4. split()

split([separator[,limit]])疮绷，按條件分割字符串，返回數(shù)組

5. indexOf()

在父串中首次出現(xiàn)的位置嚣潜，從0開始冬骚！沒有返回-1

6. lastIndexOf()

倒序查找

7. charAt(index)

charAt(index) 指定索引的字符

8. toLowerCase()

轉(zhuǎn)小寫

9. toUpperCase()

轉(zhuǎn)大寫

正則表達(dá)式

創(chuàng)建正則表達(dá)式

var reg = new RegExp("a","i");
// 將匹配字母a，第二個參數(shù)i,表示匹配時不分大小寫
復(fù)制代碼

元字符

模式修飾符

正則方法

1. test方法

檢索字符串中指定的值懂算。

2. exec方法

該方法用于檢索字符串中的正則表達(dá)式的匹配只冻，該函數(shù)返回一個數(shù)組，其中存放匹配的結(jié)果计技。如果未找到匹配喜德，則返回值為 null。

支持正則的 String方法

js對象

定義對象

//使用new運算符
var obj = new Object();

//字面量
var obj={
    name:"dadaqianduan"垮媒，
    age:12,
    sex:"男"
}
復(fù)制代碼

對象的數(shù)據(jù)訪問

//用.語法
obj.name

//用[]語法
obj["name"]
復(fù)制代碼

JSON

json(JavaScript Object Notation)舍悯，是一種輕量級的數(shù)據(jù)交換格式。

var man = {
    "name":"dadaqianduan",
    "age":12,
    "sex":"男"
};
復(fù)制代碼

內(nèi)置對象

• Object 是所有JS對象的超類(基類）涣澡，JS中的所有對象都是繼承自O(shè)bject對象的
• Array 數(shù)組對象
• Number 數(shù)字對象
• Boolean 布爾對象
• Error 錯誤對象
• Function 函數(shù)對象
• Math 數(shù)學(xué)對象
• Date 日期對象
• RegExp 對象正則表達(dá)式對象
• String 字符串對象

Math 方法

• abs() 絕對值 （去除正負(fù)）
• random() 隨機(jī)數(shù)贱呐，0-1之間的隨機(jī)數(shù)，1不會出現(xiàn)
• round() 四舍五入
• floor(x) 下舍入(向下取整)
• ceil(x) 上舍入(向上取整)
• max(x,y) x 和 y 中的最大值
• min(x,y) x 和 y 中的最小值
• cos(x) x的余弦
• sin(x) x的正弦
• sqrt(x) 返回x的平方根
• pow(3,4) 返回3的4次方

Date 方法

• getFullYear() 返回 年（4位）
• getMouth() 返回 月（0--11）
• getDate() 返回 日期
• getDay() 返回 星期 （0-6）
• getHours() 返回 小時
• getMinutes() 返回 分鐘
• getSeconds() 返回秒
• getTime() 返回1970年1月1日午夜到指定日期（字符串）的毫秒數(shù)
• setFullYear() 設(shè)置 年份
• setMouth() 設(shè)置 月
• setDate() 設(shè)置 天
• setHours() 設(shè)置小時
• setMinutes() 設(shè)置 分鐘
• setSeconds() 設(shè)置 秒
• setTime() 使用毫秒的形式設(shè)置時間對象

//判斷閏年
function runYear(year){
    if(year%4==0 && year%100!=0 || year%400==0){
        return true;
    }
};
復(fù)制代碼

面向?qū)ο笫且环N編程思想

1. 類是一個抽象的概念
2. 對象：具體的事物
3. 類是對象的抽象入桂，對象是類的具體實例
4. 類不占用內(nèi)存奄薇，對象占用內(nèi)存空間
5. 對象的訪問 聲明對象
6. 遍歷對象 – for in 循環(huán)

定義對象

1. 字面量創(chuàng)建
2. 工廠模式

// 工廠模式中的函數(shù)，首字母大寫

function Cat(n,c){
    return {
        name:n,
        color:c,
        say:function(){
          alert("dadaqianduan")
        }
    }
}
復(fù)制代碼

3. 構(gòu)造函數(shù)

Javascript提供了一個構(gòu)造函數(shù)（Constructor）模式抗愁。

所謂"構(gòu)造函數(shù)"馁蒂，其實就是一個普通函數(shù)呵晚，但是內(nèi)部使用了this變量。

對構(gòu)造函數(shù)使用new運算符沫屡，就能生成實例饵隙，并且this變量會綁定在實例對象上。

構(gòu)造函數(shù)首字母大寫

構(gòu)造函數(shù)中的this沮脖，指向的 實例化的對象

function Cat(n,c){
  this.name=n;
  this.color=c;
}
復(fù)制代碼

生成實例對象

var cat1 = new Cat("dadaqianduan","黃色")

// 自動含有一個constructor屬性金矛，指向它們的構(gòu)造函數(shù)
復(fù)制代碼

實例：自動含有一個constructor屬性，指向它們的構(gòu)造函數(shù)

alert(cat1.constructor == Cat); //true
復(fù)制代碼

4. Javascript還提供了一個instanceof運算符

驗證 原型對象 與 實例對象 之間的關(guān)系勺届。

var txt = 'dadaqianduan';
alert(txt instanceof String); //false

var age = 123123;
alert(age instanceof Number); //false

var res = /\d/;
alert(res instanceof RegExp); //true

var arr = [];
alert(arr instanceof Array); //true
復(fù)制代碼

原型和原型鏈

構(gòu)造函數(shù)都有一個prototype屬性驶俊，指向 另一個對象 。這個對象的 所有屬性和方法免姿，都會被構(gòu)造函數(shù)的實例繼承饼酿。

所有的函數(shù)都是 Function 的實例。

在構(gòu)造函數(shù)上都有一個 原型 屬性prototype胚膊，prototype也是一個對象故俐；這個對象上有一個 constructor 屬性，該屬性指向的就是構(gòu)造函數(shù)紊婉。

實例對象上有一個_proto_屬性药版，該屬性也指向原型對象，該屬性不是標(biāo)準(zhǔn)屬性喻犁，不可以用在編程中刚陡，該屬性用于瀏覽器內(nèi)部使用。

constructor

1. constructor是構(gòu)造函數(shù) 創(chuàng)建的實例的屬性株汉，該屬性的作用是 指向 創(chuàng)建當(dāng)前對象的 構(gòu)造函數(shù)。

son.constructor == parent; // true
復(fù)制代碼

每個原型都有一個constructor屬性歌殃，指向該關(guān)聯(lián)的構(gòu)造函數(shù)乔妈。

function Person() {
}

console.log(Person===Person.prototype.constructor)  //true
復(fù)制代碼

關(guān)系圖：

[圖片上傳中...(image-1fba1a-1613637939883-5)]

區(qū)分一下普通對象和函數(shù)對象

function f1(){};
var f2 = function(){};
var f3 = new function(){};

var o1 = {};
var o2 = new Object();
var o3 = new f1();

console.log(typeof Object); //function
console.log(typeof Function);//function
console.log(typeof f1) //function
console.log(typeof f2) // function
console.log(typeof f3) //function
console.log(typeof o1) //object
console.log(typeof o2) //object
console.log(typeof o3)// object
復(fù)制代碼

1. 在JavaScript中，原型是一個對象氓皱，原型的作用是 實現(xiàn)對象的繼承路召。
2. 在JavaScript中的所有函數(shù)對象中，都存在一個屬性波材，prototype股淡，該屬性對應(yīng)當(dāng)前對象的原型。
3. 所有的JavaScript對象廷区，都存在一個_proto_屬性唯灵，_proto_屬性指向?qū)嵗龑ο蟮臉?gòu)造函數(shù)的原型。

var p = new Person(); // 實例對象

console.log(p._proto_ === Person.prototype); // true
復(fù)制代碼

p是實例對象, Person是p的構(gòu)造函數(shù)隙轻。 p的_proto_屬性 指向 構(gòu)造函數(shù) Person的原型埠帕。

js是如何通過原型進(jìn)行繼承的：

var parent = function(name) {
 this.name = name;
}

parent.prototype.getName = function() {
 return this.name;
}

var son = new parent("dadaqianduan");

console.log(son.getName()); // dadaqianduan
復(fù)制代碼

son繼承了parent的原型中的函數(shù)屬性getName

原型鏈

除了Object的prototype的原型是null外垢揩，所有的對象 和 原型 都有自己的原型，對象的原型 指向 原型對象敛瓷。

在層級多的關(guān)系中叁巨，多個原型層層相連 則 構(gòu)成了 原型鏈。

在查找一個對象的屬性時呐籽，如當(dāng)前對象找不到該屬性锋勺，就會沿著原型鏈一直往上查找，直到找到為止狡蝶，如果到了原型鏈頂端庶橱，沒找到，則返回undefined

原型

1. 所有引用類型都有一個__proto__屬性
2. 所有函數(shù)都有一個prototype屬性
3. 所有引用類型的__proto__屬性指向它構(gòu)造函數(shù)的prototype

構(gòu)造函數(shù)和實例原型之間的關(guān)系：

Person（構(gòu)造函數(shù)） 的 prototype 指向 Person.prototype

[圖片上傳中...(image-acdeff-1613637939883-4)]

4. __proto__

每個對象牢酵，除null外悬包，都有的屬性叫__proto__，這個屬性會指向該對象的原型馍乙。

function Person() {
}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true
復(fù)制代碼

關(guān)系圖：

關(guān)系圖：

關(guān)系圖：

image.png

梳理：

寫一個構(gòu)造函數(shù)Person布近，一般構(gòu)造函數(shù)區(qū)別與普通函數(shù)要求首字母大寫：

function Person(){}
復(fù)制代碼

prototype原型

原型 是 一個對象，在原型prototype 上定義的屬性丝格，通過“繼承”撑瞧，實現(xiàn) 實例 也有這個屬性。

繼承 是在 new操作符內(nèi)部實現(xiàn)的显蝌。

構(gòu)造函數(shù) 內(nèi)部 有個 prototype的屬性预伺，通過這個屬性就能訪問到 原型。

Person是構(gòu)造函數(shù)曼尊，Person.prototype是原型酬诀。

5. 實例

有構(gòu)造函數(shù)，可以在原型上創(chuàng)建可繼承的屬性骆撇，通過new操作符創(chuàng)建實例：

function Person(){}

person = new Person()

da = person instanceof Person // 檢查person是否是Person的實例

da // true

// 繼承

function Person() {}

Person.prototype.name = 'dadaqianduan.cn'

person = new Person()

da = person.name // 實例繼承的屬性

da // 'dadaqianduan.cn'
復(fù)制代碼

6. proto

實例通過_proto_訪問到原型瞒御。

function Person() {}
Person.prototype.name = 'dadaqianduan.cn'

person = new Person()

da = person.__proto__ === Person.prototype

da // true
復(fù)制代碼

7. constructor構(gòu)造函數(shù)

原型也可以通過constructor訪問到構(gòu)造函數(shù)

function Person() {}
Person.prototype.name = 'dadaqianduan.cn'
person = new Person

da = Person.prototype.constructor === Person
da // true
復(fù)制代碼

小結(jié)

1. 所有引用類型（函數(shù)，數(shù)組神郊，對象）都擁有__proto__屬性肴裙。
2. 所有函數(shù)擁有prototype屬性。
3. 每個實例對象(Object)都有一個私有屬性涌乳，為__proto__指向它的構(gòu)造函數(shù)的原型對象(prototype)蜻懦。該原型對象也有一個自己的原型對象__proto__，層層向上直到一個對象的原型對象為null夕晓，null 沒有原型宛乃，并作為這個原型鏈中的最后一個環(huán)節(jié)。

常用的JavaScript設(shè)計模式

百度百科：

設(shè)計模式（Design pattern）是一套被反復(fù)使用、多數(shù)人知曉的烤惊、經(jīng)過分類編目的乔煞、代碼設(shè)計經(jīng)驗的總結(jié)。

使用設(shè)計模式是為了可重用代碼柒室、讓代碼更容易被他人理解渡贾、保證代碼可靠性。 毫無疑問雄右，設(shè)計模式于己于他人于系統(tǒng)都是多贏的空骚；設(shè)計模式使代碼編制真正工程化；設(shè)計模式是軟件工程的基石脈絡(luò)擂仍，如同大廈的結(jié)構(gòu)一樣囤屹。

單體模式

單體是一個用來劃分 命名空間并將一批相關(guān)的屬性和方法組織在一起的對象，如果它可以被實例化逢渔，那么它只能被實例化一次肋坚。

特點：

（1）可以來劃分命名空間，從而清除全局變量所帶來的危險肃廓。

（2）利用分支技術(shù)來來封裝瀏覽器之間的差異智厌。

（3）可以把代碼組織的更為一體，便于閱讀和維護(hù)盲赊。

工廠模式

工廠模式的定義：

提供創(chuàng)建對象的接口铣鹏，意思就是根據(jù)領(lǐng)導(dǎo)（調(diào)用者）的指示（參數(shù)），生產(chǎn)相應(yīng)的產(chǎn)品（對象）哀蘑。

1. 創(chuàng)建一個對象常常需要復(fù)雜的過程诚卸，所以不適合在一個復(fù)雜的對象中。
2. 創(chuàng)建對象可能會導(dǎo)致大量的重復(fù)代碼绘迁，也可能提供不了足夠級別的抽象合溺。

工廠就是把成員對象的創(chuàng)建工作轉(zhuǎn)交給一個外部對象，好處在于消除對象之間的耦合(也就是相互影響)缀台。

分類：

簡單工廠模式：使用一個類辫愉，通常為單體，來生成實例将硝。

復(fù)雜工廠模式定義：將其成員對象的實列化推到子類中，子類可以重寫父類接口方法以便創(chuàng)建的時候指定自己的對象類型屏镊。

父類只對創(chuàng)建過程中的一般性問題進(jìn)行處理依疼，這些處理會被子類繼承，子類之間是相互獨立的而芥，具體的業(yè)務(wù)邏輯會放在子類中進(jìn)行編寫律罢。

應(yīng)用場景：

以下幾種情景下工廠模式特別有用：

（1）對象的構(gòu)建十分復(fù)雜；

（2）需要依賴具體環(huán)境創(chuàng)建不同實例；

（3）處理大量具有相同屬性的小對象误辑。

單例模式

單例模式定義了一個對象的創(chuàng)建過程沧踏，此對象只有一個單獨的實例，并提供一個訪問它的全局訪問點巾钉。也可以說單例就是保證一個類只有一個實例翘狱，實現(xiàn)的方法一般是先判斷實例存在與否，如果存在直接返回砰苍，如果不存在就創(chuàng)建了再返回潦匈，這就確保了一個類只有一個實例對象。

使用閉包方式來實現(xiàn)單例:

var single = (function(){
    var unique;

    function getInstance(){
　　　　// 如果該實例存在赚导，則直接返回茬缩，否則就對其實例化
        if( unique === undefined ){
            unique = new Construct();
        }
        return unique;
    }

    function Construct(){
        // ... 生成單例的構(gòu)造函數(shù)的代碼
    }

    return {
        getInstance : getInstance
    }
})();
復(fù)制代碼

unique是返回對象的引用，而 getInstance是靜態(tài)方法獲得實例吼旧。Construct 是創(chuàng)建實例的構(gòu)造函數(shù)凰锡。

可以通過 single.getInstance() 來獲取到單例，并且每次調(diào)用均獲取到同一個單例圈暗。這就是 單例模式 所實現(xiàn)的效果掂为。

應(yīng)用場景：

1. 單例模式是一種常用的模式，有一些對象我們往往只需要一個厂置，比如全局緩存菩掏、瀏覽器的window對象。
2. 借助單例模式昵济，可以把代碼組織的更為一致智绸，方便閱讀與維護(hù)。

函數(shù)

函數(shù)的定義

// 使用關(guān)鍵字function 定義函數(shù)

// 定義函數(shù)访忿，吃飯
function dada(){
  console.log("點餐");
  console.log("拿筷子");
  console.log("吃東西")瞧栗；
}
復(fù)制代碼

局部變量和全局變量

1. 變量的作用域

• 函數(shù)體內(nèi)的變量：局部變量，僅在函數(shù)體內(nèi)可以使用
• 函數(shù)體外的變量：全局變量海铆，對全局可見

2. 局部變量

function da(){
  var dadada = "dada"迹恐；//局部變量
  alert(dadada);
}
da(); //調(diào)用
alert(dadada); //報錯訪問不到，函數(shù)體外對dadada不可見
復(fù)制代碼

3. 全局變量

var da = "我是全局變量";
function home(){
  var da = "我是局部變量";
  alert(da);
}
home();

-----------------------

var a=3;  //全局
function da(){
  alert(a); //3
  var b=5;
  alert(b);//5
}
da();
console.log(b); //報錯卧斟，訪問不到
復(fù)制代碼

典型錯誤殴边，不使用var聲明的變量也是全局變量（不建議這樣用）

function dada(){         
    da = "123";  //全局變量         
}         
dada();         
alert(da);         
復(fù)制代碼

返回值

return的含義

//理解返回值
function getNum(){
 return 2; //return的作用，將函數(shù)的結(jié)果返回給當(dāng)前函數(shù)名
}
var result = getNum(); //如果希望返回值保存珍语，就放在變量中锤岸；
console.log(result);  //2
復(fù)制代碼

return使用方法

• return只能返回一個數(shù)據(jù)
• 如果函數(shù)中沒有return，則返回undefined

return可以用來結(jié)束一個函數(shù)

function Fun(){
  console.log("helloweb");
  return;
  console.log("我還會執(zhí)行嗎板乙？");
}
Fun();
復(fù)制代碼

function fn(){
  for(var i=0;i<10;i++){
    if(i == 3){ //循環(huán)3次就return
        break;   
    }
    console.log("誰最帥是偷！")； //打印3次
  }
  return "看return會不會執(zhí)行我"； //return不執(zhí)行蛋铆，break執(zhí)行
}
復(fù)制代碼

匿名函數(shù)

//使用函數(shù)表達(dá)式定義函數(shù)

//say本質(zhì)上是一個指向函數(shù)對象的變量馋评，我們稱為函數(shù)變量
var say = function(){
    console.log("hello");
}；
say();

var oBtn = document.getElementById("box");
oBth.onclick = function(){
  alert("你點擊我啦");
}
復(fù)制代碼

自運行函數(shù)

示例：

function fn(){
  //這里是代碼
}
fn(); //運行fn函數(shù)

----------------------

var fn = function(){
  //這里是代碼
}
fn(); //運行fn函數(shù)

---------------------

//(fn)() 等價于 fn()
(function(){
    //這里是代碼
})()
復(fù)制代碼

閉包

閉包 (closure)有權(quán)訪問另外一個函數(shù)作用域中的變量的函數(shù)刺啦。

創(chuàng)建閉包的常見方式有：

• 在一個函數(shù)內(nèi)部創(chuàng)建另外一個函數(shù)留特，并且把這個函數(shù)return出去。
• 用函數(shù)為元素綁定事件洪燥，當(dāng)事件發(fā)生時磕秤，還可以操作該函數(shù)中的變量。

特性

1. 可以讀取其它函數(shù)內(nèi)部的變量
2. 讓這些變量的值始終保持在內(nèi)存中

示例：

//方式1----函數(shù)內(nèi)部return一個函數(shù)
function run(){
    var a=10;
    return function(){
        a++;
        console.log(a);
    };
};

var b=run();
//alert(b);   //b是一個函數(shù)

b();//可以訪問另外一個作用域中變量的函數(shù)
復(fù)制代碼

//方式2--函數(shù)內(nèi)部為綁定事件
function addClick(){
    var txt="abcd";
    document.getElementById('box').onclick=function(){
        alert(txt);
    }
};
addClick();
復(fù)制代碼

//方式3--函數(shù)內(nèi)部將變量作為回調(diào)函數(shù)的參數(shù)
function play(num,fn){
    if(num>10){
        return fn && fn(num);
    };
};

var ss=play(20,function(n){
    return n+1;
});

console.log(ss);
復(fù)制代碼

BOM

BOM概述

BOM（browser object model）瀏覽器對象模型

BOM提供了獨立于內(nèi)容而與瀏覽器窗口進(jìn)行交互的對象捧韵、載入頁面的相關(guān)信息市咆，其核心對象是window對象

BOM 沒有相關(guān)標(biāo)準(zhǔn)，每個瀏覽器都定義了自己的屬性再来，并且蒙兰，都有其自己對BOM的實現(xiàn)方式

W3C雖然沒有為BOM統(tǒng)一制定標(biāo)準(zhǔn),但是其中的窗口對象、導(dǎo)航對象等,因功能趨同,實際上已經(jīng)成為默認(rèn)的標(biāo)準(zhǔn)

window方法

• alert() 提示框
• confirm() 帶有確認(rèn) 取消 按鈕的提示框
• prompt() 帶有可輸入內(nèi)容的文本域的提示框
• setInterval() 間隔定時器芒篷，可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達(dá)式
• setTimeout() 超時定時器搜变，在指定的毫秒數(shù)后調(diào)用函數(shù)
• clearInterval() 清除間隔定時器
• clearTimeout() 清除超時定時器
• requestAnimationFrame 幀定時器

frames [ ] 框架集

把瀏覽器窗口分成幾個窗框，每個窗框同時取得多個URL地址针炉，顯示不同網(wǎng)頁內(nèi)容挠他。

history 歷史記錄

• window.history.go(1) 前進(jìn)（跳轉(zhuǎn)）
• window.history.go(-1) 后退（跳轉(zhuǎn)）
• window.history.forward() 前進(jìn)
• window.history.back() 后退

location 定位

• window.location. 頁面跳轉(zhuǎn)
• window.location.reload() 頁面重載

navigator 導(dǎo)航

window.navigator.userAgent 瀏覽器類型、版本篡帕、操作系統(tǒng)類型殖侵、瀏覽器引擎類型等信息

screen 屏幕

window.screen.width 返回當(dāng)前屏幕寬度(分辨率值) window.screen.height 返回當(dāng)前屏幕高度(分辨率值)

document 文檔

window的document的屬性，代表所有html的元素镰烧，這部分是js主要操作的部分拢军，因此這部分必須規(guī)范，才能進(jìn)行統(tǒng)一開發(fā)怔鳖。因此茉唉，W3C將這部分進(jìn)行了規(guī)范---DOM標(biāo)準(zhǔn)。

DOM

DOM（document object model ）文檔對象模型结执，定義了表示和修改文檔所需的對象度陆、行為和屬性，以及這些對象之間的關(guān)系献幔。

DOM對象方法

• getElementById(id） 通過id獲取DOM對象（對象）
• getElementsByTagName(tag) 通過標(biāo)簽獲取DOM對象（“類似數(shù)組”對象）
• getElementsByName(name) 通過name獲取DOM對象（“類似數(shù)組”對象）
• getElementsByClassName(class) 通過class獲取DOM對象（IE8以下不支持）

操作DOM間的關(guān)系

• createElement(tag) 創(chuàng)建元素
• removeChild(對象) 刪除元素
• appendChild(對象) 插入元素
• replaceChild(替換對象坚芜，被替換對象) 替換元素
• insertBefore(對象，目標(biāo)對象) 前部插入

appendChild replaceChild insertBefore 都具有移動對象的功能

節(jié)點屬性:

父節(jié)點 parentNode
第一級所以子節(jié)點    childNodes
第一個子節(jié)點  firstChild
最后一個子節(jié)點 lastChild
前一個兄弟節(jié)點 previousSbiling
后一個兄弟節(jié)點 nextSibling
復(fù)制代碼

克隆節(jié)點:

cloneNode( 布爾值 ) 

true：復(fù)制本節(jié)點以及所有子節(jié)點 
false：只復(fù)制節(jié)點本身
復(fù)制代碼

DOM節(jié)點屬性

• setAttribute("屬性名",屬性值) 設(shè)置屬性
• getAttribute( 屬性名 ) 獲取屬性
• removeAttribute( 屬性名 ) 刪除屬性:
• hasAttributes(屬性名) 判斷屬性是否存在（返回ture/false）

事件

var oDiv=document.getElementById('box');
oDiv.onclick=function(){   
    alert('hello world'); 
};
復(fù)制代碼

1. addEventListener( ) 增加事件監(jiān)聽
2. removeEventListener( ) 刪除事件監(jiān)聽

事件分類

• window事件

1. onload 加載（某個頁面或圖像被完成）
2. onunload 用戶退出頁面
3. onresize 窗口或框架被調(diào)整尺寸
4. onscroll 滾動條事件

• 鼠標(biāo)事件

onclick 鼠標(biāo)點擊
ondblclick 鼠標(biāo)雙擊
onmousedown 鼠標(biāo)按鍵按下
onmouseup 鼠標(biāo)按鍵被松開
onmouseout 鼠標(biāo)從某元素移開
onmouseover 鼠標(biāo)被移到某元素之上
onmouseenter 鼠標(biāo)進(jìn)入某元素
onmouseleave 鼠標(biāo)離開某元素
onmousemove 鼠標(biāo)移動
oncontextmenu 右鍵菜單
復(fù)制代碼

• input事件

onblur 元素失去焦點斜姥。
onfocus 元素獲得焦點。input輸入框
onchange 內(nèi)容改變時觸發(fā)。
復(fù)制代碼

• 鍵盤事件

onkeydown 按鍵按下
onkeypress 按鍵按下并釋放
onkeyup 按鍵釋放
復(fù)制代碼

• form事件

onreset 表單重置（重置按鈕）
onsubmit 表單提交(form內(nèi)有text被聚焦铸敏，直接回車可觸發(fā)onsubmit)
復(fù)制代碼

事件對象

獲取事件數(shù)據(jù)缚忧，不同的事件會有不同數(shù)據(jù)

oDiv.onclick=function(ev){
 //ev就是事件對象
}
復(fù)制代碼

事件流

1. 對象的默認(rèn)行為
2. 阻止默認(rèn)行為：event.preventDefaut()

事件流

事件流方向：捕獲 → 事件目標(biāo)→冒泡

1. 事件捕獲
2. 事件目標(biāo)
3. 事件冒泡 與 阻止事件冒泡

事件目標(biāo)

ev.targrt
ev.target.nodeName
ev.target.tagName
復(fù)制代碼

事件委派(delegate)

原理: 將事件綁定在父級上，利用事件冒泡原理杈笔，通過判斷事件的“目標(biāo)元素”來觸發(fā)父級上綁定的事件

作用

• 不用分別為子元素綁定事件
• 為未知元素綁定事件

事件監(jiān)聽

可以為一個元素闪水，同時綁定多個事件

obj.addEventListener(事件，回調(diào)函數(shù)蒙具，冒泡/捕獲) ;
btn.addEventListener("click",function(ev){ //ev 事件對象
 alert('dadaqianduan');
},false)   //false 冒泡階段
復(fù)制代碼

jQuery

一款輕量級的js庫
豐富的DOM選擇器
簡單的事件操作
重新封裝方法球榆，讓操作DOM屬性更簡單
鏈?zhǔn)讲僮?豐富的動畫效果
Ajax操作支持
瀏覽器兼容
插件擴(kuò)展開發(fā)，可擴(kuò)展性強(qiáng)

不能向后兼容
插件兼容性
多個插件沖突
復(fù)制代碼

jQuery 選擇器

• id選擇器

$('#box')
復(fù)制代碼

• class選擇器

$('.box')
復(fù)制代碼

• 標(biāo)記選擇器

$('p')
復(fù)制代碼

• * 代表所有標(biāo)簽

屬性選擇器

• [attribute] 匹配包含給定屬性的元素
• [attribute=value] 匹配給定的屬性是某個特定值的元素
• [attribute!=value] 匹配給定的屬性不是某個特定值的元素
• [attribute^=value] 匹配給定的屬性是以某些值開始的元素
• [attribute$=value] 配給定的屬性是以某些值結(jié)尾的元素
• [attribute*=value] 匹配給定的屬性是以包含某些值的元素

位置選擇器

:first匹配第一個元素

:last獲取最后一個元素

:not 去除所有與給定選擇器匹配的元素

:even 匹配所有索引值為偶數(shù)的元素禁筏，從 0 開始計數(shù)

:odd 匹配所有索引值為奇數(shù)的元素持钉，從 0 開始計數(shù)

:eq 匹配一個給定索引值的元素

:gt 匹配所有大于給定索引值的元素

:lt 匹配所有小于給定索引值的元素

后代選擇器

$("選擇器1 選擇器2 ……")
復(fù)制代碼

子代選擇器

$("選擇器1>選擇器2>……")
復(fù)制代碼

選擇器對象

$("選擇器").each(function(index){this}) 選擇器對象的遍歷
$("選擇器").find() 找前面選擇器匹配到的元素的子元素
$("選擇器").not() 在前面選擇器匹配到的元素中去除某個或某多個
$("選擇器").add() 在前面選擇器中在追加節(jié)點
復(fù)制代碼

子元素

:first-child 匹配第一個子元素
:last-child 匹配最后一個子元素
:first-of-type 選擇所有相同的元素名稱的第一個兄弟元素
:last-of-type 選擇所有相同的元素名稱的最后一個兄弟元素

:nth-child 匹配其父元素下的第N個子或奇偶元素
:nth-last-child() 選擇所有他們父元素的第n個子元素。計數(shù)從最后一個元素開始到第一個
:nth-last-of-type() 選擇的所有他們的父級元素的第n個子元素篱昔，計數(shù)從最后一個元素到第一個
:nth-of-type() 選擇同屬于一個父元素之下每强，并且標(biāo)簽名相同的子元素中的第n個

:only-child 如果某個元素是父元素中唯一的子元素，那將會被匹配
:only-of-type 選擇所有沒有兄弟元素州刽，且具有相同的元素名稱的元素空执。
復(fù)制代碼

表單

:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的單行文本框
:password 匹配所有密碼框
:radio 匹配所有單選按鈕

:checkbox 匹配所有復(fù)選框
:submit 匹配所有提交按鈕
:image 匹配所有圖像域
:reset 匹配所有重置按鈕

:button 匹配所有按鈕
:file 匹配所有文件域
:hidden 匹配所有隱藏域
復(fù)制代碼

表單對象屬性

:enabled 匹配所有可用元素
:disabled 匹配所有禁用元素

:checked 匹配所有選中的被選中元素
:selected 匹配所有選中的option元素
復(fù)制代碼

DOM操作

1. 查找獲取

text() - 設(shè)置或返回所選元素的文本內(nèi)容
html() - 設(shè)置或返回所選元素的內(nèi)容
val() - 設(shè)置或返回表單字段的值
復(fù)制代碼

2. 內(nèi)部插入

append() 向每個匹配的元素內(nèi)部追加內(nèi)容
appendTo() 把所有匹配的元素追加到另一個指定的元素集合中

prepend() 向每個匹配的元素內(nèi)部前置內(nèi)容
prependTo() 把所有匹配的元素前置到另一個、指定的元素集合中
復(fù)制代碼

3. 外部插入

after() 在每個匹配的元素之后插入內(nèi)容
before() 在每個匹配的元素之前插入內(nèi)容

insertAfter() 把所有匹配的元素插入到另一個豺憔、指定的元素集合的后面
insertBefore() 把所有匹配的元素插入到另一個艺沼、指定的元素集合的前面
復(fù)制代碼

4. 包裹

wrap() 把所有匹配的元素用其他元素的結(jié)構(gòu)化標(biāo)記包裹起來
unwrap() 這個方法將移出元素的父元素敞咧。

wrapAll() 將所有匹配的元素用單個元素包裹起來
wrapInner() 將每一個匹配的元素的子內(nèi)容(包括文本節(jié)點)用一個HTML結(jié)構(gòu)包裹起來
復(fù)制代碼

5. 替換

replaceWith() 將所有匹配的元素替換成指定的HTML或DOM元素
replaceAll() 用匹配的元素替換掉所有 selector匹配到的元素
復(fù)制代碼

6. 刪除

empty() 刪除匹配的元素集合中所有的子節(jié)點
remove() 從DOM中刪除所有匹配的元素
復(fù)制代碼

7. 克隆

clone() 克隆匹配的DOM元素并且選中這些克隆的副本
復(fù)制代碼

JQuery 事件

頁面載入

$(document).ready(function(){

})

//簡寫方式
$(function(){

})
復(fù)制代碼

事件綁定

$("#box").on("click",function(){
    /**/
})

$("#box").off("click,mousemove");
復(fù)制代碼

容器適應(yīng)

獲取元素的寬高有以下幾種方法：

$(選擇器).width() | innerWidth() | outerWidth()
$(選擇器).height() | innerHeight() | outerHeight()
復(fù)制代碼

innerWidth()和innerHeight()是指元素里面內(nèi)容的寬高加上內(nèi)邊距的寬高；
outerWidth()和outerHeight()是指元素里面內(nèi)容的寬高加上內(nèi)邊距的寬高和邊框门坷；
復(fù)制代碼

獲取窗口的寬高的方法如下：

$(window).width()
$(window).height()
復(fù)制代碼

標(biāo)簽樣式操作

$(選擇器).css (樣式屬性名[,值])  方法設(shè)置或返回被選元素的一個或多個樣式 屬性

$(選擇器).addClass(類別名)    增加類別樣式

$(選擇器).removeClass(類別名) 去除類別樣式

$(選擇器).toggleClass(類別名) 交替使用類別樣式：有這個類別樣式就去除，沒有就追加桑孩；
復(fù)制代碼

滑動

show() 顯示元素
hide() 隱藏元素

slidDown() 向下滑動顯示
slideUp() 向上滑動收起隱藏
slideToggle() 交替滑動狀態(tài)

fadeIn() 淡入
fadeOut() 淡出
fadeTo() 動畫到指定透明度
fadeToggle() 交替淡出拜鹤、淡入狀態(tài)
復(fù)制代碼

自定義動畫

animate() 自定義動畫

stop() 停止所有在指定元素上正在運行的動畫

delay() 設(shè)置一個延時來推遲執(zhí)行隊列中之后的項目

finish() 停止當(dāng)前正在運行的動畫，刪除所有排隊的動畫流椒，并完成匹配元素所有的動畫
復(fù)制代碼

AJAX

$.ajax()
復(fù)制代碼

$.get() 通過遠(yuǎn)程 HTTP GET 請求載入信息

$.post() 通過遠(yuǎn)程 HTTP POST 請求載入信息

$.getJSON() 通過 HTTP GET 請求載入 JSON 數(shù)據(jù)
復(fù)制代碼

工作原理

AJAX = 異步 JavaScript 和 XML

在瀏覽器中輸入url地址請求服務(wù)器時敏簿，是通過Ajax發(fā)送http請求給服務(wù)器，服務(wù)的響應(yīng)結(jié)果也是先返回給Ajax宣虾，先Ajax處理之后在返回給瀏覽器顯示在頁面惯裕。

XMLHttpRequest對象

//第一步：
xhr = new XMLHttpRequest();

//第二步
xhr.open("post","test.php");

//第三步：
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//第四步：
xhr.send("a=1&b=2");

//第五步：
xhr.onreadystatechange=function(){
    if(xhr.status==200 && xhr.readyState==4){
         var result=xhr.responseText;//獲取到結(jié)果
    alert(result);
    }
}
復(fù)制代碼

XML和HTML的區(qū)別

get() 和post()

$.get(url,data,callback,dataType)
$.post(url,data,callback,dataType)
復(fù)制代碼

AJAX工作原理

Ajax的基本格式如下：

$.ajax({
    url:'請求的資源',
    type:'請求方式get|post',
    data:'發(fā)送數(shù)據(jù) 名=值&名=值',
    dataType:'回傳值的類型',
    success:function(res){ res接收返回值
    }
})
復(fù)制代碼

HTTP

HTTP（超文本傳輸協(xié)議）是一種通信協(xié)議，它允許將超文本標(biāo)記語言(HTML)文檔從Web服務(wù)器傳送到客戶端的瀏覽器绣硝。

HTTP消息結(jié)構(gòu)

• request line

請求行：第一行必須是請求行蜻势，用來說明請求類型、要訪問的資源以及使用的HTTP版本鹉胖。

• header

請求頭：用來說明服務(wù)器要使用的附加信息握玛。

• blank line

空白行：請求頭部與請求體之間必須有一個空白行够傍，必不可少

• body

請求體：也叫請求正文，可以添加任意的其他數(shù)據(jù)

狀態(tài)行：

Host    接受請求的服務(wù)器地址挠铲，可以是：IP：端口 或 域名
User-Agent  發(fā)送請求的應(yīng)用程序名稱（瀏覽器信息）
Connection  指定與連接相關(guān)的屬性冕屯，如：Connection:Keep-Alive
Accept-Charset  客戶端可以接受的編碼格式
Accept-Encoding 客戶端可以接受的數(shù)據(jù)壓縮格式
Accept-Language 客戶端可以接受的語言
referer 當(dāng)前請求來自哪個鏈接（防盜連）
content-type    請求的文件類型
cookie  該網(wǎng)站相關(guān)的會話信息
復(fù)制代碼

url請求過程

1. 首先客戶端與服務(wù)器需要建立連接。
2. 建立連接后拂苹，客戶端發(fā)送一個請求給服務(wù)器安聘，請求方式的格式為：統(tǒng)一資源標(biāo)識符（URL）、協(xié)議版本號瓢棒，客戶端信息和可能的內(nèi)容浴韭。
3. 服務(wù)器接到請求后，給予相應(yīng)的響應(yīng)信息脯宿，其格式為一個狀態(tài)行念颈，包括信息的協(xié)議版本號、一個成功或錯誤的代碼（status Code狀態(tài)碼）嗅绰，后邊服務(wù)器信息舍肠、實體信息和可能的內(nèi)容。
4. 客戶端接收完, 服務(wù)器所返回的信息后窘面，與服務(wù)器斷開連接翠语。

如果在以上過程中的某一步出現(xiàn)錯誤，那么產(chǎn)生錯誤的信息將返回到客戶端财边。對于用戶來說肌括，這些過程是由HTTP自己完成的，用戶只要用鼠標(biāo)點擊酣难，等待信息顯示就可以了谍夭。

預(yù)加載

預(yù)加載：將所有所需的資源提前請求加載到本地，后面在需要使用就直接從緩存中存取資源

1. 使用image對象

<img src="" style="display:none"/>
復(fù)制代碼

2. 使用image對象

var image = new Image();
image.src="";
復(fù)制代碼

3. 使用XMLHttpRequest對象

xmlhttprequest.onreadystatechange=callback;
xmlhttprequest.onprogress=progressCallback;

xmlhttprequest.open("GET",http://xx.jpg,true);

xmlhttprequest.send();

function callback(){
    if(xmlhttprequest.readyState=4 && xmlhttprequest.status==200){
        var responseText=xmlhttprequest.responseText;
    }else{
      console.log("Request was unsuccessful" + xmlhttprequest.status);
    }
}

function progressCallback(e){
    c=e||event;
    if(e.lengthComputable){
        console.log("Received"+e.loaded+"of"+e.total+"bytes");
    }
}
復(fù)制代碼

懶加載

首屏加載憨募，技術(shù)上顯示要用的技術(shù)就是圖片懶加載紧索，即到可視區(qū)域再加載。

性能優(yōu)化

JavaScript代碼優(yōu)化

1. 代碼與結(jié)構(gòu)分離
2. 樣式與結(jié)構(gòu)的分離
3. 數(shù)據(jù)與代碼分離

• AMD：Asynchronous Module Definition菜谣，即異步模塊加載機(jī)制珠漂。
• CMD:Common Module Definition，即通用模塊定義規(guī)范
• 導(dǎo)出（export）與導(dǎo)入（import）兩個模塊

提升文件加載速度

1. 合并JavaScript代碼尾膊，盡可能少的使用script標(biāo)簽媳危。
2. 無堵塞加載JavaScript。
3. 動態(tài)創(chuàng)建script標(biāo)簽來加載

webpack

webpack是一個module bundler（模塊構(gòu)建工具）冈敛，由于 JavaScript 應(yīng)用程序的復(fù)雜性不斷增加待笑，構(gòu)建工具已成為 web 開發(fā)中不可或缺的一部分。它幫助我們?nèi)ゴ虬デ础⒕幾g和管理項目需要的眾多資源文件和依賴庫暮蹂。

webpack支持CommonJS寞缝、AMD和ES6模塊系統(tǒng)，并且兼容多種JS書寫規(guī)范仰泻，可以處理模塊間的依賴關(guān)系第租，所以具有更強(qiáng)大的JS模塊化的功能，它能壓縮圖片我纪，對CSS、js文件進(jìn)行語法檢查丐吓、壓縮浅悉、編譯打包。

webpack的特點

1. 可以很好的用于單頁應(yīng)用
2. 同時支持 require() 和 import 模塊語法
3. 允許非常前沿的 code splitting（代碼分割） 特性
4. 熱加載可以讓 React券犁、Vue.js 和其它類似框架的本地開發(fā)更快
5. 它是目前最受歡迎的構(gòu)建工具

webpack的缺點

1. 不適合 web 開發(fā)的初學(xué)者
2. 對于 CSS术健、圖片和其它非 JS 資源文件時，需要先混淆處理
3. 文檔不夠完善
4. 變化很大粘衬，不同版本的使用方法存在較大差異

安裝

1. 全局安裝：

//安裝全局webpack
npm install webpack -g

//安裝全局webpack-cli
npm install webpack-cli -g
復(fù)制代碼

webpack基本應(yīng)用

SPA（single page web application） 單頁應(yīng)用程序荞估，是webpack打包的典型應(yīng)用

示例，主要的幾個部分組成：

index.html  主文件
JS文件    可能有多個JS文件稚新，可通過webpack合并打包為一個文件
CSS文件   可能有多個CSS文件勘伺，可通過webpack合并打包為一個文件
圖片  可通過webpack壓縮優(yōu)化
復(fù)制代碼

示例：

//a.js
var run=function(){
    console.log("aaa");
};
//node CommonJS模塊
//module.exports.run=run;

//ES6語法
export default {run};
復(fù)制代碼

//b.js
var play=function(arg){
    console.log(arg);
};
//node CommonJS模塊
//module.exports.play=play;

//ES6語法
export default {play};
復(fù)制代碼

//index.js
//node CommonJS 引入js模塊
//var a=require("./a.js");
//var b=require("./b.js");

//ES6 引入js模塊
import a from "./a.js";
import b from "./b.js";

var txt = "hello world";
a.run();
b.play(txt);
復(fù)制代碼

dist文件夾（存放打包后的文件，可以先不創(chuàng)建褂删，打包時可以自動創(chuàng)建）-dis,dist,bulit

打包：

webpack --mode development
復(fù)制代碼

配置文件入門

默認(rèn)的配置文件名為：webpack.config.js

核心概念

一個配置文件的基本結(jié)構(gòu)如下：

//配置項
module.exports={
    //入口  
    entry:".....",

    //輸出配置     
    output:{......},

    //模塊    
    module: {......},

    //解析         
    resolve：{......},        

    //插件（數(shù)組）
    plugins:[......],

    //開發(fā)服務(wù)器    
    devServer:{......}  
};
復(fù)制代碼

entry   入口 定義入口文件飞醉，默認(rèn)入口文件：./src/index.js
output  輸出 定義出口文件，默認(rèn)出口文件：./dist/main.js
resolve 解析 路徑映射屯阀、省略后綴名等
module  模塊 定義不同loader缅帘，讓 webpack 能夠處理非 JavaScript 模塊
plugins 插件 擴(kuò)展webpack功能
devServer   開發(fā)服務(wù)器 用于配置webpack-dev-server選項
復(fù)制代碼

設(shè)置配置文件自動完成：

// webpack是基于node構(gòu)建的，只支持CommonJS模塊
module.exports={  
    //入口配置
    entry:'./src/js/main.js',  

    //出口配置
    output:{  
        path:__dirname +'/dist', //輸出目錄  __dirname:本文件所在硬盤路徑（node全局變量）
        filename:'js/main.js' //文件名稱（可以有子目錄）
    }
};
復(fù)制代碼

修改webpack.json文件

在webpack.json中的"scripts"下增加：

"scripts": {  
    "dev": "webpack --mode development",
    "build": "webpack --mode production"  
  },  
復(fù)制代碼

執(zhí)行打包

npm run dev
復(fù)制代碼

entry 和 output

1. entry 入口配置 是指頁面中的入口文件难衰。也就是打包從哪個文件開始钦无。默認(rèn)入口文件：./src/index.js

2. output 出口配置 是指生成的文件輸出到哪個地方去，默認(rèn)出口文件：./dist/main.js盖袭，主要有以下屬性：

path    輸出路徑
filename    輸出文件名
復(fù)制代碼

示例：

//入口
entry: {   
    index: './src/js/main.js',  
},
//輸出
output: {
    path: __dirname + "/dist",//打包后的文件存放的地方
    filename:"main.js"http://打包后輸出的文件名
},
復(fù)制代碼

module

webpack 只能打包js文件（只理解 JavaScript語法）失暂，無法識別其他語法的文件，如果要讓webpack打包其他文件苍凛，首先需要讓webpack識別不同文件趣席，這就需要特別的模塊，這種模塊統(tǒng)稱為loader醇蝴。

loader分類

轉(zhuǎn)換編譯    script-loader宣肚，babel-loader，ts-loader悠栓，coffee-loader
處理樣式    style-loader霉涨，css-loader按价，less-loader，sass-loader笙瑟，postcss-loader
處理文件    raw--loader楼镐，url-loader，file-loader
處理數(shù)據(jù)    csv-loader往枷，xml-loader
處理模板語言  html-loader框产，pug-loader，jade-loader错洁，markdown-loader
清理和測試   mocha-loader秉宿，eslint-loader
復(fù)制代碼

常用loader

css-loader  解析css語句
style-loader    將css-loader解析后的文本，添加<style>標(biāo)簽

babel-loader    將ES6+屯碴、JSX語法轉(zhuǎn)成ES5低版本語法

url-loader  

url-loader對未設(shè)置或者小于limit byte設(shè)置的圖片以base64的格式進(jìn)行轉(zhuǎn)換 
對于大于limit byte的圖片用file-loader進(jìn)行解析

file-loader 

解析項目中的url引入（包括img的src和background的url） 
修改打包后文件引用路徑描睦，使之指向正確的文件

less-loader less編譯器

vue-loader  

Vue也推出了自己的vue-loader，可以方便的打包 .vue文件 的代碼
在vue-cli（快速構(gòu)建單頁應(yīng)用的腳手架）中得到應(yīng)用导而。
復(fù)制代碼

css loader

//index.js
import a from "./a.js";
import b from "./b.js";
var txt = "hello world";
a.run();
b.play(txt);

//打包css文件
import "./style.css";  //注意：是相對路徑
復(fù)制代碼

安裝loader（loader也是依賴包忱叭，需要安裝）

npm install css-loader --save-dev
npm install style-loader --save-dev
復(fù)制代碼

在module中定義ccs模塊相關(guān)的配置：

module: {
    rules: [
        {
            test: /.css$/, //正則
            //把css添加到html的style標(biāo)簽里(style-loader要先加載)
            loader: ['style-loader','css-loader'],  //loader或者use
            exclude: /node_modules/, //正則 排除node_modules目錄
        }
    ]
},
復(fù)制代碼

babel loader

babel是一個 js 編譯器，它通過語法轉(zhuǎn)換器支持最新版本的 JavaScript （包括JSX今艺、TypeScript等新語法）韵丑。 這些插件允許你立刻使用新語法，無需等待瀏覽器支持洼滚。

使用Babel首先要配置 .babelrc 文件埂息，該文件用來設(shè)置轉(zhuǎn)碼規(guī)則和插件（json格式），存放在項目的根目錄下遥巴。

tips：在linux系統(tǒng)中千康，rc結(jié)尾的文件通常代表運行時自動加載的文件、配置等等铲掐。

在.babelrc配置文件中拾弃，主要是對預(yù)設(shè)(presets) 和 插件(plugins) 進(jìn)行配置。.babelrc配置文件一般為如下：

{
   "presets": [
        ["env",{"modules":false}] //modules是配置項
   ],  
    "plugins": [
        [ "transform-runtime",{"polyfill":false}]  //polyfill是配置項
    ]
}
復(fù)制代碼

預(yù)設(shè) 對js最新的語法糖進(jìn)行編譯摆霉，并不負(fù)責(zé)轉(zhuǎn)譯新增的api和全局對象豪椿。

插件 控制如何轉(zhuǎn)換代碼，babel默認(rèn)只轉(zhuǎn)換新的js語法携栋，而不轉(zhuǎn)換新的API

plugins

插件（plugins）可以擴(kuò)展webpack的功能搭盾，loader不能做的處理都能交給plugin來做。

如：HtmlWebpackPlugin 插件簡化了HTML文件的創(chuàng)建婉支，可以通過模板文件鸯隅，生成一個HTML文件

resolve

resolve（譯：解析）配置webpack如何尋找模塊對應(yīng)的文件。

alias   （譯：別名）通過別名將原來導(dǎo)入路徑映射成一個新的導(dǎo)入路徑
extensions  （譯：擴(kuò)展）數(shù)組 導(dǎo)入模塊時向挖，可以省略的文件后綴名

resolve: {
    alias: {
        "@": path.join(__dirname,"./src") //將項目根目錄下的src目錄蝌以，映射為 @
    },
    extensions:[".js", ".json"]
}
復(fù)制代碼

其他配置項示例：

devtool 是否生成以及如何生成sourcemap
devserver   開啟一個本地開發(fā)服務(wù)器
watch   監(jiān)聽文件變化并自動打包
watchoption 用來定制watch模式的選項
performance 打包后命令行如何展示性能提示炕舵，如果超過某個大小是警告還是報錯
復(fù)制代碼

webpack-dev-server

webpack-dev-server是一個小型的web服務(wù)器，可以自動監(jiān)視項目文件的變化跟畅，自動刷新瀏覽器咽筋，其HMR（Hot Module Replacement 熱模塊替換）方式只替換更新的部分，而不是重載頁面徊件，大大提高了刷新效率奸攻。

需要本地安裝 webpack和webpack-cli
npm install webpack --save-dev
npm install webpack-cli --save-dev
npm install webpack-dev-server --save-dev
復(fù)制代碼

webpack.config.js配置文件：

let path=require("path");

//HtmlWebpackPlugin插件
let HtmlWebpackPlugin=require('html-webpack-plugin');
let htmlPlugin=new HtmlWebpackPlugin({  
    filename:"index.html", //生成的新文件
    template:__dirname+"/src/index_temp.html",  //模板文件
    minify:{ //壓縮
        removeComments:true,  //刪除注釋
        collapseWhitespace:true  //合并空格
    },
});

//配置項
module.exports = {
    //輸入
    entry:'./src/js/main.js',//主入口文件

    //輸出
    output: {
        path: __dirname + "/dist",  //打包后的文件存放的地方
        filename:"main.js"          //打包后輸出的文件名
    },

    //模塊
    module: {
        rules: [
            {
                test: /.css$/, //正則 解析css文件
                //把css添加到html的style標(biāo)簽里(style-loader要先加載)
                use: ['style-loader','css-loader'],
                exclude: /node_modules/, //正則 必須要寫exclude！虱痕！
            },
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/, //正則 必須要寫excludeＮ韫俊！
            },
        ]
    },
    //插件
    plugins:[
        htmlPlugin        
    ],

    //解析
    resolve: {
        alias: {
            "@": path.join(__dirname,"./src") //將項目根目錄下的src目錄皆疹，映射為 "@"
        },
        extensions:['.js', '.json']
    },

    //開發(fā)服務(wù)器
    devServer: {
        inline:true,    //支持dev-server自動刷新
        port:"8080",    //端口
        open:true,      //自動打開默認(rèn)瀏覽器
    },
}
復(fù)制代碼

webpack-dev-serve.cmd是定義在.bin目錄中的

"scripts": {
    "dev": "webpack-dev-server --hot",
    "build": "webpack --mode production"
}
復(fù)制代碼

運行

npm start
復(fù)制代碼

vue

MVC模式

MVC模式是移動最廣泛的軟件架構(gòu)之一，把應(yīng)用程序強(qiáng)制性地劃分為三部分：模型（Model）占拍、視圖（View）和控制器（Controller）略就。

MVVM模式

MVVM模式是把MVC模式的Controller改成ViewModel。View的變化會自動更新ViewModel晃酒，ViewModel的變化也會自動同步到View上顯示表牢。

基礎(chǔ)語法

示例：

el      把 Vue 實例掛載到DOM元素上，通過id綁定html元素
data        數(shù)據(jù)對象贝次，Vue實例的數(shù)據(jù)（注意：數(shù)據(jù)不要與methods中的方法重名）
methods     事件對象崔兴，包含事件所要觸發(fā)的函數(shù)（注意：方法名不要與data中的數(shù)據(jù)重名）
computed        計算屬性
watch       監(jiān)聽器
directives      自定義指令
鉤子（hook）函數(shù)（8個）      hook（鉤子）函數(shù)，不同生命周期引發(fā)的動作
路由鉤子函數(shù)（3個）      路由組件在不同狀態(tài)時觸發(fā)
components      組件容器
template        定義模板蛔翅，可以是字符串敲茄，也可以是”#“選擇器
props       用于接收來自父組件的數(shù)據(jù)
router      路由
store       vuex 狀態(tài)
復(fù)制代碼

實例屬性/方法

vm.$el  Vue 實例使用的根 DOM 元素
vm.$data    Vue的data配置項
vm.$options 用于當(dāng)前 Vue 實例的初始化選項

vm.$props   當(dāng)前組件接收到的 props 對象
vm.$parent  父實例（如果當(dāng)前實例有的話）

vm.$root    當(dāng)前組件樹的根 Vue 實例
vm.$children    當(dāng)前實例的直接子組件

vm.$refs    原生DOM元素或子組件注冊引用信息
vm.$slots   用來訪問被插槽分發(fā)的內(nèi)容

vm.$router  全局路由（vue-router插件）
vm.$store   vuex 狀態(tài)對象（vuex插件）
復(fù)制代碼

方法

vm.$emit()  子組件可以使用 $emit 觸發(fā)父組件的自定義事件
vm.$set()   Vue.set的別名

設(shè)置對象的屬性， 這個方法主要用于避開 Vue 不能檢測屬性被添加的限制

vm.$watch   偵聽數(shù)據(jù)變化

vm.$on()    監(jiān)聽當(dāng)前實例上的自定義事件山析。事件可以由vm.$emit觸發(fā)堰燎。回調(diào)函數(shù)會接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)笋轨。

vm.$mount   可以使用 vm.$mount() 手動掛載（Vue 實例化時沒有 el 選項）

vm.$destroy 完全銷毀一個實例秆剪。清理它與其它實例的連接，解綁它的全部指令及事件監(jiān)聽器爵政。

觸發(fā) beforeDestroy 和 destroyed 的鉤子仅讽。

屬性綁定指令

v-bind  動態(tài)改變dom標(biāo)簽上的屬性<br />v-bind :class="" 簡寫 :class=""
復(fù)制代碼

生命周期

4個階段：創(chuàng)建→掛載→更新→銷毀

beforeCreate    實例創(chuàng)建前   

created 實例創(chuàng)建后   初始化數(shù)據(jù)（Ajax數(shù)據(jù)請求，獲取Vuex狀態(tài)钾挟、路由切換等）

beforeMount 載入前 

mounted 載入后 需要操作DOM時（應(yīng)用第三方插件等）

beforeUpdate    更新前 

updated 更新后 通過事件修改數(shù)據(jù)洁灵、v-model引發(fā)數(shù)據(jù)變化、AJAX異步更新數(shù)據(jù)

beforeDestroy   實例銷毀前   

destroyed   實例銷毀后   切換路由（組件將被銷毀）
復(fù)制代碼

計算屬性

多次訪問計算屬性會立即返回之前的計算結(jié)果等龙，而不必再次執(zhí)行函數(shù)处渣。

計算屬性具有緩存

數(shù)組的更新檢查

push()伶贰、pop()、shift()罐栈、unshift()
splice()黍衙、sort()、reverse()   

變異方法荠诬，可觸發(fā)視圖更新

filter(), concat() 和 slice()    

非變異方法琅翻，不觸發(fā)視圖更新
它們可以返回新數(shù)組，用新數(shù)組替換舊數(shù)組柑贞，就可以刷新視圖
復(fù)制代碼

事件對象

event.type  觸發(fā)的事件類型
event.target    觸發(fā)事件的HTML元素
event.preventDefault( ) 阻止事件的默認(rèn)行為
event.stopPropagation( )    阻止事件冒泡
復(fù)制代碼

Vue組件

1. 創(chuàng)建組件

let myTemp={
template:'#temp', //模板id
data: function(){ //必須為函數(shù)(閉包)
    return { //必須有return方椎，返回值為對象{}
        title:"dadaqianduan"
    }
}
復(fù)制代碼

2. 注冊組件

//在components配置項中注冊組件
let app=new Vue({
    el:"#box",
    components：{myTemp}
});

//全局注冊組件，還可以使用Vue.component方法（僅限全局注冊钧嘶，不建議使用）
Vue.component('myTemp'棠众，MyTemp）；
復(fù)制代碼

3. 使用組件

<!--在Vue實例中使用組件-->
<div id='box'>
    <!--組件名如果用駝峰定義有决，改為短橫線命名-->
    <my-temp></my-temp>
</div>
復(fù)制代碼

4. 事件通信

• 父子組件之間的數(shù)據(jù)操作闸拿，是通過props屬性和$emit()方法來實現(xiàn)的

路由使用

定義路由包括路由路徑（path）、路由名稱（name）书幕、路由組件對象（component）

routes: [
    {
      path: '/',        // 路由路徑 
      name: 'home',     // 路由名稱
      component: Home   // 路由組件對象 
    },
    {
      path: '/users',
      name: 'Users',
      component: UserComponent
    },
    {
      path: '/about',
      name: 'about',  
      component: () => import( './views/About.vue')
    }
  ]
復(fù)制代碼

1. 動態(tài)路由

routes: [
  {
    path: '/users/:username/post/:postid',
    name: 'Users',
    component: UserComponent,
  }
]
復(fù)制代碼

/user/:username 
/user/tom   
{username:'tom'}

/user/:username/post/:postId    
/user/tom/post/3    
{username:'tom',postId:'3'}
復(fù)制代碼

路由導(dǎo)航

1. 路由導(dǎo)航守衛(wèi)

什么是路由導(dǎo)航守衛(wèi)可以簡單理解為路由組件的生命周期回調(diào)函數(shù)新荤。

// 路由導(dǎo)航守衛(wèi)
// 作用：在第一次進(jìn)入當(dāng)前路由組件之前被調(diào)用
// 使用場景：獲取ajax數(shù)據(jù)
beforeRouteEnter(to, from, next) {
    // to：表示要進(jìn)入的路由組件
    // from：表示將要離開的路由組件
    // next：表示后續(xù)操作函數(shù)
    // 此時還未進(jìn)入到組件中，故不能使用this獲取當(dāng)前組件的實例
    next(function(app) {
        // 進(jìn)入到當(dāng)前組件后台汇，才執(zhí)行的回調(diào)
        // 此時回調(diào)參數(shù) app 表示當(dāng)前組件的實例對象
        axios.get('/users/' + app.id).then(res => {
            app.user = res.data.data;
        });
    });
}
beforeRouteUpdate(to, from, next) {
    // 此時苛骨，可以使用this表示當(dāng)前組件對象
    const app = this;
    // 發(fā)送ajax請求
    // this表示切換前的狀態(tài)
    // to表示要切換到的路由對象 route
    axios.get('/users/' + to.params.id).then(res => {
        app.user = res.data.data;
    });
    // 執(zhí)行后續(xù)
    next();
}
復(fù)制代碼

2. 編程式路由導(dǎo)航

methods: {
    login(){
        if(登陸成功){
            //實現(xiàn)頁面跳轉(zhuǎn)
            this.$router.push('/');
        }
    }
}
復(fù)制代碼

3. push()

跳轉(zhuǎn)到指定的路由地址， 并把當(dāng)前地址寫入到history中苟呐，參數(shù)可以是字符串路徑或描述地址信息的對象

字符串 router.push('home')
對象  router.push({path:'home'})
命名的路由   router.push({name:user,params:{userId:1}})
復(fù)制代碼

4. replace( )：跳轉(zhuǎn)到指定路由痒芝，它不會向 history 添加新記錄，而是替換掉當(dāng)前的 history 記錄牵素。

5. 全局路由導(dǎo)航守衛(wèi)

示例：

// 全局路由導(dǎo)航守衛(wèi)
    router.beforeEach((to, from, next) => {  
});
復(fù)制代碼

嵌套路由

children: [
    {
        path: "",
        component: 路由名
    },
    {
        path: "路徑名",
        component: 路由名
    }
]
復(fù)制代碼

命名視圖

使用<router-view> 可以使用 name 屬性為其設(shè)置名稱吼野，即命名路由的視圖簡稱命名視圖。

示例：

<router-view/> 
<router-view name="content"></router-view> 
import About from './views/About.vue';
routes: [  
{
  path: "/about",
  name: "about",
  components: {
    default: About,
    content: UserComponent
  }
}
]

了解更多加入我們前端學(xué)習(xí)圈