学习jQuery库的第一天

简介

什么是 jQuery ？

jQuery 是一个广泛使用的 JavaScript 库。它简化了网页开发中常见的许多任务，例如 HTML 文档遍历、操作 HTML 元素、处理事件、动画效果、Ajax 网络请求等。通过使用 jQuery，开发人员可以更加高效地编写跨浏览器兼容的 JavaScript 代码。jQuery 提供了简洁明了的 API，使得操作和修改 HTML 和 CSS 变得简单而直观。它被许多网站广泛应用，在前端开发中起到了极其重要的作用。

jQuery 安装

jQuery 安装

有两个版本的 jQuery 可供下载：

• Production version - 用于实际的网站中，已被精简和压缩。
• Development version - 用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以从 jQuery.com 中下载。

提示：可以把下载文件放到与页面相同的目录中，这样更方便使用。

替代方案

如果你不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。

//Staticfile CDN:
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
 
//百度 CDN:
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
 
//又拍云 CDN:
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
 
//新浪 CDN:
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
 
//Google CDN:（	不大推荐使用Google CDN来获取版本，因为Google产品在中国很不稳定。）
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
 
//Microsoft CDN:
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

注意：使用静态文件CDN（内容分发网络）服务如百度、又拍云、新浪、谷歌或微软提供的jQuery库有很大优势。这些CDN服务通常已经在全球范围内建立了许多服务器节点，因此用户在访问其他站点时可能已经从这些CDN加载过jQuery库。当用户访问您的站点时，浏览器会从缓存中加载已经存在于用户本地的jQuery库，从而减少了加载时间。另外，CDN服务可以根据用户的位置自动选择离用户最近的服务器节点来提供文件，进一步提高加载速度。因此，使用CDN服务可以带来更快速的网页加载，提升用户体验。

jQuery 使用版本

我们可以在浏览器的 Console 窗口中使用 $.fn.jquery 命令查看当前 jQuery 使用的版本

jQuery 语法

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）"查询"和"查找" HTML 元素
• jQuery 的 action() 执行对元素的操作

实例:

• $(this).hide() - 隐藏当前元素

• $("p").hide() - 隐藏所有

  元素

• $("p.test").hide() - 隐藏所有 class="test" 的

  元素

• $("#test").hide() - 隐藏 id="test" 的元素

文档就绪事件

document ready 事件是 jQuery 中一种常见的用法。该事件在整个 HTML 文档加载完成并解析后触发，表示文档已经准备好了可以进行操作。

使用 document ready 事件有以下优势：

1. 确保代码在页面完全加载和渲染后再执行，避免因为 JavaScript 在页面尚未完全加载时操作 DOM 导致的错误。
2. 在多个 JavaScript 文件中使用 document ready 事件可以确保它们按照正确的顺序执行，而不会由于加载的先后顺序问题导致错误。
3. 可以防止 JavaScript 代码在 DOM 元素还未完全生成时尝试访问元素而导致的错误。
4. 便于维护和管理代码，将所有与 DOM 相关的操作都放在一个统一的位置，提高代码的可读性和可维护性。

使用方式如下：

$(document).ready(function() {
  // 在这里编写需要在文档就绪后执行的代码
});

另外，也可以使用更简化的写法：

$(function() {
  // 在这里编写需要在文档就绪后执行的代码
});

注意：无论使用哪种写法，都能确保代码在文档就绪后执行，避免潜在的问题。

扩展内容

jQuery 入口函数:

$(document).ready(function() {
  // 在这里编写需要在文档就绪后执行的代码
});
或者
$(function() {
  // 在这里编写需要在文档就绪后执行的代码
});

JavaScript 入口函数:

window.onload = function () {
    // 执行代码
}

jQuery 入口函数与 JavaScript 入口函数的区别：

• jQuery 的入口函数使用 $(document).ready() 或简写的 $()，在整个 HTML 文档解析完成后立即执行。它确保代码在 DOM 元素加载完成后就可以操作这些元素，而不需要等待其他内容（如图片等）加载完毕。这样可以更早地执行代码，并且避免由于尝试操作尚未加载的元素而导致的错误。
• JavaScript 的 window.onload 事件是在整个页面及其所有外部文件（如图片、样式表等）都加载完成后才会触发。它表示整个页面已经完全加载，包括非 DOM 内容。因此，window.onload 事件适用于需要在页面完全加载后才执行的操作，例如处理包含外部资源的图形或设置需要所有资源可用的环境。

因此，jQuery 的入口函数和 JavaScript 的 window.onload 事件在触发时机上有所区别，前者在 DOM 加载完成后立即执行，后者在整个页面及其所有外部文件加载完成后执行。选择使用哪种入口函数取决于具体的需求和代码逻辑。

jQuery 选择器

1. 基础选择器 Basics

2.层次选择器 Hierarchy

3.基本过滤器 Basic Filters

4. 内容过滤器 Content Filters

5.可见性过滤器  Visibility Filters

6.属性过滤器 Attribute Filters

7.子元素过滤器 Child Filters

8.表单选择器 Forms 

9.表单过滤器 Form Filters