知識總結

時間 2020-05-31

標籤知識總結简体版

原文原文鏈接

知識總結javascript

每走過一段路，咱們都有一個習慣，去回憶路上的每一件值得留下記憶的事物。學習固然也是如此，每次學習完一門新的知識，也總有從新去回想學習的過程，以便留下更深的記憶。更好的去掌握所學的知識。這就是學習總結的做用。css

通過一段不算長也不算短的時間，咱們初步的接觸到了基礎的編程語言，瞭解到了這份外行人看似神祕的工做，程序員。固然這只是一個初步的瞭解和掌握階段，距離成爲一個真正的程序員仍是有一段比較遠的距離的。html

咱們來聊聊學習的過程和體會，互相借鑑和相互提升，學習和分享其中的樂趣和學習知識的方式方法，一塊兒進步，更好的認識和了解。前端

首先咱們先從HTML開始提及。這是每一個想了解編程語言都必須先了解的一個基礎門類。（這是我的看法）java

HTML：是一個超文本標記（標籤）語言。node

HTML的標記格式

雙邊標記和單邊標記jquery

雙邊標記：git

有開始也有結束程序員

格式：<標記名屬性=「屬性值」屬性=「屬性值」>內容</標記名>github

單邊標記：

只有開始沒有結束

格式：<標記名屬性=「屬性值」屬性=「屬性值」>

單邊標記通常都是起到一些特殊的做用好比：換行水平線

注意：HTML網頁它只認識標記只能解析標記

屬性與屬性值的解釋：

好比一我的是否是應該有姓名、有身高、有體重、有性別

1、 HTML網頁的語法規則

全部的HTML標記都是放在一對<>尖括號裏面這一對尖括號必須英文狀態下

HTML標記名是不區分大小寫可是建議使用小寫

若是標記有屬性那麼屬性必定是寫在開始標記裏面而不是寫結束標記裏面

屬性與標記名之間最少要有一個空格屬性與屬性之間也須要有一個空格

標記與標記之間的嵌套只能使用順序嵌套

若是屬性有屬性值那麼建議屬性值加上引號

HTML網頁結構

HTML網頁至少有三對標記組成

<html>

</html>

body標記的常見屬性

屬性名	功能
background	給網頁來設置背景圖片默認會進行平鋪水平方向和垂直方向都會進行平鋪
bgColor	給網頁設置背景顏色

註釋

HTML裏面的註釋

格式：

註釋的做用：

一、起到一個解釋性說明

二、起到調試代碼的做用

文本與字體修飾標記

標記名	功能
<b></b>或者<strong></strong>	對文本進行加粗
<i></i>或<em></em>	將文本設置爲斜體
<u></u>或者<ins></ins>	給文本設置下劃線
<s></s>或者<del></del>	刪除線
<sup></sup>	上標
<sub></sub>	下標
<font></font> 常見的屬性 face：用來設置字體 size：用來設置字體大小取值：1~7 1小7大 color：用來設置顏色	給文本設置字體設置字體大小設置顏色

排版標記

l 標題標記：<h1></h1>~<h6></h6> 1大6小

l 段落標記：<p></p> 屬性：align 設置裏面的內容水平方向對齊取值：left (默認值)|center |right

l 換行標記：<br>

l 水平線：<hr >

n color 設置水平線的顏色

n size 設置水平線的粗細

n width 設置水平線的長度

n align 設置水平線線水平對齊方式取值：left |center(默認值) |right

n noshade 去陰影由於這個屬性沒有屬性值

預排版標記：<pre></pre> 保留了空格與換行

字符實體

表示一個英文狀態下半角的空格

× 乘號

÷ 除號

> >

< <

¥ 人民幣

& &

® 註冊符號

列表

l 無序列表

<ul>

</ul>

l 有序列表

<ol>

</ol>

l 定義列表

<dl>

</dl>

跑馬燈標記

常見屬性：

l direction：滾動的方向取值 left(默認值從右向左進行滾動)、right、up、down

l behavior：滾動的方式取值：scroll(滾動默認值) slide(滑動只滾動一次) alternate(彈動打乒乓球同樣 )

l width：設置寬度

l height：設置高度

l bgColor：設置背景顏色

l scrollAmount：滾動的步長值一步走多遠值越大速度越快

1、 head標記

title標記

l 這個標記的做用是用來顯示網頁的標題

meta標記

它主要的做用：

n 它告訴瀏覽器要使用什麼編碼來解析當前的文檔

n 它能夠實現網頁刷新

n 它能夠實現網頁跳轉

n 它還能夠實現SEO優化

告訴瀏覽器要使用什麼編碼來解析當前的文檔

l <meta http-equiv="Content-Type" content="text/html;charset=字符編碼 ">

如何去解決亂碼問題？

一、編輯器的編碼環境要與代碼裏面的內容是一致

二、要告訴瀏覽器使用編輯器的編碼環境來解析當前的HTML文件

超級連接

<a href=」要連接的目標地址URL」 target=」_self|_blank」>文字或者圖片</a>

相對路徑

平級關係當前文件與目標文件在同一個文件夾裏面

上級關係目標文件在當前文件的上一級

下級關係目標文件在當前文件的下一級

上級關係： ../表示上一級

../../表示上兩級

錨點連接

要實現錨點連接須要兩步：

第一步：要定義錨點

第二步：要找到定義的錨點連接

<a href=」#錨點名」>文字或者圖片 </a>

圖片標記

<img />

src：圖片的URL地址

alt：若是圖片不存在的時候顯示的文字信息有利於SEO優化

title：當鼠標放上圖片上面時顯示的文字信息

表格

表格的標記：

<table>

<tr>

</tr>

<tr>

</tr>

</table>

結構標記的說明：

l <table></table>它表示表格

l <tr></tr>它表示表格中的行一個表格中有多少行就應該有多少對tr標記

l <td></td>它表示行中的單元格一行中有多少個單元格就應該有多少對td標記

l <th></th>它也是表示行中的單元格它表示的是標題單元格它裏面的文字會加粗和居中顯示

table標記的屬性

l border：表格的邊框取值：1~n

l borderColor：表格中邊框的顏色

l width：設置表格的寬度取值：固定值或者百分比百分比它是相對於當前元素的父元素來做爲標準

l height：設置表格的高度可是這個屬性通常不建議使用

l align：設置表格的水平對齊方式取值：left(默認值)|right|center

l bgColor：設置表格的背景顏色

l background：設置表格的背景圖片

l cellpadding：表格中單元格里面的內容到單元格邊框之間的距離

l cellspacing：表格中單元格與單元格之間的距離

注意：表格默認是沒有邊框的表格默認是有cellpadding與cellspacing

tr的常見屬性

l bgColor：設置行的背景顏色

