目录
自定义属性
元素的本质就是对象（元素这个对象是浏览器内置的帮我们去定义好的,包含了很多属性和值都是天生自带的，我们也可以自己去给元素定义属性和值
只要是对象就符合对象的操作（给值就是设置，不给值就是获取）
div.id = "box";
// div.className = "myBox";
div["className"] = "myBox";
// 获取
console.log(div.id);
console.log(div["className"]);
//获取元素
var div = document.getElementsByTagName("div")[0];
// 设置
// 原来没有就是增加
div.hello = "哈喽";
div[""] = "中公教育";
div.zHello = "helloWorld";
console.dir(div);
// 获取
console.log(div.test);//undefined
console.log(div.hello);
console.log(div.zhonggongjiaoyu);
console.log(div.zHello);
扫描二维码关注公众号，回复：
13303828 查看本文章
自定义索引
自定义索引的本质就是自定义属性，只不过是将属性对应的值赋值为数字
// 自定义索引的本质就是自定义属性，只不过是将属性对应的值赋值为数字
var oLis = document.getElementsByTagName("li");
console.log(oLis);
// 绑定事件
for (var i = 0; i < oLis.length; i++) {
// 自定义索引
oLis[i].aIndex = i;
oLis[i].onclick = function () {
// 事件触发的时候循环已经结束了，i的值就是条件不满足的值
// console.log(i);
// console.log(oLis[i]);
console.log(this);
console.dir(this);
console.log(this.aIndex);
}
} 
自定义标识
// 获取元素
var aImg = document.getElementsByTagName("img")[0];
// 自定义标识
var flag = true; //默认值是true 标识当前是默认的状态
// 绑定事件
aImg.onclick = function(){
// 判断
if(flag == true){ //暗的状态
// 变亮
// console.log(this);
// 改变图片的src
this.src = "./img/bright.jpg";
// 重新给flag赋值
flag = false;
}else{ //亮的状态
// 变暗
// 改变图片的src
this.src = "./img/dark.jpg";
// 重新给flag赋值
flag = true;
}
}选项卡案例
案列简述，点击css显示css对应界面内容，点击Html显示Html内容
<style>
* {
padding: 0;
margin: 0;
}
ul,
ol,
li {
list-style-type: none;
}
.tab {
width: 1226px;
height: 460px;
margin: 50px auto;
border: 1px solid orangered;
}
.tab ul {
height: 30px;
border-bottom: 1px solid orangered;
}
.tab ul li {
line-height: 30px;
float: left;
width: 100px;
text-align: center;
color: #333;
}
.tab div {
width: 100%;
height: 429px;
line-height: 429px;
text-align: center;
/* 默认都是隐藏的 */
display: none;
}
</style>
</head>
<body>
<div id="tab" class="tab">
<ul>
<li style="color: orangered;">HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<div style="display: block;">HTML内容</div>
<div>CSS内容</div>
<div>JavaScript内容</div>
</div>
<script>
// 获取元素
var tab = document.getElementById("tab");
var oLis = tab.getElementsByTagName("li");
var oDivs = tab.getElementsByTagName("div");
console.log(oLis, oDivs);
// 选项卡实现思路：事件触发先清空所有的激活样式，然后再让当前点击那个li和对应的div有激活样式
// 循环绑定事件
for (var i = 0; i < oLis.length; i++) {
// 自定义索引
oLis[i].index = i;
// 给当前这个li绑定事件
oLis[i].onclick = function () {
// 先清空所有的激活样式
for (var i = 0; i < oLis.length; i++) {
oLis[i].style.color = "#333";
oDivs[i].style.display = "none";
}
// 然后再让当前点击那个li和对应的div有激活样式
this.style.color = "orangered";
console.log(this.index); //获取自定义属性（索引）对应的值
oDivs[this.index].style.display = "block";
}
}
</script>QQ列表的展开案例
样式代码随意
<ul id="list">
<li>
<!-- 标题，联系人-->
<p><img src="img/ico1.gif" alt="" />朋友</p>
<ul class="box">
<li>张珊</li>
<li>张珊</li>
<li>张珊</li>
</ul>
</li>
<li>
<!-- 标题，联系人-->
<p><img src="img/ico1.gif" alt="" />家人</p>
<ul class="box">
<li>李师傅</li>
<li>李师傅</li>
<li>李师傅</li>
<li>李师傅</li>
</ul>
</li>
<li>
<!-- 标题，联系人-->
<p><img src="img/ico1.gif" alt="" />陌生人</p>
<ul class="box">
<li>发放健康大</li>
<li>发放健康大</li>
<li>发放健康大</li>
<li>发放健康大</li>
</ul>
</li>
</ul>
<script>
// 获取元素
var list = document.getElementById("list"),
oPs = list.getElementsByTagName("p"),
oUls = list.getElementsByTagName("ul"),
oImgs = list.getElementsByTagName("img");
console.log(oPs, oUls, oImgs);
// 绑定事件
for (var i = 0; i < oPs.length; i++) {
// 自定义属性
oPs[i].flag = true; //默认值是true 收起状态
// 自定义索引
oPs[i].index = i;
oPs[i].onclick = function () {
// console.log(this.flag);
// console.log(this.index);
// 判断状态
if (this.flag) { //收起状态
// 展开 展示对应的ul
oUls[this.index].style.display = "block";
// 修改对应图片的src
oImgs[this.index].src = "img/ico2.gif";
// 修改当前这个p标签flag属性对应的值
this.flag = false;
} else { //展开状态
// 收起 隐藏对应的ul
oUls[this.index].style.display = "none";
// 修改对应图片的src
oImgs[this.index].src = "img/ico1.gif";
// 修改当前这个p标签flag属性对应的值
this.flag = true;
}
}
}
</script>选项卡嵌套案例
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
}
.box {
width: 800px;
border: 1px solid #000000;
margin: 20px auto;
background: blue;
}
.box:after {
content: "";
display: block;
clear: both;
}
#leftBox {
float: left
}
#rightBox {
float: left;
}
#leftBox li {
width: 200px;
height: 89px;
background: red;
margin-bottom: 2px;
color: #fff;
font: 50px/89px "黑体";
text-align: center;
}
#rightBox div {
display: none;
}
#rightBox .active {
display: block;
}
#rightBox a {
display: block;
width: 600px;
height: 325px;
background: #0F0;
font-size: 100px;
color: #000;
text-align: center;
text-decoration: none;
line-height: 360px;
}
.tabUl {
display: table;
width: 100%;
}
.tabUl li {
display: table-cell;
background: #909;
color: #fff;
font-size: 20px;
text-align: center;
height: 40px;
line-height: 40px;
border-right: 2px solid #03C;
cursor: pointer;
}
.tabUl li.hover {
background: #fff;
color: #000;
}
#leftBox .active {
background: yellow;
color: #000;
}
</style>
</head>
<body>
<div class="box" id="box">
<ul id="leftBox">
<li class="active">a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<div id="rightBox">
<div id="rightBox1" class="active">
<a href="#">a1</a>
<ul class="tabUl">
<li class="hover">a1</li>
<li>a2</li>
<li>a3</li>
<li>a4</li>
</ul>
</div>
<div id="rightBox2">
<a href="#">b1</a>
<ul class="tabUl">
<li class="hover">b1</li>
<li>b2</li>
<li>b3</li>
<li>b4</li>
</ul>
</div>
<div id="rightBox3">
<a href="#">c1</a>
<ul class="tabUl">
<li class="hover">c1</li>
<li>c2</li>
<li>c3</li>
<li>c4</li>
<li>c5</li>
<li>c6</li>
</ul>
</div>
<div id="rightBox4">
<a href="#">d1</a>
<ul class="tabUl">
<li class="hover">d1</li>
<li>d2</li>
<li>d3</li>
<li>d4</li>
</ul>
</div>
</div>
</div>
<script>
// 获取元素
var leftBox = document.getElementById("leftBox"),
rightBox = document.getElementById("rightBox");
var oLis = leftBox.getElementsByTagName("li"),
oDivs = rightBox.getElementsByTagName("div");
console.log(oLis, oDivs);
// 绑定事件
for (var i = 0; i < oLis.length; i++) {
// 自定义索引
oLis[i].index = i;
// 给当前这个li绑定事件
oLis[i].onclick = function () {
// 先清空所有激活样式
for (var i = 0; i < oLis.length; i++) {
oLis[i].className = "";
oDivs[i].className = "";
}
// 然后再让当前点击那个li和对应的div有激活样式
oLis[this.index].className = "active";
oDivs[this.index].className = "active";
}
}
// 代码复用，简单做一个封装
// parent:父级元素 限定获取范围
function tabChange(parent) {
console.log(parent);
// 获取当前这个父级元素下的子元素
var a = parent.getElementsByTagName("a")[0];
var oLis = parent.getElementsByTagName("li");
console.log(a, oLis);
// 给每一个li绑定事件
for (var i = 0; i < oLis.length; i++) {
oLis[i].onmouseover = function () {
// 先清空所有激活样式
for (var j = 0; j < oLis.length; j++) {
oLis[j].className = "";
}
// 然后再让当前这个li有激活样式
this.className = "hover";
// 将当前这个li的内容展示到a标签
a.innerHTML = this.innerHTML;
}
}
}
// 函数调用
tabChange(oDivs[0]);
tabChange(oDivs[1]);
tabChange(oDivs[2]);
tabChange(oDivs[3]);
</script>