jQuery.js

前端

JavaScript

jQuery

作者

yangjh

发布日期

January 21, 2023

jQuery 简介

创造优美事物的方式往往不是从头做起，而是在现有成果的基础上做一些小小的调整，或者将已有的观点用比较新的方式组合起来。

保罗·格雷厄姆，《黑客与画家》

即便掌握了 JavaScript 脚本的基本知识，开发者在使用 JavaScript 时，仍面临一个重大挑战，那就是不同浏览器对 Web 标准的支持不尽一致，往往大部分时间和精力花在解决浏览器兼容性的问题上。另外，常见的 JavaScript 应用如果在每次内容制作中都要重写的话，工作效率将是非常低下的。为此，很多开发者提供了“库”来解决上述问题。常见的 JavaScript 库有 jQuery、Prototype、Mootools 等等，经过若干年的发展和竞争，jQuery 脱颖而出，成为使用最为广泛的 JavaScript 库。可以毫不夸张地说，jQuery 的出现改变了开发者使用 JavaScript 的习惯。

jQuery 是一个开源免费的优秀 JavaScript 库，它能使用户更加方便地处理 HTML 文档、事件等等。jQuery 由约翰·雷西格（John Resig）于 2006 年创建，从最初的增强 CSS 选择器功能，发展至今，功能日益丰富：

jQuery 大大简化了选取 DOM 局部内容的步骤，可以灵活高效地选择页面内容。
引入 jQuery 后，开发人员不再需要考虑复杂的浏览器兼容问题，可以更加轻松地处理事件，提高脚本的稳定性。
jQuery 内置了可自定义参数的动画效果，简化了应用动画效果的过程。
jQuery 还提供了很多附加的功能简化了常用的 JavaScript 操作。
jQuery 使用最新的 CSS3 标准，即便不支持 CSS3 的浏览器，也能通过脚本达到 CSS3 的效果，极大地丰富网页的表现形式。
jQuery 提供了一整套 Ajax 相关操作的方法，大大方便了异步交互的开发和使用。

此外，jQuery 是一个开源软件，围绕着 jQuery 已经建立了良好的“生态系统”，用户众多，文档齐全，学习成本较低。同时还有许多成熟的插件可供选择。

学习 jQuery，最好的资源还是官方文档。此外，还有非官方的中文社区。

在 jQuery 官方网站下载最新版的 jQuery，将其放置在合适的目录中，然后在 HTML 文档中使用 script 元素引用 jQuery 库，即可使用 jQuery 提供的强大方便的功能。

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

jQuery 中的“$”

在 jQuery 中，最频繁使用的莫过于美元符号“$”等同于“jQuery”，表示 jQuery 对象。

jQuery 对象就是通过 jQuery 包装 DOM 对象之后产生的对象。为了方便代码的编写，通常采用“$”代替“jQuery”。“$”提供了丰富的功能，包括选择页面中的元素、作为功能函数的前缀、window.onload的改进、创建 DOM 等等。一定要注意，在 jQuery 对象中无法直接使用原生 JavaScript 中 DOM 对象的方法和属性，但可使用 get(index)方法将 jQuery 对象转化为 DOM 对象。

`$( document ).ready()`

浏览器载入 HTML 文档并不是一次性全部载入的，而是从上到下依次载入。但我们的脚本可能就在文档的顶端或者中间，当脚本已经载入，但 HTML 文档还没有完全载入完毕时，脚本去处理还没有载入的 DOM 时会产生无效或者错误结果。为了解决这一问题，人们想出了一些方案：

将脚本放在页面最下面。这种方案在大多数时候是有效的，但是有的时候，创作者并没有能将脚本放在页面底部的权限或者可能性。例如，在大多数 CMS 中，普通编辑人员只能就文档的局部内容进行修改，整体文档的生成则是不同部门的合作结果。想象一下淘宝、天猫的首页、门户网站的首页等等皆是如此。
使用window.onload事件。window.onload会在页面所有元素都载入后触发，当页面中有大量图片或者视频时，触发的时机有些过晚。还有，window.onload只能使用一次，当页面中的多个脚本调用window.onload时会产生冲突。

