前端須要用到的部分示例
<a href="網址">內容</a> 跳轉到該地址 <a href="http://www.oldboyedu.com">老男孩</a>
<p>內容</p> 使用 p 段落標籤,表示段落,能夠添加 br 標籤,進行換行
<p>12asdfasdfasdfasdfa<br />sdfasdfasdfasdf3</p>
<p>123</p>
hn 系列標籤 <h1> 內容 </h1> <h1>Alex</h1> <h2>Alex</h2> <h3>Alex</h3> <h4>Alex</h4> <h5>Alex</h5> <h6>eric</h6>
<span>內容</span> span 標籤,白板,行內標籤
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<div> 內容,代碼塊 </div> div 最經常使用的白板標籤,塊級標籤 <div>1</div> <div>2</div> <div>3</div>
<input type="text" name="須要使用的姓名" /> input 標籤,用於用戶輸入姓名,密碼,按鈕,文件上傳等 <input type="text" name="user" /> type 能夠具備 text password button submit
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://192.168.16.35:8888/index" method="POST"> <input type="text" name="user" /> <input type="text" name="email"/> <input type="password" name="pwd"/> <!--{'user': '用戶輸入的用戶','email': 'xx', 'pwd': 'xx' }--> <input type="button" value="登陸1"/> <input type="submit" value="登陸2"/> </form> <br/> <form> <input type="text" /> <input type="password" /> <input type="button" value="登陸1"/> <input type="submit" value="登陸2"/> </form> </body> </html>
多選框 使用 select 和 option 進行建立,selected 爲默認選擇 multiple 屬性爲 multiple 表示,進行多選 <select name="city" size="10" multiple="multiple"> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">南京</option> <option value="4">成都</option> </select>
<textarea> 內容 </textarea> 多行文本框,能夠輸入多行文本 <textarea name="meno" >asdfasdf</textarea>
input 使用 radio 屬性,實現單選框(name 值要相同)
checked="checked" 表示進行勾選
男：<input type="radio" name="gender" value="1" /> 女：<input type="radio" name="gender" value="2" checked="checked"/> Alex：<input type="radio" name="gender" value="3"/>
input 使用 checkbox 屬性,實現多選框(name 值要相同) checked="checked" 表示進行勾選
籃球：<input type="checkbox" name="favor" value="1" /> 足球：<input type="checkbox" name="favor" value="2" checked="checked" /> 皮球：<input type="checkbox" name="favor" value="3" /> 檯球：<input type="checkbox" name="favor" value="4" checked="checked"/> 網球：<input type="checkbox" name="favor" value="5" />
上傳文件使用 input 標籤的 file 屬性 注:在 form 中 添加 enctype="multipart/form-data" <input type="file" name="fname"/> <form enctype="multipart/form-data">
重置 使用 input 標籤的 type="reset" 屬性 <input type="reset" value="重置" />
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form enctype="multipart/form-data"> <div> <textarea name="meno" >asdfasdf</textarea> <select name="city" size="10" multiple="multiple"> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">南京</option> <option value="4">成都</option> </select> <input type="text" name="user" /> <p>請選擇性別：</p> 男：<input type="radio" name="gender" value="1" /> 女：<input type="radio" name="gender" value="2" checked="checked"/> Alex：<input type="radio" name="gender" value="3"/> <p>愛好</p> 籃球：<input type="checkbox" name="favor" value="1" /> 足球：<input type="checkbox" name="favor" value="2" checked="checked" /> 皮球：<input type="checkbox" name="favor" value="3" /> 檯球：<input type="checkbox" name="favor" value="4" checked="checked"/> 網球：<input type="checkbox" name="favor" value="5" /> <p>技能</p> 撩妹：<input type="checkbox" name="skill" checked="checked" /> 寫代碼：<input type="checkbox" name="skill"/> <p>上傳文件</p> <input type="file" name="fname"/> </div> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </form> </body> </html>
a 標籤根據 id 進行跳轉 # id 名稱 <a href="#i1">第一章</a> <div id="i1" style="height:600px;">第一章的內容</div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <a href="#i4">第四章</a> <div id="i1" style="height:600px;">第一章的內容</div> <div id="i2" style="height:600px;">第二章的內容</div> <div id="i3" style="height:600px;">第三章的內容</div> <div id="i4" style="height:600px;">第四章的內容</div> </body> </html>
在 a 標籤使用 img 圖片進行跳轉 img 標籤中 src 指定文件位置,title 爲鼠標停留在上面顯示的字段,style 表示應用了樣式,alt 爲不能正常顯示時,會出現的內容 <a href="http://www.oldboyedu.com"> <img src="1.jpg" title="大美女" style="height: 200px;width: 200px;" alt="美女"> </a>
<ul><li>內容</li></ul> ul 建立無序列表 <ul> <li>asdf</li> <li>asdf</li> <li>asdf</li> <li>asdf</li> </ul>
ol 建立有序列表 此處的 ul 和 ol 均可以進行變換樣式 <ol> <li>asdf</li> <li>asdf</li> <li>asdf</li> <li>asdf</li> </ol>
使用 dl dt dd 實現相似於菜單界面(分級) <dl> <dt>ttt</dt> <dd>ddd</dd> <dd>ddd</dd> <dd>ddd</dd> <dt>ttt</dt> <dd>ddd</dd> <dd>ddd</dd> <dd>ddd</dd> </dl>
table 標籤,內部具備 th頭 和 td 單元格,tr 換行 在 td 中能夠使用 a 標籤,進行跳轉
a 內的 # 表示當前頁面
<table border="1"> <tr> <td>主機名</td> <td>端口</td> <td>操做</td> </tr> <tr> <td>1.1.1.1</td> <td>80</td> <td> <a href="s2.html">查看詳細</a> <a href="#">修改</a> </td> </tr> <tr> <td>1.1.1.1</td> <td>80</td> <td>第二行，第3列</td> </tr> </table>
在 table 中使用 thead 和 tbody 並利用 colspan 和 rowspan 進行單元格合併
<table border="1"> <thead> <tr> <th>表頭1</th> <th>表頭1</th> <th>表頭1</th> <th>表頭1</th> </tr> </thead> <tbody> <tr> <td>1</td> <td colspan="3">1</td> </tr> <tr> <td rowspan="2">1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table>
fieldset 登陸外的包裹的線 使用 for 保證點擊內容跳轉到對應的 id 名稱處
<fieldset> <legend>登陸</legend> <label for="username">用戶名：</label> <input id="username" type="text" name="user" /> <br /> <label for="pwd">密碼：</label> <input id="pwd" type="text" name="user" /> </fieldset>
head 內的 styly 標籤 設置樣式 .名稱 對應 class 爲對應名稱的屬性 #名稱 對應 id 爲對應名稱的屬性 能夠多個 class 一塊兒設置,使用 .c1[屬性='名稱']{ 樣式 } 也能夠進行設置
.c1 div 表示爲 class爲 c1 的下一個 div 標籤設置樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* #i1{ background-color: #2459a2; height: 48px; } #i2{ background-color: #2459a2; height: 48px; } #i3{ background-color: #2459a2; height: 48px; } .c1{ background-color: #2459a2; height: 10px; } */ /*#c2{*/ /*background-color: black;*/ /*color: white;*/ /*}*/ /*.c1 div{*/ /*background-color: black;*/ /*color: white;*/ /*}*/ .i1,.i2,.i3{ background-color: black; color: white; } .c1[n='alex']{ width:100px; height:200px; } </style> </head> <body> <div class="i1">ff</div> <div class="i2">ff</div> <div class="i3">2</div> <input class="c1" type="text" n="alex"> <input class="c1" type="password"> </body> </html>
使用 link 標籤鏈接外部 css 樣式 <link rel="stylesheet" href="路徑/文件名.css" /> <link rel="stylesheet" href="css/commons.css" />
commons.css 內容 .c2{ font-size: 58px; color: black; } .c1{ background-color: red; color: white; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/commons.css" /> </head> <body> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> </body> </html>
div 標籤在 style 屬性中 設置邊框 border style="border: 1px solid red;"
style="height: 48px; width:80%; border: 1px solid red; font-size: 16px; text-align: center; line-height: 48px; font-weight: bold; " 屬性 注: height 設置高度 width 寬度 border 邊框 font-size 字體大小 text-align 文本位置 line-height 高度 font-weight 粗體
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="border: 1px solid red;"> asdfasdf </div> <div style="height: 48px; width:80%; border: 1px solid red; font-size: 16px; text-align: center; line-height: 48px; font-weight: bold; ">asdf</div> </body> </html>
style 使用 float 屬性 width 寬度,width:20%
float 懸浮,float:left <body> <div style="width: 20%;background-color: red;float: left">1</div> <div style="width: 20%;background-color: black;float: left">2</div> </body>
設置 class 爲 pg-header 的標籤樣式 <style> .pg-header{ 樣式 } </style>
styly 屬性 width 寬度,margin 設置外邊距 margin: 0 auto; float 的兩種方式,能夠設置在 div 中 float: left; float: right; style="clear: both" 在 float 下部編寫內容
設置寬度 width ,border 設置邊框 , float 頁面佈局 style="width: 300px;border: 1px solid red;" style="width: 96px;height:30px;border: 1px solid green;float: left;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ height: 38px; background-color: #dddddd; line-height: 38px; } </style> </head> <body style="margin: 0"> <div class="pg-header"> <div style="width: 980px;margin: 0 auto;"> <div style="float: left;">收藏本站</div> <div style="float: right;"> <a>登陸</a> <a>註冊</a> </div> <div style="clear: both"></div> </div> </div> <div> <div style="width: 980px;margin: 0 auto;"> <div style="float: left"> Logo </div> <div style="float: right"> <div style="height: 50px;width: 100px;background-color: #dddddd"></div> </div> <div style="clear: both"></div> </div> </div> <div style="background-color: red;"> <div style="width: 980px;margin: 0 auto;"> asdfsdf </div> </div> <div style="width: 300px;border: 1px solid red;"> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="clear: both;"></div> </div> </body> </html>
style 樣式設置 display display 能夠設置 inline , block , inline-block
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="background-color: red;display: inline;">asdf</div> <span style="background-color: red;display: block;">asdf</span> <span style="display:inline-block;background-color: red;height: 50px;width: 70px;">Alex</span> <a style="background-color: red;">Eric</a> </body> </html>
知識點總結 HTML 1、一套規則，瀏覽器認識的規則。 2、開發者： 學習Html規則 開發後臺程序： - 寫Html文件（充當模板的做用） ****** - 數據庫獲取數據，而後替換到html文件的指定位置（Web框架） 3、本地測試 - 找到文件路徑，直接瀏覽器打開 - pycharm打開測試 4、編寫Html文件 - doctype對應關係 - html標籤，標籤內部能夠寫屬性 ====> 只能有一個 - 註釋： <!-- 註釋的內容 --> 5、標籤分類 - 自閉合標籤 <meta charset="UTF-8"> - 主動閉合標籤 title>老男孩</title> 6、 head標籤中 - <meta -> 編碼，跳轉，刷新，關鍵字，描述，IE兼容 <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" /> - title標籤 7、body標籤 - 圖標， > < - p標籤，段落 - br，換行 ======== 小總結 ===== 全部標籤分爲： 塊級標籤： div（白板），H系列（加大加粗），p標籤（段落和段落之間有間距） 行內標籤： span（白板） 標籤之間能夠嵌套 標籤存在的意義，css操做，js操做 ps:chorme審查元素的使用 - 定位 - 查看樣式 - h系列 - div - span - input系列 + form標籤 input type='text' - name屬性，value="值" input type='password' - name屬性，value="值" input type='submit' - value='提交' 提交按鈕，表單 input type='button' - value='登陸' 按鈕 input type='radio' - 單選框 value，checked="checked"，name屬性（name相同則互斥） input type='checkbox' - 複選框 value, checked="checked"，name屬性（批量獲取數據） input type='file' - 依賴form表單的一個屬性 enctype="multipart/form-data" input type='rest' - 重置 <textarea >默認值</textarea> - name屬性 select標籤 - name,內部option value, 提交到後臺，size，multiple - a標籤 - 跳轉 - 錨 href='#某個標籤的ID' 標籤的ID不容許重複 - img src alt title - 列表 ul li ol li dl dt dd - 表格 table thead tr th tbody tr td colspan = '' rowspan = '' - label 用於點擊文件，使得關聯的標籤獲取光標 <label for="username">用戶名：</label> <input id="username" type="text" name="user" /> - fieldset legend - 20個標籤 CSS 在標籤上設置style屬性： background-color: #2459a2; height: 48px; ... 編寫css樣式： 1. 標籤的style屬性 2. 寫在head裏面 style標籤中寫樣式 - id選擇區 #i1{ background-color: #2459a2; height: 48px; } - class選擇器 ****** .名稱{ ... } <標籤 class='名稱'> </標籤> - 標籤選擇器 div{ ... } 全部div設置上此樣式 - 層級選擇器（空格） ****** .c1 .c2 div{ } - 組合選擇器（逗號） ****** #c1,.c2,div{ } - 屬性選擇器 ****** 對選擇到的標籤再經過屬性再進行一次篩選 .c1[n='alex']{ width:100px; height:200px; } PS: - 優先級，標籤上style優先，編寫順序，就近原則 2.5 css樣式也能夠寫在單獨文件中 <link rel="stylesheet" href="commons.css" /> 3、註釋 /* */ 4、邊框 - 寬度，樣式，顏色 (border: 4px dotted red;) - border-left 5、 height， 高度 百分比 width， 寬度 像素，百分比 text-align:ceter, 水平方向居中 line-height，垂直方向根據標籤高度 color、 字體顏色 font-size、 字體大小 font-weight 字體加粗 6、float 讓標籤浪起來，塊級標籤也能夠堆疊 老子管不住： <div style="clear: both;"></div> 7、display display: none; -- 讓標籤消失 display: inline; display: block; display: inline-block; 具備inline,默認本身有多少佔多少 具備block，能夠設置沒法設置高度，寬度，padding margin ****** 行內標籤：沒法設置高度，寬度，padding margin 塊級標籤：設置高度，寬度，padding margin 8、padding margin(0,auto)
a 標籤內部使用圖片,設置樣式 <a href="網址"> <img src="圖片路徑/圖片名.jpg" style="width:200px;height:300px;"> </a>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img{ border: 0; } </style> </head> <body> <a href="http://www.oldboyedu.com" >asdf</a> <a href="http://www.oldboyedu.com"> <img src="1.jpg" style="width: 200px;height: 300px;"> </a> </body> </html>
返回頂部
function GoTop(){ document.documentElement.scrollTop = 0; } 使用 document.documentElement.scrollTop = 0;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div onclick="GoTop();" style="width: 50px;height: 50px;background-color: black;color: white; position: fixed; bottom:20px; right: 20px; ">返回頂部</div> <div style="height: 5000px;background-color: #dddddd;"> asdfasdf </div> <script> function GoTop(){ document.documentElement.scrollTop = 0; } </script> </body> </html>
style 標籤內部使用 position: fixed; 固定位置 margin-top: 48px;與上部模塊之間的距離
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ height: 48px; background-color: black; color: #dddddd; position: fixed; top:0; right: 0; left: 0; } .pg-body{ background-color: #dddddd; height: 5000px; margin-top: 48px; } </style> </head> <body> <div class="pg-header">頭部</div> <div class="pg-body">內容</div> </body> </html>
position 使用絕對定位 position: absolute;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 50px;height: 50px;background-color: black;position: absolute;right: 0;bottom: 0;">asdf</div> <div style="height: 5000px;background-color: #dddddd;"> asdfasdf </div> </body> </html>
使用 div 嵌套使用 position 外層使用 relative,內部使用 absolute <div style="position: relative;......."> <div style="position: absolute;......."></div> </div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;"> <div style="position: absolute;left:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div> </div> <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;"> <div style="position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div> </div> <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;"> <div style="position: absolute;right:0;top:0;width: 50px;height: 50px;background-color: black;"></div> </div> </body> </html>
style 能夠設置屬性 style="display:none;z-index:10; position: fixed;top: 50%;left:50%; margin-left: -250px;margin-top: -200px; background-color:white;height: 400px;width:500px; style="display:none;z-index:9; position: fixed;background-color: black; top:0; bottom: 0; right: 0; left: 0; opacity: 0.5; "
overflow 的兩種屬性的區別 auto 會加入滾動條 overflow: auto overflow: hidden
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 200px;width: 300px;overflow: auto"> <img src="1.jpg"> </div> <div style="height: 200px;width: 300px;overflow: hidden"> <img src="1.jpg"> </div> </body> </html>
使用 position: fixed 固定頭部 設置高度 line-height: 48px; 設置距離上部距離 margin-top: 50px; 設置塊級元素在同一行顯示 display: inline-block; 設置鼠標碰到時,發生的變化 :hover .pg-header .menu:hover{ background-color: blue; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ position: fixed; right: 0; left: 0; top: 0; height: 48px; background-color: #2459a2; line-height: 48px; } .pg-body{ margin-top: 50px; } .w{ width: 980px; margin: 0 auto; } .pg-header .menu{ display: inline-block; padding: 0 10px 0 10px; color: white; } /*當鼠標移動到當前標籤上時，如下css屬性才生效*/ .pg-header .menu:hover{ background-color: blue; } </style> </head> <body> <div class="pg-header"> <div class="w"> <a class="logo">LOGO</a> <a class="menu">所有</a> <a class="menu">42區</a> <a class="menu">段子</a> <a class="menu">1024</a> </div> </div> <div class="pg-body"> <div class="w">a</div> </div> </body> </html>
style 樣式 background-image: url(icon_18_118.png); 設置圖片的 url , 能夠爲本地圖片 background-repeat 設置是否重複背景圖像
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 100px;"></div> <div style="background-image: url(icon_18_118.png);background-repeat:no-repeat;height: 20px;width:20px;border: 1px solid red;"></div> </body> </html>
能夠爲不一樣的標籤設置相同的 class 屬性,可是 id 必須不一樣
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <input class="c1" type="radio" name="gender" value="1" /> <input type="radio" name="gender" value="2" /> </div> </body> </html>
輸入框嵌入圖片(注:圖片目前和輸入的內容會重疊)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 35px;width: 400px;position: relative;"> <input type="text" style="height: 35px;width: 400px; margin-right: 20px;" /> <span style="position:absolute;right:0;top:10px;background-image: url(i_name.jpg);height: 16px;width: 16px;display: inline-block; "></span> </div> </body> </html>
在標籤中使用 onclick=函數名(); 能夠進行調用該函數 onclick="GetData(); 使用 document.getElementById('id名稱') 能夠獲取該數據 document.getElementById('user') function GetData(){ var i = document.getElementById('user'); alert(i.value); } 使用 .value 獲取值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="user" > <input type="button" onclick="GetData();" value="點我" /> <script> function GetData(){ var i = document.getElementById('user'); alert(i.value); } </script> </body> </html>
使用外部 js 文件 <script src="文件名.js"></script> <script src="commons.js"></script>
能夠添加 type="text/javascript" 進行聲明 script 語句 <script type="text/javascript"> //javascript代碼 </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="commons.js"></script> <script type="text/javascript"> //javascript代碼 alert(123); </script> </head> <body> </body> </html>
聲明全局變量 age = "18"; 轉換爲 int 類型使用 parseInt(變量); i = parseInt(age); 定義局部變量 var name = 'eric'
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>sadf</h1> <script> /* name = 'alex'; function func(){ var name = 'eric' }*/ age = "18"; i = parseInt(age); </script> </body> </html>
setInterval 設置定時器 setInterval("函數名();",毫秒); 函數定義 function 函數名(參數){ 代碼塊; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> function f1(){ console.log(1); } // 建立一個定時器 //setInterval("alert(123);", 5000); setInterval("f1();", 1000); </script> </body> </html>
使用 function 定義函數 func 函數名稱 var 定義局部變量,須要注意變量的做用域 document.getElementById 經過指定的 id 名稱進行獲取 .innerText 獲取文本內容 .charAt(0) 獲取第一個字符 content.substring(1,content.length) 獲取第二個字符到最後 使用 + 號進行字符串的拼接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1">歡迎老男孩蒞臨指導</div> <script> function func(){ // 根據ID獲取指定標籤的內容,定於局部變量接受 var tag = document.getElementById('i1'); // 獲取標籤內部的內容 var content = tag.innerText; var f = content.charAt(0); var l = content.substring(1,content.length); var new_content = l + f; tag.innerText = new_content; } setInterval('func()', 500); </script> </body> </html>
div 內部嵌套 div
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <div></div> <div> c1 </div> </div> <div> <div></div> <div id="i1"> c2 </div> </div> <div> <div></div> <div> c3 </div> </div> </body> </html>
position: fixed; 固定位置 opacity: 0.6; 透明度 z-index: 9; 顯示的優先級 margin-left: -250px;距離左面距離 margin-top: -200px;距離頂部距離
添加按鈕綁定 js 函數 <input type="button" value="功能" onclick="函數名();" /> <input type="button" value="添加" onclick="ShowModel();" />
獲取到指定的 id 以後,使用 classList 獲取 class 列表, 刪除 class 屬性使用 remove 添加 class 屬性使用 add document.getElementById('i1').classList.remove('hide'); document.getElementById('i1').classList.add('hide');
多選框選中 使用 checked 屬性 true 表示選中,false 表示沒有選中 checkbox.checked = true; checkbox.checked = false;
for 循環 for(var i=0;i<數組對象.length;i++){ // 循環 代碼塊 }
實現多選反選,主要是依靠 checked 屬性(選中爲true) if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .c1{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; } .c2{ width: 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; z-index: 10; } </style> </head> <body style="margin: 0;"> <div> <input type="button" value="添加" onclick="ShowModel();" /> <input type="button" value="全選" onclick="ChooseAll();" /> <input type="button" value="取消" onclick="CancleAll();" /> <input type="button" value="反選" onclick="ReverseAll();" /> <table> <thead> <tr> <th>選擇</th> <th>主機名</th> <th>端口</th> </tr> </thead> <tbody id="tb"> <tr> <td> <input type="checkbox" /> </td> <td>1.1.1.1</td> <td>190</td> </tr> <tr> <td><input type="checkbox"f id="test" /></td> <td>1.1.1.2</td> <td>192</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.3</td> <td>193</td> </tr> </tbody> </table> </div> <!-- 遮罩層開始 --> <div id="i1" class="c1 hide"></div> <!-- 遮罩層結束 --> <!-- 彈出框開始 --> <div id="i2" class="c2 hide"> <p><input type="text" /></p> <p><input type="text" /></p> <p> <input type="button" value="取消" onclick="HideModel();"/> <input type="button" value="肯定"/> </p> </div> <!-- 彈出框結束 --> <script> function ShowModel(){ document.getElementById('i1').classList.remove('hide'); document.getElementById('i2').classList.remove('hide'); } function HideModel(){ document.getElementById('i1').classList.add('hide'); document.getElementById('i2').classList.add('hide'); } function ChooseAll(){ var tbody = document.getElementById('tb'); // 獲取全部的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循環全部的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = true; } } function CancleAll(){ var tbody = document.getElementById('tb'); // 獲取全部的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循環全部的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = false; } } function ReverseAll(){ var tbody = document.getElementById('tb'); // 獲取全部的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循環全部的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}} </script> </body> </html>
在標籤中綁定事件能夠添加參數 <div id='i1' class="header" onclick="ChangeMenu('i1');">菜單1</div> function ChangeMenu(nid){ 代碼塊 }
此處,使用nid接收傳遞過來的 i1 值
實現菜單欄
.parentElement 父節點 .children 孩子節點 .nextElementSibling 下一個元素節點的兄弟節點 var item_list = current_header.parentElement.parentElement.children; 添加樣式能夠使用索引,指定第幾個孩子進行添加 class 樣式 current_item.children[1].classList.add('hide');
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .item .header{ height: 35px; background-color: #2459a2; color: white; line-height: 35px; } </style> </head> <body> <div style="height: 48px"></div> <div style="width: 300px"> <div class="item"> <div id='i1' class="header" onclick="ChangeMenu('i1');">菜單1</div> <div class="content"> <div>內容1</div> <div>內容1</div> <div>內容1</div> </div> </div> <div class="item"> <div id='i2' class="header" onclick="ChangeMenu('i2');">菜單2</div> <div class="content hide"> <div>內容2</div> <div>內容2</div> <div>內容2</div> </div> </div> <div class="item"> <div id='i3' class="header" onclick="ChangeMenu('i3');">菜單3</div> <div class="content hide"> <div>內容3</div> <div>內容3</div> <div>內容3</div> </div> </div> <div class="item"> <div id='i4' class="header" onclick="ChangeMenu('i4');">菜單4</div> <div class="content hide"> <div>內容4</div> <div>內容4</div> <div>內容4</div> </div> </div> </div> <script> function ChangeMenu(nid){ var current_header = document.getElementById(nid); var item_list = current_header.parentElement.parentElement.children; for(var i=0;i<item_list.length;i++){ var current_item = item_list[i]; current_item.children[1].classList.add('hide'); } current_header.nextElementSibling.classList.remove('hide'); } </script> </body> </html>
for 循環的另外一種寫法 a 爲數組 a = [11,22,33,44] for(var item in a){ console.log(item); }
.getElementsByTagName('div') 經過標籤名進行查找 .getElementsByClassName 經過class屬性進行查找 .getElementsByName 根據 name 屬性進行查找 firstElementChild 第一個子標籤元素 lastElementChild 最後一個子標籤元素 nextElementtSibling 下一個兄弟標籤元素 previousElementSibling 上一個兄弟標籤元素
知識點總結 1、css重用 <style> 若是整個頁面的寬度 > 900px時： { .c{ 共有 } .c1{ 獨有 } } .c2{ 獨有 } </style> <div class='c c1'></div> <div class='c c2'></div> 2、自適應 和 改變大小變形 左右滾動條的出現 寬度，百分比 頁面最外層：像素的寬度 => 最外層設置絕對寬度 自適應：media 3、默認img標籤，有一個1px的邊框 img{ border: 0; } 1、塊級和行內 2、form標籤 <form action='http://sssss' methed='GET' enctype='multi'> <div>asdfasdf</div> <input type='text' name='q' /> <input type='text' name='b' /> # 上傳文件 <input type='file' name='f' /> <input type='submit' /> </form> GET: http://sssss?q=用戶輸入的值 http://sssss?q=用戶輸入的值&b=用戶輸入的內容 POST： 請求頭 請求內容 3、display: block;inline;inline-block 4、float： <div> <div style='float:left;'>f</div> <div style='clear:both;'></div> </div> 5、margin: 0 auto; 6、padding, ---> 自身發生變化 CSS補充 position: a. fiexd => 固定在頁面的某個位置 b. relative + absolute <div style='position:relative;'> <div style='position:absolute;top:0;left:0;'></div> </div> opcity: 0.5 透明度 z-index: 層級順序 overflow: hidden,auto hover background-image:url('image/4.gif'); # 默認，div大，圖片重複訪 background-repeat: repeat-y; background-position-x: background-position-y: 示例：輸入框 JavaScript 獨立的語言，瀏覽器具備js解釋器 JavaScript代碼存在形式： - Head中 <script> //javascript代碼 alert(123); </script> <script type="text/javascript"> //javascript代碼 alert(123); </script> - 文件 <script src='js文件路徑'> </script> PS: JS代碼須要放置在 <body>標籤內部的最下方 註釋 當行註釋 // 多行註釋 /* */ 變量： python： name = 'alex' JavaScript: name = 'alex' # 全局變量 var name = 'eric' # 局部變量 寫Js代碼： - html文件中編寫 - 臨時，瀏覽器的終端 console 基本數據類型 數字 a = 18; 字符串 a = "alex" a.chartAt(索引位置) a.substring(起始位置，結束位置) a.lenght 獲取當前字符串長度 ... 列表(數組) a = [11,22,33] 字典 a = {'k1':'v1','k2':'v2'} 布爾類型 小寫 for循環 1. 循環時，循環的元素是索引 a = [11,22,33,44] for(var item in a){ console.log(item); } a = {'k1':'v1','k2':'v2'} for(var item in a){ console.log(item); } 2. for(var i=0;i<10;i=i+1){ } a = [11,22,33,44] for(var i=0;i<a.length;i=i+1){ } 不支持字典的循環 條件語句 if(條件){ }else if(條件){ }else if(條件){ }else{ } == 值相等 === 值和類型都相等 && and || or 函數： function 函數名(a,b,c){ } 函數名(1,2,3) Dom 1、找到標籤 獲取單個元素 document.getElementById('i1') 獲取多個元素（列表）document.getElementsByTagName('div') 獲取多個元素（列表）document.getElementsByClassName('c1') a. 直接找 document.getElementById 根據ID獲取一個標籤 document.getElementsByName 根據name屬性獲取標籤集合 document.getElementsByClassName 根據class屬性獲取標籤集合 document.getElementsByTagName 根據標籤名獲取標籤集合 b. 間接 tag = document.getElementById('i1') parentElement // 父節點標籤元素 children // 全部子標籤 firstElementChild // 第一個子標籤元素 lastElementChild // 最後一個子標籤元素 nextElementtSibling // 下一個兄弟標籤元素 previousElementSibling // 上一個兄弟標籤元素 2、操做標籤 a. innerText 獲取標籤中的文本內容 標籤.innerText 對標籤內部文本進行從新賦值 標籤.innerText = "" b. className tag.className => 直接總體作操做 tag.classList.add('樣式名') 添加指定樣式 tag.classList.remove('樣式名') 刪除指定樣式 PS： <div onclick='func();'>點我</div> <script> function func(){ } </script> c. checkbox 獲取值 checkbox對象.checked 設置值 checkbox對象.checked = true
Dom 找標籤 - 直接找 $('#id') $('.c1').siblings() 操做： innerText checkbox: checked className classList 事件： <div onclick='函數(123)'></div> <script> 代碼塊 </script> 定時器 setInterval('函數()', 4000) 其餘： alert() console.log()
onblur="Blur(); 當鼠標不在輸入框時,會進行的操做
獲取指定 id 以後標籤的值,使用.value 進行獲取 var val=tag.value; 當什麼都沒有輸入時,值爲 ""
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>搜索框請輸入關鍵字</title> <style> .c_keys{ width: 200px; height: 30px; } </style> </head> <body> <div> <input id="id1" type="text" class="c_keys" onfocus="Focus();" onblur="Blur();" value="請輸入關鍵字"/> </div> <script> function Focus(){ var tag=document.getElementById('id1'); var val=tag.value; if(val == "請輸入關鍵字"){ tag.value=""; } } function Blur(){ var tag=document.getElementById('id1'); var val=tag.value; if(val==""){ tag.value="請輸入關鍵字"; } } </script> </body> </html>
使用 .submit() 進行提交 function submitForm(){ document.getElementById('form1').submit(); }
使用 .addEventListener 對事件進行監聽 ('click',匿名函數) 表示點擊以後要進行的操做 var mydiv=document.getElementById('form1'); mydiv.addEventListener('click',function(){ console.log('aa'); },false)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非submit標籤提交表單實例</title> </head> <body> <form id="form1" action="http://www.baidu.com"> <input type="text" /> </form> <a onclick="submitForm();">A標籤提交</a> <script> function submitForm(){ document.getElementById('form1').submit(); } var mydiv=document.getElementById('form1'); mydiv.addEventListener('click',function(){ console.log('aa'); },false) </script> </body> </html>
使用 disabled 表示標籤不可用 <input type="text" disabled />
在標籤中能夠自定義屬性 此處定義的是 alex <a alex='123'>f2</a>
引入 jquery 文件 <script src="jquery-1.12.4.js"></script>
使用 $(dom對象) 後即爲 jquery 對象 $("#i1")
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <input type="text" /> <input type="text" disabled /> <input type="text" /> <div id='i10' class='c1'> <div> <a>asd</a> </div> <a alex='123'>f2</a> <a alex='456'>f2</a> <a>f3</a> <a>f4</a> </div> <div class='c1'> <a>f</a> </div> <div class='c1'> <div class='c2'> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $("#i1") </script> </body> </html>
td 標籤內部能夠使用 input 標籤 <td><input type="checkbox" /></td> 獲取 id 爲 tb的標籤,屬性爲 checkbox 的, 使用 prop 設置屬性爲 true prop 返回值爲 true 或 false,能夠用於判斷 $('#tb :checkbox').prop('checked',true);
循環時使用 .each( function(參數){ 代碼塊 } )
在使用 script 代碼時,使用的 this 對象是 dom 對象, 使用 $(this) 轉換爲 jquery 對象
三元運算 var v = 條件? 真值：假值; var v = $(this).prop('checked')?false:true;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全選" onclick="checkAll();" /> <input type="button" value="反選" onclick="reverseAll();" /> <input type="button" value="取消" onclick="cancleAll();"/> <table border="1"> <thead> <tr> <th>選項</th> <th>IP</th> <th>PORT</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll() { $('#tb :checkbox').prop('checked',true); } function cancleAll() { $('#tb :checkbox').prop('checked',false); } function reverseAll() { $(':checkbox').each(function(k){ // this,代指當前循環的每個元素 // Dom /* if(this.checked){ this.checked = false; }else{ this.checked = true; } */ /* if($(this).prop('checked')){ $(this).prop('checked', false); }else{ $(this).prop('checked', true); } */ // 三元運算var v = 條件? 真值：假值 var v = $(this).prop('checked')?false:true; $(this).prop('checked',v); }) } </script> </body> </html>
在 script 中 一行代碼實現菜單欄 $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
min-height: 50px; 設置最小高度
script 中 .header 表示 class 爲 header 的標籤 .click 表示點擊時,會進行調用的函數 $('.header').click(function(){ 代碼塊 }
.addClass('hide') 在 class 屬性中添加 hide 樣式 .removeClass('hide') 在 class 屬性中刪除 hide 樣式 $(this).next() 下一個 $(this).prev() 上一個 $(this).parent() 父 $(this).children() 孩子 $('#i1').siblings() 兄弟 $('#i1').find('#i1') 查找 #表示尋找 id
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ background-color: black; color: wheat; } .content{ min-height: 50px; } .hide{ display: none; } </style> </head> <body> <div style="height:400px;width: 200px;border: 1px solid #dddddd"> <div class="item"> <div class="header">標題一</div> <div id="i1" class="content hide">內容</div> </div> <div class="item"> <div class="header">標題二</div> <div class="content hide">內容</div> </div> <div class="item"> <div class="header">標題三</div> <div class="content hide">內容</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.header').click(function(){ // 當前點擊的標籤 $(this) // 獲取某個標籤的下一個標籤 // 獲取某個標籤的父標籤 // 獲取全部的兄弟標籤 // 添加樣式和移除樣式 // $('.i1').addClass('hide') // $('#i1').removeClass('hide') // var v = $("this + div"); // $("label + input") // console.log(v); // $("afsldkfja;skjdf;aksdjf") // 篩選器 /* $(this).next() 下一個 $(this).prev() 上一個 $(this).parent() 父 $(this).children() 孩子 $('#i1').siblings() 兄弟 $('#i1').find('#i1') 子子孫孫中查找 $('#i1').addClass(..) $('#i1').removeClass(..) */ // 鏈式編程 // $(...).click(function(){ // this.. // }) // $(this).next().removeClass('hide'); // $(this).parent().siblings().find('.content').addClass('hide') $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide') }) </script> </body> </html>
能夠進行添加和顯示編輯界面,編輯後界面無變化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .modal{ position: fixed; top: 50%; left: 50%; width: 500px; height: 400px; margin-left: -250px; margin-top: -250px; background-color: #eeeeee; z-index: 10; } .shadow{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.6; background-color: black; z-index: 9; } </style> </head> <body> <a onclick="addElement();">添加</a> <table border="1" id="tb"> <tr> <td target="hostname">1.1.1.11</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">編輯</a> | <a class="del">刪除</a> </td> </tr> <tr> <td target="hostname">1.1.1.12</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">編輯</a> | <a class="del">刪除</a> </td> </tr> <tr> <td target="hostname">1.1.1.13</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">編輯</a> | <a class="del">刪除</a> </td> </tr> <tr> <td target="hostname">1.1.1.14</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">編輯</a> | <a class="del">刪除</a> </td> </tr> </table> <div class="modal hide"> <div> <input name="hostname" type="text" /> <input name="port" type="text" /> <input name="ip" type="text" /> </div> <div> <input type="button" value="取消" onclick="cancelModal();" /> <input type="button" value="肯定" onclick="confirmModal();" /> </div> </div> <div class="shadow hide"></div> <script src="jquery-1.12.4.js"></script> <script> $('.del').click(function () { $(this).parent().parent().remove(); }); function confirmModal() { var tr = document.createElement('tr'); var td1 = document.createElement('td'); td1.innerHTML = "11.11.11.11"; var td2 = document.createElement('td'); td2.innerHTML = "8001"; $(tr).append(td1); $(tr).append(td2); $('#tb').append(tr); $(".modal,.shadow").addClass('hide'); // $('.modal input[type="text"]').each(function () { // // var temp = "<td>..." // // // // }) } function addElement() { $(".modal,.shadow").removeClass('hide'); } function cancelModal() { $(".modal,.shadow").addClass('hide'); $('.modal input[type="text"]').val(""); } $('.edit').click(function(){ $(".modal,.shadow").removeClass('hide'); // this var tds = $(this).parent().prevAll(); tds.each(function () { // 獲取td的target屬性值 var n = $(this).attr('target'); // 獲取td中的內容 var text = $(this).text(); var a1 = '.modal input[name="'; var a2 = '"]'; var temp = a1 + n + a2; $(temp).val(text); }); // var port = $(tds[0]).text(); // var host = $(tds[1]).text(); // $('.modal input[name="hostname"]').val(host); // $('.modal input[name="port"]').val(port); // 循環獲取tds中內容 // 獲取 <td>內容</td> 獲取中間的內容 // 賦值給input標籤中的value }); </script> </body> </html>
在 div 中使用 span 標籤 <div class="c1"> <p> <span id="i1">Hello</span> </p> <span>Hello Again</span> </div>
.toggleClass(class 內部的樣式名稱) 實現翻轉 使用 #i1 綁定 click 點擊事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } </style> </head> <body> <input type='checkbox' id='i2' /> <input id="i1" type="button" value="開關" /> <div class="c1 hide">asdfasdf</div> <script src="jquery-1.12.4.js"></script> <script> $('#i1').click(function(){ // if($('.c1').hasClass('hide')){ // $('.c1').removeClass('hide'); // }else{ // $('.c1').addClass('hide'); // } $('.c1').toggleClass('hide'); }) </script> </body> </html>
在 style 內設置樣式 cursor: pointer; 表示當鼠標移動到該區域時,變換爲小手 script 中添加 .attr('a'); 進行設置屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ height: 38px; background-color: #eeeeee; line-height: 38px; } .active{ background-color: brown; } .menu .menu-item{ float: left; border-right: 1px solid red; padding: 0 5px; cursor: pointer; } .content{ min-height: 100px; border: 1px solid #eeeeee; } </style> </head> <body> <div style="width: 700px;margin:0 auto"> <div class="menu"> <div class="menu-item active" a="1">菜單一</div> <div class="menu-item" a="2">菜單二</div> <div class="menu-item" a="3">菜單三</div> </div> <div class="content"> <div b="1">內容一</div> <div class="hide" b="2">內容二</div> <div class="hide" b="3">內容三</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.menu-item').click(function(){ $(this).addClass('active').siblings().removeClass('active'); var target = $(this).attr('a'); $('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide'); }); </script> </body> </html>
script 使用 .eq(值) 進行判斷是否相等 .index() 獲取索引值 $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ height: 38px; background-color: #eeeeee; line-height: 38px; } .active{ background-color: brown; } .menu .menu-item{ float: left; border-right: 1px solid red; padding: 0 5px; cursor: pointer; } .content{ min-height: 100px; border: 1px solid #eeeeee; } </style> </head> <body> <div style="width: 700px;margin:0 auto"> <div class="menu"> <div class="menu-item active" >菜單一</div> <div class="menu-item" >菜單二</div> <div class="menu-item" >菜單三</div> </div> <div class="content"> <div >內容一</div> <div class="hide" >內容二</div> <div class="hide">內容三</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.menu-item').click(function(){ $(this).addClass('active').siblings().removeClass('active'); $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide'); }); </script> </body> </html>
script 獲取值 .val()
$('#u1') 爲 jquery 對象, jquery 對象能夠使用 append 在後面添加元素
prepend 在前面添加元素 after 在後面另起一行添加元素
before 在最開始另起一行添加元素
remove 刪除元素
clone 複製元素
empty 移除全部元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="t1" type="text" /> <input id="a1" type="button" value="添加" /> <input id="a2" type="button" value="刪除" /> <input id="a3" type="button" value="複製" /> <ul id="u1"> <li>1</li> <li>2</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $('#a1').click(function () { var v = $('#t1').val(); var temp = "<li>" + v + "</li>"; $('#u1').append(temp); // $('#u1').prepend(temp); // $('#u1').after(temp) //$('#u1').before(temp) }); $('#a2').click(function () { var index = $('#t1').val(); $('#u1 li').eq(index).remove(); //$('#u1 li').eq(index).empty(); }); $('#a3').click(function () { var index = $('#t1').val(); var v = $('#u1 li').eq(index).clone(); $('#u1').append(v); // $('#u1 li').eq(index).remove(); // $('#u1 li').eq(index).empty(); }) </script> </body> </html>
設置 css 樣式 $(tag).css('屬性名','值'); $(tag).css('fontSize',fontSize + "px"); 中止執行 clearInterval(obj);
點贊 示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ padding: 50px; border: 1px solid #dddddd; } .item{ position: relative; width: 30px; } </style> </head> <body> <div class="container"> <div class="item"> <span>贊</span> </div> </div> <div class="container"> <div class="item"> <span>贊</span> </div> </div> <div class="container"> <div class="item"> <span>贊</span> </div> </div> <div class="container"> <div class="item"> <span>贊</span> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.item').click(function () { AddFavor(this); }); function AddFavor(self) { // DOM對象 var fontSize = 15; var top = 0; var right = 0; var opacity = 1; var tag = document.createElement('span'); $(tag).text('+1'); $(tag).css('color','green'); $(tag).css('position','absolute'); $(tag).css('fontSize',fontSize + "px"); $(tag).css('right',right + "px"); $(tag).css('top',top + 'px'); $(tag).css('opacity',opacity); $(self).append(tag); var obj = setInterval(function () { fontSize = fontSize + 10; top = top - 10; right = right - 10; opacity = opacity - 0.1; $(tag).css('fontSize',fontSize + "px"); $(tag).css('right',right + "px"); $(tag).css('top',top + 'px'); $(tag).css('opacity',opacity); if(opacity < 0){ clearInterval(obj); $(tag).remove(); } }, 40); } </script> </body> </html>
overflow 設置頁面內部滾動條 overflow: auto;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1"></div> <div style="height: 100px;width:100px;overflow: auto"> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> </div> <div id="i2"></div> <div style="height: 1000px;"></div> <script src="jquery-1.12.4.js"></script> </body> </html>
實現頁面可移動框 示例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> <div id="title" style="background-color: black;height: 40px;"></div> <div style="height: 300px;"></div> </div> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> $(function(){ $('#title').mouseover(function(){ $(this).css('cursor','move'); }); $("#title").mousedown(function(e){ //console.log($(this).offset()); var _event = e || window.event; var ord_x = _event.clientX; var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left; var parent_top = $(this).parent().offset().top; $('#title').on('mousemove', function(e){ var _new_event = e || window.event; var new_x = _new_event.clientX; var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x); var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px'); $(this).parent().css('top',y+'px'); }) }); $("#title").mouseup(function(){ $("#title").off('mousemove'); }); }) </script> </body> </html>
.mouseover(function(){}) 當鼠標指針在上面時,要進行的操做 .mousedown(function(e){}) 當鼠標放下時,要進行的操做 .clientX 返回水平 x 座標 .clientY 返回水平 y 座標 .parent().offset().left 對於當前位置所進行的偏移,左偏 .parent().offset().top; 頂部
獲取 id 爲 t1 的標籤的值 <input id="t1" type="text" /> var v = $('#t1').val();
.delegate 進行事件委託 $('標籤名').delegate('標籤','click',function () { 代碼塊 })
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="t1" type="text" /> <input id="a1" type="button" value="添加" /> <ul id="u1"> <li>1</li> <li>2</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $('#a1').click(function () { var v = $('#t1').val(); var temp = "<li>" + v + "</li>"; $('#u1').append(temp); }); // $('ul li').click(function () { // var v = $(this).text(); // alert(v); // }) // $('ul li').bind('click',function () { // var v = $(this).text(); // alert(v); // }) // $('ul li').on('click', function () { // var v = $(this).text(); // alert(v); // }) $('ul').delegate('li','click',function () { var v = $(this).text(); alert(v); }) </script> </body> </html>
在 script 代碼函數中使用 return false 會終止,不進行接下來的操做 return true 會繼續進行跳轉
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a onclick="return ClickOn()" href="http://www.oldboyedu.com">走你1</a> <a id="i1" href="http://www.oldboyedu.com">走你2</a> <script src="jquery-1.12.4.js"></script> <script> function ClickOn() { alert(123); return true; } $('#i1').click(function () { alert(456); return false; }) </script> </body> </html>
點擊走你2 , 不會進行跳轉網頁javascript
知識點總結 switch (){ case:ddddd: console.log(ddd); break; case:ddddd: console.log(ddd); break; default: 語句; } JavaScript 函數 普通函數 function func(arg){ } 匿名函數 沒有名字的函數叫匿名函數 setIntervar(function(){ 函數體; }) 自執行函數:args形參，1爲實參 (function(args){ console.log(args); )(1) 序列化： JSON.stringify(li) 將對象轉化成爲字符牀 JSON.parse(s) 將字符串轉成對象類型 轉義 Python eval(表達式) exec(執行代碼) 沒有返回值 javaScript: eval 是Python的集合，即：支持表達式和執行代碼兩塊 時間模塊 var d = new Date() d.setMinutes()+4 /* 設置時間*/ d.getetMinutes() /* 獲取時間*/ 做用域 1、其餘語言以{代碼塊}做爲做用域 2、Python裏邊的做用域以{函數}爲單位 3、JavaScript的做用域跟Python同樣，以函數爲單位 變量向上查找 xo=1;/*標記1*/ function func(){ var xo=2;/*標記2*/ function inner(){ var xo = 3;/*標記3*/ console.log(xo) } } 若是標記3的xo有定義，則輸出3，若是標記3沒定義，標記2有定義，則輸出2，同理，若是都沒有定義則報錯。 JavaScript面向對象 function foo(name){ this.name = name } var obj=new foo('Guo'); a、this關鍵字代指對象 b、new建立一個對象 DOM學習： innerText： document.getElementById('i1).innerText 獲取文本 innerHTML： document.getElementById('i1).innerHTML 獲取所有內容 value input 獲取input的值 select 獲取select選中的值 textarea 搜索框的示例： function Focus(){ var tag=document.getElementById('id1'); var val=tag.value; if(val == "請輸入關鍵字"){ tag.value=""; } } function Blur(){ var tag=document.getElementById('id1'); var val=tag.value; if(val==""){ tag.value="請輸入關鍵字"; } } 函數方法命名都是駝峯命名，如className,第一個單詞首字母小寫，以後其餘單詞首字母大寫 var obj=document.getElementById('id1').classList CSS樣式操做 var obj_style=obj.style. 屬性操做： getAttribute 獲取屬性值 setAttribute 設置屬性值 obj.setAttribute('屬性名','屬性值') obj.setAttribute('屬性名','屬性值') 建立標籤 tag.createElement('標籤名稱') a.字符串形式 b.對象的方式 tag.createElement('dvi') #建立div標籤 提交表單： <script> function submitForm(){ document.getElementById('form1').submit() } </script> 其餘操做 confirm:確認框，返回True或者False location.href獲取當前頁面的url location.href=""#設置當前url location.href=reload #刷新頁面 si=setInterval(function(){},5000) clearInterval(si) si=setTimeout(function(){},5000) clearTimeout(si) 事件 onclick 點擊 onblur 光標移開 onfocus 光標插進去 綁定事件兩種方式 a.直接標籤綁定 b.先獲取Dom對象，而後進行綁定 document.getElementById('xx').onclick document.getElementById('xx').onfocus this 當前觸發事件的標籤 a.事件的第一種綁定方式 <input type="button" onclick="clickOn(this)"> function clickOn(self){ //self 當前點擊的標籤 } b.事件的第二種綁定方式 <input id="i1" type=button> document.getElementById('i1').onclick=function(){ //this代指當前點擊的標籤 } c.事件的第三種綁定方式 var mydiv=document.getElementById('form1') mydiv.addEventListener('click',function(){ console.log('aa') },false) #false:冒泡模型 #true:捕捉模型，默認不寫就是冒泡模型 //做用域的示例 var myTrs =document.getElementByTagName('tr'); var len=myTrs.length; for(var i=0;i<len;i++){ myTrs[i].onmouseover=function(){ #錯誤寫法 myTrs[i].style.backgoundColor='red' this.style.backgoundColor='red' } } 做用域-詞法分析 分析完以後，再賦值。
jQuery http://jquery.cuishifeng.cn/ 轉換： jquery對象[0] => Dom對象 Dom對象 => $(Dom對象) 查找元素 jQuery： 選擇器，直接找到某個或者某類標籤 1. id $('#id') 2. class <div class='c1'></div> $(".c1") 3. 標籤 <div id='i10' class='c1'> <a>f</a> <a>f</a> </div> <div class='c1'> <a>f</a> </div> <div class='c1'> <div class='c2'> </div> </div> $('a') 4. 組合a <div id='i10' class='c1'> <a>f</a> <a>f</a> </div> <div class='c1'> <a>f</a> </div> <div class='c1'> <div class='c2'> </div> </div> $('a') $('.c2') $('a,.c2,#i10') 5. 層級 $('#i10 a') 子子孫孫 $('#i10>a') 兒子 6. 基本 :first :last :eq() 7. 屬性 $('[alex]') 具備alex屬性的全部標籤 $('[alex="123"]') alex屬性等於123的標籤 <input type='text'/> <input type='text'/> <input type='file'/> <input type='password'/> $("input[type='text']") $(':text') 實例： 多選，反選，全選 - 選擇權 - $('#tb:checkbox').prop('checked'); 獲取值 $('#tb:checkbox').prop('checked', true); 設置值 - jQuery方法內置循環： $('#tb:checkbox').xxxx - $('#tb:checkbox').each(function(k){ // k當前索引 // this，DOM，當前循環的元素 $(this) }) - var v = 條件 ? 真值 : 假值 篩選 $('#i1').next() $('#i1').nextAll() $('#i1').nextUntil('#ii1') <div> <a>asdf</a> <a>asdf</a> <a id='i1'>asdf</a> <a>asdf</a> <a id='ii1'>asdf</a> <a>asdf</a> </div> $('#i1').prev() $('#i1').prevAll() $('#i1').prevUntil('#ii1') $('#i1').parent() $('#i1').parents() $('#i1').parentsUntil() $('#i1').children() $('#i1').siblings() $('#i1').find() $('li:eq(1)') $('li').eq(1) first() last() hasClass(class) 文本操做： $(..).text() # 獲取文本內容 $(..).text(「<a>1</a>」) # 設置文本內容 $(..).html() $(..).html("<a>1</a>") $(..).val() $(..).val(..) 樣式操做： addClass removeClass toggleClass 屬性操做： # 專門用於作自定義屬性 $(..).attr('n') $(..).attr('n','v') $(..).removeAttr('n') <input type='checkbox' id='i1' /> # 專門用於chekbox,radio $(..).prop('checked') $(..).prop('checked', true) PS: index 獲取索引位置 文檔處理： append prepend after before remove empty clone css處理 $('t1').css('樣式名稱', '樣式值') 點贊： - $('t1').append() - $('t1').remove() - setInterval - 透明度 1 》 0 - position - 字體大小，位置 位置： $(window).scrollTop() 獲取 $(window).scrollTop(0) 設置 scrollLeft([val]) offset().left 指定標籤在html中的座標 offset().top 指定標籤在html中的座標 position() 指定標籤相對父標籤(relative)標籤的座標 <div style='relative'> <div> <div id='i1' style='position:absolute;height:80px;border:1px'></div> </div> </div> $('i1').height() # 獲取標籤的高度 純高度 $('i1').innerHeight() # 獲取邊框 + 純高度 + ？ $('i1').outerHeight() # 獲取邊框 + 純高度 + ？ $('i1').outerHeight(true) # 獲取邊框 + 純高度 + ？ # 純高度，邊框，外邊距，內邊距 事件 DOM： 三種綁定方式 jQuery： $('.c1').click() $('.c1')..... $('.c1').bind('click',function(){ }) $('.c1').unbind('click',function(){ }) ******************* $('.c').delegate('a', 'click', function(){ }) $('.c').undelegate('a', 'click', function(){ }) $('.c1').on('click', function(){ }) $('.c1').off('click', function(){ }) 阻止事件發生 return false # 當頁面框架加載完成以後，自動執行 $(function(){ $(...) }) jQuery擴展： - $.extend $.方法 - $.fn.extend $(..).方法 (function(){ var status = 1; // 封裝變量 })(jQuery)
更多實例: HTML 實例 https://www.runoob.com/html/html-examples.html CSS實例 https://www.runoob.com/css/css-examples.html JavaScript 實例 https://www.runoob.com/js/js-examples.html jQuery 實例 https://www.runoob.com/jquery/jquery-examples.html
2020-08-08css
<a href="網址">內容</a> 跳轉到該地址 <a href="http://www.oldboyedu.com">老男孩</a>
<p>內容</p> 使用 p 段落標籤,表示段落,能夠添加 br 標籤,進行換行
<p>12asdfasdfasdfasdfa<br />sdfasdfasdfasdf3</p>
<p>123</p>
hn 系列標籤 <h1> 內容 </h1> <h1>Alex</h1> <h2>Alex</h2> <h3>Alex</h3> <h4>Alex</h4> <h5>Alex</h5> <h6>eric</h6>
<span>內容</span> span 標籤,白板,行內標籤
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<div> 內容,代碼塊 </div> div 最經常使用的白板標籤,塊級標籤 <div>1</div> <div>2</div> <div>3</div>
<input type="text" name="須要使用的姓名" /> input 標籤,用於用戶輸入姓名,密碼,按鈕,文件上傳等 <input type="text" name="user" /> type 能夠具備 text password button submit
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://192.168.16.35:8888/index" method="POST"> <input type="text" name="user" /> <input type="text" name="email"/> <input type="password" name="pwd"/> <!--{'user': '用戶輸入的用戶','email': 'xx', 'pwd': 'xx' }--> <input type="button" value="登陸1"/> <input type="submit" value="登陸2"/> </form> <br/> <form> <input type="text" /> <input type="password" /> <input type="button" value="登陸1"/> <input type="submit" value="登陸2"/> </form> </body> </html>
多選框 使用 select 和 option 進行建立,selected 爲默認選擇 multiple 屬性爲 multiple 表示,進行多選 <select name="city" size="10" multiple="multiple"> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">南京</option> <option value="4">成都</option> </select>
<textarea> 內容 </textarea> 多行文本框,能夠輸入多行文本 <textarea name="meno" >asdfasdf</textarea>
input 使用 radio 屬性,實現單選框(name 值要相同)
checked="checked" 表示進行勾選
男：<input type="radio" name="gender" value="1" /> 女：<input type="radio" name="gender" value="2" checked="checked"/> Alex：<input type="radio" name="gender" value="3"/>
input 使用 checkbox 屬性,實現多選框(name 值要相同) checked="checked" 表示進行勾選
籃球：<input type="checkbox" name="favor" value="1" /> 足球：<input type="checkbox" name="favor" value="2" checked="checked" /> 皮球：<input type="checkbox" name="favor" value="3" /> 檯球：<input type="checkbox" name="favor" value="4" checked="checked"/> 網球：<input type="checkbox" name="favor" value="5" />
上傳文件使用 input 標籤的 file 屬性 注:在 form 中 添加 enctype="multipart/form-data" <input type="file" name="fname"/> <form enctype="multipart/form-data">
重置 使用 input 標籤的 type="reset" 屬性 <input type="reset" value="重置" />
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form enctype="multipart/form-data"> <div> <textarea name="meno" >asdfasdf</textarea> <select name="city" size="10" multiple="multiple"> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">南京</option> <option value="4">成都</option> </select> <input type="text" name="user" /> <p>請選擇性別：</p> 男：<input type="radio" name="gender" value="1" /> 女：<input type="radio" name="gender" value="2" checked="checked"/> Alex：<input type="radio" name="gender" value="3"/> <p>愛好</p> 籃球：<input type="checkbox" name="favor" value="1" /> 足球：<input type="checkbox" name="favor" value="2" checked="checked" /> 皮球：<input type="checkbox" name="favor" value="3" /> 檯球：<input type="checkbox" name="favor" value="4" checked="checked"/> 網球：<input type="checkbox" name="favor" value="5" /> <p>技能</p> 撩妹：<input type="checkbox" name="skill" checked="checked" /> 寫代碼：<input type="checkbox" name="skill"/> <p>上傳文件</p> <input type="file" name="fname"/> </div> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </form> </body> </html>
a 標籤根據 id 進行跳轉 # id 名稱 <a href="#i1">第一章</a> <div id="i1" style="height:600px;">第一章的內容</div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <a href="#i4">第四章</a> <div id="i1" style="height:600px;">第一章的內容</div> <div id="i2" style="height:600px;">第二章的內容</div> <div id="i3" style="height:600px;">第三章的內容</div> <div id="i4" style="height:600px;">第四章的內容</div> </body> </html>
在 a 標籤使用 img 圖片進行跳轉 img 標籤中 src 指定文件位置,title 爲鼠標停留在上面顯示的字段,style 表示應用了樣式,alt 爲不能正常顯示時,會出現的內容 <a href="http://www.oldboyedu.com"> <img src="1.jpg" title="大美女" style="height: 200px;width: 200px;" alt="美女"> </a>
<ul><li>內容</li></ul> ul 建立無序列表 <ul> <li>asdf</li> <li>asdf</li> <li>asdf</li> <li>asdf</li> </ul>
ol 建立有序列表 此處的 ul 和 ol 均可以進行變換樣式 <ol> <li>asdf</li> <li>asdf</li> <li>asdf</li> <li>asdf</li> </ol>
使用 dl dt dd 實現相似於菜單界面(分級) <dl> <dt>ttt</dt> <dd>ddd</dd> <dd>ddd</dd> <dd>ddd</dd> <dt>ttt</dt> <dd>ddd</dd> <dd>ddd</dd> <dd>ddd</dd> </dl>
table 標籤,內部具備 th頭 和 td 單元格,tr 換行 在 td 中能夠使用 a 標籤,進行跳轉
a 內的 # 表示當前頁面
<table border="1"> <tr> <td>主機名</td> <td>端口</td> <td>操做</td> </tr> <tr> <td>1.1.1.1</td> <td>80</td> <td> <a href="s2.html">查看詳細</a> <a href="#">修改</a> </td> </tr> <tr> <td>1.1.1.1</td> <td>80</td> <td>第二行，第3列</td> </tr> </table>
在 table 中使用 thead 和 tbody 並利用 colspan 和 rowspan 進行單元格合併
<table border="1"> <thead> <tr> <th>表頭1</th> <th>表頭1</th> <th>表頭1</th> <th>表頭1</th> </tr> </thead> <tbody> <tr> <td>1</td> <td colspan="3">1</td> </tr> <tr> <td rowspan="2">1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table>
fieldset 登陸外的包裹的線 使用 for 保證點擊內容跳轉到對應的 id 名稱處
<fieldset> <legend>登陸</legend> <label for="username">用戶名：</label> <input id="username" type="text" name="user" /> <br /> <label for="pwd">密碼：</label> <input id="pwd" type="text" name="user" /> </fieldset>
head 內的 styly 標籤 設置樣式 .名稱 對應 class 爲對應名稱的屬性 #名稱 對應 id 爲對應名稱的屬性 能夠多個 class 一塊兒設置,使用 .c1[屬性='名稱']{ 樣式 } 也能夠進行設置
.c1 div 表示爲 class爲 c1 的下一個 div 標籤設置樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* #i1{ background-color: #2459a2; height: 48px; } #i2{ background-color: #2459a2; height: 48px; } #i3{ background-color: #2459a2; height: 48px; } .c1{ background-color: #2459a2; height: 10px; } */ /*#c2{*/ /*background-color: black;*/ /*color: white;*/ /*}*/ /*.c1 div{*/ /*background-color: black;*/ /*color: white;*/ /*}*/ .i1,.i2,.i3{ background-color: black; color: white; } .c1[n='alex']{ width:100px; height:200px; } </style> </head> <body> <div class="i1">ff</div> <div class="i2">ff</div> <div class="i3">2</div> <input class="c1" type="text" n="alex"> <input class="c1" type="password"> </body> </html>
使用 link 標籤鏈接外部 css 樣式 <link rel="stylesheet" href="路徑/文件名.css" /> <link rel="stylesheet" href="css/commons.css" />
commons.css 內容 .c2{ font-size: 58px; color: black; } .c1{ background-color: red; color: white; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/commons.css" /> </head> <body> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> <div class="c1 c2" style="color: pink">asdf</div> </body> </html>
div 標籤在 style 屬性中 設置邊框 border style="border: 1px solid red;"
style="height: 48px; width:80%; border: 1px solid red; font-size: 16px; text-align: center; line-height: 48px; font-weight: bold; " 屬性 注: height 設置高度 width 寬度 border 邊框 font-size 字體大小 text-align 文本位置 line-height 高度 font-weight 粗體
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="border: 1px solid red;"> asdfasdf </div> <div style="height: 48px; width:80%; border: 1px solid red; font-size: 16px; text-align: center; line-height: 48px; font-weight: bold; ">asdf</div> </body> </html>
style 使用 float 屬性 width 寬度,width:20%
float 懸浮,float:left <body> <div style="width: 20%;background-color: red;float: left">1</div> <div style="width: 20%;background-color: black;float: left">2</div> </body>
設置 class 爲 pg-header 的標籤樣式 <style> .pg-header{ 樣式 } </style>
styly 屬性 width 寬度,margin 設置外邊距 margin: 0 auto; float 的兩種方式,能夠設置在 div 中 float: left; float: right; style="clear: both" 在 float 下部編寫內容
設置寬度 width ,border 設置邊框 , float 頁面佈局 style="width: 300px;border: 1px solid red;" style="width: 96px;height:30px;border: 1px solid green;float: left;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ height: 38px; background-color: #dddddd; line-height: 38px; } </style> </head> <body style="margin: 0"> <div class="pg-header"> <div style="width: 980px;margin: 0 auto;"> <div style="float: left;">收藏本站</div> <div style="float: right;"> <a>登陸</a> <a>註冊</a> </div> <div style="clear: both"></div> </div> </div> <div> <div style="width: 980px;margin: 0 auto;"> <div style="float: left"> Logo </div> <div style="float: right"> <div style="height: 50px;width: 100px;background-color: #dddddd"></div> </div> <div style="clear: both"></div> </div> </div> <div style="background-color: red;"> <div style="width: 980px;margin: 0 auto;"> asdfsdf </div> </div> <div style="width: 300px;border: 1px solid red;"> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> <div style="clear: both;"></div> </div> </body> </html>
style 樣式設置 display display 能夠設置 inline , block , inline-block
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="background-color: red;display: inline;">asdf</div> <span style="background-color: red;display: block;">asdf</span> <span style="display:inline-block;background-color: red;height: 50px;width: 70px;">Alex</span> <a style="background-color: red;">Eric</a> </body> </html>
知識點總結 HTML 1、一套規則，瀏覽器認識的規則。 2、開發者： 學習Html規則 開發後臺程序： - 寫Html文件（充當模板的做用） ****** - 數據庫獲取數據，而後替換到html文件的指定位置（Web框架） 3、本地測試 - 找到文件路徑，直接瀏覽器打開 - pycharm打開測試 4、編寫Html文件 - doctype對應關係 - html標籤，標籤內部能夠寫屬性 ====> 只能有一個 - 註釋： <!-- 註釋的內容 --> 5、標籤分類 - 自閉合標籤 <meta charset="UTF-8"> - 主動閉合標籤 title>老男孩</title> 6、 head標籤中 - <meta -> 編碼，跳轉，刷新，關鍵字，描述，IE兼容 <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" /> - title標籤 7、body標籤 - 圖標， > < - p標籤，段落 - br，換行 ======== 小總結 ===== 全部標籤分爲： 塊級標籤： div（白板），H系列（加大加粗），p標籤（段落和段落之間有間距） 行內標籤： span（白板） 標籤之間能夠嵌套 標籤存在的意義，css操做，js操做 ps:chorme審查元素的使用 - 定位 - 查看樣式 - h系列 - div - span - input系列 + form標籤 input type='text' - name屬性，value="值" input type='password' - name屬性，value="值" input type='submit' - value='提交' 提交按鈕，表單 input type='button' - value='登陸' 按鈕 input type='radio' - 單選框 value，checked="checked"，name屬性（name相同則互斥） input type='checkbox' - 複選框 value, checked="checked"，name屬性（批量獲取數據） input type='file' - 依賴form表單的一個屬性 enctype="multipart/form-data" input type='rest' - 重置 <textarea >默認值</textarea> - name屬性 select標籤 - name,內部option value, 提交到後臺，size，multiple - a標籤 - 跳轉 - 錨 href='#某個標籤的ID' 標籤的ID不容許重複 - img src alt title - 列表 ul li ol li dl dt dd - 表格 table thead tr th tbody tr td colspan = '' rowspan = '' - label 用於點擊文件，使得關聯的標籤獲取光標 <label for="username">用戶名：</label> <input id="username" type="text" name="user" /> - fieldset legend - 20個標籤 CSS 在標籤上設置style屬性： background-color: #2459a2; height: 48px; ... 編寫css樣式： 1. 標籤的style屬性 2. 寫在head裏面 style標籤中寫樣式 - id選擇區 #i1{ background-color: #2459a2; height: 48px; } - class選擇器 ****** .名稱{ ... } <標籤 class='名稱'> </標籤> - 標籤選擇器 div{ ... } 全部div設置上此樣式 - 層級選擇器（空格） ****** .c1 .c2 div{ } - 組合選擇器（逗號） ****** #c1,.c2,div{ } - 屬性選擇器 ****** 對選擇到的標籤再經過屬性再進行一次篩選 .c1[n='alex']{ width:100px; height:200px; } PS: - 優先級，標籤上style優先，編寫順序，就近原則 2.5 css樣式也能夠寫在單獨文件中 <link rel="stylesheet" href="commons.css" /> 3、註釋 /* */ 4、邊框 - 寬度，樣式，顏色 (border: 4px dotted red;) - border-left 5、 height， 高度 百分比 width， 寬度 像素，百分比 text-align:ceter, 水平方向居中 line-height，垂直方向根據標籤高度 color、 字體顏色 font-size、 字體大小 font-weight 字體加粗 6、float 讓標籤浪起來，塊級標籤也能夠堆疊 老子管不住： <div style="clear: both;"></div> 7、display display: none; -- 讓標籤消失 display: inline; display: block; display: inline-block; 具備inline,默認本身有多少佔多少 具備block，能夠設置沒法設置高度，寬度，padding margin ****** 行內標籤：沒法設置高度，寬度，padding margin 塊級標籤：設置高度，寬度，padding margin 8、padding margin(0,auto)
a 標籤內部使用圖片,設置樣式 <a href="網址"> <img src="圖片路徑/圖片名.jpg" style="width:200px;height:300px;"> </a>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img{ border: 0; } </style> </head> <body> <a href="http://www.oldboyedu.com" >asdf</a> <a href="http://www.oldboyedu.com"> <img src="1.jpg" style="width: 200px;height: 300px;"> </a> </body> </html>
返回頂部
function GoTop(){ document.documentElement.scrollTop = 0; } 使用 document.documentElement.scrollTop = 0;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div onclick="GoTop();" style="width: 50px;height: 50px;background-color: black;color: white; position: fixed; bottom:20px; right: 20px; ">返回頂部</div> <div style="height: 5000px;background-color: #dddddd;"> asdfasdf </div> <script> function GoTop(){ document.documentElement.scrollTop = 0; } </script> </body> </html>
style 標籤內部使用 position: fixed; 固定位置 margin-top: 48px;與上部模塊之間的距離
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ height: 48px; background-color: black; color: #dddddd; position: fixed; top:0; right: 0; left: 0; } .pg-body{ background-color: #dddddd; height: 5000px; margin-top: 48px; } </style> </head> <body> <div class="pg-header">頭部</div> <div class="pg-body">內容</div> </body> </html>
position 使用絕對定位 position: absolute;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 50px;height: 50px;background-color: black;position: absolute;right: 0;bottom: 0;">asdf</div> <div style="height: 5000px;background-color: #dddddd;"> asdfasdf </div> </body> </html>
使用 div 嵌套使用 position 外層使用 relative,內部使用 absolute <div style="position: relative;......."> <div style="position: absolute;......."></div> </div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;"> <div style="position: absolute;left:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div> </div> <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;"> <div style="position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div> </div> <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;"> <div style="position: absolute;right:0;top:0;width: 50px;height: 50px;background-color: black;"></div> </div> </body> </html>
style 能夠設置屬性 style="display:none;z-index:10; position: fixed;top: 50%;left:50%; margin-left: -250px;margin-top: -200px; background-color:white;height: 400px;width:500px; style="display:none;z-index:9; position: fixed;background-color: black; top:0; bottom: 0; right: 0; left: 0; opacity: 0.5; "
overflow 的兩種屬性的區別 auto 會加入滾動條 overflow: auto overflow: hidden
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 200px;width: 300px;overflow: auto"> <img src="1.jpg"> </div> <div style="height: 200px;width: 300px;overflow: hidden"> <img src="1.jpg"> </div> </body> </html>
使用 position: fixed 固定頭部 設置高度 line-height: 48px; 設置距離上部距離 margin-top: 50px; 設置塊級元素在同一行顯示 display: inline-block; 設置鼠標碰到時,發生的變化 :hover .pg-header .menu:hover{ background-color: blue; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ position: fixed; right: 0; left: 0; top: 0; height: 48px; background-color: #2459a2; line-height: 48px; } .pg-body{ margin-top: 50px; } .w{ width: 980px; margin: 0 auto; } .pg-header .menu{ display: inline-block; padding: 0 10px 0 10px; color: white; } /*當鼠標移動到當前標籤上時，如下css屬性才生效*/ .pg-header .menu:hover{ background-color: blue; } </style> </head> <body> <div class="pg-header"> <div class="w"> <a class="logo">LOGO</a> <a class="menu">所有</a> <a class="menu">42區</a> <a class="menu">段子</a> <a class="menu">1024</a> </div> </div> <div class="pg-body"> <div class="w">a</div> </div> </body> </html>
style 樣式 background-image: url(icon_18_118.png); 設置圖片的 url , 能夠爲本地圖片 background-repeat 設置是否重複背景圖像
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 100px;"></div> <div style="background-image: url(icon_18_118.png);background-repeat:no-repeat;height: 20px;width:20px;border: 1px solid red;"></div> </body> </html>
能夠爲不一樣的標籤設置相同的 class 屬性,可是 id 必須不一樣
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <input class="c1" type="radio" name="gender" value="1" /> <input type="radio" name="gender" value="2" /> </div> </body> </html>
輸入框嵌入圖片(注:圖片目前和輸入的內容會重疊)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 35px;width: 400px;position: relative;"> <input type="text" style="height: 35px;width: 400px; margin-right: 20px;" /> <span style="position:absolute;right:0;top:10px;background-image: url(i_name.jpg);height: 16px;width: 16px;display: inline-block; "></span> </div> </body> </html>
在標籤中使用 onclick=函數名(); 能夠進行調用該函數 onclick="GetData(); 使用 document.getElementById('id名稱') 能夠獲取該數據 document.getElementById('user') function GetData(){ var i = document.getElementById('user'); alert(i.value); } 使用 .value 獲取值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="user" > <input type="button" onclick="GetData();" value="點我" /> <script> function GetData(){ var i = document.getElementById('user'); alert(i.value); } </script> </body> </html>
使用外部 js 文件 <script src="文件名.js"></script> <script src="commons.js"></script>
能夠添加 type="text/javascript" 進行聲明 script 語句 <script type="text/javascript"> //javascript代碼 </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="commons.js"></script> <script type="text/javascript"> //javascript代碼 alert(123); </script> </head> <body> </body> </html>
聲明全局變量 age = "18"; 轉換爲 int 類型使用 parseInt(變量); i = parseInt(age); 定義局部變量 var name = 'eric'
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>sadf</h1> <script> /* name = 'alex'; function func(){ var name = 'eric' }*/ age = "18"; i = parseInt(age); </script> </body> </html>
setInterval 設置定時器 setInterval("函數名();",毫秒); 函數定義 function 函數名(參數){ 代碼塊; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> function f1(){ console.log(1); } // 建立一個定時器 //setInterval("alert(123);", 5000); setInterval("f1();", 1000); </script> </body> </html>
使用 function 定義函數 func 函數名稱 var 定義局部變量,須要注意變量的做用域 document.getElementById 經過指定的 id 名稱進行獲取 .innerText 獲取文本內容 .charAt(0) 獲取第一個字符 content.substring(1,content.length) 獲取第二個字符到最後 使用 + 號進行字符串的拼接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1">歡迎老男孩蒞臨指導</div> <script> function func(){ // 根據ID獲取指定標籤的內容,定於局部變量接受 var tag = document.getElementById('i1'); // 獲取標籤內部的內容 var content = tag.innerText; var f = content.charAt(0); var l = content.substring(1,content.length); var new_content = l + f; tag.innerText = new_content; } setInterval('func()', 500); </script> </body> </html>
div 內部嵌套 div
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <div></div> <div> c1 </div> </div> <div> <div></div> <div id="i1"> c2 </div> </div> <div> <div></div> <div> c3 </div> </div> </body> </html>
position: fixed; 固定位置 opacity: 0.6; 透明度 z-index: 9; 顯示的優先級 margin-left: -250px;距離左面距離 margin-top: -200px;距離頂部距離
添加按鈕綁定 js 函數 <input type="button" value="功能" onclick="函數名();" /> <input type="button" value="添加" onclick="ShowModel();" />
獲取到指定的 id 以後,使用 classList 獲取 class 列表, 刪除 class 屬性使用 remove 添加 class 屬性使用 add document.getElementById('i1').classList.remove('hide'); document.getElementById('i1').classList.add('hide');
多選框選中 使用 checked 屬性 true 表示選中,false 表示沒有選中 checkbox.checked = true; checkbox.checked = false;
for 循環 for(var i=0;i<數組對象.length;i++){ // 循環 代碼塊 }
實現多選反選,主要是依靠 checked 屬性(選中爲true) if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .c1{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; } .c2{ width: 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; z-index: 10; } </style> </head> <body style="margin: 0;"> <div> <input type="button" value="添加" onclick="ShowModel();" /> <input type="button" value="全選" onclick="ChooseAll();" /> <input type="button" value="取消" onclick="CancleAll();" /> <input type="button" value="反選" onclick="ReverseAll();" /> <table> <thead> <tr> <th>選擇</th> <th>主機名</th> <th>端口</th> </tr> </thead> <tbody id="tb"> <tr> <td> <input type="checkbox" /> </td> <td>1.1.1.1</td> <td>190</td> </tr> <tr> <td><input type="checkbox"f id="test" /></td> <td>1.1.1.2</td> <td>192</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.3</td> <td>193</td> </tr> </tbody> </table> </div> <!-- 遮罩層開始 --> <div id="i1" class="c1 hide"></div> <!-- 遮罩層結束 --> <!-- 彈出框開始 --> <div id="i2" class="c2 hide"> <p><input type="text" /></p> <p><input type="text" /></p> <p> <input type="button" value="取消" onclick="HideModel();"/> <input type="button" value="肯定"/> </p> </div> <!-- 彈出框結束 --> <script> function ShowModel(){ document.getElementById('i1').classList.remove('hide'); document.getElementById('i2').classList.remove('hide'); } function HideModel(){ document.getElementById('i1').classList.add('hide'); document.getElementById('i2').classList.add('hide'); } function ChooseAll(){ var tbody = document.getElementById('tb'); // 獲取全部的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循環全部的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = true; } } function CancleAll(){ var tbody = document.getElementById('tb'); // 獲取全部的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循環全部的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked = false; } } function ReverseAll(){ var tbody = document.getElementById('tb'); // 獲取全部的tr var tr_list = tbody.children; for(var i=0;i<tr_list.length;i++){ // 循環全部的tr，current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}} </script> </body> </html>
在標籤中綁定事件能夠添加參數 <div id='i1' class="header" onclick="ChangeMenu('i1');">菜單1</div> function ChangeMenu(nid){ 代碼塊 }
此處,使用nid接收傳遞過來的 i1 值
實現菜單欄
.parentElement 父節點 .children 孩子節點 .nextElementSibling 下一個元素節點的兄弟節點 var item_list = current_header.parentElement.parentElement.children; 添加樣式能夠使用索引,指定第幾個孩子進行添加 class 樣式 current_item.children[1].classList.add('hide');
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .item .header{ height: 35px; background-color: #2459a2; color: white; line-height: 35px; } </style> </head> <body> <div style="height: 48px"></div> <div style="width: 300px"> <div class="item"> <div id='i1' class="header" onclick="ChangeMenu('i1');">菜單1</div> <div class="content"> <div>內容1</div> <div>內容1</div> <div>內容1</div> </div> </div> <div class="item"> <div id='i2' class="header" onclick="ChangeMenu('i2');">菜單2</div> <div class="content hide"> <div>內容2</div> <div>內容2</div> <div>內容2</div> </div> </div> <div class="item"> <div id='i3' class="header" onclick="ChangeMenu('i3');">菜單3</div> <div class="content hide"> <div>內容3</div> <div>內容3</div> <div>內容3</div> </div> </div> <div class="item"> <div id='i4' class="header" onclick="ChangeMenu('i4');">菜單4</div> <div class="content hide"> <div>內容4</div> <div>內容4</div> <div>內容4</div> </div> </div> </div> <script> function ChangeMenu(nid){ var current_header = document.getElementById(nid); var item_list = current_header.parentElement.parentElement.children; for(var i=0;i<item_list.length;i++){ var current_item = item_list[i]; current_item.children[1].classList.add('hide'); } current_header.nextElementSibling.classList.remove('hide'); } </script> </body> </html>
for 循環的另外一種寫法 a 爲數組 a = [11,22,33,44] for(var item in a){ console.log(item); }
.getElementsByTagName('div') 經過標籤名進行查找 .getElementsByClassName 經過class屬性進行查找 .getElementsByName 根據 name 屬性進行查找 firstElementChild 第一個子標籤元素 lastElementChild 最後一個子標籤元素 nextElementtSibling 下一個兄弟標籤元素 previousElementSibling 上一個兄弟標籤元素
知識點總結 1、css重用 <style> 若是整個頁面的寬度 > 900px時： { .c{ 共有 } .c1{ 獨有 } } .c2{ 獨有 } </style> <div class='c c1'></div> <div class='c c2'></div> 2、自適應 和 改變大小變形 左右滾動條的出現 寬度，百分比 頁面最外層：像素的寬度 => 最外層設置絕對寬度 自適應：media 3、默認img標籤，有一個1px的邊框 img{ border: 0; } 1、塊級和行內 2、form標籤 <form action='http://sssss' methed='GET' enctype='multi'> <div>asdfasdf</div> <input type='text' name='q' /> <input type='text' name='b' /> # 上傳文件 <input type='file' name='f' /> <input type='submit' /> </form> GET: http://sssss?q=用戶輸入的值 http://sssss?q=用戶輸入的值&b=用戶輸入的內容 POST： 請求頭 請求內容 3、display: block;inline;inline-block 4、float： <div> <div style='float:left;'>f</div> <div style='clear:both;'></div> </div> 5、margin: 0 auto; 6、padding, ---> 自身發生變化 CSS補充 position: a. fiexd => 固定在頁面的某個位置 b. relative + absolute <div style='position:relative;'> <div style='position:absolute;top:0;left:0;'></div> </div> opcity: 0.5 透明度 z-index: 層級順序 overflow: hidden,auto hover background-image:url('image/4.gif'); # 默認，div大，圖片重複訪 background-repeat: repeat-y; background-position-x: background-position-y: 示例：輸入框 JavaScript 獨立的語言，瀏覽器具備js解釋器 JavaScript代碼存在形式： - Head中 <script> //javascript代碼 alert(123); </script> <script type="text/javascript"> //javascript代碼 alert(123); </script> - 文件 <script src='js文件路徑'> </script> PS: JS代碼須要放置在 <body>標籤內部的最下方 註釋 當行註釋 // 多行註釋 /* */ 變量： python： name = 'alex' JavaScript: name = 'alex' # 全局變量 var name = 'eric' # 局部變量 寫Js代碼： - html文件中編寫 - 臨時，瀏覽器的終端 console 基本數據類型 數字 a = 18; 字符串 a = "alex" a.chartAt(索引位置) a.substring(起始位置，結束位置) a.lenght 獲取當前字符串長度 ... 列表(數組) a = [11,22,33] 字典 a = {'k1':'v1','k2':'v2'} 布爾類型 小寫 for循環 1. 循環時，循環的元素是索引 a = [11,22,33,44] for(var item in a){ console.log(item); } a = {'k1':'v1','k2':'v2'} for(var item in a){ console.log(item); } 2. for(var i=0;i<10;i=i+1){ } a = [11,22,33,44] for(var i=0;i<a.length;i=i+1){ } 不支持字典的循環 條件語句 if(條件){ }else if(條件){ }else if(條件){ }else{ } == 值相等 === 值和類型都相等 && and || or 函數： function 函數名(a,b,c){ } 函數名(1,2,3) Dom 1、找到標籤 獲取單個元素 document.getElementById('i1') 獲取多個元素（列表）document.getElementsByTagName('div') 獲取多個元素（列表）document.getElementsByClassName('c1') a. 直接找 document.getElementById 根據ID獲取一個標籤 document.getElementsByName 根據name屬性獲取標籤集合 document.getElementsByClassName 根據class屬性獲取標籤集合 document.getElementsByTagName 根據標籤名獲取標籤集合 b. 間接 tag = document.getElementById('i1') parentElement // 父節點標籤元素 children // 全部子標籤 firstElementChild // 第一個子標籤元素 lastElementChild // 最後一個子標籤元素 nextElementtSibling // 下一個兄弟標籤元素 previousElementSibling // 上一個兄弟標籤元素 2、操做標籤 a. innerText 獲取標籤中的文本內容 標籤.innerText 對標籤內部文本進行從新賦值 標籤.innerText = "" b. className tag.className => 直接總體作操做 tag.classList.add('樣式名') 添加指定樣式 tag.classList.remove('樣式名') 刪除指定樣式 PS： <div onclick='func();'>點我</div> <script> function func(){ } </script> c. checkbox 獲取值 checkbox對象.checked 設置值 checkbox對象.checked = true
Dom 找標籤 - 直接找 $('#id') $('.c1').siblings() 操做： innerText checkbox: checked className classList 事件： <div onclick='函數(123)'></div> <script> 代碼塊 </script> 定時器 setInterval('函數()', 4000) 其餘： alert() console.log()
onblur="Blur(); 當鼠標不在輸入框時,會進行的操做
獲取指定 id 以後標籤的值,使用.value 進行獲取 var val=tag.value; 當什麼都沒有輸入時,值爲 ""
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>搜索框請輸入關鍵字</title> <style> .c_keys{ width: 200px; height: 30px; } </style> </head> <body> <div> <input id="id1" type="text" class="c_keys" onfocus="Focus();" onblur="Blur();" value="請輸入關鍵字"/> </div> <script> function Focus(){ var tag=document.getElementById('id1'); var val=tag.value; if(val == "請輸入關鍵字"){ tag.value=""; } } function Blur(){ var tag=document.getElementById('id1'); var val=tag.value; if(val==""){ tag.value="請輸入關鍵字"; } } </script> </body> </html>
使用 .submit() 進行提交 function submitForm(){ document.getElementById('form1').submit(); }
使用 .addEventListener 對事件進行監聽 ('click',匿名函數) 表示點擊以後要進行的操做 var mydiv=document.getElementById('form1'); mydiv.addEventListener('click',function(){ console.log('aa'); },false)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非submit標籤提交表單實例</title> </head> <body> <form id="form1" action="http://www.baidu.com"> <input type="text" /> </form> <a onclick="submitForm();">A標籤提交</a> <script> function submitForm(){ document.getElementById('form1').submit(); } var mydiv=document.getElementById('form1'); mydiv.addEventListener('click',function(){ console.log('aa'); },false) </script> </body> </html>
使用 disabled 表示標籤不可用 <input type="text" disabled />
在標籤中能夠自定義屬性 此處定義的是 alex <a alex='123'>f2</a>
引入 jquery 文件 <script src="jquery-1.12.4.js"></script>
使用 $(dom對象) 後即爲 jquery 對象 $("#i1")
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <input type="text" /> <input type="text" disabled /> <input type="text" /> <div id='i10' class='c1'> <div> <a>asd</a> </div> <a alex='123'>f2</a> <a alex='456'>f2</a> <a>f3</a> <a>f4</a> </div> <div class='c1'> <a>f</a> </div> <div class='c1'> <div class='c2'> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $("#i1") </script> </body> </html>
td 標籤內部能夠使用 input 標籤 <td><input type="checkbox" /></td> 獲取 id 爲 tb的標籤,屬性爲 checkbox 的, 使用 prop 設置屬性爲 true prop 返回值爲 true 或 false,能夠用於判斷 $('#tb :checkbox').prop('checked',true);
循環時使用 .each( function(參數){ 代碼塊 } )
在使用 script 代碼時,使用的 this 對象是 dom 對象, 使用 $(this) 轉換爲 jquery 對象
三元運算 var v = 條件? 真值：假值; var v = $(this).prop('checked')?false:true;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全選" onclick="checkAll();" /> <input type="button" value="反選" onclick="reverseAll();" /> <input type="button" value="取消" onclick="cancleAll();"/> <table border="1"> <thead> <tr> <th>選項</th> <th>IP</th> <th>PORT</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll() { $('#tb :checkbox').prop('checked',true); } function cancleAll() { $('#tb :checkbox').prop('checked',false); } function reverseAll() { $(':checkbox').each(function(k){ // this,代指當前循環的每個元素 // Dom /* if(this.checked){ this.checked = false; }else{ this.checked = true; } */ /* if($(this).prop('checked')){ $(this).prop('checked', false); }else{ $(this).prop('checked', true); } */ // 三元運算var v = 條件? 真值：假值 var v = $(this).prop('checked')?false:true; $(this).prop('checked',v); }) } </script> </body> </html>
在 script 中 一行代碼實現菜單欄 $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
min-height: 50px; 設置最小高度
script 中 .header 表示 class 爲 header 的標籤 .click 表示點擊時,會進行調用的函數 $('.header').click(function(){ 代碼塊 }
.addClass('hide') 在 class 屬性中添加 hide 樣式 .removeClass('hide') 在 class 屬性中刪除 hide 樣式 $(this).next() 下一個 $(this).prev() 上一個 $(this).parent() 父 $(this).children() 孩子 $('#i1').siblings() 兄弟 $('#i1').find('#i1') 查找 #表示尋找 id
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ background-color: black; color: wheat; } .content{ min-height: 50px; } .hide{ display: none; } </style> </head> <body> <div style="height:400px;width: 200px;border: 1px solid #dddddd"> <div class="item"> <div class="header">標題一</div> <div id="i1" class="content hide">內容</div> </div> <div class="item"> <div class="header">標題二</div> <div class="content hide">內容</div> </div> <div class="item"> <div class="header">標題三</div> <div class="content hide">內容</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.header').click(function(){ // 當前點擊的標籤 $(this) // 獲取某個標籤的下一個標籤 // 獲取某個標籤的父標籤 // 獲取全部的兄弟標籤 // 添加樣式和移除樣式 // $('.i1').addClass('hide') // $('#i1').removeClass('hide') // var v = $("this + div"); // $("label + input") // console.log(v); // $("afsldkfja;skjdf;aksdjf") // 篩選器 /* $(this).next() 下一個 $(this).prev() 上一個 $(this).parent() 父 $(this).children() 孩子 $('#i1').siblings() 兄弟 $('#i1').find('#i1') 子子孫孫中查找 $('#i1').addClass(..) $('#i1').removeClass(..) */ // 鏈式編程 // $(...).click(function(){ // this.. // }) // $(this).next().removeClass('hide'); // $(this).parent().siblings().find('.content').addClass('hide') $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide') }) </script> </body> </html>
能夠進行添加和顯示編輯界面,編輯後界面無變化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .modal{ position: fixed; top: 50%; left: 50%; width: 500px; height: 400px; margin-left: -250px; margin-top: -250px; background-color: #eeeeee; z-index: 10; } .shadow{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.6; background-color: black; z-index: 9; } </style> </head> <body> <a onclick="addElement();">添加</a> <table border="1" id="tb"> <tr> <td target="hostname">1.1.1.11</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">編輯</a> | <a class="del">刪除</a> </td> </tr> <tr> <td target="hostname">1.1.1.12</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">編輯</a> | <a class="del">刪除</a> </td> </tr> <tr> <td target="hostname">1.1.1.13</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">編輯</a> | <a class="del">刪除</a> </td> </tr> <tr> <td target="hostname">1.1.1.14</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">編輯</a> | <a class="del">刪除</a> </td> </tr> </table> <div class="modal hide"> <div> <input name="hostname" type="text" /> <input name="port" type="text" /> <input name="ip" type="text" /> </div> <div> <input type="button" value="取消" onclick="cancelModal();" /> <input type="button" value="肯定" onclick="confirmModal();" /> </div> </div> <div class="shadow hide"></div> <script src="jquery-1.12.4.js"></script> <script> $('.del').click(function () { $(this).parent().parent().remove(); }); function confirmModal() { var tr = document.createElement('tr'); var td1 = document.createElement('td'); td1.innerHTML = "11.11.11.11"; var td2 = document.createElement('td'); td2.innerHTML = "8001"; $(tr).append(td1); $(tr).append(td2); $('#tb').append(tr); $(".modal,.shadow").addClass('hide'); // $('.modal input[type="text"]').each(function () { // // var temp = "<td>..." // // // // }) } function addElement() { $(".modal,.shadow").removeClass('hide'); } function cancelModal() { $(".modal,.shadow").addClass('hide'); $('.modal input[type="text"]').val(""); } $('.edit').click(function(){ $(".modal,.shadow").removeClass('hide'); // this var tds = $(this).parent().prevAll(); tds.each(function () { // 獲取td的target屬性值 var n = $(this).attr('target'); // 獲取td中的內容 var text = $(this).text(); var a1 = '.modal input[name="'; var a2 = '"]'; var temp = a1 + n + a2; $(temp).val(text); }); // var port = $(tds[0]).text(); // var host = $(tds[1]).text(); // $('.modal input[name="hostname"]').val(host); // $('.modal input[name="port"]').val(port); // 循環獲取tds中內容 // 獲取 <td>內容</td> 獲取中間的內容 // 賦值給input標籤中的value }); </script> </body> </html>
在 div 中使用 span 標籤 <div class="c1"> <p> <span id="i1">Hello</span> </p> <span>Hello Again</span> </div>
.toggleClass(class 內部的樣式名稱) 實現翻轉 使用 #i1 綁定 click 點擊事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } </style> </head> <body> <input type='checkbox' id='i2' /> <input id="i1" type="button" value="開關" /> <div class="c1 hide">asdfasdf</div> <script src="jquery-1.12.4.js"></script> <script> $('#i1').click(function(){ // if($('.c1').hasClass('hide')){ // $('.c1').removeClass('hide'); // }else{ // $('.c1').addClass('hide'); // } $('.c1').toggleClass('hide'); }) </script> </body> </html>
在 style 內設置樣式 cursor: pointer; 表示當鼠標移動到該區域時,變換爲小手 script 中添加 .attr('a'); 進行設置屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ height: 38px; background-color: #eeeeee; line-height: 38px; } .active{ background-color: brown; } .menu .menu-item{ float: left; border-right: 1px solid red; padding: 0 5px; cursor: pointer; } .content{ min-height: 100px; border: 1px solid #eeeeee; } </style> </head> <body> <div style="width: 700px;margin:0 auto"> <div class="menu"> <div class="menu-item active" a="1">菜單一</div> <div class="menu-item" a="2">菜單二</div> <div class="menu-item" a="3">菜單三</div> </div> <div class="content"> <div b="1">內容一</div> <div class="hide" b="2">內容二</div> <div class="hide" b="3">內容三</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.menu-item').click(function(){ $(this).addClass('active').siblings().removeClass('active'); var target = $(this).attr('a'); $('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide'); }); </script> </body> </html>
script 使用 .eq(值) 進行判斷是否相等 .index() 獲取索引值 $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ height: 38px; background-color: #eeeeee; line-height: 38px; } .active{ background-color: brown; } .menu .menu-item{ float: left; border-right: 1px solid red; padding: 0 5px; cursor: pointer; } .content{ min-height: 100px; border: 1px solid #eeeeee; } </style> </head> <body> <div style="width: 700px;margin:0 auto"> <div class="menu"> <div class="menu-item active" >菜單一</div> <div class="menu-item" >菜單二</div> <div class="menu-item" >菜單三</div> </div> <div class="content"> <div >內容一</div> <div class="hide" >內容二</div> <div class="hide">內容三</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.menu-item').click(function(){ $(this).addClass('active').siblings().removeClass('active'); $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide'); }); </script> </body> </html>
script 獲取值 .val()
$('#u1') 爲 jquery 對象, jquery 對象能夠使用 append 在後面添加元素
prepend 在前面添加元素 after 在後面另起一行添加元素
before 在最開始另起一行添加元素
remove 刪除元素
clone 複製元素
empty 移除全部元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="t1" type="text" /> <input id="a1" type="button" value="添加" /> <input id="a2" type="button" value="刪除" /> <input id="a3" type="button" value="複製" /> <ul id="u1"> <li>1</li> <li>2</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $('#a1').click(function () { var v = $('#t1').val(); var temp = "<li>" + v + "</li>"; $('#u1').append(temp); // $('#u1').prepend(temp); // $('#u1').after(temp) //$('#u1').before(temp) }); $('#a2').click(function () { var index = $('#t1').val(); $('#u1 li').eq(index).remove(); //$('#u1 li').eq(index).empty(); }); $('#a3').click(function () { var index = $('#t1').val(); var v = $('#u1 li').eq(index).clone(); $('#u1').append(v); // $('#u1 li').eq(index).remove(); // $('#u1 li').eq(index).empty(); }) </script> </body> </html>
設置 css 樣式 $(tag).css('屬性名','值'); $(tag).css('fontSize',fontSize + "px"); 中止執行 clearInterval(obj);
點贊 示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ padding: 50px; border: 1px solid #dddddd; } .item{ position: relative; width: 30px; } </style> </head> <body> <div class="container"> <div class="item"> <span>贊</span> </div> </div> <div class="container"> <div class="item"> <span>贊</span> </div> </div> <div class="container"> <div class="item"> <span>贊</span> </div> </div> <div class="container"> <div class="item"> <span>贊</span> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.item').click(function () { AddFavor(this); }); function AddFavor(self) { // DOM對象 var fontSize = 15; var top = 0; var right = 0; var opacity = 1; var tag = document.createElement('span'); $(tag).text('+1'); $(tag).css('color','green'); $(tag).css('position','absolute'); $(tag).css('fontSize',fontSize + "px"); $(tag).css('right',right + "px"); $(tag).css('top',top + 'px'); $(tag).css('opacity',opacity); $(self).append(tag); var obj = setInterval(function () { fontSize = fontSize + 10; top = top - 10; right = right - 10; opacity = opacity - 0.1; $(tag).css('fontSize',fontSize + "px"); $(tag).css('right',right + "px"); $(tag).css('top',top + 'px'); $(tag).css('opacity',opacity); if(opacity < 0){ clearInterval(obj); $(tag).remove(); } }, 40); } </script> </body> </html>
overflow 設置頁面內部滾動條 overflow: auto;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1"></div> <div style="height: 100px;width:100px;overflow: auto"> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> </div> <div id="i2"></div> <div style="height: 1000px;"></div> <script src="jquery-1.12.4.js"></script> </body> </html>
實現頁面可移動框 示例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> <div id="title" style="background-color: black;height: 40px;"></div> <div style="height: 300px;"></div> </div> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> $(function(){ $('#title').mouseover(function(){ $(this).css('cursor','move'); }); $("#title").mousedown(function(e){ //console.log($(this).offset()); var _event = e || window.event; var ord_x = _event.clientX; var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left; var parent_top = $(this).parent().offset().top; $('#title').on('mousemove', function(e){ var _new_event = e || window.event; var new_x = _new_event.clientX; var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x); var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px'); $(this).parent().css('top',y+'px'); }) }); $("#title").mouseup(function(){ $("#title").off('mousemove'); }); }) </script> </body> </html>
.mouseover(function(){}) 當鼠標指針在上面時,要進行的操做 .mousedown(function(e){}) 當鼠標放下時,要進行的操做 .clientX 返回水平 x 座標 .clientY 返回水平 y 座標 .parent().offset().left 對於當前位置所進行的偏移,左偏 .parent().offset().top; 頂部
獲取 id 爲 t1 的標籤的值 <input id="t1" type="text" /> var v = $('#t1').val();
.delegate 進行事件委託 $('標籤名').delegate('標籤','click',function () { 代碼塊 })
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="t1" type="text" /> <input id="a1" type="button" value="添加" /> <ul id="u1"> <li>1</li> <li>2</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $('#a1').click(function () { var v = $('#t1').val(); var temp = "<li>" + v + "</li>"; $('#u1').append(temp); }); // $('ul li').click(function () { // var v = $(this).text(); // alert(v); // }) // $('ul li').bind('click',function () { // var v = $(this).text(); // alert(v); // }) // $('ul li').on('click', function () { // var v = $(this).text(); // alert(v); // }) $('ul').delegate('li','click',function () { var v = $(this).text(); alert(v); }) </script> </body> </html>
在 script 代碼函數中使用 return false 會終止,不進行接下來的操做 return true 會繼續進行跳轉
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a onclick="return ClickOn()" href="http://www.oldboyedu.com">走你1</a> <a id="i1" href="http://www.oldboyedu.com">走你2</a> <script src="jquery-1.12.4.js"></script> <script> function ClickOn() { alert(123); return true; } $('#i1').click(function () { alert(456); return false; }) </script> </body> </html>
點擊走你2 , 不會進行跳轉網頁html
相關文章
- 1. 前端須要用到的東西
- 2. 前端須要注意的要點
- 3. 前端須要用到的插件和chrome插件
- 4. 前端常常須要使用到的replace
- 5. CSS3前端開發中須要用到的變換矩陣
- 6. 前端須要學多久
- 7. 前端實例練習 - 回到頂部
- 8. 前端工程師須要的技能以及部署流程
- 9. 前端須要看的書籍
- 10. 前端須要瞭解的nginx
- 更多相關文章...
- • Thymeleaf+SpringMVC5示例 - Thymeleaf 教程
- • Thymeleaf Servlet Hellow World示例 - Thymeleaf 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 常用的分佈式事務解決方案
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端須要用到的東西
- 2. 前端須要注意的要點
- 3. 前端須要用到的插件和chrome插件
- 4. 前端常常須要使用到的replace
- 5. CSS3前端開發中須要用到的變換矩陣
- 6. 前端須要學多久
- 7. 前端實例練習 - 回到頂部
- 8. 前端工程師須要的技能以及部署流程
- 9. 前端須要看的書籍
- 10. 前端須要瞭解的nginx