l background：設置行的背景圖片

l width：設置行的寬度

l height：設置行的高度

l align：設置行中的內容水平方向對齊方式取值：left(默認值)|center|right

l valign：設置行中的內容垂直方向對齊方式取值：top(頂部對齊)|middle(默認值) 中間對齊 |bottom 底部對齊

td或者th的常見屬性

width：設置單元格的寬度

height：設置單元格的高度

bgColor：設置單元格的背景顏色

background：設置單元格的背景圖片

rowspan：跨行合併單元格

colspan：跨列合併單元格

注意：

l 首先要明確是跨行仍是跨列

l 其實要開始在第一個合併單元格里面寫屬性

l 要減去對應的單元格的數量 n-1

1、圖像熱點

給一張圖片增長多個超級連接

給一張圖片設置一個超級連接

必定先要有圖片

格式：

</map>

area標記的屬性：

shape：表示區域裏面的形狀取值：rect(矩形)、circle(圓形)、poly(多邊形)

coords：座標值

若是形狀設置爲 rect(矩形)時那麼座標值應該有4個:x1,y1,x2,y2

若是形狀設置爲 circle(圓形)時那麼座標值應該有3個:x1,y1,r

若是形狀設置爲 poly(多邊形)時那麼座標值應該有根據多少邊來決定

表單控件

注意：

n 表單控件只有放上form標記裏面它們纔有表單的效果

n 若是說須要將某個表單數據提交給PHP程序來進行處理的話那麼必定要寫name屬性若是說某個表單數據不想讓其提交給PHP程序來進行處理的話那麼就不要寫name屬性

單行文本框：

在這裏value屬性值指的是用戶輸入的數據

明文顯示出來

單行密碼框：

以小黑點顯示的

單選按鈕：

一組單選按鈕它應該是一組相互排斥的按鈕只能選一個

一組單選按鈕要實現只能選擇一個只須要將這一組單選按鈕 name屬性值要同樣

單選按鈕與多選按鈕獨有屬性

checked 這個屬性沒有屬性值爲了知足XHTML的規範要讓其值等於自身它表示默認選中的意思

n disabled：這個屬性沒有屬性值爲了知足XHTML的規範要讓其值等於自身disabled=」disabled」這表示當前的表單控件不能夠用

n enabled：這個屬性沒有屬性值爲了知足XHTML的規範要讓其值等於自身

enabled =」 enabled」這表示當前的表單控件可用默認值

n readonly 這個屬性沒有屬性值爲了知足XHTML的規範要讓其值等於自身

readonly =」 readonly」這表示當前的表單控件不能夠用

disabled與readonly之間的區別：

它們兩個屬性都表示表單控制不可用

加了disabled的表單控件它不能將表單數據發送給PHP程序進行處理

加了readonly的表單控件它能將表單數據發送給PHP程序進行處理

多選按鈕：

能夠選取多個

提交按鈕：

框架型網頁的結構：

</frameset>

frameset這個標記它用來定義這個框架網頁是上下仍是左右型

屬性：

rows=」80,*」將窗口分割爲上下型上邊的窗口占據80個像素剩下的全部的空間都給到下窗口

rows=」80,100,*」將窗口分割爲上中下型上邊的窗口占據80個像素中間的窗口占據100個像素剩下的全部的空間都給到下窗口

cols=」100,*」將窗口分割爲左右型左邊的窗口占據100個像素剩下的全部的空間都給到右窗口

cols=」100,80,*」將窗口分割爲左中右型左邊的窗口占據100個像素中間的窗口占據80個像素剩下的全部的空間都給到右窗口

border：用來設置框架網頁的邊框的粗細

borderColor:邊框的顏色

HTML的篇幅有點冗長，聊完HTML後接下來就是CSS了。

CSS：翻譯爲「層疊樣式表」或者「級聯樣式表」，簡稱「樣式表」，主要是給HTML增長標記樣式。

選擇器

選擇器它就是將HTML標記選擇到，而後給它設置CSS樣式！

基本選擇器

通用選擇器、標籤選擇器、ID選擇器、類選擇器

文本與字體屬性：

text-decoration:文本修飾線 none(去除修飾線)、underline(下劃線)、overline(上劃線)、line-through(刪除線)

color：設置文本的顏色

font-size：設置字體大小值要在單位 px

font-style：設置文字的樣式取值：italic(斜體)

font-weight：設置文本的加粗效果取值：normal(正常) 、bold(加粗)

font-family：給文本設置字體能夠一次寫多個字體每個字體要加雙引號

text-align：設置文本的水平對齊方式取值：left|center|right

text-transform：改變字母的大小寫或者首字母大寫取值：lowercase(小寫) 、uppercase(大寫)、Capitalize(首字母大寫)

line-height：設置行高將一行文本在一個容器內垂直方向居中它的值應該要與height這個屬性的值同樣

text-indent：首行縮進取值:px 或者em (1個em指一個漢字的位置 ) 值能夠是負數

尺寸樣式：

width:設置寬度

height:設置高度

複合選擇器

組合選擇器

n 格式：選擇器1,選擇器2,選擇器3,選擇器n{語句1;}

n 做用：同時去給列表中的選擇器來設置樣式

後代元素選擇器

n 格式：祖先元素後代元素{語句1;語句2;}

n 做用：它是匹配祖元素下面的指定的全部的後代元素設置樣式

子元素選擇器

n 格式：父元素 > 子元素{語句1;語句2;}

n 做用：匹配父元素下面的指定的子元素而後給其設置樣式

相鄰元素選擇器

n 格式：E + F{格式聲明語句;}

做用：匹配E元素下面的F兄弟元素要求 E與F元素必須是兄弟關係而且 F元素要在E的後面而且這兩個元素必須是緊挨着的

列表樣式屬性

屬性名	功能
list-style-type	用來將列表前面的項目符號給清除掉取值：none(無)、disc(實心園)、circle(空心園)、square(小方塊)
list-style-position	用於設置列表前面符號的位置取值：inside(在裏面)、outside(在外面默認值)
list-style-image	將列表前面的項目符號設置爲一張圖片例如： list-style-image:url(圖片的路徑)
list-style	簡寫屬性 list-style它的值個數不定順序不定每個值之間都要使用空格來分隔 list-style:none url(圖片的地址) inside;

注意：

在CSS中只要是能圖片有關的都得將圖片的路徑寫在url(圖片的路徑)

固定定位

什麼是固定定位？

固定定位它是相對於「瀏覽器窗口」來進行定位！無論頁面如何滾動，固定定位元素它的位置不會發生改變！

語法格式：

position:fixed;

定位的座標

特色：

固定定位元素它脫離了標準文檔流
固定定位元素它再也不佔用空間
固定定位元素它的層級比普通元素要高而且它會壓住普通元素
固定定位元素它的位置不會發生改變！

