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