jQuery 中的ready()方法很好地解决了上述问题，它能够自动将其中的函数在页面加载（实际上是 DOM 准备完毕后）完成后运行。并且同一个页面可以使用多个ready()方法，而且互不冲突。$( document ).ready()可简写为下面的代码，将演示$( document ).ready()和window.onload的区别：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQuery 中的 ready 方法</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <style type="text/css" media="screen">
    body {
        width: 960px;
        margin: 0 auto;
        font: 18px/1.8em '微软雅黑';
    }

    h1 {
        color: green;
    }

    p {
        font-size: 20;
        padding: 5px 0;
    }
    </style>
    <script>
    $(document).ready(
        function() {
            console.log("document.ready() 第一次触发");
        });
    // jQuery 中的 ready 方法可以多次调用，互不冲突
    $(document).ready(
        function() {
            console.log("document.ready() 第二次触发");
        });
    // $( document ).ready() 可简写为$()。
    $(function() {
        console.log("document.ready() 第一次触发");
    });

    window.onload = function() {
        console.log("window onload 事件第一次触发");
    };

    // window.onload 事件多次调用会产生冲突，只执行最后一次的 onload
    window.onload = function() {
        console.log("window onload 事件第二次触发");
    };
    </script>
</head>

<body>
    <h1>jQuery 中的 ready 方法</h1>
    <iframe src="http://cn.bing.com"></iframe>
    <p>请打开控制台查看输出效果</p>
    <!-- <script src="js/jquery-1.11.3.min.js"></script> -->
    <!-- jQuery 库引用位置如果放在这里，则之前的 jQuery 代码出错 -->
</body>

</html>

上面的页面运行后，我们在浏览器控制台中可以看到$( document ).ready()方法运行的三个结果，而window.onload事件虽然脚本中设置了两次，但输出的结果只有一个，而使用 jQuery 的 ready 方法则可多次使用。

jQuery中的选择符

CSS选择符

在 CSS 中，选择符的作用是选择页面中的某些元素，例如，在 CSS 中，我们可以使用 id 选择符选择特定的元素，然后为其添加样式：

#demo {
    color:red;
}

虽然 CSS3 提供非常丰富的选择器，但是由于某些选择器被各个浏览器支持的情况不一样，所以很多选择器在实际 CSS 开发中很少用到。而在 jQuery 中，“$”也能使用 CSS 中的选择符，达到选择特定元素的目的。而且，jQuery 中的选择符已经为用户处理了繁琐复杂的浏览器兼容性问题。

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQuery 中 CSS 选择符的用法</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <style type="text/css" media="screen">
    body {
        width: 960px;
        margin: 0 auto;
        font: 18px/1.8em '微软雅黑';
    }

    h1 {
        color: green;
    }

    .red {
        color: red;
    }

    .center {
        text-align: center;
    }

    .even {
        background-color: #ccc;
    }
    </style>
    <script>
    jQuery(document).ready(function() {
        // jQuery 能使用 CSS 选择符选择特定的元素
        $("#demo").addClass('red');
        // :contains() 选择符
        $("p:contains('.contains')").addClass('red');
        // :eq() 选择符
        $('p:eq(1)').addClass('center');
        $('li:gt(0)').css('backgroundColor', 'yellow');
        $('li:lt(1)').css('backgroundColor', 'yellow');
        $('div:has("p")').addClass('red');
        $(":header").css('backgroundColor', 'yellow');
        $("tr:even").addClass('even');
    });
    </script>
</head>

<body>
    <h1 id="demo" class="center">jQuery 使用 CSS 选择符选择特定节点</h1>
    <p>jQuery 使用 CSS 中的选择符，比如 ID 选择符，选择特定节点。</p>
    <p>jQuery 还可以使用。contains() 选择含有特定内容的元素。</p>
    <ul>
        <li>:eq()</li>
        <li>:gt()</li>
        <li>:lt()</li>
    </ul>
    <div>
        <p>jQuery 中新增了：has() 选择符</p>
    </div>
    <h2>jQuery 可通过：header 选择所有的标题元素</h2>
    <table>
        <tr>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
        </tr>
    </table>
</body>

</html>

上例的运行结果显示：

CSS 选择符确实可以在 jQuery 中使用。事实上 jQuery 通过预先的编程，提供了几乎所有 CSS3 标准下的选择器。
jQuery 还提供了 CSS 机制中没有的选择符。

jQuery的扩展选择符

jQuery作为JavaScript库，是用来处理网页中的内容，实现特定效果的。要改变网页的内容，首先得选择网页的内容，原生JavaScript对DOM进行操作前，也得通过类似于getElementsByTagName()的方法得到DOM的某个部分。而jQuery在CSS选择符基础上，又额外增加了一些选择符，使得jQuery的选择符功能非常强大。下面就介绍CSS选择符之外，jQuery增加的选择符有：

