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