相對定位

語法格式：

position:relative;

什麼是相對定位？

相對定位它是相對於「原來的本身」來進行定位！

特色：

若是相對定位元素不加定位的座標屬性那麼相對定位元素它還在原來的位置！
若是相對定位元素使用了定位座標的話那麼它會在它的老家留下一個坑！
相對定位元素它沒有脫離標準文檔流！
相對定位元素它會壓蓋住普通元素！

相對定位元素這個屬性它通常本身不多使用，由於它會在老家給本身留一個坑！相對定位元素它通常是用來配合絕對定位來使用！

絕對定位

格式：

position:absolute;

什麼叫絕對定位？

絕對定位元素它是相對於「祖先定位元素」爲做爲參照物來進行定位！

絕對定位元素它會先去找它的父元素是否有進行定位若是它的父元素有進行定位那麼它會參照於其父元素來進行定位，可是若是它的父元素沒有進行定位那麼它會去找其爺爺元素若是說絕對定位元素它的祖先都沒有進行定位的話那麼它會以「瀏覽器窗口」來進行定位！

俗語：

「子絕父相！」 ==è兒子是絕對定位老爸是相對定位

絕對定位的特色：

n 絕對定位元素它脫離的標準文檔流！

n 絕對定位元素它再也不佔用空間！

n 絕對定位元素它會壓蓋住普通的元素

假設：絕對定位元素它的父元素與它的爺爺元素都進行了相對定位，那麼請告訴我這個絕對定位元素它會以誰來做爲參照物來進行定位！它會以其父元素做爲參照物來進行定位！

CSS的只是總結說完了，咱們接着來聊聊JavaScript的知識點。

JavaScirpt 它是由網景公司開發一款基本瀏覽器、基於面向對象、事件驅動式的網頁腳本語言！

JavaScript的應用場景

l 表單驗證

l 網頁特效

l 一些網頁上面小遊戲

l AJAX 與服務器進行交互

書寫JS的方式

嵌入式、外鏈式、行內式

嵌入式：

它是將JS代碼嵌入在HTML文檔中它是經過HTML中的一個叫<script>標記嵌入的

格式：

//書寫JS代碼

</script>

外鏈式：

將一個外部的JS文件連接到當前的HTML文檔中它是經過script標記的src屬性將外部的JS文件連接到當前的HTML文件中

格式：

注意：

1、script標記能夠書寫在HTML文檔中任何位置

2、若是一對script標記引入了外部的JS文件那麼就不能在裏面書寫JS代碼

3、在一個HTML文檔中 script標記能夠有多個

行內式

在HTML標記中有一些事件的屬性

好比:

onclick 當鼠標單擊時

onmouseover 當鼠標通過時

將JS代碼書寫在標記的事件屬性裏面

註釋

註釋的格式：

單行註釋和多行註釋

單行註釋：

//註釋的內容

行註釋：

註釋的內容

書寫JS代碼的語法規則

l JavaScript區分大小寫

l JavaScript須嵌入在HTML文件中

l JavaScript代碼中不能出現有<>以及不能有CSS代碼

l 語句末尾能夠加分號必定是英文下的分號(;)，最好加分號

l JavaScript能夠獨立保存爲一個外部文件

給變量名賦值

var 變量名 = 值

將等號右邊的值賦值給等號左邊的變量！

三個常見的輸出的方法

l window.alert(數據或者變量名)

n 做用：是向瀏覽器的窗口中彈出一個警告提示框

n window它是一個對象它表示當前的瀏覽器窗口對象

n alert() 它是window對象下面的一個方法方法帶小括號

n window對象它是JS中的最頂級的對象因此能夠省略不寫

l window.document.write(數據或者變量名)

n 做用：向body標記中輸出內容

n window它是一個對象它表示當前的瀏覽器窗口對象

n document對象它是window對象下面的一個屬性

n write() 它是document對象下面的一個方法

l console.log()

n 做用：是將數據輸出在瀏覽器的控制檯中

n console它表示控制檯對象

n log() 是日誌的意思

變量的數據類型

變量的數據類型分爲兩大種：基本數據類型和複合數據類型

基本數據類型：只能存儲一個值

String(字符串)、number(數值)、boolean(布爾)、null(空)、undefined(未定義)

複合數據類型：最少存儲一個值

Object(對象)----àfunction(函數)和Array(數組)

String(字符串)

什麼叫字符串數據？

只要是加了引號的字符它們就是String

假設字符串有一個雙引號如今我想將這個雙引號也輸出出來！

在JS中有一個符號「\」來能夠用來將雙引號或者單引號進行轉義！

第一種方法：加轉義字符

第二種方式：單包雙或者雙包單

number(數值)

包含：整數與小數(浮點數)

整數：int

小數：float

boolean(布爾型)

錯與對男與女

布爾型數據只有兩個值：true和false

null(空型)

空型的值只有一個：null

或者會在出錯的時候出現：null

undefined(未定義)

當聲明瞭變量可是沒有給其賦值

變量的數據類型的轉換

在JS中變量的數據類型的轉換分爲兩種：自動轉換和強制轉換

好比：

將字符串數據類型轉換爲數值型

自動轉換是JS本身內部完成的！在JS中有三個內置的函數能夠來徹底變量數據類型轉換！

String(變量名)：將其它的數據類型強制的轉換爲字符串

Number(變量名)：將其它的數據類型強制的轉換爲數值型

NaN 它也是數值裏面的一種，Not a Number 它不是一個數！

在將其它數據類型轉換爲數值型有些數據它是轉換不過來的它會獲得一個特殊的Number型數據 NaN

在將其它數據類型轉換爲數值型若是可以轉換過來就會獲得一個具體的數，可是若是轉換不過來就會獲得 NaN

Boolean(變量名)：將其它的數據類型強制的轉換爲布爾型

只有兩個結果：true和false

三目(三元)運算符

格式：

表達式 ? 值1 : 值2 它是if語法的變種

說明：

它會去判斷表達式是否成立看其結果是布爾true 仍是布爾false 若是是true就執行值1 若是說是false就執行值2

邏輯運算符

邏輯與：&& 它要求&&兩邊的結果都要爲真纔是真

邏輯或：|| 它要求||兩邊只有一個爲真就是真

邏輯非：! 取反將真變成假假變成真

注意：

邏輯與和邏輯或這兩個邏輯運算符它不僅僅會輸出布爾型數據！

1、只要「||」前面爲false，不管「||」後面是true仍是false，結果都返回「||」後面的值。

2、只要「||」前面爲true，不管「||」後面是true仍是false，結果都返回「||」前面的值。

3、只要「&&」前面是false，不管「&&」後面是true仍是false，結果都將返「&&」前面的值;

