前言：個人筆記，看到可以跳走了，只是方便個人記錄整理複習
H5自定義屬性
自定義屬性目的：是爲了保存並使用數據。有些數據可以保存到頁面中而不用保存到數據庫中。
自定義屬性獲取是通過getAttribute(‘屬性’) 獲取。
但是有些自定義屬性很容易引起歧義，不容易判斷是元素的內置屬性還是自定義屬性。
H5給我們新增了自定義屬性：data-名字
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
var div = document.querySelector('div');
// console.log(div.getTime);
console.log(div.getAttribute('getTime'));
div.setAttribute('data-time', 20);
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));
// h5新增的獲取自定義屬性的方法 它只能獲取data-開頭的
// dataset 是一個集合裏面存放了所有以data開頭的自定義屬性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
// 如果自定義屬性裏面有多個-鏈接的單詞，我們獲取的時候採取 駝峯命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
</script>
排他思想
如果有同一組元素，我們想要某一個元素實現某種樣式， 需要用到循環的排他思想算法：
-
所有元素全部清除樣式（幹掉其他人）
-
給當前元素設置樣式 （留下我自己）
-
注意順序不能顛倒，首先幹掉其他人，再設置自己
具體實例
思想便是將所有按鈕顏色清空，再設置當前按鈕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>
<script>
var btns = document.getElementsByTagName('button')
for (var i=0; i<btns.length; i++){
btns[i].onclick = function () {
for (var i=0; i<btns.length; i++){
btns[i].style.backgroundColor = ''
}
this.style.backgroundColor = 'black'
}
}
</script>
</body>
</html>
百度換膚效果學習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url(images/1.jpg) no-repeat center top;
}
li {
list-style: none;
}
.baidu {
overflow: hidden;
margin: 100px auto;
background-color: #fff;
width: 410px;
padding-top: 3px;
}
.baidu li {
float: left;
margin: 0 1px;
cursor: pointer;
}
.baidu img {
width: 100px;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
</ul>
<script>
const imgs = document.querySelector('.baidu').querySelectorAll('img')
for (let i=0; i<imgs.length; i++){
imgs[i].onclick = function () {
document.body.style.backgroundImage ='url(' + this.src + ')';
}
}
</script>
</body>
</html>
表格隔行換色案例學習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
width: 800px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
font-size: 14px;
}
thead tr {
height: 30px;
background-color: skyblue;
}
tbody tr {
height: 30px;
}
tbody td {
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
color: blue;
}
.bg {
background-color: pink;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>代碼</th>
<th>名稱</th>
<th>最新公佈淨值</th>
<th>累計淨值</th>
<th>前單位淨值</th>
<th>淨值增長率</th>
</tr>
</thead>
<tbody>
<tr>
<td>003526</td>
<td>農銀金穗3個月定期開放債券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>農銀金穗3個月定期開放債券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>農銀金穗3個月定期開放債券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>農銀金穗3個月定期開放債券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>農銀金穗3個月定期開放債券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>農銀金穗3個月定期開放債券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
<script>
// 1.獲取元素 獲取的是 tbody 裏面所有的行
var trs = document.querySelector('tbody').querySelectorAll('tr');
// 2. 利用循環綁定註冊事件
for (var i = 0; i < trs.length; i++) {
// 3. 鼠標經過事件 onmouseover
trs[i].onmouseover = function() {
// console.log(11);
this.className = 'bg';
}
// 4. 鼠標離開事件 onmouseout
trs[i].onmouseout = function() {
this.className = '';
}
}
</script>
</body>
</html>
全選案例學習
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微軟雅黑";
color: #fff;
}
td {
font: 14px "微軟雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>商品</th>
<th>價錢</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script>
// 1. 全選和取消全選做法： 讓下面所有複選框的checked屬性（選中狀態） 跟隨 全選按鈕即可
// 獲取元素
var j_cbAll = document.getElementById('j_cbAll'); // 全選按鈕
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的複選框
// 註冊事件
j_cbAll.onclick = function() {
// this.checked 它可以得到當前複選框的選中狀態如果是true 就是選中，如果是false 就是未選中
console.log(this.checked);
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
}
// 2. 下面複選框需要全部選中， 上面全選才能選中做法： 給下面所有複選框綁定點擊事件，每次點擊，都要循環查看下面所有的複選框是否有沒選中的，如果有一個沒選中的， 上面全選就不選中。
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function() {
// flag 控制全選按鈕是否選中
var flag = true;
// 每次點擊下面的複選框都要循環檢查者4個小按鈕是否全被選中
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
break; // 退出for循環 這樣可以提高執行效率 因爲只要有一個沒有選中，剩下的就無需循環判斷了
}
}
j_cbAll.checked = flag;
}
}
</script>
</body>
</html>
關於節點常用的語句
父節點
<script>
// 1. 父節點 parentNode
var erweima = document.querySelector('.erweima');
// 得到的是離元素最近的父級節點如果找不到父節點就返回爲 null
console.log(erweima.parentNode);
</script>
子節點
<script>
// DOM 提供的方法（API）獲取
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
// 1. 子節點 childNodes 所有的子節點 包含 元素節點 文本節點等等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
// 2. children 獲取所有的子元素節點 也是我們實際開發常用的
console.log(ul.children);
</script>
第一個和最後一個子元素
<script>
var ol = document.querySelector('ol');
// 1. firstChild 第一個子節點 不管是文本節點還是元素節點
console.log(ol.firstChild);
console.log(ol.lastChild);
// 2. firstElementChild 返回第一個子元素節點 ie9才支持
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
// 3. 實際開發的寫法 既沒有兼容性問題又返回第一個子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
</script>
兄弟節點
換行符空格之類的也算是文本節點所以不推薦
<script>
var div = document.querySelector('div');
// 1.nextSibling 下一個兄弟節點 包含元素節點或者 文本節點等等
console.log(div.nextSibling);
console.log(div.previousSibling);
// 2. nextElementSibling 得到下一個兄弟元素節點
console.log(div.nextElementSibling);
console.log(div.previousElementSibling);
</script>