jQuery基础知识

jQuery 可能是目前最流行的 JavaScript 库，它提供了许多至今仍对开发非常有用的功能。它是一个轻量级的 JavaScript 库，其创建者将其口号定为“少写代码，多做事”。jQuery 的目标是让在网站上使用 JavaScript 变得更加容易。该库将许多过去需要多行 JavaScript 代码才能完成的常见任务封装成方法，您只需一行代码即可轻松调用这些方法。

要在网站上使用 jQuery，需要完成几个重要步骤。第一步是下载 jQuery 库，并在 HTML 页面的 `<source>` 标签中将其链接到该库。代码应该类似于这样。

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

在使用 jQuery 之前，还需要调用 `document.ready` 函数。所有代码都应该放在这个函数体内部。这样可以确保在调用任何 jQuery 方法之前，DOM 中的所有内容都已完全加载，因为你肯定不希望在元素尚未加载到页面之前就对其进行操作。

$(document).ready(function() {
    // All your jQuery will go here!
});

使用 jQuery 进行选择

完成最后两个步骤后，我们就可以开始使用 jQuery 了！首先，我们使用 jQuery 方法，可以通过调用 `jQuery()` 或直接使用 `$()` 符号来实现。我们主要使用 CSS 语法访问 DOM，并使用上述两种方法之一来执行操作。jQuery 的基本语法是 `$("selector").method();`。

选择器本质上就是我们告诉 jQuery 要操作哪些元素的方式。让我们来看看几种选择元素的方法。

// Select all image tags and add the class 'profilePic'
$("img").addClass("profilePic");
// Select all elements with the 'custom' class and change to green text
$(".custom").css("color", "green");
// Select all elements with the 'custom' id and set font size to 20px
$("#custom").css("font-size", "20px");
// Select all <a> tags inside of <li>'s and set font to bold
$("li a").css("font-weight","Bold");

例如，运行 $(“h1”) 将选中所有 header 1 标签。您可以使用 CSS 方法操作 DOM 元素，只需使用 css 关键字即可。如果您想将所有 header 元素的字体更改为蓝色，则可以输入 $(“h1”).css("color", "blue");。

jQuery 方法

选择要操作的 DOM 元素后，jQuery 库提供了大量可用于对其进行操作的方法。`.css()` 方法接受两个参数，第一个参数是要更改的 CSS 属性，第二个参数是要进行的更改。您还可以使用 `.addClass()` 或 `.removeClass()` 方法添加和删除类。`.keypress()` 和 `.on()` 方法用作事件处理程序，可以在指定选择器上发生特定事件时触发相应的函数。`.fadeOut()` 方法会将匹配的元素淡入淡出至透明，而 `.slideUp()` 方法会以滑动的方式隐藏匹配的元素。与使用原生 JavaScript 相比，使用 jQuery 编写 AJAX 调用也更加便捷。

总之，jQuery 是一个非常易于使用的库，尤其适合已经掌握 JavaScript 的用户。尽管与一些新兴框架相比，jQuery 的历史相对较短，但它仍然非常流行，超过 80% 的 JavaScript 网站都使用了 jQuery。它能够用简洁易读的单行代码实现一些与原生 JavaScript 相同的功能。总而言之，jQuery 是一个非常适合初学者的库，它能帮助你用更少的代码完成更多的工作。