jQuery 简介学习笔记
什么是jQuery
jQuery 是一款快速、简洁的 JavaScript 库。它简化了 HTML 文档遍历、事件处理、动画效果和 Ajax 操作等常用的操作。使用 jQuery 可以显著提高开发效率,代码更加清晰易懂。
引入jQuery库
可以从 jQuery 官网下载最新版,然后在 HTML 文件中引入库:
htmlCopy Code<script src="jquery.min.js"></script>
基本语法
jQuery 的基本语法可以描述为:“选取某些元素,对其执行某些操作”。
javascriptCopy Code$(selector).action()
其中,$() 函数是 jQuery 的一个别名,它通过传入选择器来选取元素。例如,选取所有的段落:
javascriptCopy Code$("p")
然后,我们可以对选取到的元素执行一些操作。例如,隐藏所有段落:
javascriptCopy Code$("p").hide()
也可以使用回调函数,在某些事件发生时触发。
javascriptCopy Code$("p").click(function(){
alert("段落被单击了!");
})
实例
下面这个例子展示了如何使用 jQuery 来实现一个简单的图片轮播效果。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>图片轮播</title>
<script src="jquery.min.js"></script>
<style type="text/css">
#slider{
width: 800px;
height: 400px;
position: relative;
margin: 0 auto;
}
#slider img{
width: 800px;
height: 400px;
position: absolute;
top: 0;
left: 0;
}
#slider img.hide{
display: none;
}
</style>
<script type="text/javascript">
var current = 1;
function changeImage(){
if(current == 5){
current = 1;
}else{
current++;
}
$("#slider img").removeClass("show").addClass("hide");
$("#slider img:nth-child("+current+")").removeClass("hide").addClass("show");
}
$(function(){
setInterval(changeImage, 3000);
})
</script>
</head>
<body>
<div id="slider">
<img src="image1.jpg" class="show">
<img src="image2.jpg" class="hide">
<img src="image3.jpg" class="hide">
<img src="image4.jpg" class="hide">
<img src="image5.jpg" class="hide">
</div>
</body>
</html>
这个例子中,我们通过添加和移除类来切换图片的显示状态。其中 setInterval() 函数用于定时切换图片。
以上是 jQuery 简介学习笔记和实例。