JQuery简介与解析

这篇文章距离上次修改已过442天，其中的内容可能已经有所变动。

JQuery是一个快速、简洁的JavaScript库，它使得HTML文档的遍历和操作、事件处理、动画和Ajax交互等操作更加简单和易于使用。

引入JQuery库

在HTML文件中，我们需要通过<script>标签引入JQuery库。




<!DOCTYPE html>
<html>
<head>
    <title>JQuery 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Hello, jQuery!</h1>
</body>
</html>

JQuery选择器

JQuery的核心就是提供各种方便的选择器，让我们可以方便地选择DOM元素。




$(document).ready(function(){
    $("h1").click(function(){
        $(this).hide();
    });
});

在上述代码中，$(document).ready(function(){...})用于确保DOM完全加载后才执行函数内的代码，$("h1")选择所有的<h1>元素，click()方法用于绑定点击事件，$(this)代表当前被点击的元素。

JQuery事件处理

JQuery提供了丰富的事件处理方法，例如click()、hover()、focus()等。




$("button").click(function(){
    $("p").slideToggle();
});

在上述代码中，$("button").click()绑定了点击事件，当点击按钮时，$("p").slideToggle()会使<p>元素上下滑动。

JQuery效果

JQuery提供了一系列的动画效果方法，如fadeIn()、fadeOut()、slideDown()、slideUp()等。




$("button").click(function(){
    $("p").fadeOut();
});

在上述代码中，当点击按钮时，$("p").fadeOut()会使<p>元素淡出视图。

JQuery AJAX

JQuery提供了$.ajax()方法，用于执行异步HTTP请求，实现AJAX交互。




$.ajax({
    url: "test.html",
    context: document.body
}).done(function() {
    $(this).append(" 已载入 test.html");
});

在上述代码中，$.ajax()发送请求到"test.html"，并在成功载入后追加文本到document.body。

JQuery链式调用

JQuery允许我们将多个操作链式调用在一起，每一步的返回结果都是下一步的输入。




$("p").find("span").hover(function(){
    $(this).addClass("hilight");
}, function(){
    $(this).removeClass("hilight");
});

在上述代码中，$("p").find("span")先找到所有<p>元素中的<span>元素，然后hover()方法用于绑定悬停事件，当鼠标悬停时添加hilight类，当鼠标离开时移除hilight类。

以上就是JQuery的基本概念和使用示例。

JQuery简介与解析

评论已关闭

推荐阅读