4、只要「&&」前面是true，不管「&&」後面是true仍是false，結果都將返「&&」後面的值;

PHP+AJAX

運算符的優先級

有括號的先算括號裏面的再乘除後加減

若是咱們須要提高運算符的優先級一句話：加括號

2、流程控制

順序結構、分支結構、循環結構！

順序結構

代碼是從上至下一行一行執行並解析！、

if語句

單分支、雙分支、多分支

單分支：

格式：

if(條件表達式){

//語句塊

}

說明：若是當條件表達式成立的時候獲得布爾true 就執行語句塊

注意：若是單分支小括號後面這一對大括號能夠省略不寫可是建議不要省略！

雙分支：

格式：

if(條件表達式){

//語句塊1

}else{

//語句塊2

}

說明：若是當條件表達式成立的時候獲得布爾true 就執行語句塊1 可是若是條件表達式不成立獲得布爾false 就會執行語句塊2

多分支：

格式：

if(條件表達式1){

//語句塊1

}else if(條件表達式2){

//語句塊2

} else if(條件表達式3){

//語句塊3

} else if(條件表達式n){

//語句塊n

}[else{

//語句塊

}]

說明：

l 第一步：先去判斷條件表達式1是否成立若是成立獲得布爾true 就會執行語句塊1 若是不成立獲得false 就會判斷條件表達式2是否

l 第二步：它是建議第一步不成立的基礎上判斷條件表達式2是否成立若是成立獲得布爾true 就會執行語句塊2 若是不成立獲得false 就會判斷條件表達式3是否成立

l 第三步：它是建議第二步不成立的基礎上先判斷條件表達式3是否成立若是成立就就會執行語句塊3 若是不成立就會再去判斷下一條條件表達式

l 若是上面的條件表達式都不成立而且咱們寫了else這個語句那麼就會執行else裏面的語句塊

l else語句能夠省略不寫可寫可不寫根據實際狀況來定

switch語句

格式：

switch(變量名){

case值1 :

執行語句塊1

break;

case 值2 :

執行語句塊2

break;

case 值3:

執行語句塊3

break;

case 值n:

執行語句塊n

break;

default:

默認的語句塊

break;

}

說明：

拿變量名的值與case中的每個值比較全等於比較若是比較成立就會執行對應的語句塊可是它會去查找這個對應的語句塊的後面是否寫了break這個關鍵字若是沒有寫它會繼續往下去找break關鍵字而且同時會將下面的語句塊輸出直達找到break爲止！

實例：動態的輸出今天星期幾

第一步：咱們要獲取到系統時間日期

建立了一個時間日期對象

對象是由屬性與方法組成！

循環語句

什麼叫循環？

當知足必定的條件下，重複去作件事情！

for循環、while循環、do…while循環

for循環

格式：

for(變量初始化;條件表達式;變量更新){

//循環體

}

結構說明：

第一步：變量初始化聲明一個變量而後給其賦值它只執行一次

第二步：判斷條件表達式是否成立若是條件表達式成立就執行第三步若是條件表達式不成立就退出循環

第三步：創建第二步成立的基礎上執行循環體

第四步：變量進行更新立馬又來執行第二步判斷條件表達式是否成立！

while循環

格式：

變量初始化

while(條件表達式){

//循環體

變量更新

}

結構說明：

當條件表達式成立時就執行循環體！

do…while循環

這個循環是while循環的變種！

格式：

變量初始化

do{

循環體;

變量更新

}while(條件表達式);

結構說明：

先執行一次循環體，再來判斷條件表達式是否成立！無論條件表達式是否成立都會執行一次循環體！

for循環與while循環之間的區別：

for循環主要是在已知循環次數的時候使用

while通常用於未知循環次數的使用

while循環與do….while循環之間的區別

while循環先判斷條件表達式是否成立

do..while 先執行一個次循環體無論條件表達式是否成立它都會執行一次循環體再來判斷條件表達式！

數組中的相關概念

數組元素

數組中的每個數據咱們都稱之爲數組元素！

數組下標

數組中每個數據都對應着一個數組下標下標是從0開始數組中第一個元素的下標爲0 第二個元素的下標爲1 第三個元素的下標爲2………….

如何訪問數組中數組元素

格式：

數組變量名[數組下標]

數組的長度

數組的長度指數組中元素的總個數

每個數組的變量名它其它是一個數組對象

對象是由屬性與方法來組成！

方法：

數組變量名.length

如何修改數組元素的值

就是從新給數組元素賦值！

數組的長度與數組最大下標之間關係

數組最大下標=數組的長度-1

如何定義數組？

使用[]來定義

格式：

var 變量名 = [數組元素1,數組元素2]

遍歷數組元素

將數組中的每個數組元素一個一個的依次輸出出來！

咱們知道了數組的下標同時也知道了數組的長度因此咱們就應該有辦法

咱們可使用for循環來實現將數組元素進行遍歷！

格式：

var arr = [];

