JavaScript之基础语法案例展示

5,666次阅读

共计 2474 个字符，预计需要花费 7 分钟才能阅读完成。

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