发表于： 2022-12-12 20:10:30
0 307
今天学习的js知识点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子节点</title>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<ol>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ol>
<div class="demo">
<div class="box">
<span class="erweima">×</span>
</div>
</div>
<script>
// var box = document.querySelector('.box');
// console.dir(box);
//1、父节点 parentNode
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
//得到的是离元素最近的父级节点 如果找不到父节点 就返回为 null
erweima.parentNode;
// console.log(erweima.parentNode);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义属性</title>
<style>
</style>
</head>
<body>
<!-- <div id="demo" index="1" class="nav"></div>-->
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
// var div = document.querySelector('div');
// //1、获取全是的属性
// //（1） element.属性
// console.log(div.id); //demo
// //（2）element.getAttribute('属性') get得到获得 Attribute 属性的意思
// //我们程序员 自己添加的属性 我们称为自定义属性 index
// console.log(div.getAttribute('id')); //demo
// console.log(div.getAttribute('index')); //demo
//
// //2、设置属性值
// //(1) element.属性= '值';
// div.id = 'test';
// div.className = 'navs';
// //(2) element.setAttribute('属性','值');
// div.setAttribute('index','2');
// div.setAttribute('class','footer');
// //3、移除属性 removeAttribute(属性)
// div.removeAttribute('index');
//H5规定自定义属性 data- 开头做完属性名并且赋值 例如 data-index
var div = document.querySelector('div');
console.log(div.getAttribute('getTime'));
div.setAttribute('data-time' , 20);
console.log(div.getAttribute('data-time'));
console.log(div.getAttribute('data-list-name'));
// h5新增的获取自定义属性的方法 它只能获取 data- 开头的
// dataset 是一个集合里面存放了所有以data开头的自定义属性。
console.log(div.dataset);
// console.log(div.dataset.getTime); //undefined 未定义的
console.log(div.dataset.index);
console.log(div.dataset.time);
console.log(div.dataset['time']);
//如果自定义属性里面有多高-链接的单词，我们获取的时候采取 驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
</script>
</body>
</html>
小练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab栏切换</title>
<style>
* {
margin: 0;
padding: 0;
}
.tab {
margin: 100px auto;
width: 650px;
height: 400px;
background-color: pink;
}
.tab_list {
height: 39px;
background-color: #e3e3e3;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
list-style: none;
}
.tab_list .current {
background-color: red;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
padding: 20px;
}
</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>
//H5规定自定义属性 date- 开头做完属性名并且赋值 例如 date-index
//1、获取元素
var tab_list = document.querySelector('.tab_list');
var lis = document.querySelectorAll('li');
var items = document.querySelectorAll('.item');
// for循环绑定点击事件
for(var i = 0; i < lis.length; i++) {
// 给五个li 设置索引号
lis[i].setAttribute('data-index', i);
lis[i].onclick = function () {
//干掉所以人，其余的li清除class这个表
for(var i = 0; i < lis.length; i++) {
//className 获取或设置指定元素的 class 属性的值。
lis[i].className = ''
}
//留下自己
this.className = 'current';
//2、显示内容模块
var index = this.getAttribute('data-index');
console.log(index);
//干掉所有人 让其余的item 这些 div 隐藏（排他思想）
for(var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>
</body>
</html>
返回列表
评论