DOM元素、改变背景颜色、导航条、购物车、万年历、图片切换、树形列表
2018-05-26 09:09 · 字数 1121 · 阅读 3 · 日记本
一、DOM元素
Dom:
增删改查
查找：
1.元素间关系
2.HTML
ID
class
tag
name
3.querySelector()
querySelectorAll()
//增加：
//1.创建一个元素
var a=document.createElement('a');
//2.给元素添加属性或内容：
a.href='http://www.baidu.com';
a.innerHTML='GO BAIDU';
//3.追加到dom树 父元素.appendChild(子元素);
document.querySelector('div').appendChild(a);
二、改变背景颜色
改变背景颜色
咏鹅
鹅鹅鹅
曲项向天歌
白毛浮绿水
红掌拨清波
//查找div 标签名
var div=document.querySelectorAll('div')[0];
console.log(div);
//查找body
var body=document.getElementsByClassName('body')[0];
console.log(body);
//div鼠标移入
div.onmouseover=function(){
//div字体颜色
div.style.color='#f00';
//body背景颜色
body.style.background='yellow';
}
//div鼠标移出
div.onmouseout=function(){
//div字体颜色
div.style.color='#000';
//body背景颜色
body.style.background='cyan';
}
三、导航条
导航条
*{
margin:0;
padding:0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
ul{
width:800px;
margin:0 auto;
background: #f00;
height:40px;
line-height: 40px;
}
ul li{
float:left;
}
ul li a{
width:100px;
color:#fff;
display:inline-block;
text-align: center;
}
首页
公司简介
联系我们
//获取li
var li=document.querySelectorAll('ul>li');
console.log(li);
//遍历
for(var i=0;i
//li鼠标移入
li[i].onmouseover=function(){
//背景
this.style.background='#fff';
//字体颜色
this.firstElementChild.style.color='#f00';
}
//鼠标移除
li[i].onmouseout=function(){
//背景
this.style.background='#f00';
//字体颜色
this.firstElementChild.style.color='#000';
}
}
四、购物车
/*span{*/
/*display: inline-block;*/
/*width:20px;*/
/*height:20px;*/
/*background-color: #999;*/
/*padding-left: 3px;*/
/*}*/
table{
text-align:center;
}
tbody>tr>td:nth-child(4){
background-color: red;
}
tbody>tr:nth-child(4)>td:last-child{
background-color: green;
}
商品名称
单价
数量
小计
iphone7
¥5999
+
1
-
¥5999
iphone7
¥5999
+
1
-
¥5999
iphone7
¥5999
+
1
-
¥5999
总计
¥17997
function calc(btn){
//第一步让数量加或减
//先找到btn的父元素，然后再找span元素
var span=btn.parentElement
.querySelector("span");
//获取span的内容
var n=parseInt(span.innerHTML);
if(btn.innerHTML=="+"){
n+=1;
}else if(n>1){
n--;
}else{
n=1
}
span.innerHTML=n;
//第二步：让每行的小计变化
var price=btn.parentElement
.previousElementSibling
.innerHTML
.slice(1);
console.log(price);
var subTotal=price*n;
btn.parentElement.nextElementSibling
.innerHTML="¥"+subTotal.toFixed(2);
//第三步：让总计变化
//找每行中的小计 数组
var tds=document.querySelectorAll('tbody>tr>td:last-child');
//便利,同时声明总计
for(var i=0,total=0;i
//tds[i]
//总计=当前的小计的内容截取
total+=parseFloat(tds[i].innerHTML.slice(1));
}
//找到tfoot中的总计，它的 内容=¥总计tofixed(2)
document.querySelector('tfoot>tr>td:last-child')
.innerHTML='¥'+total.toFixed(2);
}
五、万年历
万年历
*{
margin:0;
padding:0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.container{
width:250px;
background: #eaeaea;
margin:0 auto;
height:230px;
}
.container>ul{
overflow: hidden;
padding:10px 0 10px 10px;
}
.container>ul>li{
width:50px;
float:left;
background: #000;
text-align: center;
color:#fff;
margin-top:10px;
margin-right:10px;
}
.container>ul>li>span{
display: inline-block;
width:50px;
}
.container>p{
width:230px;
height:40px;
border:1px solid #fff;
background: #666;
margin-left:10px;
margin-bottom:10px;
}
.container>ul>li>p{
display: none;
}
1JAN
1月节日111111111
1JAN
2月节日22222222
1JAN
3月节日333333333333333
1JAN
4月节日4444444
1JAN
1JAN
1JAN
1JAN
1JAN
1JAN
1JAN
1JAN
//li变色
var li=document.querySelectorAll('.container>ul>li');
var p=document.querySelector('.container>p');
for(var i=0;i
li[i].onmouseover=function(){
this.style.background='#fff';
this.style.color='#f00';
p.innerHTML=this.lastElementChild.innerHTML;
}
li[i].onmouseout=function(){
this.style.background='#000';
this.style.color='#fff';
}
}
六、图片切换
Document
*{
margin:0;
padding:0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.container{
width:600px;
margin:0 auto;
}
.container>ul{
overflow: hidden;
}
.container>ul>li{
float:left;
}
.container>div{
width:400px;
height:400px;
border:1px solid #000;
margin-left:100px;
}
.container>div>img{
width:100%;
}
//找li中的img
var img=document.querySelectorAll('.container>ul>li>img');
var bigImg=document.querySelector('.container>div>img');
for(var i=0;i
img[i].onclick=function(){
bigImg.src=this.src;
}
}
七、树形列表
属性列表
*{
margin:0;
padding:0;
}
div{
height:200px;
line-height: 200px;
/* display: inline-block;*/
float:left;
}
#d1,#d3{
background: #ffcc00;
}
#d2{
background: #0f0;
}
属性列表
<<
树形内容
var d1=document.getElementById('d1');
var d2=document.getElementById('d2');
// d2.onclick=function(){
// if(d2.innerHTML=='<<'){
// d1.style.display='none';
// d2.innerHTML='>>';
// }else{
// d1.style.display='block';
// d2.innerHTML='<<';
// }
// }
var bool=true;
d2.onclick=function(){
if(bool){
bool=false;
d1.style.display='none';
d2.innerHTML='>>';
}else{
bool=true;
d1.style.display='block';
d2.innerHTML='<<';
}
}