1.点击图片超链接下方显示大图
<a href="images/1.jpg" id="ak"><img src="images/1-small.jpg" id="img"></a> <img src="" id="img2">
<script>
my$("ak").onclick = function () {
console.log(this.href);
my$("img2").src = this.href;
// 重点:return false可以让页面不跳转
return false;
}
</script>
在onclick事件的最后加上return false可以防止a标签跳转页面，即让其原地跳转并显示。
点击前：
点击后：
2.点击美女相册
<style>
li { display: inline-block; }
</style>
<h2>美女相册</h2>
<ul id="imageGallery">
<li>
<a href="images/1.jpg" title="美女图片A">
<img src="images/1-small.jpg" width="100"/>
</a>
</li>
<li>
<a href="images/2.jpg" title="美女图片B">
<img src="images/2-small.jpg" width="100"/>
</a>
</li>
<li>
<a href="images/3.jpg" title="美女图片C">
<img src="images/3-small.jpg" width="100"/>
</a>
</li>
<li>
<a href="images/4.jpg" title="美女图片D">
<img src="images/4-small.jpg" width="100"/>
</a>
</li>
</ul>
<div>
<img src="images/placeholder.png" id="img" alt="" width="450"/>
<p id="des">请选择一个图片</p>
</div>
<script>
var AObj = my$("imageGallery").getElementsByTagName("a");
console.log(AObj);
for (var i = 0; i < AObj.length; i++) {
AObj[i].onclick = function () {
//将a标签中的href地址指向赋值给img标签
my$("img").src = this.href;
//将a标签的title的值赋值给下面的img
my$("des").innerText = this.title;
return false; //阻止a标签的默认跳转
}
}
</script>
点击前：
点击后：
3.点击按钮实现奇偶行变色
<input type="button" value="换行变色" id="btn">
<ul id="uu">
<li>宝马</li>
<li>红旗</li>
<li>奔驰</li>
<li>悍马</li>
<li>雪佛兰</li>
<li>大众</li>
<li>五菱</li>
<li>兰博基尼</li>
</ul>
<script>
//变为奇红偶黄
my$("btn").onclick = function () {
var liObj = my$("uu").getElementsByTagName("li");
for (var i = 0; i < liObj.length; i++) {
liObj[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
//学会发现if条件为算数表达式时进行简化
}
}
</script>
点击前：
点击后：
4.鼠标触碰变色
<style>
ul {
/*去掉列表的圆点*/
list-style-type: none;
/*设置鼠标放上去会有小手*/
cursor: pointer;
}
</style>
<ul id="uu">
<li>百威</li>
<li>哈尔滨</li>
<li>崂山</li>
<li>珠江</li>
<li>德国黑啤</li>
</ul>
<script>
var liObj = my$("uu").getElementsByTagName("li");
console.log(liObj.length);
for (var i = 0; i < liObj.length; i++) {
liObj[i].onmouseover = function () {
this.style.backgroundColor = "red";
};
liObj[i].onmouseout = function () {
this.style.backgroundColor = "";
}
}
</script>
a
b
5.innerText和textContent的兼容问题
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
<input type="button" value="设置div值" id="btn"/>
<div id="dv">
哦，你是谁啊
</div>
<script>
//innerText和textContent都可以设置标签内的文本内容，但是inner火狐、谷歌、IE8都支持，但textIE8却不支持
//所以需要写兼容函数，让其都能在三大浏览器中运行
function getInnerText(element) {
//若不兼容浏览器会显示结果为undefined，就以此为条件进行判断
if (typeof element.textContent == "undefined") {
return element.innerText;
} else {
return element.textContent;
}
}
function setInnerText(element, text) {
if (typeof element.textContent == "undefined") {
element.innerText = text;
} else {
element.textContent = text;
}
}
//测试
my$("btn").onclick = function () {
console.log(getInnerText(my$("dv")));
setInnerText(my$("dv"), "嘿嘿")
}
</script>
加入js文件common.js中