for(var i=0;i<數組長度;i++){

arr[i];

for….in語句也能夠遍歷數組

格式：

for(變量名 in 數組名){

多維數組的建立

JS中自己是沒有多維數組的概念，由於JS中的數組元素的類型能夠是任意數據類型。

數組裏面的元素它又是一個數組！

二維數組如何去訪問數組元素！

格式：

數組變量名[一維數組的下標][二維數組元素的下標];

函數

函數分爲系統內置函數與自定義函數！

什麼是函數？

函數是能夠被命名的，它是爲了實現某個功能的代碼段

函數能夠有名字也能夠匿名。

代碼段指函數體。

函數有什麼做用？

代碼重用

模塊化編程----à面向對象編程！

註冊模塊、登陸模塊

如何定義函數？

格式：

function 函數名(參數1,參數2,參數n){

//函數體

}

結構說明：

l function它是定義函數的關鍵字它必需要寫

l 函數名的命名規則它和變量名的命名規則同樣

n 可使用大小寫字母、下劃線、數字、美圓符號來組合

n 不能以數字開頭

n 不能是JS中的關鍵字和保留字

n 若是是由多個單詞組成的建議使用下劃線鏈接法或者是駝峯法

l 函數名的後面緊着一對小括號它必需要寫

l 小括號裏面的稱之參數列表這個參數列表它是根據函數實際須要來設置

l 小括號後面跟着一對大括號大括號裏面就是咱們要實現的功能的代碼

匿名函數的自調用

格式：

(function(){})()

變量的做用域

變量的做用域指的是變量在什麼地方可使用在什麼地方不能使用！

JS中的變量的做用域是以函數來進行分割的！

在函數外面定義的變量它的做用域是全局的！

在函數裏面定義的變量它的做用域是局部的，只能在這個函數裏面可使用

中國警察他只能在中國範圍內執法

國際刑警能夠在全世界範圍內執法！

咱們須要在函數外面也使用函數裏面定義的變量！將函數裏面定義的變量的做用域提高爲全局的做用域！

只須要將函數裏面定義的變量的var 關鍵字給去掉就能夠了，那麼這個變量的做用域就是全局了！

建議：

將函數裏面的變量名前面的var 去掉的時候同時要在函數外面聲明一個同名的變量

值傳遞：將一個變量的值賦值給另一個變量那麼將其中一個變量的值進行修改後它不會影響到另一個變量這兩個變量以前是沒有任何的關係！

引用傳遞：將一個變量的(內存地址)賦值給另一個變量那麼當將其中一個變量的值進行修改後它會影響到另一個變量這兩個變量以前是有聯繫！

自定義對象

第一種方法：

使用new關鍵字和Object()方法來建立

第二種方法：

使用一對{}來建立

格式：

var 變量名 = {

屬性名:值，

方法名:值

}

JSON對象

格式：

var 變量名 = {

「名稱」:值,

「名稱」:值

}

如何建立Array對象

第一種方法：

使用[]來建立數組

第二種方法：

使用new關鍵字和Array()方法來建立

方法名	功能
ArrayObject.sort(sortby)	對數組元素進行排序

若是調用該方法時沒有使用參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字符串（若有必要），以便進行比較。

若是想按照其餘標準進行排序，就須要提供比較函數，該函數要比較兩個值，而後返回一個用於說明這兩個值的相對順序的數字。比較函數應該具備兩個參數 a 和 b，其返回值以下：

若 a 小於 b，在排序後的數組中 a 應該出如今 b 以前，則返回一個小於 0 的值。
若 a 等於 b，則返回 0。

若 a 大於 b，則返回一個大於 0 的值。

Date對象

如何建立Date對象

第一種：

使用new關鍵字與Date()來建立帶參數

第二種：

使用new關鍵字與Date()來建立不帶參數

Date方法

方法名	功能
DateObject.getFullYear()	獲得4位數的年份
DateObject.getMonth()	獲得月份返回值是 0（一月）到 11（十二月）之間的一個整數。
DateObject.getDate()	獲得一個月中的某一天返回值是 1 ~ 31 之間的一個整數。
DateObject.getHours()	返回0~23小時
DateObject. getMinutes()	返回0~59分鐘
DateObject.getSeconds	返回秒數 0~59
DateObject. getMilliSeconds()	返回毫秒數 0~999
DateObject.getDay()	返回一週中的某一天返回值：0~6
DateObject.getTime()	返回時間戳從1970年1月1號0時0分0秒開始一直到如今的毫秒數

BOM對象

什麼是BOM對象

Browser Object Model 瀏覽器對象模型

BOM對象有什麼做用

BOM對象它主要是用來提供了一些屬性與方法操做瀏覽器中的各組件！

BOM對象的結構圖

l window對象它是JS中的頂級對象它表明着瀏覽器的窗口對象它的下面有不少屬性與方法

l DOM對象文檔對象模型它主要是提供了一些屬性與方法來操做HTML文檔 JS它主要就是用來操做HTML文檔

l history 歷史對象它能夠用來實現前進後退能夠經過瀏覽器的訪問歷史來實現的前面後退頁面的操做

l location 地址欄對象它能夠獲取到地址欄中的相關的數據

l navigator 瀏覽器對象它能夠獲取這個對象來獲取到瀏覽器的名稱、版本

l screen 屏幕對象它能夠獲取到屏幕的分辨率

window對象

屬性

屬性名	功能
window.innerWidth	內寬
window.innerHeight	內高
window.outerWidth	外寬包含瀏覽器的邊框
window.outerHeight	外高包含瀏覽器的邊框以及瀏覽器中地址欄等

方法

方法名	功能
window.alert()	向瀏覽器的窗口彈出一個警告提示框
window.prompt()	向瀏覽器的窗口中彈出一個輸入對話框若是用戶點擊了肯定按鈕會獲得「string」數據若是用戶點擊了取消按鈕會獲得「null」
window.confirm()	向瀏覽器窗口彈出一個確認對話框點擊「肯定」按鈕會獲得布爾型 true 點擊「取消」按鈕會獲得布爾型 false
方法名	功能
window.open(url,name,options) url：打開新窗口的URL地址 name：新窗口名稱 options：	打開一個新窗口這個方法有一個返回值這個返回是當前小窗口窗口對象它是用來給小窗口對象.close()這個方法來關閉當前的打開的窗口
方法	功能
window.close()	這個方法是用來關閉當前的窗口它跟瀏覽器上面的那個關閉按鈕是一個的功能
方法名	功能
window.setTimeout(code,Millisec) code:執行的JS代碼 Millisec:毫秒數這個方法有一個返回值這個返回值的做用是用來給clearTimeout來使用的就是用來將當前的延時器清除掉	當指定的時間到了之後就執行一次code
window.clearTimeout(要清除延時器的返回值)	清除延時器
方法名	功能
window.setInterval(code,Millisec) code:要執行的JS代碼 Millisec：毫秒時間	每隔必定的時間就執行code代碼
window.clearInterval(要清除的定時器返回值)	清除指定的定時器

screen對象

屬性名	功能
screen.width	獲取屏幕的寬度
screen.height	獲取屏幕的高度
screen.availWidth	獲取到屏幕有效的寬度(除了任務欄)
screen.availHeight	獲取到屏幕有效的高度
screen.colorDepth	獲取到屏幕的色深

Navigator對象

屬性名	功能
navigator.appName	獲取到瀏覽器的名稱
navigator.appVersion	獲取瀏覽器的版本
navigator.systemLanguage	系統語言只有IE瀏覽器才認識
navigator.userLanguage	用戶語言只有IE瀏覽器才認識
navigator.cpuClass	獲取到CPU的等級

location對象

location.href	JS實現網頁跳轉
location.hash	獲取地址欄中的URL地址後面的錨點數據
location. search	獲取到查詢字符串?後面的數據
location.reload()	它至關於瀏覽器的刷新按鈕刷新當前網頁

history對象

注意：必定要先有訪問過　瀏覽記錄纔可使用history這個對象

方法名	功能
history.back()	返回上一個頁面
history.forward()	返回下一個頁面
history.go(n)	前進或者後退 n=-1 返回上一個頁面 n=0 至關於刷新 n=1 返回下一個頁面

DOM對象的做用

它主要是用來提供了操做HTML文檔的屬性與方法

注意：

1、先要獲取到HTML中的標籤對象而後再來操做

2、這個標籤所擁有的屬性那麼當前的標籤對象也會同時的擁有！

DOM的分類

l 核心DOM：爲操做XML和HTML文檔的提供了屬性與方法

l HTML DOM：它是用來專門操做HTML文檔和XHTML文檔

l XML DOM：它是用來專門操做XML文檔的就業班講

l CSS DOM：它是用來專門操做style這個屬性

events DOM：事件DOM

核心DOM

屬性

l firstChild 第一個子節點

l lastChild 最後一個子節點

l childNodes 子節點列表就算裏面只有一個子節點它也是一個數組它和數組的訪問方式同樣就是經過下標來進行訪問

l parentNode 父節點

l innerHTML 用來設置或者返回雙邊標記裏面的內容

l nextSibling 下一個兄弟節點

l previousSibling 上一個兄弟節點

l nodeValue 節點的值

l nodeName 節點的名稱

要使用核心 DOM來操做HTML文檔訪問HTML文檔裏面的標籤若是說要經過核心DOM來訪問HTML的標籤必定是先根標籤開始！

注意：

核心dom它會把換行空格都會理解爲文本節點

核心DOM對標籤的操做

建立標籤

語法：

document.createElement(「標籤名」)

注意：標籤名不能帶尖括號可是建立好的標籤它暫時是存放於內存中

追加標籤

父對象.appendChild(要追加的標籤對象)

將標籤對象追加父對象的末尾

將標籤對象追加誰的最前面

父對象.insertBefore(要追加的標籤對象, 在誰以前進行追加)

移除標籤

父對象.removeChild(要刪除的標籤對象)

HTML DOM

方法

document.getElementById(ID的屬性值)

做用：經過id的屬性值來獲取標籤對象

注意：這個只能獲取到一個標籤對象由於id的屬性值是在一個HTML文檔裏面是惟一的！

document.getElementsByTagName(「標籤名」)

父對象. getElementsByTagName(「標籤名」)

做用：經過標籤名來獲取對象

注意：這裏返回的是一個數組集合須要使用下標來進行訪問就算獲取到只有一個標籤它也是一個數組集合

document.getElementsByName(name的屬性值)

說明：經過標籤中的Name的屬性值來獲取元素

注意：這裏返回的是一個數組集合須要使用下標來進行訪問就算獲取到只有一個標籤它也是一個數組集合

HTML DOM對標籤屬性的操做

標籤中所全部的屬性，這個JS對象也會同時擁有

增

要操做的標籤對象.屬性名 = 「值」

刪

要操做的標籤對象.屬性名 = 「」

改

要操做的標籤對象.屬性名 = 「從新賦值」

查

要操做的標籤對象.屬性名

可是以上對標籤屬性的操做均不包含對class屬性的操做若是要對標籤裏面的class屬性的操做必定要把class改成className

格式：

要操做的標籤對象.className

事件綁定的方式

行內綁定

將事件的處理程序是寫在HTML標籤中

<標籤事件名=「事件的處理程序」></標籤>

動態綁定

將事件的處理程序是寫在JS代碼中

要操做的標籤對象.事件名 = 事件的處理程序

事件列表

onclick：當鼠標單擊時

ondblclick：當鼠標雙擊時

onmouseover：當鼠標通過時

onmouseout：當鼠標離開時

onfocus：當獲取光標焦點時

onblur：當失去焦點時

onsubmit：當表單提交時這個事件它是給form標籤來綁定的

阻止表單的默認提交若是表單數據驗證不經過就不能讓這個表單提交！

如何阻止表單的默認提交：onsubmit這個事件在行內綁定時、onsumbit這個事件在動態綁定時

動態綁定：只須要在事件的處理程序中返回一個false便可！

行內綁定時：

要阻止表單的默認提交須要有兩個return 第一個return 是寫行內綁定裏面

第二個return 是寫在事件的處理函數裏面若是返回false就會阻止表單進行提交若是返回true則會容許表單進行提交！

onchange：當內容發生改變時多用於下拉列表

關於this

this表明當前對象，誰調用就表明誰！

1、行內綁定中的this 沒有將this這個參數傳遞過來！

2、行內綁定中的this this這個參數傳遞過來！

3、動態綁定中的this

表格的專用屬性

表格對象.tBodies 獲取到當前表格對象下面的全部的tbody標籤它是一個數組集合

tbody對象.rows 獲取到當前的tbody對象下面的全部的行它是一個數組集合

行對象.cells 獲取到當前行對象下面的全部的單元格它是一個數組集合

jquery的知識點

javascript Query

它其實一個JavaScript寫的代碼庫！開放源代碼 github

jQuery目的

寫的少作的多

write less do more

用少許的代碼去實現複雜的功能

選擇器

要作事、先找人！要實現某個功能，先將要對象找到

l 基本

l 層級

l 簡單

l 內容

l 可見性

l 屬性

l 子元素

l 表單

l 表單對象屬性

選擇器語法：

$(‘選擇器’)

基本選擇器

l #id 根據id的屬性值來獲取元素

l TagName 根據標籤名來獲取元素

l selector1,selector2 匹配列表中的選擇器

l .class 根據class的屬性值來獲取元素

層級選擇器

l 祖先元素後代元素匹配祖先元素下面的指定的後代元素

l parent > child 匹配父元素下面的指定的子元素

l prev + next 匹配當前元素的下一個兄弟元素要求這兩個元素必須鄰居

l prev~siblings 匹配當前元素的下面的指定全部的兄弟元素

簡單選擇器

l :first 匹配第一個元素

l :last 匹配最後一個元素

l :even 匹配下標值爲偶數的全部元素

l :odd 匹配下標值爲奇數的全部元素

l :eq(index) 匹配下標值爲指定值的元素

l :gt(index) 匹配下標值大於指定值的全部元素

l :lt(index) 匹配下標值小於指定值的全部元素

l :not(selector) 匹配不包含指定選擇器的全部元素

內容選擇器

l :contains(text) 匹配內容中包含指定值的元素

l :empty 匹配內容爲空的元素

l :has(selector) 匹配內容中包含指定選擇器的元素

l :parent 匹配內容不爲空的元素

可見性選擇器

l :hidden 匹配隱藏的元素 CSS中:display:none

:visible 匹配顯示的元素 CSS中：display:block

屬性選擇器

l [attribute] 匹配指定屬性的全部元素

l [attribute=value] 匹配屬性等於指定值的元素 input[name=」username」]

l [attribute!=value] 匹配屬性不等於指定值的全部元素

l [attribute^=value] 匹配屬性以指定值開頭的全部元素

l [attribute$=value] 匹配屬性以指定值結束的全部元素

l [attribute*=value] 匹配屬性中包含指定值的全部元素

l [selector1][selector2][selectorN] 匹配列表中全部屬性

子元素選擇器

l :nth-child(index/even/odd) 匹配索引值爲指定值或者索引值爲奇偶的子元素這裏的是從1開始的

l :first-child 第一個子元素

l :last-child 最後一個子元素

l :only-child 匹配有且僅有一個子元素

表單屬性選擇器

l :input 匹配表單裏面全部元素包含select textarea

l :text 匹配單行文本框

l :password 匹配單行密碼框

l :radio 匹配單選按鈕

l :checkbox 匹配多選按鈕

l :submit 匹配提交按鈕

l :reset 匹配重置按鈕

l :image 匹配圖片按鈕

l :button 匹配普通按鈕

l :file 匹配文件上傳

l :hidden 匹配隱藏域若是是要匹配表單中的隱藏域控件必定要先加上input標籤 $(「input:hidden」)

問：請回答$(「input」)與$(「:input」)之間的區別？

答：$(「input」)它是匹配到全部的input標籤

$(「:input」)它是匹配到除了input標籤之外 select textarea 全部的表單控件元素

表單對象選擇器

l :enabled 匹配表單中可用的表單控件

l :disabled 匹配表單中不可用的表單控件

l :checked 匹配表單中默認選中的元素單選按鈕和多選按鈕

l :selected 匹配表單中默認選中的元素下拉列表

jQuery對象操做標籤中的class屬性

l addClass(class) 給當前對象添加class屬性值

l removeClass(class) 將當前對象的class屬性值移除

l toggleClass(class) 當前對象中若是有指定的class屬性值則移除反之則添加

hasClass(class) 若是有指定的class屬性值就返回true 反之沒有就返回false

jQuery對象對標籤中的style屬性的操做

l css(name) 獲取到當前對象的style屬性指定的CSS樣式的屬性值

l css(key,value) 給當前對象的的style屬性中設置css樣式

l css(properties) 一次設置多個

尺寸方法

l width()

l width(value)

l height()

l height(value)

文本、值

l html()：獲取雙邊標記中的內容

l html(val)：往雙邊標記設置內容

l val()：獲取單邊標記中的value屬性值

l val(val)：往單邊標記中的value屬性設置值

l text()：獲取雙邊標記的中的內容

l text(val)：往雙邊標記設置內容

html()和text()方法之間的區別：一個能夠解析HTML標籤一個解析不了

html()獲取的時候將標籤中的全部的內容都會獲取到

text()獲取的時候只會獲取到標籤中的文本內容

事件編程

l 頁面載入

l 基本事件

l 事件切換

l 事件處理

所謂的頁面載入指的是：當頁面加載完成後

JavaScript它是使用的是window.onload 這個事件來實現

jQuery它是使用一個ready()方法

jQuery實現頁面載入總有三種方式：

第一種：

$(document).ready(function(){

//在這裏寫代碼

});

第二種：

$().ready(function(){

//在這裏寫代碼

});

第三種：

$(function(){

//在這裏寫代碼

});

window.onload 與ready()之間的區別：

ready方法的速度遠比window.onload快

事件編程

l 頁面載入使用是ready方法來實現

l 基本事件

l 事件切換

l 事件處理

基本事件

它將JavaScript中的事件去除了on前綴而後將它們封裝爲對應的方法

onclick =======èclick(function(){ 書寫代碼});

對象.事件方法(匿名函數)

l blur(fn) 當失去焦點時

l change(fn) 當內容發生改變時

l click(fn) 當鼠標單擊時

l dblclick(fn) 當鼠標雙擊時

l focus(fn) 當獲取焦點時

l keydown(fn) 當鍵盤按下時

l load(fn) 當頁面加載完成時

l mouseover(fn) 當鼠標通過時

l mouseout(fn) 當鼠標離開時

l scroll(fn) 當滾動條滾動時

l select(fn) 當內容被選中時

l submit(fn) 當表單提交時

l mouseenter(fn) 當鼠標通過時

l mouseleave(fn) 當鼠標離開時

事件切換

l hover(over,out)：它是專門用於實現鼠標通過與鼠標離開

參數說明：

over：表示的是鼠標通過事件它是一個匿名函數

out：表示是的鼠標離開事件它是一個匿名函數

事件綁定

l bind(type,fn) ：對事件進行綁定可是隻綁定一個事件、

參數說明：

type：指事件名事件名不帶on前綴

fn：事件的處理程序是一個匿名函數

l bind({type:fn,type:fn})：對事件進行綁定能夠同時綁定多個事件

參數說明：

要求參數是一個JSON對象

type：指事件名事件名不帶on前綴

fn：事件的處理程序是一個匿名函數

l one(type,fn) ：對事件進行一次綁定只會觸發一次事件、

參數說明：

type：指事件名事件名不帶on前綴

fn：事件的處理程序是一個匿名函數

l unbind([type]) ：對事件進行解除綁定若是帶參數(事件名不帶on前綴) 表示對指定的事件進行解綁若是不帶參數表示對全部的事件進行解綁

參數說明：

type：可選的參數事件名

效果

l 基本

l 滑動

l 淡入淡出

l 自定義動畫

基本效果

l show()：將隱藏的元素顯示出來

l show(speed,[callback]) ：將隱藏的元素以動畫的方式顯示出來

l hide()：將顯示的元素隱藏起來

l hide(speed,[callback]) ：將顯示的元素以動畫的方式隱藏

l toggle() ：若是顯示就隱藏若是隱藏就顯示

l toggle(switch) ：若是參數爲true則表示只顯示，若是爲false表示只隱藏

l toggle(speed,[callback])：以動畫的方式進行顯示或者隱藏

參數說明：

speed表示的方式有兩種：一種毫秒數二種英文單詞
speed:"slow", "normal", "fast"
callback：可選的參數它是一個回調函數當動畫執行完了之後再來執行的函數

滑動效果

l slideDown()：將隱藏的元素顯示出來

l slideDown(speed,[callback]) ：以動畫的方式將隱藏的元素顯示出來

l slideUp()：將顯示的元素進行隱藏

l slideUp(speed,[callback]) ：以動畫的方式將顯示的元素進行隱藏

l slideToggle()：顯示或者隱藏

l slideToggle(speed,[callback]) ：以動畫的方式進行顯示或者隱藏

淡入淡出

fadeOut()：淡出
fadeIn()：淡入
fadeTo(speed,opacity)：淡入淡出到指定值 opactiy 指透明度取值：0~1之間 0表示徹底透明 1表示不透明
fadeToggle()：淡入或者淡出

自定義動畫

animate(options,speed)：當時間到了之後就執行options裏面的參數

文檔操做

對HTML中標籤進行增刪改查

l 插入

l 刪除

l 複製

l 替換

l 包裹

l 查找

內部插入

l $(selector).append(content) ：將content追加到selector選擇器內部的最後面

l $(content).appendTo(selector)：將content追加到selector選擇器內部的最後面

l $(selector).prepend(content) ：將content追加到selector選擇器內部的最前面

l $(content).prependTo(selector) ：將content追加到selector選擇器內部的最前面

外部插入

l $(selector).after(content) ：將content插入到selector選擇器外部的最後面

l $(selector).before(content) ：將content插入到selector選擇器外部的最前面

l $(content).insertAfter(selector)：將content插入到selector選擇器外部的最後面

$(content)insertBefore(selector) ：將content插入到selector選擇器外部的最前面

刪除操做

l empty() 將當前對象裏面的內容清空可是標籤還在將身體掏空了

l remove() 將標籤與內容同時移除

複製

l clone([true]) 將元素進行克隆

參數說明：若是有帶true這個參數表示克隆元素自己的同時還會將這個元素身上的事件進行克隆若是沒有帶true 則表示只克隆元素的自己不克隆元素身上的事件

替換

l replaceWith()

包裹

l wrap() 對元素進行包裹

l wrapAll() 對元素進行包裹只包裹一次

l wrapInner() 對元素進行內部包裹

獲取到當前的索引值

l index()

查找

鏈式編程

對象.方法名.方法名.方法名

l eq(index) ：獲取到指定下標的元素

l filter(expr) ：將範圍縮小

l not(expr) ：除了當前元素之外的元素

l next([expr]) ：匹配當前元素的下一個兄弟元素

l prev([expr])：匹配當前元素的上一個兄弟元素

l parent([expr])：匹配當前元素的父元素

l Parents([pxpr])：匹配當前元素的祖先元素

l Siblings()：匹配除了當前元素之外的全部的其它的兄弟元素

插件機制

問：咱們要實現某一個功能須要用到一個很特別的函數可是jQeury中沒有給咱們封裝這個函數 jQuery它給咱們提供了一個相似於接口的東西！

l jQuery.fn.extend(object)或$.fn.extend(object)

l 要求參數必須是一個JSON對象

l jQuery ===== $

fn1:function(){},

fn2:function(){},

......

});

