首页 > 代码库 > Hello JS

Hello JS

2024-09-10 23:34:18   217人阅读

现在我们用一下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


联系
我们