Python 之Web編程
一 、HTML是什麼？
htyper text markup language 即超文本標記語言javascript
超文本:就是指頁面內能夠包含圖片、連接、甚至音樂、程序等非文字元素css
標記語言：標記(標籤)構成的語言html
靜態網頁：靜態的資源，如xxx.html前端
動態網頁：html代碼是由某種開發語言根據用戶請求動態生成java
html文檔樹結構圖：node
二 、 什麼是標籤？
- 由一對尖括號包裹的單詞構成，如<html> 全部標籤中的單詞不可能從數據開頭jquery
- 標籤不區分大小寫<html>和<HTML>，建議使用小寫ajax
- 標籤分兩部分：開始標籤<a>和結束標籤</a>，兩個標籤之間的部分，叫標籤體正則表達式
- 有些標籤功能比較簡單，使用一個標籤便可，這種標籤叫作自閉合標籤，如：<br/>、<hr/>、<input/>、<img/>編程
- 標籤能夠嵌套，但不能交叉嵌套。如:<a><b></a></b>
三 、 標籤的屬性
- 一般是以鍵值對形式出現的，例如 name="alex"
- 屬性只能出如今開始標籤 或 自閉合標籤中
- 屬性名字所有小寫，屬性值必須使用雙引號或單引號包裹，如:name="alex"
- 若是屬性值和屬性名徹底同樣，直接寫屬性名便可，如:readonly
一、<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>
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>
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>
表格標籤：<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都好使
上傳文件注意：
一、請求方式必須是post
二、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樣式
一、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}
注：
一、塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其餘內聯元素
二、有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如：h1-6；p；dt
三、li內能夠包含div
四、塊級元素與塊級元素並列、內聯元素與內聯元素並列
屬性選擇器
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優先級
樣式表中的特殊性描述了不一樣規則的相對權重，它的基本規則以下：
一、內聯樣式表的權值最高 style=""
二、統計選擇符中的ID屬性個數 #id
三、統計選擇符中的class屬性個數 .class
四、統計選擇符中的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 }
外邊距和內邊距
- 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>
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>
方式二：
1 overflow:hidden; # 將超出的部分裁切隱藏，float的元素雖然不在普通流中，可是他浮動在普通流之上，能夠把普通流元素+浮動元素想象成一個立方體。若是沒有明確設定包含容器高度的狀況下，它要計算內容的所有高度才能肯定在什麼位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清楚浮動。
position定位
一、static：默認值，無定位，不能看成絕對定位的參照物，而且設置標籤對象的left、top等值是不起做用的。
二、relative：相對定位，相對於該元素在文檔流中的原始位置，即以本身原始位置爲參照物。
三、absolute：絕對定位，元素定位後生成一個塊級框，不論原來他在正常流中生成何種類型的框。
四、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描述瞭如下內容：
一、語法
二、類型
三、語句
四、關鍵詞
五、保留字
六、運算符
七、對象(封裝|繼承|多態)基於對象的語言
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 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";
常量和標識符
一、常量(程序中出現的數據值)
二、標識符：
·只容許字母、數字、下劃線、$；不能數字開頭
·用於表示函數、變量的名字
·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等
數據類型的轉換
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>
類型查詢函數(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 一、相等符號: == 、 != 2 - 對於==兩邊的表達式，若是類型相同，則直接比較。 3 - 對於==兩邊的表達式，若是類型不一樣，則先試圖將==兩邊的運算符轉換爲String、Boolean、Number這些相同的數據類型而後再判斷是否相等。 4 - ==認爲null與undefined、unll與null、undefined、undefined是相等的。 5 6 二、 徹底相等運算符(恆等運算符)：=== 、 ！== 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結構效率高
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
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"
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 */
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午夜)
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 對字符串按照正則進行替換.
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) 返回角的正切。
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)
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 // 1、把一個匿名函數賦值給了一個變量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 // 2、匿名函數的第二種用法：定義匿名函數的同時直接調用該函數 30 //(function (x, y) { alert(x + y); })(10, 20); 31 32 33 // 3、第三種匿名函數的寫法 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>
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>
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>
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>
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>
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>
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練習源碼雲盤地址 ：
連接：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 一、Production version -用於實際的網站中，已被精簡和壓縮 5 二、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
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>
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對象方法混用，必須轉換後，纔可用
尋找元素
選擇器：
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>
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>
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>
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>
事件
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>
擴展方法
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>
相關文章
- 1. Python web編程
- 2. python web編程-web客戶端編程
- 3. python網絡編程之web服務器
- 4. 編程之python
- 5. python之socket編程
- 6. Python編程之MQTT
- 7. python之Socket編程
- 8. Go Web 編程之 請求
- 9. Go Web 編程之 響應
- 10. Go Web 編程之 Hello World
- 更多相關文章...
- • SQLite - Python - SQLite教程
- • Rust 併發編程 - RUST 教程
- • YAML 入門教程
- • Java 8 Stream 教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Python web編程
- 2. python web編程-web客戶端編程
- 3. python網絡編程之web服務器
- 4. 編程之python
- 5. python之socket編程
- 6. Python編程之MQTT
- 7. python之Socket編程
- 8. Go Web 編程之 請求
- 9. Go Web 編程之 響應
- 10. Go Web 編程之 Hello World