jQuery 教程 jQuery 教程jQuery 下载 jQuery 语法jQuery 选择器

jQuery 下载

把 jQuery 添加到您的网页

如需使用 jQuery,您需要下载 jQuery 库(会在下面为您讲解),然后把它包含在希望使用的网页中。

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

<head>
<script src="jquery.js"></script>
</head>

请注意,<script> 标签应该位于页面的 <head> 部分。

注意您是否很疑惑为什么我们没有在 <script> 标签中使用 type="text/javascript" ?在 HTML5 中,不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言!

下载 jQuery

要开始使用,首先下载 jQuery 的副本并将其包含在您的文档中。 有两个版本的 jQuery 可供下载 。

未压缩的文件适合开发或调试环境; 同时,建议将压缩后的文件用于生产环境,因为它节省了宝贵的带宽,并且由于文件较小而提高了性能。


你可以从这里下载 jQuery:https://jquery.com/download/

注意 将下载的文件放在指定的目录下,就可以使用jQuery。

案例

360截图20240608174816667.jpg

这是一个简单的jQuery案例,它将在页面加载完成后隐藏点击的<p>元素:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 教程</title>
    <script src="/Template/Foreground/js/jquery-1.11.1.min.js"></script>
</head>
<body>
    <p>点击我隐藏.</p>

    <p>jQuery 教程 http://www.xuandaima.com/</p>

    <script>
        $(document).ready(function(){
        $("p").click(function(){
            $(this).hide();
        });
        });
    </script>

</body>
</html>

运行代码

替代方案

如果您不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。

百度、字节跳动和微软的服务器都存有 jQuery 。

如果你的站点用户是国内的,建议使用百度、字节跳动等国内CDN地址,如果你站点用户是国外的可以使用微软。

注意本站实例均采用菜鸟教程 CDN 库。

如需从 百度、字节跳动或微软引用 jQuery,请使用以下代码之一:

百度CDN

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

字节跳动CDN

<head>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.3/jquery.min.js">
</script>
</head>

微软CDN

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

CDN 都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度。

jQuery 使用版本

我们可以在浏览器的 Console 窗口中使用 $.fn.jquery 命令查看当前 jQuery 使用的版本:

360截图20240611102952069.jpg