码迷,mamicode.com
首页 > Web开发 > 详细

Hello JS

时间:2017-03-28 11:37:05      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:javascript   js代码   

现在我们用一下js,js是一种很厉害的语言,以后自己感受。

下面来用一下

还是上一篇的代码,在后面加入script标签,在script里面指明 type="text/javascript" ,意思是这是text类型的JavaScript代码,然后在script里面写js代码,

<html>
	<head>
		<title>ul li</title>
	</head>
	<style>
		ul li{
			list-style:none;
			float:left;
			margin-right:20px;
			
		}
		#menu{
			width:1200px;
			margin:0 auto;
		}
		
		
	</style>
	<body>
		<div id="menu">
			<ul>
				<li>首页</li>
				<li>个人主页</li>
				<li>消息中心</li>
				<li>充值中心</li>
				<li>会员中心</li>
			</ul>
			<br/>
			<hr/>
		</div>
	</body>
</html>
<script type="text/javascript">
	alert("Hellow JS");
</script>

运行结果如下,会在页面中弹出一个框,内容就是代码上写的内容。

技术分享代码解析

alert就是弹出一个框。显示消息

这样我们的第一句js代码就完成了。



下面进行以下一些简单的js操作。

1、点击事件

我们让菜单中点击一次,弹出对应的名称

代码如下

<html>
	<head>
		<title>ul li</title>
	</head>
	<style>
		ul li{
			list-style:none;
			float:left;
			margin-right:20px;
			
		}
		#menu{
			width:1200px;
			margin:0 auto;
		}
		
		
	</style>
	<body>
		<div id="menu">
			<ul>
				<li onclick="menuclick(this)">首页</li>
				<li onclick="menuclick(this)">个人主页</li>
				<li onclick="menuclick(this)">消息中心</li>
				<li onclick="menuclick(this)">充值中心</li>
				<li onclick="menuclick(this)">会员中心</li>
			</ul>
			<br/>
			<hr/>
		</div>
	</body>
</html>
<script type="text/javascript">
	function menuclick(e){
		alert(e.innerHTML);
	}
</script>

代码解析

function menuclick 表示定义一个menuclick的方法,方法的内容写在{}大括号里面,它们之间的()用来传递参数,上面li标签写着 onclick="menuclick(this)",意思是,点击时调用menuclick方法,将this传入方法,this就是自身,是一个关键字,也就是li这个标签。而在script中写了e,这是同一个事物的不同名称,e就是一个别名,e可以随便起。


e.innerHTML就是获取这个标签里面的内容。


用js自己写页面效果会很麻烦,那么就有人帮我们创建了一个库,叫jquery,这是对JavaScript的一个包装,让js更方便使用。我们调用JQuery简单的方法,JQuery会帮我们执行复杂的js代码,而不需要我们自己写。

下一篇再说JQuery

本文出自 “简单开发者” 博客,请务必保留此出处http://zjm80230.blog.51cto.com/9905372/1910934

Hello JS

标签:javascript   js代码   

原文地址:http://zjm80230.blog.51cto.com/9905372/1910934

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!