jquery是javaScript的一个封装库，封装的意思就是将内容整合，简单化。例如需要很多行js代码才能实现的功能，用jquery就用几行或者一行代码就能完成。
使用jquery，首先要下载一个jquery库，文档的附件中含有jquery文件，可以自行下载，这里用的是最新版本3.2
将下载的jquery文件和自己编写html文件放在同一位置
两个jquery文件，实际我们用min（压缩）版就好了，另外一个给你看下而已。
在我们之前的代码中加入
<script src="jquery-3.2.0.min.js"></script>
表示引入那个jquery压缩版文件。那么我们在页面中就可以使用jquery了
我们修改一下之前的代码，li标签里面不需要onclick了。script里面的代码也改下。改成以下样子
<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 src="jquery-3.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#menu li").click(function(){
alert($(this).html());
})
})
</script>代码解析
1、script里面首先是$(function(){ 代码 })，意思是在页面加载完之后，执行里面的代码。
2、$("#menu li").click( 代码 )，意思是当id为menu 下的 li标签被点击时，执行里面的代码。
3、function(){alert($(this).html());}，这是一个方法，方法的内容是alert出当前元素的html内容。
注意，上面得大括号，小括号，都是配对出现。不要写漏。
以上代码简单实现了上一篇的功能。
jquery有很多事件，效果。可以参考 http://jquery.cuishifeng.cn/
下面我们来做一下跳页
1、
首先我们做另外一个页面，放在同一目录下
2、
里面的代码内容就简单写点
<html> <head> <title>首页</title> </head> <body> 这是首页内容 </body> </html>
保存好。
3、
在li标签里面加入a标签
效果如下
<li><a href="index.html">首页</a></li>
刷新页面，点击一下首页试试
发现会弹个框，再跳转，那么我们现在把弹框删除。
把页面中的以下代码全部删除。
<script type="text/javascript">
$(function(){
$("#menu li").click(function(){
alert($(this).html());
})
})
</script>现在再点击就正常多了
下面总结一下，
读完这篇应该知道以下知识
1、引入jquery
<script src="jquery-3.2.0.min.js"></script>
2、知道以下的代码会在加载完执行
$(function(){代码})3、知道<a>标签可以进行页面跳转
本文出自 “简单开发者” 博客，请务必保留此出处http://zjm80230.blog.51cto.com/9905372/1914082
原文：http://zjm80230.blog.51cto.com/9905372/1914082