A今天學到了什么
1.實現(xiàn)勾選
<button id="btn">btn</button>
<input type="checkbox">籃球
<script>
var btn=document.getElementById("btn");
var input=document.getElementsByTagName("input")[0];
console.log(input);
btn.onclick=function(){
// input.checked=(input.checked==true)?false:true;
input.checked=!input.checked;
}
</script>
2.修改
2.1修改元素的樣式
<p id="p">hello world</p>
<button id="btn">change</button>
<script>
var btn=document.getElementById("btn");
var p=document.getElementById("p");
btn.onclick=function(){
p.style.background="red";
}
</script>
2.2隔行變色
<style>
/* odd奇數(shù)項
even偶數(shù)項 */
ul>li:nth-child(odd){
color: red;
}
ul>li:nth-child(even){
color: blue;
}
</style>
2.3JS實現(xiàn)隔行變色
<script>
var lis =document.getElementsByTagName("li");
for(let i = 0 ; i<lis.length; i++){
if(i%2==0){
lis[i].style.color="red";
// lis[i].style.backgroundColor="red";
}
else{
lis[i].style.color="blue";
}
}
</script>
3.顯示隱藏
<div id="div" style="display: block">
</div>
<button id="btn">
toggle
</button>
<script>
var div=document.getElementById("div");
var btn=document.getElementById("btn");
btn.onclick=function(){
// let value =div.style.display;
// if(value=="block"){
// div.style.display="none";
// }else{
// div.style.display="block";
// }
div.style.display=(div.style.display=="none")?"block":"none";
}
</script>
4.局限性
<div id="test" style="width: 100px">
</div>
<script>
// element.style.attr
// 只能獲取內(nèi)聯(lián)樣式
let test =document.getElementById("test");
// let value=test.style.width;
// console.log(value);
// 1.在chrome下獲取
// getComputedStyle（元素，null）.屬性
let value=window.getComputedStyle(test,null).width;
// 在IE瀏覽器
let ieValue=test.currentStyle.width;
console.log(value);
</script>
5.通過className獲取
<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=(p.className=="current")?"none":"current"
}
</script>
6.node（節(jié)點）
6.1node用法
<p>hello world <span>good</span></p>
<script>
// 獲取節(jié)點中所有的文本內(nèi)容
var p=document.getElementsByTagName("p")[0];
var nodeContent=p.textContent;
console.log(nodeContent);
</script>
6.2node value
<!-- 注釋節(jié)點 -->
<!-- p標簽是元素節(jié)點 -->
<!-- hello world 是文本節(jié)點 -->
<p> hello world</p>
<!-- node value 只能獲取注釋節(jié)點和文本節(jié)點 -->
<script>
</script>
</body>
6.3node type
<!-- -->
<p class="one" id="p">hello world</p>
<script>
// node type
// 1.元素節(jié)點
// 2.屬性節(jié)點
// 3.文本節(jié)點
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>
6.4 增加節(jié)點appendChild
<div id="parent">
<p id="one">hello world</p>
</div>
<button id="add">add</button>
<script>
// 增加節(jié)點 語法 parentNode.appendChild(childNode)
// createElement()創(chuàng)建元素節(jié)點
// createTextNode 創(chuàng)建文本節(jié)點
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);
// console.log(p);
// parent.appendChild(p);(在后面增加)
// insertBefore 語法 parentNode.insertBefore(元素,id)
// parent.insertBefore(p,one);(在前面增加)
}
</script>
6.5 修改節(jié)點repalceChild
<div id="parent">
<p id="child"> hello world</p>
</div>
<button id="btn">btn</button>
<script>
// 語法parentNode.replaceChild(newNode,targetNode)
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>
6.6克隆節(jié)點cloneNode
<p>hello world</p>
<script>
// 克隆節(jié)點語法
// nodeElement.cloneNode(true);
var p= document.getElementsByTagName("p")[0];
var cp=p.cloneNode(true);
document.body.appendChild(cp);
</script>
7.事件
7.1 onfocus 和oblur
<input type="text" id="input">
<script>
// onfocus 獲取焦點
// oblur 失去焦點
// 在事件中 this指向正在執(zhí)行事件的對象
var input=document.getElementById("input");
input.onfocus=function(){
this.style.background="red";
}
input.onblur=function(){
this.style.background="green";
}
</script>
7.2 鼠標事件
<p id="test">hello world</p>
<script>
// var test= document.getElementById("test");
// onmouseover 鼠標移動到某元素上
// onmouseout 鼠標移出
test.onmouseover=function(){
this.style.color="red";
}
test.onmouseout=function(){
this.style.color="blue"
}
</script>
7.3 DOM事件
<title>Document</title>
<script src="JS/index.js">
// window.onload
// 整個DOM樹以及相關的圖片資源加載完成之后執(zhí)行相關的代碼
</script>
8.onchange
<input type="text" name="" id="">
<script>
// onchange 域的內(nèi)容發(fā)生改變的時候觸發(fā)
var input=document.getElementsByTagName("input")[0];
input.onchange=function(){
this.value="改變"
}
</script>
9.onsubmit
<form action="">
<input type="text">
<button type="submit">提交</button>
</form>
<script>
// onsubmit 表單被提交的時候發(fā)生
var submit = document.getElementsByTagName("form")[0];
submit.onsubmit=function(){
alert("提交菜單")
}
</script>
10.onresize
<div>
</div>
<script>
window.onresize=function(){
alert("瀏覽器窗口發(fā)生改變時觸發(fā)");
}
window.onscroll=function(){
alert("窗口滾動時觸發(fā)")
}
</script>
<style>
div{
height: 1000px;
background: red;
}
</style>
11.key的用法
<!-- 顯示對應的鍵盤號 -->
<!-- onkeydown 鍵盤按下時觸發(fā)
event.keyCode 按下的鍵盤對應的鍵盤碼-->
<!--onkeypress 按著鍵盤的時候 -->
<!-- onkeyup拿起來的時候 -->
<script>
document.onkeydown=function(event){
alert(event.keyCode)
}
</script>
12.em的用法
<p>你還可以輸入<em id="show">0</em>/150個字</p>
<textarea id="txt" cols="30" rows="10"></textarea>
<script>
let show=document.getElementById("show");
let txt =document.getElementById("txt");
txt.onkeyup=function(){
let length=txt.value.length;
show.innerHTML=length;
}
</script>
13.window的用法
13.1 window的屬性
<script>
// js的頂級作用域就是window
// 全局變量是window的屬性
// 方法是widnow的方法
var a= 10;
console.log(window.a);
function b(){
console.log(this);
}
// this指向window
window.b();
</script>
13.2 window confirm
<div>
<span id="mi">小米8</span> <button id="btn"> btn</button>
</div>
<script>
// 確定 返回 true 取消返回 false
var result= window.confirm("是否取消");
console.log(result);
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>
B.小米登錄頁面的實現(xiàn)
1.css部分
<style>
*{margin: 0;padding: 0}
.form{
width: 400px;
border: 1px solid #333;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
box-shadow: 0 0 10px 5px #333;
}
li{
list-style: none;
display: inline-block;
}
ul{
line-height: 50px;
}
.content{
position: relative;
height: 200px;
}
.content>div{
position: absolute;
height: 100%;
width: 100%;
}
.saoma{
display: none;
}
input{
width: 360px;
height: 40px;
margin-top: 20px;
}
.current{
color: orange;
}
</style>
2.html部分
<div class="form">
<ul>
<li class="current">賬號登錄</li>
<li>掃描登錄</li>
</ul>
<div class="content ">
<div class="account child">
<div><input type="text"></div>
<div><input type="password"></div>
<div><input type="submit" value="立即登錄"></div>
</div>
<div class="saoma child">
<img src="images/01.png" alt="">
</div>
</div>
</div>
3.JS部分
<!-- 1.給每個li一個點擊事件
2.給每個li一個index屬性
3.讓對應參數(shù)的contents顯示派撕，其他隱藏 -->
<script>
var lis=document.getElementsByTagName("li");
// var contents=document.getElementsByClassName("child");
var contents=document.querySelectorAll(".content>div");
// console.log(contents);
// 點擊li 讓正在被點擊的class=current 其他的class=""
for(let i=0;i<lis.length;i++){
lis[i].index=i;
lis[i].onclick=function(){
// 先將所有的li className 清空
for(let i=0;i<lis.length;i++){
lis[i].className="";
}
// 當前項的li class=current;
this.className="current";
for(let i =0;i<contents.length;i++){
contents[i].style.display="none";
}
// console.log(i);
contents[this.index].style.display="block";
}
}
</script>