:animated 选择所有正在执行动画效果的元素。
[name!="value"] 选择不存在指定属性，或者指定的属性值不等于给定值的元素。
:button 选择所有按钮元素和类型为按钮的元素。
:checkbox 选择所有类型为复选框的元素。
:contains() 选择包含特定文本内容的所有元素。
:eq() 选择节点列表中的第n个元素（起始数字为0），如果n为负值，表示从后往前。:eq()选择符相当于CSS选择符中的:nth-child()、:nth-last-child()。
:even 选择所引值为偶数的元素，从 0 开始计数。
:file 选择所有类型为文件（file）的元素。
:first 选择第一个匹配的元素。
:gt() 选择节点列表中的第n个元素以上的所有元素，如果n为负值，表示从后往前。
:has() 选择至少含有一个指定元素的所有父元素。
:header 选择所有的标题元素，比如h1、h2等等。
:hidden 选择所有隐藏的元素。
:input选择所有 input, textarea, select 和 button 元素.
:last 选择最后一个匹配的元素。
:lt() 选择节点列表中的第n个元素以上的所有元素，如果n为负值，表示从后往前。
:odd 选择索引值为奇数元素，从 0 开始计数。
:parent 选择所有含有子元素或者文本的父级元素。
:password 选择所有类型为密码的元素。
:radio 选择所有类型为单选框的元素。
:reset 选择所有类型为重置的元素。
:selected 获取 select 元素中所有被选中的元素。
:submit 选择所有类型为提交的元素。
:text 选择所有类型为文本的元素。
:visible 选择所有可见的元素。

除了CSS选择符及jQuery扩展的选择符之外，jQuery还提供了一个功能强大的filter()方法，该方法的参数既可以是选择符，还可以是一个函数。作为filter()参数的函数，其返回值必须是布尔值，filter()方法会逐一在选择结果中执行函数，最终对结果集进行过滤。

下面的案例，用以演示filter()的用法：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQuery中filter方法</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <style type="text/css" media="screen">
    body {
        width: 960px;
        margin: 0 auto;
        font: 18px/1.8em '微软雅黑';
    }

    h1 {
        color: green;
    }

    .info {
        background-color: yellow;
    }
    </style>
    <script>
    jQuery(document).ready(function() {
        // 选择指定列
        $('td:nth-child(5n+3)')
            // 将函数作为参数传给filter方法
            .filter(function() {
                console.log($(this).text());
                if ($(this).text() < 21) {
                    return true;
                } else {
                    return false;
                }
            }).addClass('info');
    });
    </script>
</head>

<body>
    <h1>jQuery中的filter方法</h1>
    <table>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>专业</th>
        </tr>
        <tr>
            <td>1</td>
            <td>小明</td>
            <td>21</td>
            <td>男</td>
            <td>新闻</td>
        </tr>
        <tr>
            <td>2</td>
            <td>小冷</td>
            <td>20</td>
            <td>女</td>
            <td>广告</td>
        </tr>
        <tr>
            <td>3</td>
            <td>小宝</td>
            <td>22</td>
            <td>女</td>
            <td>数学</td>
        </tr>
        <tr>
            <td>4</td>
            <td>老盖</td>
            <td>24</td>
            <td>男</td>
            <td>软件工程</td>
        </tr>
    </table>
</body>

</html>

在这个例子中，我们将一个函数作为参数，传递给filter()方法，最终实现了将年龄小于21岁的单元格标记出来的功能。

jQuery中的事件处理

JavaScript内置了很多处理用户交互行为的其他事件的方法，jQuery增强和扩展了其事件处理的机制，并使用更加优美的语法来处理事件。

处理简单事件

jQuery提供的on()方法，能够将事件处理函数绑定到选中元素的一个或多个事件上。要移除绑定的事件，使用.off()方法。

on()方法的参数如下：

events 事件名称，必需参数。（多个事件名称用空格隔开）
selector 选择符，可选参数，作用是将事件绑定到选择结果中的后代选择符中。
data 数据，可选参数，当事件触发后，将数据传递以event.data的形式传递到事件处理函数。
handler 处理函数，必需参数，当事件触发时执行的函数。

on()方法相当于DOM中的addEventListener()，但要比后者功能丰富。

另外，大多数事件类型可以直接利用事件名称作为绑定函数，接受参数为监听函数，例如：

$(#demo).click(function(){
    //事件处理
    });

下面是jQuery中绑定事件的案例：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQuery中的事件绑定</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <style type="text/css" media="screen">
    body {
        width: 960px;
        margin: 0 auto;
        font: 18px/1.8em '微软雅黑';
    }

    h1 {
        color: green;
    }

    div {
        height: 300px;
        border: 1px red solid;
        border-radius: 5px;
    }
    </style>
    <script>
    $(function() {
        $("#demo").on('click', function() {
            $(this).css('backgroundColor', randomColor());
        });

        function randomColor() {
            return '#' + Math.random().toString(16).slice(2, 8);
        };
    });
    </script>
