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 简介学习笔记和实例。