jQuery基础入门（一）

最新推荐文章于 2025-08-07 14:12:26 发布

Ednah

最新推荐文章于 2025-08-07 14:12:26 发布

阅读量702

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery 文章标签： JAVASCRIPT jquery web开发前端

本文链接：https://blog.youkuaiyun.com/Ednah/article/details/54293778

JQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了jQuery的基础知识，包括其作为JavaScript库的作用，简化HTML处理、事件处理、动画和AJAX交互。jQuery的免费开源性质及丰富的插件生态使得开发更为便捷。然而，它存在向后兼容性问题和插件冲突等缺点。安装jQuery可以通过下载或使用CDN链接。jQuery的基本语法是$(selector).action()，用于选取元素并执行特定操作。文中还提供了一个有趣的案例，演示了如何使用jQuery隐藏被点击的段落。

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

一. jQuery简介

jQuery的字面意思其实就是JavaScript和查询（Query），即用于辅助开发JavaScript的库。jQuery使用户可以更加方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，而且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详尽，同时还有很多成熟的插件可供选择。jQuery可以使用户的html页面保持代码和html的内容分离，也就是说，不需要再在html里面插入一堆js来调用命令了，只需要定义id即可。

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此之外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

二. jQuery的缺点

1、不能向后兼容。每一个新版本不能兼容早期的版本。

2、插件兼容性不是太好，与上一点类似。

3、在同一页面上使用多个插件时，很容易碰到冲突现象，尤其是这些插件依赖相同事件或selector时最为明显。

4、在大型框架中，jQuery核心代码库对动画和特效的支持相对较差。但是实际上这不是一个问题。目前在这方面有一个单独的jQuery UI项目和众多插件来弥补此点。

三. jQuery的安装

①从官网 jquery.com 下载 jQuery 库

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

Production version - 用于实际的网站中，已被精简和压缩。

Development version - 用于测试和开发（未压缩，是可读的代码）

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：

   <head>
     <script src="jquery-1.10.2.min.js"></script>
   </head>

②从 CDN（内容分发网络）中载入 jQuery,百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。

四. jQuery 语法

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

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

实例:

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

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

$(".test").hide() - 隐藏所有 class="test" 的段落

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

2. 文档就绪事件

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

$(document).ready(function(){

   // 开始写 jQuery 代码...

 });

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

五. 一个很有趣的jQuery案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>点我</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>你点我，我就会消失。</p>
<p>点我!</p>
<p>点我!</p>
</body>
</html>

效果如下：