1.案例：阻止超链接默认跳转行为
2.案例：相册
3.案例：列表隔行变色
4.案例：列表鼠标进入高亮显示(鼠标进入和鼠标移出事件)
5.显示和隐藏二维码
6.通过name属性获取元素（表单标签才有那么属性）
7.根据类样式的名字获取元素
8.其他获取元素的方式
9.案例：div的高亮显示(鼠标进入边框高亮)
10.案例：模拟搜索框（获取焦点和失去焦点）
11.封装innerText和textContent
12.innerText和innerHTML的区别
13.自定义属性
14.案例：tab切换
1.案例：阻止超链接默认跳转行为 <--返回目录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<!-- 阻止超链接默认跳转行为，第一种写法-->
<a href="http://www.baidu.com" onclick="return false;">百度</a><br/>
<!-- 阻止超链接默认跳转行为，第二种写法-->
<a href="http://www.baidu.com" onclick="return fun();">百度</a>
<script type="text/javascript">
function fun(){
return false;
};
</script>
</body>
</html>
2.案例：相册 <--返回目录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="">
ul li{
list-style: none;
float: left; /*将li元素拖出*/
}
ul li a{
//display: inline-block;
text-decoration: none; /*去除a标签下划线样式*/
}
ul li a img{
160px;
height: 180px;
}
</style>
</head>
<body>
<h2>画廊</h2>
<ul id="imagegallery">
<li><a href="images/1.jpg" title="图片1"><img src="images/1-small.jpg"></a></li>
<li><a href="images/2.jpg" title="图片2"><img src="images/2-small.jpg"></a></li>
<li><a href="images/3.jpg" title="图片3"><img src="images/3-small.jpg"></a></li>
<li><a href="images/4.jpg" title="图片4"><img src="images/4-small.jpg"></a></li>
<!-- 清除浮动 -->
<div style="clear:both;"/>
</ul>
<div><img src="" id="imgId"/></div>
<script type="text/javascript">
var aEles = document.getElementsByTagName("a");
for(var i=0;i<aEles.length;i++){
aEles[i].onclick=function(){
document.getElementById("imgId").src=this.href;
return false;//禁止a标签的默认跳转行为
};
}
</script>
</body>
</html>
3.案例：列表隔行变色 <--返回目录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<input type="button" id="btn" value="点我，列表隔行变色"/>
<div style=" 300px">
<ul id="ulId">
<li>红楼梦</li>
<li>三国演义</li>
<li>水浒传</li>
<li>西游记</li>
</ul>
</div>
<script type="text/javascript">
var eles = document.getElementById("ulId").getElementsByTagName("li");
document.getElementById("btn").onclick=function(){
for(var i=0;i<eles.length;i++){
if(i%2==0){
eles[i].style.backgroundColor="#ddd";
}else{
eles[i].style.backgroundColor="#aaa";
}
}
};
</script>
</body>
</html>
4.案例：列表鼠标进入高亮显示(鼠标进入和鼠标移出事件) <--返回目录
鼠标进入时间onmouseover
鼠标移出事件onmouseout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<div style=" 300px">
<ul id="ulId">
<li>红楼梦</li>
<li>三国演义</li>
<li>水浒传</li>
<li>西游记</li>
</ul>
</div>
<script type="text/javascript">
var eles = document.getElementById("ulId").getElementsByTagName("li");
for(var i=0;i<eles.length;i++){
eles[i].onmouseover=function(){
this.style.backgroundColor="pink";
};
eles[i].onmouseout=function(){
this.style.backgroundColor="";
};
}
</script>
</body>
</html>
5.显示和隐藏二维码 <--返回目录
需要用到的知识：
- 鼠标进入和鼠标移出事件
- 使用类样式class进行显示或隐藏
- 鼠标进入小二维码时，大二维码显示，鼠标移出时，二维码隐藏。
6.通过name属性获取元素（表单标签才有这个属性） <--返回目录
* getElementsByName("name属性的属性值")
7.根据类样式的名字获取元素 <--返回目录
* getElementsByClassName("类样式class的属性值")
8.其他获取元素的方式 <--返回目录
* 根据id选择器/类别选择器获取元素
<input type="button" id="btn" class="red"/>
var ele = document.querySelector("#btn");
var ele = document.querySelector(".red");
var ele = document.querySelector("li");//只会获取第一个li标签
* 根据class类别选择器/标签选择器获取元素
var eles = document.querySelectorAll(".cls");
var eles = document.querySelectorAll("li");
9.案例：div的高亮显示(鼠标进入边框高亮) <--返回目录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css">
div{
200px;
height: 150px;
background-color: blue;
border: 10px solid blue;/*设置border的颜色为背景色blue*/
float: left;
margin-left: 10px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
var eles = document.getElementsByTagName("div");
for(var i=0;i<eles.length;i++){
eles[i].onmouseover=function(){
this.style.border="10px solid pink"; //将原来设置的border的颜色由背景色blue变成pink
};
eles[i].onmouseout=function(){
this.style.border="";//将border的颜色恢复为背景色
};
}
</script>
</body>
</html>
10.案例：模拟搜索框（获取焦点和失去焦点） <--返回目录
获取焦点事件onfocus
失去焦点事件onblur
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css">
input{
color: #aaa;
}
</style>
</head>
<body>
<input type="text" id="txt" value="请输入"/>
<script type="text/javascript">
var ele = document.getElementById("txt");
//注册获取焦点事件
ele.onfocus=function(){
if(this.value=="请输入"){
this.value="";
this.style.color="black";
}
};
//注册失去焦点事件
ele.onblur=function(){
if(this.value.length==0){
this.value="请输入";
this.style.color="#aaa";
}
};
</script>
</body>
</html>
11.封装innerText和textContent <--返回目录
兼容代码
//设置任意的标签中间的任意文本内容 function setInnerText(element,text){ if(typeof element.textContent == "undefined"){ element.innerText=text; }else{ element.textContent=text; } } //获取任意标签中间的文本内容 function getInnerText(element){ if(typeof element.textContent=="undefined"){ return element.innerText; }else{ return element.textContent; } }
12.innerText和innerHTML的区别 <--返回目录
* 设置
- document.getElementById("divId").innerText="<p>文本</p>";
** <p>文本</p>被当成纯文本
- document.getElementById("divId").innerHTML="<p>文本</p>";
** <p>文本</p>被当成HTML代码
* 获取
- innerText可以获取标签中间的文本内容，但是标签中如果还有标签，那么最里面的标签的文本内容也能获取
- innerHTML获取标签中间的【html代码内容】。
13.自定义属性 <--返回目录
* 不能通过document.getElementById("liId").score;获取属性的值，
* 通过document.getElementById("liId").getAttribute("score");来获取自定义属性的值
<ul>
<li score="100" id="liId">张三的成绩</li>
</ul>
* 获取li标签，动态添加自定义属性score和值 ele.setAttribute("score",20);
* 移除自定义属性 ele.removeAttribute("score");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css">
ul{
list-style-type: none;
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li score="100" id="liId">张三的成绩</li>
</ul>
<script type="text/javascript">
//获取li标签，动态添加自定义属性score和值
var ele = document.getElementById("liId");
ele.setAttribute("score",20);//动态添加自定义属性score和值
ele.onclick=function(){
alert(ele.getAttribute("score"));//获取自定义属性score的值
};
</script>
</body>
</html>
14.案例：tab切换 <--返回目录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
span{
display: inline-block;
height: 50px;
font: 20px/50px 微软雅黑;
background-color: #eee;
line-height: 50px;/*行高*/
padding:0 20px;
cursor: pointer;
}
.bd{
335px;
height: 150px;
background-color: #ccc;
}
li.current{
display: inline-block;
}
li{
display: none;
}
</style>
</head>
<body>
<div id="box" class="box" >
<div class="hd" >
<span style="background-color: #ccc">娱乐</span>
<span>新闻</span>
<span>体育</span>
<span>综合</span>
</div>
<div class="bd">
<ul>
<li class="current">我是娱乐模块</li>
<li>我是新闻模块</li>
<li>我是体育模块</li>
<li>我是综合模块</li>
</ul>
</div>
</div>
<script type="text/javascript">
//获取所有的span标签
var sapnEles = document.getElementsByTagName("span");
//获取所有的li标签
var liEles = document.getElementsByTagName("li");
for(var i=0;i<sapnEles.length;i++){
//在鼠标点击事件之前，先保存索引
sapnEles[i].setAttribute("index",i);
//给每个span标签注册鼠标单击事件
sapnEles[i].onclick=function(){
//设置所有的span标签的背景色为#eee
for(var j=0;j<sapnEles.length;j++){
sapnEles[j].style.backgroundColor="#eee";
}
//设置所有的li标签的display属性值为none
for(var k=0;k<liEles.length;k++){
liEles[k].className="";
}
//设置当前点击的span标签的背景色为#ccc
this.style.backgroundColor="#ccc";
//获取当前点击的span标签的index的值
var index = this.getAttribute("index");
//alert(index);
//设置当前点击的span标签对于的li标签的display属性值为inline-block
liEles[index].className="current";
};
}
</script>
</body>
</html>
---