學習目標：
一周內學習完webApi
學習內容：
1、 掌握創建元素
createElement("標簽名") 回傳在記憶體中創建好的標簽
父元素.appendChild(子元素) 將子元素添加到父元素的最后
2、 掌握對元素操作
2.1 removeChild(子元素) 洗掉子元素，回傳被洗掉的子元素
2.2 replaceChild(新節點,舊節點) 將新節點覆寫舊節點，回傳被替換的節點
2.3 insertBefore(新節點，添加節點的位置) 將新節點添加到指定位置
2.4 元素.cloneNode([布林值]) 將元素克隆一份回傳
默認淺克隆 false: 只克隆標簽，不克隆內容
深克隆 true: 克隆標簽有克隆內容
3、 掌握查找元素之間的關系
3.1找父親 eg:findParent.parentElement findParent.parentNode
3.2找兒子 eg：console.log(findSon.children); console.log(findSon.childNodes);
3.3找兄弟 eg.找兄弟
上：previousElementSibling 下：nextElementSibling
上：previousSibling 下：nextSibling
4、滑鼠事件
var divs = document.querySelectorAll(".containner div");
divs[0].onclick=function () {
alert("這是滑鼠點擊事件");
};
divs[1].ondblclick=function () {
alert("這是滑鼠雙擊擊事件");
};
divs[2].onmouseover=function () {
alert("這是滑鼠移入事件");
};
divs[3].onmouseout=function () {
alert("這是滑鼠移出事件");
};
divs[4].onmousemove=function () {
console.log("這是滑鼠移動事件");
};
divs[5].onmousedown=function () {
alert("這是滑鼠按下事件");
};
divs[6].onmouseup=function () {
alert("這是滑鼠彈起事件");
};學習時間：
時間：2020.11.18
1、上午 晚上9：30-下午6：30分
當日作業：
1、 克隆小練習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{
margin: 0;
padding: 0;
list-style-type: none;
}
ul{
overflow: hidden;
}
li{
float: left;
margin:50px 20px;
}
p img{
margin-left: 10px;
}
</style>
<body>
<ul>
<li><img src="../img/01.gif" alt=""></li>
<li><img src="../img/02.gif" alt=""></li>
<li><img src="../img/03.gif" alt=""></li>
<li><img src="../img/04.gif" alt=""></li>
<li><img src="../img/05.gif" alt=""></li>
<li><img src="../img/06.gif" alt=""></li>
<li><img src="../img/07.gif" alt=""></li>
<li><img src="../img/08.gif" alt=""></li>
<li><img src="../img/09.gif" alt=""></li>
<li><img src="../img/10.gif" alt=""></li>
<li><img src="../img/11.gif" alt=""></li>
<li><img src="../img/12.gif" alt=""></li>
</ul>
<p>請發言:<img src="../img/01.gif"></p>
<script>
//給每一個按鈕添加事件
var nodeListImg = document.querySelectorAll("ul li img"); //獲取ul>li>img
var getP = document.querySelector("p"); //獲取p的位置
nodeListImg.forEach(function (item) { //給每一個img添加點擊事件
item.onclick=function () {
var cloneNodeItem= item.cloneNode(true); //將img深克隆
getP.appendChild(cloneNodeItem); //父元素getP追加一個克隆后的節點添加入p標簽里邊
}
})
</script>
</body>
</html>
2、發布微博
<div class="bg">
<textarea style=" resize:none"></textarea>
<input type="button" value="發布">
</div>
<div class="content">
<ul>
<li><span>滴答滴啦嗲嗲啦</span><a href="javascript:;" onclick='{if(confirm("確定要洗掉嗎?")) {deleteTr(this); }else {}}'>洗掉</a></li>
<li><span>一起來發布微博吧</span><a href="javascript:;" onclick='{if(confirm("確定要洗掉嗎?")) {deleteTr(this); }else {}}'>洗掉</a></li>
<li><span>一起來發布微博吧</span><a href="javascript:;" onclick='{if(confirm("確定要洗掉嗎?")) {deleteTr(this); }else {}}'>洗掉</a></li>
<li><span>一起來發布微博吧</span><a href="javascript:;" onclick='{if(confirm("確定要洗掉嗎?")) {deleteTr(this); }else {}}'>洗掉</a></li>
</ul>
</div> *{
margin: 0;
padding: 0;
list-style-type: none;
}
.bg{
width: 501px;
height: 162px;
border: 1px solid black;
position: relative;
left: 28%;
}
.bg textarea{
display: block;
width: 400px;
height: 100px;
border: 1px solid orange;
position: relative;
left: 50px;
top: 20px;
white-space: normal
}
.bg input{
width: 68px;
height: 23px;
background-color: #FFEFD5;
position: relative;
left: 10%;
top: 20%;
font-size: 13px;
}
.content{
width: 501px;
border: 1px solid orange;
border-bottom:1px solid snow;
text-align: center;
color: #DAA520;
position: relative;
left: 28%;
}
.content li{
width: 502px;
height: 22px;
border-bottom: 1.5px dashed gray;
overflow: hidden;
}
.content li a{
display: block;
float: right;
text-decoration: none;
font-size: 15px;
color: black;
}
<!--查找元素-->
/*獲取文本框的值*/
var content = document.querySelector(".content");
var bg = document.querySelector(".bg");
var txt = document.querySelector("textarea");
var btn = document.querySelector("input[type=button]");
var ul = document.querySelector("ul");
var getLi = document.querySelectorAll("li");
// var getSpan = document.querySelectorAll("ul li span");
// var get = document.querySelectorAll("ul li a");
console.log(bg.children);// //查找發布按鈕和文本域
console.log(content.children);
// /*獲取洗掉按鈕*/
/*滑鼠點擊事件*/
btn.onclick=function () {
var txtValue=txt.value;
/*獲取文本框的值*/
if(txtValue=="") {
alert("請輸入內容");
}else if(txtValue.length>120){
alert("長話短說，不能超過120個字");
}else{
/*創建一個li標簽*/
var liList=document.createElement("li");
// var creatA = document.createElement("a");
liList.innerHTML=txtValue+"<a>"+"洗掉"+"</a>";
// creatA.innerHTML="<a>"+"洗掉"+"</a>";
//每次添加到ul>li里面的第一個兒子之前,insertBefore(新節點，位置)
ul.insertBefore(liList,getLi[0]);//li增加一個li的位置和下邊框
// ul.insertBefore(creatSpan,getLi[0]);//
txt.value="";
// ul.insertBefore(creatA,getLi[0]);
}
};
/*洗掉remove*/
function deleteTr(obj) {
//通過this找到父級元素節點
var li1=obj.parentNode;
//找到li
var ul1=li1.parentNode;
ul1.removeChild(li1);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/225315.html
標籤：其他
上一篇：Nginx反向代理