結構說明：

fn1或者fn2指的方法名

匿名函數就是當前方法的處理程序

特別注意：

在jQuery中除了插件機制中的this指向的是jQuery對象其它的任何地方都是JavaScript對象

使用插件機制來實現全選、反選、取消功能

Bootstrap簡介

什麼是Bootstrap?

l Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 兩位設計師開發的。Bootstrap 是 2011 年八月在 GitHub 上發佈的開源產品。

l Bootstrap 是一個用於快速開發 Web 應用程序和網站的前端框架。

l Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的。

l Bootstrap簡潔靈活，使得 Web 開發更加快捷。

l Bootstrap能夠構建出很是優雅的前端界面，並且佔用資源很是小。

全局的CSS樣式

bootstrap官網給用戶定義了至關多的全局樣式類名

<標籤 class=」類名」></標籤>

佈局窗口

l .container 類用於固定寬度並支持響應式佈局的容器。

排版樣式

l .h1~.h6或者<h1>~<h6>

l <p></p>

l <strong></strong>或者 <b></b>

l <ins></ins>或者<u></u>

l <em></em>或者<i></i>

l <del></del>或者<s></s>

l .text-left 設置文本左對齊

l .text-center 設置文本居中對齊

l .text-right 設置文本右對齊

l .text-lowercase 將大寫字母轉換小寫

