第二章 JQuery基础知识

2.1 JQuery基础语法

JQuery是一个快速、简洁的JavaScript库，它使得操作HTML文档、处理事件、动画效果和AJAX等操作变得更加简单。以下是一些基本的JQuery语法：

2.1.1 JQery的语法结构

以下是一个用于打印输出"Hello World!"的JQuery程序，可以展示JQuery程序的基本结构：

<!DOCTYPE html>
<html>
<head>
  <title>My JQuery page</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("body").append("<p>Hello World!</p>");
    });
  </script>
</head>
<body>
</body>
</html>

这个程序中，我们引入了JQuery的库文件：

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

然后，在<head>标签中添加了JQuery代码：

$(document).ready(function(){
  $("body").append("<p>Hello World!</p>");
});

在这个函数中，我们使用了JQuery的append()方法，在<body>标签中添加了一个段落元素，并将其内容设置为"Hello World!"。

最后，在<body>标签中，我们没有添加任何HTML代码，因为我们通过JQuery动态添加了一个段落元素。

注意，JQuery代码通常存放在<script>标签对中。JQuery代码使用$()函数进行选择器操作，并且通常在$(document).ready()函数中执行，以确保所有的元素都已经加载完成。

2.1.2 符号$的使用

在JQuery中，符号$是一个全局函数，也是JQuery的一个别名。它允许我们使用更简短的方式来调用JQuery的方法。

例如，如果要选择一个元素并对其进行操作，可以使用如下代码：

$("p").hide();

这个代码的意思是：选择所有的段落元素（使用选择器"p"），并将它们隐藏起来。

在上面的代码中，$函数是一个别名，它实际上等同于jQuery函数。也就是说，下面的代码是等效的：

jQuery("p").hide();

因此，使用符号$可以让我们更方便地编写JQuery代码，同时也可以提高代码的可读性。

但需要注意的是，在某些情况下，$符号可能会与其他JavaScript库发生冲突，导致错误。为了避免这种情况，可以使用noConflict()方法来释放$符号的控制权，例如：

var myJQuery = $.noConflict();
myJQuery("p").hide();

这个代码的意思是：释放$符号的控制权，将其赋值给变量myJQuery。然后，可以使用myJQuery函数来调用JQuery的方法。

2.2 JQuery的代码风格

2.2.1 JQuery的链式编程风格

JQuery的链式编程风格是JQuery的一个重要特点之一。它允许我们在一行代码中同时执行多个JQuery操作，从而简化了JQuery代码的编写和阅读。

例如，我们可以使用链式编程风格来实现以下代码：

$("p").css("color", "red").slideUp(2000).slideDown(2000);

这个代码的意思是：选择所有的段落元素，将它们的文字颜色设置为红色，然后将它们向上滑动2秒钟，最后再向下滑动2秒钟。

在这个代码中，我们在一行中使用了三个JQuery操作：css()、slideUp()和slideDown()。这些操作按照调用的顺序进行执行，它们的返回值是一个JQuery对象，这个对象又可以继续调用JQuery方法。

因此，链式编程风格让我们可以在一行代码中实现多个操作，并且让代码更加简洁易读。

需要注意的是，链式编程风格并不是必须的，我们仍然可以使用传统的编程风格来编写JQuery代码。但是，使用链式编程风格可以让代码更加简洁易读，特别是当需要执行多个操作时，链式编程风格的优势更加明显。

2.2.2 JQuery代码的注释

在JQuery中，我们可以使用传统的JavaScript注释来注释我们的代码。注释可以帮助我们记录代码的目的和实现细节，让代码更加易读和易于维护。

JQuery支持两种注释方式：单行注释和多行注释。

单行注释使用//符号开头，例如：

// 这是一行单行注释

多行注释使用/* */符号包裹注释内容，例如：

/*
这是一段
多行注释
*/

在实际的JQuery代码中，我们可以根据需要使用注释来解释代码的功能、参数含义、调用顺序等信息。例如：

// 选择所有的段落元素，并将它们的背景颜色设置为红色
$("p").css("background-color", "red");

// 隐藏所有的图片元素，并在2秒内淡入显示它们
$("img").hide().fadeIn(2000);

/*
这是一段
多行注释，用于解释以下代码的作用：
选择所有的表格行，并在单击时将它们的背景颜色设置为黄色
*/
$("tr").click(function(){
  $(this).css("background-color", "yellow");
});

在实际开发中，注释应该是清晰明了、准确无误的，以便其他开发者能够理解和修改代码。

