这段代码展示了多个关于网页交互和元素操作的实例，包括使用JavaScript实现选项卡切换、获取和设置自定义属性、节点操作（如获取子元素、父元素、添加删除元素）、元素样式操作（如创建、删除、克隆、获取尺寸和位置）、以及仿天猫导航栏的实现。通过这些实例，可以深入理解DOM操作和网页动态效果的创建方法。
01-练习
选项卡
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
.news {
width: 360px;
margin: 100px auto;
overflow: hidden;
}
.hd {
border: 1px solid #ccc;
background-color: #fafaff;
height: 36px;
line-height: 36px;
display: flex;
}
.hd a {
padding: 0 10px;
margin-left: -2px;
}
.hd a.on {
background-color: #fafaff;
border-top: 3px solid #f60;
margin-top: -1px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background-color: #fff;
height: 35px;
}
.news ul li {
display: none;
}
.news ul li.on {
display: block;
}
</style>
</head>
<body>
<div class="news">
<div class="hd">
<a class="on" href="javascript:;">欧美</a>
<a href="javascript:;">日韩</a>
<a href="javascript:;">国产</a>
<a href="javascript:;">动漫</a>
</div>
<ul class="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="news">
<div class="hd">
<a class="on" href="javascript:;">欧美</a>
<a href="javascript:;">日韩</a>
<a href="javascript:;">国产</a>
<a href="javascript:;">动漫</a>
</div>
<ul class="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="news">
<div class="hd">
<a class="on" href="javascript:;">欧美</a>
<a href="javascript:;">日韩</a>
<a href="javascript:;">国产</a>
<a href="javascript:;">动漫</a>
</div>
<ul class="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
var aNews = document.querySelectorAll('.news')
aNews.forEach(function (ele) {
tab(ele)
})
function tab(obj) {
// 1. 获取
var aBtn = obj.querySelectorAll('.hd a')
var aLi = obj.querySelectorAll('.list li')
// 2. 事件
aBtn.forEach(function (ele, index) {
ele.onclick = function () {
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].classList.remove('on')
aLi[i].classList.remove('on')
}
ele.classList.add('on')
aLi[index].classList.add('on')
}
})
}
</script>
</body>
02-获取自定义属性
<body>
<div class="box" abc="123"></div>
<script>
var oBox = document.querySelector('.box')
// console.log(oBox.className)
// console.log(oBox.abc) // w3c不允许直接获取自定义属性
// 操作自定义属性
// - attribute
// 获取
// - 已有和自定义属性都能获取到
// console.log(oBox.getAttribute('class'))
// console.log(oBox.getAttribute('abc'))
// 设置自定属性
oBox.setAttribute('idx', 1)
oBox.setAttribute('id', 9527)
// 删除
oBox.removeAttribute('abc')
</script>
</body>
02-获取自定义属性2
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
li {
list-style: none;
width: 378px;
float: left;
border: 1px solid #ccc;
margin: 10px;
height: 400px;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var aLi = document.querySelectorAll('li')
aLi.forEach(function (ele, index) {
ele.setAttribute('data-sku', index * 3) // 设置属性
ele.onclick = function () {
console.log(ele.getAttribute('data-sku')) // 获取属性
}
})
</script>
</body>
03-节点
<body>
<ul>
<li>1</li>
<li>2
<ol>
<li>2-1</li>
<li class="active">2-2</li>
<li>2-3</li>
</ol>
</li>
<li>3</li>
<div>div</div>
</ul>
<script>
// 节点 标签 元素
var oUl = document.querySelector('ul')
// var aLi = document.querySelectorAll('ul>li')
// 获取子元素
// var child = oUl.children
// console.log(child)
// 获取父元素
// - DOM 顶级对象就是 Document 往上就没得父级
// console.log(oUl.parentNode.parentNode.parentNode.parentNode)
// 获取第一个子级
// console.log(oUl.firstElementChild)
oUl.firstElementChild.style.background = 'red'
// 获取最后一个子元素
oUl.lastElementChild.style.background = 'yellow'
var oActive = document.querySelector('.active')
// 上一个兄弟节点
// console.log(oActive.previousElementSibling)
oActive.previousElementSibling.style.background = 'cyan'
// 下一个兄弟节点
oActive.nextElementSibling.style.background = 'cyan'
</script>
</body>
04-操作元素
<style>
b {
color: red;
}
</style>
</head>
<body>
<div>
<span>111</span>
</div>
<script>
// create 创建
// Elements 元素
var p = document.createElement('p')
p.innerHTML = 'pppp <b>删除</b>'
// console.log(p)
// 把创建好的标签添加到div里面
var oBox = document.querySelector('div')
// 在最后添加一个子元素
// oBox.appendChild(p)
// 在谁之前添加
// oBox.children[0] 在第一个子元素之前添加
oBox.insertBefore(p, oBox.children[0])
</script>
</body>
05-删除元素
<body>
<ul>
<li>1 <span>删除</span></li>
<li>2 <span>删除</span></li>
<li>3 <span>删除</span></li>
<li>4 <span>删除</span></li>
<li>5 <span>删除</span></li>
<li>6 <span>删除</span></li>
</ul>
<script>
var oUl = document.querySelector('ul')
var aLi = document.querySelectorAll('li span')
aLi.forEach(function (ele) {
ele.onclick = function () {
// 删除自己
// ele.parentNode.remove()
// 删除自己的子级
oUl.removeChild(ele.parentNode)
}
})
</script>
</body>
06-克隆
<style>
div {
background-color: yellow;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
<p>ppp</p>
</div>
<script>
var oBox = document.querySelector('div')
// 克隆
// - 如果参数为true 叫深度克隆（复制结构）
var cloneNode = oBox.cloneNode(true)
// 添加到页面里面
document.body.appendChild(cloneNode)
console.log(cloneNode)
</script>
</body>
07-留言板
<body>
<textarea class="txt"></textarea>
<input class="btn" type="button" value="按钮">
<ul class="list">
<li>111 <span>删除</span></li>
<li>222 <span>删除</span></li>
<li>333 <span>删除</span></li>
</ul>
<script>
// 获取元素
var oTxt = document.querySelector('.txt')
var oBtn = document.querySelector('.btn')
var oList = document.querySelector('.list')
// 加事件
oBtn.onclick = function () {
if (oTxt.value === '') {
alert('不能为空')
return
}
// 获取到文本内容 value
var val = oTxt.value
// 创建一个li, 把文本内容赋值给 li
var li = document.createElement('li')
li.innerHTML = val + ' <span>删除</span>'
// 把li添加到ul里面
// oList.appendChild(li)
oList.insertBefore(li, oList.children[0])
delFn()
// 清空value
oTxt.value = ''
}
function delFn() {
// 获取span
var aSpan = document.querySelectorAll('.list span')
// 给span加事件 进行删除
aSpan.forEach(function (ele) {
ele.onclick = function () {
ele.parentNode.remove()
}
})
}
delFn()
</script>
</body>
08-获取非行间样式
<style>
.box {
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid red;
margin: 20px;
background-color: pink;
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
<p>ppp</p>
<p>ppp</p>
<p>ppp</p>
<p>ppp</p>
<p>ppp</p>
<p>ppp</p>
<p>ppp</p>
<p>ppp</p>
</div>
<script>
var oBox = document.querySelector('.box')
// 非行间样式
// - 不兼容ie6 7 8
// console.log(getComputedStyle(oBox).width)
// console.log(getComputedStyle(oBox).height)
// console.log(getComputedStyle(oBox).border)
// console.log(getComputedStyle(oBox).fontSize)
// 只能在ie下使用
// console.log(oBox.currentStyle.width)
function getStyle(obj, attr) {
if (window.getComputedStyle) {
return getComputedStyle(obj)[attr]
} else {
return obj.currentStyle[attr]
}
}
var w = getStyle(oBox, 'width')
var h = getStyle(oBox, 'height')
console.log(w, h)
</script>
</body>
09-获取元素大小
<style>
.box {
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid red;
margin: 20px;
background-color: pink;
overflow: auto;
}
</style>
</head>
<body>
<div style="width: 200px;" class="box">
<p>ppp</p>
<p>ppp</p>
<p>ppp</p>
<p>ppp</p>
<p>ppp</p>
<p>ppp</p>
<p>ppp</p>
<p>ppp</p>
</div>
<script>
var oBox = document.querySelector('.box')
// css盒模型：包含margin
// js盒模型：不包含margin
// console.log(oBox.offsetWidth, oBox.offsetHeight)
// 可视区大小，不包含边框
// console.log(oBox.clientWidth, oBox.clientHeight)
// 内容大小
// console.log(oBox.scrollWidth, oBox.scrollHeight)
console.log(oBox.style.width) // 行间样式
</script>
</body>
10-元素位置
<style>
.box1 {
width: 400px;
height: 400px;
background-color: yellow;
margin: 0 auto;
position: relative;
}
.box2 {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
left: 10px;
top: 10px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<script>
var oBox = document.querySelector('.box2')
// 根据定位父级来查找位置
// 父级没有定义根据页面
// console.log(oBox.offsetLeft, oBox.offsetTop)
// console.log(oBox.offsetLeft + oBox.parentNode.offsetLeft, oBox.offsetTop + oBox.parentNode.offsetTop)
// left top right bottom
console.log(oBox.getBoundingClientRect().left)
</script>
</body>
11-仿天猫导航
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.nav {
width: 792px;
box-shadow: 0 0 10px #ccc;
border-radius: 10px;
height: 64px;
line-height: 64px;
margin: 100px auto;
position: relative;
}
.list {
display: flex;
position: relative;
}
.list li {
width: 88px;
text-align: center;
}
.tmall {
width: 88px;
height: 64px;
background: url(https://www.jq22.com/demo/jsnavtm202006031644/images/tMall.png) no-repeat;
position: absolute;
left: 0;
top: 0;
transition: .3s;
}
</style>
</head>
<body>
<div class="nav">
<span class="tmall"></span>
<ul class="list">
<li>双11狂欢</li>
<li>服装会场</li>
<li>数码家电</li>
<li>家具建材</li>
<li>母婴童装</li>
<li>手机会场</li>
<li>美妆会场</li>
<li>进口会场</li>
<li>飞猪旅行</li>
</ul>
</div>
<script>
var aLi = document.querySelectorAll('.list li')
var oTamll = document.querySelector('.tmall')
// 起始位置
var start = 0
aLi.forEach(function (ele) {
ele.onmouseover = function () {
// console.log(ele.offsetLeft)
oTamll.style.left = ele.offsetLeft + 'px'
}
ele.onmouseout = function () {
// console.log(ele.offsetLeft)
oTamll.style.left = start + 'px'
}
ele.onclick = function () {
start = ele.offsetLeft
}
})
</script>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
