排他思想，需要在一排按鈕中凸顯效果時，可以将所有的樣式清除後，再給目前按鈕設定樣式
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>
<script>
// 1. 擷取所有按鈕元素
var btns = document.getElementsByTagName('button');
// btns得到的是僞數組 裡面的每一個元素 btns[i]
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
// (1) 我們先把所有的按鈕背景顔色去掉 幹掉所有人
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
// (2) 然後才讓目前的元素背景顔色為pink 留下我自己
this.style.backgroundColor = 'pink';
}
}
//2. 首先先排除其他人，然後才設定自己的樣式 這種排除其他人的思想我們成為排他思想
</script>
百度換膚用例
<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>
// 1. 擷取元素
var imgs = document.querySelector('.baidu').querySelectorAll('img');
// console.log(imgs);
// 2. 循環注冊事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
// this.src 就是我們點選圖檔的路徑 images/2.jpg
// console.log(this.src);
// 把這個路徑 this.src 給body 就可以了
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
::hover效果的js 利用onmouseover和onmouseout來實作
var trs = document.querySelector('tbody').querySelectorAll('tr');
for (var i = 0; i < trs.length; i++) {
// 3. 滑鼠經過事件 onmouseover
trs[i].onmouseover = function() {
this.className = 'bg';
}
// 4. 滑鼠離開事件 onmouseout
trs[i].onmouseout = function() {
this.className = '';
}
}
全選按鈕用例
var j_cbAll = document.querySelector('#j_cbAll');
console.log(j_cbAll);
var j_tbs = document.querySelector('#j_tb').querySelectorAll('input');
console.log(j_tbs);
j_cbAll.onclick = function() {
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
}
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function() {
var flag = true;
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
break;
}
}
j_cbAll.checked = flag;
}
}
element.getAttribute(‘屬性’) get得到擷取 attribute 屬性的意思 我們程式員自己添加的屬性我們稱為自定義屬性 index
element.setAttribute(‘屬性’, ‘值’); 主要針對于自定義屬性
removeAttribute(屬性)
h5新增的擷取自定義屬性的方法 它隻能擷取data-開頭的
tab欄切換
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
// for循環綁定點選事件
for (var i = 0; i < lis.length; i++) {
// 開始給5個小li 設定索引号
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
// 1. 上的子產品頁籤，點選某一個，目前這一個底色會是紅色，其餘不變（排他思想） 修改類名的方式
// 幹掉所有人 其餘的li清除 class 這個類
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// 留下我自己
this.className = 'current';
// 2. 下面的顯示内容子產品
// 設定index屬性友善下面的留下我自己操作
var index = this.getAttribute('index');
console.log(index);
// 幹掉所有人 讓其餘的item 這些div 隐藏
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
// 留下我自己 讓對應的item 顯示出來
items[index].style.display = 'block';
}
}
</script>
節點
父節點 parentNode 得到的是離元素最近的父級節點(親爸爸) 如果找不到父節點就傳回為 null
子節點 childNodes 所有的子節點 包含 元素節點 文本節點等等
children 擷取所有的子元素節點 也是我們實際開發常用的
firstChild 第一個子節點 不管是文本節點還是元素節點
firstElementChild 傳回第一個子元素節點 ie9才支援
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]);
nextSibling 下一個兄弟節點 包含元素節點或者 文本節點等等
previousSibling 上一個兄弟節點 包含元素節點或者 文本節點等等
nextElementSibling 得到下一個兄弟元素節點
previousElementSibling 得到上一個兄弟元素節點
添加節點 node.appendChild(child) node 父級 child 是子級 後面追加元素 類似于數組中的push
添加節點 node.insertBefore(child, 指定元素);
// 1. 建立節點元素節點
var li = document.createElement('li');
// 2. 添加節點 node.appendChild(child) node 父級 child 是子級 後面追加元素 類似于數組中的push
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3. 添加節點 node.insertBefore(child, 指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]); // 頭部插入
// 4. 我們想要頁面添加一個新的元素 ： 1. 建立元素 2. 添加元素
留言闆案例
<textarea name="" id=""></textarea>
<button>釋出</button>
<ul>
</ul>
<script>
// 1. 擷取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 2. 注冊事件
btn.onclick = function() {
if (text.value == '') {
alert('您沒有輸入内容');
return false;
} else {
// console.log(text.value);
// (1) 建立元素
var li = document.createElement('li');
// 先有li 才能指派
li.innerHTML = text.value;// 這裡将輸入的value值給了li的innerHTML
// (2) 添加元素
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
}
}
</script>
參考資料：
http://yun.itheima.com/course/551.html