l .text-uppercase 將小寫字母轉換爲大寫

l .text-Capitalize 將首字母變成大寫

列表樣式

l . list-unstyled 將列表前面的項目符號去掉

l .dl-horizontal 將定義列表中的dt與dd中的內容排列成一行

定義列表：

<dl>

</dl>

表格樣式

.table 爲任意表格標籤添加一個table類名而後給會表格加上一個水平分隔線和少許的內填充

table類名它是基類名父類

l . table-striped 實現隔行變色的表格

l table-bordered 帶邊框的表格

l table-condensed 緊湊型表格

按鈕樣式

l .btn 全部按鈕樣式的基類

l .btn-success 成功的按鈕

l .btn-danger 危險的按鈕

l .btn-warning 警告的按鈕

l .btn-default 默認的按鈕

l .btn-info 通常信息的按鈕

l .btn-link 連接狀態的按鈕

l .btn-primary 重要的按鈕

l .btn-lg 超大按鈕

l .btn-sm 小按鈕

l .btn-xs 超小按鈕

圖片樣式

l . img-responsive 響應式的圖片

l .img-circle 圓形圖片

l .img- rounded 圓角圖片

.img- thumbnail 帶邊框的圖片

柵格系統

Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。

柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局

需求：

若是是電腦一行顯示6列 >1200px

