A.今天你学到了什么
1. 'js'的各种使用方法
1.1通过点击按钮直接更改元素的背景颜色
<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 通过点击按钮，显示隐藏元素
<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通过点击按钮，添加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获得文本节点
<!--获得文本节点 -->
<p>hello world <span>
good
</span></p>
<script>
var p=document.getElementsByTagName("p")[0];
var nodeCondent=p.textContent;
console.log(nodeCondent);
</script>
1.6不同节点的返回类型
<!--
nodeType 节点类型的返回值
1.元素节点
2.属性节点
3.文本节点
-->
<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 在元素后增加节点
<!-- 在之后添加节点 -->
<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在元素前增加节点
<!-- insertBefore
语法：parentNode.insertBefore(assNode,targetNode)
createElement()创造元素节点
createTextNode（） 创造文本节点
-->
<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删除节点
<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 替换节点
<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克隆节点
<p>hello world</p>
<script>
var p=document.getElementsByTagName("p")[0];
var cp=p.cloneNode(true);
document.body.appendChild(cp);
</script>
2.2 事件中的得到和失去焦点
<!--
onfocus 获取焦点
onblur 失去焦点
this 表示 正在执行事件的对象-->
<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 鼠标的应用事件
<p id="test">hello world</p>
<script>
// onmouseover 鼠标移到某元素上
// onmouseout 鼠标离开某元素
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树以及相关图片资源加载完成后，执行相关代码
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 域的内容发生改变时触发
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>
//需要设置大小，背景
</div>
<script>
window.onresize=function(){
alert("浏览器窗口改变时触发");
}
window.onscroll=function(){
alert("窗口滚动时触发");
}
2.8 key
<p>你还可以输入<em id="show">0</em>/150个字</p>
<textarea id="text" cols="30" rows="10"></textarea>
<script>
// 键盘按下时触发
// document.onkeydown=function(event){
// alert(event.keyCode);
// }
//在键盘按键松开时触发
// document.onkeyup=function(event){
// alert(event.keyCode);
// }
//键盘按下并释放一个键时触发
// 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>
网友评论