新浪下拉列表
<script>
//先找nav
let nav = document.querySelector('.nav')
let lis = nav.children
//遍历ul的四个子节点元素
// for(let i=0;i<lis.length;i++){
// lis[i].children[0].onmouseover = function(){
// for (let i = 0; i < lis.length; i++) {
// lis[i].children[1].style.display = 'none'
// }
// lis[i].children[1].style.display = 'block'
// }
// }
//或者
for (let i = 0; i < lis.length; i++) {
lis[i].onmouseover = function(){
lis[i].children[1].style.display = 'block'
}
lis[i].onmouseout = function(){
lis[i].children[1].style.display = 'none'
}
}
</script>
简单版发布留言
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul>
</ul>
<script>
let textarea = document.querySelector('textarea')
let btn = document.querySelector('button')
let ul = document.querySelector('ul')
btn.onclick = function(){
let li = document.createElement('li')
li.innerHTML = textarea.value
ul.insertBefore(li,ul.children[0])
}
</script>
删除留言
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul>
</ul>
<script>
//1、li里添加内容
//2、获取a标签,绑定点击事件
let textarea = document.querySelector('textarea')
let btn = document.querySelector('button')
let ul = document.querySelector('ul')
btn.onclick = function(){
let li = document.createElement('li')
li.innerHTML = textarea.value+"<a href = 'javascript:void(0);'>删除</a>"
ul.insertBefore(li,ul.children[0])
let a = document.querySelectorAll('a')
for (let i = 0; i < a.length; i++) {
a[i].onclick = function(){
//删除a标签父节点
ul.removeChild(this.parentNode)
}
}
}
</script>
动态生成表格案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
</style>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 1.先去准备好学生的数据
var datas = [{
name: '魏璎珞',
subject: 'JavaScript',
score: 100
}, {
name: '弘历',
subject: 'JavaScript',
score: 98
}, {
name: '傅恒',
subject: 'JavaScript',
score: 99
}, {
name: '明玉',
subject: 'JavaScript',
score: 88
}, {
name: '大猪蹄子',
subject: 'JavaScript',
score: 0
}];
//1、找tbody
let tbd = document.querySelector('tbody')
//2、数据有多少个对象,添加多少行 datas.length
for (let i = 0; i < datas.length; i++) {
//3、添加行<tr>
let tr = document.createElement('tr')
//4、添加列<td> 对象里的三个属性
for (let key in datas[i]) {
let td = document.createElement('td')
td.innerHTML = datas[i][key]
tr.appendChild(td)
}
//添加td里的删除
let td = document.createElement('td')
td.innerHTML = "<a href = 'javascript:void(0);'>删除</a>"
tr.appendChild(td)
//将tr添加到tbody
tbd.appendChild(tr)
}
//删除操作
let as = document.querySelectorAll('a')
for (let i = 0; i < as.length; i++) {
as[i].onclick = function(){
tbd.removeChild(this.parentNode.parentNode)
}
}
</script>
</body>
</html>
百度换肤
<ul class="baidu">
<li><img src="./images/1.jpg"></li>
<li><img src="./images/2.jpg"></li>
<li><img src="./images/3.jpg"></li>
<li><img src="./images/4.jpg"></li>
</ul>
<script>
//1、获取所有img元素
let imgs = document.querySelectorAll('img')
//2、遍历,给每一个img绑定点击事件
for (let i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
// this.src //图片路径
document.body.style.backgroundImage = 'URL(' + this.src + ')'
}
}
//3、把图片自己的src属性值,赋给body背景
</script>
表格隔行变色
<script>
//1、找tbody里面的所有tr元素
let trs = document.querySelector('tbody').querySelectorAll('tr')
//2、绑定两个事件
for(let i =0;i<trs.length;i++){
trs[i].onmouseover = function(){
// trs[i].className = 'bg'
trs[i].style.backgroundColor = 'pink'
}
trs[i].onmouseout = function(){
// trs[i].className = ''
trs[i].style.backgroundColor = ''
}
}
</script>
全选反选
<script>
//第一部分
//thead里的复选框,可以决定tbody中复选框状态
let j_cbAll = document.getElementById('j_cbAll')
let j_tbs = document.getElementById('j_tb').getElementsByTagName('input')
j_cbAll.onclick = function(){
// console.log(this.checked)
for (let i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked
}
}
//第二部分,给每一个tbody中复选框添加点击事件
//在点击事件的函数里,遍历tbody中复选框,查看每个复选框的勾选状态
//如果发现有复选框是未勾选状态,则thead里的复选框改为未勾选状态
for (let i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function(){
let flag = true //决定thead里复选框的状态
for (let i = 0; i < j_tbs.length; i++) {
if(!j_tbs[i].checked){
//表示有复选框未勾选
flag = false
break
}
}
j_cbAll.checked = flag
}
}
</script>
tab栏切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(50000)</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价(50000)模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
//1、获取元素 所有li 所有item
let lis = document.querySelectorAll('li')
let items = document.querySelectorAll('.item')
for(let i = 0; i < lis.length; i++) {
lis[i].onclick = function(){
//两件事,tab状态
for (let i = 0; i < lis.length; i++) {
lis[i].className = ''
}
this.className = 'current'
for (let i = 0; i < items.length; i++) {
items[i].style.display = 'none'
}
items[i].style.display = 'block'
}
}
</script>
</body>
</html>