A.今天你學(xué)到了什么
1. 'js'的各種使用方法
1.1通過點(diǎn)擊按鈕直接更改元素的背景顏色
<script>
/*
修改樣式
element.style.attr=value;
*/
var btn = document.getElementById("btn");
var p = document.getElementById("p");
btn.onclick = function(){
p.style.background= "red";
}
</script>
1.2 隔行變色
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var lis = document.getElementsByTagName("li");
for (let i = 0; i < lis.length; i++) {
if (i % 2 == 0) {
lis[i].style.backgroundColor = "red"
} else {
lis[i].style.backgroundColor = "green"
}
}
</script>
</body>
1.3 通過點(diǎn)擊按鈕贴届，顯示隱藏元素
<body>
<div id="div" style="display:block">
</div>
<button id="btn">
toggle
</button>
<script>
var btn = document.getElementById("btn");
var div = document.getElementById("div");
btn.onclick = function(){
let value = div.style.display;
if(value == "block"){
div.style.display = "none"
} else{
div.style.display = "block"
}
}
</script>
</body>
1.4通過點(diǎn)擊按鈕，添加class名更改元素屬性
<style>
.current{
color: red;
}
</style>
<p id="p">
hello world
</p>
<button id="btn">btn</button>
<script>
var btn=document.getElementById("btn");
var p=document.getElementById("p");
btn.onclick=function(){
p.className="current";
}
</script>
1.5獲得文本節(jié)點(diǎn)
<!--獲得文本節(jié)點(diǎn) -->
<p>hello world <span>
good
</span></p>
<script>
var p=document.getElementsByTagName("p")[0];
var nodeCondent=p.textContent;
console.log(nodeCondent);
</script>
1.6不同節(jié)點(diǎn)的返回類型
<!--
nodeType 節(jié)點(diǎn)類型的返回值
1.元素節(jié)點(diǎn)
2.屬性節(jié)點(diǎn)
3.文本節(jié)點(diǎn)
-->
<p class="one" id="p">hello world</p>
<script>
var p =document.getElementById("p");
var eNode=p.nodeType;
var tNode=p.firstChild.nodeType;
var attrNode=p.getAttributeNode("class").nodeType;
console.log(eNode);
console.log(tNode);
console.log(attrNode);
</script>
1.7 在元素后增加節(jié)點(diǎn)
<!-- 在之后添加節(jié)點(diǎn) -->
<div id="parent">
<p>hello world</p>
</div>
<button id="add">add</button>
<script>
var add=document.getElementById("add");
var parent =document.getElementById("parent");
add.onclick = function() {
let p=document.createElement("p");
let txt=document.createTextNode("first");
p.appendChild(txt);
parent.appendChild(p);
}
</script>
1.8在元素前增加節(jié)點(diǎn)
<!-- insertBefore
語法：parentNode.insertBefore(assNode,targetNode)
createElement()創(chuàng)造元素節(jié)點(diǎn)
createTextNode（） 創(chuàng)造文本節(jié)點(diǎn)
-->
<div id="parent">
<p id="one">hello world</p>
</div>
<button id="add">add</button>
<script>
var add=document.getElementById("add");
var parent =document.getElementById("parent");
var one=document.getElementById("one");
add.onclick = function() {
let p=document.createElement("p");
let txt=document.createTextNode("first");
p.appendChild(txt);
parent.insertBefore(p,one);
}
</script>
1.9刪除節(jié)點(diǎn)
<ul id="parent">
<li>hello world</li>
</ul>
<button id="btn">btn</button>
<script>
var btn=document.getElementById("btn");
var parent=document.getElementById("parent");
var li =document.getElementsByTagName("li")[0];
btn.onclick=function(){
parent.removeChild(li);
}
</script>
2.0 替換節(jié)點(diǎn)
<div id="parent">
<p id="child">hello world</p>
</div>
<button id="btn">btn</button>
<script>
var btn=document.getElementById("btn");
var parent=document.getElementById("parent");
var child=document.getElementById("child");
btn.onclick=function(){
let h4=document.createElement("h4");
let txt=document.createTextNode("修改");
h4.appendChild(txt);
parent.replaceChild(h4,child);
}
</script>
2.1克隆節(jié)點(diǎn)
<p>hello world</p>
<script>
var p=document.getElementsByTagName("p")[0];
var cp=p.cloneNode(true);
document.body.appendChild(cp);
</script>
2.2 事件中的得到和失去焦點(diǎn)
<!--
onfocus 獲取焦點(diǎn)
onblur 失去焦點(diǎn)
this 表示 正在執(zhí)行事件的對象-->
<input type="text" id="input">
<script>
var input=document.getElementById("input");
input.onfocus=function(){
this.style.background="red";
}
input.onblur=function(){
this.style.background="green";
}
</script>
2.3 鼠標(biāo)的應(yīng)用事件
<p id="test">hello world</p>
<script>
// onmouseover 鼠標(biāo)移到某元素上
// onmouseout 鼠標(biāo)離開某元素
var test=document.getElementById("test");
test.onmouseover = function(){
this.style.color="red";
}
test.onmouseout = function(){
this.style.color="green";
}
</script>
2.4 window.onload
<script>
// window.onload 整個dom樹以及相關(guān)圖片資源加載完成后，執(zhí)行相關(guān)代碼
window.onload=function(){
var p=document.getElementsByTagName("p")[0];
console.log(p);
}
</script>
</head>
<body>
<p>hello world</p>
2.5 改變域
<input type="text">
<script>
// onchange 域的內(nèi)容發(fā)生改變時觸發(fā)
var input=document.getElementsByTagName("input")[0];
input.onchange=function(){
this.value="change";
}
</script>
2.6 提交表單
<form action="">
<input type="text">
<button type="submit">提交</button>
</form>
<script>
var submit=document.getElementsByTagName("form")[0];
submit.onsubmit=function(){
albert("提交表單");
}
</script>
2.7 resize
<div>
//需要設(shè)置大小实辑，背景
</div>
<script>
window.onresize=function(){
alert("瀏覽器窗口改變時觸發(fā)");
}
window.onscroll=function(){
alert("窗口滾動時觸發(fā)");
}
2.8 key
<p>你還可以輸入<em id="show">0</em>/150個字</p>
<textarea id="text" cols="30" rows="10"></textarea>
<script>
// 鍵盤按下時觸發(fā)
// document.onkeydown=function(event){
// alert(event.keyCode);
// }
//在鍵盤按鍵松開時觸發(fā)
// document.onkeyup=function(event){
// alert(event.keyCode);
// }
//鍵盤按下并釋放一個鍵時觸發(fā)
// document.onkeypress=function(event){
// alert(event.keyCode);
// }
let show =document.getElementById("show");
let text=document.getElementById("text");
text.onkeyup=function(){
let length =text.value.length;
show.innerHTML=length;
}
</script>
2.9 window
<script>
var a =10;
console.log(window.a);
function b(){
console.log(this);
}
window.b();
</script>
3.0 confirm
<div>
<span id="mi">小米8
<button id="btn">btn</button>
</span>
</div>
<script>
// confirm 有返回值 確定 》 true 取消》false
// window.confirm("是否取消");
let btn=document.getElementById("btn");
let mi=document.getElementById("mi");
btn.onclick=function(){
var result =window.confirm("你確定不要小米8了嗎");
if(result){
mi.style.display="none"
}else{
mi.style.display="block";
}
}
</script>
