Web前端筆記--html，css，javascript，jquery

HTML

- HyperText超文本 Mark標記 Language語言。

- 什麼是超文本？不僅僅是純文本，除了文本之外還包括字體信息，還包括多媒體信息（圖片、音頻、視頻）。

- 和XML的不同點： xml的標籤是可以擴展的,html標籤是固定的。

常用標籤

1. 文本標籤

- 內容標題：h1-h6 屬性 align:left/right/center 獨佔一行，上下留有空白

- 段落標籤：p 獨佔一行上下留有空白

- 水平分割線 hr

- 換行：br

2. 列表標籤

- 無序列表

</ul>

- 有序列表

<li>打開冰箱門</li>

<li>把大象裝進去</li>

<li>關上冰箱門</li>

</ol>

- 定義列表

</dl>

- 列表嵌套

無序列表和有序列表可以任意無限嵌套

分區元素

- 分區元素自身沒有顯示效果用於把頁面中的多個元素進行統一管理，類似於一個容器

- 一個頁面一般分爲三大區：

- h5標準中新增了幾個和div功能一樣的分區元素

- div和span

1. div：獨佔一行

2. span：共佔一行

元素的分類

1. 塊級元素:獨佔一行包括：h1-h6,p, div , hr

2. 行內元素:共佔一行包括：span，斜體i和em，加粗b和strong，刪除線s和del，下劃線u

特殊字符實體引用

1. 空格摺疊現象通過 ; 替換空格牛逼是屁

2. 小於號和大於號 < > 老鐵幹他

3. 換行 <br>

圖片標籤<img>

- 常用屬性：

1. scr：圖片的路徑

-相對路徑：訪問站內資源

1. 同級直接寫圖片名

2. 上級 ../圖片名

3. 下級文件夾名/圖片名

-絕對路徑：訪問站外資源，稱爲盜鏈，節省自己網站的資源，但是有可能出現找不到圖的情況

2. alt：當圖片不能正常顯示的時候顯示的文本

3. title：當鼠標懸停時顯示的文本

4. width：設置寬度

兩種賦值方式：1.像素 2.百分比如果只設置寬度高度會自動等比縮放

5. height：設置高度

- 圖片支持的格式：jpg/jpeg png gif

圖像地圖

- <map> 屬性：name 用於表示map的唯一性

- <area> 範圍屬性：

1. shape形狀(circle/rect)

2. coords座標（rect四個值兩個對角線點的座標，circle三個值圓心座標和半徑）

3. href路徑設置點擊的行爲，該路徑指向的資源如果瀏覽器能夠瀏覽則直接瀏覽，如果不能瀏覽則下載此文件

超鏈接

- <a href="http://www.baidu.com">xxx</a>

- href屬性和圖像地圖裏面的href一樣

- target="_blank" 從新的窗口中顯示頁面

- a標籤可以包裹文本也可以包裹圖片

- 錨點的使用：

1. html結構

<!DOCTYPE HTML>

<html>

</html>

2. head裏面的標籤

- meta：charset name="keywords" content="a,b,c"

- title：頁面標題

3. body裏面的標籤

- h1-h6 屬性： align=“left/center/right”

- p 段落上下有空白

- 列表：有序列表 ol-li 無序 ul-li

- 分區元素： div：獨佔一行和span 非獨佔一行

- 塊級元素：獨佔一行，div, p, h1-6,hr

- 行內元素：非獨佔一行,span, i和em, b和strong,u,del和s

- 換行 br

- 特殊字符空格： < > br

- 圖片標籤: img 屬性： src路徑（相對和絕對）alt，title，width、height

###註釋

- 格式：  快捷鍵：control+shift+/

圖像地圖 map

- 什麼是圖像地圖：可以將圖片中的某個部分作爲可點擊的鏈接。

- 使用方式：

<area alt="圓形" shape="circle" coords="100,200,50" href="2.gif">

</map>

- 如果使用shape=rect，coords的值所代表的意思是左上角點的x和y，還有右下角點的座標x和y。如果shape=circle coords值表示圓心座標(x和y)和半徑

- href屬性：值爲一個路徑，相對路徑和絕對路徑，區域被點擊時會直接訪問此路徑的內容，路徑可以指向頁面，也可以指向圖片資源，也可以指向其它類型的文件會下載此文件。

超鏈接

- 在網頁中經常使用超鏈接進行鏈接導航，語法：<a href="路徑" >鏈接</a>

- target屬性：控制從什麼位置跳轉，值爲_self是從當前頁面跳轉（默認）,值爲_blank是跳轉到一個新窗口顯示頁面

- a標籤可以支持以下幾種寫法：

<a href="map2.html" target="_blank">圖像地圖練習</a>