</head>

<body>
    <h1>jQuery中的事件绑定</h1>
    <p>点击方框区域，随机更换背景颜色</p>
    <div id="demo"></div>
</body>

</html>

事件对象

在jQuery中，事件对象是通过唯一的参数传递给事件监听函数的。

function(e){
    e.preventDefault()
}

对于事件对象，jQuery最重要的工作就是替开发者解决了浏览器兼容性问题。常用的属性和方法有：

target 引起事件的元素、对象。
type 事件的名称。
preventDefault() 阻止事件的默认行为。

jQuery与CSS

jQuery提供了一系列处理CSS样式的方法，在之前的章节中，我们已经使用过css()和addClass()方法，下面我们介绍jQuery中和CSS有关的常用方法。

`addClass()`

addClass()为所有选中的元素添加指定的class名称。如：

 $( "p:last" ).addClass( "selected highlight" );

`css()`

css() 获取选中的元素的指定样式值，或者设置样式。

var color = $( this ).css( "background-color" );
    $( this ).css( "color", "red" );

用css()方法设置多个样式值时，将多个属性及其值使用对象字面量{}包含起来，属性和值之间用冒号“:”，多个属性及其值之间用逗号”,“隔开。

$( this ).css({
   "background-color": "yellow",
   "font-weight": "bolder"
});

`hasClass()`

hasClass()在所有选中的元素中进行判断，看是否存在包含有指定内容的class的元素。例如：

$( "#mydiv" ).hasClass( "bar" )

`toggleclass()`

toggleclass()为所有匹配的元素添加或者移除一个或者多个class类，增加、移除操作取决于当前class的值。例如：

$( this ).toggleClass( "highlight" );

下面的案例将演示jQuery如何操作CSS：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>toggleClass方法练习</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <style type="text/css" media="screen">
    body {
        width: 960px;
        margin: 0 auto;
        font: 18px/1.8em '微软雅黑';
    }

    h1 {
        color: green;
    }

    .highlight {
        background: yellow;
    }
    </style>
    <script>
    $(function() {
        $("p").on("click", function () {
           $(this).toggleClass('highlight');
        })
    });
    </script>
</head>

<body>
    <h1>toggleClass方法练习</h1>
    <p>点击更换背景颜色</p>
    <p>点击更换背景颜色</p>
    <p>点击更换背景颜色</p>
    <p>点击更换背景颜色</p>
    <p>点击更换背景颜色</p>
    <p>点击更换背景颜色</p>
</body>

</html>

jQuery特效

jQuery提供了一些为页面添加动画特效的方法，从常用的淡入淡出到复杂的动画，jQuery都可应对。

显示隐藏

hide()和show()方法能隐藏、显示选中的元素，相当与在这些元素的起始标签中加入了display样式。例如：

$("p:first").show();

没有参数的show()、hide()方法，会立即显示、隐藏选中的元素。hide()、show()方法的常用参数如下：

duration 一个字符串或者数字决定动画将运行多久。字符串有”slow”、“fast”，持续时间是以毫秒为单位的，数值越大，动画越慢，不是越快。字符串 “fast”’ 和 “slow” 分别代表200和600毫秒的延时。
easing 用于确定使用的缓动函数。一个缓动函数指定用于动画进行中在不同点位的速度。在jQuery库中easing默认的是调用 swing, 如果想要在一个恒定的速度进行动画，那么调用 linear。
complete 在动画完成时执行的函数，可选参数。

toggle()方法能自动识别状态，实现显示、隐藏效果的切换，其使用方法和show()、hide()方法类似。

下面是上述方法的案例：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQuery显示隐藏特效</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <style type="text/css" media="screen">
    body {
        width: 960px;
        margin: 0 auto;
        font: 18px/1.8em '微软雅黑';
    }

    h1 {
        color: green;
    }

    button {
        margin: 5px 20px 5px 0;
    }
    </style>
    <script>
    $(function() {
        $("button:contains('显示')").click(function () {
            $("p:first").show();
        });
        $("button:contains('隐藏')").click(function () {
            $("p:first").hide();
        });
        $("button:contains('toggle')").click(function () {
            $("p:first").toggle();
        });
        $("button:contains('duration')").click(function () {
            $("p:first").toggle('fast');
        });
    });
    </script>
</head>

