前端需要用到的部分示例
阿新 • • 發佈：2020-08-08
<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="
多選框 使用 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 , 不會進行跳轉網頁
知識點總結
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-08
<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 , 不會進行跳轉網頁