a標籤錨點的使用

- 通過錨點可以實現頁面內部位置的跳轉

- 操作方式：

1. 在頁面中的某個位置設置錨點：

2. 通過超鏈接跳轉到錨點的位置

-錨點練習：

圖片1 圖片2 圖片3 圖片4

表格標籤

- 什麼是表格：由單元格的矩形框按照從左到右從上到下的順序排列組成的內容爲表格

- 作用：以一定的結構來顯示信息

- 表格的格式：

<table>

<tr>

<td>1-1</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

- 表格屬性：

1. cellspacing：每個單元格之間的間距和單元格距表格邊框的距離

2. cellpadding: 內容與單元格邊框的距離

3. width/height:表格的寬高

4. border：邊框的寬度

5. colspan: column(列) span 合併列

6. rowspan: row span 合併行

行分組

在前端編程的時候，使用分組便於整體操作表格的頭部體部和尾部

- 格式：

<table>

<thead>

<th></th> table-head

</thead>

<tbody>

</tbody>

<tfoot>

</tfoot>

</table>

- caption標籤，寫在table標籤內部，起到表格標題的作用

</table>

表單 form

- 在瀏覽器中，瀏覽器向服務器發送數據，一般使用的都是表單

表單內部的控件有：文本框，密碼框，單選框，多選框，下拉列表，文件選擇，時間選擇，提交按鈕。

###文本框

- 用於獲取用戶輸入的單行數據

- 格式： <form action="提交地址">

用戶名：<input type="text" >

</form>

- 屬性：name ,values：默認值，maxlength：最大長度，readonly：只讀

###密碼框

- 格式： <form action="提交地址">

密碼：<input type="password" >

</form>

###單選

- 格式：性別：<input type="radio">男<input type="radio">女

- 屬性：name：多個單選控件的name值要一致，value:提交數據時會把value的值提交到服務器，checked:設置選中

###複選框（多選）

- 格式：

愛好：<input type="checkbox" name="hobby" value="dy">電影

<input type="checkbox" name="hobby" value="cg">唱歌

<input id="lq" type="checkbox" name="hobby" value="lq">籃球

###標籤 label

- 格式： <label for="lq">籃球<label>

###文件選擇

- 選擇上傳的文件

- 格式:靚照:<input type="file" name="pic">

###日期選擇

- 格式:生日:<input type="date" name="birthday">

###隱藏域

- 格式：<input type="hidden" name="id" value="1">

- 作用：此控件用戶看不到，有些場景需要提交一部分用戶不需要看到的數據，比如修改數據時的id

###文本域 textarea

- 輸入多行數據時使用

- 格式：

個人介紹:<textarea name="intro" rows="3" cols="30">這個人很懶......

</textarea>

###下拉選

- 格式：

</select>

按鈕

- 提交按鈕：<input type="submit" value="註冊">

- 重置按鈕：<input type="reset" value="重置">

- 普通按鈕：<input type="button" value="按鈕">

##作業：把form和table結合一起寫個註冊頁面

CSS

- Casecading層疊 Style樣式Sheet表，層疊樣式表，用於美化頁面

引入方式

- 三種引入方式

1. 內聯：把樣式代碼寫在標籤內部的style屬性裏面，弊端：不能複用

2. 內部：在head標籤裏面添加style標籤通過選擇器給元素添加樣式，好處是可以在當前頁面複用，弊端：只能在當前頁面複用

3. 外部：在一個單獨的css文件中寫樣式代碼，在頁面中head標籤裏面通過link標籤把css文件引入到頁面中，好處：可以多頁面複用，把css樣式代碼和html代碼分離

- 三種引入方式的優先級：內聯樣式優先級最高，內部和外部優先級一樣，後執行的覆蓋先執行的。

###選擇器

####標籤名選擇器

- 格式： div{} span{} h3{}

- 範圍：會把所有該類型的標籤全部選中

####id選擇器

- 格式： #id{}

- 將頁面中某一個元素選中

####類選擇器

- 格式： .class{}

- 選中頁面中一類的多個元素

####屬性選擇器

- 格式：元素名[屬性名='屬性值']{}

####分組選擇器

- 格式： #id,.class,div{}

- 將多個選擇器選擇的內容合併到一個選擇器裏面

####子孫後代選擇器

- 格式： div p h1

- 選擇div裏面p裏面的所有子孫h1

####子元素選擇器

- 格式： div>p>h1

- 選擇div裏面p裏面的h1子元素

####僞類選擇器

- 用於選擇元素的狀態

- 未訪問狀態 a:link

- 訪問過狀態 a:visited

- 懸停狀態 a:hover

- 點擊時狀態 a:active

