jQuery 效果学习笔记

1. 操作元素的样式

1.1 .addClass

.addClass() 方法可以向元素添加一个或多个类名。

例如，以下代码将向 div 元素添加一个名为 selected 的类：

javascriptCopy Code
$("div").addClass("selected");

1.2 .removeClass

.removeClass() 方法可以从元素中删除一个或多个类名。

例如，以下代码将从 div 元素中删除名为 selected 的类：

javascriptCopy Code
$("div").removeClass("selected");

1.3 .toggleClass

.toggleClass() 方法可以在元素中添加或删除一个或多个类名。

例如，以下代码会切换 div 元素上的 selected 类：

javascriptCopy Code
$("div").toggleClass("selected");

2. 创建动画效果

2.1 .hide

.hide() 方法可以隐藏元素。它接受一个可选的参数，用于指定动画持续时间。

例如，以下代码将使用默认动画效果隐藏所有 div 元素：

javascriptCopy Code
$("div").hide();

2.2 .show

.show() 方法可以显示元素。它也接受一个可选的参数，用于指定动画持续时间。

例如，以下代码将使用默认动画效果显示所有 div 元素：

javascriptCopy Code
$("div").show();

2.3 .fadeIn

.fadeIn() 方法可以淡入元素。它也接受一个可选的参数，用于指定动画持续时间。

例如，以下代码将使用默认动画效果淡入所有 div 元素：

javascriptCopy Code
$("div").fadeIn();

2.4 .fadeOut

.fadeOut() 方法可以淡出元素。它也接受一个可选的参数，用于指定动画持续时间。

例如，以下代码将使用默认动画效果淡出所有 div 元素：

javascriptCopy Code
$("div").fadeOut();

3. 处理用户输入

3.1 .click

.click() 方法可以在用户点击元素时执行代码。

例如，以下代码将在用户单击任何 button 元素时显示 Hello World!：

javascriptCopy Code
$("button").click(function() {
  alert("Hello World!");
});

3.2 .hover

.hover() 方法可以在用户将鼠标悬停在元素上或从元素上移开时执行代码。

例如，以下代码将在用户将鼠标悬停在任何 div 元素上时向其添加一个名为 hover 的类，当用户将鼠标移开时删除该类：

javascriptCopy Code
$("div").hover(function() {
  $(this).addClass("hover");
}, function() {
  $(this).removeClass("hover");
});

以上就是 jQuery 效果的学习笔记。希望对您有所帮助！