HTML、CSS、JS的基礎知識點有哪些

發布時間：2022-02-21 10:15:45 來源：億速云閱讀：166 作者：iii 欄目：開發技術

本篇內容介紹了“HTML、CSS、JS的基礎知識點有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

Web概述

Web三要素：瀏覽器，服務器，HTTP協議

HTML工作原理：HTML是部署在服務器上的文本文件，根據HTTP協議瀏覽器發出請求給服務器，服務器做出響應給瀏覽器返回一個HTML，瀏覽器解釋執行HTML，從而顯示內容

什么是HTML？

HTML是超文本標記語言（Hyper Text Markup Language）,一種純文本類型的語言，用來設計網頁的標記語言，用該語言編寫的文件以.html或者.htm為后綴，由瀏覽器解釋執行，在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標題：

標題是通過<h2>~<h7>標簽進行定義的，目的是為了能夠以醒目的方式顯示，<h2>定義最大標題，<h7>定義最小標題

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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分區元素：

用于元素的一些分組，常用于頁面布局，塊分區元素<div></div>,行內分區元素<span></span>

元素顯示方式：

塊級元素：默認情況下，塊級元素獨占一行，即元素前后都會自動換行，比如<p>,<div>

行內元素：不會換行,與其他行內元素位于同一行

<span>元素是內聯元素,可用作文本的容器，無特定的含義

<i>元素定義斜體字

<em>定義著重文字

<del>用來定義帶刪除線的文字

<u>用來定義帶下劃線的文字

空格折疊：默認情況下，HTML中的多個空格，多個換行符會壓縮成單個空格，即只顯示一個空格

實體引用：空格：&nbsp；（小于號）<:< （大于號） >:&gt；

HTML圖像：

使用<img>元素可以將圖片添加到頁面

語法：<img src=“url” >

常用屬性：width,height

src指的是"source",原屬性的值是圖像的URL地址，但是地址值分為絕對路徑和相對路徑

絕對路徑：文件從最高級目錄下開始的完整路徑，無論當前路徑是什么，使用絕對路徑后總能找到要連接的文件

相對路徑：文件的位置是相對于當前的文件位置，包括目錄名或指向一個可以從當前目錄出發找到的文件

HTML超鏈接：<a href =“url”,target="">

href 屬性：鏈接地址 URL target 屬性：目標的打開方式

錨點：文檔中某行的一個記號，用于鏈接到文檔中的某個位置

鏈接錨點：在錨點前加 # <a href ="#g1">內容</a>

定義錨點：<a name=“g1”>內容</a>

倆者需對應使用，前后呼應

HTML表格

表格是由<table>標簽來定義的，通常用來組織結構化信息，是被稱作單元格的矩形框，按照從左到右，從上到下的順序排列在一起而形成的，表格的數據保存在單元格里

創建表格：<table></table>

創建行：<tr></tr>

創建列：<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表單：

表單是用于顯示收集信息并提交信息到服務器，表單是一個包含表單元素的區域

倆要素：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時，選中單選按鈕，則發送服務器

Name：實現分組，一組單選框或者復選框名稱必須相同

Check：設置選中

提交按鈕：<input type = "submit " value=“提交”/>傳送表單數據給服務器

重置按鈕：<input type = “reset” value=“重置”/>清空內容，并設為最初默認狀態

普通按鈕：<input type = “button” value=""/>執行客戶端腳本

隱藏域：<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,該文件只包含樣式規則

使用方法：①創建外部樣式表文件

②引用該樣式文件

CSS語法規范：

CSS規則由倆個部分構成：選擇器，以及一條或多條樣式聲明

CSS注釋：CSS注釋以 “/*” 開始, 以 “*/” 結束,

/*這是個注釋*/

CSS規則特性

優先級：同一個元素若存在多個CSS規則，對應沖突的聲明以優先級高者為準（就近原則）

層疊性：同一個元素若存在多個CSS規則，對于不沖突的聲明可以疊加

繼承性：父元素的CSS聲明可以被子元素繼承，如字體，顏色

CSS選擇器

元素選擇器：能通過元素名來選擇 CSS 作用的目標