####任意元素選擇器

- 格式： *{}

- 選擇頁面中所有的元素包括：body和html

###CSS中常用的樣式

####顏色的賦值方式

- 三原色rgb紅綠藍 red green blue 每一個顏色的取值範圍0-255

1. 通過顏色名稱賦值 red blue yellow pink....

2. 6位的16進制賦值 #ff0000

3. 3位的16進制賦值 #f00

4. 3位的十進制 rgb(255,0,0)

5. 4位的十進制 rgba(255,0,0,0.5) 最後一位表示透明度取值0-1，越小越透明

####設置元素的寬高

- width、height

####背景圖片

- backgroud-image 設置背景圖片

- background-size 設置背景圖片尺寸

- background-repeat 禁止重複

- background-position 設置背景圖片的位置

- background-color: green;

/* 設置背景圖片 */

background-image: url("../imgs/k.jpg");

/* 修改背景圖片尺寸 */

background-size: 100px 100px;

/* 禁止重複 */

background-repeat: no-repeat;

/* 修改圖片位置

水平方向(left center right)

垂直方向(top center bottom)

可以控制9個位置*/

/* background-position: right bottom; */

/* 通過百分比控制位置

第一個0代表最左邊 100%代表最右邊

第二個0代表最上面 100%代表最下面 */

background-position: 90% 90%;

佈局相關屬性（盒子模型）

- 盒子模型由：寬高+外邊距+內邊距+邊框組成

#####盒子模型之元素寬高

- 寬度width

- 高度height

- 可以通過百分比或像素的形式賦值

- 塊級元素可以修改元素的寬高，行內元素不能修改寬高，寬高只能由內容決定

#####盒子模型之外邊距(margin)

- 什麼是外邊距：元素距上級元素或相鄰兄弟元素的距離稱爲外邊距

- 賦值方式：

margin-left/right/top/bottom:10px

margin:10px; //給四個方向外邊距全部賦值爲10px

margin: 20px 40px; /* 上下20 左右40 */

margin: 0 auto; /* 水平居中 */

margin: 10px 20px 30px 40px;/* 上右下左 */

- 塊級元素相鄰元素添加外邊距取最大值，行內元素相鄰元素外邊距相加

- 行內元素上下外邊距不生效

- 如果元素的上邊緣和上級元素的上邊緣重疊，則給元素添加上外邊距時會出現粘連問題通過給上級元素添加overflow:hidden 解決

####盒子模型之邊框

- 賦值方式：

border: 1px solid red; 四個方向賦值

border-bottom/top/right/left: 1px solid red; 指定給某一個方向賦值

塊級元素四個方向邊框全部生效，會影響元素所佔寬高

行內元素四個方向邊框全部生效，但是左右邊框影響所佔寬度，上下邊框不影響高度

####盒子模型之內邊距

什麼是內邊距：元素邊框距內容的距離

- 塊級元素內邊距全部生效也會影響元素所佔的寬高

- 行內元素內邊距全部生效但影響所佔寬度不影響所佔高度

####盒子模型總結：

行內元素需要記住的點：

1. 不能修改寬高

2. 外邊距上下沒效果

3. 邊框上下不影響高度

4. 內邊距上下不影響高度

###文本相關樣式

1. 文本對齊 text-align: left/right/center

2. 文本修飾 text-decoration:overline/underline/line-through/none

3. 行高 line-height

4. 顏色 color：red;

5. 文本陰影 text-shadow: 顏色 x偏移 y偏移陰影濃度(值越小越清晰)

####圓角

- border-radius 值越大越圓

####字體相關樣式

/* 字體大小 */

font-size: 10px;

/* 字體加粗 */

font-weight: bold;

/* 斜體 */

font-style: italic;

/* 字體樣式 */

font-family: "simhei", Arial, Helvetica, sans-serif;

####溢出設置 overflow

- 設置超出元素範圍的內容如何顯示

1. visible（默認值）超出顯示

2. hidden 超出隱藏

3. scroll 超出滾動顯示

顯示方式 display

1. block：塊級元素的默認值，獨佔一行,可以修改寬高

2. inline：行內元素的默認值，共佔一行

3. inline-block:行內塊,共佔一行並且可以修改寬高

###定位

####文檔流定位(靜態定位)

- 默認的定位方式

- position:static(默認)

- 塊級元素從上到下，行內元素從左向右

- 通過外邊距控制元素的位置

####相對定位

- position:relative;

- 元素不脫離文檔流

- 應用場景：當元素需要從當前位置做偏移，但不影響其它元素的時候使用相對定位

- 通過top/left/right/bottom 控制元素的偏移，偏移值相對於元素的初始位置

####絕對定位

