前言
在之前的学习中,都是学习的Jquery,当然在之前的开发中,也学习了JS,其中包括JS的一些比较有用的函数,例如Trim等等,以及Js&Jq的Ajax,另外也学习了Pjax。
这周回到了学校老师讲了一下JavaScript的基础入门,在之前的选择器等等一直都是用的Jq的,原因大家都知道,Js的选择器很不是方便。昨天写了一个简单的Js的小小案例,今天贴上来,不喜勿喷
代码
<head> <meta charset="UTF-8"> <title>JavaScript-Example</title> <style type="text/css"> .btn{ background-color: #03A4FA; border: none; color: #FFFFFF; min-width: 100px; min-height: 30px; border: 1px solid #eee; cursor:pointer; } #img1{ width: 500px; height: 300px; border: 1px solid #EEEEEE; } </style> <script type="text/javascript"> window.onload = function(){ /* * Licoy's Blog */ var numMath = [1,1,1,1]; //用数组来进行存储变换标记 var divObj = document.getElementById("container"); var btnObj = document.getElementsByClassName("btn"); /* * 当[replace替换]按钮被单击时候发生的事件; */ btnObj[0].onclick = function(){ var imgObj = document.getElementById("img1"); var newImg = document.createElement("img"); if(numMath[0]<5){ newImg.src = "images/"+(numMath[0]+1)+".jpg"; newImg.id = "img1"; divObj.replaceChild(newImg,imgObj); numMath[0]++; if(numMath[0]==5){ this.setAttribute("value","replace替换【完】"); }else{ this.setAttribute("value","替换为第"+numMath[0]+"张图片"); } } } /* * 当[attribute替换]按钮被单击时候发生的事件; */ btnObj[1].onclick = function(){ var imgObj = document.getElementById("img1"); if(numMath[1]<5){ imgObj.setAttribute("src","images/"+(numMath[1]+1)+".jpg"); numMath[1]++; if(numMath[1]==5){ this.setAttribute("value","attribute替换【完】"); }else{ this.setAttribute("value","替换为第"+numMath[1]+"张图片"); } } } /* * 注意:Img对象不可以在外部进行选择获取,若在外部进行获取之后 * ,在切换了一次图片之后,所获取的对象仍继续为上次 * 之后的对象,这样会导致[放大]&[缩小]按钮无法使用。 */ //------------------------------------End Notice------------------------------------ /* * 当[放大]按钮被单击时候发生的事件; */ btnObj[2].onclick = function(){ var imgObj = document.getElementById("img1"); var width = imgObj.width; var height = imgObj.height; imgObj.style.width = width+50+"px"; imgObj.style.height = height+50+"px"; this.setAttribute("value","继续放大~"); } /* * 当[缩小]按钮被单击时候发生的事件; */ btnObj[3].onclick = function(){ var imgObj = document.getElementById("img1"); var width = imgObj.width; var height = imgObj.height; imgObj.style.width = width-50+"px"; imgObj.style.height = height-50+"px"; this.setAttribute("value","追赶缩小~"); } } </script> </head> <body> <center> <input type="button" class="btn" value="replace替换"/> <input type="button" class="btn" value="attribute替换" /> <input type="button" class="btn" value="放大" /> <input type="button" class="btn" value="缩小" /> </center> <hr /> <div id="container"> <img src="images/1.jpg" id="img1"> </div> </body>
如果要测试以上代码的话在这个文件的同级目录创建一个
images
文件夹,里面存放5张图片,分别是1.jpg~5.jpg就OK了后记
正如我的老师所说的,在实际的开发中,把Jq和Js混合来用,你的开发效率会得到大大的提升。

每日签到,生活更精彩 ~:2017-03-14 11:7:12
内容不错!看起来高大上!