Web概述
Web三要素：瀏覽器，服務(wù)器，HTTP協(xié)議
HTML工作原理：HTML是部署在服務(wù)器上的文本文件，根據(jù)HTTP協(xié)議瀏覽器發(fā)出請求給服務(wù)器，服務(wù)器做出響應(yīng)給瀏覽器返回一個(gè)HTML，瀏覽器解釋執(zhí)行HTML，從而顯示內(nèi)容
什么是HTML？
HTML是超文本標(biāo)記語言（Hyper Text Markup Language）,一種純文本類型的語言，用來設(shè)計(jì)網(wǎng)頁的標(biāo)記語言，用該語言編寫的文件以.html或者.htm為后綴，由瀏覽器解釋執(zhí)行，在HTML的頁面上可以嵌套腳本語言編寫程序段，如JavaScript
HTML標(biāo)簽
HTML標(biāo)簽通常也被稱為HTML標(biāo)記，HTML元素；HTML標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵字，比如<html>，HTML標(biāo)簽通常是成對出現(xiàn)的,比如<b></b>，標(biāo)簽對中的第一個(gè)標(biāo)簽為開始標(biāo)簽，第二個(gè)標(biāo)簽為結(jié)束標(biāo)簽，開始標(biāo)簽和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽
HTML注釋：
<!–注釋內(nèi)容 -->
可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會(huì)忽略注釋，也不會(huì)顯示它們
HTML文檔類型：
<!DOCTYPE>聲明：HTML由多個(gè)不同的版本，只有完全明白頁面中的使用的確切HTML版本，瀏覽器才能完全正確的顯示HTML頁面，這就是<!DOCTYPE>的意義；
<!DOCTYPE>不是HTML的標(biāo)簽，它為瀏覽器提供一項(xiàng)信息，即HTML是用什么版本所寫的
HTML<head>標(biāo)簽：
定義：<head>標(biāo)簽用于定義文檔的頭部，是所有頭部元素的容器，<head>中的元素可以引用腳本，指示瀏覽器在哪里找到樣表式，提供元信息等等
文檔的頭部描述了文檔的各種信息和屬性，包括文檔的標(biāo)題，在web中的位置以及和其他文檔的關(guān)系等，絕大多數(shù)文檔的頭部包含的數(shù)據(jù)都不會(huì)真正的作為內(nèi)容顯示給讀者
以下這些標(biāo)簽可用在head部分：<title>,<meta>,<link>,<style>,<script>,<base>
文本元素：
作用：文本時(shí)網(wǎng)頁上的重要組成部分，直接書寫的文本會(huì)用瀏覽器默認(rèn)的樣式顯示
文本元素列表：是包含在文本元素中的文本，則會(huì)被顯示為元素所擁有的樣式
HTML標(biāo)題：
標(biāo)題是通過<h1>~<h6>標(biāo)簽進(jìn)行定義的，目的是為了能夠以醒目的方式顯示，<h1>定義最大標(biāo)題，<h6>定義最小標(biāo)題
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-H0qWULYZ-1613216632726)(C:\Users\Melody\AppData\Roaming\Typora\typora-user-images\image-20210213192107880.png)]
HTML段落：
段落是通過<p>標(biāo)簽進(jìn)行定義的，<p>元素提供了結(jié)構(gòu)化文本的一種方式，<p>元素對中的文本會(huì)以單獨(dú)的段落顯示，與前后文本換行分開，添加一段額外的垂直空白距離，作為行間距
HTML列表：
列表是將具有相似特征或先后順序的幾行文字進(jìn)行對齊排列，所有列表都是由列表類型和列表項(xiàng)組成
列表類型：
有序列表 ?<ol>?：用于列出表面上有特定次序的一些項(xiàng)目，其中只能包含列表項(xiàng)<li>
無序列表 ?<ul>?：用于列出頁面上沒有特定次序的一些項(xiàng)目，也只能包含具體列表項(xiàng)元素<li>
列表項(xiàng)：用來表示列表具體的內(nèi)容 <li>
HTML列表嵌套：將列表元素嵌套使用，可以建多層列表
HTML分區(qū)元素：
用于元素的一些分組，常用于頁面布局，塊分區(qū)元素<div></div>,行內(nèi)分區(qū)元素<span></span>
元素顯示方式：
? 塊級(jí)元素：默認(rèn)情況下，塊級(jí)元素獨(dú)占一行，即元素前后都會(huì)自動(dòng)換行，比如<p>,<div>
? 行內(nèi)元素：不會(huì)換行,與其他行內(nèi)元素位于同一行
?? <span>?元素是內(nèi)聯(lián)元素,可用作文本的容器，無特定的含義
? ?<i>?元素定義斜體字
? ?<em>?定義著重文字
? ?<del>?用來定義帶刪除線的文字
? ?<u>?用來定義帶下劃線的文字
? 空格折疊：默認(rèn)情況下，HTML中的多個(gè)空格，多個(gè)換行符會(huì)壓縮成單個(gè)空格，即只顯示一個(gè)空格
? 實(shí)體引用：空格： ；（小于號(hào)）<:< （大于號(hào) ） >:>；
HTML圖像：
使用<img>元素可以將圖片添加到頁面
語法：<img src=“url” >
常用屬性：width,height
src指的是"source",原屬性的值是圖像的URL地址，但是地址值分為絕對路徑和相對路徑
絕對路徑：文件從最高級(jí)目錄下開始的完整路徑，無論當(dāng)前路徑是什么，使用絕對路徑后總能找到要連接的文件
相對路徑：文件的位置是相對于當(dāng)前的文件位置，包括目錄名或指向一個(gè)可以從當(dāng)前目錄出發(fā)找到的文件
HTML超鏈接：<a href =“url”,target="">
href 屬性：鏈接地址 URL target 屬性：目標(biāo)的打開方式
錨點(diǎn)：文檔中某行的一個(gè)記號(hào)，用于鏈接到文檔中的某個(gè)位置
鏈接錨點(diǎn)：在錨點(diǎn)前加 # <a href ="#g1">內(nèi)容</a>
定義錨點(diǎn)：<a name=“g1”>內(nèi)容</a>
倆者需對應(yīng)使用，前后呼應(yīng)
HTML表格
表格是由<table>標(biāo)簽來定義的，通常用來組織結(jié)構(gòu)化信息，是被稱作單元格的矩形框，按照從左到右，從上到下的順序排列在一起而形成的，表格的數(shù)據(jù)保存在單元格里
? 創(chuàng)建表格：<table></table>
? 創(chuàng)建行：<tr></tr>
? 創(chuàng)建列：<td></td>
表格常用的屬性：
?border? 邊框
?width/height? 寬/高
??align? 對齊方式
??padding? 邊框與文字之間的距離，內(nèi)邊距
?cellspacing?：單元格之間的距離
? 跨行屬性：rowspan 合并行 colspan 合并列
行分組：表格看分為3個(gè)部分，分別為：表頭，表主題，表尾
<table>
<!--表頭-->
<thead>
<tr>
<th></th>
</tr>
</thead>
<!--表主體-->
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<!--表尾-->
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>HTML表單：
表單是用于顯示收集信息并提交信息到服務(wù)器，表單是一個(gè)包含表單元素的區(qū)域
倆要素：form元素，表單控件
表單是從瀏覽器向服務(wù)器傳輸數(shù)據(jù)的手段
表單元素：
定義表單使用成對的<form>標(biāo)記，表示要將此元素中所涵蓋的控件中的數(shù)據(jù)傳入到服務(wù)器
主要屬性：
??action?：表單提交URL；
?method?：數(shù)據(jù)提交方式；
?enctype?：表單數(shù)據(jù)進(jìn)行編碼的方式
表單控件：由許多不同類型的控件，其是一種HTML元素，是信息輸入項(xiàng)，包含
input元素（具有不同的外觀）:文本框，密碼框，單選框，按鈕…
其他元素：標(biāo)簽，文本域，下拉選
input元素
? 文本框 <input type = “text”/>
? 密碼框：<input type = “password”/>
? 主要屬性：value：由訪問者自由輸入任何文本
?Maxlength?：限制輸入的字符數(shù)
?Readonly?：設(shè)置文本控件的只讀
? 單選框: <input type =“radio”/>
? 復(fù)選框：<input type =“checkbox”/>
? 屬性：value：文本，當(dāng)提交form時(shí)，選中單選按鈕，則發(fā)送服務(wù)器
? Name：實(shí)現(xiàn)分組，一組單選框或者復(fù)選框名稱必須相同
? Check：設(shè)置選中
提交按鈕：<input type = "submit " value=“提交”/>傳送表單數(shù)據(jù)給服務(wù)器
重置按鈕：<input type = “reset” value=“重置”/>清空內(nèi)容，并 設(shè)為最初默認(rèn)狀態(tài)
普通按鈕：<input type = “button” value=""/>執(zhí)行客戶端腳本
隱藏域：<input type = “hidden”/>表單中包含但不希望用戶所見
文件選擇框：<input type = “file”/>選擇上傳的文件
其他元素：
? 標(biāo)簽：表單中的文本用于給控件設(shè)置顯示名稱
? 語法：<label for=“控件ID”>文本</label>
? 屬性：for：設(shè)置該文本所關(guān)聯(lián)的控件ID，關(guān)聯(lián)后點(diǎn)擊標(biāo)簽等同于點(diǎn)擊控件
? 文本域：多行文本框
? 語法：<textrea></textrea>
? 屬性：cols:指定文本域的列數(shù)；rows：指定文本域的行數(shù)； readonly：該文本域只讀
下拉選
語法：
<select>
<option></option>
</select>CSS概述
什么是CSS?
CSS是層疊樣式表（Cascading Style Sheets），樣式定義了如何顯示HTML元素，樣式通常儲(chǔ)存在樣式表中，CSS是HTML的化妝師
如何使用CSS？
內(nèi)聯(lián)樣式：定義在單個(gè)HTML元素中
內(nèi)部樣式表 ：定義在HTML的頭元素中
外部樣式表：將樣式定義在外部的CSS文件中（.css）,由HTML頁面引用樣式表文件
內(nèi)聯(lián)樣式：定義在HTML元素的屬性style里面
css語法：只需要將分號(hào)隔開的一個(gè)或多個(gè)屬性作為元素的style屬性值，屬性值之間用冒號(hào)（:）連接，多個(gè)屬性值之間用分號(hào)（;）隔開
內(nèi)部樣式表：在HTML的<head>元素內(nèi)部添加<style>元素
外部樣式表：樣式定義在獨(dú)立的CSS文件中，一個(gè)純文本文件，后綴為.css,該文件只包含樣式規(guī)則
使用方法：①創(chuàng)建外部樣式表文件
②引用該樣式文件
<link rel="stylesheet" type="text/css" href="文件地址值"\>
CSS語法規(guī)范：
CSS規(guī)則由倆個(gè)部分構(gòu)成：選擇器，以及一條或多條樣式聲明
CSS注釋：CSS注釋以 “/*” 開始, 以 “*/” 結(jié)束,
? /*這是個(gè)注釋*/
CSS規(guī)則特性
優(yōu)先級(jí)：同一個(gè)元素若存在多個(gè)CSS規(guī)則，對應(yīng)沖突的聲明以優(yōu)先級(jí)高者為準(zhǔn)（就近原則）
層疊性：同一個(gè)元素若存在多個(gè)CSS規(guī)則，對于不沖突的聲明可以疊加
繼承性：父元素的CSS聲明可以被子元素繼承，如字體，顏色
CSS選擇器
元素選擇器：能通過元素名來選擇 CSS 作用的目標(biāo)
類選擇器：能夠附帶 class 屬性的元素都可以使用此樣式聲明，將元素的 class 屬性設(shè)置為樣式類名，可以將類選擇器和元素選擇器結(jié)合使用，以實(shí)現(xiàn)對某種元素的中不同樣式的細(xì)分控制 (.class_name)
ID選擇器：以一種獨(dú)立于文檔元素的方式，它僅作用于id屬性的值 (#id_name)
選擇器組：選擇器聲明為以逗號(hào)隔開的選擇器列表，將一些相同的規(guī)則作用于多個(gè)元素
派生選擇器：用來選擇子元素
分類：后代選擇器：選擇某元素的后代（子孫）元素
子元素選擇器：選擇某元素的所有子元素
偽類選擇器：用于設(shè)置同一個(gè)元素在不同狀態(tài)下的樣式
常用偽類:
??:link?向未被訪問的超鏈接添加樣式
??:visited? 向已被訪問的添加樣式
:active?:向未激活的元素添加樣式
?:hover?:當(dāng)鼠標(biāo)懸停到元素上方時(shí)，添加樣式
??:focus?:當(dāng)元素獲取焦點(diǎn)時(shí)，向該元素添加樣式
?border?：用來設(shè)置元素的邊框
四邊設(shè)置：border：width值 style值 color值
單邊設(shè)置：border-left border-right border-top border-bottom
樣式單位：%：百分比 in：英寸 cm：厘米
? mm:毫米 pt 磅（1pt=1/72 in）
? Px像素 1em 等于當(dāng)前字體尺寸
?? Overflow?：當(dāng)內(nèi)容溢出元素邊框時(shí)
?? Visible? 不裁剪內(nèi)容，可顯示在內(nèi)容框外
?? Hidden? 裁剪內(nèi)容，不提供滾動(dòng)機(jī)制
?? Scroll? 裁剪內(nèi)容，提供滾動(dòng)機(jī)制
?? Auto? 如溢出，提供滾動(dòng)
Box框模型：
元素框的最內(nèi)部分是實(shí)際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素的背景。內(nèi)邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會(huì)遮擋其后的任何元素。
內(nèi)邊距、邊框和外邊距都是可選的，默認(rèn)值是零。但是，許多元素將由用戶代理樣式表設(shè)置外邊距和內(nèi)邊距?？梢酝ㄟ^將元素的 margin 和 padding 設(shè)置為零來覆蓋這些瀏覽器樣式。這可以分別進(jìn)行，也可以使用通用選擇器對所有元素進(jìn)行設(shè)置
- Margin - 清除邊框區(qū)域。Margin沒有背景顏色，它是完全透明
- Border - 邊框周圍的填充和內(nèi)容。邊框是受到盒子的背景顏色影響 `
- Padding - 清除內(nèi)容周圍的區(qū)域。會(huì)受到框中填充的背景顏色影響
- Content - 盒子的內(nèi)容，顯示文本和圖像
背景色：
background-color：用于為元素設(shè)置背景色，可接受任何合法的顏色值
背景圖片：
?background-image?：設(shè)置背景圖片，默認(rèn)值為none，表示背景上沒有放置任何圖像，如需設(shè)置，則需要起始字符附帶圖像的url地址
默認(rèn)情況下，背景圖片是在水平和垂直方向上重復(fù)出現(xiàn)的
?? background-repeate?：可控制背景圖片的平鋪效果
? ?repeate?：在水平和垂直方向重復(fù)
?? repeate-x?：在水平方向重復(fù)
?? repeate-y?：在垂直方向重復(fù)
?? no repeate?：僅顯示一次
? ?background-position?：用于改變背景圖片在元素中的位置
CSS文本格式化
控制字體：
font-family：value 1，value 2 指定字體
?font-size?：value 字體大小
?font-weight?：normal/bold 字體加粗
?color?：value 文本顏色
?Text-align?：left/right/center 文本排列
?Line-height?：value 行高
?Text-indent?：value 首行文本縮進(jìn)
表格樣式：
常用屬性：表格同樣使用box模型（邊框 ，內(nèi)邊距，寬，高）以及文本格式化屬性
表格特有屬性：如果設(shè)置了單元格邊框，相鄰單元格邊框 會(huì)單獨(dú)顯示，類似于雙線邊框
border-collapse：合并相鄰的邊框，設(shè)置是否將表格的邊框合并為一個(gè)邊框
顯示方式：元素都有自己默認(rèn)的選擇方式
塊元素：從上到下顯示，可以設(shè)置寬高 如：<P>,<div>,<h1>
行內(nèi)元素：從左到右顯示，不能設(shè)置寬高，如：<span>,<a>
行內(nèi)塊元素：從左到右顯示，可以設(shè)置寬高，<input>,<img>
除了默認(rèn)顯示效果外，可以用display屬性，修改元素的顯示方式
具體修改方式:
? display：none 表示不顯示該元素，釋放其占用的空間
? display：block 表示將元素的顯示方式設(shè)置為塊
? display：inline 表示將元素的顯示方式設(shè)置為行內(nèi)元素
? display：inline-block：表示將元素的顯示方式設(shè)置為行內(nèi)塊元素
定位：
定義元素框?qū)τ谄湔Ｎ恢脩?yīng)該出現(xiàn)的位置或相對于父元素另一個(gè)元素相對于瀏覽器窗口本身的位置
流定位：頁面中的塊級(jí)元素從上到下依次排列，每一個(gè)塊級(jí)元素都會(huì)出現(xiàn)在新的一行，元素框之間的垂直距離，由框的垂直外邊距計(jì)算得出
內(nèi)聯(lián)元素：在一行中從左到右，水平排列不需要換行，使用的是水平內(nèi)邊距，邊框和外邊距調(diào)整他們的間距
浮動(dòng)定位：將元素排除在普通流之外，將浮動(dòng)元素放置在包含框的左邊或者右邊，浮動(dòng)元素依舊包含于框之外，浮動(dòng)框可以向左或者向右移動(dòng)，直到外邊緣碰到包含框或者另一個(gè)浮動(dòng)框位為止，如需要設(shè)置框浮動(dòng)在包含框的左邊或者右邊，可以通過float屬性實(shí)現(xiàn)具體方向的移動(dòng)
任何元素都是可以移動(dòng)的 float：none/left/right
clear清除浮動(dòng)所帶來的影響：clear：none/left/right/both
相對定位：元素原本所占的空間不釋放，元素框會(huì)相對于原來的位置偏移某個(gè)距離，設(shè)置垂直或者水平，讓元素相對于它的起點(diǎn)進(jìn)行移動(dòng)
首先需要設(shè)置position屬性，其值為relative，然后使用left/right/top/bottom設(shè)置具體的偏移量
絕對定位：將元素的內(nèi)容從當(dāng)前定位中清除，釋放空間，并使用偏移量來固定元素的位置，相對于最近的祖先元素，若偏移元素沒有已定位的元素，那么它的位置就是相對于body元素的位置
? 首先設(shè)置position屬性，其值為absolute，然后使用left/right/top/bottom設(shè)置具體的偏移量
固定定位：將元素的內(nèi)容固定在頁面的某個(gè)位置，元素從普通流中完全移出，不占用頁面空間，當(dāng)用戶將頁面向下滾動(dòng)時(shí)，元素看不隨著移動(dòng)
? 首先設(shè)置position屬性，其值為fixed，然后使用left/right/bottom/top設(shè)置具體的偏移量
堆疊順序：一旦修改元素的定位方式，元素可能發(fā)生堆疊，可以使用z-index來控制有元素在框中出現(xiàn)的堆疊數(shù)值
? Z-index：value 數(shù)值越大，級(jí)別越高，越顯示在前
列表樣式：
List-style-type：用于控制列表中列表項(xiàng)標(biāo)志的一個(gè)樣式
無序列表：出現(xiàn)在各列旁邊的圓點(diǎn)
? 無需列表的取值：none：無標(biāo)記；disc：實(shí)心圓（默認(rèn)）；circle（空心圓）；square 實(shí)心方塊
有序列表：可能出現(xiàn)數(shù)字，字母或者其他用來排列計(jì)數(shù)
? 有序列表的取值：none：無標(biāo)記；decimal：數(shù)字；
? lower-roman：小寫羅馬數(shù)字 upper-roman：大寫羅馬數(shù)字
? list-style-image：使用圖像替換列表項(xiàng)，取值為url
JavaScript
什么是javaScript？
嵌入在HTML中在瀏覽器中的腳本語言，具有與java和C語言類似的語言，一種網(wǎng)頁的編程技術(shù)，用來向HTML頁面添加交互行為，直接嵌入HTML頁面，由瀏覽器解釋執(zhí)行代碼，不進(jìn)行預(yù)編譯
? 特點(diǎn)：可以使用任何文本工具編譯，由瀏覽器內(nèi)置的JavaScript引擎執(zhí)行代碼
? 解析執(zhí)行：事先不編譯，逐行執(zhí)行
? 基于對象：內(nèi)置大量線程對象
使用：客戶端的數(shù)據(jù)計(jì)算，客戶端表單合法性驗(yàn)證，瀏覽器事件觸發(fā)，網(wǎng)頁特殊顯示效果制作，服務(wù)器的異常數(shù)據(jù)提交
JavaScript程序的用法：
事件定義式：在時(shí)間定義時(shí)，直接寫JavaScript；
嵌入式：在使用Script標(biāo)簽
文件調(diào)用式:代碼位于單獨(dú)的(.js)文件中，html頁面引用js文件，在script標(biāo)簽中添加文件的地址（src=""）
JavaScript代碼錯(cuò)誤：
解釋性代碼，代碼錯(cuò)誤則頁面中無效果，可以打開網(wǎng)頁的"檢查""錯(cuò)誤控制臺(tái)"來查看錯(cuò)誤
JavaScript語法規(guī)范：
基本語法：由Unicode字符集編寫
注釋：單行：//注釋內(nèi)容 多行：/*注釋內(nèi)容*/
語句：表達(dá)式，關(guān)鍵字，運(yùn)算符，大小寫敏感，建議使用分號(hào)結(jié)尾一條語句
標(biāo)識(shí)符和關(guān)鍵字：
標(biāo)識(shí)符:不以數(shù)字開頭的字母，數(shù)字，下劃線和$組成
關(guān)鍵字：查看js手冊
變量：使用關(guān)鍵字var聲明變量，變量初始化使用"=="來賦值
沒有初始化的變量自動(dòng)取值為：undefined
變量無類型，統(tǒng)一使用var聲明，變量所引用的數(shù)據(jù)有類型
JavaScript數(shù)據(jù)類型：
特殊類型：null： 空 undefined：未定義
內(nèi)置對象：Number：數(shù)字 String：字符串 boolean：倆個(gè)值 true/false Array數(shù)組 function：函數(shù)
外部對象：window：瀏覽器對象 document：文檔對象
自定義對象：Object：自定義對象
String類型:
? 由Unicode字符，數(shù)字，標(biāo)點(diǎn)符號(hào)組成的字符序列，直接量需要一對單/雙引號(hào)括起
Number類型：
? 在JavaScript中不區(qū)分整型數(shù)值和浮點(diǎn)型數(shù)值，整型直接量：默認(rèn)的整數(shù)直接量為十進(jìn)制
Boolean類型：
? 僅有倆個(gè)值 true/false
數(shù)據(jù)類型轉(zhuǎn)換：
? ①數(shù)據(jù)類型之間隱式轉(zhuǎn)換
? ②轉(zhuǎn)換函數(shù)：
·toString：所有數(shù)據(jù)類型均可以轉(zhuǎn)換為String類型
·parseInt（）：強(qiáng)制轉(zhuǎn)換為整數(shù)，如不能轉(zhuǎn)換則出現(xiàn)NaN;
·parseFloat（）：強(qiáng)制轉(zhuǎn)換為浮點(diǎn)數(shù)，不能轉(zhuǎn)換會(huì)出現(xiàn)NaN;
·typeof：查看當(dāng)前類型，返回String/Number/boolean/object/Function/undefined
·isNaN（）：判斷被檢測表達(dá)式轉(zhuǎn)換后是否不是一個(gè)數(shù)，若不是數(shù)，則為true；否則為fasle
特殊數(shù)據(jù)類型：
? Null：程序中無值/無對象，可以給一個(gè)變量賦值為null來清除內(nèi)容
? Undefined：聲明變量，單位賦值/對象屬性不存在
運(yùn)算符：
算數(shù)運(yùn)算：+，-，*，/，%，++（自增），–（自減）
關(guān)系運(yùn)算：>，>=，<，<=，!=，==
? ===：全等：類型相同，數(shù)值相同
? ！==：不全等
邏輯運(yùn)算：與：&&；或：||；非（?。?/p>
條件運(yùn)算：三目運(yùn)算：表達(dá)式？表達(dá)式1：表達(dá)式2
控制語句：任何復(fù)雜的程序都可以通過順序結(jié)構(gòu)，分支結(jié)構(gòu)，循環(huán)結(jié)構(gòu)三種基本程序執(zhí)行，默認(rèn)結(jié)構(gòu)為順序結(jié)構(gòu)
分支結(jié)構(gòu)：if語句；switch-case與break聯(lián)合使用
循環(huán)結(jié)構(gòu)：for循環(huán)，while循環(huán)，do-while循環(huán)
JavaScript對象概述
對象是JavaScript中最重要的API，其中包含最多種對象，比如：內(nèi)置對象，外部對象（window對象，dom對象），自定義對象
如何使用對象？
對象包含屬性和函數(shù)，
訪問對象的屬性：對象.屬性訪問對象的方法： 對象.方法名
常見內(nèi)置對象：
String對象：
創(chuàng)建對象：var str = "hello"; var str=new String ("hello");
String對象的屬性:length
常用方法：大小寫轉(zhuǎn)換：x.tolowerCase ; x.toUpperCase()
獲取指定字符：x.charAt(index) 返回指定位置的字符
? X.charCodeAt(index):返回指定位置的字符的Unicode編碼
查詢指定字符串：x.indexOf(findstr,[index]); x.lastindexOf(findstr,[index])
使用說明：findstr：查找的字符串；index：開始查找的位置索引，可以省略，如果沒有找到則返回-1；lastindexOf：從后面開始找起
獲取子字符串：x.substring(start,[end])
? 使用說明：start：開始位置；end：結(jié)束位置
替換子字符串：X.replace（findstr，tostr）
? 使用說明：findstr：要找的子字符串；tostr：替換的字符串
拆分字符串：x.split(bystr,[howmarny])
? 使用說明：bystr分割用的字符串；howmarny返回的數(shù)組最大長度
Number對象：
Number對象是數(shù)值對象，創(chuàng)建方法為var num=123；
常用方法：toFixed（num）轉(zhuǎn)換為字符串，并保留小數(shù)點(diǎn)后一定位數(shù)
Array對象：
創(chuàng)建數(shù)組對象：
var a1 = new Array（）；var a2 =new Array（6）；
var a3 =new Array（100，"a",true）;
var a4 = \[100 ,200,300\];獲取數(shù)組元素的個(gè)數(shù)：.length；
數(shù)組長度可變；
數(shù)組的倒序與排序：
X.reverse（） 反向數(shù)組，改變數(shù)組X中數(shù)值的順序
X.sort（sortfunc）數(shù)組排序：sortfunc：可選項(xiàng)，用來確定元素的函數(shù)名稱
Math對象：
Math對象用于執(zhí)行數(shù)學(xué)任務(wù)，無需創(chuàng)建，直接把math作為對象使用可以調(diào)用所有的屬性和方法
三角函數(shù)：Math.sin(x),Math.COS(X),math.tan(x)
計(jì)算函數(shù)：Math.log(x)…
數(shù)值比較函數(shù)：
Date對象：
用于處理日期和時(shí)間，封裝了系統(tǒng)毫秒數(shù)
創(chuàng)建方法：var now = new Date（）
常用方法：讀寫時(shí)間毫秒數(shù)：getTime（）；setTime（）
讀寫時(shí)間分量:getDate();getDay;setDate();setDay;toString…
RegExp對象
表示正則表達(dá)式 var rge = new RegExp（）；
常用方法：
? x.replace（regexp，tostr）
? x.match(regexp)
? x.search(regexp)
?? exec(str)?檢索字符串中指定的值，返回找到的值
?? test(str)?檢索字符串中指定的值，返回 true 或 false
使用說明：
?? regexp?代表正則表達(dá)式或字符串
?? replace?返回替換后的結(jié)果
?? match?返回匹配字符串的數(shù)組
?? search?返回匹配字符串的首字符位置索引
Function對象
JS中函數(shù)就是Function對象，函數(shù)名就是指向Function對象的引用，使用函數(shù)名就可以訪問函數(shù)對象
函數(shù)的返回值：默認(rèn)返回undefined，可以使用return返回具體的值
函數(shù)的參數(shù)：JS的函數(shù)沒有重載；調(diào)用時(shí)只要函數(shù)名一樣，無論傳入多少個(gè)參數(shù)，調(diào)用的都是同一個(gè)函數(shù)；沒有接收的實(shí)參的參數(shù)值是undefined；所有的參數(shù)傳遞給arguments數(shù)組對象
Arguments：是一特殊的對象，在函數(shù)代碼中，表示函數(shù)的參數(shù)數(shù)組，在函數(shù)代碼中可以使用arguments訪問所有參數(shù)
–arguments.length函數(shù)的參數(shù)個(gè)數(shù)
–arguments[i]:第i個(gè)參數(shù)
–可以使用arguments實(shí)現(xiàn)可變參數(shù)的函數(shù)
使用Function對象創(chuàng)建函數(shù)：
var abc = new Function（"x","y","return(x+y)"）
var result = abc(2,3);
Alert(result)//5
Alert(abc)//Function（"x","y","return(x+y)"）匿名函數(shù)：
Var func = Function（x，y）{return（x+y）}
Eval函數(shù)
? Eval用于計(jì)算表達(dá)式字符串，或用于執(zhí)行字符串中的JS代碼
? 只接收原始字符串作為參數(shù)，如果參數(shù)中沒有合法的表達(dá)式和語句，拋出異常
? var s1 = “2+3”; eval(s1) //5
外部對象概述
·BOM（Browser Object Model）：
? 瀏覽器對象模型，用來訪問和操作瀏覽器窗口，是JavaScript有能力和瀏覽器"對話"，通過操作BOM，可以動(dòng)窗口，更改狀態(tài)欄文本，執(zhí)行其他不與頁面內(nèi)容發(fā)生直接聯(lián)系的操作
·DOM（Document Object Model）
? 文檔對象模型，用來操作文檔，定義了訪問和操作HTML文檔的標(biāo)準(zhǔn)方法
·WINDOW對象：表示瀏覽器窗口
常用屬性：
?? Document?：窗口中顯示的HTML文檔對象
? ?History?：瀏覽器窗口的歷史記錄對象
? ?Location?：窗口文件地址對象
? ?Screen?：當(dāng)前屏幕對象
? ?Navigator?：瀏覽器相關(guān)信息
常用方法：
? alert（）；confirm（）
? setTimeout（）；clearTimeout（）
? setInterval（）；clearInterval（）
對話框：
? alert（str）提示對話框 ，顯示str字符串內(nèi)容
? confirm（str）確認(rèn)對話框，顯示str字符串內(nèi)容，按"確定"按鈕返回true，其他則返回false
定時(shí)器：
? 多用于網(wǎng)頁的動(dòng)態(tài)時(shí)鐘，制作倒計(jì)時(shí)，跑馬燈效果等
? 周期性時(shí)鐘：以一定的間隔執(zhí)行代碼，循環(huán)往復(fù)
? 一次性時(shí)鐘：在一個(gè)設(shè)定的時(shí)間間隔之后執(zhí)行代碼，而不是在函數(shù)被調(diào)用后立即執(zhí)行
周期性定時(shí)器：
? setInterval（exp，time） exp：執(zhí)行語句 time：時(shí)間間隔
? clearInterval（tID）停止啟動(dòng)的定時(shí)器
一次性定時(shí)器：
? setTimeout（exp，time）exp：執(zhí)行語句 time：時(shí)間間隔，返回已經(jīng)啟動(dòng)的定時(shí)器
? clearTimeout（tID）停止啟動(dòng)的定時(shí)器
常用屬性：
?Screen?對象：包含有關(guān)客戶端顯示屏幕的信息，常用于獲取屏幕的分辨率和色彩 Width/height/availwidth/availHeight
?History?對象：包含用戶訪問過的URL
?? length?屬性：瀏覽器歷史記錄列表中的URL數(shù)量
?? back（）?：等同于后退按鈕
?? forword（）?：等同于前進(jìn)按鈕
?? go（num）?：等同于單機(jī)前后或后退num次
Location對象：
? Location對象包含有關(guān)當(dāng)前的URL信息，常用于獲取或改變當(dāng)前瀏覽的網(wǎng)址
? href屬性：當(dāng)前窗口正在瀏覽器的網(wǎng)頁地址
? reload（）：重新載入當(dāng)前網(wǎng)址，等同于刷新按鈕
Navigator對象:
? 包含有關(guān)瀏覽器的信息，常用于獲取客戶端瀏覽器和操作系統(tǒng)信息
DOM概述
DOM（document object model）文檔對象模型
當(dāng)網(wǎng)頁被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁面的文檔對象模型，通過可編程的對象模型。javaScript 獲得了足夠的能力來創(chuàng)建動(dòng)態(tài)的 HTML，JavaScript可以改變頁面中的所有 HTML 元素，屬性，CSS 樣式以及對頁面中的所有事件做出反應(yīng)
DOM節(jié)點(diǎn)樹：DOM模型被構(gòu)造為對象的數(shù)，這棵樹的根就是 document 對象
DOM操作包括：查找節(jié)點(diǎn)，讀取節(jié)點(diǎn)信息，修改節(jié)點(diǎn)信息，創(chuàng)建新節(jié)點(diǎn)，刪除節(jié)點(diǎn)
讀取，修改節(jié)點(diǎn)信息：
? nodeName：節(jié)點(diǎn)名稱
? 元素節(jié)點(diǎn)和屬性節(jié)點(diǎn)：標(biāo)簽或?qū)傩缘拿Q
? 文本節(jié)點(diǎn)：永遠(yuǎn)是text
? 文檔節(jié)點(diǎn)：永遠(yuǎn)的document
nodeType：節(jié)點(diǎn)類型
? 返回?cái)?shù)值：若是元素節(jié)點(diǎn)，返回1；屬性節(jié)點(diǎn)：2；
? 文本節(jié)點(diǎn)：3；注解節(jié)點(diǎn)：8；文檔節(jié)點(diǎn)：9
元素節(jié)點(diǎn)的內(nèi)容：
?? innerText?：設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的文本
?? innerHTML?：設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的 HTML
節(jié)點(diǎn)屬性：
? ?getAttribute（）?方法，根據(jù)屬性名稱獲取屬性的值
?? SetAttribute（）?方法
? RemoveAttribute（）
? 將HTML標(biāo)記，屬性和CSS都對象化
元素節(jié)點(diǎn)的樣式：
? style屬性：node.style.color;node.style.fontsize
? className屬性：動(dòng)態(tài)綁定樣式
查詢
查詢節(jié)點(diǎn)：
? 如果需要操作HTML元素，必須首先找到該元素，查詢節(jié)點(diǎn)的方式有
- 通過id查詢
- 通過層次（節(jié)點(diǎn)關(guān)系）查詢
- 通過標(biāo)簽名稱查詢
- 通過name屬性查詢根據(jù)元素的id查詢節(jié)點(diǎn)：document.getElementById();通過指定的id來返回元素節(jié)點(diǎn)，查詢整個(gè)HTML文檔中的任何HTML元素，如果id值錯(cuò)誤，返回null
根據(jù)層次查詢：
?? parentNode?：遵循文檔的上下層次結(jié)構(gòu)，查找單個(gè)父節(jié)點(diǎn)
?? childNodes?：遵頊文檔的上下層次結(jié)構(gòu)，查找多個(gè)子節(jié)點(diǎn)
根據(jù)標(biāo)簽名查詢：
? getElementByTagName（）根據(jù)指定的標(biāo)簽名返回所有元素，查找整個(gè)HTML文檔的所有元素，如果標(biāo)簽名錯(cuò)誤，返回長度為0的節(jié)點(diǎn)列表
? 若返回一個(gè)節(jié)點(diǎn)列表（數(shù)組），使用節(jié)點(diǎn)列表的length屬性獲取個(gè)數(shù)，[index]:定位具體的元素
根據(jù)name屬性查詢：
? document.getElementByName（）：根據(jù)標(biāo)簽的name屬性的值進(jìn)行查詢
增加
創(chuàng)建新節(jié)點(diǎn)：document.createElement(name) name:要?jiǎng)?chuàng)建元素的標(biāo)簽名稱，返回新創(chuàng)建的節(jié)點(diǎn)
添加新節(jié)點(diǎn)：parentNode.appendChild(newNode)
?newNode?:新節(jié)點(diǎn)作為父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)進(jìn)行添加
parentNode.insertBefore(newNode,refNode) refNode是參考節(jié)點(diǎn)，新節(jié)點(diǎn)位于此節(jié)點(diǎn)之前添加
刪除
刪除節(jié)點(diǎn)： ?node.removeChild(childNode)?:刪除某個(gè)子節(jié)點(diǎn)，childNode必須是 node 的子節(jié)點(diǎn)
事件
概述：指頁面元素狀態(tài)改變，用戶在操作鼠標(biāo)或者鍵盤時(shí)觸發(fā)的動(dòng)作，具體包括：鼠標(biāo)事件，鍵盤事件，狀態(tài)改變事件…
?Event?： 事件觸發(fā)后會(huì)產(chǎn)生一個(gè) event 對象
事件屬性：
鼠標(biāo)事件：onclick 單擊事件 ondblclick 雙擊事件
?onmouseover?：鼠標(biāo)移入事件
?onmouseout?：鼠標(biāo)移出事件
?onmousedown?：鼠標(biāo)點(diǎn)擊事件
?onmouseup?：鼠標(biāo)松開事件
event對象：
? 任何事件觸發(fā)后會(huì)產(chǎn)生一個(gè) event 對象，event 對象記錄事件發(fā)生時(shí)的鼠標(biāo)位置，鍵盤按鍵狀態(tài)和觸發(fā)對象等信息
JQuery
JQuery 是一個(gè)優(yōu)秀的 JavaScript 框架，一個(gè)輕量級(jí)的 JS 庫，它封裝了 JS,CSS,DOM 提供了一致的，簡潔的 API,使用戶更加方便的處理HTML，實(shí)現(xiàn)動(dòng)畫效果，并且方便為網(wǎng)站提供 Ajax 交互模型，使用戶的 HTML 頁面保持代碼和 HTML 內(nèi)容分離
使用JQuery
JQuery 的使用步驟：
- 引入 JQuery 的 js 文件
- 使用選擇器定位操作節(jié)點(diǎn)
- 調(diào)用 JQuery 的方法進(jìn)行操作什么是 JQuery 對象？JQuery 對象本質(zhì)上是一個(gè) DOM 對象數(shù)組，它在該數(shù)組上擴(kuò)展了一些操作數(shù)組中元素的方法 Obj.length:獲取數(shù)組的長度Obj.get(index):獲取數(shù)組中的某一個(gè) DOM 對象 Obj[index]:等價(jià)于obj.get(index)DOM對象轉(zhuǎn)換為 JQuery 對象：$(DOM對象)
JQuery選擇器：
JQuery選擇器類似于CSS選擇器（定位元素），能夠?qū)崿F(xiàn)定位元素，添加行為，使用JQuery選擇器能夠?qū)?nèi)容與行為分離
選擇器的分類：基本選擇器，層次選擇器，過濾選擇器，表單選擇器
基本選擇器：
? 元素選擇器：根據(jù)標(biāo)簽來定位元素 $(“標(biāo)簽名”)
? 類選擇器：根據(jù)class屬性定位元素 $(".class屬性名")
? Id選擇器：根據(jù)id屬性定位元素 $("#id屬性名")
? 選擇器組：定位一組選擇器所對應(yīng)的所有元素 $("#id,name")
層次選擇器：
? 在select1元素下，選中所有滿足select2的子孫（后代）元素 $(“select1 select2”)
? 在select1元素下，選擇所有滿足select2的子元素
? $(“select1>select2”)
過濾選擇器：
根據(jù)元素的基本特征定位元素，常用于表格和列表
?? first：?第一個(gè)元素；?last：?最后一個(gè)元素
?? not（selector）?把 selector 排除在外
?? even? 挑選偶數(shù)行 ?odd ?挑選奇數(shù)行
?? eq（index）?下標(biāo)等于index元素
?? gt（index）?下標(biāo)大于index的元素
?? lt（index）?下標(biāo)小于index的元素
內(nèi)容過濾選擇器：
根據(jù)文本內(nèi)容定位元素
? ?contains（text）?匹配包含給定文本的元素
? ?empty? 匹配所有不包含子元素或文本的空元素
可見性過濾選擇器：
?? hidden?：匹配所有不可見元素
?? visible?：匹配所有的可見元素
屬性過濾選擇器：
? 根據(jù)屬性定位元素
? [attribute]匹配具有 attribute 屬性的元素
狀態(tài)過濾選擇器：
? 根據(jù)狀態(tài)定位元素
表單選擇器：
? 包括：text：匹配文本框 password：匹配密碼框…
讀寫節(jié)點(diǎn)：
讀寫節(jié)點(diǎn)的HTML內(nèi)容：
? 讀入：obj.html() 寫出：obj.html(“寫出內(nèi)容”)
讀寫節(jié)點(diǎn)的文本內(nèi)容：
? 讀入：obj.text() 寫出：obj.text(“寫出內(nèi)容”)
讀寫節(jié)點(diǎn)的value屬性值 ：
? 讀入：obj.val() 寫出：obj.val(“寫出內(nèi)容”)
讀寫節(jié)點(diǎn)的屬性值：
? 讀入：obj.attr(“屬性名”) 寫出：obj.attr(“屬性名”，“屬性值”)
增刪節(jié)點(diǎn)：
創(chuàng)建DOM節(jié)點(diǎn)：$(’‘節(jié)點(diǎn)內(nèi)容’’)
插入DOM節(jié)點(diǎn)：
? ?parent.append(obj)? 作為最后一個(gè)子節(jié)點(diǎn)添加
? ?parent.prepend(obj)? 作為第一個(gè)子節(jié)點(diǎn)添加
刪除DOM節(jié)點(diǎn)：
? ?Obj.remove()? 刪除節(jié)點(diǎn)
? ?Obj.remove(selector)? 只刪除滿足 selector 的節(jié)點(diǎn)
? ?Obj.empty() ?清空節(jié)點(diǎn)
樣式：
? ?addClass（" "）?追加樣式
? ?removeClass（" "）?移出指定樣式
? ?removeClass() ?移出所有樣式
? ?toggleClass（" "）?切換樣式
? ?hasClass（""）?判斷是否有這個(gè)樣式
? ?css（""）?讀取css的值
? ?css（"",""）?設(shè)置多個(gè)樣式
遍歷節(jié)點(diǎn)：
?children（）?取得一個(gè)包含匹配的元素集合中的每一個(gè)元素的所有子元素的元素集合
?parent（）? 父節(jié)點(diǎn)
事件處理：參考手冊
等待頁面加載完畢后執(zhí)行：$(function(){…})
獲得事件對象 event
只需要對事件處理函數(shù)傳遞一個(gè)參數(shù) 如：$obj.click(function(e){…}); e 就是事件對象，已經(jīng)經(jīng)過了 JQuery 的底層事件對象的封裝，封裝后的事件對象可以方便的兼容各瀏覽器
事件的常用屬性：
? 獲取事件源：e.target 返回值就是DOM對象
：匹配所有的可見元素
屬性過濾選擇器：
? 根據(jù)屬性定位元素
? [attribute]匹配具有 attribute 屬性的元素
狀態(tài)過濾選擇器：
? 根據(jù)狀態(tài)定位元素
表單選擇器：
包括：
text：匹配文本框
password：匹配密碼框…
讀寫節(jié)點(diǎn)：
讀寫節(jié)點(diǎn)的HTML內(nèi)容：
? 讀入：obj.html() 寫出：obj.html(“寫出內(nèi)容”)
讀寫節(jié)點(diǎn)的文本內(nèi)容：
? 讀入：obj.text() 寫出：obj.text(“寫出內(nèi)容”)
讀寫節(jié)點(diǎn)的value屬性值 ：
? 讀入：obj.val() 寫出：obj.val(“寫出內(nèi)容”)
讀寫節(jié)點(diǎn)的屬性值：
? 讀入：obj.attr(“屬性名”) 寫出：obj.attr(“屬性名”，“屬性值”)
增刪節(jié)點(diǎn)：
創(chuàng)建DOM節(jié)點(diǎn)：?$("節(jié)點(diǎn)內(nèi)容")?
插入DOM節(jié)點(diǎn)：
??parent.append(obj) ?作為最后一個(gè)子節(jié)點(diǎn)添加
?? parent.prepend(obj)? 作為第一個(gè)子節(jié)點(diǎn)添加
刪除DOM節(jié)點(diǎn)：
? ?Obj.remove()? 刪除節(jié)點(diǎn)
? ?Obj.remove(selector)? 只刪除滿足 selector 的節(jié)點(diǎn)
? ?Obj.empty()? 清空節(jié)點(diǎn)
樣式：
?? addClass（" "）?追加樣式
? ?removeClass（" "）?移出指定樣式
? ?removeClass()? 移出所有樣式
?? toggleClass（" "）?切換樣式
? ?hasClass（""）?判斷是否有這個(gè)樣式
? ?css（""）?讀取css的值
?? css（"",""）?設(shè)置多個(gè)樣式
遍歷節(jié)點(diǎn)：
?children（）?取得一個(gè)包含匹配的元素集合中的每一個(gè)元素的所有子元素的元素集合
?parent（）? 父節(jié)點(diǎn)
事件處理：參考手冊
等待頁面加載完畢后執(zhí)行：$(function(){…})
獲得事件對象event
只需要對事件處理函數(shù)傳遞一個(gè)參數(shù) 如：$obj.click(function(e){…}); e 就是事件對象，已經(jīng)經(jīng)過了JQuery 的底層事件對象的封裝，封裝后的事件對象可以方便的兼容各瀏覽器
事件的常用屬性：
? 獲取事件源：e.target 返回值就是DOM對象
? 獲取鼠標(biāo)點(diǎn)擊的坐標(biāo) e.pageX e.pageY
