轉(zhuǎn)：https://www.cnblogs.com/chenyanbin/p/10454503.html一 ,、HTML是什么？#htyper text markup language 即超文本標(biāo)記語言 超文本:就是指頁面內(nèi)可以包含圖片,、鏈接,、甚至音樂,、程序等非文字元素 標(biāo)記語言：標(biāo)記(標(biāo)簽)構(gòu)成的語言 靜態(tài)網(wǎng)頁：靜態(tài)的資源，如xxx.html 動態(tài)網(wǎng)頁：html代碼是由某種開發(fā)語言根據(jù)用戶請求動態(tài)生成 html文檔樹結(jié)構(gòu)圖：
二 ,、 什么是標(biāo)簽,？#- 由一對尖括號包裹的單詞構(gòu)成，如<html> 所有標(biāo)簽中的單詞不可能從數(shù)據(jù)開頭 - 標(biāo)簽不區(qū)分大小寫<html>和<HTML>,，建議使用小寫 - 標(biāo)簽分兩部分：開始標(biāo)簽<a>和結(jié)束標(biāo)簽</a>,，兩個標(biāo)簽之間的部分，叫標(biāo)簽體 - 有些標(biāo)簽功能比較簡單,，使用一個標(biāo)簽即可,，這種標(biāo)簽叫做自閉合標(biāo)簽，如：<br/>,、<hr/>,、<input/>、<img/> - 標(biāo)簽可以嵌套,，但不能交叉嵌套,。如:<a><b></a></b> 三 、 標(biāo)簽的屬性#- 通常是以鍵值對形式出現(xiàn)的,，例如 name="alex" - 屬性只能出現(xiàn)在開始標(biāo)簽 或 自閉合標(biāo)簽中 - 屬性名字全部小寫,，屬性值必須使用雙引號或單引號包裹，如:name="alex" - 如果屬性值和屬性名完全一樣,，直接寫屬性名即可,，如:readonly ?1、<head>標(biāo)簽#<meta> meta標(biāo)簽的組成：meta標(biāo)簽共有兩個屬性,，分別是http-equiv屬性和name屬性,，不同的屬性又有不同的參數(shù)值，這些不同的參數(shù)值就實現(xiàn)不同的網(wǎng)頁功能 1：name屬性主要用于描述網(wǎng)頁,，與之對應(yīng)的屬性值為content,，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的 1<meta name="keywords" content="meta總結(jié)">2<meta name="description" content="alex是一個中國人"> 2：http-equiv相當(dāng)于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息,，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容,，與之對應(yīng)的屬性值為content，content中的內(nèi)容其實就是各個參數(shù)的變量值,。 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"># 兼容標(biāo)簽,，IE"N"代表兼容幾 ?非meta標(biāo)簽 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>標(biāo)簽#基本標(biāo)簽(塊級標(biāo)簽和內(nèi)聯(lián)標(biāo)簽)  1<hn>：n的取值1-6,；從大到小,，用于表示標(biāo)題(塊標(biāo)簽,獨占一行)2<p>：段落標(biāo)簽，包裹的內(nèi)容換行,，并且也上下內(nèi)容之間有一行空白(塊標(biāo)簽,獨占一行)3<b>與<strong>：加粗標(biāo)簽4<strike>：文字加上一條中線5<em>：文字變成斜體6<sup>與<sub>：上角標(biāo)和小角標(biāo)17<br>：換行8<hr>：水平線9<div>與<span> ?塊級標(biāo)簽：<p><h1><table><ol><ul><form><div> ?內(nèi)聯(lián)標(biāo)簽：<a><input><img><sub><sup><textarea><span> block(塊)元素的特點 總是在新行上開始 寬度缺省是他容易的100%,，除非設(shè)定一個寬度 它可以容納內(nèi)聯(lián)元素和其他塊元素(嵌套) inline元素的特點 和其他元素都在一行上 寬度就是它的文字或圖片的寬度,，不可改變 內(nèi)聯(lián)元素只能容納文本或其他內(nèi)聯(lián)元素 特殊字符 <(小于)； >(大于),；",；©(版權(quán))；®,；  圖形標(biāo)簽：<img> src：圖片的路徑 alt：圖片沒有加載成功時的提示 title：鼠標(biāo)懸浮時的提示信息 width：圖片的寬 height：圖片的高(寬高兩個屬性,，只用一個會自動等比縮小) 超鏈接標(biāo)簽(錨標(biāo)簽)：<a> href：要鏈接的資源路徑，如：href="www.baidu.com" target:_blank：在新的窗體打開超鏈接,，框架名稱,；在指定框架中打開連接內(nèi)容 name：定義頁面的書簽，用于跳轉(zhuǎn)href:#id(錨) 列表標(biāo)簽： 1<ul>：無序列表2<ol>：有序列表3<li>：列表中的每一項4<dl>：定義列表5<dt>:列表標(biāo)題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>第一節(jié)</dd>11<dd>第二節(jié)</dd>12<dt>第二章</dt>13<dd>第一節(jié)</dd>14<dd>第二節(jié)</dd>15</dl>16</body>17</html>dl定義列表 表格標(biāo)簽：<table> 1border：表格邊框2cellpadding：內(nèi)邊距3cellspacing：外邊距4width：像素百分比5<tr>：table row 6<th>：table head cell 7<td>：table data cell 8rowspan：單元格豎跨多少行9colspan：單元格橫跨多少列(合并單元格)10<th>：table header <tbody>：為表格進(jìn)行分區(qū) 表單標(biāo)簽：<form> ? 表單用于向服務(wù)器傳輸數(shù)據(jù),。 表單能夠包含input元素,，比如文本字段，復(fù)選框,，單選框,，提交按鈕等等 表單還可以包含textarea，select,，fieldset和label元素 表單屬性： HTML表單用于接收不同類型的用戶輸入,，用戶提交表單時向服務(wù)器傳輸數(shù)據(jù)，從而實現(xiàn)用戶與Web服務(wù)器的交互,。表單標(biāo)簽,，要提交的所有內(nèi)容都應(yīng)該在該標(biāo)簽中。 action：表單提交到哪,，一般指向服務(wù)器端一個程序，程序接受到表單提交過來的數(shù)據(jù)(即表單元素值)作相應(yīng)處理 method：表單的提交方式post/get默認(rèn)取值就是get(信封) get：1.提交的鍵值對,，放在地址欄url后面,；2.安全性相對較差；3.對提交內(nèi)容的長度有限制 post：：1提交的鍵值對不在地址欄,；2.安全性相對較高,；3.對提交內(nèi)容的長度理論上無限制 get/post是常見的兩種請求方式 表單元素： <input> 標(biāo)簽的屬性和對應(yīng)值  1type:2 text：文本輸入框3 password：密碼輸入框4 radio：單選框5 checkbox：多選框6 submit：提交按鈕7 button：按鈕(配合JS使用)8 file：提交文件；form表單需要加上屬性:enctype="multipart/form-data",，meth="post"9name:表單提交相的鍵,，注意和id屬性的區(qū)別；name屬性是和服務(wù)器通信時使用的名稱,；而id屬性是瀏覽器端使用的名稱,，該屬性主要為了方便客戶端編程，在css和JavaScript中使用10value：表單提交項的值,，對于不同的輸入類型,，value屬性的用法也不同11type="button","reset","submit"-定義按鈕上的顯示的文本12type="text","password","hidden"-定義輸入字段的初始值13type="checkbox","radio","image"-定義與輸入相關(guān)聯(lián)的值14checked:radio和checkbox默認(rèn)被選中15readonly：只讀 text和password 16 disabled：對所有input都好使 上傳文件注意： 1,、請求方式必須是post 2、enctype="multipart/form-data" 1def index(req):2print('get:', req.GET)3print('post:', req.POST)4print('FILSE:', req.FILES)5for item in req.FILES:6 fileObj = req.FILES.get(item)7 f = open(fileObj.name,'wb')8 iter_file = fileObj.chunks()9for line in iter_file:10 f.write(line)11 f.close()12returnHttpResponse('注冊成功,！')上傳文件<select> 下拉選項標(biāo)簽屬性 1name:表單提交項的鍵2size:選項個數(shù)3multiple：multiple 4<option>下拉選中的每一項屬性：5 value：表單提交項的值 selected:selected下拉選默認(rèn)被選中6<optgroup>為每一項加上分組 <textarea> 文本域 name:表單提交項的鍵 cols:文本域默認(rèn)有多少列 rows:文本域默認(rèn)有多少行 <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的簡稱,，層疊樣式表,，用來控制網(wǎng)頁數(shù)據(jù)的表現(xiàn)，可以使網(wǎng)頁的表現(xiàn)與數(shù)據(jù)分離,。 2 ,、 引入方式#1第一種：行內(nèi)式(不推薦)；在標(biāo)記的Style屬性中設(shè)定CSS樣式2<p style="background-color:rebeccapurple">hello world</p>345第二種：嵌入式;將CSS樣式集中寫在網(wǎng)頁的<head></head>標(biāo)簽對的<style></style>標(biāo)簽中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>171819第三種：鏈接式,；將一個.css文件引入到HTML中20<link href="mystyle.css" rel="stylesheet" type="text/css">212223第四種：導(dǎo)入式,；將一個獨立的.css文件引入HTML文件中，導(dǎo)入式使用CSS規(guī)則引入外部CSS文件,，<style>標(biāo)記也是寫在<head>中24<style type="text/css">25@import"MyStyle.css";注：.css文件的路徑26</style>?3 ,、 CSS的選擇器(Selector)#基礎(chǔ)選擇器: 1*:通用元素選擇器，匹配任何元素*{margin:0;padding:0;}2E:標(biāo)簽選擇器,，匹配所有E標(biāo)簽的元素 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}組合選擇器 1E,F 多元素選擇器,，同時匹配所有E元素和F元素,，E和F之間用逗號分隔 div,p{background-color: green}2E F 后代元素選擇器，匹配所有屬于E元素后代的F元素,，E和F之間用空格分隔 li a{background-color: green}3E>F 子元素選擇器,，匹配所有E元素的子元素F div>p{color: green}4 E F 毗鄰元素選擇器，匹配所有緊隨E元素之后的同級元素F div p{color: green}注： 1,、塊級元素可以包含內(nèi)聯(lián)元素或某些塊級元素,，但內(nèi)聯(lián)元素不能包含塊級元素，它只能包含其他內(nèi)聯(lián)元素 2,、有幾個特殊的塊級元素只能包含內(nèi)聯(lián)元素,，不能包含塊級元素。如：h1-6,；p,；dt 3、li內(nèi)可以包含div 4,、塊級元素與塊級元素并列,、內(nèi)聯(lián)元素與內(nèi)聯(lián)元素并列 屬性選擇器 1E[att]匹配所有具有att屬性的E元素，不考慮它的值 p[title]{color:#f00,；}2E[att=val]匹配所有att屬性等于"val"的E元素 div[class="error"]{color：#f00,；}3E[attr~=val]匹配所有att屬性具有多個空格分隔的值,、其中一個值等于"val"的E元素4 td[class~="name"]{color：#f00;}5E[attr^=val]匹配屬性值以制定值開頭的每個元素 div[class^="test"]{background:#ffff00;}6E[attr$=val]匹配屬性值以指定值結(jié)尾的每個元素 div[class$="test"]{background:#ffff00;}7 E[attr*=val]匹配屬性值中包含指定值的每個元素 div[class*="test"]{background:#ffff00;}偽類(Pseudo-class) CSS偽類是用來給選擇器添加一些特殊效果 anchor偽類：專用于控制鏈接的顯示效果 1a:link(沒有接觸過的鏈接)，用于定義了鏈接的常規(guī)狀態(tài)2a:hover(鼠標(biāo)放在鏈接上的狀態(tài)),，用于產(chǎn)生視覺效果3a:visited(訪問過的鏈接),，用于閱讀文章，能清楚的判斷已經(jīng)訪問過的鏈接4a:active(在鏈接上按下鼠標(biāo)時的狀態(tài)),，用于表現(xiàn)鼠標(biāo)按下時的鏈接狀態(tài)5偽類選擇器:偽類指的是標(biāo)簽的不同狀態(tài)：6 a==>點過狀態(tài),、沒點過的狀態(tài)、鼠標(biāo)懸浮狀態(tài),、激活狀態(tài)7a:link{color:#FF0000}/*未訪問的鏈接*/8a:visited{color:#00FF00}/*已訪問的鏈接*/9a:hover{color:#FF00FF}/*鼠標(biāo)移動到鏈接上*/10 a:active{color:#0000FF}/*選定的鏈接*/before after偽類： 1:before p:before{content:"hello";color:red}在每個<p>元素的內(nèi)容之前插入內(nèi)容2:after p:aftere{content:"hello";color:red}在每個<p>元素的內(nèi)容之后插入內(nèi)容CSS優(yōu)先級 樣式表中的特殊性描述了不同規(guī)則的相對權(quán)重,，它的基本規(guī)則如下：1、內(nèi)聯(lián)樣式表的權(quán)值最高 style=""2,、統(tǒng)計選擇符中的ID屬性個數(shù)#id3,、統(tǒng)計選擇符中的class屬性個數(shù).class4、統(tǒng)計選擇符中的HTML標(biāo)簽名個數(shù) 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>優(yōu)先級CSS繼承 繼承是CSS的一個主要特征,，它是依賴于祖先-后代的關(guān)系,。繼承是一種機(jī)制，它允許樣式不僅可以應(yīng)用于某個特定的元素,，還可以應(yīng)用于它的后代,。如一個body定義了顏色也會應(yīng)用到段落的文本中。 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>1112</head>1314<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> 背景屬性 1background-color:cornflowerblue
2background-image:url('1.jpg');3background-repeat:no-repeat;(repeat:平鋪滿)4background-position:reght top(20px20px);(橫向:left center right)(縱向:top center bottom)5簡寫：<body style="background: 20px 20px no-repeat #ff4 url('OSI.jpg')">67</body>注：如果將背景屬性加在body上,，要給body加上一個height，否則結(jié)果異常,，因為body為空,，無法撐起背景圖片；另外還要設(shè)置一個width=100px 文本屬性 1font-size:10px2text-align:center;橫向排列3line-height:200px;文本行高4vertical-align:-4px;設(shè)置元素內(nèi)容的垂直對齊方式,，只對行內(nèi)元素有效，對塊級元素?zé)o效5text-indent:150px;首行縮進(jìn)6letter-spacing:10px;7word-spacing:20px8 text-transform:capitalize; 邊框?qū)傩?/strong> 1border-style:solid;2border-color:chartreuse;3border-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屬性 1none 2block 3inline display:inline-block可做列表布局,，其中的類似于圖片間的間隙小bug可以通過如下設(shè)置解決 1#outer{2 border:3px dashed;3 word-spacing:-5px;4}1inline-block默認(rèn)的空格符就是標(biāo)簽與標(biāo)簽之間的空隙造成的,。2(一)通過margin:-3解決3(二)給幾個標(biāo)簽加上一個父級div,然后設(shè)置樣式4div{5 word-spacing:-5px;6}解決inline-block間隙? 外邊距和內(nèi)邊距
? - margin：用于控制元素與元素之間的距離；基本用途就是控制元素周圍空間的間隔,，從而達(dá)到視覺上的相互隔開 - padding：用于控制內(nèi)容與邊框之間的距離,； - Border(邊框)：圍繞在內(nèi)邊距和內(nèi)容外的邊框； - Content(內(nèi)容)：盒子的內(nèi)容,，顯示文本和圖像,。 當(dāng)指定一個CSS元素的寬度和高度屬性時,，只需設(shè)置內(nèi)容區(qū)域的寬度和高度。 1margin:10px5px15px20px;--------上右下左2margin:10px5 px 15px;--------上右左下3margin:10px5px;--------上下右左4 margin:10px;--------上右下左 1父級div中沒有border,，padding,，inline content，子級div的margin會一直向上找,，直到找到某個標(biāo)簽包括border,，padding，inline content中的其中一個,，然后此div進(jìn)行margin,。2345解決方案：6第一種：7 border:1px solid transparent 8第二種：9 padding:1px10第三種：11 over-flow:hidden邊界塌陷(邊界重疊)解決方案 float屬性 block元素通常被視為獨立的一塊，獨占一行,，多個block元素會各自新起一行,，默認(rèn)block元素寬度自動填滿其父元素寬度。block元素可以設(shè)置width,、height,、margin、padding屬性,。 inline元素不會獨占一行,，多個相鄰的行內(nèi)元素會排列在同一行里，直到排滿,，才會新?lián)Q一行,，寬度隨元素的內(nèi)容而變化。inline元素設(shè)置width和height屬性無效,。inline元素的margin和padding屬性,。水平方向的padding-left，padding-right,，margin-left,，margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top,，padding-bottom,，margin-top,，margin-bottom不會產(chǎn)生邊距效果,。 塊級元素：div，form,，table,，p，pre,，h1-h5,，dl,，ol,，ul等 內(nèi)聯(lián)元素：span,，a,，strong，em,，label,，input，select,，textarea,，img，br等 文檔流：指的是元素排版布局中,，元素會自動從左往右,，從上往下的流式排列。 脫離文檔流：將元素從普通的布局排版中拿走,，其他盒子在定位的時候,，會當(dāng)作脫離文檔流的元素不存在而進(jìn)行定位。 只有絕對定位absolute和浮動float才會脫離文檔流,。 注：部分無視和完全無視的區(qū)別,？使用float脫離文檔流時，其他盒子會無視這個元素,，但其他盒子內(nèi)的文本依然會為這個元素讓出位置,，環(huán)繞在周圍。而對于使用absolute,、position脫離文檔流的元素,，其他盒子與其他盒子內(nèi)的文本都會無視他。 浮動：浮動的框可以向左或向右移動,，直到它的外邊距碰到包含框或另一個浮動框的邊框為止,。由于浮動框不在文檔的普通流中，所以文檔的普通流中的浮動框之后的塊框表現(xiàn)得就像浮動框不存在一樣,。當(dāng)初float被設(shè)計的時候就是用來完成文本環(huán)繞的效果，所以文本不會被擋住，這是float的特性,，即float是一種不徹底的脫離文檔流方式,。無論多么復(fù)雜的布局，其基本出發(fā)點均是：“如何在一行顯示多個div元素”,。 清除浮動：在非IE瀏覽器下,，當(dāng)容器的高度為auto，且容器的內(nèi)容中有浮動(float為left或right)的元素,，在這種情況下,，容器的高度不能自動伸長以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到容器外面而影響(甚至破壞)布局的現(xiàn)象,。這種現(xiàn)象叫浮動的溢出,，可以用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;17float:left;18 width:100px;19 height:100px;20}21#box2{22 background-color:deeppink;23float:right;24 width:100px;25 height:100px;26}27#box3{28 background-color:pink;29 height:40px;30}31</style>32</head>33<body>3435<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>案例1clear語法：none | left | right | both 2none：默認(rèn)值,，允許兩邊都可以有浮動對象3left：不允許左邊有浮動對象4right：不允許右邊有浮動對象5both：不允許有浮動對象6注：clear屬性只對自身起作用,，而不會影響其他元素。若一個元素的右側(cè)有一個浮動對象,，而這個元素設(shè)置了不允許右邊有浮動(即clear:right),，那么這個元素會自動下移一格，從而達(dá)到該元素右邊沒有浮動對象的目的,。 方式一： 1.clearfix:after{2 display:block;# 將該元素轉(zhuǎn)換為塊級元素3 clear:both;# 清除左右兩邊浮動4 visibility:hidden;# 可見度設(shè)置隱藏,。注:仍然占據(jù)空間，只是看不到而已5 line-height:0;# 行號為06 height:0;# 高度為07 font-size:0;# 字體大小為08}91011.clearfix{12*zoom:1;# 針對IE6,，因為IE6不支持:after偽類,，zoom:1讓IE6的元素可以清除浮動來包裹內(nèi)部元素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;17float:left;18 width:100px;19 height:100px;20}21#box2{22 background-color:deeppink;23float:right;24 width:100px;25 height:100px;26}27#box3{28 background-color:pink;29 height:40px;30}31</style>32</head>33<body>3435<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 Code1<!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;17float:left;18 width:100px;19 height:100px;20}21#box2{22 background-color:deeppink;23float: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>3940<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的元素雖然不在普通流中,，但是他浮動在普通流之上,，可以把普通流元素 浮動元素想象成一個立方體。如果沒有明確設(shè)定包含容器高度的情況下,，它要計算內(nèi)容的全部高度才能確定在什么位置hidden,，這樣浮動元素的高度就要被計算進(jìn)去。這樣包含容器就會被撐開,，清楚浮動,。 ? position定位 1、static：默認(rèn)值,，無定位,，不能當(dāng)作絕對定位的參照物，并且設(shè)置標(biāo)簽對象的left,、top等值是不起作用的,。 2,、relative：相對定位，相對于該元素在文檔流中的原始位置,，即以自己原始位置為參照物,。 3、absolute：絕對定位,，元素定位后生成一個塊級框,，不論原來他在正常流中生成何種類型的框。 4,、fixed：對象脫離正常文檔流,，使用top、right,、bottom,、left等屬性以窗口為參考點進(jìn)行定位，當(dāng)出現(xiàn)滾動條時,，對象不會隨著滾動,。 注：若元素設(shè)置了 position：absolute／ｆｉｘｅｄ；該元素就不能設(shè)置ｆｌｏａｔ,；但是ｒｅｌａｔｉｖｅ可以,，因為它原本所占的空間仍然占據(jù)文檔流。 ５,、ｍａｒｇｉｎ屬性布局絕對定位元素：ｍａｒｇｉｎ－ｂｏｔｔｏｍ和ｍａｒｇｉｎ－ｒｉｇｈｔ的值不對文檔流中的元素產(chǎn)生影響,，因為該元素已經(jīng)脫離了文檔流。 ?五 ,、 JavaScript概述#JavaScript的歷史#·1992年Nombas開發(fā)出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中),，后將其改名為Scriptease(客戶端執(zhí)行的語言) ·Netscape(網(wǎng)景)接受Nombas的理念，(Brendan Eich)在其Netscape Navigator 2.0產(chǎn)品中開發(fā)出一套livescipt的腳本語言,。sun和Netscape共同完成,，后改名叫Javascript ·微軟隨后模仿在其IE3.0產(chǎn)品中搭載了一個JavaScript的克隆版叫Jscript ·為了統(tǒng)一三家，ECMA(歐洲計算機(jī)制造協(xié)會)定義了ECMA-262規(guī)范,。國際標(biāo)準(zhǔn)化組織及國際電工委員會(ISO/IEC)也采納ECMAScript作為標(biāo)準(zhǔn)(ISO/IEC-16262),。從此，Web瀏覽器就開始努力將ECMAScript作為JavaScript實現(xiàn)的基礎(chǔ),。EcmaScript是規(guī)范,。 ECMAScript#盡管ECMAScript是一個重要的標(biāo)準(zhǔn)，但它并不是JavaScript唯一的部分,，當(dāng)然,，也不是唯一標(biāo)準(zhǔn)化的部分。實際上,，一個完整的JavaScript實現(xiàn)是由以下3個不同部分組成的： ·核心(ECMAScript) ·文檔對象模型(DOM) Document Object Model(整合JS,CSS,HTML) ·瀏覽器對象模型(BOM) Broswer Object Model(整合JS和瀏覽器) ·JavaScript在開發(fā)中絕對多數(shù)情況是基于對象的,。也是面向?qū)ο蟮摹?/p>
ECMAScript描述了以下內(nèi)容： 1,、語法 2、類型 3,、語句 4,、關(guān)鍵詞 5、保留字 6,、運算符 7、對象(封裝|繼承|多態(tài))基于對象的語言 JavaScript的兩種引入方式#1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Title</title>6</head>7<body>89</body>1011<!--第一種引入方式-->12<script>13 alert('hello world!')14</script>1516<!--第二種引入方式-->17<script src="test.js"></script>18</html>JavaScript基礎(chǔ)#?變量 1<script>2var name="alex",age=18;gender="男"3注：41,、聲明變量時,，可以不用var；如果不用var那么該變量為全局變量52,、變量命名,，只支持字母、下劃線,、$,；且區(qū)分大小寫,x與X是兩個變量;不能數(shù)字開頭6</script> 基本規(guī)范 1、每行結(jié)束可以不加分號(建議每行結(jié)束加上“;”) 2,、單行注釋(“//”)和多行注釋(“/**/”) 命名規(guī)范 ? 1Camel標(biāo)記法2首字母是小寫的,，接下來的字母都以大寫字符開頭。例如：3var myTestValue =0, mySecondValue ="hi";4Pascal標(biāo)記法5首字母是大寫的,，接下來的字母都以大寫字符開頭,。例如：6VarMyTestValue=0,MySecondValue="hi";7匈牙利類型標(biāo)記法8在以Pascal標(biāo)記法命名的變量前附加一個小寫字母（或小寫字母序列），說明該變量的類型,。例如,，i 表示整數(shù)，s 表示字符串,，如下所示“9Var iMyTestValue =0, sMySecondValue ="hi"; ? 常量和標(biāo)識符 1,、常量(程序中出現(xiàn)的數(shù)據(jù)值) 2、標(biāo)識符： ·只允許字母,、數(shù)字,、下劃線、$,；不能數(shù)字開頭 ·用于表示函數(shù),、變量的名字 ·JavaScript語言中代表特定含義的詞稱為保留字，不允許程序再次定義為標(biāo)識符
? 數(shù)據(jù)類型
1數(shù)字類型(Number):不區(qū)分整型和浮點型數(shù)值,，所有的數(shù)字都采用64位浮點格式存儲2字符串(String)：字符串常量首位由單引號或雙引號括起3常用的轉(zhuǎn)義字符：換行(\n),、單引號(\')、雙引號(\''),、右劃線(\\)
4布爾值(Boolean)：僅有兩個值:true和false,，也代表1和0,，主要用于JavaScript的控制語句中，例如：
5 if(x==1){
6 y=y 1
7 }
8 else{
9 y=y-1
10 }
11Null類型：如果函數(shù)或方法要返回的是對象,，那么找不到該對象時,，返回的通常為null
12 Undefined類型：當(dāng)聲明的變量未初始化時，該變量的默認(rèn)值為 undefined,；當(dāng)函數(shù)無明確返回值時,，返回的也是 undefined1-Boolean(布爾)，取值:只有兩種值:true或false23-Number(數(shù)字),，取值：所有數(shù)字,，包含整數(shù)小數(shù)等，范圍相當(dāng)于double45-String(字符串),取值：所有字符串67-Undefined(未定義),取值:只有一個值undefined89-Null(空對象),取值:只有一個值null1011-Object(對象類型),取值:任何對象,、Array,、Function等JavaScript數(shù)據(jù)類型 數(shù)據(jù)類型的轉(zhuǎn)換 1JavaScript：變量在聲明的時候并不需要指定數(shù)據(jù)類型，變量只有在賦值的時候才會確定數(shù)據(jù)類型,，表達(dá)式中包含不同類型數(shù)據(jù)則在計算過程中會強(qiáng)制進(jìn)行類別轉(zhuǎn)換23數(shù)字 字符串:數(shù)字轉(zhuǎn)換為字符串45數(shù)字 布爾值:true轉(zhuǎn)換為1,，false轉(zhuǎn)換為067字符串 布爾值:布爾值轉(zhuǎn)換為字符串true或false 強(qiáng)制類型轉(zhuǎn)換函數(shù) 1函數(shù)parseInt：強(qiáng)制轉(zhuǎn)換成整數(shù)例如parseInt("6.12")=6; parseInt(“12a")=12 ; parseInt(“a12")=NaN;parseInt(“1a2")=1 注:NaN-->Not a Number,是number的一種類型23函數(shù)parseFloat： 強(qiáng)制轉(zhuǎn)換成浮點數(shù) parseFloat("6.12")=6.12
45 函數(shù)eval： 將字符串強(qiáng)制轉(zhuǎn)換為表達(dá)式并返回結(jié)果 eval("1 1")=2 ; eval("1<2")=true1<script type="text/javascript">2//1.把字符串轉(zhuǎn)換為數(shù)字類型3//var n = '123';4//alert(n 1); //結(jié)果:123156//var n = '123';7//n = parseInt(n);8//alert(n 1);910//var n = '15';11//// 把n中的'15'當(dāng)做八進(jìn)制來進(jìn)行轉(zhuǎn)換，轉(zhuǎn)換成十進(jìn)制數(shù)字,，返回12//n = parseInt(n, 8);13//alert(n);1415//alert(parseInt('99.3')); // 9916//alert(parseFloat('99.3')); // 99.317//alert(parseFloat('99.3.3.2')) // 99.31819// ------把任意類型轉(zhuǎn)換為數(shù)字類型20//var n = '123.3';21//alert(n);22//alert(Number(n));23//alert(typeof (Number(n)));242526// ======Number=======27//function func() {28//}29//alert(Number(func)); // NaN30//alert(Number(false)); // 031//alert(Number(true)); // 132//alert(Number(undefined)); // NaN33//alert(Number(null)); // 034//alert(Number('1.2')); // 1.235//alert(Number('1.2.3')); // NaN36//alert(Number(new Object())); // NaN37//alert(Number(50)); // 503839// =========Bolean()========40//function func() {41//}42//alert(Boolean(func)); // true43//alert(Boolean('')); // false 空字符串44//alert(Boolean('hello')); // true 非空字符串45//alert(Boolean(50)); // true 非零數(shù)字46//alert(Boolean(null)); // false null47//alert(Boolean(0)); // false 零48//alert(Boolean(new Object())); // true 對象49//alert(Boolean(NaN)); // false 5051// ============toString()=======52//var n = 123;53//n = n.toString(); // 將任何類型轉(zhuǎn)換為String類型54//alert(typeof (n));5556//var n = null;57//alert(n.toString()) // null對象不能調(diào)用任何方法58//alert(String(n)) // 'null' 將所有類型轉(zhuǎn)換為String類型59</script>1<script type="text/javascript">2var n = parseInt('a123b')34//alert(n) // NaN5// 執(zhí)行 alert('轉(zhuǎn)換成功!');6// 判斷一個值是否是一個NaN不能用== 或者是!=,必須使用isNaN()函數(shù)7//if (n == NaN) {8// alert('轉(zhuǎn)換失敗!');9//} else {10// alert('轉(zhuǎn)換成功!');11//}1213if(isNaN(n)){14 alert('轉(zhuǎn)換失敗!');15}else{16 alert('轉(zhuǎn)換成功!');17}18</script>isNaN()函數(shù),判斷類型是否轉(zhuǎn)換成功!類型查詢函數(shù)(typeof) ? ECMAScript提供了一個typeof運算符來判斷一個值的某種類型 1typeof:的類型(string/number/boolean/object)2typeof("test" 3)---->string3typeof(null)---->object4typeof(true 1)---->number
5typeof(true-false)--->number? ECMAScript運算符 1加( ),、減(-)、乘(*),、除(/),、余數(shù)(%)、遞增( ),、遞減(--)2等于(==),、不等于(!=)、大于(>),、小于(<),、大于等于(>=)、小于等于(<=),、與(&&),、或(||)、非(!) 11,、相等符號:==,、!=2-對于==兩邊的表達(dá)式，如果類型相同,，則直接比較,。3-對于==兩邊的表達(dá)式，如果類型不同,，則先試圖將==兩邊的運算符轉(zhuǎn)換為String,、Boolean,、Number這些相同的數(shù)據(jù)類型然后再判斷是否相等。4-==認(rèn)為null與undefined,、unll與null,、undefined、undefined是相等的,。562,、完全相等運算符(恒等運算符)：===、,！==7-===運算符判斷前不進(jìn)行類型轉(zhuǎn)換,，并且===兩邊必須類型相同，值也相同的請款修改才返回true,。==與=== 11.如果==兩邊都是字符串類型，那么必須這兩個字符串完全相同才會返回true22.如果==兩邊的兩個變量指向了同一個對象,，那么也返回true33.如果==兩邊是一個字符串類型,，一個數(shù)字類型，那么js引擎會嘗試把其中的字符串類型嘗試轉(zhuǎn)換為數(shù)字類型后再作比較,。44.如果==兩邊一個是布爾類型,，一個數(shù)字類型，則也會嘗試把其中的布爾類型嘗試轉(zhuǎn)換為數(shù)字類型后再作比較,。55.如果==兩邊其中一個是String或Number類型,，而另外一個是object類型，那么判斷相等之前會先將Object轉(zhuǎn)換為String或Number類型后在與另外一個值比較,。66.newString('a')=='a'返回結(jié)果是true,，而newstring('a')==newstring('a')是false1<script type="text/javascript">2//var n1 = '123';3//var n2 = 123;4//alert(n1 == n2); // true5//alert(n1 === n2); //false67//var n1 = null;8//var n2;9//alert(n1 == n2); // true,當(dāng)使用==判斷的時候，認(rèn)為null與undefined相同10//alert(n1 === n2); // false1112//var n1 = true;13//var n2 = 'false';14//alert(n1 == n2); // false15//alert(n1 === n2); // false1617//var n1 = true;18//var n2 = 'true';19//alert(n1 == n2); // false2021//var n1 = 10;22//var n2 = -10;23//alert(n1 == n2); // false]2425//var n1 = 'a';26//alert(new String('a') == n1); // true2728//alert(new String('a') == new String('a')); // false2930// switch內(nèi)部使用的也是===嚴(yán)格等于來判斷是否相等31var n =123;32switch(n){33case'123':34 alert('等于字符串123');35break;36case123:37 alert('等于數(shù)字123');38break;39default:40 alert('沒有找到相等的,。')41break;42}43</script>1Undefined值表示一種未知的狀態(tài)21.聲明變量但未賦值時,，變量的值為Undefined32.方法沒有return語句返回值時，返回Undefined43.未聲明的變量,，通過typeof()檢測變量時,，返回“Undefined”字符串。54.訪問不存在的屬性時返回Undefined,，例如:Window.xxx返回Undefined,。67Unll值：81.null表示一個有意義的值，表示“無值”或“無”對象,，此時變量的狀態(tài)為“已知狀態(tài)”,，即Null?？梢酝ㄟ^設(shè)置對象名為Null值,，來釋放對對象的引用,，以便瀏覽器的垃圾回收機(jī)制可以回收內(nèi)存。91011注1：null==undefined結(jié)果為True,；null===undefined結(jié)果為False1213注2：把null轉(zhuǎn)換為數(shù)字,，結(jié)果為0.而把undefined轉(zhuǎn)換為數(shù)字結(jié)果為NaN 1<script type="text/javascript">2//1.當(dāng)聲明變量未賦值的時候，那么變量的值就是undefined3//var x;4//alert(x);56//2.變量未聲明7//alert(W);89// 在使用變量之前,，先校驗該變量是否可用10//if (typeof (w) == 'undefined') {11// alert('該變量不可用!');12//} else {13// alert(w)14//}1516//3.方法沒有返回值的時候,接受的返回值就是undefined17//function fun1(){18// //return 10;19//}20//var n = fun1();21//alert(n);2223//---------------null值--------------------------24// null值表示指向了一個“空對象”,，需要我們?yōu)閚賦值一個null值25//什么情況下需要為變量賦值null值？一般在一個對象使用完畢,，需要告訴瀏覽器可以被垃圾回收的情況下26//需要把變量賦值為null,，這樣這個變量所指向的對象就可以被垃圾回收了。27//var n = null28//alert(n);2930// 無論變量的值是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;45// 簡寫聲明兩個變量6//var x = 10, y = 1000;78//var n = 10, m = 1100;9//alert(n < m && m > n);1011// 新語法12//var r = 'a' || '';13//alert('1-->' r); // a14//r = null || 15;15//alert('2-->' r); // 1516//r = 'a' && 0; 17//alert('3-->' r); // 018//r = null && 15;19//alert('4-->' r); // null20//r = '12123' || 12;21//alert('5-->' r); // 1212322//r = '12123' && 12;23//alert('6-->' r); // 1224// ||：第一個值為真,，返回第一個值,；第一個值為假，繼續(xù)判斷第二個值25// &&：第一個值為假,，直接返回第一個值,；第二個值為真，繼續(xù)判斷第二個值26</script>? 控制語句 1if(表達(dá)式){2......3}else{4.....5}1if(表達(dá)式1){2....3}elseif(表達(dá)式2){4......5}elseif(表達(dá)式3){6....7}else{8....9}switch 選擇控制語句 1switch(表達(dá)式){2case值1:語句1;break;3case值2:語句2;break;4case值3:語句3;break;5default:語句4;6}1總結(jié)：21.switch用來根據(jù)一個整型值進(jìn)行多路分支,，并且編譯器可以對多路分支進(jìn)行優(yōu)化32.switchcase只將表達(dá)式計算一次,，然后將表達(dá)式的值與每個case的值比較，進(jìn)而選擇執(zhí)行哪一個case的語句塊43.ifelse的判斷條件范圍較廣,，每個語句基本上獨立的,，每次判斷時都要條件加載一次56所以在多路分支時用switch比ifelseif結(jié)構(gòu)效率高switch比if else結(jié)構(gòu)更加簡潔，可讀性更強(qiáng),，效率高 for 循環(huán)語句 1for(初始化值;條件;增量){2.....3}4實現(xiàn)條件循環(huán),，當(dāng)條件成立時，執(zhí)行語句,，否則跳出循環(huán)體1doms=document.getElementsByTagName("p");23for(var i in doms){4 console.log(i);// 0 1 2 length item namedItem5//console.log(doms[i])6}78//循環(huán)的是你獲取的th一個DOM元素集,，for in用來循環(huán)對象的所有屬性，dom元素集包含了你上面輸出的屬性,。9//如果你只要循環(huán)dom對象的話,，可以用for循環(huán):1011for(var i=0;i<doms.length;i ){12 console.log(i);// 0 1 213//console.log(doms[i])14}獲取標(biāo)簽的值while 循環(huán)控制語句 1while(條件){2....3}4功能和for類似，當(dāng)條件成立循環(huán)執(zhí)行語句，否則跳出循環(huán)try catch 異常處理 1try{2....3}4catch(e){5try代碼塊中拋出異常,，執(zhí)行此處代碼6}7finally{8無論try中代碼是否有異常拋出,，finally代碼塊中的始終會執(zhí)行9}1011注：主動拋出異常throwError('xxxxx')ECMA對象#對象的概念與分類：#·由ECMAScript定義的本地對象，獨立于宿主環(huán)境的ECMAScript實體提供的對象(native object) ·ECMAScript實現(xiàn)提供的,、獨立于宿主環(huán)境的所有對象,，在ECMAScript程序開始執(zhí)行時出現(xiàn)。意味著開發(fā)者不必明確實例化內(nèi)置對象,，它已被實例化了,。ECMA-262只定義了兩個內(nèi)置對象，即Global和Math(它們也是本地對象,，根據(jù)定義,，每個內(nèi)置對象都是本地對象)。(built-in object) ·所有非本地對象都是宿主對象(host object),，即由ECMAScript實現(xiàn)的宿主環(huán)境提供的對象,。所有BOM和DOM對象都是宿主對象。 object對象：ECMAScript的所有對象都由這個對象繼承而來,；Object對象中的所有屬性和方法都會出現(xiàn)在其他對象中1ToString():返回對象的原始字符串表示2ValueOf():返回最適合該對象的原始值,。對于許多對象，該方法返回的值都與ToString()的返回值相同,。 11種內(nèi)置對象Array、String,、Date,、Math、Boolean,、Number,、Function、Global,、Error,、RegExp、Object注：在JavaScript中除了null和undefined以外其他的數(shù)據(jù)類型都被定義成了對象,，也可以用創(chuàng)建對象的方法定義變量,。String、Math,、Array,、Date、RegExp都是JavaScript中重要的內(nèi)置對象,，在JavaScript程序大多數(shù)功能都是通過對象實現(xiàn)的,，
1創(chuàng)建字符串對象：2var str1 ="hello world";3alert(str1.length);4alert(str1.substr(1,5));5注：調(diào)用字符串的對象屬性或方法時自動創(chuàng)建對象，用完就丟棄678手工創(chuàng)建字符串對象：9var str1 =newString("hello world");10alert(str1.length);11alert(str1.substr(1,5));12注：采用new創(chuàng)建字符串對象str1,，全局有效131415length：獲取字符串的長度(str1.length)161718大小寫轉(zhuǎn)換：19var str1 ="abcDEF"20小寫:str1.toLowerCase()21大寫:str1.toUpperCase()222324獲取指定字符:25格式:26 x.charAt(index)27 x.charCodeAt(index)28注：29x：代表字符串對象30index：代表字符串位置,，從0開始編號31charAt：返回index位置的字符32charCodeAt：返回index位置的Unicode編碼333435查詢字符串：36格式1：37 x.indexof(findstr,index)38 x.lastIndexOf(findstr)3940var str1 ="welcom to the world of JS!";41var str2 = str1.indexof("c");# 結(jié)果為3,，從0開始計數(shù)42var str3 = str1.lastIndexOf("c")# 結(jié)果為3,，從后開始數(shù),，第一次出現(xiàn)c的位置4344格式2：45 x.match(regexp)46 x.search(regexp)47注：48x：代表字符串對象49regexp：代表正則表達(dá)式或字符串50match：返回匹配字符串的數(shù)組，如果沒有匹配則返回null51search：返回匹配字符串的首字符位置索引5253var str1 ="welcome to the world of JS!";54var str2=str1.match("world");55var str3=str1.search("world");56alert(str2[0])# 結(jié)果為"world"57alert(str3)# 結(jié)果為15585960截取字符串：61格式1：62x.substr(start,length)63x.substring(start,end)64注：65x：代表字符串對象66start：表示開始位置67length：表示截取長度68end：結(jié)束位置加1,，從0開始計數(shù)69var str1 ="abcdef"70str1.substr(2,2)# 結(jié)果：cd71str1.substring(2,2)# 結(jié)果：cd7273格式2：74//x.slice(start, end)75var str1="abcdefgh";76var str2=str1.slice(2,4);77var str3=str1.slice(4);78var str4=str1.slice(2,-1);79var str5=str1.slice(-3,-1);80alert(str2);81//結(jié)果為"cd"82alert(str3);83//結(jié)果為"efgh"84alert(str4);85//結(jié)果為"cdefg"86alert(str5);87//結(jié)果為"fg"888990替換字符串：91var str1 ="abxy";92str1.replace("xy","cd")# 結(jié)果:abcd939495分割字符串：96var str1 ="一，二,，三";97str1.split(",");# 結(jié)果：一二三9899100連接字符串：101格式：102y=x.concat(addstr)103注：104x：代表字符串對象105addstr：添加字符串106107var str1 ="abc"108 str1.concat("def")# 結(jié)果abcdefString對象
1創(chuàng)建數(shù)組對象：2格式1：3var iArrNum =[1,2,3]45格式2：6newArray();# 不指定數(shù)組元素個數(shù)7newArray(size);# 指定數(shù)組元素個數(shù)8910二維數(shù)組：11var cnweek=newArray(7);12for(var i=0;i<=6;i ){13 cnweek[i]=newArray(2);14}15cnweek[0][0]="星期日";16cnweek[0][1]="Sunday";17cnweek[1][0]="星期一";18cnweek[1][1]="Monday";19...20cnweek[6][0]="星期六";21cnweek[6][1]="Saturday";222324 length：獲取數(shù)組的個數(shù)252627連接數(shù)組：join
28格式：29x.join(bystr)30注：31x：代表數(shù)組對象32bystr：作為連接數(shù)組中元素的字符串3334var iArrNum =[1,2,3]35iArrNum.join("-")# 結(jié)果：1-2-3363738連接數(shù)組：concat
39var a =[1,2,3]l
40var a =newArray(1,2,3);41a.concat(4,5)# 結(jié)果：1,，2，3,，4,，5424344數(shù)組排序：reverse | sort
45var iArrNum =[1,3,5,2,9];46iArrNum.reverse();# 反轉(zhuǎn)數(shù)組:9,2,5,3,147iArrNum.sort();# 從小到大排序:1,2,3,5,9484950數(shù)組切片：slice
51注:52x代表數(shù)組對象53start表示開始位置索引54end是結(jié)束位置下一數(shù)組元素索引編號55第一個數(shù)組元素索引為056start、end可為負(fù)數(shù),，-1代表最后一個數(shù)組元素57end省略則相當(dāng)于從start位置截取以后所有數(shù)組元素5859var arr1=['a','b','c','d','e','f','g','h'];60var arr2=arr1.slice(2,4);61var arr3=arr1.slice(4);62var arr4=arr1.slice(2,-1);6364alert(arr2.toString());65//結(jié)果為"c,d" 66alert(arr3.toString());67//結(jié)果為"e,f,g,h"68alert(arr4.toString());69//結(jié)果為"c,d,e,f,g"707172刪除子數(shù)組：73格式74x. splice(start, deleteCount, value,...)75注：76x代表數(shù)組對象77splice的主要用途是對數(shù)組指定位置進(jìn)行刪除和插入78start表示開始位置索引79deleteCount刪除數(shù)組元素的個數(shù)80value表示在刪除位置插入的數(shù)組元素81value參數(shù)可以省略828384var a =[1,2,3,4,5,6,7,8];85a.splice(1,2);86//a變?yōu)?[1,4,5,6,7,8]87alert(a.toString());88a.splice(1,1);89//a變?yōu)閇1,5,6,7,8]90alert(a.toString());91a.splice(1,0,2,3);92//a變?yōu)閇1,2,3,5,6,7,8]939495數(shù)組的進(jìn)出棧操作一：96//push pop這兩個方法模擬的是一個棧操作9798//x.push(value, ...) 壓棧99//x.pop() 彈棧 100//使用注解101//102//x代表數(shù)組對象103//value可以為字符串,、數(shù)字,、數(shù)組等任何值104//push是將value值添加到數(shù)組x的結(jié)尾105//pop是將數(shù)組x的最后一個元素刪除106107108var arr1=[1,2,3];109arr1.push(4,5);110alert(arr1);111//結(jié)果為"1,2,3,4,5"112arr1.push([6,7]);113alert(arr1)114//結(jié)果為"1,2,3,4,5,6,7"115arr1.pop();116alert(arr1);117//結(jié)果為"1,2,3,4,5"118119120數(shù)組的進(jìn)出棧操作二：121// unshift shift 122//x.unshift(value,...)123//x.shift()124//使用注解125//126//x代表數(shù)組對象127//value可以為字符串,、數(shù)字,、數(shù)組等任何值128//unshift是將value值插入到數(shù)組x的開始129//shift是將數(shù)組x的第一個元素刪除130131var arr1=[1,2,3];132arr1.unshift(4,5);133alert(arr1);134//結(jié)果為"4,5,1,2,3"135arr1. unshift([6,7]);136alert(arr1);137//結(jié)果為"6,7,4,5,1,2,3"138arr1.shift();139alert(arr1);140//結(jié)果為"4,5,1,2,3"Array對象1// js中數(shù)組的特性2//java中數(shù)組的特性, 規(guī)定是什么類型的數(shù)組,就只能裝什么類型.只有一種類型.3//js中的數(shù)組特性1: js中的數(shù)組可以裝任意類型,沒有任何限制.4//js中的數(shù)組特性2: js中的數(shù)組,長度是隨著下標(biāo)變化的.用到多長就有多長.5var arr5 =['abc',123,1.14,true,null,undefined,newString('1213'),newFunction('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數(shù)組特性總結(jié)
? 1創(chuàng)建Date對象：2//方法1：不指定參數(shù)3var nowd1=newDate();4alert(nowd1.toLocaleString());5//方法2：參數(shù)為日期字符串6var nowd2=newDate("2004/3/20 11:12");7alert(nowd2.toLocaleString());8var nowd3=newDate("04/03/20 11:12");9alert(nowd3.toLocaleString());10//方法3：參數(shù)為毫秒數(shù)11var nowd3=newDate(5000);12alert(nowd3.toLocaleString());13alert(nowd3.toUTCString());1415//方法4：參數(shù)為年月日小時分鐘秒毫秒16var nowd4=newDate(2004,2,20,11,12,0,300);17alert(nowd4.toLocaleString());18//毫秒并不直接顯示192021獲取日期和時間：22獲取日期和時間23getDate()獲取日24getDay ()獲取星期25getMonth ()獲取月（0-11）26getFullYear ()獲取完整年份27getYear ()獲取年28getHours ()獲取小時29getMinutes ()獲取分鐘30getSeconds ()獲取秒31getMilliseconds ()獲取毫秒32 getTime ()返回累計毫秒數(shù)(從1970/1/1午夜)Date對象1//設(shè)置日期和時間2//setDate(day_of_month) 設(shè)置日3//setMonth (month) 設(shè)置月4//setFullYear (year) 設(shè)置年5//setHours (hour) 設(shè)置小時6//setMinutes (minute) 設(shè)置分鐘7//setSeconds (second) 設(shè)置秒8//setMillliseconds (ms) 設(shè)置毫秒(0-999)9//setTime (allms) 設(shè)置累計毫秒(從1970/1/1午夜)1011var x=newDate();12x.setFullYear (1997);//設(shè)置年199713x.setMonth(7);//設(shè)置月714x.setDate(1);//設(shè)置日115x.setHours(5);//設(shè)置小時516x.setMinutes(12);//設(shè)置分鐘1217x.setSeconds(54);//設(shè)置秒5418x.setMilliseconds(230);//設(shè)置毫秒23019 document.write(x.toLocaleString() "<br>");20//返回1997年8月1日5點12分54秒2122x.setTime(870409430000);//設(shè)置累計毫秒數(shù)23 document.write(x.toLocaleString() "<br>");24//返回1997年8月1日12點23分50秒設(shè)置日期和時間 1日期和時間的轉(zhuǎn)換:23getTimezoneOffset():8個時區(qū)×15度×4分/度=480;4返回本地時間與GMT的時間差,，以分鐘為單位5toUTCString()6返回國際標(biāo)準(zhǔn)時間字符串7toLocalString()8返回本地格式時間字符串9Date.parse(x)10返回累計毫秒數(shù)(從1970/1/1午夜到本地時間)11Date.UTC(x)12返回累計毫秒數(shù)(從1970/1/1午夜到國際時間)日期和時間的轉(zhuǎn)換 1function getCurrentDate(){2//1. 創(chuàng)建Date對象3var date =newDate();//沒有填入任何參數(shù)那么就是當(dāng)前時間4//2. 獲得當(dāng)前年份5var year = date.getFullYear();6//3. 獲得當(dāng)前月份 js中月份是從0到11.7var month = date.getMonth() 1;8//4. 獲得當(dāng)前日9var day = date.getDate();10//5. 獲得當(dāng)前小時11var hour = date.getHours();12//6. 獲得當(dāng)前分鐘13var min = date.getMinutes();14//7. 獲得當(dāng)前秒15var sec = date.getSeconds();16//8. 獲得當(dāng)前星期17var week = date.getDay();//沒有g(shù)etWeek18// 2014年06月18日 15:40:30 星期三19return year "年" changeNum(month) "月" day "日 " hour ":" min ":" sec " " parseWeek(week);20}2122alert(getCurrentDate());2324//解決 自動補(bǔ)齊成兩位數(shù)字的方法25function changeNum(num){26if(num <10){27return"0" num;28}else{29return num;30}3132}33//將數(shù)字 0~6 轉(zhuǎn)換成 星期日到星期六34function parseWeek(week){35var arr =["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];36// 0 1 2 3 .............37return arr[week];38}小練習(xí)1//RegExp對象2// 在表單驗證時使用該對象驗證用戶填入的字符串是否符合規(guī)則.3//創(chuàng)建正則對象方式1 參數(shù)1 正則表達(dá)式 參數(shù)2 驗證模式 g global / i 忽略大小寫. //參數(shù)2一般填寫g就可以,，也有“gi”.4// 用戶名 首字母必須是英文, 除了第一位其他只能是英文數(shù)字和_ . 長度最短不能少于6位 最長不能超過12位5//----------------------------創(chuàng)建方式16/* 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
1112 //----------------------------創(chuàng)建方式2 /填寫正則表達(dá)式/匹配模式;
13 var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;
1415 alert(reg2.test(str));// true
16 */17//-------------------------------正則對象的方法-------------------18//test方法 ==> 測試一個字符串是否復(fù)合 正則規(guī)則. 返回值是true 和false.1920//-------------------------String 中與正則結(jié)合的4個方法------------------.21// macth search split replace22var str ="hello world";2324//alert(str.match(/o/g)); //查找字符串中 復(fù)合正則的 內(nèi)容.25//alert(str.search(/h/g));// 0 查找字符串中符合正則表達(dá)式的內(nèi)容位置26//alert(str.split(/o/g)); // 按照正則表達(dá)式對字符串進(jìn)行切割. 返回數(shù)組;27 alert(str.replace(/o/g,"s"));// hells wsrld 對字符串按照正則進(jìn)行替換.RegExp對象1//Math對象2//該對象中的屬性方法 和數(shù)學(xué)有關(guān).3//Math是內(nèi)置對象 , 與Global的不同之處是, 在調(diào)用時 需要打出 "Math."前綴.4//屬性學(xué)習(xí):5//alert(Math.PI);6//方法學(xué)習(xí):7//alert(Math.random()); // 獲得隨機(jī)數(shù) 0~1 不包括1.8//alert(Math.round(1.5)); // 四舍五入9//練習(xí)：獲取1-100的隨機(jī)整數(shù)，包括1和10010//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 計算參數(shù)1 的參數(shù)2 次方.1920212223abs(x)返回數(shù)的絕對值,。24exp(x)返回 e 的指數(shù),。25floor(x)對數(shù)進(jìn)行下舍入,。26log(x)返回數(shù)的自然對數(shù)（底為e）,。27max(x,y)返回 x 和 y 中的最高值,。28min(x,y)返回 x 和 y 中的最低值。29pow(x,y)返回 x 的 y 次冪,。30random()返回0~1之間的隨機(jī)數(shù)。31round(x)把數(shù)四舍五入為最接近的整數(shù),。32sin(x)返回數(shù)的正弦。33sqrt(x)返回數(shù)的平方根,。34 tan(x)返回角的正切,。Math對象 ? Function對象#函數(shù)的定義： 1function函數(shù)名(參數(shù)){2函數(shù)體3}作用： ·可以使變量,、常量,、表達(dá)式作為函數(shù)調(diào)用的參數(shù) ·函數(shù)由關(guān)鍵字function定義 ·函數(shù)名的定義規(guī)則與標(biāo)識符一致 ·返回值必須使用return 1第一種寫法：2function函數(shù)名(參數(shù)){3 ?函數(shù)體;4return返回值;5}67第二種寫法：8var函數(shù)名=newFunction("參數(shù)1","參數(shù)n","function_body");基本語法注：JS的函數(shù)加載執(zhí)行與Python不同，它是整體加載完才會執(zhí)行,，所以函數(shù)聲明上面或下面都可以,。 Function對象的length屬性：函數(shù)屬于引用類型,；獲取函數(shù)期望的參數(shù)個數(shù)(alert(func1.length)) 運算符void()的作用：攔截方法的返回值(alert(void(func1(1,2)))) 1function func1(a,b){23 alert(a b);4}56 func1(1,2);//37 func1(1,2,3);//38 func1(1);//NaN9 func1();//NaN1011//只要函數(shù)名寫對即可,參數(shù)怎么填都不報錯.函數(shù)的調(diào)用1function add(a,b){23 console.log(a b);//34 console.log(arguments.length);//25 console.log(arguments);//[1,2]67}8 add(1,2)910------------------arguments的用處1------------------11function nxAdd(){12var result=0;13for(var num in arguments){14 result =arguments[num]15}16 alert(result)1718}1920 nxAdd(1,2,3,4,5)2122// ------------------arguments的用處2 ------------------2324function f(a,b,c){25if(arguments.length!=3){26thrownewError("function f called with " arguments.length " arguments,but it just need 3 arguments")27}28else{29 alert("success!")30}31}3233 f(1,2,3,4,5)函數(shù)的內(nèi)置對象arguments1// 匿名函數(shù)2var func =function(arg){3return"tony";4}56// 匿名函數(shù)的應(yīng)用7(function(){8 alert("tony");9})()1011(function(arg){12 console.log(arg);13})('123')匿名函數(shù)?匿名函數(shù)練習(xí)： 1<script type="text/javascript">2// 在JS中聲明匿名函數(shù)3// 一、把一個匿名函數(shù)賦值給了一個變量f1,，此時的f1是變量名,，不是函數(shù)名4// 因為下面這句代碼是賦值語句，所以需要在最后加一個“分號”5// 定義函數(shù)的時候是不需要加“分號”的,。6//var f1 = function () {7// alert('這就是匿名函數(shù)');8//};9//f1();10//f1 = 100;11//alert(f1);12//f1 = function (x, y) {13// return x y;;14//};15//alert(f1(1, 2));161718//function func(fn) {19// alert('這是一個f1函數(shù)');20// fn();21//}22////func(fun2);23//func(function () { alert('直接調(diào)用'); });2425//function fun2() {26// alert('2');27//}2829// 二,、匿名函數(shù)的第二種用法：定義匿名函數(shù)的同時直接調(diào)用該函數(shù)30//(function (x, y) { alert(x y); })(10, 20);313233// 三、第三種匿名函數(shù)的寫法34// 通過new Function()的方法定義匿名函數(shù),，可以將函數(shù)代碼用字符串來表示35//,，同時在函數(shù)中使用的變量，不會作為頁面的"全局變量"出現(xiàn),，在函數(shù)外部也訪問不到36//,。不像eval()一樣37//var f1 = new Function('x', 'y', 'alert(x y);'); // 注意 首字母大寫38//f1(20, 20);3940//此處的匿名函數(shù)是一條賦值語句，所以會從上到下依次執(zhí)行,，不會進(jìn)行“函數(shù)預(yù)解析”41var x =1, y =0, z =0;42var 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...447</script>BOM對象#BOM(瀏覽器對象模型),，可以對瀏覽器窗口進(jìn)行訪問和操作,。使用BOM，開發(fā)者可以移動窗體,、改變狀態(tài)欄中的文本以及執(zhí)行其他與頁面內(nèi)容不直接相關(guān)的動作,。 Window對象#1Window對象2所有瀏覽器都支持window對象3概念上講：一個html文檔對應(yīng)一個window對象4功能上講：控制瀏覽器窗口5使用上講：window對象不需要創(chuàng)建對象，直接使用即可,。 Window對象方法 1alert()：顯示帶有一段消息和一個確認(rèn)按鈕的警告框23confirm()：顯示帶有一段消息以及確認(rèn)按鈕和取消的對話框45prompt()：顯示可提示用戶輸入的對話框67open()：打開一個新的瀏覽器窗體或查找一個已命名的窗體89close()：關(guān)閉瀏覽器窗口1011setInterval()：按照指定的周期(毫秒)來調(diào)用函數(shù)或計算表達(dá)式1213clearInterval()：取消由setInterval()設(shè)置的timeout 1415setTimeout()：在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達(dá)式1617clearTimeout()：取消由setTimeout()方法設(shè)置的tiemout 1819 scrollTo()：把內(nèi)容滾動到指定的坐標(biāo) 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>18function showTime(){19var current_time =newDate().toLocaleString();20var ele = document.getElementById("id1");21 ele.value = current_time;22}23var clock1;24functionbegin(){25if(clock1 ==undefined)26{27 showTime();28 clock1 = setInterval(showTime,1000);// 每過1秒調(diào)用 showTime函數(shù)29}30}31functionend(){32 clearInterval(clock1);33 clock1 =undefined;34}35functionBeginOrEnd(){36var eleb = document.getElementsByClassName("btn")[0];37 console.log(eleb)38if(eleb.innerHTML =="開始"){39begin();40 eleb.innerHTML ="結(jié)束";41}42elseif(eleb.innerHTML =="結(jié)束")43{44end();45 eleb.innerHTML ="開始";46}47}48</script>49</html>小練習(xí)History對象 History屬性: ·History對象包含用戶(在瀏覽器窗口中)訪問過的URL,。 ·History對象是Window對象的一部分，可通過Window.history屬性對其訪問 1length：返回瀏覽器歷史列表中的URL數(shù)量23back()：加載history列表中的前一個URL 45forward()：加載history列表中的下一個URL 67 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對象包含有關(guān)當(dāng)前URL的信息 Location對象是Window對象的一個部分,，可通過Window.location屬性來訪問 1location.assign(URL)23location.reload()45 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/")13functionFunLoad()14{15 location.reload()16}17functionFunReplace()18{19 location.replace("https://www.baidu.com/")20}21</script>22</html>location用法DOM對象#什么是DOM?#DOM是W3C(萬維網(wǎng)聯(lián)盟)的標(biāo)準(zhǔn),。DOM定義了訪問HTML和XML文檔的標(biāo)準(zhǔn)。 W3C文檔對象模型(DOM)是中立于平臺和預(yù)言的接口,，它允許程序和腳本動態(tài)地訪問和更新文檔的內(nèi)容,、結(jié)構(gòu)和樣式。 W3C DOM標(biāo)準(zhǔn)被分為3個不同的部分： · 核心 DOM - 針對任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型 · XML DOM - 針對XML文檔的標(biāo)準(zhǔn)模型(定義了所有XML元素的對象和屬性,，以及訪問它們的方法) · HTML DOM - 針對HTML文檔的標(biāo)準(zhǔn)模型(定義了所有HTML元素的對象和屬性,，以及訪問它們的方法) DOM節(jié)點 1HTML文檔中的所有內(nèi)容都有節(jié)點(NODE):2-整個文檔是一個文檔節(jié)點(document對象)3-每個HTML元素是元素節(jié)點(element對象)4- HTML元素內(nèi)的文本是文本節(jié)點(text對象)5-每個HTML屬性是屬性節(jié)點(attribute對象)6-注釋是注釋節(jié)點(comment對象)789節(jié)點(自身)屬性：10- attributes：節(jié)點(元素)的屬性節(jié)點11- nodeType：節(jié)點類型12- nodeValue：節(jié)點值13- nodeName：節(jié)點名稱14- innerHTML：節(jié)點(元素)的文本值151617導(dǎo)航屬性：18- parentNode：節(jié)點(元素)的父節(jié)點(推薦)19- firstChild：節(jié)點下第一個子元素20- lastChild：節(jié)點下最后一個子元素21- childNodes：節(jié)點(元素)的子節(jié)點 1parentElement // 父節(jié)點標(biāo)簽元素23children // 所有子標(biāo)簽45firstElementChild // 第一個子標(biāo)簽元素67lastElementChild // 最后一個子標(biāo)簽元素89nextElementtSibling // 下一個兄弟標(biāo)簽元素1011 previousElementSibling // 上一個兄弟標(biāo)簽元素導(dǎo)航屬性 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>14var elep =document.getElementsByClassName("p1")[0]15 console.log(elep)// <p class="p1">hello p</p>16 console.log(elep.nodeName)// p17 console.log(elep.nodeType)// 118 console.log(elep.nodeValue)// null19 console.log(elep.innerHTML)//hello p20</script>21</html>節(jié)點屬性1parentElement //父系節(jié)點標(biāo)簽元素23children // 所有子標(biāo)簽45firstElementChild //第一個子標(biāo)簽元素67lastElementChild //最后一個子標(biāo)簽元素89nextElementtSibling //下一個兄弟標(biāo)簽元素1011 previousElementSibling //上一個兄弟標(biāo)簽元素推薦導(dǎo)航屬性
節(jié)點關(guān)系圖：
1訪問HTML元素(節(jié)點)，訪問HTML元素等同于訪問節(jié)點,，我們能夠以不同的方式來訪問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>17var ele=document.getElementsByName("littleP")[0];18 console.log(ele)19 console.log('------------')20var ele2 = ele.nextElementSibling;21 console.log(ele2.innerHTML);22 console.log('-----------')23 console.log(ele2.innerText)2425// 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)404142// var ele =document.getElementsByClassName("div1")[0];43// console.log(ele.children[1].children)44</script>45</html>View CodeHTML DOM Event(事件)#HTML 4.0 的新特征之一是有能力使HTML事件觸發(fā)瀏覽器中的動作(action),，比如當(dāng)用戶點擊某個HTML元素時啟動一段JavaScript。 1onclick：當(dāng)用戶點擊某個對象時調(diào)用的事件句柄23ondblclick：當(dāng)用戶雙擊某個對象時調(diào)用的事件句柄45onfocus：元素獲得焦點(輸入框)67onblur：元素失去焦點(用于表單驗證,，用戶離開某個輸入框時,，代表已經(jīng)輸入完了，可以對它進(jìn)行驗證)89onchange：域的內(nèi)容被改變(用戶表單元素,，當(dāng)元素內(nèi)容被改變時觸發(fā))1011onkeydown：某個鍵盤按鍵被按下(當(dāng)用戶在最后一個輸入框按下回車按鍵時,，表單提交)1213onkeypress：某個鍵盤按鍵被按下并松開1415onkeyup：某個鍵盤按鍵被松開1617onmousedown：鼠標(biāo)按鈕被按下1819onmousemove：鼠標(biāo)被移動2021onmouseout：鼠標(biāo)從某元素移開2223onmouseover：鼠標(biāo)移到某元素之上2425onmouseleave：鼠標(biāo)從元素離開2627onselect：文本被選中2829 onsubmit：確認(rèn)按鈕被點擊 1第一種：2<script>3 window.onload =function(){4var ele = document.getElementsByClassName("div1")[0];5 console.log(ele.innerHTML)6}78</script>910第二種：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>16var ele = document.getElementsByClassName("v2");17for(i=0;i<ele.length;i )18{19 ele[i].onclick=function(){20 alert("~~~~")21}22}23</script>24</html>推薦這種綁定Event對象： Event對象代表事件的狀態(tài)，比如事件在其中發(fā)生的元素,，鍵盤按鍵的狀態(tài),，鼠標(biāo)的位置，鼠標(biāo)按鈕的狀態(tài),。事件通常與函數(shù)結(jié)合使用,，函數(shù)不會再事件發(fā)生前被執(zhí)行！Event對象在事件發(fā)生時系統(tǒng)已經(jīng)創(chuàng)建好了,，并且會在事件函數(shù)被調(diào)用時傳給事件函數(shù)，我們僅僅需要接受一下即可,。 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">2223</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');32event.stopPropagation();//阻止事件傳播33}34</script>35</html>事件傳播? node的增刪改查 1增：2createElement(name)創(chuàng)建元素3appendChild()將元素添加456刪：71.獲取待刪除的元素82.獲取它的父元素93.使用removeChild()方法刪除1011改：12第一種：用上面的增和刪結(jié)果完成修改13第二種：14 a.使用setAttribute(),；修改屬性15 b.使用innerHTML屬性修改元素的內(nèi)容1617查：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>41function change(){42var img = document.createElement('img');43 img.src='bj.jpg';44var ele_p = document.getElementsByTagName('p')[0];45var ele_p_root = document.getElementsByClassName('div3')[0]46 ele_p_root.replaceChild(img,ele_p);47}48function add(){49var ele_p = document.createElement('p')50 ele_p.innerText='hello p'51var ele_p_root = document.getElementsByClassName('div1')[0]52 ele_p_root.appendChild(ele_p)53}54functiondel()55{56var ele_p_root = document.getElementsByClassName('div1')[0]57var son =ele_p_root.getElementsByTagName("p")[0]58 ele_p_root.removeChild(son)59}60</script>61</html>練習(xí)修改HTML DOM#1改變HTML內(nèi)容：innerHTML,、innerText
23改變CSS樣式：4<p id='p1'>hello world!</p>;5 document.getElementById('p1').style.color='blue';67改變HTML屬性：8 elementNode.setAttribute(name,value)9 elementNode.getAttribute(name)1011創(chuàng)建新的HTML元素：12 createElement(name)1314刪除已有的HTML元素：15 elementNode.removeChild(node)1617關(guān)于class的操作：18 elementNode.className
19 elementNode.classList.add
20 elementNode.classList.remove1<!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>13var 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小練習(xí)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}1112.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}2122.model {23 width:200px;24 height:200px;25 background-color: bisque;26 margin:0auto;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">4344</div>45<div class="model hide">46<button onclick="cancel()">cancel</button>47</div>48</body>49<script>50var ele_shade = document.getElementsByClassName('shade')[0];51var ele_model = document.getElementsByClassName('model')[0];52function show(){53 ele_shade.classList.remove('hide');54 ele_model.classList.remove('hide');55}56function cancel(){57 ele_shade.classList.add('hide');58 ele_model.classList.add('hide');59}60</script>61</html>模態(tài)窗體對話框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>30function selectAll(){31var inps = document.getElementsByTagName('input');32for(var i=0;i<inps.length;i )33{34 ipt = inps[i];35 ipt.checked=true;36}37}38function notSelectAll(){39var inps = document.getElementsByTagName('input');40for(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}55function cancel(){56var inps = document.getElementsByTagName('input');57for(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<selectid="provinces">9<option value="">請選擇省份</option>10</select>11<selectid="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'])2223// 取鍵24// for (var i in data)25// {26// console.log(i)27// }28 data ={'河北省':['石家莊','廊坊'],'山西':['晉城','大同'],'陜西':['西安','延安']}29// console.log(typeof data)30// console.log(data)31var pro_ele = document.getElementById('provinces')32var city_ele = document.getElementById('citys')33for(var i in data)34{35var 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]);4344// 清空options集合方法一45 city_ele.options.length=1;4647//清空options集合方法二48// for (var j=0;j<city_ele.length;j )49// {50// city_ele.remove(j)51// }52var city = data[this.options[this.selectedIndex].innerHTML];53for(var i=0;i<city.length;i )54{55var ele = document.createElement('option');56 ele.innerHTML=city[i];57 city_ele.appendChild(ele);58}59}60</script>61</html>JS二級聯(lián)動JS練習(xí)源碼云盤地址 ： 鏈接：https://pan.baidu.com/s/1_Lh3vkLJwC0Ywh2-O52TUA 六 、 前端之JQuery#JQuery是什么,？#JQuery由美國人John Resig創(chuàng)建,，至今已吸引了來自世界各地的眾多JavaScript高手加入其team。JQuery是繼prototype之后又一個優(yōu)秀的JavaScript框架,。其宗旨是--WRITE LESS,DO MORE!它是輕量級的JS庫,，這是其他的JS庫所不及的，兼容CSS3,，還兼容各種瀏覽器,。JQuery是一個快速的，簡潔的JavaScript庫,，使用戶能更方便地處理HTMLdocuments,、events、實現(xiàn)動畫效果,，并且方便地為網(wǎng)站提供AJAX交互,。JQuery還有一個比較大的優(yōu)勢是，它的文檔說明很全,，而且各種應(yīng)用也說的很詳細(xì),，同時還有許多成熟插件可供選擇。 什么事JQuery對象,？#JQuery對象通過JQuery包裝DOM對象后產(chǎn)生的對象,。如果一個對象是JQuery對象，那么它就可以使用JQuery里的方法：$("#test").html(); JQuery的基本語法：$(selector).action() 1第一種方式：2官網(wǎng)地址：http:///download/3注：41,、Production version -用于實際的網(wǎng)站中,，已被精簡和壓縮52、Development version -用于測試和開發(fā)(未壓縮,，可讀的代碼)678其他方式（通過CDN引用它）：9Staticfile：https://cdn./jquery/1.10.2/jquery.min.js10百度：https://apps./libs/jquery/2.1.4/jquery.min.js11又拍云：https://upcdn.b0./libs/jquery/jquery-2.0.2.min.js12新浪：https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js13Google：https://ajax./ajax/libs/jquery/1.10.2/jquery.min.jsJQuery安裝 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./libs/jquery/2.1.4/jquery.min.js"></script>14<script>15 $("div").css("color","red");16</script>17</html>JQuery引入方式1var $variable ----->JQuery對象（建議定義JQuery變量時,，前面加"$"）2var variable------->DOM對象34$variable[0]:JQuery對象轉(zhuǎn)為DOM對象56例子：7 $("#msg").html;<=====> $("#msg")[0].innerHTMLJQuery對象轉(zhuǎn)DOM對象注:JQuery對象方法不能與DOM對象方法混用，必須轉(zhuǎn)換后,，才可用尋找元素#選擇器： 1基本選擇器：2$("*") $("#id") $(".class") $("element") $(".class,p,div")345層級選擇器：6$(".outer div") $(".outer>div") $(".outer div") $(".outer~div")789屬性選擇器:10$('[id="div1"]') $('["alex"="sb"][id]')111213表單選擇器：14$("[type='txt']")------>$(":txt")15注：只適用于input標(biāo)簽：$("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");4344//層級選擇器45// $(".outer p").css("color","red");46// $(".outer>p").css("color","red");47// $(".outer p").css("color","red");48// $(".outer~p").css("color","red");4950//基本篩選器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"); //奇數(shù)55// $("li:odd").css("color","red"); // 偶數(shù)56// $("li:gt(1)").css("color","red"); //大于57// $("li:lt(3)").css("color","red"); //小于5859//屬性選擇器60// $("[alex]").css("color","red");61// $("[alex='sb']").css("color","red");6263//表單選擇器64// $("[type='text']").css("width","300px")65// $(":text").css("width","500px") // 簡寫,，只允許表單66</script>67</html>選擇器練習(xí)篩選器： 1基本篩選器：2$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")345過濾篩選器：6$("li").eq(2) $("li").first $("ul li").hasclass("test")789查詢篩選器：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");4243//查詢篩選器44// $(".outer").children("p").css("color","red");45// $(".outer").find("p").css("color","red");4647// $("li").eq(2).next().css("color","red");48// $("li").eq(2).nextAll().css("color","red");49// $("li").eq(1).nextUntil("#end").css("color","red");5051// $("li").eq(2).prev().css("color","red");52// $("li").eq(2).prevAll().css("color","red");53// $("li").eq(4).prevUntil(".begin").css("color","red");5455// $(".outer .inner p").parent().css("color","red");56// $(".outer .inner p").parents().css("color","red");57// $(".outer .inner p").parentsUntil("body").css("color","red");5859// $(".outer").siblings().css("color","red");60</script>61</html>篩選器練習(xí)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{12float: left;13 background-color: beige;14 width:30%;15 height:500px;16}17.content{18float: 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>4344<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>5253<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">6364</div>65</div>66</body>67<script src="jquery-3.3.1.min.js"></script>68<script>69function show(self){70 $(self).next().removeClass("hide")71 $(self).parent().siblings().children(".con").addClass("hide");72}73</script>74</html>左側(cè)菜單欄-小練習(xí)操作元素(屬性、CSS,、文檔處理)#屬性操作： 1屬性：2 $("").attr();3 $("").removeAttr;4 $("").prop();5 $("").removeProp();678CSS類：9 $("").addClass(class|fn);10 $("").removeClass([class|fn]);111213HTML代碼,、文本、值：14 $("").css("color","red");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// attr22// console.log($("div").attr("flag")) // 結(jié)果:d123// console.log($("div").attr("flag","d2")) //修改值24// console.log($("div").attr("flag")) //結(jié)果：d225//26// console.log($(":checkbox:first").attr("checked"))27// console.log($(":checkbox:last").attr("checked"))2829// console.log($(":checkbox").first().attr("checked"))30// console.log($(":checkbox").last().attr("checked"))3132// prop33// 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")) // 找不到,，自定義屬性,，只能找系統(tǒng)內(nèi)置的屬性名40// console.log($("div").prop("class"))4142//html|text|val43// console.log($("#id1").html()) // <p>pppppp</p>44// console.log($("#id1").html("<h1>alex</h1>"))45// console.log($("#id1").text()) // pppppp46// console.log($("#id1").text("<h1>alex</h1>"))47 console.log($(":text").val())// 固有屬性48 console.log($(":text").next())49 $(":text").val(789)5051//CSS52// $("div").css("color","red");53// $("div").css({"color":"red","background-color":"green"});54</script>55</html>小練習(xí)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循環(huán)16// for(var i=0;i<arr.length;i )17// {18// $("p").eq(i).html(arr[i])19// }2021// JQuery遍歷方式一22// $.each(arr,function (x,y) {23// console.log(x) //下標(biāo)24// console.log(y) //值25// console.log('---------')26// })2728//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>28function 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}39function reverse(){40 $(":checkbox").each(function(){41 $(this).prop("checked",!$(this).prop("checked"))42})43}44function 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}1112.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}2122.model {23 width:200px;24 height:200px;25 background-color: bisque;26 margin:0auto;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">4344</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>51function show(){52 $("button").parent().siblings().removeClass("hide")53}54function cancel(){55 $(".shade,.model").addClass("hide")56}57</script>58</html>JQuery模態(tài)對話框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>1415<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// 內(nèi)部插入24// append25// 添加：方式一26// $(".div1").append("<h1>hello alex</h1>")2728//添加：方式二29var $ele = $("<h1></h1>");30 $ele.html("hello")31 $ele.css("color","red")32// $(".div1").append($ele)3334// appendTo35// $ele.appendTo(".div1")3637// prepend38// $(".div1").prepend($ele)3940// prependTo41// $ele.prependTo(".div1")4243// 外部插入,與上面方法類似44// $("").after(content|fn)45// $(".div1").after($ele)46// $("").before(content|fn)47// $("").insertAfter(content)48// $ele.insertAfter(".div1")49// $("").insertBefore(content)5051// 替換52// $("p").replaceWith($ele)5354// 刪除與清空55// $(".div1").empty()56// $(".div1").remove()57// 復(fù)制58// var $ele2 = $(".div1").clone()59// $(".div1").after($ele2)60})61function add(self){62var $clone_obj = $(self).parent().clone()// 注clone(true),添加true代表事件不復(fù)制63 $clone_obj.children('button').text('-').attr("onclick",'remove_obj(this)')64 $(".outer").append($clone_obj)65}66function remove_obj(self)67{68 $(self).parent().remove()69}70</script>71</html>文檔操作:增、刪,、改CSS操作： 1格式：2 $("").css(name/pro/[val/fn])345位置:6 $("").offset([coordinates])注：標(biāo)簽距離視口的偏移量7 $("").position() 注：相對于已經(jīng)定位的父標(biāo)簽偏移量8 $("").scrollTop([val])9 $("").scrollLeft([val])101112尺寸: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);5758// position：相對于已經(jīng)定位的父標(biāo)簽的偏移量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);6364//尺寸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));7071//綁定滾動事件72//監(jiān)聽事件73 window.onscroll=function(){74var scro_height = $(window).scrollTop();75if(scro_height>100)76{77 $(".returnTop").removeClass("hide")78}79else80{81 $(".returnTop").addClass("hide")82}83}84function returnTop()85{86 $(window).scrollTop(0)87}88</script>89</html>CSS小練習(xí)及監(jiān)聽滾動條事件事件#1頁面載入2 ready(fn)//當(dāng)DOM載入就緒可以查詢及操縱時綁定一個要執(zhí)行的函數(shù),。3 $(document).ready(function(){})-----------> $(function(){})45事件處理6 $("").on(eve,[selector],[data],fn)// 在選擇元素上綁定一個或多個事件的事件處理函數(shù),。78// .on的selector參數(shù)是篩選出調(diào)用.on方法的dom元素的指定子元素，如：9// $('ul').on('click', 'li', function(){console.log('click');})就是篩選出ul下的li給其綁定10// click事件,；1112[selector]參數(shù)的好處:13好處在于.on方法為動態(tài)添加的元素也能綁上指定事件,；如：1415//$('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事件的1819//但是用$('ul').on('click', 'li', function(){console.log('click');}方式綁定,，然后動態(tài)添加20//li:$('ul').append('<li>js new li<li>');這個新生成的li被綁上了click事件2122[data]參數(shù)的調(diào)用:23function 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>-->1314<!--// 以下用于滑動-->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>-->2122<!--// 以下用于淡入淡出-->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>-->2829<!--//以下用于回調(diào)函數(shù)-->30<!--<p>hello pppp</p>-->31<!--<button class="btn1">hello</button>-->3233</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) // 注括號加參數(shù),，代表秒數(shù)40// }41// 隱藏42// function hide_div() {43// // $("div").hide()44// $("div").hide(1500) // 注括號加參數(shù)，代表秒數(shù)45// }46// 切換47// function switch_div()48// {49// $("div").toggle(1000) // 注括號加參數(shù),，代表秒數(shù)50// }5152// 滑動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// })6465// 淡入淡出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) // 第二個參數(shù),，代表透明度(從1到設(shè)置參數(shù)的透明度)78// })79// })8081//回調(diào)函數(shù)82// $(".btn1").click(function () {83// $("p").hide(1000,function () {84// alert('bye')85// })86// })87</script>88</html>6個方法及示例擴(kuò)展方法#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// 擴(kuò)展方式一14// $.each(obj,function () {15//16// });1718//擴(kuò)展方式二19// $("").each(function () {20//21// })2223// $.extend(object) // 為JQuery添加一個靜態(tài)方法24// $.fn.extend(object) // 為JQuery實例添加一個方法2526// 創(chuàng)建函數(shù)一27// $.extend({28// Myprint:function () {29// console.log('hello')30// }31// })32// // 調(diào)用33// $.Myprint()3435// 創(chuàng)建函數(shù)二36 $.fn.extend({37GetText: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// }4445//JQuery方法46 $.each($(this),function(x,y){47// console.log("x:",x)48// console.log("y:",y)49// console.log(typeof y) //查看數(shù)據(jù)類型50 console.log($(y).html())// 轉(zhuǎn)換JQuery對象51})52}53})54//調(diào)用55 $("p").GetText()56</script>57</html>View Code? ? 來源：https://www./content-1-673901.html |
|
|
