一、Jquery入门（超详）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44009656/article/details/124536067

本文详细介绍了jQuery的基本概念、环境配置、语法特性，包括文档就绪函数、DOM对象与jQuery对象的转换，并探讨了如何解决与其他库的冲突问题。通过实例展示了jQuery的代码风格和使用方法，帮助读者快速上手jQuery。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

请添加图片描述

文章目录

前言
一、Jquery是什么？
二、配置 jQuery 环境
三、jQuery 语法
- 3.1 文档就绪函数
- 3.2 编写我们的第一个 jQuery 程序
四、 jQuery 代码风格
五、 jQuery 对象和 DOM 对象
六、解决 jQuery 和其他库的冲突
总结

前言

本文将带领大家了解 jQuery 的定义，它有什么作用，我们为什么要学它，以及如何使用它，它的语法是什么，最后对比了 jQuery 对象和 DOM 对象的区别。

一、Jquery是什么？

我们可以简单的理解为 jQuery 是一个 JavaScript 函数库。jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

它有如下的优势：

轻量级

强大的选择器

出色的 DOM 操作的封装

可靠的事件机制

完善的 ajax

不污染顶级变量。

出色的浏览器兼容性。

链式操作方式。

隐式迭代。

行为层与结构层的分离。

丰富的插件支持。

完善的文档。

开源。

二、配置 jQuery 环境

进入 jQuery 的官方网站 http://jquery.com/,可以下载最新的 jQuery 文件到本地，然后再引入到项目即可。官方网站如下所示：
在这里插入图片描述
引入代码示例：

<head>
  <script type="text/javascript" src="jquery.js"></script>
</head>

注意：这里的路径位置，请大家根据实际的情况自行调整。另外官方网站有两个版本的 jQuery 可供下载：一份是精简过的，另一份是未压缩的（供调试或阅读），请大家根据自己的需要自行选择下载。

当然如果我们不想把 jQuery 下载到本地，也可以使用 Google 的 CDN 或者使用 Microsoft 的 CDN：

使用 Google 的 CDN：
Google CDN 国内已经无法访问，以下内容仅作演示。

<head>
  <script
    type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"
  ></script>
</head>

使用 Microsoft 的 CDN：

<head>
  <script
    type="text/javascript"
    src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"
  ></script>
</head>

三、jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：

$(selector).action();

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

另外需要注意的是：在 jQuery 库中 $ 符号就是 jQuery 的一个简写形式，例如 $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲lw") 和 jQuery("\dots$ .ajax 和 jQuery.ajax 是等价的，如果没有特别说明，程序中的 $ 符号都是 jQuery 的一个简写形式。

3.1 文档就绪函数

所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){
   
   

});

// 可以简写成

$(funciton(){
   
   

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

试图隐藏一个不存在的元素。
获得未完全加载的图像的大小。

上面的这段代码其实有点类似于传统 JavaScript 中的 window.onload 方法，不过它们还是有一些区别的，简单对比如下所示：

	window.onload	$(doucment).ready()
执行时机	必须等待网页中所有的内容加载完毕后才能执行（包括图片）	网页中所有 DOM 结构绘制完毕后就执行，可能 DOM 元素关联的东西并没有加载完
编写个数	不能同时编写多个。	能同时编写多个。

编写个数的意思就是：

window.onload = function () {
   
   
  alert("test1");
};
window.onload = function () {
   
   
  alert("test2");
};
//结果只会输出 test2。

$(document).ready(function () {
   
   
  alert("test1");
});
$(document).ready(function () {
   
   
  alert("test2");
});
//结果两次都输出

3.2 编写我们的第一个 jQuery 程序

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!-- Microsoft  的 CDN 的方式加载jQuery -->
    <head>
        <script
                type="text/javascript"
                src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"
        ></script>
    </head>
</head>
<body>
<script type="text/javascript">
    //等待dom元素加载完毕
    $(document).ready(function (