现在我们用一下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 οnclick="menuclick(this)">首页</li>
<li οnclick="menuclick(this)">个人主页</li>
<li οnclick="menuclick(this)">消息中心</li>
<li οnclick="menuclick(this)">充值中心</li>
<li οnclick="menuclick(this)">会员中心</li>
</ul>
<br/>
<hr/>
</div>
</body>
</html>
<script type="text/javascript">
function menuclick(e){
alert(e.innerHTML);
}
</script>
代码解析
function menuclick 表示定义一个menuclick的方法,方法的内容写在{}大括号里面,它们之间的()用来传递参数,上面li标签写着 οnclick="menuclick(this)",意思是,点击时调用menuclick方法,将this传入方法,this就是自身,是一个关键字,也就是li这个标签。而在script中写了e,这是同一个事物的不同名称,e就是一个别名,e可以随便起。
e.innerHTML就是获取这个标签里面的内容。
用js自己写页面效果会很麻烦,那么就有人帮我们创建了一个库,叫jquery,这是对JavaScript的一个包装,让js更方便使用。我们调用JQuery简单的方法,JQuery会帮我们执行复杂的js代码,而不需要我们自己写。
下一篇再说JQuery
转载于:https://blog.51cto.com/zjm80230/1910934