若是是中等屏幕電腦一行顯示4列

若是是ipad 一行顯示3列

若是是手機一行顯示2列

列偏移

l .col-m-offset-n

m：表示的是根據分辨率來決定

n：表示的是偏移的位置

表單

. form-control <input>、<textarea> 和 <select> 元素都將被默認設置寬度屬性爲 width: 100%;

.form-group 表單組

.form-inline 內聯表單

只是總結還存在諸多不足歡迎補充說明。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

知識總結

HTML的標記格式

1、 HTML網頁的語法規則

全部的HTML標記都是放在一對<>尖括號裏面 這一對尖括號必須英文狀態下

文本與字體修飾標記

排版標記

字符實體

列表

跑馬燈標記

1、 head標記

title標記

meta標記

告訴瀏覽器要使用什麼編碼來解析當前的文檔

超級連接

相對路徑

錨點連接

圖片標記

表格

table標記的屬性

tr的常見屬性

td或者th的常見屬性

1、 圖像熱點

表單控件

選擇器

複合選擇器

列表樣式屬性

固定定位

相對定位

絕對定位

JavaScript的應用場景

書寫JS的方式

註釋

書寫JS代碼的語法規則

給變量名賦值

三個常見的輸出的方法

變量的數據類型

String(字符串)

number(數值)

boolean(布爾型)

null(空型)

undefined(未定義)

變量的數據類型的轉換

三目(三元)運算符

邏輯運算符

運算符的優先級

2、流程控制

順序結構

if語句

switch語句

循環語句

for循環

while循環

do…while循環

數組中的相關概念

如何定義數組？

遍歷數組元素

多維數組的建立

函數

什麼是函數？

函數有什麼做用？

如何定義函數？

變量的做用域

自定義對象

如何建立Array對象

Date對象

如何建立Date對象

Date方法

BOM對象

什麼是BOM對象

BOM對象有什麼做用

BOM對象的結構圖

window對象

屬性

方法

screen對象

Navigator對象

location對象

history對象

DOM對象的做用

DOM的分類

全部的HTML標記都是放在一對<>尖括號裏面這一對尖括號必須英文狀態下

1、圖像熱點