获取jQuery
jQuery是一个开源的Javascript框架，在jquery.com上提供了各版本jQuery的下载以及详细的开发文档。每个版本一般都提供两个选择：未压缩版和压缩版（min）。它们的功能完全一样，只是压缩版删除了空白字符和格式，体积更小。一般在开发的时候为了方便查看源码，使用未压缩版，而在发布的时候改用压缩版。
下载地址：http://jquery.com/download/
使用jQuery
在使用jQuery之前，需要先使用script元素将它引入到HTML文档中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>戴维营教育jQuery教程</title>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script>
//js代码
</script>
</head>
<body>
<h1>长沙戴维营教育jQuery教程</h1>
<a href="http://diveinedu.github.io">教程地址</a>
</body>
</html>
Hello, World!
需要等待文档加载完成才能使用Javascript操作HTML元素。在jQuery之前，我们通过window.onload事件确定文档是否加载完成。
window.onload = function() {
alert("Hello, World!");
}
在jQuery中进一步简化为ready事件，其中$为jQuery定义的一个选择函数。
$(document).ready(function(){
alert("Hello, World!");
})
更多功能
- jQuery可以给HTML元素绑定事件处理函数。下面的代码给
a标签添加了一个点击事件，每次点击该链接的时候都会弹出一个对话框。
$(document).ready(function(){
$("a").click(function(event){
alert("Hello, World!");
});
});
点击a标签默认会跳转到链接所在地址，如果想要阻止这个动作，需要调用event的一些方法。
$("a").click(function(event){
alert("Hello, World!");
event.preventDefault();
});
- 修改HTML元素的属性。
$("a").addClass("test");
$("a").removeClass("test");
- 给元素添加动态效果。
$("a").click(function(event){
event.preventDefault();
$(this).hide("slow");
}
- 封装了Ajax请求，通过回调函数返回数据。
$.get("http://www.diveinedu.cn", function(){
//代码
});时间： 2024-10-14 16:07:41