一. JQuery
jQuery 是一个 JavaScript 函数库，通过jQuery可以将JavaScript中一些特别繁琐的操作给简化，大大提高我们的开发效率。
二. 如何使用JQuery
使用JQuery有两种方式，首先可以通过本地导入：
<head> <script type="text/javascript" src="/jqery/jquery-1.8.3.min.js"></script> </head>
还可以引入google的CDN来使用：
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> </head>
三. 简单使用
我们可以简单使用JQuery来实现以下效果：
点击列表中的任意选项后，将该列表项隐藏：
首先来看一下JavaScript的写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
this.style = "display:none";
}
}
}
</script>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
<li>列表项6</li>
<li>列表项7</li>
<li>列表项8</li>
<li>列表项9</li>
<li>列表项10</li>
</ul>
</body>
</html>
再来看一下JQuery的写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- <script type="text/javascript" src="jquery-1.8.3.min.js"></script>-->
<script type="text/javascript">
$(function () {
$("li").click(function () {
$(this).hide();
});
});
</script>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
<li>列表项6</li>
<li>列表项7</li>
<li>列表项8</li>
<li>列表项9</li>
<li>列表项10</li>
</ul>
</body>
</html>
Javascript中的window.onload可以直接用下面代码代替：
$(function () {
});
请登录之后再进行评论