jquery使用教程

jQuery使用手册

jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作，本手册将为您提供jQuery的基本使用方法和技巧，帮助您快速上手并熟练运用jQuery。

1、引入jQuery库

在使用jQuery之前，首先需要在HTML文件中引入jQuery库，可以通过以下两种方式之一引入：

方法一：直接下载jQuery库文件，然后在HTML文件中引用。

<script src="jquery-3.6.0.min.js"></script>

方法二：通过CDN引入jQuery库。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2、选择器

jQuery使用选择器来选取HTML元素，常用的选择器有：ID选择器、类选择器、标签选择器、属性选择器等。

// ID选择器
$("#myId");
// 类选择器
$(".myClass");
// 标签选择器
$("p");
// 属性选择器
$("[href]");

3、事件处理

jQuery提供了丰富的事件处理方法，如click、hover、keydown等。

// click事件处理
$("#myButton").click(function() {
  alert("按钮被点击了！");
});
// hover事件处理
$("p").hover(function() {
  $(this).css("background-color", "yellow");
}, function() {
  $(this).css("background-color", "white");
});

4、HTML操作

jQuery提供了丰富的HTML操作方法，如append、prepend、remove等。

// append方法添加元素
$("#myDiv").append("<p>这是一个新的段落。</p>");
// prepend方法添加元素到开头
$("#myDiv").prepend("<p>这是一个新的段落。</p>");
// remove方法删除元素
$("#myDiv").remove();

5、CSS操作

jQuery提供了丰富的CSS操作方法，如addClass、removeClass、toggleClass等。

// addClass方法添加类名
$("#myDiv").addClass("myClass");
// removeClass方法移除类名
$("#myDiv").removeClass("myClass");
// toggleClass方法切换类名（有则移除，无则添加）
$("#myDiv").toggleClass("myClass");

6、动画效果

jQuery提供了丰富的动画效果，如hide、show、fadeIn、fadeOut等。

// hide方法隐藏元素（不改变display属性）
$("#myDiv").hide();
// show方法显示元素（不改变display属性）
$("#myDiv").show();
// fadeIn方法淡入显示元素（改变display属性）
$("#myDiv").fadeIn();
// fadeOut方法淡出隐藏元素（改变display属性）
$("#myDiv").fadeOut();