前言
在之前的学习中，都是学习的 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
内容不错！看起来高大上！