A今天学到了什么
1.实现勾选
button id=btnbtnbutton
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)falsetrue;
input.checked=!input.checked;
}
script
2.修改
2.1修改元素的样式
p id=phello worldp
button id=btnchangebutton
script
var btn=document.getElementById(btn);
var p=document.getElementById(p);
btn.onclick=function(){
p.style.background=red;
}
script
2.2隔行变色
style
odd奇数项
even偶数项
ullinth-child(odd){
color red;
}
ullinth-child(even){
color blue;
}
style
2.3JS实现隔行变色
script
var lis =document.getElementsByTagName(li);
for(let i = 0 ; ilis.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)blocknone;
}
script
4.局限性
div id=test style=width 100px
div
script
element.style.attr
只能获取内联样式
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=btnbtnbutton
script
var btn=document.getElementById(btn);
var p=document.getElementById(p);
btn.onclick=function(){
p.className=(p.className==current)nonecurrent
}
script
6.node（节点）
6.1node用法
phello world spangoodspanp
script
获取节点中所有的文本内容
var p=document.getElementsByTagName(p)[0];
var nodeContent=p.textContent;
console.log(nodeContent);
script
6.2node value
!-- 注释节点 --
!-- p标签是元素节点 --
!-- hello world 是文本节点 --
p hello worldp
!-- node value 只能获取注释节点和文本节点 --
script
script
body
6.3node type
!-- --
p class=one id=phello worldp
script
node type
1.元素节点
2.属性节点
3.文本节点
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 增加节点appendChild
div id=parent
p id=onehello worldp
div
button id=addaddbutton
script
增加节点 语法 parentNode.appendChild(childNode)
createElement()创建元素节点
createTextNode 创建文本节点
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 修改节点repalceChild
div id=parent
p id=child hello worldp
div
button id=btnbtnbutton
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克隆节点cloneNode
phello worldp
script
克隆节点语法
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指向正在执行事件的对象
var input=document.getElementById(input);
input.onfocus=function(){
this.style.background=red;
}
input.onblur=function(){
this.style.background=green;
}
script
7.2 鼠标事件
p id=testhello worldp
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事件
titleDocumenttitle
script src=JSindex.js
window.onload
整个DOM树以及相关的图片资源加载完成之后执行相关的代码
script
8.onchange
input type=text name= id=
script
onchange 域的内容发生改变的时候触发
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 表单被提交的时候发生
var submit = document.getElementsByTagName(form)[0];
submit.onsubmit=function(){
alert(提交菜单)
}
script
10.onresize
div
div
script
window.onresize=function(){
alert(浏览器窗口发生改变时触发);
}
window.onscroll=function(){
alert(窗口滚动时触发)
}
script
style
div{
height 1000px;
background red;
}
style
11.key的用法
!-- 显示对应的键盘号 --
!-- onkeydown 键盘按下时触发
event.keyCode 按下的键盘对应的键盘码--
!--onkeypress 按着键盘的时候 --
!-- onkeyup拿起来的时候 --
script
document.onkeydown=function(event){
alert(event.keyCode)
}
script
12.em的用法
p你还可以输入em id=show0em150个字p
textarea id=txt cols=30 rows=10textarea
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小米8span button id=btn btnbutton
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.小米登录页面的实现
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;
}
.contentdiv{
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
divinput type=textdiv
divinput type=passworddiv
divinput type=submit value=立即登录div
div
div class=saoma child
img src=images01.png alt=
div
div
div
3.JS部分
!-- 1.给每个li一个点击事件
2.给每个li一个index属性
3.让对应参数的contents显示，其他隐藏 --
script
var lis=document.getElementsByTagName(li);
var contents=document.getElementsByClassName(child);
var contents=document.querySelectorAll(.contentdiv);
console.log(contents);
点击li 让正在被点击的class=current 其他的class=
for(let i=0;ilis.length;i++){
lis[i].index=i;
lis[i].onclick=function(){
先将所有的li className 清空
for(let i=0;ilis.length;i++){
lis[i].className=;
}
当前项的li class=current;
this.className=current;
for(let i =0;icontents.length;i++){
contents[i].style.display=none;
}
console.log(i);
contents[this.index].style.display=block;
}
}
script