首页 > 代码库 > JavaScript（14）jQuery（JavaScript 库）

JavaScript（14）jQuery（JavaScript 库）

2024-07-04 21:40:02   231人阅读

JavaScript 框架（库）
JavaScript 高级程序设计（特别是对浏览器差异的复杂处理），通常很困难也很耗时。为了应对这些调整，许多的 JavaScript (helper) 库应运而生。
这些 JavaScript 库常被称为 JavaScript 框架。

jQuery
jQuery 是目前最受欢迎的 JavaScript 框架。它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）。jQuery 同时提供 companion UI（用户界面）和插件。
jQuery 极大地简化了 JavaScript 编程，很容易学习。

jQuery 库 - 特性
jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性：
  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

如何使用呢？以前没用过，感觉很茫然啊。。。慢慢摸索着弄弄看。。。

一、下载
到jQuery官网http://jquery.com/，进行下载，我选择了“下载未压缩的，发展的jQuery 1.11.1”。
简单介绍下：
未压缩的文件，最好在开发或调试过程中使用；压缩文件，可以节省带宽，提高生产性能，用于实际的网站中。
jQuery的2.x与jQuery的1.x具有相同的API，但不支持Internet Explorer 6，7，8。

下载下来的东西是：jquery-1.11.1.js（jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。）
如果不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 等地方，加载 CDN jQuery 核心文件。

二、使用
比如现在呢，我想实现一个隐藏的效果，比如我点击一段文字，这段文字就会消失。那如何利用jQuery来实现呢？

首先，我要查阅一下jQuery参考手册。网址：http://www.w3school.com.cn/jquery/jquery_reference.asp
这里面呢，有个“效果”选项，“效果”里面呢，有个 hide() 函数，函数说明是：隐藏被选的元素。
看来用 hide() 函数可以实现我想实现的功能，点击“ hide() ”可以看看如何使用该函数。

然后，看一下如何引用“jquery-1.11.1.js”。
把“jquery-1.11.1.js”放在代码的同级目录下，通过以下代码来引用“jquery-1.11.1.js”：
<script src=http://www.mamicode.com/"jquery-1.11.1.js"></script>

如果不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。
谷歌和微软的服务器都存有 jQuery 。从 Google 或 Microsoft 加载 CDN jQuery 核心文件：
<script type="text/javascript" src=http://www.mamicode.com/"http://ajax.googleapis.com/ajax/libs>
<script type="text/javascript" src=http://www.mamicode.com/"http://ajax.microsoft.com/ajax/jquery>使用谷歌或微软的 jQuery，有一个很大的优势：
许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所以结果是，当他们访问你的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。
对于 Google ，如果想访问新版本（假设不知道新版本的具体版本号），那么可以把“1.11.1”改为“1.11”或“1”，谷歌会返回相应系列中最新的可用版本。

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

基础语法是：$(selector).action()
美元符号$定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

示例：
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

注意：
jQuery 函数应该位于一个 document ready 函数（文档就绪函数）中：
$(document).ready(function(){

--- jQuery functions go here ----

});
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。

接下来就是代码啦：
<!DOCTYPE html>
<html>

<head>

<script src=http://www.mamicode.com/"jquery-1.11.1.js"></script>  //引用jquery>
嗯，实践了一下，感觉不错。我在我的网站上运用了一下，点击打开链接。


联系
我们