jQuery

###############

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

在您开始学习 jQuery 之前,您应该对以下知识有基本的了解:

什么是 jQuery?

jQuery 是一个轻量级的 "写的少,做的多" 的 JavaScript 库。

jQuery 是使在您的网站上使用 JavaScript 变得更加容易。

jQuery 接受了许多需要许多行 JavaScript 代码才能完成的常见任务,并将它们封装到可以用一行代码调用的方法中。

jQuery 还简化了 JavaScript 中许多复杂的事情,比如 AJAX 调用和 DOM 操作。

jQuery 库包含以下功能:

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

提示: 除此之外,Jquery还提供了大量的插件。

为什么使用 jQuery ?

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架,而且提供了大量的扩展。

很多大公司都在使用 jQuery, 例如:

  • Google
  • Microsoft
  • IBM
  • Netflix

向您的页面添加 jQuery 库

可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法:

  • 从 jquery.com 下载 jQuery 库
  • 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

下载 jQuery:https://jquery.com/download/

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

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

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

jQuery 库是一个单独的 JavaScript 文件,您可以使用 HTML <script> 标记引用它(注意 <script> 标记应该位于 <head> 部分中):

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

 

提示: 将下载的文件放在网页的同一目录下,就可以使用jQuery。

Microsoft CDN:

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
</head>

 

Google CDN:

<head>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
</head>

通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions)。

 

jQuery is registered as a package on npm. You can install the latest version of jQuery with the npm CLI command:

npm install jquery
If you have access to Git, you can connect to the repository here:
git clone git://github.com/jquery/jquery.git
You can also check out and build a specific version of jQuery from GitHub:
git clone git://github.com/jquery/jquery.git
git checkout 1.2.6

 

 

 

jQuery 语法

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

基础语法是: $(selector).action()

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

示例

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

$("p").hide() - 隐藏所有 <p> 元素

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

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

文档就绪事件

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:

ready

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

在使用文档之前,最好等待文档完全加载并准备就绪。这允许您将 JavaScript 代码放在文档主体之前的 head 部分。

如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:

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

提示: jQuery 还为 document ready 事件创建一个简洁写法(与以上写法效果相同):

$(function(){

  // jQuery 方法在这里...

});

以上两种方式你可以选择你喜欢的方式实现文档就绪后执行 jQuery 方法。

 

 

 

 

 

 

 

 

 

 

 

###########################

posted @ 2022-09-15 10:20  igoodful  阅读(114)  评论(0编辑  收藏  举报