App下載

HTML+CSS+JS詳解

猿友 2021-02-25 18:05:11 瀏覽數(shù) (20428)
反饋

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)簽是由尖括號包圍的關(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>

元素顯示方式：

? 塊級元素：默認(rèn)情況下，塊級元素獨(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í)體引用：空格：&nbsp；（小于號）<:< （大于號 ） >:&gt；

HTML圖像：

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

語法：<img src=“url” >

常用屬性：width,height

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

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

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

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

href 屬性：鏈接地址 URL target 屬性：目標(biāo)的打開方式

錨點(diǎn)：文檔中某行的一個(gè)記號，用于鏈接到文檔中的某個(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語法：只需要將分號隔開的一個(gè)或多個(gè)屬性作為元素的style屬性值，屬性值之間用冒號（:）連接，多個(gè)屬性值之間用分號（;）隔開

內(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)先級：同一個(gè)元素若存在多個(gè)CSS規(guī)則，對應(yīng)沖突的聲明以優(yōu)先級高者為準(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)

選擇器組：選擇器聲明為以逗號隔開的選擇器列表，將一些相同的規(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è)元素相對于瀏覽器窗口本身的位置

流定位：頁面中的塊級元素從上到下依次排列，每一個(gè)塊級元素都會(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ù)值越大，級別越高，越顯示在前

列表樣式：

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ò)誤控制臺"來查看錯(cuò)誤

JavaScript語法規(guī)范：

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

注釋：單行：//注釋內(nèi)容 多行：/*注釋內(nèi)容*/

語句：表達(dá)式，關(guān)鍵字，運(yùn)算符，大小寫敏感，建議使用分號結(jié)尾一條語句

標(biāo)識符和關(guān)鍵字：

標(biāo)識符:不以數(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)符號組成的字符序列，直接量需要一對單/雙引號括起

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)的方式有

  1. 通過id查詢
  2. 通過層次（節(jié)點(diǎn)關(guān)系）查詢
  3. 通過標(biāo)簽名稱查詢
  4. 通過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è)輕量級的 JS 庫，它封裝了 JS,CSS,DOM 提供了一致的，簡潔的 API,使用戶更加方便的處理HTML，實(shí)現(xiàn)動(dòng)畫效果，并且方便為網(wǎng)站提供 Ajax 交互模型，使用戶的 HTML 頁面保持代碼和 HTML 內(nèi)容分離

使用JQuery

JQuery 的使用步驟：

  1. 引入 JQuery 的 js 文件
  2. 使用選擇器定位操作節(jié)點(diǎn)
  3. 調(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


HTML CSS JavaScript

6 人點(diǎn)贊