- position:absolute;

- 元素脫離文檔流

- 應用場景：但需要往頁面中添加一個元素這個元素顯示或不顯示不影響其它元素的效果

- 通過top/left/right/bottom控制元素的位置，位置相對於窗口(默認)或某一個上級元素

- 如果需要相對於某一個上級元素，需要讓上級元素做非static定位(推薦使用relative相對定位)

####固定定位

- position：fixed;

- 脫離文檔流

- 通過top、left、right、bottom控制元素的位置，位置相對於窗口

- 應用場景：當需要把某個元素固定在窗口的某個位置時使用固定定位

####浮動定位

- float:left/right;

- 脫離文檔流，元素從當前所在行向左或向右浮動，當碰到上級元素邊框或其它浮動元素時停止

- 一行裝不下會自動換行，換行時有可能被卡住

- clear：left/right/both 禁止元素某個方向出現浮動元素

- 如果元素的所有子元素全部浮動，此時自動識別的高度爲0，如果希望元素正好包裹所有子元素則給元素添加overflow:hidden解決

- 應用場景：當需要將縱向排列的元素改成橫向排列時使用浮動定位

####行內元素垂直對齊

垂直對齊方式

bottom底部

top頂部

middle中間

baseline 基線(默認)

vertical-align: middle;

###CSS的三大特性

1. 繼承性：子元素可以繼承上級元素的部分屬性，只能繼承文本和字體相關的屬性，部分元素的顯示效果不受繼承影響比如：超鏈接a的字體顏色不受影響，h1-h6的字體大小不受繼承影響

2. 層疊性：如果有多個選擇器選擇同一元素但設置的樣式不同，則所有樣式全部層疊到一起全部生效,如果多個選擇器設置的樣式相同則由優先級決定。

3. 優先級：作用範圍越小，優先級越高 id>class>標籤名

JavaScript

簡稱JS 給頁面添加動態效果或內容

###JS特點

1. JS屬於腳本語言，不需要編譯直接解析執行

2. JS可以嵌入到html中由瀏覽器解析執行

3. JS屬於弱類型語言

4. JS基於面向對象

###如何在HTML中引入JS

- 三種引入方式：

1. 內聯：在標籤內部，通過事件屬性引入。

<input type="button" value="點我" onclick="alert('ok！')">

2. 內部：在head標籤內部添加script標籤，在標籤內部寫js代碼。

<script type="text/javascript">

alert("第二種引入方式");

</script>

3. 外部：在單獨的js文件中寫js代碼，通過script標籤引入。

<script type="text/javascript" src="first.js">

//如果引入了js文件 則在標籤體內不能寫js代碼

</script>

###數據類型

- js中所有類型都是對象類型，對象類型分爲三種：

1. JS語言內置對象：字符串,數組,日期等

2. 瀏覽器內置對象：可能存在兼容性問題

3. 自定義對象：程序員自己創建的對象

####JS內置對象的幾種常見類型

1. 數值類型 number

2. 字符串類型 string

3. 布爾值類型 boolean

4. 未定義類型 undefined

####變量的聲明和賦值

- js屬於弱類型語言

var x = 18;

x="abc";

var name = "張三";

var b = true/false;

var z; //未定義類型

var p = new Person();

#####數值類型

- js中數值類型的底層都是浮點型，使用過程中會自動轉換整數和小數

-java:

int x = 5; int y = 2;

int z = x/y; z=2

-js:

var x = 5; var y = 2;

var z = x/y;  z=2.5

var x = 4; var y = 2;

var z = x/y;  z=2

- NaN: Not a Number(不是一個數),isNaN(變量)用於判斷變量的類型是否是個數

var s = 18; isNaN(s)=false var s="abc"; isNaN(s)=true

####字符串string

- 用單引號或雙引號修飾字符串

var s1 = "abc";

####布爾值 boolean

var b = true;

###常見數據類型間的隱式轉換

1. 數值類型：

- 轉字符串：直接轉 "abc"+18 = "abc18"

- 轉布爾值: 0和NaN轉false 其它轉true

if(18){alert('abc')}else{alert('lalala')}

2. 字符串

- 轉數值：能轉直接轉 "18"->18 不能轉轉成NaN "abc"->NaN

var x = "66"+6; 666

var y = "66"-6; 60 //只有加法是把數值轉字符串，其它運算都是把字符串轉成數值

任何數值和NaN進行任何運算結果都是NaN

- 轉布爾值：空字符串""轉false 其它true

3. 布爾值

- 轉字符串：直接轉 "abc"+true = "abctrue"

- 轉數值： true->1 false->0

4. 未定義

- 轉字符串：直接轉 "abc"+undefined="abcundefined"

