1.節點的操作###
根據后臺返還的數據來創建節點，之前寫的操作：寫好頁面結構，通過dom樹獲取節點，再對獲取的節點進行操作，今天學習一下dom節點的創建、添加、刪除和插入
首先獲取父元素
var body = document.getElementsByTagName("body")[0];
- 創建并添加節點
/* 1. 添加節點的相關操作*/
var btnAdd = document.getElementsByTagName("button")[0];
var box;
btnAdd.onclick = function () {
/*1.2 創建節點（一般通過document來創建）*/
box = document.createElement("div");
/*設置屬性*/
box.style.width = 100 + "px";
box.style.height = 100 + "px";
box.style.background = "yellow";
/* 1.3 添加節點（一般通過父節點來添加）*/
body.appendChild(box);
};
- 刪除節點
/* 2. 刪除節點的相關操作，一半通過父節點來操作*/
var btnDel = document.getElementsByTagName("button")[1];
btnDel.onclick= function () {
body.removeChild(box);
};
- 插入節點
/* 3. 插入節點的相關操作，一般通過父節點來操作*/
var btnIns = document.getElementsByTagName("button")[2];
btnIns.onclick = function () {
//創建節點
var box1 = document.createElement("div");
//設置屬性
box1.style.width = 100+"px";
box1.style.height = 100+"px";
box1.style.background = "pink";
//插入節點，也是通過父節點
//第一個參數表示要插入的節點，第二個表示被插入的節點
body.insertBefore(box1,box);
};
- 節點的獲取（子節點、父節點、兄弟節點）
子節點的獲取(返回偽數組)
獲取box下面的子節點,childNodes獲取文本節點，但是我們一般不需要文本節點，需要標簽節點
var rst = box.childNodes;
我們一般獲取子節點通過children獲取，因為我們需要的是標簽節點
var myChildren = box.children;
console.log(myChildren.length);
- 兄弟節點
兼容性問題
//1.獲取btn1
var btn1 = document.getElementById("btn1");
//2.獲取兄弟節點
/* nextElementSibling:獲取標簽元素，一般瀏覽器可以實現對應的效果
* IE瀏覽器不能有對應的效果，但是nextSibling可以在ie獲取標簽元素
* 所以我們需要兼容*/
var brotherSym = btn1.nextElementSibling||btn1.nextSibling;
console.log(brotherSym);
- 父節點
//1.獲取btn1
var btn1 = document.getElementById("btn1");
//2.獲取父節點
var parentSym = btn1. parentNode;
console.log(parentSym);
2.date的認識###
1.創建時間對象，表示當前的時間
var myDate = new Date();
2.當前時間的時間戳，獲取的是1970年1月1日開始的毫秒數，用來紀念unix誕生的時間
var minS = myDate.getTime();
3.32位最大只能存儲2的32次方，所以32位電腦上date對象最大只能獲取到2038年之前的時間
4.定義自己的時間戳
var myDate = new Date("2017/07/03 18:20:20");
5.date對象的相關方法
// 1.創建時間對象
var myDate = new Date();
// 2.1獲取當前年份
var year = myDate.getFullYear();
// 2.2獲取月份，獲取的值是0到11
var month = myDate.getMonth();
// 2.3獲取日期，0代表周末，其他均正常
var day = myDate.getDate();
// 2.4獲取星期
var weekDay = myDate.getDay();
// 2.5獲取每小時
var hour = myDate.getHours();
// 2.6獲取每分鐘
var min = myDate.getMinutes();
// 2.7獲取每秒
var second = myDate.getSeconds();
// 2.8獲取毫秒
var mins = myDate.getMilliseconds();
3.js三部分###
1.ECMA規范
2.DOM（文檔對象模型）
3.BOM(瀏覽器對象模型）
border邊框none與0###
界面上所有內容都是渲染出來的，當邊框設置為none時不會渲染，為0時會渲染
this###
一般放在事件指令中，表示誰觸發了這個事件，一般是事件源
事件域###
當一個動態節點添加以后，動態節點所在的{}內就是他的事件域
for循環中的i++與++i###
for(初始值;終止值;變化){
//循環執行代碼
}
- 第一次循環中i++與++i沒區別
- 所有語言在運行中最終都會轉為機器語言（匯編語言），i++會在機器語言中創建一個中間變量，++i不會，所以++i性能高于i++
- 人們一直都在用i++，當發現++i性能略高于i++時，已經養成了習慣。所以總是使用i++
九宮格算法（掌握）###
- 行號和列號的計算
- 動態創建節點應用
下面是動態創建九宮格的代碼
CSS代碼：
#box{
position: relative;
}
/* 為了避免以后獲取同樣的標簽的時候寫很多對應的屬性的設置，
我們最好把這些屬性設置抽取成一個類用來表示這些屬性*/
.newBox{
width: 100px;
height: 100px;
position: absolute;
background: yellow;
border-radius: 10px;
display: inline-block;
}
HTML代碼：
<button>添加</button>
<button>刪除</button>
<div id="box">
</div>
JS代碼：
//1.獲取按鈕與父節點
var btn = document.getElementsByTagName("button");
var box = document.getElementById("box");
//2.操控按鈕
//2.1 創建一個值用來記錄索引，也可以叫做記錄盒子的個數
var index = 0;
btn[0].onclick = function () {
index++;
//2.1創建盒子
var div = document.createElement("div");
//2.2設置屬性 — 通過類名
div.className = "newBox";
div.innerHTML = index;
//2.3 設置盒子的位置
//2.3.1 確定行號和列號
var col = (index-1)%3;
console.log(col);
var row = parseInt((index-1)/3);
div.style.left = col * (100+10)+"px";
div.style.top = row * (100+10)+"px";
console.log(div);
//2.4添加節點
box.appendChild(div);
}
//3. 刪除盒子
btn[1].onclick= function () {
if(box.children.length-1<0)return;
//3.1刪除節點
box.removeChild(box.children[index-1]);
//3.2 為了讓每次點擊都可以刪除最后一個節點，我們讓索引自減
index--;
};
發布微博###
創建ul時，在點擊事件外面創建
- 點擊按鈕（插入）
1.判斷輸入框中內容是否為空，是的話提示為空，否則再添加li節點
2.添加節點的時候，需要判斷ul中是否有節點，沒有的話直接添加，有的話插入到第一個前面 - 點擊按鈕（刪除）
1.刪除li，獲取a標簽，并對a標簽數組進行遍歷，分別添加點擊事件。當點擊時則刪除對應的li
下面是代碼
CSS代碼：
*{
margin: 0;
padding: 0;
}
#box{
border: 1px solid #000;
padding: 10px;
width: 600px;
height: 600px;
margin: 100px auto;
text-align: center;
}
#txta{
width: 490px;
height: 200px;
resize: none;
border: 1px solid #000;
}
#box ul{
width: 460px;
margin: 0 auto;
}
#box ul li{
list-style:none;
border-bottom: 1px dashed black;
height: 30px;
line-height:30px;
text-align: left;
}
#box ul li a {
float: right;
cursor: pointer;
}
HTML代碼：
<div id="box">
發布微博
<textarea name="" id="txta" cols="30" rows="10"></textarea>
<button>發布</button>
</div>
JS代碼：
//獲取標簽
var parentBox = document.getElementById("box");
var textArea = document.getElementById("txta");
var btn = document.getElementsByTagName("button")[0];
//創建ul標簽
var myUl = document.createElement("ul");
parentBox.appendChild(myUl);
//點擊發布按鈕響應事件
btn.onclick = function () {
//獲取要發布的內容
var content = textArea.value;
//如果要發布的內容為空，則返回
if(content==""){
alert("請輸入要發布的內容");
return;
}else{
//如果發布的內容有值，那么就創建新節點
var li = document.createElement("li");
//給新節點添加屬性與內部內容
li.innerHTML = content + "<a>刪除</a>";
//判斷新創建節點是否為第一條，如果是，直接添加。如果不是，則插入到首行
if(myUl.children.length==0){
myUl.appendChild(li);
}else{
myUl.insertBefore(li,myUl.children[0]);
}
}
//刪除記錄操作，一定寫在點擊事件里面，因為a標簽需要動態獲取，如果在事件外，那么就只能獲取一次。但是a標簽是可以多次添加，會導致無法刪除
var as = document.getElementsByTagName("a");
for(let i = 0; i < as.length; ++i){
as[i].onclick= function () {
//點擊刪除按鈕后，從ul上刪除對應的li，相當于刪除a標簽的父節點
myUl.removeChild(this.parentNode);
}
}
textArea.value="";
};
通過類名獲取標簽###
通過自定義封裝一個工具類函數來獲取標簽，了解即可，需要用的時候會寫
下面是自己練習的一個封裝方法
HTML代碼：
<div id="box">
<button class="btn">btn按鈕</button>
<button class="btn">btn按鈕</button>
<button class="btn">btn按鈕</button>
<button class="btn submit">btn按鈕</button>
<button>按鈕</button>
</div>
JS代碼：
var box = document.getElementById("box");
function getSymByClassName(dom,className){
if(dom.getElementsByClassName){
return dom.getElementsByClassName(className);
}
var symArr = dom.getElementsByTagName("*");
var arr = [];
for(var i = 0; i<symArr.length; i++){
var symClassNameArr = symArr[i].className.split(" ");
for(var j = 0; j < symClassNameArr.length; j++){
if(symClassNameArr[j] == className)
arr.push(symArr[i]);
}
}
return arr;
}
var rst = getSymByClassName(box,"btn");
for(var i = 0; i < rst.length; i++){
rst[i].style.backgroundColor = "green";
}
封裝一個直接獲取ID標簽的方法：
function $(tag){
return document.getElementById(tag);
}
transform###
基于默認值進行變化
rotateX(angle) 定義沿著 X 軸的 3D 旋轉。
rotateY(angle) 定義沿著 Y 軸的 3D 旋轉。
rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉。
寫了個鐘表的實現
CSS代碼：
*{
margin: 0;
padding: 0;
border: none;
}
.clock{
width: 600px;
height: 600px;
margin: 100px auto;
position: relative;
background: url("images/clockImages/clock.jpg") no-repeat;
}
.hour,.minute,.second{
width: 600px;
height: 600px;
position: absolute;
}
.hour{
background: url("images/clockImages/hour.png") no-repeat center;
}
.minute{
background: url("images/clockImages/minute.png") no-repeat center;
}
.second{
background: url("images/clockImages/second.png") no-repeat center;
}
HTML代碼：
<div id="clock" class="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
JS代碼：
/* 1.獲取標簽 */
var h = document.getElementsByClassName("hour")[0];
var m = document.getElementsByClassName("minute")[0];
var s = document.getElementsByClassName("second")[0];
/* 2.操控標簽，標簽旋轉 */
/* 為了每時每刻都獲取對應時間，我們需要使用定時器 */
/* 創建時間對象 */
var timer = setInterval(function () {
var myDate = new Date();
/* 2.1 獲取毫秒 */
var minS = myDate.getMinutes();
/* 每秒旋轉6* */
var sec = myDate.getSeconds()+minS/1000;
console.log(sec);
/* 每分旋轉6* */
var min = myDate.getMinutes()+sec/60;
/* 每小時旋轉30* */
var hour = myDate.getHours()%12+min/60;
/* 2.2設置旋轉 */
h.style.webkitTransform = "rotate("+ hour * 30 +"deg)";
m.style.webkitTransform = "rotate("+ min * 6 +"deg)";
s.style.webkitTransform = "rotate("+ sec * 6 +"deg)";
},100);
HTTP/HTTPS###
客戶端從服務器拿數據發請求
http就是用來規定客戶端和服務器之間的傳輸協議
客戶端發請求：HTTP請求（共有八種，常見的請求：GET、POST）
1.post請求安全性高于get請求
2.https:基于http通信協議中增加了一層SSL，更加安全
3.對傳出的數據進行了加密，即使數據被另有所圖的人截取，解密也不會那么容易。
線程###
- 多線程
會提升性能，但是會降低安全性
比如手機app發送請求會調用hub，但是同時還可以進行其他操作 - 性能和安全性，只能取其一或者中和
