Python 之Web編程
- 2020 年 2 月 10 日
- 筆記
一 、HTML是什麼？
htyper text markup language 即超文本標記語言
超文本:就是指頁面內可以包含圖片、鏈接、甚至音樂、程序等非文字元素
標記語言：標記(標籤)構成的語言
靜態網頁：靜態的資源，如xxx.html
動態網頁：html代碼是由某種開發語言根據用戶請求動態生成
html文檔樹結構圖：
二 、 什麼是標籤？
- 由一對尖括號包裹的單詞構成，如<html> 所有標籤中的單詞不可能從數據開頭
- 標籤不區分大小寫<html>和<HTML>，建議使用小寫
- 標籤分兩部分：開始標籤<a>和結束標籤</a>，兩個標籤之間的部分，叫標籤體
- 有些標籤功能比較簡單，使用一個標籤即可，這種標籤叫做自閉合標籤，如：<br/>、<hr/>、<input/>、<img/>
- 標籤可以嵌套，但不能交叉嵌套。如:<a><b></a></b>
三 、 標籤的屬性
- 通常是以鍵值對形式出現的，例如 name="alex"
- 屬性只能出現在開始標籤 或 自閉合標籤中
- 屬性名字全部小寫，屬性值必須使用雙引號或單引號包裹，如:name="alex"
- 如果屬性值和屬性名完全一樣，直接寫屬性名即可，如:readonly
1、<head>標籤
<meta>
meta標籤的組成：meta標籤共有兩個屬性，分別是http-equiv屬性和name屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現不同的網頁功能
1：name屬性主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜索引擎機械人查找信息和分類信息用的
1 <meta name="keywords" content="meta總結"> 2 <meta name="description" content="alex是一個中國人">
2：http-equiv相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。
1 <meta http-equiv="content-type" charset="UTF-8"> 2 <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> 3 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> # 兼容標籤，IE"N"代表兼容幾
非meta標籤
1 <title>hello world</title> 2 <link rel="icon" href="http://xxxxx/pic1.ico"> 3 <link rel="stylesheet" href="css.css"> # 引入樣式 4 <script src="hello.js"></script> # 引入樣式
2 、 <body>標籤
基本標籤(塊級標籤和內聯標籤)
1 <hn>：n的取值1-6；從大到小，用於表示標題(塊標籤,獨佔一行) 2 <p>：段落標籤，包裹的內容換行，並且也上下內容之間有一行空白(塊標籤,獨佔一行) 3 <b>與<strong>：加粗標籤 4 <strike>：文字加上一條中線 5 <em>：文字變成斜體 6 <sup>與<sub>：上角標和小角標1 7 <br>：換行 8 <hr>：水平線 9 <div>與<span>
塊級標籤：<p><h1><table><ol><ul><form><div>
內聯標籤：<a><input><img><sub><sup><textarea><span>
block(塊)元素的特點
總是在新行上開始
寬度缺省是他容易的100%，除非設定一個寬度
它可以容納內聯元素和其他塊元素(嵌套)
inline元素的特點
和其他元素都在一行上
寬度就是它的文字或圖片的寬度，不可改變
內聯元素只能容納文本或其他內聯元素
特殊字符
<(小於)； >(大於)；"；©(版權)；®； 
圖形標籤：<img>
src：圖片的路徑 alt：圖片沒有加載成功時的提示 title：鼠標懸浮時的提示信息 width：圖片的寬 height：圖片的高(寬高兩個屬性，只用一個會自動等比縮小)
超鏈接標籤(錨標籤)：<a>
href：要鏈接的資源路徑，如：href="www.baidu.com" target:_blank：在新的窗體打開超鏈接，框架名稱；在指定框架中打開連接內容 name：定義頁面的書籤，用於跳轉href:#id(錨)
列表標籤：
1 <ul>：無序列表 2 <ol>：有序列表 3 <li>：列表中的每一項 4 <dl>：定義列表 5 <dt>:列表標題 6 <dd>：列表項
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 <li>11</li> 10 <li>22</li> 11 <li>33</li> 12 </ul> 13 </body> 14 </html>
ul無序列表
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ol> 9 <li>44</li> 10 <li>55</li> 11 <li>66</li> 12 </ol> 13 </body> 14 </html>
ol有序列表
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <dl> 9 <dt>第一章</dt> 10 <dd>第一節</dd> 11 <dd>第二節</dd> 12 <dt>第二章</dt> 13 <dd>第一節</dd> 14 <dd>第二節</dd> 15 </dl> 16 </body> 17 </html>
dl定義列表
表格標籤：<table>
1 border：表格邊框 2 cellpadding：內邊距 3 cellspacing：外邊距 4 width：像素 百分比 5 <tr>：table row 6 <th>：table head cell 7 <td>：table data cell 8 rowspan：單元格豎跨多少行 9 colspan：單元格橫跨多少列(合併單元格) 10 <th>：table header <tbody>：為表格進行分區
表單標籤：<form>
表單用於向服務器傳輸數據。
表單能夠包含input元素，比如文本字段，複選框，單選框，提交按鈕等等
表單還可以包含textarea，select，fieldset和label元素
表單屬性：
HTML表單用於接收不同類型的用戶輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。表單標籤，要提交的所有內容都應該在該標籤中。
action：表單提交到哪，一般指向服務器端一個程序，程序接受到表單提交過來的數據(即表單元素值)作相應處理
method：表單的提交方式post/get默認取值就是get(信封)
get：1.提交的鍵值對，放在地址欄url後面；2.安全性相對較差；3.對提交內容的長度有限制
post：：1提交的鍵值對不在地址欄；2.安全性相對較高；3.對提交內容的長度理論上無限制
get/post是常見的兩種請求方式
表單元素：
<input> 標籤的屬性和對應值
1 type: 2 text：文本輸入框 3 password：密碼輸入框 4 radio：單選框 5 checkbox：多選框 6 submit：提交按鈕 7 button：按鈕(配合JS使用) 8 file：提交文件；form表單需要加上屬性:enctype="multipart/form-data"，meth="post" 9 name:表單提交相的鍵，注意和id屬性的區別；name屬性是和服務器通信時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要為了方便客戶端編程，在css和JavaScript中使用 10 value：表單提交項的值，對於不同的輸入類型，value屬性的用法也不同 11 type="button","reset","submit" -定義按鈕上的顯示的文本 12 type="text","password","hidden" -定義輸入字段的初始值 13 type="checkbox","radio","image" -定義與輸入相關聯的值 14 checked:radio和checkbox默認被選中 15 readonly：只讀 text和password 16 disabled：對所有input都好使
上傳文件注意：
1、請求方式必須是post
2、enctype="multipart/form-data"
1 def index(req): 2 print('get:', req.GET) 3 print('post:', req.POST) 4 print('FILSE:', req.FILES) 5 for item in req.FILES: 6 fileObj = req.FILES.get(item) 7 f = open(fileObj.name, 'wb') 8 iter_file = fileObj.chunks() 9 for line in iter_file: 10 f.write(line) 11 f.close() 12 return HttpResponse('註冊成功！')
上傳文件
<select> 下拉選項標籤屬性
1 name:表單提交項的鍵 2 size:選項個數 3 multiple：multiple 4 <option> 下拉選中的每一項屬性： 5 value：表單提交項的值 selected:selected下拉選默認被選中 6 <optgroup> 為每一項加上分組
<textarea> 文本域
name:表單提交項的鍵 cols:文本域默認有多少列 rows:文本域默認有多少行
<lable>
1 <label for="www">姓名</lable> 2 <input id="www" type="text">
<fieldset>
1 <fieldset> 2 <legend>登陸</legend> 3 <input type="text"> 4 </fieldset>
四 、 CSS樣式
1、CSS概述
CSS是Cascading Style Sheets的簡稱，層疊樣式表，用來控制網頁數據的表現，可以使網頁的表現與數據分離。
2 、 引入方式
1 第一種：行內式(不推薦)；在標記的Style屬性中設定CSS樣式 2 <p style="background-color:rebeccapurple">hello world</p> 3 4 5 第二種：嵌入式;將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤中 6 <!DOCTYPE html> 7 <html lang="en"> 8 <head> 9 <meta charset="UTF-8"> 10 <title>tile</title> 11 <style> 12 p{ 13 background-color: red; 14 } 15 </style> 16 </head> 17 18 19 第三種：鏈接式；將一個.css文件引入到HTML中 20 <link href="mystyle.css" rel="stylesheet" type="text/css"> 21 22 23 第四種：導入式；將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>中 24 <style type="text/css"> 25 @import"MyStyle.css"; 註：.css文件的路徑 26 </style>
3 、 CSS的選擇器(Selector)
基礎選擇器:
1 *: 通用元素選擇器，匹配任何元素 *{margin: 0;padding: 0;} 2 E: 標籤選擇器，匹配所有E標籤的元素 p{color: green} 3 .info和E.info:class選擇器，匹配所有class屬性中包含info的元素 .info{background-color: green} 4 #info和E#info:id選擇器，匹配所有id屬性等於footer的元素 #info{background-color: green}
組合選擇器
1 E,F 多元素選擇器，同時匹配所有E元素和F元素，E和F之間用逗號分隔 div,p{background-color: green} 2 E F 後代元素選擇器，匹配所有屬於E元素後代的F元素，E和F之間用空格分隔 li a{background-color: green} 3 E>F 子元素選擇器，匹配所有E元素的子元素F div>p{color: green} 4 E+F 毗鄰元素選擇器，匹配所有緊隨E元素之後的同級元素F div+p{color: green}
註：
1、塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其他內聯元素
2、有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如：h1-6；p；dt
3、li內可以包含div
4、塊級元素與塊級元素並列、內聯元素與內聯元素並列
屬性選擇器
1 E[att] 匹配所有具有att屬性的E元素，不考慮它的值 p[title]{color:#f00；} 2 E[att=val] 匹配所有att屬性等於"val"的E元素 div[class="error"]{color：#f00；} 3 E[attr~=val] 匹配所有att屬性具有多個空格分隔的值、其中一個值等於"val"的E元素 4 td[class~="name"]{color：#f00;} 5 E[attr^=val] 匹配屬性值以制定值開頭的每個元素 div[class^="test"]{background:#ffff00;} 6 E[attr$=val] 匹配屬性值以指定值結尾的每個元素 div[class$="test"]{background:#ffff00;} 7 E[attr*=val] 匹配屬性值中包含指定值的每個元素 div[class*="test"]{background:#ffff00;}
偽類(Pseudo-class)
CSS偽類是用來給選擇器添加一些特殊效果
anchor偽類：專用於控制鏈接的顯示效果
1 a:link(沒有接觸過的鏈接)，用於定義了鏈接的常規狀態 2 a:hover(鼠標放在鏈接上的狀態)，用於產生視覺效果 3 a:visited(訪問過的鏈接)，用於閱讀文章，能清楚的判斷已經訪問過的鏈接 4 a:active(在鏈接上按下鼠標時的狀態)，用於表現鼠標按下時的鏈接狀態 5 偽類選擇器:偽類指的是標籤的不同狀態： 6 a==>點過狀態、沒點過的狀態、鼠標懸浮狀態、激活狀態 7 a:link{color:#FF0000} /*未訪問的鏈接*/ 8 a:visited{color:#00FF00} /*已訪問的鏈接*/ 9 a:hover{color:#FF00FF} /*鼠標移動到鏈接上*/ 10 a:active{color:#0000FF} /*選定的鏈接*/
before after偽類：
1 :before p:before{content:"hello";color:red} 在每個<p>元素的內容之前插入內容 2 :after p:aftere{content:"hello";color:red} 在每個<p>元素的內容之後插入內容
CSS優先級
樣式表中的特殊性描述了不同規則的相對權重，它的基本規則如下： 1、內聯樣式表的權值最高 style="" 2、統計選擇符中的ID屬性個數 #id 3、統計選擇符中的class屬性個數 .class 4、統計選擇符中的HTML標籤名個數 p
1 <style> 2 #p{ 3 color: rebeccapurple; 4 } 5 .p{ 6 color: #2459a2; 7 } 8 p{ 9 color: yellow; 10 } 11 </style> 12 <p id="p" class="p" style="color: deeppink">hello world</p>
優先級
CSS繼承
繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的後代。如一個body定義了顏色也會應用到段落的文本中。
1 <body style="color: red"> 2 <p>hello world!</p> 3 </body>
還可以覆蓋其繼承樣式
1 <body style="color: red"> 2 <p style="color: blue">hello world!</p> 3 </body>
有一些屬性不能被繼承，如：border，margin，padding，background等
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 border: 1px solid red; 9 } 10 </style> 11 12 </head> 13 14 <body> 15 <div>hello <p>yuan</p> </div> 16 </body> 17 </html>
CSS常用屬性
顏色屬性
1 <div style="color: red">hello world!</div> 2 <div style="color: #d3ffae">hello world!</div> 3 <div style="color: rgb(255,255,0)">hello world!</div> 4 <div style="color: rgba(255,0,0,0.5)">hello world!</div>
字體屬性
1 <h1 style="font-size: 20px">hello world!</h1> 2 <h1 style="font-size: 50%">hello world!</h1> 3 <h1 style="font-size: large">hello world!</h1> 4 <h1 style="font-family: 'Lucida Console'">hello world!</h1> 5 <h1 style="font-weight: lighter">hello world!</h1> 6 <h1 style="font-style: oblique">hello world!</h1>
背景屬性
1 background-color:cornflowerblue 2 background-image:url('1.jpg'); 3 background-repeat:no-repeat;(repeat:平鋪滿) 4 background-position:reght top(20px 20px);(橫向:left center right)(縱向:top center bottom) 5 簡寫：<body style="background: 20px 20px no-repeat #ff4 url('OSI.jpg')"> 6 7 </body>
註：如果將背景屬性加在body上，要給body加上一個height，否則結果異常，因為body為空，無法撐起背景圖片；另外還要設置一個width=100px
文本屬性
1 font-size:10px 2 text-align:center;橫向排列 3 line-height:200px;文本行高 4 vertical-align:-4px;設置元素內容的垂直對齊方式，只對行內元素有效，對塊級元素無效 5 text-indent:150px;首行縮進 6 letter-spacing:10px; 7 word-spacing:20px 8 text-transform:capitalize;
邊框屬性
1 border-style:solid; 2 border-color:chartreuse; 3 border-width:20px; 4 簡寫:border:30px rebeccapurple solid
列表屬性
1 <style> 2 ul,ol{ 3 list-style: decimal-leading-zero; 4 list-style: none; 5 list-style: circle; 6 list-style: upper-alpha; 7 list-style: disc; 8 } 9 </style>
dispaly屬性
1 none 2 block 3 inline
display:inline-block可做列表布局，其中的類似於圖片間的間隙小bug可以通過如下設置解決
1 #outer{ 2 border:3px dashed; 3 word-spacing:-5px; 4 }
1 inline-block默認的空格符就是標籤與標籤之間的空隙造成的。 2 (一)通過margin:-3解決 3 (二)給幾個標籤加上一個父級div,然後設置樣式 4 div{ 5 word-spacing:-5px; 6 }
解決inline-block間隙
外邊距和內邊距
- margin：用於控制元素與元素之間的距離；基本用途就是控制元素周圍空間的間隔，從而達到視覺上的相互隔開
- padding：用於控制內容與邊框之間的距離；
- Border(邊框)：圍繞在內邊距和內容外的邊框；
- Content(內容)：盒子的內容，顯示文本和圖像。
當指定一個CSS元素的寬度和高度屬性時，只需設置內容區域的寬度和高度。
1 margin:10px 5px 15px 20px;--------上 右 下 左 2 margin:10px 5 px 15px; --------上 右左 下 3 margin:10px 5px; -------- 上下 右左 4 margin:10px; -------- 上右下左
1 父級div中沒有border，padding，inline content，子級div的margin會一直向上找，直到找到某個標籤包括border，padding，inline content中的其中一個，然後此div進行margin。 2 3 4 5 解決方案： 6 第一種： 7 border:1px solid transparent 8 第二種： 9 padding:1px 10 第三種： 11 over-flow:hidden
邊界塌陷(邊界重疊)解決方案
float屬性
block元素通常被視為獨立的一塊，獨佔一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素可以設置width、height、margin、padding屬性。
inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行里，直到排滿，才會新換一行，寬度隨元素的內容而變化。inline元素設置width和height屬性無效。inline元素的margin和padding屬性。水平方向的padding-left，padding-right，margin-left，margin-right都產生邊距效果；但豎直方向的padding-top，padding-bottom，margin-top，margin-bottom不會產生邊距效果。
塊級元素：div，form，table，p，pre，h1-h5，dl，ol，ul等
內聯元素：span，a，strong，em，label，input，select，textarea，img，br等
文檔流：指的是元素排版布局中，元素會自動從左往右，從上往下的流式排列。
脫離文檔流：將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當作脫離文檔流的元素不存在而進行定位。
只有絕對定位absolute和浮動float才會脫離文檔流。
註：部分無視和完全無視的區別？使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍。而對於使用absolute、position脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視他。
浮動：浮動的框可以向左或向右移動，直到它的外邊距碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文檔的普通流中，所以文檔的普通流中的浮動框之後的塊框表現得就像浮動框不存在一樣。當初float被設計的時候就是用來完成文本環繞的效果，所以文本不會被擋住，這是float的特性，即float是一種不徹底的脫離文檔流方式。無論多麼複雜的布局，其基本出發點均是：「如何在一行顯示多個div元素」。
清除浮動：在非IE瀏覽器下，當容器的高度為auto，且容器的內容中有浮動(float為left或right)的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響(甚至破壞)布局的現象。這種現象叫浮動的溢出，可以用CSS清除浮動。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 * { 8 margin:0; 9 padding:0; 10 } 11 .container{ 12 border:1px solid red; 13 width:300px; 14 } 15 #box1{ 16 background-color:green; 17 float:left; 18 width:100px; 19 height:100px; 20 } 21 #box2{ 22 background-color:deeppink; 23 float:right; 24 width:100px; 25 height:100px; 26 } 27 #box3{ 28 background-color:pink; 29 height:40px; 30 } 31 </style> 32 </head> 33 <body> 34 35 <div class="container"> 36 <div id="box1">box1 向左浮動</div> 37 <div id="box2">box2 向右浮動</div> 38 </div> 39 <div id="box3">box3</div> 40 </body> 41 </body> 42 </html>
案例
1 clear語法：none | left | right | both 2 none：默認值，允許兩邊都可以有浮動對象 3 left：不允許左邊有浮動對象 4 right：不允許右邊有浮動對象 5 both：不允許有浮動對象 6 註：clear屬性只對自身起作用，而不會影響其他元素。若一個元素的右側有一個浮動對象，而這個元素設置了不允許右邊有浮動(即clear:right)，那麼這個元素會自動下移一格，從而達到該元素右邊沒有浮動對象的目的。
方式一：
1 .clearfix:after{ 2 display:block; # 將該元素轉換為塊級元素 3 clear:both; # 清除左右兩邊浮動 4 visibility:hidden; # 可見度設置隱藏。注:仍然佔據空間，只是看不到而已 5 line-height:0; # 行號為0 6 height:0; # 高度為0 7 font-size:0; # 字體大小為0 8 } 9 10 11 .clearfix{ 12 *zoom:1; # 針對IE6，因為IE6不支持:after偽類，zoom:1讓IE6的元素可以清除浮動來包裹內部元素 13 }
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 * { 8 margin:0; 9 padding:0; 10 } 11 .container{ 12 border:1px solid red; 13 width:300px; 14 } 15 #box1{ 16 background-color:green; 17 float:left; 18 width:100px; 19 height:100px; 20 } 21 #box2{ 22 background-color:deeppink; 23 float:right; 24 width:100px; 25 height:100px; 26 } 27 #box3{ 28 background-color:pink; 29 height:40px; 30 } 31 </style> 32 </head> 33 <body> 34 35 <div class="container"> 36 <div id="box1">box1 向左浮動</div> 37 <div id="box2">box2 向右浮動</div> 38 <div style="clear: both"></div> 39 </div> 40 <div id="box3">box3</div> 41 </body> 42 </body> 43 </html>
View Code
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 * { 8 margin:0; 9 padding:0; 10 } 11 .container{ 12 border:1px solid red; 13 width:300px; 14 } 15 #box1{ 16 background-color:green; 17 float:left; 18 width:100px; 19 height:100px; 20 } 21 #box2{ 22 background-color:deeppink; 23 float:right; 24 width:100px; 25 height:100px; 26 } 27 #box3{ 28 background-color:pink; 29 height:40px; 30 } 31 .clearfix:after{ 32 content: ""; 33 display: block; 34 clear: both; 35 } 36 </style> 37 </head> 38 <body> 39 40 <div class="container clearfix"> 41 <div id="box1">box1 向左浮動</div> 42 <div id="box2">box2 向右浮動</div> 43 </div> 44 <div id="box3">box3</div> 45 </body> 46 </body> 47 </html>
View Code
方式二：
1 overflow:hidden; # 將超出的部分裁切隱藏，float的元素雖然不在普通流中，但是他浮動在普通流之上，可以把普通流元素+浮動元素想像成一個立方體。如果沒有明確設定包含容器高度的情況下，它要計算內容的全部高度才能確定在什麼位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清楚浮動。
position定位
1、static：默認值，無定位，不能當作絕對定位的參照物，並且設置標籤對象的left、top等值是不起作用的。
2、relative：相對定位，相對於該元素在文檔流中的原始位置，即以自己原始位置為參照物。
3、absolute：絕對定位，元素定位後生成一個塊級框，不論原來他在正常流中生成何種類型的框。
4、fixed：對象脫離正常文檔流，使用top、right、bottom、left等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨着滾動。
註：若元素設置了 position：absolute／ｆｉｘｅｄ；該元素就不能設置ｆｌｏａｔ；但是ｒｅｌａｔｉｖｅ可以，因為它原本所佔的空間仍然佔據文檔流。
５、ｍａｒｇｉｎ屬性布局絕對定位元素：ｍａｒｇｉｎ－ｂｏｔｔｏｍ和ｍａｒｇｉｎ－ｒｉｇｈｔ的值不對文檔流中的元素產生影響，因為該元素已經脫離了文檔流。
五 、 JavaScript概述
JavaScript的歷史
•1992年Nombas開發出C-minus-minus(C–)的嵌入式腳本語言(最初綁定在CEnvi軟件中)，後將其改名為Scriptease(客戶端執行的語言)
•Netscape(網景)接受Nombas的理念，(Brendan Eich)在其Netscape Navigator 2.0產品中開發出一套livescipt的腳本語言。sun和Netscape共同完成，後改名叫Javascript
•微軟隨後模仿在其IE3.0產品中搭載了一個JavaScript的克隆版叫Jscript
•為了統一三家，ECMA(歐洲計算機製造協會)定義了ECMA-262規範。國際標準化組織及國際電工委員會(ISO/IEC)也採納ECMAScript作為標準(ISO/IEC-16262)。從此，Web瀏覽器就開始努力將ECMAScript作為JavaScript實現的基礎。EcmaScript是規範。
ECMAScript
儘管ECMAScript是一個重要的標準，但它並不是JavaScript唯一的部分，當然，也不是唯一標準化的部分。實際上，一個完整的JavaScript實現是由以下3個不同部分組成的：
•核心(ECMAScript)
•文檔對象模型(DOM) Document Object Model(整合JS,CSS,HTML)
•瀏覽器對象模型(BOM) Broswer Object Model(整合JS和瀏覽器)
•JavaScript在開發中絕對多數情況是基於對象的。也是面向對象的。
ECMAScript描述了以下內容：
1、語法
2、類型
3、語句
4、關鍵詞
5、保留字
6、運算符
7、對象(封裝|繼承|多態)基於對象的語言
JavaScript的兩種引入方式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 </body> 10 11 <!--第一種引入方式--> 12 <script> 13 alert('hello world!') 14 </script> 15 16 <!--第二種引入方式--> 17 <script src="test.js"></script> 18 </html>
JavaScript基礎
變量
1 <script> 2 var name="alex",age=18;gender="男" 3 註： 4 1、聲明變量時，可以不用var；如果不用var那麼該變量為全局變量 5 2、變量命名，只支持字母、下劃線、$；且區分大小寫,x與X是兩個變量;不能數字開頭 6 </script>
基本規範
1、每行結束可以不加分號(建議每行結束加上「;」)
2、單行注釋(「//」)和多行注釋(「/**/」)
命名規範
1 Camel 標記法 2 首字母是小寫的，接下來的字母都以大寫字符開頭。例如： 3 var myTestValue = 0, mySecondValue = "hi"; 4 Pascal 標記法 5 首字母是大寫的，接下來的字母都以大寫字符開頭。例如： 6 Var MyTestValue = 0, MySecondValue = "hi"; 7 匈牙利類型標記法 8 在以 Pascal 標記法命名的變量前附加一個小寫字母（或小寫字母序列），說明該變量的類型。例如，i 表示整數，s 表示字符串，如下所示「 9 Var iMyTestValue = 0, sMySecondValue = "hi";
常量和標識符
1、常量(程序中出現的數據值)
2、標識符：
·只允許字母、數字、下劃線、$；不能數字開頭
·用於表示函數、變量的名字
·JavaScript語言中代表特定含義的詞稱為保留字，不允許程序再次定義為標識符
數據類型
1 數字類型(Number):不區分整型和浮點型數值，所有的數字都採用64位浮點格式存儲 2 字符串(String)：字符串常量首位由單引號或雙引號括起 3 常用的轉義字符：換行(n)、單引號(')、雙引號('')、右劃線(\) 4 布爾值(Boolean)：僅有兩個值:true和false，也代表1和0，主要用於JavaScript的控制語句中，例如： 5 if(x==1){ 6 y=y+1 7 } 8 else{ 9 y=y-1 10 } 11 Null類型：如果函數或方法要返回的是對象，那麼找不到該對象時，返回的通常為null 12 Undefined類型：當聲明的變量未初始化時，該變量的默認值為 undefined；當函數無明確返回值時，返回的也是 undefined
1 - Boolean(布爾)，取值:只有兩種值:true或false 2 3 - Number(數字)，取值：所有數字，包含整數小數等，範圍相當於double 4 5 - String(字符串),取值：所有字符串 6 7 - Undefined(未定義),取值:只有一個值undefined 8 9 - Null(空對象),取值:只有一個值null 10 11 - Object(對象類型),取值:任何對象、Array、Function等
JavaScript數據類型
數據類型的轉換
1 JavaScript：變量在聲明的時候並不需要指定數據類型，變量只有在賦值的時候才會確定數據類型，表達式中包含不同類型數據則在計算過程中會強制進行類別轉換 2 3 數字+字符串:數字轉換為字符串 4 5 數字+布爾值:true轉換為1，false轉換為0 6 7 字符串+布爾值:布爾值轉換為字符串true或false
強制類型轉換函數
1 函數parseInt： 強制轉換成整數 例如parseInt("6.12")=6 ; parseInt(「12a")=12 ; parseInt(「a12")=NaN ;parseInt(「1a2")=1 注:NaN-->Not a Number,是number的一種類型 2 3 函數parseFloat： 強制轉換成浮點數 parseFloat("6.12")=6.12 4 5 函數eval： 將字符串強制轉換為表達式並返回結果 eval("1+1")=2 ; eval("1<2")=true
1 <script type="text/javascript"> 2 //1.把字符串轉換為數字類型 3 //var n = '123'; 4 //alert(n + 1); //結果:1231 5 6 //var n = '123'; 7 //n = parseInt(n); 8 //alert(n+1); 9 10 //var n = '15'; 11 //// 把n中的'15'當做八進制來進行轉換，轉換成十進制數字，返回 12 //n = parseInt(n, 8); 13 //alert(n); 14 15 //alert(parseInt('99.3')); // 99 16 //alert(parseFloat('99.3')); // 99.3 17 //alert(parseFloat('99.3.3.2')) // 99.3 18 19 // ------把任意類型轉換為數字類型 20 //var n = '123.3'; 21 //alert(n); 22 //alert(Number(n)); 23 //alert(typeof (Number(n))); 24 25 26 // ======Number======= 27 //function func() { 28 //} 29 //alert(Number(func)); // NaN 30 //alert(Number(false)); // 0 31 //alert(Number(true)); // 1 32 //alert(Number(undefined)); // NaN 33 //alert(Number(null)); // 0 34 //alert(Number('1.2')); // 1.2 35 //alert(Number('1.2.3')); // NaN 36 //alert(Number(new Object())); // NaN 37 //alert(Number(50)); // 50 38 39 // =========Bolean()======== 40 //function func() { 41 //} 42 //alert(Boolean(func)); // true 43 //alert(Boolean('')); // false 空字符串 44 //alert(Boolean('hello')); // true 非空字符串 45 //alert(Boolean(50)); // true 非零數字 46 //alert(Boolean(null)); // false null 47 //alert(Boolean(0)); // false 零 48 //alert(Boolean(new Object())); // true 對象 49 //alert(Boolean(NaN)); // false 50 51 // ============toString()======= 52 //var n = 123; 53 //n = n.toString(); // 將任何類型轉換為String類型 54 //alert(typeof (n)); 55 56 //var n = null; 57 //alert(n.toString()) // null對象不能調用任何方法 58 //alert(String(n)) // 'null' 將所有類型轉換為String類型 59 </script>
1 <script type="text/javascript"> 2 var n = parseInt('a123b') 3 4 //alert(n) // NaN 5 // 執行 alert('轉換成功!'); 6 // 判斷一個值是否是一個NaN不能用== 或者是!=,必須使用isNaN()函數 7 //if (n == NaN) { 8 // alert('轉換失敗!'); 9 //} else { 10 // alert('轉換成功!'); 11 //} 12 13 if (isNaN(n)) { 14 alert('轉換失敗!'); 15 } else { 16 alert('轉換成功!'); 17 } 18 </script>
isNaN()函數,判斷類型是否轉換成功!
類型查詢函數(typeof)
ECMAScript提供了一個typeof運算符來判斷一個值的某種類型
1 typeof:的類型(string/number/boolean/object) 2 typeof("test"+3)---->string 3 typeof(null) ---->object 4 typeof(true+1) ---->number 5 typeof(true-false) --->number
ECMAScript運算符
1 加(+)、減(-)、乘(*)、除(/)、餘數(%)、遞增(++)、遞減(--) 2 等於(==)、不等於(!=)、大於(>)、小於(<)、大於等於(>=)、小於等於(<=)、與(&&)、或(||)、非(!)
1 1、相等符號: == 、 != 2 - 對於==兩邊的表達式，如果類型相同，則直接比較。 3 - 對於==兩邊的表達式，如果類型不同，則先試圖將==兩邊的運算符轉換為String、Boolean、Number這些相同的數據類型然後再判斷是否相等。 4 - ==認為null與undefined、unll與null、undefined、undefined是相等的。 5 6 2、 完全相等運算符(恆等運算符)：=== 、 ！== 7 - ===運算符判斷前不進行類型轉換，並且===兩邊必須類型相同，值也相同的請款修改才返回true。
==與===
1 1.如果==兩邊都是字符串類型，那麼必須這兩個字符串完全相同才會返回true 2 2.如果==兩邊的兩個變量指向了同一個對象，那麼也返回true 3 3.如果==兩邊是一個字符串類型，一個數字類型，那麼js引擎會嘗試把其中的字符串類型嘗試轉換為數字類型後再作比較。 4 4.如果==兩邊一個是布爾類型，一個數字類型，則也會嘗試把其中的布爾類型嘗試轉換為數字類型後再作比較。 5 5.如果==兩邊其中一個是String或Number類型，而另外一個是object類型，那麼判斷相等之前會先將Object轉換為String或Number類型後在與另外一個值比較。 6 6.new String('a')=='a' 返回結果是true，而new string('a')==new string('a')是false
1 <script type="text/javascript"> 2 //var n1 = '123'; 3 //var n2 = 123; 4 //alert(n1 == n2); // true 5 //alert(n1 === n2); //false 6 7 //var n1 = null; 8 //var n2; 9 //alert(n1 == n2); // true,當使用==判斷的時候，認為null與undefined相同 10 //alert(n1 === n2); // false 11 12 //var n1 = true; 13 //var n2 = 'false'; 14 //alert(n1 == n2); // false 15 //alert(n1 === n2); // false 16 17 //var n1 = true; 18 //var n2 = 'true'; 19 //alert(n1 == n2); // false 20 21 //var n1 = 10; 22 //var n2 = -10; 23 //alert(n1 == n2); // false] 24 25 //var n1 = 'a'; 26 //alert(new String('a') == n1); // true 27 28 //alert(new String('a') == new String('a')); // false 29 30 // switch內部使用的也是===嚴格等於來判斷是否相等 31 var n = 123; 32 switch (n) { 33 case '123': 34 alert('等於字符串123'); 35 break; 36 case 123: 37 alert('等於數字123'); 38 break; 39 default: 40 alert('沒有找到相等的。') 41 break; 42 } 43 </script>
1 Undefined值表示一種未知的狀態 2 1.聲明變量但未賦值時，變量的值為Undefined 3 2.方法沒有return語句返回值時，返回Undefined 4 3.未聲明的變量，通過typeof()檢測變量時，返回「Undefined」字符串。 5 4.訪問不存在的屬性時返回Undefined，例如:Window.xxx返回Undefined。 6 7 Unll值： 8 1.null表示一個有意義的值，表示「無值」或「無」對象，此時變量的狀態為「已知狀態」，即Null。可以通過設置對象名為Null值，來釋放對對象的引用，以便瀏覽器的垃圾回收機制可以回收內存。 9 10 11 注1：null==undefined結果為True；null===undefined結果為False 12 13 注2：把null轉換為數字，結果為0.而把undefined轉換為數字結果為NaN
1 <script type="text/javascript"> 2 //1.當聲明變量未賦值的時候，那麼變量的值就是undefined 3 //var x; 4 //alert(x); 5 6 //2.變量未聲明 7 //alert(W); 8 9 // 在使用變量之前，先校驗該變量是否可用 10 //if (typeof (w) == 'undefined') { 11 // alert('該變量不可用!'); 12 //} else { 13 // alert(w) 14 //} 15 16 //3.方法沒有返回值的時候,接受的返回值就是undefined 17 //function fun1(){ 18 // //return 10; 19 //} 20 //var n = fun1(); 21 //alert(n); 22 23 //---------------null值-------------------------- 24 // null值表示指向了一個「空對象」，需要我們為n賦值一個null值 25 //什麼情況下需要為變量賦值null值？一般在一個對象使用完畢，需要告訴瀏覽器可以被垃圾回收的情況下 26 //需要把變量賦值為null，這樣這個變量所指向的對象就可以被垃圾回收了。 27 //var n = null 28 //alert(n); 29 30 // 無論變量的值是null值，還是undefined都表示該變量不可用。所以在使用某些變量前可以對變量做校驗，判斷該變量是否可以用。 31 // 對變量校驗 32 //if (typeof (x) != 'undefined' && x != null) { 33 // alert('x變量可用！'); 34 //} else { 35 // alert('x變量不可用！'); 36 //} 37 </script>
1 <script type="text/javascript"> 2 //var n = 10; 3 //var m = 1000; 4 5 // 簡寫聲明兩個變量 6 //var x = 10, y = 1000; 7 8 //var n = 10, m = 1100; 9 //alert(n < m && m > n); 10 11 // 新語法 12 //var r = 'a' || ''; 13 //alert('1-->' + r); // a 14 //r = null || 15; 15 //alert('2-->' + r); // 15 16 //r = 'a' && 0; 17 //alert('3-->' + r); // 0 18 //r = null && 15; 19 //alert('4-->' + r); // null 20 //r = '12123' || 12; 21 //alert('5-->' + r); // 12123 22 //r = '12123' && 12; 23 //alert('6-->' + r); // 12 24 // ||：第一個值為真，返回第一個值；第一個值為假，繼續判斷第二個值 25 // &&：第一個值為假，直接返回第一個值；第二個值為真，繼續判斷第二個值 26 </script>
控制語句
1 if(表達式){ 2 ...... 3 }else{ 4 ..... 5 }
1 if(表達式1){ 2 .... 3 }else if(表達式2){ 4 ...... 5 }else if(表達式3){ 6 .... 7 }else{ 8 .... 9 }
switch 選擇控制語句
1 switch(表達式){ 2 case 值1:語句1;break; 3 case 值2:語句2;break; 4 case 值3:語句3;break; 5 default:語句4; 6 }
1 總結： 2 1.switch用來根據一個整型值進行多路分支，並且編譯器可以對多路分支進行優化 3 2.switch case只將表達式計算一次，然後將表達式的值與每個case的值比較，進而選擇執行哪一個case的語句塊 4 3.if else 的判斷條件範圍較廣，每個語句基本上獨立的，每次判斷時都要條件加載一次 5 6 所以在多路分支時用switch比if else if結構效率高
switch比if else結構更加簡潔，可讀性更強，效率高
for 循環語句
1 for(初始化值;條件;增量){ 2 ..... 3 } 4 實現條件循環，當條件成立時，執行語句，否則跳出循環體
1 doms=document.getElementsByTagName("p"); 2 3 for (var i in doms){ 4 console.log(i); // 0 1 2 length item namedItem 5 //console.log(doms[i]) 6 } 7 8 //循環的是你獲取的th一個DOM元素集，for in用來循環對象的所有屬性，dom元素集包含了你上面輸出的屬性。 9 //如果你只要循環dom對象的話，可以用for循環: 10 11 for (var i=0;i<doms.length;i++){ 12 console.log(i) ; // 0 1 2 13 //console.log(doms[i]) 14 }
獲取標籤的值
while 循環控制語句
1 while(條件){ 2 .... 3 } 4 功能和for類似，當條件成立循環執行語句，否則跳出循環
try catch 異常處理
1 try{ 2 .... 3 } 4 catch(e){ 5 try代碼塊中拋出異常，執行此處代碼 6 } 7 finally{ 8 無論try中代碼是否有異常拋出 ，finally代碼塊中的始終會執行 9 } 10 11 註：主動拋出異常 throw Error('xxxxx')
ECMA對象
對象的概念與分類：
•由ECMAScript定義的本地對象，獨立於宿主環境的ECMAScript實體提供的對象(native object)
•ECMAScript實現提供的、獨立於宿主環境的所有對象，在ECMAScript程序開始執行時出現。意味着開發者不必明確實例化內置對象，它已被實例化了。ECMA-262隻定義了兩個內置對象，即Global和Math(它們也是本地對象，根據定義，每個內置對象都是本地對象)。(built-in object)
•所有非本地對象都是宿主對象(host object)，即由ECMAScript實現的宿主環境提供的對象。所有BOM和DOM對象都是宿主對象。
object對象：ECMAScript的所有對象都由這個對象繼承而來；Object對象中的所有屬性和方法都會出現在其他對象中
1 ToString():返回對象 的原始字符串表示 2 ValueOf():返回最適合該對象的原始值。對於許多對象，該方法返回的值都與ToString()的返回值相同。
11種內置對象
Array、String、Date、Math、Boolean、Number、Function、Global、Error、RegExp、Object 註：在JavaScript中除了null和undefined以外其他的數據類型都被定義成了對象，也可以用創建對象的方法定義變量。String、Math、Array、Date、RegExp都是JavaScript中重要的內置對象，在JavaScript程序大多數功能都是通過對象實現的，
1 創建字符串對象： 2 var str1 = "hello world"; 3 alert(str1.length); 4 alert(str1.substr(1,5)); 5 註：調用字符串的對象屬性或方法時自動創建對象，用完就丟棄 6 7 8 手工創建字符串對象： 9 var str1 = new String("hello world"); 10 alert(str1.length); 11 alert(str1.substr(1,5)); 12 註：採用new創建字符串對象str1，全局有效 13 14 15 length：獲取字符串的長度(str1.length) 16 17 18 大小寫轉換： 19 var str1 = "abcDEF" 20 小寫:str1.toLowerCase() 21 大寫:str1.toUpperCase() 22 23 24 獲取指定字符: 25 格式: 26 x.charAt(index) 27 x.charCodeAt(index) 28 註： 29 x：代表字符串對象 30 index：代表字符串位置，從0開始編號 31 charAt：返回index位置的字符 32 charCodeAt：返回index位置的Unicode編碼 33 34 35 查詢字符串： 36 格式1： 37 x.indexof(findstr,index) 38 x.lastIndexOf(findstr) 39 40 var str1 = "welcom to the world of JS!"; 41 var str2 = str1.indexof("c"); # 結果為3，從0開始計數 42 var str3 = str1.lastIndexOf("c") # 結果為3，從後開始數，第一次出現c的位置 43 44 格式2： 45 x.match(regexp) 46 x.search(regexp) 47 註： 48 x：代表字符串對象 49 regexp：代表正則表達式或字符串 50 match：返回匹配字符串的數組，如果沒有匹配則返回null 51 search：返回匹配字符串的首字符位置索引 52 53 var str1 = "welcome to the world of JS!"; 54 var str2=str1.match("world"); 55 var str3=str1.search("world"); 56 alert(str2[0]) # 結果為"world" 57 alert(str3) # 結果為15 58 59 60 截取字符串： 61 格式1： 62 x.substr(start,length) 63 x.substring(start,end) 64 註： 65 x：代表字符串對象 66 start：表示開始位置 67 length：表示截取長度 68 end：結束位置加1，從0開始計數 69 var str1 = "abcdef" 70 str1.substr(2,2) # 結果：cd 71 str1.substring(2,2) # 結果：cd 72 73 格式2： 74 //x.slice(start, end) 75 var str1="abcdefgh"; 76 var str2=str1.slice(2,4); 77 var str3=str1.slice(4); 78 var str4=str1.slice(2,-1); 79 var str5=str1.slice(-3,-1); 80 alert(str2); 81 //結果為"cd" 82 alert(str3); 83 //結果為"efgh" 84 alert(str4); 85 //結果為"cdefg" 86 alert(str5); 87 //結果為"fg" 88 89 90 替換字符串： 91 var str1 = "abxy"; 92 str1.replace("xy","cd") # 結果:abcd 93 94 95 分割字符串： 96 var str1 = "一，二，三"; 97 str1.split(","); # 結果：一二三 98 99 100 連接字符串： 101 格式： 102 y=x.concat(addstr) 103 註： 104 x：代表字符串對象 105 addstr：添加字符串 106 107 var str1 = "abc" 108 str1.concat("def") # 結果abcdef
String對象
1 創建數組對象： 2 格式1： 3 var iArrNum = [1,2,3] 4 5 格式2： 6 new Array(); # 不指定數組元素個數 7 new Array(size); # 指定數組元素個數 8 9 10 二維數組： 11 var cnweek=new Array(7); 12 for (var i=0;i<=6;i++){ 13 cnweek[i]=new Array(2); 14 } 15 cnweek[0][0]="星期日"; 16 cnweek[0][1]="Sunday"; 17 cnweek[1][0]="星期一"; 18 cnweek[1][1]="Monday"; 19 ... 20 cnweek[6][0]="星期六"; 21 cnweek[6][1]="Saturday"; 22 23 24 length：獲取數組的個數 25 26 27 連接數組：join 28 格式： 29 x.join(bystr) 30 註： 31 x：代表數組對象 32 bystr：作為連接數組中元素的字符串 33 34 var iArrNum = [1,2,3] 35 iArrNum.join("-") # 結果：1-2-3 36 37 38 連接數組：concat 39 var a = [1,2,3]l 40 var a = new Array(1,2,3); 41 a.concat(4,5) # 結果：1，2，3，4，5 42 43 44 數組排序：reverse | sort 45 var iArrNum = [1,3,5,2,9]; 46 iArrNum.reverse(); # 反轉數組:9,2,5,3,1 47 iArrNum.sort(); # 從小到大排序:1,2,3,5,9 48 49 50 數組切片：slice 51 注: 52 x代表數組對象 53 start表示開始位置索引 54 end是結束位置下一數組元素索引編號 55 第一個數組元素索引為0 56 start、end可為負數，-1代表最後一個數組元素 57 end省略則相當於從start位置截取以後所有數組元素 58 59 var arr1=['a','b','c','d','e','f','g','h']; 60 var arr2=arr1.slice(2,4); 61 var arr3=arr1.slice(4); 62 var arr4=arr1.slice(2,-1); 63 64 alert(arr2.toString()); 65 //結果為"c,d" 66 alert(arr3.toString()); 67 //結果為"e,f,g,h" 68 alert(arr4.toString()); 69 //結果為"c,d,e,f,g" 70 71 72 刪除子數組： 73 格式 74 x. splice(start, deleteCount, value, ...) 75 註： 76 x代表數組對象 77 splice的主要用途是對數組指定位置進行刪除和插入 78 start表示開始位置索引 79 deleteCount刪除數組元素的個數 80 value表示在刪除位置插入的數組元素 81 value參數可以省略 82 83 84 var a = [1,2,3,4,5,6,7,8]; 85 a.splice(1,2); 86 //a變為 [1,4,5,6,7,8] 87 alert(a.toString()); 88 a.splice(1,1); 89 //a變為[1,5,6,7,8] 90 alert(a.toString()); 91 a.splice(1,0,2,3); 92 //a變為[1,2,3,5,6,7,8] 93 94 95 數組的進出棧操作一： 96 //push pop這兩個方法模擬的是一個棧操作 97 98 //x.push(value, ...) 壓棧 99 //x.pop() 彈棧 100 //使用註解 101 // 102 //x代表數組對象 103 //value可以為字符串、數字、數組等任何值 104 //push是將value值添加到數組x的結尾 105 //pop是將數組x的最後一個元素刪除 106 107 108 var arr1=[1,2,3]; 109 arr1.push(4,5); 110 alert(arr1); 111 //結果為"1,2,3,4,5" 112 arr1.push([6,7]); 113 alert(arr1) 114 //結果為"1,2,3,4,5,6,7" 115 arr1.pop(); 116 alert(arr1); 117 //結果為"1,2,3,4,5" 118 119 120 數組的進出棧操作二： 121 // unshift shift 122 //x.unshift(value,...) 123 //x.shift() 124 //使用註解 125 // 126 //x代表數組對象 127 //value可以為字符串、數字、數組等任何值 128 //unshift是將value值插入到數組x的開始 129 //shift是將數組x的第一個元素刪除 130 131 var arr1=[1,2,3]; 132 arr1.unshift(4,5); 133 alert(arr1); 134 //結果為"4,5,1,2,3" 135 arr1. unshift([6,7]); 136 alert(arr1); 137 //結果為"6,7,4,5,1,2,3" 138 arr1.shift(); 139 alert(arr1); 140 //結果為"4,5,1,2,3"
Array對象
1 // js中數組的特性 2 //java中數組的特性, 規定是什麼類型的數組,就只能裝什麼類型.只有一種類型. 3 //js中的數組特性1: js中的數組可以裝任意類型,沒有任何限制. 4 //js中的數組特性2: js中的數組,長度是隨着下標變化的.用到多長就有多長. 5 var arr5 = ['abc',123,1.14,true,null,undefined,new String('1213'),new Function('a','b','alert(a+b)')]; 6 /* alert(arr5.length);//8 7 arr5[10] = "hahaha"; 8 alert(arr5.length); //11 9 alert(arr5[9]);// undefined */
JS數組特性總結
1 創建Date對象： 2 //方法1：不指定參數 3 var nowd1=new Date(); 4 alert(nowd1.toLocaleString( )); 5 //方法2：參數為日期字符串 6 var nowd2=new Date("2004/3/20 11:12"); 7 alert(nowd2.toLocaleString( )); 8 var nowd3=new Date("04/03/20 11:12"); 9 alert(nowd3.toLocaleString( )); 10 //方法3：參數為毫秒數 11 var nowd3=new Date(5000); 12 alert(nowd3.toLocaleString( )); 13 alert(nowd3.toUTCString()); 14 15 //方法4：參數為年月日小時分鐘秒毫秒 16 var nowd4=new Date(2004,2,20,11,12,0,300); 17 alert(nowd4.toLocaleString( )); 18 //毫秒並不直接顯示 19 20 21 獲取日期和時間： 22 獲取日期和時間 23 getDate() 獲取日 24 getDay () 獲取星期 25 getMonth () 獲取月（0-11） 26 getFullYear () 獲取完整年份 27 getYear () 獲取年 28 getHours () 獲取小時 29 getMinutes () 獲取分鐘 30 getSeconds () 獲取秒 31 getMilliseconds () 獲取毫秒 32 getTime () 返回累計毫秒數(從1970/1/1午夜)
Date對象
1 //設置日期和時間 2 //setDate(day_of_month) 設置日 3 //setMonth (month) 設置月 4 //setFullYear (year) 設置年 5 //setHours (hour) 設置小時 6 //setMinutes (minute) 設置分鐘 7 //setSeconds (second) 設置秒 8 //setMillliseconds (ms) 設置毫秒(0-999) 9 //setTime (allms) 設置累計毫秒(從1970/1/1午夜) 10 11 var x=new Date(); 12 x.setFullYear (1997); //設置年1997 13 x.setMonth(7); //設置月7 14 x.setDate(1); //設置日1 15 x.setHours(5); //設置小時5 16 x.setMinutes(12); //設置分鐘12 17 x.setSeconds(54); //設置秒54 18 x.setMilliseconds(230); //設置毫秒230 19 document.write(x.toLocaleString( )+"<br>"); 20 //返回1997年8月1日5點12分54秒 21 22 x.setTime(870409430000); //設置累計毫秒數 23 document.write(x.toLocaleString( )+"<br>"); 24 //返回1997年8月1日12點23分50秒
設置日期和時間
1 日期和時間的轉換: 2 3 getTimezoneOffset():8個時區×15度×4分/度=480; 4 返回本地時間與GMT的時間差，以分鐘為單位 5 toUTCString() 6 返回國際標準時間字符串 7 toLocalString() 8 返回本地格式時間字符串 9 Date.parse(x) 10 返回累計毫秒數(從1970/1/1午夜到本地時間) 11 Date.UTC(x) 12 返回累計毫秒數(從1970/1/1午夜到國際時間)
日期和時間的轉換
1 function getCurrentDate(){ 2 //1. 創建Date對象 3 var date = new Date(); //沒有填入任何參數那麼就是當前時間 4 //2. 獲得當前年份 5 var year = date.getFullYear(); 6 //3. 獲得當前月份 js中月份是從0到11. 7 var month = date.getMonth()+1; 8 //4. 獲得當前日 9 var day = date.getDate(); 10 //5. 獲得當前小時 11 var hour = date.getHours(); 12 //6. 獲得當前分鐘 13 var min = date.getMinutes(); 14 //7. 獲得當前秒 15 var sec = date.getSeconds(); 16 //8. 獲得當前星期 17 var week = date.getDay(); //沒有getWeek 18 // 2014年06月18日 15:40:30 星期三 19 return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+min+":"+sec+" "+parseWeek(week); 20 } 21 22 alert(getCurrentDate()); 23 24 //解決 自動補齊成兩位數字的方法 25 function changeNum(num){ 26 if(num < 10){ 27 return "0"+num; 28 }else{ 29 return num; 30 } 31 32 } 33 //將數字 0~6 轉換成 星期日到星期六 34 function parseWeek(week){ 35 var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; 36 // 0 1 2 3 ............. 37 return arr[week]; 38 }
小練習
1 //RegExp對象 2 // 在表單驗證時使用該對象驗證用戶填入的字符串是否符合規則. 3 //創建正則對象方式1 參數1 正則表達式 參數2 驗證模式 g global / i 忽略大小寫. //參數2一般填寫g就可以，也有「gi」. 4 // 用戶名 首字母必須是英文, 除了第一位其他只能是英文數字和_ . 長度最短不能少於6位 最長不能超過12位 5 //----------------------------創建方式1 6 /* var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$","g"); 7 // 8 //驗證字符串 9 var str = "bc123"; 10 alert(reg1.test(str));// true 11 12 //----------------------------創建方式2 /填寫正則表達式/匹配模式; 13 var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g; 14 15 alert(reg2.test(str));// true 16 */ 17 //-------------------------------正則對象的方法------------------- 18 //test方法 ==> 測試一個字符串是否複合 正則規則. 返回值是true 和false. 19 20 //-------------------------String 中與正則結合的4個方法------------------. 21 // macth search split replace 22 var str = "hello world"; 23 24 //alert(str.match(/o/g)); //查找字符串中 複合正則的 內容. 25 //alert(str.search(/h/g));// 0 查找字符串中符合正則表達式的內容位置 26 //alert(str.split(/o/g)); // 按照正則表達式對字符串進行切割. 返回數組; 27 alert(str.replace(/o/g, "s")); // hells wsrld 對字符串按照正則進行替換.
RegExp對象
1 //Math對象 2 //該對象中的屬性方法 和數學有關. 3 //Math是內置對象 , 與Global的不同之處是, 在調用時 需要打出 "Math."前綴. 4 //屬性學習: 5 //alert(Math.PI); 6 //方法學習: 7 //alert(Math.random()); // 獲得隨機數 0~1 不包括1. 8 //alert(Math.round(1.5)); // 四捨五入 9 //練習：獲取1-100的隨機整數，包括1和100 10 //var num=Math.random(); 11 //num=num*10; 12 //num=Math.round(num); 13 // alert(num) 14 //============max min========================= 15 /* alert(Math.max(1,2));// 2 16 alert(Math.min(1,2));// 1 */ 17 //-------------pow-------------------------------- 18 alert(Math.pow(2,4));// pow 計算參數1 的參數2 次方. 19 20 21 22 23 abs(x) 返回數的絕對值。 24 exp(x) 返回 e 的指數。 25 floor(x)對數進行下舍入。 26 log(x) 返回數的自然對數（底為e）。 27 max(x,y) 返回 x 和 y 中的最高值。 28 min(x,y) 返回 x 和 y 中的最低值。 29 pow(x,y) 返回 x 的 y 次冪。 30 random() 返回 0 ~ 1 之間的隨機數。 31 round(x) 把數四捨五入為最接近的整數。 32 sin(x) 返回數的正弦。 33 sqrt(x) 返回數的平方根。 34 tan(x) 返回角的正切。
Math對象
Function對象
函數的定義：
1 function 函數名(參數) { 2 函數體 3 }
作用：
•可以使變量、常量、表達式作為函數調用的參數
•函數由關鍵字function定義
•函數名的定義規則與標識符一致
•返回值必須使用return
1 第一種寫法： 2 function 函數名 (參數){ 3
函數體; 4 return 返回值; 5 } 6 7 第二種寫法： 8 var 函數名 = new Function("參數1","參數n","function_body");
基本語法
註：JS的函數加載執行與Python不同，它是整體加載完才會執行，所以函數聲明上面或下面都可以。
Function對象的length屬性：函數屬於引用類型；獲取函數期望的參數個數(alert(func1.length))
運算符void()的作用：攔截方法的返回值(alert(void(func1(1,2))))
1 function func1(a,b){ 2 3 alert(a+b); 4 } 5 6 func1(1,2); //3 7 func1(1,2,3);//3 8 func1(1); //NaN 9 func1(); //NaN 10 11 //只要函數名寫對即可,參數怎麼填都不報錯.
函數的調用
1 function add(a,b){ 2 3 console.log(a+b);//3 4 console.log(arguments.length);//2 5 console.log(arguments);//[1,2] 6 7 } 8 add(1,2) 9 10 ------------------arguments的用處1 ------------------ 11 function nxAdd(){ 12 var result=0; 13 for (var num in arguments){ 14 result+=arguments[num] 15 } 16 alert(result) 17 18 } 19 20 nxAdd(1,2,3,4,5) 21 22 // ------------------arguments的用處2 ------------------ 23 24 function f(a,b,c){ 25 if (arguments.length!=3){ 26 throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments") 27 } 28 else { 29 alert("success!") 30 } 31 } 32 33 f(1,2,3,4,5)
函數的內置對象arguments
1 // 匿名函數 2 var func = function(arg){ 3 return "tony"; 4 } 5 6 // 匿名函數的應用 7 (function(){ 8 alert("tony"); 9 } )() 10 11 (function(arg){ 12 console.log(arg); 13 })('123')
匿名函數
匿名函數練習：
1 <script type="text/javascript"> 2 // 在JS中聲明匿名函數 3 // 一、把一個匿名函數賦值給了一個變量f1，此時的f1是變量名，不是函數名 4 // 因為下面這句代碼是賦值語句，所以需要在最後加一個「分號」 5 // 定義函數的時候是不需要加「分號」的。 6 //var f1 = function () { 7 // alert('這就是匿名函數'); 8 //}; 9 //f1(); 10 //f1 = 100; 11 //alert(f1); 12 //f1 = function (x, y) { 13 // return x + y;; 14 //}; 15 //alert(f1(1, 2)); 16 17 18 //function func(fn) { 19 // alert('這是一個f1函數'); 20 // fn(); 21 //} 22 ////func(fun2); 23 //func(function () { alert('直接調用'); }); 24 25 //function fun2() { 26 // alert('2'); 27 //} 28 29 // 二、匿名函數的第二種用法：定義匿名函數的同時直接調用該函數 30 //(function (x, y) { alert(x + y); })(10, 20); 31 32 33 // 三、第三種匿名函數的寫法 34 // 通過new Function()的方法定義匿名函數，可以將函數代碼用字符串來表示 35 //，同時在函數中使用的變量，不會作為頁面的"全局變量"出現，在函數外部也訪問不到 36 //。不像eval()一樣 37 //var f1 = new Function('x', 'y', 'alert(x+y);'); // 注意 首字母大寫 38 //f1(20, 20); 39 40 //此處的匿名函數是一條賦值語句，所以會從上到下依次執行，不會進行「函數預解析」 41 var x = 1, y = 0, z = 0; 42 var add = function (n) { n = n + 1; return n; }; 43 y = add(x); 44 add = function (n) { n = n + 3; return n; }; 45 z = add(x); 46 alert(y + '...' + z); // 2...4 47 </script>
BOM對象
BOM(瀏覽器對象模型)，可以對瀏覽器窗口進行訪問和操作。使用BOM，開發者可以移動窗體、改變狀態欄中的文本以及執行其他與頁面內容不直接相關的動作。
Window對象
1 Window對象 2 所有瀏覽器都支持window對象 3 概念上講：一個html文檔對應一個window對象 4 功能上講：控制瀏覽器窗口 5 使用上講：window對象不需要創建對象，直接使用即可。
Window對象方法
1 alert()：顯示帶有一段消息和一個確認按鈕的警告框 2 3 confirm()：顯示帶有一段消息以及確認按鈕和取消的對話框 4 5 prompt()：顯示可提示用戶輸入的對話框 6 7 open()：打開一個新的瀏覽器窗體或查找一個已命名的窗體 8 9 close()：關閉瀏覽器窗口 10 11 setInterval()：按照指定的周期(毫秒)來調用函數或計算表達式 12 13 clearInterval()：取消由setInterval()設置的timeout 14 15 setTimeout()：在指定的毫秒數後調用函數或計算表達式 16 17 clearTimeout()：取消由setTimeout()方法設置的tiemout 18 19 scrollTo()：把內容滾動到指定的坐標
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #id1{ 8 width: 200px; 9 height: 50px; 10 } 11 </style> 12 </head> 13 <body> 14 <input type="text" id="id1"> 15 <button class="btn" onclick="BeginOrEnd()">開始</button> 16 </body> 17 <script> 18 function showTime() { 19 var current_time = new Date().toLocaleString(); 20 var ele = document.getElementById("id1"); 21 ele.value = current_time; 22 } 23 var clock1; 24 function begin() { 25 if (clock1 == undefined) 26 { 27 showTime(); 28 clock1 = setInterval(showTime,1000); // 每過1秒調用 showTime函數 29 } 30 } 31 function end(){ 32 clearInterval(clock1); 33 clock1 = undefined; 34 } 35 function BeginOrEnd() { 36 var eleb = document.getElementsByClassName("btn")[0]; 37 console.log(eleb) 38 if (eleb.innerHTML == "開始"){ 39 begin(); 40 eleb.innerHTML = "結束"; 41 } 42 else if(eleb.innerHTML == "結束") 43 { 44 end(); 45 eleb.innerHTML = "開始"; 46 } 47 } 48 </script> 49 </html>
小練習
History對象
History屬性:
•History對象包含用戶(在瀏覽器窗口中)訪問過的URL。
•History對象是Window對象的一部分，可通過Window.history屬性對其訪問
1 length：返回瀏覽器歷史列表中的URL數量 2 3 back()：加載history列表中的前一個URL 4 5 forward()：加載history列表中的下一個URL 6 7 go()：加載history列表中的某個具體頁面
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title1</title> 6 </head> 7 <body> 8 <a href="JS_history2.html">click</a> 9 <button onclick="history.forward()">forward</button> 10 <button onclick="history.go(1)">go1</button> 11 </body> 12 </html>
JS_history1.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title2</title> 6 </head> 7 <body> 8 <button onclick="history.back()">back</button> 9 <button onclick="history.go(-1)">go-1</button> 10 </body> 11 </html>
JS_history2.html
Location對象
Location對象包含有關當前URL的信息
Location對象是Window對象的一個部分，可通過Window.location屬性來訪問
1 location.assign(URL) 2 3 location.reload() 4 5 location.replace(newURL)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <button onclick="FunLoad()">reload</button> 9 <button onclick="FunReplace()">replace</button> 10 </body> 11 <script> 12 // location.assign("https://www.baidu.com/") 13 function FunLoad() 14 { 15 location.reload() 16 } 17 function FunReplace() 18 { 19 location.replace("https://www.baidu.com/") 20 } 21 </script> 22 </html>
location用法
DOM對象
什麼是DOM?
DOM是W3C(萬維網聯盟)的標準。DOM定義了訪問HTML和XML文檔的標準。
W3C文檔對象模型(DOM)是中立於平台和預言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。
W3C DOM標準被分為3個不同的部分：
• 核心 DOM – 針對任何結構化文檔的標準模型
• XML DOM – 針對XML文檔的標準模型(定義了所有XML元素的對象和屬性，以及訪問它們的方法)
• HTML DOM – 針對HTML文檔的標準模型(定義了所有HTML元素的對象和屬性，以及訪問它們的方法)
DOM節點
1 HTML文檔中的所有內容都有節點(NODE): 2 - 整個文檔是一個文檔節點(document對象) 3 - 每個HTML元素是元素節點(element對象) 4 - HTML元素內的文本是文本節點(text對象) 5 - 每個HTML屬性是屬性節點(attribute對象) 6 - 注釋是注釋節點(comment對象) 7 8 9 節點(自身)屬性： 10 - attributes：節點(元素)的屬性節點 11 - nodeType：節點類型 12 - nodeValue：節點值 13 - nodeName：節點名稱 14 - innerHTML：節點(元素)的文本值 15 16 17 導航屬性： 18 - parentNode：節點(元素)的父節點(推薦) 19 - firstChild：節點下第一個子元素 20 - lastChild：節點下最後一個子元素 21 - childNodes：節點(元素)的子節點
1 parentElement // 父節點標籤元素 2 3 children // 所有子標籤 4 5 firstElementChild // 第一個子標籤元素 6 7 lastElementChild // 最後一個子標籤元素 8 9 nextElementtSibling // 下一個兄弟標籤元素 10 11 previousElementSibling // 上一個兄弟標籤元素
導航屬性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div class="div1"> 9 <p class="p1">hello p</p> 10 <div class="div2">hello div</div> 11 </div> 12 </body> 13 <script> 14 var elep =document.getElementsByClassName("p1")[0] 15 console.log(elep) // <p class="p1">hello p</p> 16 console.log(elep.nodeName) // p 17 console.log(elep.nodeType) // 1 18 console.log(elep.nodeValue) // null 19 console.log(elep.innerHTML) //hello p 20 </script> 21 </html>
節點屬性
1 parentElement //父系節點標籤元素 2 3 children // 所有子標籤 4 5 firstElementChild //第一個子標籤元素 6 7 lastElementChild //最後一個子標籤元素 8 9 nextElementtSibling //下一個兄弟標籤元素 10 11 previousElementSibling //上一個兄弟標籤元素
推薦導航屬性
節點關係圖：
1 訪問HTML元素(節點)，訪問HTML元素等同於訪問節點，我們能夠以不同的方式來訪問HTML元素： 2 頁面查找： 3 - 通過使用 getElementById() 方法 4 - 通過使用 getElementsByTagName() 方法 5 - 通過使用 getElementsByClassName() 方法 6 - 通過使用 getElementsByName() 方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div class="div1"> 9 <p name="littleP" class="p1">hello p</p> 10 <div class="div2">hello div 11 <div>div</div> 12 <a href="">click</a> 13 </div> 14 </div> 15 </body> 16 <script> 17 var ele=document.getElementsByName("littleP")[0]; 18 console.log(ele) 19 console.log('------------') 20 var ele2 = ele.nextElementSibling; 21 console.log(ele2.innerHTML); 22 console.log('-----------') 23 console.log(ele2.innerText) 24 25 // var ele =document.getElementsByClassName("p1")[0]; 26 // var p_ele = ele.parentNode; 27 // console.log(p_ele) 28 // console.log(p_ele.nodeName); 29 // console.log('-------------'); 30 // var p_ele2 =ele.nextSibling; 31 // console.log(p_ele2.nodeName); 32 // console.log('-------------'); 33 // var p_ele3 = ele.nextElementSibling; 34 // console.log(p_ele3.nodeName); 35 // console.log(p_ele3.innerHTML); 36 // console.log('-------------'); 37 // console.log(p_ele.nodeType) 38 // console.log(p_ele.nodeValue) 39 // console.log(p_ele.node) 40 41 42 // var ele =document.getElementsByClassName("div1")[0]; 43 // console.log(ele.children[1].children) 44 </script> 45 </html>
View Code
HTML DOM Event(事件)
HTML 4.0 的新特徵之一是有能力使HTML事件觸發瀏覽器中的動作(action)，比如當用戶點擊某個HTML元素時啟動一段JavaScript。
1 onclick：當用戶點擊某個對象時調用的事件句柄 2 3 ondblclick：當用戶雙擊某個對象時調用的事件句柄 4 5 onfocus：元素獲得焦點(輸入框) 6 7 onblur：元素失去焦點(用於表單驗證，用戶離開某個輸入框時，代表已經輸入完了，可以對它進行驗證) 8 9 onchange：域的內容被改變(用戶表單元素，當元素內容被改變時觸發) 10 11 onkeydown：某個鍵盤按鍵被按下(當用戶在最後一個輸入框按下回車按鍵時，表單提交) 12 13 onkeypress：某個鍵盤按鍵被按下並鬆開 14 15 onkeyup：某個鍵盤按鍵被鬆開 16 17 onmousedown：鼠標按鈕被按下 18 19 onmousemove：鼠標被移動 20 21 onmouseout：鼠標從某元素移開 22 23 onmouseover：鼠標移到某元素之上 24 25 onmouseleave：鼠標從元素離開 26 27 onselect：文本被選中 28 29 onsubmit：確認按鈕被點擊
1 第一種： 2 <script> 3 window.onload = function () { 4 var ele = document.getElementsByClassName("div1")[0]; 5 console.log(ele.innerHTML) 6 } 7 8 </script> 9 10 第二種： 11 <input type="text" onclick="foo()">
兩種事件綁定方式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div class="v1"> 9 <div class="v2">ddd</div> 10 <div class="v2">ddd</div> 11 <div class="v2">ddd</div> 12 <p id="p1">pppp</p> 13 </div> 14 </body> 15 <script> 16 var ele = document.getElementsByClassName("v2"); 17 for (i=0;i<ele.length;i++) 18 { 19 ele[i].onclick=function () { 20 alert("~~~~") 21 } 22 } 23 </script> 24 </html>
推薦這種綁定
Event對象：
Event對象代表事件的狀態，比如事件在其中發生的元素，鍵盤按鍵的狀態，鼠標的位置，鼠標按鈕的狀態。事件通常與函數結合使用，函數不會再事件發生前被執行！Event對象在事件發生時系統已經創建好了，並且會在事件函數被調用時傳給事件函數，我們僅僅需要接受一下即可。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .outer{ 8 width: 300px; 9 height: 300px; 10 background-color: yellow; 11 } 12 .inner{ 13 width: 100px; 14 height: 100px; 15 background-color: blue; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="outer"> 21 <div class="inner"> 22 23 </div> 24 </div> 25 </body> 26 <script> 27 document.getElementsByClassName("outer")[0].onclick=function () { 28 alert('I am outer'); 29 } 30 document.getElementsByClassName("inner")[0].onclick=function (event) { 31 alert('I am inner'); 32 event.stopPropagation(); //阻止事件傳播 33 } 34 </script> 35 </html>
事件傳播
node的增刪改查
1 增： 2 createElement(name) 創建元素 3 appendChild() 將元素添加 4 5 6 刪： 7 1.獲取待刪除的元素 8 2.獲取它的父元素 9 3.使用removeChild()方法刪除 10 11 改： 12 第一種：用上面的增和刪結果完成修改 13 第二種： 14 a.使用setAttribute()；修改屬性 15 b.使用innerHTML屬性修改元素的內容 16 17 查： 18 a.通過使用 getElementById() 方法 19 b.通過使用 getElementsByTagName() 方法 20 c.通過使用 getElementsByClassName() 方法 21 d.通過使用 getElementsByName() 方法
增、刪、改、查
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .div1,.div2,.div3,.div4{ 8 width: 300px; 9 height: 100px; 10 } 11 .div1{ 12 background-color: #d3ffae; 13 } 14 .div2{ 15 background-color: #84a42b; 16 } 17 .div3{ 18 background-color: #99aecb; 19 } 20 .div4{ 21 background-color: #b4b4b4; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="div1"> 27 <button onclick="add()">增加</button> 28 hello div1 29 </div> 30 <div class="div2"> 31 <button onclick="del()">刪除</button> 32 hello div2 33 </div> 34 <div class="div3"> 35 <button onclick="change()">替換</button> 36 <p>hello div3</p> 37 </div> 38 <div class="div4">hello div4</div> 39 </body> 40 <script> 41 function change() { 42 var img = document.createElement('img'); 43 img.src='bj.jpg'; 44 var ele_p = document.getElementsByTagName('p')[0]; 45 var ele_p_root = document.getElementsByClassName('div3')[0] 46 ele_p_root.replaceChild(img,ele_p); 47 } 48 function add() { 49 var ele_p = document.createElement('p') 50 ele_p.innerText='hello p' 51 var ele_p_root = document.getElementsByClassName('div1')[0] 52 ele_p_root.appendChild(ele_p) 53 } 54 function del() 55 { 56 var ele_p_root = document.getElementsByClassName('div1')[0] 57 var son =ele_p_root.getElementsByTagName("p")[0] 58 ele_p_root.removeChild(son) 59 } 60 </script> 61 </html>
練習
修改HTML DOM
1 改變HTML內容：innerHTML、innerText 2 3 改變CSS樣式： 4 <p id='p1'>hello world!</p>; 5 document.getElementById('p1').style.color='blue'; 6 7 改變HTML屬性： 8 elementNode.setAttribute(name,value) 9 elementNode.getAttribute(name) 10 11 創建新的HTML元素： 12 createElement(name) 13 14 刪除已有的HTML元素： 15 elementNode.removeChild(node) 16 17 關於class的操作： 18 elementNode.className 19 elementNode.classList.add 20 elementNode.classList.remove
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div class="div1 div2"> 9 div1 10 </div> 11 </body> 12 <script> 13 var ele = document.getElementsByTagName('div')[0]; 14 console.log(ele.className); 15 console.log(ele.classList[0]); 16 console.log(ele.classList[1]); 17 ele.classList.add('hide'); 18 console.log(ele.className); 19 </script> 20 </html>
class小練習
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .content { 8 height: 1800px; 9 background-color: rebeccapurple; 10 } 11 12 .shade { 13 position: fixed; 14 top: 0px; 15 left: 0px; 16 right: 0px; 17 bottom: 0px; 18 background-color: gray; 19 opacity: 0.6; 20 } 21 22 .model { 23 width: 200px; 24 height: 200px; 25 background-color: bisque; 26 margin: 0 auto; 27 position: absolute; 28 top: 50%; 29 left: 50%; 30 margin-top: -100px; 31 margin-left: -50px; 32 } 33 .hide{ 34 display: none; 35 } 36 </style> 37 </head> 38 <body> 39 <div class="content"> 40 <button onclick="show()">顯示</button> 41 </div> 42 <div class="shade hide"> 43 44 </div> 45 <div class="model hide"> 46 <button onclick="cancel()">cancel</button> 47 </div> 48 </body> 49 <script> 50 var ele_shade = document.getElementsByClassName('shade')[0]; 51 var ele_model = document.getElementsByClassName('model')[0]; 52 function show() { 53 ele_shade.classList.remove('hide'); 54 ele_model.classList.remove('hide'); 55 } 56 function cancel() { 57 ele_shade.classList.add('hide'); 58 ele_model.classList.add('hide'); 59 } 60 </script> 61 </html>
模態窗體對話框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <button onclick="selectAll()">全選</button> 9 <button onclick="notSelectAll()">反選</button> 10 <button onclick="cancel()">取消</button> 11 <table border="1px"> 12 <tr> 13 <td><input type="checkbox"></td> 14 <td>1111</td> 15 <td>1111</td> 16 </tr> 17 <tr> 18 <td><input type="checkbox"></td> 19 <td>22</td> 20 <td>22</td> 21 </tr> 22 <tr> 23 <td><input type="checkbox"></td> 24 <td>333</td> 25 <td>333</td> 26 </tr> 27 </table> 28 </body> 29 <script> 30 function selectAll() { 31 var inps = document.getElementsByTagName('input'); 32 for (var i=0;i<inps.length;i++) 33 { 34 ipt = inps[i]; 35 ipt.checked=true; 36 } 37 } 38 function notSelectAll() { 39 var inps = document.getElementsByTagName('input'); 40 for (var i=0;i<inps.length;i++) 41 { 42 ipt = inps[i]; 43 // 第一種寫法 44 ipt.checked=!ipt.checked; 45 // 第二種寫法 46 // if (ipt.checked==true) 47 // { 48 // ipt.checked=false; 49 // } 50 // else { 51 // ipt.checked = true; 52 // } 53 } 54 } 55 function cancel() { 56 var inps = document.getElementsByTagName('input'); 57 for (var i=0;i<inps.length;i++) 58 { 59 ipt = inps[i]; 60 ipt.checked=false; 61 } 62 } 63 </script> 64 </html>
表格checkbox正反選
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <select id="provinces"> 9 <option value="">請選擇省份</option> 10 </select> 11 <select id="citys"> 12 <option value="">請選擇城市</option> 13 </select> 14 </body> 15 <script> 16 // 取值 17 // a = {name:'alex1'} 18 // b = {'name':'alex2'} 19 // console.log(a.name) 20 // console.log(a.name) 21 // console.log(b['name']) 22 23 // 取鍵 24 // for (var i in data) 25 // { 26 // console.log(i) 27 // } 28 data = {'河北省':['石家莊','廊坊'],'山西':['晉城','大同'],'陝西':['西安','延安']} 29 // console.log(typeof data) 30 // console.log(data) 31 var pro_ele = document.getElementById('provinces') 32 var city_ele = document.getElementById('citys') 33 for (var i in data) 34 { 35 var ele = document.createElement('option') 36 ele.innerHTML=i 37 pro_ele.appendChild(ele) 38 } 39 pro_ele.onchange=function () { 40 // console.log(this.selectedIndex); 41 // console.log(this.options); 42 // console.log(this.options[this.selectedIndex]); 43 44 // 清空options集合方法一 45 city_ele.options.length=1; 46 47 //清空options集合方法二 48 // for (var j=0;j<city_ele.length;j++) 49 // { 50 // city_ele.remove(j) 51 // } 52 var city = data[this.options[this.selectedIndex].innerHTML]; 53 for (var i=0;i<city.length;i++) 54 { 55 var ele = document.createElement('option'); 56 ele.innerHTML=city[i]; 57 city_ele.appendChild(ele); 58 } 59 } 60 </script> 61 </html>
JS二級聯動
JS練習源碼雲盤地址 ：
鏈接：https://pan.baidu.com/s/1_Lh3vkLJwC0Ywh2-O52TUA 提取碼：am6y
六 、 前端之JQuery
JQuery是什麼？
JQuery由美國人John Resig創建，至今已吸引了來自世界各地的眾多JavaScript高手加入其team。JQuery是繼prototype之後又一個優秀的JavaScript框架。其宗旨是–WRITE LESS,DO MORE!它是輕量級的JS庫，這是其他的JS庫所不及的，兼容CSS3，還兼容各種瀏覽器。JQuery是一個快速的，簡潔的JavaScript庫，使用戶能更方便地處理HTMLdocuments、events、實現動畫效果，並且方便地為網站提供AJAX交互。JQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說的很詳細，同時還有許多成熟插件可供選擇。
什麼事JQuery對象？
JQuery對象通過JQuery包裝DOM對象後產生的對象。如果一個對象是JQuery對象，那麼它就可以使用JQuery里的方法：$("#test").html();
JQuery的基本語法：$(selector).action()
1 第一種方式： 2 官網地址：http://jquery.com/download/ 3 註： 4 1、Production version -用於實際的網站中，已被精簡和壓縮 5 2、Development version -用於測試和開發(未壓縮，可讀的代碼) 6 7 8 其他方式（通過CDN引用它）： 9 Staticfile：https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js 10 百度：https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js 11 又拍云：https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js 12 新浪：https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js 13 Google：https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
JQuery安裝
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div>hello</div> 9 </body> 10 引入方式一： 11 <!--<script src="jquery-3.3.1.min.js"></script>--> 12 引入方式二： 13 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 14 <script> 15 $("div").css("color","red"); 16 </script> 17 </html>
JQuery引入方式
1 var $variable -----> JQuery對象（建議定義JQuery變量時，前面加"$"） 2 var variable------->DOM對象 3 4 $variable[0]:JQuery對象轉為DOM對象 5 6 例子： 7 $("#msg").html; <=====> $("#msg")[0].innerHTML
JQuery對象轉DOM對象
注:JQuery對象方法不能與DOM對象方法混用，必須轉換後，才可用
尋找元素
選擇器：
1 基本選擇器： 2 $("*") $("#id") $(".class") $("element") $(".class,p,div") 3 4 5 層級選擇器： 6 $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div") 7 8 9 屬性選擇器: 10 $('[id="div1"]') $('["alex"="sb"][id]') 11 12 13 表單選擇器： 14 $("[type='txt']") ------>$(":txt") 15 註：只適用於input標籤：$("input:checked")
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div>hello div</div> 9 <p id="p1">hello p</p> 10 <a href="#">點我</a> 11 <span><br>我是span</span> 12 <p>p上</p> 13 <div class="outer">outer1 14 <div class="inner"> 15 inner 16 <p>inner p</p> 17 </div> 18 <p alex="sb">alex</p> 19 <p alex="bb">alexbb</p> 20 </div> 21 <p>p下</p> 22 <div class="outer">outer2</div> 23 <p>pp下</p> 24 <ul> 25 <li>111</li> 26 <li>222</li> 27 <li>333</li> 28 <li>444</li> 29 <li>555</li> 30 <li>666</li> 31 </ul> 32 <input type="text"> 33 <input type="checkbox"> 34 <input type="submit"> 35 </body> 36 <script src="jquery-3.3.1.min.js"></script> 37 <script> 38 // 基本選擇器 39 // $("*").css("color","red"); 40 // $("#p1").css("color","red"); 41 // $(".outer").css("color","red"); 42 // $(".outer,p,div").css("color","red"); 43 44 //層級選擇器 45 // $(".outer p").css("color","red"); 46 // $(".outer>p").css("color","red"); 47 // $(".outer+p").css("color","red"); 48 // $(".outer~p").css("color","red"); 49 50 //基本篩選器 51 // $("li:first").css("color","red"); 52 // $("li:last").css("color","red"); 53 // $("li:eq(3)").css("color","red"); // 從0開始 54 // $("li:even").css("color","red"); //奇數 55 // $("li:odd").css("color","red"); // 偶數 56 // $("li:gt(1)").css("color","red"); //大於 57 // $("li:lt(3)").css("color","red"); //小於 58 59 //屬性選擇器 60 // $("[alex]").css("color","red"); 61 // $("[alex='sb']").css("color","red"); 62 63 //表單選擇器 64 // $("[type='text']").css("width","300px") 65 // $(":text").css("width","500px") // 簡寫，只允許表單 66 </script> 67 </html>
選擇器練習
篩選器：
1 基本篩選器： 2 $("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)") 3 4 5 過濾篩選器： 6 $("li").eq(2) $("li").first $("ul li").hasclass("test") 7 8 9 查詢篩選器： 10 $("div").children(".test") $("div").find(".test") $(".test").next() $(".test").nextAll() $(".test").nextUntil() $("div").prev() $("div").preAll() $("div").preUntil() $(".test").parent() $(".test").parents() $(".test").parentUntil() $("div").siblings()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div>hello div</div> 9 <p id="p1">hello p</p> 10 <a href="#">點我</a> 11 <span><br>我是span</span> 12 <p>p上</p> 13 <div class="outer">outer1 14 <div class="inner"> 15 inner 16 <p>inner p</p> 17 </div> 18 <p alex="sb">alex</p> 19 <p alex="bb">alexbb</p> 20 </div> 21 <p>p下</p> 22 <div class="outer2">outer2</div> 23 <p>pp下</p> 24 <ul> 25 <li class="begin">111</li> 26 <li>222</li> 27 <li>333</li> 28 <li>444</li> 29 <li id="end">555</li> 30 <li>666</li> 31 </ul> 32 <input type="text"> 33 <input type="checkbox"> 34 <input type="submit"> 35 </body> 36 <script src="jquery-3.3.1.min.js"></script> 37 <script> 38 //篩選器 39 // $("li").eq(2).css("color","red"); 40 // $("li").first().css("color","red"); 41 // $("li").last().css("color","red"); 42 43 //查詢篩選器 44 // $(".outer").children("p").css("color","red"); 45 // $(".outer").find("p").css("color","red"); 46 47 // $("li").eq(2).next().css("color","red"); 48 // $("li").eq(2).nextAll().css("color","red"); 49 // $("li").eq(1).nextUntil("#end").css("color","red"); 50 51 // $("li").eq(2).prev().css("color","red"); 52 // $("li").eq(2).prevAll().css("color","red"); 53 // $("li").eq(4).prevUntil(".begin").css("color","red"); 54 55 // $(".outer .inner p").parent().css("color","red"); 56 // $(".outer .inner p").parents().css("color","red"); 57 // $(".outer .inner p").parentsUntil("body").css("color","red"); 58 59 // $(".outer").siblings().css("color","red"); 60 </script> 61 </html>
篩選器練習
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .outer{ 8 width: 100%; 9 height: 1000px; 10 } 11 .menu{ 12 float: left; 13 background-color: beige; 14 width: 30%; 15 height: 500px; 16 } 17 .content{ 18 float: right; 19 background-color: rebeccapurple; 20 width: 70%; 21 height: 500px; 22 } 23 .title{ 24 background-color: aquamarine; 25 text-align: center; 26 } 27 .hide{ 28 display: none; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="outer"> 34 <div class="menu"> 35 <div class="item"> 36 <div class="title" onclick="show(this)">菜單一</div> 37 <div class="con"> 38 <div>111</div> 39 <div>222</div> 40 <div>333</div> 41 </div> 42 </div> 43 44 <div class="item"> 45 <div class="title" onclick="show(this)">菜單二</div> 46 <div class="con hide"> 47 <div>444</div> 48 <div>555</div> 49 <div>666</div> 50 </div> 51 </div> 52 53 <div class="item"> 54 <div class="title" onclick="show(this)">菜單三</div> 55 <div class="con hide"> 56 <div>777</div> 57 <div>888</div> 58 <div>999</div> 59 </div> 60 </div> 61 </div> 62 <div class="content"> 63 64 </div> 65 </div> 66 </body> 67 <script src="jquery-3.3.1.min.js"></script> 68 <script> 69 function show(self) { 70 $(self).next().removeClass("hide") 71 $(self).parent().siblings().children(".con").addClass("hide"); 72 } 73 </script> 74 </html>
左側菜單欄-小練習
操作元素(屬性、CSS、文檔處理)
屬性操作：
1 屬性： 2 $("").attr(); 3 $("").removeAttr; 4 $("").prop(); 5 $("").removeProp(); 6 7 8 CSS類： 9 $("").addClass(class|fn); 10 $("").removeClass([class|fn]); 11 12 13 HTML代碼、文本、值： 14 $("").css("color","red"); 15 $("").html(val|fn) 16 $("").text(val|fn) 17 $("").val(val|fn|arr)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div class="div1" flag = "d1"> 9 <input type="checkbox" checked="checked">是否可見 10 <input type="checkbox" onclick="clickState()">是否可見 11 </div> 12 <input type="text" value="123"> 13 <div value="456"></div> 14 <div id="id1"> 15 iiiiii 16 <p>pppppp</p> 17 </div> 18 </body> 19 <script src="jquery-3.3.1.min.js"></script> 20 <script> 21 // attr 22 // console.log($("div").attr("flag")) // 結果:d1 23 // console.log($("div").attr("flag","d2")) //修改值 24 // console.log($("div").attr("flag")) //結果：d2 25 // 26 // console.log($(":checkbox:first").attr("checked")) 27 // console.log($(":checkbox:last").attr("checked")) 28 29 // console.log($(":checkbox").first().attr("checked")) 30 // console.log($(":checkbox").last().attr("checked")) 31 32 // prop 33 // console.log($(":checkbox").first().prop("checked")) 34 // console.log($(":checkbox").last().prop("checked")) 35 // function clickState() 36 // { 37 // console.log($(":checkbox").last().prop("checked")) 38 // } 39 // console.log($("div").prop("flag")) // 找不到，自定義屬性，只能找系統內置的屬性名 40 // console.log($("div").prop("class")) 41 42 //html|text|val 43 // console.log($("#id1").html()) // <p>pppppp</p> 44 // console.log($("#id1").html("<h1>alex</h1>")) 45 // console.log($("#id1").text()) // pppppp 46 // console.log($("#id1").text("<h1>alex</h1>")) 47 console.log($(":text").val()) // 固有屬性 48 console.log($(":text").next()) 49 $(":text").val(789) 50 51 //CSS 52 // $("div").css("color","red"); 53 // $("div").css({"color":"red","background-color":"green"}); 54 </script> 55 </html>
小練習
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <p>pppp</p> 9 <p>oooo</p> 10 <p>iiii</p> 11 </body> 12 <script src="jquery-3.3.1.min.js"></script> 13 <script> 14 arr = [11,22,33] 15 // JS與JQuery混搭使用for循環 16 // for(var i=0;i<arr.length;i++) 17 // { 18 // $("p").eq(i).html(arr[i]) 19 // } 20 21 // JQuery遍歷方式一 22 // $.each(arr,function (x,y) { 23 // console.log(x) //下標 24 // console.log(y) //值 25 // console.log('---------') 26 // }) 27 28 //JQuery遍歷方式二 29 $("p").each(function () { 30 console.log($(this).html()) 31 console.log($(this).text()) 32 console.log($(this).val()) 33 }) 34 </script> 35 </html>
JQuery下的遍歷
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <button onclick="selectAll()">全選</button> 9 <button onclick="reverse()">反選</button> 10 <button onclick="cancel()">取消</button> 11 <table border="1px"> 12 <tr> 13 <td><input type="checkbox"></td> 14 <td><p>111</p></td> 15 </tr> 16 <tr> 17 <td><input type="checkbox"></td> 18 <td><p>222</p></td> 19 </tr> 20 <tr> 21 <td><input type="checkbox"></td> 22 <td><p>333</p></td> 23 </tr> 24 </table> 25 </body> 26 <script src="jquery-3.3.1.min.js"></script> 27 <script> 28 function selectAll() { 29 // 方式一 30 $(":checkbox").each(function () { 31 $(this).prop("checked",true) 32 }) 33 // 方式二 34 // $("input").each(function () { 35 // // $("input").attr("checked","checked") 36 // $("input").prop("checked",true) 37 // }) 38 } 39 function reverse() { 40 $(":checkbox").each(function () { 41 $(this).prop("checked",!$(this).prop("checked")) 42 }) 43 } 44 function cancel() { 45 // 方式一 46 $(":checked").each(function () { 47 $(this).prop("checked",false) 48 }) 49 // 方式二 50 // $("input").each(function () { 51 // $("input").prop("checked",false) 52 // }) 53 } 54 </script> 55 </html>
JQuery正反選
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .content { 8 height: 1800px; 9 background-color: rebeccapurple; 10 } 11 12 .shade { 13 position: fixed; 14 top: 0px; 15 left: 0px; 16 right: 0px; 17 bottom: 0px; 18 background-color: gray; 19 opacity: 0.6; 20 } 21 22 .model { 23 width: 200px; 24 height: 200px; 25 background-color: bisque; 26 margin: 0 auto; 27 position: absolute; 28 top: 50%; 29 left: 50%; 30 margin-top: -100px; 31 margin-left: -50px; 32 } 33 .hide{ 34 display: none; 35 } 36 </style> 37 </head> 38 <body> 39 <div class="content"> 40 <button onclick="show()">顯示</button> 41 </div> 42 <div class="shade hide"> 43 44 </div> 45 <div class="model hide"> 46 <button onclick="cancel()">cancel</button> 47 </div> 48 </body> 49 <script src="jquery-3.3.1.min.js"></script> 50 <script> 51 function show() { 52 $("button").parent().siblings().removeClass("hide") 53 } 54 function cancel() { 55 $(".shade,.model").addClass("hide") 56 } 57 </script> 58 </html>
JQuery模態對話框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div class="div1"> 9 <p>pppp</p> 10 </div> 11 <button>添加</button> 12 </body> 13 <script src="jquery-3.3.1.min.js"></script> 14 15 <div class="outer"> 16 <div class="item"> 17 <button onclick="add(this)">+</button> 18 <input type="text"> 19 </div> 20 </div> 21 <script> 22 $("button").click(function () { 23 // 內部插入 24 // append 25 // 添加：方式一 26 // $(".div1").append("<h1>hello alex</h1>") 27 28 //添加：方式二 29 var $ele = $("<h1></h1>"); 30 $ele.html("hello") 31 $ele.css("color","red") 32 // $(".div1").append($ele) 33 34 // appendTo 35 // $ele.appendTo(".div1") 36 37 // prepend 38 // $(".div1").prepend($ele) 39 40 // prependTo 41 // $ele.prependTo(".div1") 42 43 // 外部插入,與上面方法類似 44 // $("").after(content|fn) 45 // $(".div1").after($ele) 46 // $("").before(content|fn) 47 // $("").insertAfter(content) 48 // $ele.insertAfter(".div1") 49 // $("").insertBefore(content) 50 51 // 替換 52 // $("p").replaceWith($ele) 53 54 // 刪除與清空 55 // $(".div1").empty() 56 // $(".div1").remove() 57 // 複製 58 // var $ele2 = $(".div1").clone() 59 // $(".div1").after($ele2) 60 }) 61 function add(self) { 62 var $clone_obj = $(self).parent().clone() // 注clone(true),添加true代表事件不複製 63 $clone_obj.children('button').text('-').attr("onclick",'remove_obj(this)') 64 $(".outer").append($clone_obj) 65 } 66 function remove_obj(self) 67 { 68 $(self).parent().remove() 69 } 70 </script> 71 </html>
文檔操作:增、刪、改
CSS操作：
1 格式： 2 $("").css(name/pro/[val/fn]) 3 4 5 位置: 6 $("").offset([coordinates]) 註：標籤距離視口的偏移量 7 $("").position() 註：相對於已經定位的父標籤偏移量 8 $("").scrollTop([val]) 9 $("").scrollLeft([val]) 10 11 12 尺寸: 13 $("").height([val/fn]) 14 $("").width([val/fn]) 15 $("").innerHeight() 16 $("").innerWidth() 17 $("").outerHeight([soptions]) 18 $("").outerWidth([options])
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0px; 9 padding: 0px; 10 } 11 .div1,.div2{ 12 width: 100%; 13 height: 800px; 14 } 15 .div1{ 16 /*border: 5px solid red;*/ 17 /*padding: 20px;*/ 18 /*margin: 2px;*/ 19 background-color: #84a42b; 20 } 21 .div2{ 22 background-color: #336699; 23 } 24 .outer{ 25 position: relative; 26 } 27 .returnTop{ 28 position: fixed; 29 right: 20px; 30 bottom: 20px; 31 width: 80px; 32 height: 50px; 33 background-color: crimson; 34 color: white; 35 text-align: center; 36 line-height: 50px; 37 } 38 .hide{ 39 display: none; 40 } 41 </style> 42 </head> 43 <body> 44 <div class="outer"> 45 <div class="div1"></div> 46 <div class="div2"></div> 47 <div class="returnTop hide" onclick="returnTop()">返回頂部</div> 48 </div> 49 </body> 50 <script src="jquery-3.3.1.min.js"></script> 51 <script> 52 // offset:相對於視口偏移量 53 // console.log('div1 top:',$(".div1").offset().top) 54 // console.log('div1 left:',$(".div1").offset().left); 55 // console.log('div2 top:',$(".div2").offset().top); 56 // console.log('div2 left:',$(".div2").offset().left); 57 58 // position：相對於已經定位的父標籤的偏移量 59 // console.log('div1 top:',$(".div1").position().top); 60 // console.log('div1 left:',$(".div1").position().left); 61 // console.log('div2 top:',$(".div2").position().top); 62 // console.log('div2 left:',$(".div2").position().left); 63 64 //尺寸 65 // console.log($(".div1").height()); 66 // // console.log($(".div1").height("300px")); 67 // console.log($(".div1").innerHeight()); 68 // console.log($(".div1").outerHeight()); 69 // console.log($(".div1").outerHeight(true)); 70 71 //綁定滾動事件 72 //監聽事件 73 window.onscroll=function () { 74 var scro_height = $(window).scrollTop(); 75 if (scro_height>100) 76 { 77 $(".returnTop").removeClass("hide") 78 } 79 else 80 { 81 $(".returnTop").addClass("hide") 82 } 83 } 84 function returnTop() 85 { 86 $(window).scrollTop(0) 87 } 88 </script> 89 </html>
CSS小練習及監聽滾動條事件
事件
1 頁面載入 2 ready(fn) //當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。 3 $(document).ready(function(){}) -----------> $(function(){}) 4 5 事件處理 6 $("").on(eve,[selector],[data],fn) // 在選擇元素上綁定一個或多個事件的事件處理函數。 7 8 // .on的selector參數是篩選出調用.on方法的dom元素的指定子元素，如： 9 // $('ul').on('click', 'li', function(){console.log('click');})就是篩選出ul下的li給其綁定 10 // click事件； 11 12 [selector]參數的好處: 13 好處在於.on方法為動態添加的元素也能綁上指定事件；如： 14 15 //$('ul li').on('click', function(){console.log('click');})的綁定方式和 16 //$('ul li').bind('click', function(){console.log('click');})一樣；我通過js給ul添加了一個 17 //li：$('ul').append('<li>js new li<li>')；這個新加的li是不會被綁上click事件的 18 19 //但是用$('ul').on('click', 'li', function(){console.log('click');}方式綁定，然後動態添加 20 //li:$('ul').append('<li>js new li<li>');這個新生成的li被綁上了click事件 21 22 [data]參數的調用: 23 function myHandler(event) { 24 alert(event.data.foo); 25 } 26 $("li").on("click", {foo: "bar"}, myHandler)
動畫效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--// 以下用於 顯示、隱藏、切換--> 9 <!--<div>hello</div>--> 10 <!--<button onclick="show_div()">顯示</button>--> 11 <!--<button onclick="hide_div()">隱藏</button>--> 12 <!--<button onclick="switch_div()">切換</button>--> 13 14 <!--// 以下用於滑動--> 15 <!--<div style="border: 1px solid lightcyan;width: 100%;height: 50px;background-color: #84a42b">hello</div>--> 16 <!--<button class="slideDown">顯示</button>--> 17 <!--<button class="slideUp">隱藏</button>--> 18 <!--<button class="slideToggle">切換</button>--> 19 <!--</body>--> 20 <!--<script src="jquery-3.3.1.min.js"></script>--> 21 22 <!--// 以下用於淡入淡出--> 23 <!--<div style="border: 1px solid lightcyan;width: 100%;height: 50px;background-color: #84a42b">hello</div>--> 24 <!--<button class="fadeIn">顯示</button>--> 25 <!--<button class="fadeOut">隱藏</button>--> 26 <!--<button class="fadeToggle">切換</button>--> 27 <!--<button class="fadeTo">fadeTo</button>--> 28 29 <!--//以下用於回調函數--> 30 <!--<p>hello pppp</p>--> 31 <!--<button class="btn1">hello</button>--> 32 33 </body> 34 <script src="jquery-3.3.1.min.js"></script> 35 <script> 36 // 顯示 37 // function show_div() { 38 // // $("div").show() 39 // $("div").show(2000) // 注括號加參數，代表秒數 40 // } 41 // 隱藏 42 // function hide_div() { 43 // // $("div").hide() 44 // $("div").hide(1500) // 注括號加參數，代表秒數 45 // } 46 // 切換 47 // function switch_div() 48 // { 49 // $("div").toggle(1000) // 注括號加參數，代表秒數 50 // } 51 52 // 滑動 53 // $(document).ready(function () { 54 // $(".slideDown").click(function () { 55 // $("div").slideDown(1000) 56 // }); 57 // $(".slideUp").click(function () { 58 // $("div").slideUp(1000) 59 // }); 60 // $(".slideToggle").click(function () { 61 // $("div").slideToggle(1000) 62 // }) 63 // }) 64 65 // 淡入淡出 66 // $(document).ready(function () { 67 // $(".fadeIn").click(function () { 68 // $("div").fadeIn(1000) 69 // }); 70 // $(".fadeOut").click(function () { 71 // $("div").fadeOut(1000) 72 // }); 73 // $(".fadeToggle").click(function () { 74 // $("div").fadeToggle(1000) 75 // }); 76 // $(".fadeTo").click(function () { 77 // $("div").fadeTo(1000,0.3) // 第二個參數，代表透明度(從1到設置參數的透明度) 78 // }) 79 // }) 80 81 //回調函數 82 // $(".btn1").click(function () { 83 // $("p").hide(1000,function () { 84 // alert('bye') 85 // }) 86 // }) 87 </script> 88 </html>
6個方法及示例
擴展方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <p>pppp</p> 9 <p>oooooooooo</p> 10 </body> 11 <script src="jquery-3.3.1.min.js"></script> 12 <script> 13 // 擴展方式一 14 // $.each(obj,function () { 15 // 16 // }); 17 18 //擴展方式二 19 // $("").each(function () { 20 // 21 // }) 22 23 // $.extend(object) // 為JQuery添加一個靜態方法 24 // $.fn.extend(object) // 為JQuery實例添加一個方法 25 26 // 創建函數一 27 // $.extend({ 28 // Myprint:function () { 29 // console.log('hello') 30 // } 31 // }) 32 // // 調用 33 // $.Myprint() 34 35 // 創建函數二 36 $.fn.extend({ 37 GetText:function () { 38 // JavaScript方法 39 // for(var i=0;i<this.length;i++) 40 // { 41 // // console.log(this[i].innerHTML) 42 // console.log($(this)[i].innerHTML) 43 // } 44 45 //JQuery方法 46 $.each($(this),function (x,y) { 47 // console.log("x:",x) 48 // console.log("y:",y) 49 // console.log(typeof y) //查看數據類型 50 console.log($(y).html()) // 轉換JQuery對象 51 }) 52 } 53 }) 54 //調用 55 $("p").GetText() 56 </script> 57 </html>
View Code