- 轉布爾值：false

- 轉數值：NaN

5. null

- 轉字符串：直接轉 "abc"+null = "abcnull"

- 轉布爾值：false

- 轉數值：0

###運算符

- js中的運算符和Java大體相同

==和===:

==會先統一等號兩端變量的類型,然後再比較值是否相等

===會先比較類型如果類型相同再比較值是否相等

"66"==66 true

"66"===66 false

-練習：創建demo02 頁面中添加兩個按鈕，按鈕1：在點擊事件裏面執行alert("666"==666) 按鈕2：在點擊事件裏面執行alert("666"===666)

- typeof x ：獲取變量的類型

var x = typeof 66 + 6 結果： "number6"

###語句 if else, switch case, while , for, do while

- 和Java大體相同

- 不同點：

1. if條件裏面的內容如果不是布爾值會自動隱式轉換成布爾值

2. for循環把int i改成 var i 不支持增強for循環

###函數(方法)

- java方法格式：public void 方法名(參數列表){ 方法體 }

- js方法格式一：function 方法名(參數列表){方法體}

- js方法格式二：var 方法名 = function(參數列表){方法體}

- js方法格式三：var 方法名 = new Function("參數1","參數2","方法體");

###頁面相關方法

1. 通過id獲取頁面中的元素

var mydiv = document.getElementById("d1");

2. 給文本框賦值和取值

myinput.value = "abc"; //賦值

alert(myinput.value)； //取值

3. 給div、h1-h6、p、span等元素添加文本內容

mydiv.innerText = "abc"; //賦值

alert(mydiv.innerText);

4. 給元素添加html內容

mydiv.innerHTML= "<h1>abc</h1>";

mydiv.innerHTML+= "<h1>abc</h1>";//追加

###String相關內容

1. 創建字符串的兩種方式

- var s1 = "abc";

- var s2 = new String("abc");

2. 把字符串轉換成數值

- parseInt(num) 轉成整數

- parseFloat(num) 轉成小數或整數

- Number(num) 等效parseFloat

3. 字符串轉大小寫

- str.toUpperCase();

- str.toLowerCase();

4. 獲取字符串出現的位置

- str.indexOf("a");

- str.lastIndexOf("a");

5. 截取字符串

- str.substring(start,?end);

6. 替換字符串

- str.replace(old,new);

7. 拆分字符串

- str.split(",");

###數組相關

1. 創建數組的兩種方式

- var arr1 = ["小明",18,true];

- var arr2 = new Array(); //創建一個空數組

2. 往數組中添加內容

- arr2.push("abc");

3. 修改數組的長度(Java中數組長度是不可以修改的)

arr1.length=1;

4. 數組遍歷和Java一樣

5. 數組反轉

var arr = [1,2,3];

arr.reverse();

6. 數組排序

- 數組默認的排序規則是按數組排序

var arr = [10,18,5,22,21,52];

arr.sort();照數組內元素的unicode編碼進行排序比完第一個字符比第二個

- 自定義排序：

var arr = [58,51,8,2,23,66];

//創建一個自定義的排序方法

function sortfn(a,b){

//return a-b;//升序

return b-a; //降序

}

//使用自定義方法排序如果數組中裝的是自定義對象

//可以通過對象的任意屬性進行排序，比較靈活

alert(arr.sort(sortfn));

###日期相關內容

- 服務器時間和客戶端時間

1. 獲取客戶端時間(得到當前系統時間)

var d1 = new Date();

2. 把字符串時間轉成Date對象

2019/1/4 15:20:00

var d2 = new Date("2019/1/4 15:20:00");

3. 獲取和設置時間戳(時間戳是距離1970年1月1日 0點的毫秒數)

d1.getTime( );

d1.setTime(1000); //1970/1/1 08:00:01

4. 獲取時間分量單獨年月日時分秒星期

d1.getFullYear();//年

d1.getMonth();//月從0 開始

d1.getDate();//日

d1.getDay();//星期

d1.getHours();//時

d1.getMinutes();//分

d1.getSeconds();//秒

5. 從完整時間中獲取年月日、獲取時分秒

d1.toLocaleDateString();

d1.toLocaleTimeString();

###正則表達式

- 應用場景：

1. 查找內容

2. 校驗文本

. :匹配任意字符除了換行

\w:匹配任意數字、字母、下劃線

\d:匹配任意數字

\s:匹配任意空白

^ :開頭

$ :結尾

- js創建正則表達式的兩種方式

- var reg1 = /規則/模式;

- var reg2 = new RegExp("規則",?"模式");

- 正則相關的方法：

1. reg.exec(str); //查找內容一次執行只找一個找不到時返回null

