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中