老男孩14期自動化運維day15隨筆和作業(一)
1.JavaScript簡介
獨立的語言，瀏覽器本身就是一個JavaScript的直譯器 js要加分號
是因為網頁上要儘量把js程式碼壓縮成一行，所以必須加分號來識別哪個是一行
2.JavaScript程式碼存在形式：
- head中 (一進入網頁就觸發)
1. < script> // js程式碼 alert(123); < /script>
< script type="text/javascript"> // js程式碼 alert(123); < /script>
- 檔案
<script src="檔案路徑"></script>
注意：除開在head中的情況，JS程式碼需要放置在< body>標籤內部的最下方
3.JS註釋
當行註釋 //
多行註釋 /* */
4.變數
python: name=‘alex’
JavaScript: name=‘alex’ # js中這樣是預設全域性變數
var name=‘alex’ # 這個才是區域性變數 最好都這樣 全域性變數一般很少
5.寫JS程式碼
- html 檔案中編寫
除錯： - 瀏覽器終端 比如chrome 點審查 然後console裡面寫程式碼
在瀏覽器consle列印資訊：
function func(){
console.log(內容);
}
可在百度的console看到校園招聘的資訊
回到頂部的實現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div onclick="GoTop();" style 6.定時器
setInterval(‘func();’,1000)
7.基本資料型別
（1） 數字
a =18;
（2） 字串
a = ‘alex’ a.chartAt(索引未知)
a.substring(起始位置，結束位置) 取頭不取尾
比如：substring(0,length) 就都取完了 因為第一個index為0 最後一個是index是長度-1 a.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();',1000)
</script>
</body>
</html>
（3） 列表(陣列)
a=[1,2,3] 方法見部落格
最難的是a.splice 加入 刪除陣列元素
（4）字典
a = {‘k1’:‘v1’,‘k2’:‘v2’}
a[‘k1’]=v1
（5）布林型別
python: True False
Js:true false (小寫)
8.for迴圈
（1）迴圈時，迴圈的是元素的索引
字典 迴圈的是元素的key
a=[1,2,3,4]
for(var item in a){
console.log(item); # 輸出的是下表索引
}
（2）第二種迴圈（不支援字典，因為字典是無序的）
（1）for(var i=0;i<10;i++){
}
a=[1,2,3,4]（2）for (var i=0;i<a.length;i++){
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">我是i1</div>
<a>aa</a>
<a>aa</a>
<a>aa</a>
<script>
var tag=document.getElementsByTagName('a')
for (var i=0;i<tag.length;i++) {
tag[i].innerText = 123;
}
</script>
</body>
</html>
9.條件語句
if(條件){
}
else if(){
}
else(){
}
== 值相等
=== 值和型別都相等
!= 值不相等
!== 值和型別都不相等
&& and
|| or
10.函式
function 函式名(a,b,c){
}
函式名（1,2,3）
11.Dom 直接選擇器：
（1）找到標籤
a.直接找
獲取單個元素：document.getElementById('') 獲取單個元素：document.getElementByName('') 獲取多個元素（陣列）document.getElementsByTagName('div') 獲取多個元素（陣列）document.getElementsByClassName('')
b.間接找
parentElement // 父節點標籤元素 children // 所有子標籤 firstElementChild // 第一個子標籤元素 lastElementChild // 最後一個子標籤元素 nextElementtSibling // 下一個兄弟標籤元素 previousElementSibling // 上一個兄弟標籤元素
（2）操作標籤
a.innerText
獲取標籤中的文字內容
標籤.innerText對標籤內部文字進行重新賦值
標籤.innerText=’’
b.className
tag.className = > 直接整體做操作
tag.classList.add(‘樣式名’) 新增指定樣式
tag.classList.remove(‘樣式名’) 刪除指定樣式
c.checkbox
選中 checkbox物件.checked=true
不選中 checkbox物件.checked=false
全選 反選 取消 新增的實現：
!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">
</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 trlist=tbody.children;
for(var i=0;i<trlist.length;i++){
//迴圈所有tr
var current_tr =trlist[i];
var checkbox=current_tr.children[0].children[0];
checkbox.checked=true;
}
}
function CancleAll(){
var tbody=document.getElementById('tb');
// 獲取所有tr
var trlist=tbody.children;
for(var i=0;i<trlist.length;i++){
//迴圈所有tr
var current_tr =trlist[i];
var checkbox=current_tr.children[0].children[0];
checkbox.checked=false;
}
}
function ReverseAll(){
var tbody=document.getElementById('tb');
// 獲取所有tr
var trlist=tbody.children;
for(var i=0;i<trlist.length;i++){
//迴圈所有tr
var current_tr =trlist[i];
var checkbox=current_tr.children[0].children[0];
if (checkbox.checked==true){
checkbox.checked=false;
}
else{
checkbox.checked=true;
}
}
}
</script>
</body>
</html>
左側導航欄的實現：
<!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 hide">
<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