jQuery基础（菜鸟教程，建议收藏不然怕你后悔！）

最新推荐文章于 2024-04-29 17:01:02 发布

VIP文章今天去学习了吗？

最新推荐文章于 2024-04-29 17:01:02 发布

阅读量1.8w

点赞数 4

分类专栏：前端 es5 js 文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/m0_58620483/article/details/126549354

版权

jQuery基础

在线使用：jquery (v3.6.0) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

官网下载：jQuery

中文文档：jQuery API 中文文档 | jQuery 中文网 jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

1.jQuery入门

1.1.jQuery介绍

jQuery是一个Javascript库，是对于ECMAScript、dom、bom的一个浅封装，让用户更方便操作。 jQuery功能：使用CSS选择器进行元素查询事件机制 Dom操作属性操作工具方法 Ajax 我们将会从以上几个点展开讲述

学习jQuery之前需具备顶基础知识：

HTML
CSS
JavaScript

jQuery库包含**以下功能：**

HTML选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和函数
HTML DOM遍历和修改
AJAX

提示：除此之外，Jquery还提供了大量的插件，目前jQuery兼容于所有主流浏览器

1.2.jQuery安装

jQuery安装十分简单，只需要将jQuery的库导入到html中即可，我们可以下载下来也可以使用CDN资源。一般我们在下载或者使用cdn资源的时候，都会让我们选择jquery.js 与 jquery.min.js版本，它们的区别在于jquery.min.js是经过压缩的，体积更小，适用于部署环境。而jquery适用于源码研究，我们对于jquery的学习，应该要上升到源码层次。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

网页中添加jQuery
- 从jquery.com下载jQuery库
- 从CDN中载入jQuery
下载jQuery

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

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

以上两个版本都可以在jQuery官网下载

jQuery库是一个JavaScript文件，可以使用HTML的<script>标签引用，但需要注意引入的jQuery的版本要和API手册版本/开发使用一致

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01-HelloWorld.html</title>
  <!-- 本地引入 -->
  <script src="../../jquery-3.5.1/jquery-3.5.1.js"></script>
  <!-- 通过cdn引入 -->
  <!-- 
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   -->
  <script>
    // 1.原生JS的固定写法
    window.onload = function () {
      alert('helloworld -- js')
    }
    // 2.jQuery的固定写法
    $(document).ready(function () {
      alert('helloworld -- jquery')
    })
  </script>
</head>
<body>
</body>
</html>

1.3.jQuery函数

通过"jQuery"和"$"来调用jQuery函数 $(选择器) 通过选择器选择到符合条件的Element元素，将其保存到jQuery对象 $(html片段) 将html片段转换成Element元素，然后再封装成一个jQuery对象 $(Element元素) 将Element元素转换成一个jQuery对象 $(匿名函数) 匿名函数在文档加载完毕以后执行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02-jQuery的核心函数和核心对象.html</title>
  <!-- 
    1.jQuery核心函数
    简称:jQuery函数（$/jQuery）
    引入jQuery库以后，直接使用$/jQuery即可
    当函数用:$(params)
    当对象用的时候:$.each()
    2.jQuery核心对象
    简称:jQuery对象 $()
    得到jQuery对象：执行jQuery函数返回的就是jQuery对象
    使用jQuery对象:$obj.xxx()
   -->
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="../../jquery-3.5.1/jquery-3.5.1.js"></script>
  <script>
    $(function () {
      // jQuery核心函数
      console.log($, typeof $);
      // jQuery核心对象
      console.log($(), $() instanceof Object);
    })
  </script>
</head>
<body>
  
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03-比较原生js和jQuery.html</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 100px;
      height: 100px;
      border: 1px solid black;
    }
  </style>
  <!-- 需求 通过原生js和jQuery来获取到三个div 并且修改他们的背景颜色 -->
  <!-- 导入cdn -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="../../jquery-3.5.1/jquery-3.5.1.js"></script>
  <script>
    // JS原生DOM
    window.onload = function () {
      // 1.利用原生JS来查找DOM元素
      var div1 = document.getElementsByTagName('div')[0]
      var div2 = document.getElementsByClassName('box1')[0]
      var div3 = document.getElementById('box2')
      // console.log(div1);
      // console.log(div2);
      // console.log(div3);
      // 2.利用原生JS修改背景颜色
      // div1.style.backgroundColor

最低0.47元/天解锁文章

今天去学习了吗？

关注

4
点赞
踩
58

收藏

觉得还不错? 一键收藏
1
评论
jQuery基础（菜鸟教程，建议收藏不然怕你后悔！）

jQuery是一个Javascript库，是对于ECMAScript、dom、bom的一个浅封装，让用户更方便操作。jQuery功能：使用CSS选择器进行元素查询事件机制 Dom操作属性操作工具方法 Ajax 我们将会从以上几个点展开讲述HTMLCSSJavaScriptjQuery库包含**以下功能：**HTML选取HTML元素操作CSS操作HTML事件函数JavaScript特效和函数HTML DOM遍历和修改AJAX。...
复制链接

扫一扫