day15CSS+JavaScript+DOM
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
CSS補充 position: ##多層
a. fiexd => 固定在頁面的某個位置 ##返回頂端
b. relative + absolute
<div style=`position:relative;`>
<div style=`position:absolute;top:0;left:0;`></div> ##以外面的父級div框為標準，定位自己
</div>
opcity: 0.5 透明度
z-index: 層級順序，大的在上面 ##點選，彈出一個框，背景變成灰色透明
overflow: hidden,auto ##圖片 hiddon，超過規定的範圍就隱藏，auto出現滾動條
/*當滑鼠移動到當前標籤上時，以下css屬性才生效*/.pg-header .menu:hover{ background-color: blue;
} background-image:url(`image/4.gif`); # 預設，div大，圖片重複訪
background-repeat: repeat-y; # 圖片應用只豎著加，背景色 no-repeat不堆疊
background-position-x: ##移動
background-position-y: ##移動 正向下，負向上 扣圖示 加圖片大小
background-position: 10px 10px;
示例：輸入框 最右邊有一個圖片<div style="height: 35px;width: 400px;position: relative;">
<input type="text" style="height: 35px;width: 370px;padding-right: 30px" />
<span style="position:absolute;right:3px;top:10px;background-image: url(i_name.jpg);height: 16px;width: 16px;display: inline-block;"></span>
</div> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<script src="路徑">
//javascript</script>變數 name = `hequan` 全域性變數
var name=`hequan` 區域性變數
數字 age = 18;
i = parseInt(age);
字串 a = "hequan"
a.length 長度
a.substring(起始位置，結束位置)
a.charAt(索引位置)
函式 function func(){
}布林型別 小寫
字典 a={`k1`:`v1`}
列表（陣列） a = [11,22,33]
函式 function 函式名(){
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
定時器： setInterval(`執行的程式碼`,間隔時間5000);
查詢： document.getElementById(`i1`).innerText;
自動滾動:function func() {
var tag = document.getElementById(`i1`)
var content = tag.innerText
var f = content.charAt(0);
var l = content.substring(1, tag.length)
var new_content = l + f;
tag.innerText = new_content
}setInterval(`func()`,500);
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
for迴圈
a = [11,22,33,44]
for (var item in a ){ //迴圈預設都是 key
console.log(a[item]);
}
for (var i=0;i<a.length;i++){ //陣列可以，字典不可以
}
條件語句 if(條件){
}else if（條件）{
}else{
}
== 只要值相等
=== 值相等 型別也要相等
&& and
|| or
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
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
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
例子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 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`);
}
|
本文轉自 295631788 51CTO部落格，原文連結：http://blog.51cto.com/hequan/1908641，如需轉載請自行聯絡原作者