2.3 文档就绪函数

在JQuery中，文档就绪函数（Document Ready Function）是一个非常重要的概念。文档就绪函数指的是当整个HTML文档加载完毕，并且DOM（文档对象模型）树已经构建完成时，会触发一个事件，我们可以利用这个事件来执行一些JQuery操作。

JQuery提供了一个方便的函数$(document).ready()来绑定文档就绪事件。使用这个函数，我们可以在文档就绪后执行一些JQuery操作，例如：

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

上面的代码中，我们使用了$(document).ready()函数来绑定文档就绪事件。当文档就绪后，就会执行传递给$(document).ready()函数的回调函数。

需要注意的是，为了避免在DOM元素尚未创建时执行JQuery操作而导致错误，我们应该将JQuery代码放在文档就绪事件中。另外，由于$(document).ready()函数非常常用，JQuery提供了一种更简洁的写法，即使用$(function(){})来替代$(document).ready(function(){})，例如：

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

总之，文档就绪函数是JQuery中非常重要的概念，它可以确保我们的JQuery操作在DOM元素已经完全加载并可用时执行，从而避免了一些常见的错误。

下表列出了 window.onload 和 $(document).ready()



特性

window.onload

$(document).ready()

触发时机

页面上所有资源（包括图片、样式、脚本等）加载完成后触发

DOM 树构建完成后就会触发，不需要等待页面上所有资源加载完成

绑定多个事件处理函数

只能绑定一个事件处理函数，多次绑定会相互覆盖

可以绑定多个事件处理函数，它们都会被触发

原生 JavaScript 方法

是原生 JavaScript 事件

是 JQuery 方法

使用方式

直接在 HTML 中定义事件处理函数，或在 JavaScript 中使用 window.onload = function(){}

在 JavaScript 中使用 $(document).ready(function(){}) 或 $(function(){})



需要注意的是，虽然 $(document).ready() 事件触发时机早于 window.onload，但它并不能代替 window.onload。因为在页面上所有资源加载完成之前，$(document).ready() 事件绑定的事件处理函数可能无法正确执行。因此，如果你的脚本需要访问页面上的图片、样式等资源，或需要修改页面上的 DOM 结构，最好还是使用 window.onload

2.4 JQuery对象和DOM对象

在 JQuery 中，选择器选择的结果是一个 JQuery 对象，它是一个类数组对象，类似于数组，但不是数组，可以使用一些 JQuery 提供的方法来操作其中的元素。

而 DOM（文档对象模型）对象是指页面上的 HTML 元素对象，这些元素对象可以通过 JavaScript 脚本进行访问和操作。

2.4.1 JQuery对象

jQuery 是对JavaScript 的封装。很显然jQuery 对象就是对 JavaScript 中 DOM 对象的封装。jQuery 不需要写 documentgetElementByID 这样的长单词，一个符号$就代替了。例如，获取“p”节点可以写成:$(“p")，这样获取到的对象就是jQuery 对象。

2.4.2 DOM元素

DOM 元素（Document Object Model Element）是指 HTML 或 XML 文档中的一个元素，例如 div、p、span

例如，以下代码选取了一个 ID 为 myDiv 的 div

<div id="myDiv">Hello World!</div>
// 获取元素
var divElement = document.getElementById('myDiv');

// 修改文本内容
divElement.textContent = 'Hello JavaScript!';

可以看到，通过 document.getElementById 方法可以获取指定 ID 的 DOM 元素，然后通过该元素的属性 textContent

除了通过 document.getElementById 获取元素之外，还可以使用其他方法获取 DOM 元素，例如 document.getElementsByTagName、document.getElementsByClassName 等。在 jQuery 中，可以使用 $ 或 jQuery 函数来选择 DOM 元素，例如 $('<div>')、$('p')

2.4.3 JQuery对象与DOM对象的相互转化

在 jQuery 中，可以通过以下方法将 jQuery 对象与 DOM 对象相互转换：

  1. 将 jQuery 对象转换为 DOM 对象：

可以通过数组下标访问 jQuery 对象中的第一个元素，然后使用 []

// 获取第一个 div 元素的 DOM 对象
var divElement = $('div')[0];

将 DOM 对象转换为 jQuery 对象：

可以使用 $() 或 jQuery()

// 获取 ID 为 myDiv 的 div 元素的 jQuery 对象
var divObject = document.getElementById('myDiv');
var $divObject = $(divObject);