2. reg.test(str); //校驗str是否符合規則

3. var arr = str.match(reg); //查找一次性找到所有內容

4. str.replace(reg,"新的內容"); //替換替換正則匹配的所有內容

###通過js代碼給元素添加或修改class值

- div.className="xxx";

###隱藏元素的方式

1. display:none/block/inline/inline-block 脫離文檔流

2. visibility:hidden/visible; 不脫離文檔流

###事件的取消

- 在事件中執行 return false; 則可以將此事件取消掉

- confirm("您確認離開嗎？")

###新的事件

- 失去焦點事件 onblur

- 表單提交事件 onsubmit

###自定義對象（瞭解）

- 第一種聲明方法的方式創建對象：

//創建Person對象有age和name屬性

function Person(name,age){

//聲明屬性並賦值

this.name=name;

this.age=age;

//聲明方法

this.run = function(){

alert("name:"+this.name

+" age:"+this.age);

}

- 第二種聲明變量的形式創建對象：

var p1 = {

"name":"關羽",

"age":18,

"run":function(){

alert("姓名："+this.name

+"年齡："+this.age);

}

//調用方法

p1.run();

###DHTML

- 簡介： Dynamic（動態）HTML，這並不是新的技術，而是把html+css+JavaScript一起實現的頁面稱爲動態的html

- DHTML包括：BOM和DOM

- BOM：Browser（瀏覽器）Object（對象）Model（模型），瀏覽器對象模型，在BOM中存

在一些和瀏覽器相關的對象

- DOM：Document Object Model：文檔對象模型，在DOM中包含一些和頁面相關的對象

####BOM

#####Window

- window對象中包含的屬性稱爲全局屬性，方法稱爲全局方法,調用window裏面的屬性和方法時可以把window省略

- window裏面常用的方法：

window.alert("");提示框

confirm()確認框

parseInt/Float();

isNaN();

prompt(); 彈出文本框

- window裏面常用的屬性

1. location：位置

location.href 獲取瀏覽器訪問的地址

location.href="http://www.baidu.com" 修改瀏覽器訪問的地址

location.reload(); //頁面刷新

2. history:歷史

history.length //獲取歷史頁面數量

history.back() //返回上一頁面

history.forward() //前往下一頁面

history.go(num) 負值代表返回正值前進 0刷新

3. screen：屏幕

width/height 寬高

availWidth/availHeight 可用寬高高度減去開始菜單欄

4. navigator：導航/幫助

navigator.userAgent 得到瀏覽器的版本信息

5. document：文檔裏面包含頁面相關的對象 DOM指的就是document對象裏面的內容，而document又屬於window裏面的對象所以 BOM包含DOM

###window相關的事件

1. 頁面加載完成事件 onload

2. 頁面點擊事件 onclick

3. 失去焦點事件 onblur

4. 獲取焦點事件 onfocus

###eval()方法

- 可以將字符串以執行js代碼形式執行

###通過js代碼給元素添加樣式

div.style.樣式名稱="值";

###圖片移動練習

創建demo02.html 在頁面中添加一張圖片

在頁面加載完成的時候通過js代碼修改圖片的尺寸爲50*50

當點擊屏幕時讓圖片往右側移動5個像素

###輪播圖練習步驟：

1. 通過css調整圖片和div的大小

2. 把圖片修改成絕對定位位置相對於div

3. 添加script標籤在頁面加載完成時獲取所有圖片並遍歷設置每一個圖片的left值分別爲0w 1w 2w

4. 開啓定時器一秒執行100次，每次執行的時候獲取所有的圖片，然後遍歷得到圖片之前的left值然後-4 再賦值回去，在賦值回去之前判斷如果新的left值<=-200把新的left值改成400，同時把定時器停止

5. 把移動一張圖片的代碼放到一個方法中，然後再開啓定時器每隔2秒調用一次這個方法

6. 給div添加鼠標移入和移出事件，在事件中對應的這關閉定時器和重新開啓定時器

####定時器

1. 開啓重複執行的定時器

var t = setInterval(function(){},時間間隔)

2. 停止定時器

clearInterval(t);

3. 開啓只執行一次的定時器

setTimeout(function(){},時間間隔);

###DOM

- DOM 文檔對象模型，學習DOM主要是學習如果對頁面中的元素進行增刪改查操作

####查找頁面中的元素

1. 通過id查找

var div = document.getElementById("id");

2. 通過標籤名

var arr= document.getElementsByTagName("標籤名");

3. 通過name查找

var arr = document.getElementsByName("name");

4. 通過class查找

var arr = document.getElementsByClassName("class");

####創建元素

var d = document.createElement("div");

d.innerText = "哈哈哈";

####添加元素

- 格式：父元素.appendChild(d);

document.body.appendChild(d);

####插入元素

- 格式：父元素.insertBefore(新元素,弟弟元素);

####刪除元素

- 格式：父元素.removeChild(被刪除的元素);

###事件

點擊onclick

移入onmouseover

移出onmouseout

頁面加載完成oload

獲得焦點 onfocus

失去焦點onblur

值發生改變 onchange

表單提交 onsubmit

窗口尺寸改變 onresize

- 什麼是事件：一些特定的時間點，包括：狀態改變事件，鼠標事件，鍵盤事件

####鼠標事件

- 點擊事件 onclick

- 鼠標移入 onmouseover

- 鼠標移出 onmouseout

- 鼠標按下 onmousedown

- 鼠標擡起 onmouseup

- 鼠標移動 onmousemove

####狀態改變事件

- 頁面加載完成事件 onload

- 獲取焦點事件 onfocus

- 失去焦點事件 onblur

- value值改變事件 onchange

- 提交事件 onsubmit

- 窗口尺寸改變事件 onresize

####鍵盤事件

- 鍵盤按下事件 onkeydown

- 鍵盤擡起事件 onkeyup

###事件的綁定

1. 在元素內部通過事件屬性添加事件事件中的this代表的是window對象

2. 通過js代碼動態綁定事件事件中的this代表的是事件源

###事件的取消

- 在事件中執行 return false; 則可以取消當前的事件

###事件對象event

- event對象中保存着和事件相關的信息

1. 鼠標事件可以獲得鼠標的座標 event.clientX/Y

2. 鍵盤事件可以獲得鍵盤的編碼 event.keyCode

3. 在任何事件中可以通過event得到事件源

event.target event.srcElement

//解決兼容性問題的寫法獲得事件源

var obj = event.target||event.srcElement;

- 事件源獲取方式：

1. 在動態綁定的事件中 this就是事件源

2. 非動態綁定的事件中可以將事件源傳遞過去

3. 通過event對象獲取事件源

###事件的傳遞（事件冒泡）

- 如果同一個區域內有過個元素的事件需要響應，響應順序從最底層開始向上級元素傳遞，傳遞過程類似於冒泡，所以稱爲事件冒泡

jQuery

####什麼是jQuery

- 是一個js語言寫的關於js的框架

- 可以讓程序員寫的更少但實現的更多

####jQuery優勢

1. 簡化js代碼

2. 可以像CSS一樣獲取元素

3. 可以直接修改元素的樣式

4. 解決部分兼容性問題

- CSS寫法

.class{

color:red;

}

- JS寫法

var arr = document.getElementsByClassName("class");

for(var i=0;i<arr.length;i++){

arr[i].style.color = "red";

}

- jq寫法

$(".class").css("color","red");

###選擇器

####基本選擇器

1. 標籤名選擇器

$("div") 匹配頁面中所有的div

2. id選擇器

$("#id")

3. 類選擇器

$(".class")

4. 分組選擇器

$("div,#id,.class")

5. 任意元素選擇器

$("*")

####層級選擇器

1. $("div span") 匹配div下所有的span

2. $("div>span") 匹配div的所有span子元素

3. $("div+span") 匹配div的span弟弟元素

4. $("div~span") 匹配div的span弟弟們元素

####層級方法

- 當得到某一個元素之後可以通過調用以下方法獲得該元素的相關元素

1. 獲取元素的兄弟元素

$("#abc").siblings("span"); //得到id爲abc元素的所有兄弟元素

2. 獲取元素的哥哥元素

$("#abc").prev();

3. 獲取元素的哥哥們元素

$("#abc").prevAll();

4. 獲取元素的弟弟元素

$("#abc").next();

5. 獲取元素的弟弟們元素

$("#abc").nextAll();

####過濾選擇器

1. $("div:first") 匹配所有div中的第一個

2. $("div:last") 匹配所有div中的最後一個

3. $("div:even") 匹配所有div中的所有偶數從0開始

4. $("div:odd") 匹配所有div中的所有奇數從0開始

5. $("div:eq(n)") 匹配所有div中下標爲n的元素從0開始

6. $("div:lt(n)") 匹配所有div中下標小於n的元素

7. $("div:gt(n)") 匹配所有div中下標大於n的元素

8. $("div:not(.abc)") 匹配所有div中 class值不爲abc的所有元素

####內容選擇器

1. $("div:has(p)") 匹配所有包含p子元素的div

2. $("div:empty") 匹配所有空的div

3. $("div:parent") 匹配所有非空的div

4. $("div:contains('abc')") 匹配所有包含abc文本的div

####可見選擇器

1. $("div:hidden") 匹配所有隱藏的div元素

2. $("div:visible")匹配所有顯示的div元素

- 隱藏顯示相關的方法

1. $("#abc").hide();//隱藏

2. $("#abc").show();//顯示

3. $("#abc").toggle(); //隱藏顯示切換

####屬性選擇器

1. $("div[id]") 匹配所有包含id屬性的div

2. $("div[id='abc']") 匹配所有id=abc 的div

3. $("div[id!='abc']") 匹配所有id不等於abc的div

####子元素選擇器

1. $("div:first-child") 匹配是子元素並且是第一個div子元素

2. $("div:last-child") 匹配是子元素並且是最後一個div子元素

3. $("div:nth-child(n)") n從1開始匹配是子元素並且是第n個div子元素

####表單選擇器

1. $(":input") 匹配form表單中的所有控件包括：文本框密碼框、單選、多選、下拉選等

2. $(":password") 匹配所有密碼框

3. $(":radio")匹配所有單選

4. $(":checkbox")匹配所有多選

5. $(":checked") 匹配所有選中的單選、多選、下拉選

6. $("input:checked") 匹配所有選中的單選和多選

7. $(":selected") 匹配所有選中的下拉選

####js對象和jq對象互相轉換

1. js對象轉jq var jq = $(js);

2. jq對象轉js var js = jq[0];

###jq的文檔相關操作 DOM相關

1. 創建元素

var js = document.createElement("div");

var jq = $("<div i='abc'>abc</div>");

2. 添加元素

$("#big").append(myh1);

3. 插入元素

- 弟弟元素.before(新元素)

- 哥哥元素.after(新元素)

4. 刪除元素

$("#id").remove();

5. css樣式相關

- 獲取樣式值 var color = $("#id").css("color");

- 設置樣式 $("#id").css("樣式名稱","值");

$("#id").css({"width":"100px","height":"200px"});

6. 文本相關

- 獲取元素的文本內容

$("#id").text();

- 給元素文本賦值

$("#id").text("內容");

7. html相關

- 獲取元素的html內容

$("#id").html();

- 給元素html賦值

$("#id").html("<h1>hehe</h1>");

- 獲取元素的子元素 .children()

8. 屬性相關

- 獲取元素的屬性值

$("#id").attr("class");

- 給元素添加或修改屬性值

$("#id").attr("class","值");

###事件相關

1. 常見事件

- 頁面加載完成事件 $(function(){})

- 點擊事件 click

- 獲取失去焦點 focus blur

- 鼠標事件 mouseover mouseout mousedown mouseup mousemove

- 鍵盤事件 keydown keyup

- 屏幕尺寸改變 resize

- 表單提交 submit

2. 獲取事件源的方式和js一樣

3. 事件模擬

$("input").trigger("click");

4. hover事件合併

//鼠標移入和移出事件

$("span").hover(function(){

$("span").css("color","red");

},function(){

$("span").css("color","blue");

});

###和動畫相關

if(this.value=="隱藏"){

$("img").hide(3000,function(){

alert("xxx");

});

}else if(this.value=="顯示"){

$("img").show(3000);

}else if(this.value=="上滑"){

$("img").slideUp(2000);

}else if(this.value=="下滑"){

$("img").slideDown(2000);

}else if(this.value=="淡出"){

$("img").fadeOut(2000);

}else if(this.value=="淡入"){

$("img").fadeIn(2000);

}else{//自定義

$("img").animate({"left":"250px"},1000)

.animate({"top":"250px"},1000)

.animate({"left":"0px"},1000)

.animate({"top":"0px"},1000)

.animate({"width":"100px",

"height":"100px"},1000)

.fadeOut(2000,function(){

$(this).remove();

});

}

Web前端筆記--html，css，javascript，jquery

HTML

常用標籤

分區元素

元素的分類

特殊字符實體引用

圖片標籤<img>

圖像地圖

超鏈接

圖像地圖 map

超鏈接

表格標籤

表單 form

按鈕

CSS

佈局相關屬性（盒子模型）

顯示方式 display

JavaScript

jQuery

Java常用API（一）——字符串String類

Java常用API（八）——反射(reflect)機制

基於持久層框架Mybatis的數據訪問和動態sql定義

Web前端筆記--html，css，javascript，jquery

JSON數據格式和AJAX異步請求

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

Web前端筆記--html，css，javascript，jquery

HTML

常用標籤

分區元素

元素的分類

特殊字符 實體引用

圖片標籤<img>

圖像地圖

超鏈接

圖像地圖 map

超鏈接

表格標籤

表單 form

按鈕

CSS

佈局相關屬性（盒子模型）

顯示方式 display

JavaScript

jQuery

特殊字符實體引用