<body>
    <h1>jQuery显示隐藏特效</h1>
    <button>显示</button><button>隐藏</button><button>toggle</button><button>duration</button>
    <p>不管你学习任何一项技能，选择任何一种专业，从事任何一个工作，如果你在刚接触的时候可以比较顺利达到入门，体验到些许成就感，那么你就会对它感兴趣，甚至越来越有兴趣，也会越学越好。反之，初学体验不佳将直接导致兴趣丧失。</p>
    <p>即使存在某种技能上的天赋，如果初学体验不佳，也会造成兴趣丧失，进而技能天赋丧失。</p>
</body>

</html>

淡入淡出

fadeIn()和fadeOut()、以及fadeTo()方法通过改变匹配元素的不透明度做动画效果，fadeTo()方法不会隐藏的元素并可以指定最后的透明度值。fadeToggle()方法能在淡入、淡出效果之间切换。

这几个方法的常用参数和show()方法类似：

duration 一个字符串或者数字决定动画将运行多久。字符串有”slow”、“fast”，持续时间是以毫秒为单位的，数值越大，动画越慢，不是越快。字符串 “fast”’ 和 “slow” 分别代表200和600毫秒的延时。
easing 用于确定使用的缓动函数。一个缓动函数指定用于动画进行中在不同点位的速度。在jQuery库中easing默认的是调用 swing, 如果想要在一个恒定的速度进行动画，那么调用 linear。
complete 在动画完成时执行的函数，可选参数。

例如下面的代码将使div在3000毫秒时长内淡入，并在动画结束后，使span元素在100毫秒淡入：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>jQuery淡入淡出特效</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <style>
    body {
        width: 960px;
        margin: 0 auto;
        font: 18px/1.8em '微软雅黑';
    }

    h1 {
        color: green;
    }

    p {
        position: relative;
        width: 400px;
        height: 90px;
    }

    div {
        position: absolute;
        width: 400px;
        height: 65px;
        font-size: 36px;
        text-align: center;
        color: yellow;
        background: red;
        padding-top: 25px;
        left: 0;
        display: none;
    }

    span {
        display: none;
    }
    </style>
</head>

<body>
    <h1>jQuery淡入淡出特效</h1>
    <p>
        too young, too simple，sometimes naive。 (<a href="#">click!</a>)
        <div><span>CENSORED!</span></div>
    </p>
    <script>
    $(function() {
        var t = $('p').position().top + 'px';
        var l = $('p').position().left + 'px';
        $('div').css({
            'top': t,
            'left': l
        });
    });
    $("a").click(function() {
        $("div").fadeIn(3000, function() {
            $("span").fadeIn(100);
        });
        return false;
    });
    </script>
</body>

</html>

上下滑动效果

slideUp()、slideDown()和slideToggle()方法用来实现上下滑动效果，其用法和淡入淡出、显示隐藏的方法类似。

自定义动画效果

.animate()方法能根据一组css属性，执行自定义动画效果。这个方法的参数如下：

properties 一个CSS属性和值的对象,动画将根据这组对象移动。所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。。
duration 一个字符串或者数字决定动画将运行多久。字符串有”slow”、“fast”，持续时间是以毫秒为单位的，数值越大，动画越慢，不是越快。字符串 “fast”’ 和 “slow” 分别代表200和600毫秒的延时。
easing 用于确定使用的缓动函数。一个缓动函数指定用于动画进行中在不同点位的速度。在jQuery库中easing默认的是调用 swing, 如果想要在一个恒定的速度进行动画，那么调用 linear。
complete 在动画完成时执行的函数，可选参数。

例如：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>jQuery自定义动画</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <style>
    body {
        width: 960px;
        margin: 0 auto;
        font: 18px/1.8em '微软雅黑';
    }

    h1 {
        color: green;
    }

    p {
        width: 400px;
        height: 90px;
    }

    div {
        border: 1px red solid;
        border-radius: 5px;
    }
    </style>
</head>

<body>
    <h1>jQuery自定义动画</h1>
    <div>
        <p>
            jQuery自定义动画更加灵活，可以同时对多个属性设置动画效果
        </p>
    </div>
    <script>
    $('p').click(function() {
        var paraWidth = $('p').outerWidth();
        var $switcher = $(this).parent();
        var switcherWidth = $switcher.outerWidth();
        $switcher
            .css({
                position: 'relative'
            })
            .animate({
                width: '50%'
            }, 'slow')
            .animate({
                left: switcherWidth - paraWidth
            }, 'slow')
            .animate({
                height: '+=20px'
            }, 'slow')
            .animate({
                borderWidth: '5px'
            }, 'slow');
    });
    </script>
</body>

</html>

回到顶部