H5 api
1. querySelector() 获取符合选择器的第一个元素
2. querySelectorAll() 获取符合选择器的所有元素
类选择器
1. jquery操作类的方法:addClass() removeClass() toggleClass() hasClass()
2. h5也有类似的api 基于一个对象classList的方法 add() remove() toggle() contains()
让我们来利用这个选择器做一个 小案例
<style>
ul {
list-style: none;
}
li {
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
background: green;
float: left;
cursor: pointer;
}
li.active {
background: red;
}
</style>
<ul>
<li>菜单1</li>
<li class="active">菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
<script>
window.onload = function () {
/*切换当前样式的效果*/
document.querySelector('ul').onclick = function (e) {
/*当前的LI*/
var currentLi = e.target;
/*如果已经选中 程序停止*/
if(currentLi.classList.contains('active')) return false;
/*如果没有选中*/
/*之前的去除*/
document.querySelector('li.active').classList.remove('active');
/*在给当前的加上*/
currentLi.classList.add('active');
}
}
</script>
效果
自定义属性
1.自定义属性 data-* 自定义属性
2.获取元素的自定义属性 jquery获取方式 $(‘div’).data('自定义属性的名称)
3.自定义属性的名称是什么? data-user==>user data-user-name==>userName
4.命名规则 遵循驼峰命名法
5.获取元素的自定义属性 h5的方式 dataset 自定义属性的集合
自定义属性——和js自定义属性的区别
- jquery的data() 操作内存
- H5的dataset 操作dom
让我们对上面那一个案例做一个加工
他是通过自定义属性名绑定事件的 并不依赖序号 所以在我们改变li的顺序也不会发生错乱的情况
小案例v1.0
<style>
ul:first-child {
list-style: none;
}
ul:first-child li {
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
background: green;
float: left;
cursor: pointer;
}
ul:first-child li.active {
background: red;
}
.box li{
width: 400px;
height: 400px;
background: pink;
display: none;
}
.box li.show{
display: block;
}
</style>
<ul class="nav">
<!--在渲染的时候 大小的属性会转换成小写 -->
<li data-content-id="content01">菜单1</li>
<li data-content-id="content02" class="active">菜单2</li>
<li data-content-id="content03">菜单3</li>
<li data-content-id="content04">菜单4</li>
</ul>
<ul class="box">
<li id="content01">内容1</li>
<li id="content03">内容3</li>
<li id="content04">内容4</li>
<li id="content02" class="show">内容2</li>
</ul>
<script>
/*tab切换*/
window.onload = function () {
document.querySelector('.nav').onclick=function (e) {
var currentLi=e.target;
//已经选中停止操作
if (currentLi.classList.contains('active'))return false;
// 1更改样式
var oldLi=document.querySelector('.nav li.active');
oldLi.classList.remove('active');
currentLi.classList.add('active');
// 2根据选中页签去显示对应的内容
//隐藏之前的
var oldContent=document.querySelector('#'+oldLi.dataset.contentId);
oldContent.classList.remove('show');
//显示当前的
var currentContent=document.querySelector("#"+currentLi.dataset.contentId);
currentContent.classList.add('show');
}
}
</script>