JavaScript之基础语法案例展示

在之前的学习中，都是学习的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混合来用，你的开发效率会得到大大的提升。