類選擇器：能夠附帶 class 屬性的元素都可以使用此樣式聲明，將元素的 class 屬性設置為樣式類名，可以將類選擇器和元素選擇器結合使用，以實現對某種元素的中不同樣式的細分控制 (.class_name)

ID選擇器：以一種獨立于文檔元素的方式，它僅作用于id屬性的值 (#id_name)

選擇器組：選擇器聲明為以逗號隔開的選擇器列表，將一些相同的規則作用于多個元素

派生選擇器：用來選擇子元素

分類：后代選擇器：選擇某元素的后代（子孫）元素

子元素選擇器：選擇某元素的所有子元素

偽類選擇器：用于設置同一個元素在不同狀態下的樣式

常用偽類:

: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 - 清除邊框區域。Margin沒有背景顏色，它是完全透明
Border - 邊框周圍的填充和內容。邊框是受到盒子的背景顏色影響 `
Padding - 清除內容周圍的區域。會受到框中填充的背景顏色影響
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>,<h2>

行內元素：從左到右顯示，不能設置寬高，如：<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設置具體的偏移量

堆疊順序：一旦修改元素的定位方式，元素可能發生堆疊，可以使用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頁面，由瀏覽器解釋執行代碼，不進行預編譯

特點：可以使用任何文本工具編譯，由瀏覽器內置的JavaScript引擎執行代碼

解析執行：事先不編譯，逐行執行

基于對象：內置大量線程對象

使用：客戶端的數據計算，客戶端表單合法性驗證，瀏覽器事件觸發，網頁特殊顯示效果制作，服務器的異常數據提交

JavaScript程序的用法：

事件定義式：在時間定義時，直接寫JavaScript；

嵌入式：在使用Script標簽

文件調用式:代碼位于單獨的(.js)文件中，html頁面引用js文件，在script標簽中添加文件的地址（src=""）

JavaScript代碼錯誤：

解釋性代碼，代碼錯誤則頁面中無效果，可以打開網頁的"檢查""錯誤控制臺"來查看錯誤

JavaScript語法規范：

基本語法：由Unicode字符集編寫

注釋：單行：//注釋內容多行：/*注釋內容*/

語句：表達式，關鍵字，運算符，大小寫敏感，建議使用分號結尾一條語句

標識符和關鍵字：

標識符:不以數字開頭的字母，數字，下劃線和$組成

關鍵字：查看js手冊

變量：使用關鍵字var聲明變量，變量初始化使用"=="來賦值

沒有初始化的變量自動取值為：undefined

變量無類型，統一使用var聲明，變量所引用的數據有類型

JavaScript數據類型：

特殊類型：null：空 undefined：未定義

內置對象：Number：數字 String：字符串 boolean：倆個值 true/false Array數組 function：函數

外部對象：window：瀏覽器對象 document：文檔對象

自定義對象：Object：自定義對象

String類型:

由Unicode字符，數字，標點符號組成的字符序列，直接量需要一對單/雙引號括起

Number類型：

在JavaScript中不區分整型數值和浮點型數值，整型直接量：默認的整數直接量為十進制

Boolean類型：

僅有倆個值 true/false

數據類型轉換：

①數據類型之間隱式轉換

②轉換函數：

·toString：所有數據類型均可以轉換為String類型

·parseInt（）：強制轉換為整數，如不能轉換則出現NaN;

·parseFloat（）：強制轉換為浮點數，不能轉換會出現NaN;

·typeof：查看當前類型，返回String/Number/boolean/object/Function/undefined

·isNaN（）：判斷被檢測表達式轉換后是否不是一個數，若不是數，則為true；否則為fasle

特殊數據類型：

Null：程序中無值/無對象，可以給一個變量賦值為null來清除內容

Undefined：聲明變量，單位賦值/對象屬性不存在

運算符：

算數運算：+，-，*，/，%，++（自增），–（自減）

關系運算：>，>=，<，<=，!=，==

===：全等：類型相同，數值相同

！==：不全等

邏輯運算：與：&&；或：||；非（！）

條件運算：三目運算：表達式？表達式1：表達式2

控制語句：任何復雜的程序都可以通過順序結構，分支結構，循環結構三種基本程序執行，默認結構為順序結構

分支結構：if語句；switch-case與break聯合使用

循環結構：for循環，while循環，do-while循環

JavaScript對象概述

對象是JavaScript中最重要的API，其中包含最多種對象，比如：內置對象，外部對象（window對象，dom對象），自定義對象

如何使用對象？

對象包含屬性和函數，

訪問對象的屬性：對象.屬性訪問對象的方法：對象.方法名

常見內置對象：

String對象：

創建對象：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對象是數值對象，創建方法為var num=123；

常用方法：toFixed（num）轉換為字符串，并保留小數點后一定位數

Array對象：

創建數組對象：

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對象用于執行數學任務，無需創建，直接把math作為對象使用可以調用所有的屬性和方法

三角函數：Math.sin(x),Math.COS(X),math.tan(x)

計算函數：Math.log(x)…

數值比較函數：

Date對象：

用于處理日期和時間，封裝了系統毫秒數

創建方法：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對象創建函數：

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用于計算表達式字符串，或用于執行字符串中的JS代碼

只接收原始字符串作為參數，如果參數中沒有合法的表達式和語句，拋出異常

var s1 = “2+3”; eval(s1) //5

外部對象概述

·BOM（Browser Object Model）：

瀏覽器對象模型，用來訪問和操作瀏覽器窗口，是JavaScript有能力和瀏覽器"對話"，通過操作BOM，可以動窗口，更改狀態欄文本，執行其他不與頁面內容發生直接聯系的操作

·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

定時器：

多用于網頁的動態時鐘，制作倒計時，跑馬燈效果等

周期性時鐘：以一定的間隔執行代碼，循環往復

一次性時鐘：在一個設定的時間間隔之后執行代碼，而不是在函數被調用后立即執行

周期性定時器：

setInterval（exp，time） exp：執行語句 time：時間間隔

clearInterval（tID）停止啟動的定時器

一次性定時器：

setTimeout（exp，time）exp：執行語句 time：時間間隔，返回已經啟動的定時器

clearTimeout（tID）停止啟動的定時器

常用屬性：

Screen對象：包含有關客戶端顯示屏幕的信息，常用于獲取屏幕的分辨率和色彩 Width/height/availwidth/availHeight

History對象：包含用戶訪問過的URL

length屬性：瀏覽器歷史記錄列表中的URL數量

back（）：等同于后退按鈕

forword（）：等同于前進按鈕

go（num）：等同于單機前后或后退num次

Location對象：

Location對象包含有關當前的URL信息，常用于獲取或改變當前瀏覽的網址

href屬性：當前窗口正在瀏覽器的網頁地址

reload（）：重新載入當前網址，等同于刷新按鈕

Navigator對象:

包含有關瀏覽器的信息，常用于獲取客戶端瀏覽器和操作系統信息

DOM概述

DOM（document object model）文檔對象模型

當網頁被加載時，瀏覽器會創建頁面的文檔對象模型，通過可編程的對象模型。javaScript 獲得了足夠的能力來創建動態的 HTML，JavaScript可以改變頁面中的所有 HTML 元素，屬性，CSS 樣式以及對頁面中的所有事件做出反應

DOM節點樹：DOM模型被構造為對象的數，這棵樹的根就是 document 對象

DOM操作包括：查找節點，讀取節點信息，修改節點信息，創建新節點，刪除節點

讀取，修改節點信息：

nodeName：節點名稱

元素節點和屬性節點：標簽或屬性的名稱

文本節點：永遠是text

文檔節點：永遠的document

nodeType：節點類型

返回數值：若是元素節點，返回1；屬性節點：2；

文本節點：3；注解節點：8；文檔節點：9

元素節點的內容：

innerText：設置或獲取位于對象起始和結束標簽內的文本

innerHTML：設置或獲取位于對象起始和結束標簽內的 HTML

節點屬性：

getAttribute（）方法，根據屬性名稱獲取屬性的值

SetAttribute（）方法

RemoveAttribute（）

將HTML標記，屬性和CSS都對象化

元素節點的樣式：

style屬性：node.style.color;node.style.fontsize

className屬性：動態綁定樣式

查詢

查詢節點：

如果需要操作HTML元素，必須首先找到該元素，查詢節點的方式有

通過id查詢
通過層次（節點關系）查詢
通過標簽名稱查詢
通過name屬性查詢根據元素的id查詢節點：document.getElementById();通過指定的id來返回元素節點，查詢整個HTML文檔中的任何HTML元素，如果id值錯誤，返回null

根據層次查詢：

parentNode：遵循文檔的上下層次結構，查找單個父節點

childNodes：遵頊文檔的上下層次結構，查找多個子節點

根據標簽名查詢：

getElementByTagName（）根據指定的標簽名返回所有元素，查找整個HTML文檔的所有元素，如果標簽名錯誤，返回長度為0的節點列表

若返回一個節點列表（數組），使用節點列表的length屬性獲取個數，[index]:定位具體的元素

根據name屬性查詢：

document.getElementByName（）：根據標簽的name屬性的值進行查詢

增加

創建新節點：document.createElement(name) name:要創建元素的標簽名稱，返回新創建的節點

添加新節點：parentNode.appendChild(newNode)

newNode:新節點作為父節點的最后一個子節點進行添加

parentNode.insertBefore(newNode,refNode) refNode是參考節點，新節點位于此節點之前添加

刪除

刪除節點： node.removeChild(childNode):刪除某個子節點，childNode必須是 node 的子節點

事件

概述：指頁面元素狀態改變，用戶在操作鼠標或者鍵盤時觸發的動作，具體包括：鼠標事件，鍵盤事件，狀態改變事件…

Event：事件觸發后會產生一個 event 對象

事件屬性：

鼠標事件：onclick 單擊事件 ondblclick 雙擊事件

onmouseover：鼠標移入事件

onmouseout：鼠標移出事件

onmousedown：鼠標點擊事件

onmouseup：鼠標松開事件

event對象：

任何事件觸發后會產生一個 event 對象，event 對象記錄事件發生時的鼠標位置，鍵盤按鍵狀態和觸發對象等信息

JQuery

JQuery 是一個優秀的 JavaScript 框架，一個輕量級的 JS 庫，它封裝了 JS,CSS,DOM 提供了一致的，簡潔的 API,使用戶更加方便的處理HTML，實現動畫效果，并且方便為網站提供 Ajax 交互模型，使用戶的 HTML 頁面保持代碼和 HTML 內容分離

使用JQuery

JQuery 的使用步驟：

引入 JQuery 的 js 文件
使用選擇器定位操作節點
調用 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 屬性的元素

狀態過濾選擇器：

根據狀態定位元素

表單選擇器：

包括：text：匹配文本框 password：匹配密碼框…

讀寫節點：

讀寫節點的HTML內容：

讀入：obj.html() 寫出：obj.html(“寫出內容”)

讀寫節點的文本內容：

讀入：obj.text() 寫出：obj.text(“寫出內容”)

讀寫節點的value屬性值：

讀入：obj.val() 寫出：obj.val(“寫出內容”)

讀寫節點的屬性值：

讀入：obj.attr(“屬性名”) 寫出：obj.attr(“屬性名”，“屬性值”)

增刪節點：

創建DOM節點：$(’‘節點內容’’)

插入DOM節點：

parent.append(obj) 作為最后一個子節點添加

parent.prepend(obj) 作為第一個子節點添加

刪除DOM節點：

Obj.remove() 刪除節點

Obj.remove(selector) 只刪除滿足 selector 的節點

Obj.empty() 清空節點

樣式：

addClass（" "）追加樣式

removeClass（" "）移出指定樣式

removeClass() 移出所有樣式

toggleClass（" "）切換樣式

hasClass（""）判斷是否有這個樣式

css（""）讀取css的值

css（"",""）設置多個樣式

遍歷節點：

children（）取得一個包含匹配的元素集合中的每一個元素的所有子元素的元素集合

parent（） 父節點

事件處理：參考手冊

等待頁面加載完畢后執行：$(function(){…})

獲得事件對象 event

只需要對事件處理函數傳遞一個參數如：$obj.click(function(e){…}); e 就是事件對象，已經經過了 JQuery 的底層事件對象的封裝，封裝后的事件對象可以方便的兼容各瀏覽器

事件的常用屬性：

獲取事件源：e.target 返回值就是DOM對象

：匹配所有的可見元素