day02
2018-06-28 本文已影响0人
克马
A今天学到了什么
1.实现勾选
<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奇数项
even偶数项 */
ul>li:nth-child(odd){
color: red;
}
ul>li:nth-child(even){
color: blue;
}
</style>
2.3JS实现隔行变色
<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
// 只能获取内联样式
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（节点）
6.1node用法
<p>hello world <span>good</span></p>
<script>
// 获取节点中所有的文本内容
var p=document.getElementsByTagName("p")[0];
var nodeContent=p.textContent;
console.log(nodeContent);
</script>
6.2node value
<!-- 注释节点 -->
<!-- p标签是元素节点 -->
<!-- hello world 是文本节点 -->
<p> hello world</p>
<!-- node value 只能获取注释节点和文本节点 -->
<script>
</script>
</body>
6.3node type
<!-- -->
<p class="one" id="p">hello world</p>
<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="one">hello world</p>
</div>
<button id="add">add</button>
<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 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克隆节点cloneNode
<p>hello world</p>
<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="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树以及相关的图片资源加载完成之后执行相关的代码
</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="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.小米登录页面的实现
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.让对应参数的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>
