`元素中。
![Event source](img/5106ab7c78d46520d40700c076f35e67.jpg)
图:事件源
在图中,我们可以看到在按钮下方显示的消息中单击了哪个按钮。
## 移除元素
`remove()`方法从 DOM 中删除匹配的元素集。
`remove_element.html`
```js
```
在示例中,我们有两个按钮和六个面板。 第一个按钮删除第一个面板,第二个按钮删除最后一个面板。
```js
$('#btnf').click(function() {
$('div:first').remove();
});
```
`div:first`选择器选择第一个`
`元素,然后`remove()`方法将其从 DOM 中删除。
## jQuery `is()`方法
`is()`方法针对选择器,元素或 jQuery 对象检查当前匹配的元素集,如果这些元素中的至少一个与给定参数匹配,则返回`true`。
`condition.html`
```js
First jQuery example
Panel 1
Panel 2
Panel 3
Panel 4
```
在示例中,我们有四个面板。 单击面板上的面板开始消失。 第三面板不消失。
```js
```
`$(this)`语法引用事件源,即我们单击其上的面板。 使用`is()`方法,我们检查元素是否为面板 3; 如果是面板 3,我们会在控制台上打印一条消息,并且不要将其隐藏。 其他面板用`hide()`方法隐藏。
## 特效
在本节中,我们将展示一些基本的 jQuery 效果。
### jQuery 滑动效果
`slideUp()`方法以向上滑动显示匹配的元素,而`slideDown()`方法以向下滑动显示。 方法的第一个参数是持续时间; 它是一个字符串或数字,确定动画将运行多长时间。 字符串可以是`'slow'`或`'fast'`; 默认值为 400 毫秒。
`sliding.html`
```js
jQuery sliding example
Slide up
Slide down
```
在示例中,我们有两个按钮。 一个按钮将向上滑动面板,另一个按钮将向下滑动面板。
```js
$('#btnSlideUp').click(function() {
$('.mypanel').slideUp('show');
});
```
`slideUp()`方法以向上滑动的方式为选定的元素设置动画; 该元素将从窗口中消失。
```js
$('#btnSlideDown').click(function() {
$('.mypanel').slideDown('show');
});
```
`slideDown()`方法以向下滑动的方式对元素进行动画处理,该元素出现在窗口中。
### `animate()`方法
`animate()`方法对一组 CSS 属性执行自定义动画。 该方法的第一个参数称为属性。 它是动画将朝其移动的 CSS 属性和值的对象。 第二个参数是持续时间。
`animation.html`
```js
jQuery animation example
«
»
```
在示例中,我们有两个按钮。 第一个按钮将面板向左移动,第二个按钮将其向右移动。
```js
$("#rightBtn").click(function() {
$(".mypanel").animate({ "left": "+=250px" }, "slow" );
});
```
这会将面板缓慢向左移动 250 像素。
```js
$( "#leftBtn" ).click(function(){
$(".mypanel").animate({ "left": "-=250px" }, "slow" );
});
```
这会将面板缓慢向右移动 250 像素。
### jQuery 淡入淡出效果
`fadeIn()`方法通过将匹配的元素淡化为不透明来显示它们。 `fadeOut()`方法通过将匹配的元素淡化为透明来隐藏它们。
`fading.html`
```js
jQuery fading example
Fade out
Fade in
```
在示例中,我们有两个按钮。 一个按钮淡入面板; 第二个按钮淡出面板。
```js
$('#fadeOutBtn').click(function() {
$('.mypanel').fadeOut('slow');
});
```
此功能使用`fadeOut()`方法淡出匹配的元素。
```js
$('#fadeInBtn').click(function() {
$('.mypanel').fadeIn('slow');
});
```
此功能通过`fadeIn()`方法淡入匹配的元素。
## jQuery `$.get()`方法
`$.get()`方法使用 HTTP GET 请求从服务器请求数据。 该请求是异步 GET 请求。
在本节中,我们将创建一个 Java Web 应用。 单击一个按钮,将 AJAX GET 请求发送到 Java Servlet,该 Java Servlet 会以一条消息进行响应。
`index.html`
```js
jQuery GET message
Get message
```
我们有一个按钮,单击该按钮即可发送异步 GET 请求。
```js
$(function () {
$("#btn").click(function () {
$.get("MyServlet", function (data) {
$("#log").text(data);
});
});
});
```
`$.get()`方法的第一个参数是将请求发送到的 URL 字符串。 第二个参数是一个回调函数,如果请求成功,则执行该函数。 在回调函数内部,我们将返回的数据设置为日记记录元素。
`MyServlet.java`
```js
package com.zetcode.web;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet(name = "MyServlet", urlPatterns = {"/MyServlet"})
public class MyServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/plain;charset=UTF-8");
try (PrintWriter out = response.getWriter()) {
Date date = new Date();
out.printf("Message from MyServlet: %s", date);
}
}
}
```
这是一个响应消息的 Java servlet。 该消息包含当前日期。
![jQuery asynchronous GET request](img/96c022e19638b542baf1856ce397d7d7.jpg)
图:jQuery 异步 GET 请求
单击按钮,该按钮旁边的日志记录元素中将显示一条消息。
## jQuery `when()`方法
jQuery `when()`方法执行具有异步事件的回调函数。
`showing_hiding.html`
```js
jQuery showing/hiding elements
Hide all
Panel 1
Panel 2
Panel 3
Panel 4
```
在示例中,我们有一个按钮来隐藏/显示所有四个面板。 隐藏/显示元素的过程需要一些时间。 任务结束后,按钮的标签将相应更改:从全部隐藏到全部显示,反之亦然。
```js
var task = $("div").toggle(3000);
```
创建一个新任务; 这需要 3 秒钟才能完成。 `toggle()`方法显示或隐藏匹配的元素。
```js
$.when(task).done(function() {
```
任务完成后将调用该函数。
```js
if ($("#btn1").text().match("^Hide")) {
$("#btn1").text("Show all");
} else {
$("#btn1").text("Hide all");
}
```
现在,使用正则表达式,我们更改按钮的标签。
在本教程中,我们使用了 jQuery 库。
您可能也对以下相关教程感兴趣: [jQuery 自动完成教程](/articles/jqueryautocomplete/), [Cheerio 教程](/javascript/cheerio/),[使用 jQuery `DatePicker`](/articles/jquerydatepicker/) 和 [Pyquery 教程](/python/pyquery/)。