广告栏案例
需求:
点击广告栏的小× 关闭整个广告栏部分
步骤:
1.获取元素 #close #header
2.#close的onclick点击事件
3.在事件驱动函数里面 给#header设置display="none";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#header{
height: 80px;
background-color: blue;
}
#banner{
width: 70%;
background-color: orange;
height: 80px;
margin: 0 auto;
position: relative;
}
#banner>#close{
width: 25px;
height: 25px;
display: inline-block;
background-color: rgba(0, 0, 0, 0.6);
color:white;
text-align: center;
line-height:25px;
font-size:25px;
cursor: pointer;
position: absolute;
right: 0;
}
#main{
height: 2500px;
background-color: red;
color:white;
text-align: center;
font-size:60px;
}
</style>
</head>
<body>
<header id="header">
<div id="banner">
<span id="close">×</span>
</div>
</header>
<div id="main">
页面主体
</div>
<script>
// 1.获取元素 #close #header
var header=document.getElementById("header");
var close=document.getElementById("close");
// 2.#close的onclick点击事件
close.onclick=function () {
// 3.在事件驱动函数里面 给#header设置display="none";
header.style.display="none";
}
</script>
</body>
</html>图片案例
事件 鼠标移入事件 和鼠标移出事件
移入:
onmouseover
移出
onmouseout
步骤:
1.获取事件源(元素) #img
2.#img添加鼠标移入事件
3.在事件驱动函数里面 给img设置 jd2.png(绿狗)
4.给img添加鼠标离开事件
5.在离开事件的驱动函数里面 给img设置 jd1.png(红狗)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#img{
border: 1px solid #000;
cursor: pointer;
}
</style>
</head>
<body>
<img id="img" src="image/jd1.png" alt="">
<script>
//
// 1.获取事件源(元素) #img
var img=document.getElementById("img");
// 2.#img添加鼠标移入事件
img.onmouseover=function () {
// 3.在事件驱动函数里面 给img设置 jd2.png(绿狗)
img.src="image/jd2.png";
}
// 4.给img添加鼠标离开事件
img.onmouseout=function () {
// 5.在离开事件的驱动函数里面 给img设置 jd1.png(红狗)
img.src="image/jd1.png";
}
</script>
利用排他思想 实现点亮盒子
如何实现点哪个 哪个亮?
其他的 灭?
利用排他思想:
先干掉所有人(包括自己)
再复活自己
如何知道当前是哪一个按钮呢?
每一个函数中 都有一个this
这个this就像语文中的我一样
一种指向 指向当前触发这个函数的那个元素对象
步骤:
1.获取元素 btnArr(所有按钮)
2.给所有按钮添加点击事件
3.利用排他思想 先干掉所有button(包括自己)
4.再复活自己(点亮当前盒子)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
p{
text-align: center;
}
button{
width: 100px;
height: 40px;
border: none;
outline: none;
font-size:18px;
color: white;
cursor: pointer;
margin: 0 20px;
}
button.current{
background-color: hotpink;
}
</style>
</head>
<body>
<p>
<button class="current">按钮1</button>
<button >按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</p>
<script>
// 1.获取元素 btnArr(所有按钮)
var btnArr=document.getElementsByTagName("button");
// 2.给所有按钮添加点击事件
for(var i=0;i<btnArr.length;i++){
btnArr[i].onclick=function () {
// alert("你点我干嘛?")
/*
只要这个点击时间被触发 那么必然有其中一个按钮被点击了
这个按钮时谁呢? 就是this
*/
// console.log(this);
// this.className="current";
// 3.利用排他思想 先干掉所有button(包括自己)
/* btnArr[0].className="";
btnArr[1].className="";
btnArr[2].className="";*/
for(var i=0;i<btnArr.length;i++){
btnArr[i].className="";
}
// 4.再复活自己(点亮当前盒子)
this.className="current";
}
}
</script>
</body>
</html>实现tab切换效果
步骤:
1.获取元素 liArr spanArr
2.liArr添加鼠标移入事件
3.在liArr的移入事件中 利用排他思想实现点亮盒子
4.利用排他思想 先干掉所有span
5.根据当前li的索引值 去找到指定的span复活
*/
/*
* 我们经过分析 发现 需要用到 每一个li的索引值属性
* 只有用索引值 才能让span跟着li的切换而切换
* 但是li默认的系统没给我们绑定索引值属性
* 我们从小时候就被教导: 自己动手丰衣足食
* */
/*liArr[0].index=0;
liArr[1].index=1;
liArr[2].index=2;
liArr[3].index=3;
liArr[4].index=4;*/
/*for(var i=0;i<liArr.length;i++){
liArr[i].index=i;
}
*/console.log(对象.属性名);
如果属性绑定过 那么就返回 该属性绑定时 的那个值
如果属性没绑定过 则返回undefined// 1.获取元素 liArr spanArr
var liArr=document.getElementsByTagName("li");
var spanArr=document.getElementsByTagName("span");
// 2.liArr添加鼠标移入事件
for(var i=0;i<liArr.length;i++){
// 既然页面加载时的for循环 干嘛上面还单独写一份 直接在这写不就好了么
liArr[i].index=i; //分别给每一个li对象绑定一个index属性 属性值就是对应的索引数字
liArr[i].onmouseover=function () {
/* // 3.在liArr的移入事件中 利用排他思想实现点亮盒子
for(var i=0;i<liArr.length;i++){
// 干掉所有li
liArr[i].className="";
}
// 复活自己
this.className="current";
for(var i=0;i<spanArr.length;i++){
spanArr[i].className="";
}
//复活当前span
// spanArr[当前li的那个索引].className="current";
// console.log(this.index);
spanArr[this.index].className="current";*/
//上面代码for循环重复了 改进
for(var i=0;i<liArr.length;i++){
//干掉所有li
liArr[i].className="";
//干掉所有span
spanArr[i].className="";
}
// 复活当前li
this.className="current";
spanArr[this.index].className="current";
}
}tab切换效果封装
document.getElementsByTagName()
表示从document开始找到所有指定标签的对象
元素对象.getElementsByTagName()
从指定元素后代找到指定标签元素对象<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 400px;
margin: 50px auto;
}
ul{
list-style: none;
height: 50px;
}
ul>li{
float: left;
height: 50px;
width: 100px;
text-align: center;
line-height:50px;
color: white;
background-color: orange;
font-size:24px;
cursor: pointer;
}
li.current{
background-color: blue;
}
.box>span{
width: 500px;
height: 350px;
background-color: blue;
color: white;
font-size:120px;
text-align: center;
line-height:350px;
display: none;
}
.box>span.current{
display: block;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>帽子</li>
<li>裤子</li>
<li>袜子</li>
<li>瓜子</li>
</ul>
<span class="current">鞋子</span>
<span>帽子</span>
<span>裤子</span>
<span>袜子</span>
<span>瓜子</span>
</div>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>帽子</li>
<li>裤子</li>
<li>袜子</li>
<li>瓜子</li>
</ul>
<span class="current">鞋子</span>
<span>帽子</span>
<span>裤子</span>
<span>袜子</span>
<span>瓜子</span>
</div>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>帽子</li>
<li>裤子</li>
<li>袜子</li>
<li>瓜子</li>
</ul>
<span class="current">鞋子</span>
<span>帽子</span>
<span>裤子</span>
<span>袜子</span>
<span>瓜子</span>
</div>
<script>
var boxArr=document.getElementsByClassName("box");
/* tab(boxArr[0]);
tab(boxArr[1]);
tab(boxArr[2]);*/
for(var i=0;i<boxArr.length;i++){
tab(boxArr[i])
}
// 调用这个方法 给我传哪个box 我就调用哪个box的tab栏切换效果
function tab(box) {
var liArr=box.getElementsByTagName("li");
var spanArr=box.getElementsByTagName("span");
console.log(liArr);
for(var i=0;i<liArr.length;i++){
liArr[i].index=i;
liArr[i].onmouseover=function () {
for(var i=0;i<liArr.length;i++){
liArr[i].className="";
spanArr[i].className="";
}
this.className="current";
spanArr[this.index].className="current";
}
}
}
</script>
</body>
</html>点亮盒子的方式 实现导航条切换 步骤:
1.获取元素 aArr
2.aArr添加点击事件
3.在点击事件里面 获取当前点击的a标签所在的父元素li元素
4.当前li元素点亮(current) 其他li取消点亮(取消current)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#nav {
list-style: none;
width: 540px;
margin: 50px auto;
/*background-color: red;*/
height: 40px;
}
#nav > li {
float: left;
height: 40px;
width: 70px;
background-color: #F5F5DC;
text-align: center;
line-height: 40px;
margin-right: 20px;
}
li > a {
color: blue;
text-decoration: none;
}
#nav > li.current {
background-color: #DEB887;
}
</style>
</head>
<body>
<ul id="nav">
<li class="current">
<a href="#">首页</a>
</li>
<li>
<a href="#">播客</a>
</li>
<li>
<a href="#">博客</a>
</li>
<li>
<a href="#">相册</a>
</li>
<li>
<a href="#">关于</a>
</li>
<li>
<a href="#">帮助</a>
</li>
</ul>
<script>
// 1.获取元素 aArr
var nav = document.getElementById("nav");
var aArr = nav.getElementsByTagName("a");
// 2.aArr添加点击事件
for (var i = 0; i < aArr.length; i++) {
aArr[i].onclick = function () {
// 3.在点击事件里面 获取当前点击的a标签所在的父元素li元素
var currentLi = this.parentNode;
// 4.当前li元素点亮(current) 其他li取消点亮(取消current)
currentLi.setAttribute("class", "current");
// 获取除了当前li以外的所有兄弟
var allSiblings = getAllSiblings(currentLi);
// 给所有兄弟取消class
for (var i = 0; i < allSiblings.length; i++) {
allSiblings[i].removeAttribute("class");
}
}
}
function getAllSiblings(ele) {
var allChild = ele.parentNode.children;
var siblingsArr = [];
for (var i = 0; i < allChild.length; i++) {
if (allChild[i] != ele) {
siblingsArr.push(allChild[i]);
}
}
return siblingsArr;
}
</script>
</body>
</html>文本框位数不够 边框红色 位数够了 边框绿色步骤:
1.获取元素 inp
2.inp添加输入事件(oninput)
3.在输入事件里面 获取当前输入框内容
4.判断内容长度 如果够则设置绿色边框
5.如果不够则设置红色边框<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#inp{
border: 1px solid #999;
outline: none;
}
</style>
</head>
<body>
<input type="text" id="inp">
<script>
// 1.获取元素 inp
var inp=document.getElementById("inp");
// 2.inp添加输入事件(oninput)
inp.oninput=function () {
// 获取当前输入框输入的内容
var val=this.value;
// console.log("你输入了:"+val);
// 4.判断内容长度 如果够则设置绿色边框
if(val.length>=6){
this.style.borderColor="green";
}else{
// 5.如果不够则设置红色边框
this.style.borderColor="#e4393c";
}
}
</script>
</body>
</html>全选反选案例
