jQuery程序设计

最新推荐文章于 2022-11-24 11:43:29 发布

即将入土的羸弱老年人

最新推荐文章于 2022-11-24 11:43:29 发布

阅读量400

点赞数

本文链接：https://blog.csdn.net/qq_36823300/article/details/101830295

版权

Web 同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

HTML

21 篇文章 1 订阅

订阅专栏

Note

21 篇文章 0 订阅

订阅专栏

jQuery是一套 JavaScript 脚本库，它是类似于 .NET 的类库，可将一些工具方法或对象方法封装在类库中。jQuery提供了强大的功能函数和丰富的用户界面设计。

1、jQuery基础

1）下载jQuery

jQuery的官方地址为 https://jquery.com/ 。

可在官网中下载jQuery。

每个发布的版本都有两种脚本库可供下载，即Minified版和Uncompressed版。Minified版是经过缩小化处理的，文件较小，适合项目使用，但不便于调试；Uncompressed版是未经压缩处理的版本，体积较大，但便于调试和阅读。

2）初识jQuery

为了在JavaScript程序中引用jQuery库，可以在<script>标签中使用src属性指定下载得到的jQuery脚本库文件的位置。例如：

<script src="js/jquery-3.4.1.js"></script>
<script>
    // JavaScript程序
    ......
</script>

jQuery编程的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <a href="http://jquery.com/">jQuery</a>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function() {
            $("a").click(function (event) {
                alert("Hello jQuery");
                event.preventDefault();
            });
        });
    </script>

</body>

</html>

实例说明如下。

（1）$(document)是jQuery的常用对象，表示HTML文档对象。$(document).ready()方法指定$(document)的ready事件处理函数。ready事件在文档对象就绪时被触发。

（2）$("a")表示网页中的所有a元素，$("a").click方法指定a元素的click事件处理函数。click事件在用户单击元素对象时被触发。

（3）event.preventDefault()方法阻止元素发生默认的行为（例如，当单击提交按钮时阻止提交表单）。

（4）首先在网页中使用a元素定义一个访问http://jquery.com/的超链接，然后通过jQuery编程指定单击a元素时不执行默认的行为，而是弹出一个显示“Hello jQuery”的对话框。

$()是jQuery()的缩写，它可以在文档对象模型（Document Object Model，DOM）搜索与指定的选择器匹配的元素，并创建一个引用该元素的jQuery对象。

另一个jQuery编程的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <p>单击我，我就会消失。</p>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $("p").click(function () {
                $(this).hide();
            });
        });
    </script>

</body>

</html>

首先在网页中使用p元素定义了一个字符串“单击我，我就会消失”，然后通过jQuery编程指定单击p元素时执行$(this).hide()，$(this)是一个jQuery对象，表示当前引用的HTML元素对象（这里指p元素）。hide()方法用于隐藏当前引用的HTML元素对象。

2、jQuery选择器

在jQuery中可以通过选择器选取HTML元素，并对其应用效果。

1）基础选择器

（1）#Id

每个HTML元素都有一个ID，可以根据ID选取对应的HTML元素。例如，使用$("#divId")可以选取ID为divId的元素。

（2）使用标签名

使用标签名可以选取网页中所有该类型的元素。例如，使用$("div")可以选取网页中的所有div元素；使用$("a")可以选取网页中的所有a元素；使用$("p")可以选取网页中的所有p元素；使用$(document.body)可以选取网页中的body元素。

（3）根据元素的css类选择

使用$(".ClassName")可以选取网页中所有应用了css类（类名为ClassName）的HTML元素。

演示根据元素的CSS类选择HTML元素的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div, span {
            width: 150px;
            height: 60px;
            float: left;
            padding: 10px;
            margin: 10px;
            background-color: #eeeeee;
        }
    </style>
</head>

<body>

    <div class="notMe">div class="notMe"</div>
    <div class="myClass">div class="myClass"</div>
    <span class="myClass">span class="myClass"</span>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $(".myClass").css("border", "3px solid red");
        });
    </script>

</body>

</html>

（4）选择所有HTML元素

使用$("*")可以选取网页中的所有HTML元素。

演示选择所有HTML元素的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        div, span {
            width: 150px;
            height: 60px;
            float: left;
            padding: 10px;
            margin: 10px;
            background-color: #eeeeee;
        }
    </style>
</head>

<body>

    <div>DIV</div>
    <span>SPAN</span>
    <p>P <button>Button</button></p>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $("*").css("border", "3px solid red");
        });
    </script>

</body>

</html>

（5）同时选择多个HTML元素

使用$("selector1, selector2, selectorN")可以同时选取网页中的多个HTML元素。

同时选择多个HTML元素的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        div, span {
            width: 150px;
            height: 60px;
            float: left;
            padding: 10px;
            margin: 10px;
            background-color: #eeeeee;
        }
    </style>
</head>

<body>

    <div>DIV</div>
    <span>SPAN</span>
    <p>P <button>Button</button></p>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $("div, span").css("border", "3px solid red");
        });
    </script>

</body>

</html>

2）层次选择器

HTML元素是有层次的，有些HTML元素包含在其他HTML元素中，例如，表单中可以包含各种用于输入数据的HTML元素。

（1）ancestor descendant（祖先后代）选择器

ancestor descendant 选择器可以选取指定祖先元素的所有指定类型的后代元素。例如，使用$("form input")可以选择表单中的所有input元素。

使用ancestor descendant 选择器选择表单中所有input元素的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        form {
            border: 2px solid red;
        }
    </style>
</head>

<body>

    <form>
        用户名：<input type="text" name="txtUserName" value="" /><br>
        密码：<input type="password" name="txtUserPass" /><br>
    </form>
    b表单外的文本框：<input name="none" />

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $("form input").css("border", "2px dotted green");
        });
    </script>

</body>

</html>

（2）parent > child（父 > 子）选择器

parent > child 选择器可以选取指定父元素的所有子元素，子元素必须包含在父元素中。例如，使用$("form > input")可以选择表单中的所有input元素。

使用parent > child 选择器选择span元素中所有元素的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        body {
            font-size: 14px;
        }
        span#main {
            display: block;
            background: yellow;
            height: 110px;
        }
        button {
            display: block;
            float: left;
            margin: 2px;
            font-size: 14px;
        }
        div {
            width: 90px;
            height: 90px;
            margin: 5px;
            float: left;
            background: #bbbbff;
            font-weight: bold;
        }
        div.mini {
            width: 30px;
            height: 30px;
            background: green;
        }
    </style>
</head>

<body>

    <span id="main">
        <div></div>
        <button>Child</button>
        <div class="mini"></div>
        <div>
            <div class="mini"></div>
            <div class="mini"></div>
        </div>
        <div><button>Grand</button></div>
        <div><span>A Span <em>in</em> child</span></div>
        <span>A Span in main</span>
    </span>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $("#main > *").css("border", "3px double red");
        });
    </script>

</body>

</html>

（3）prev + next（前 + 后）选择器

prev + next 选择器可以选取紧接在指定的prev元素后面的next元素。例如，使用$("label + input")可以选择所有紧接在label元素后面的input元素。

使用prev + next 选择器的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <form>
        <label>Name:</label>
        <input name="name" />
        <fieldset>
            <label>Newsletter:</label>
            <input name="newsletter" />
        </fieldset>
    </form>
    <input name="none" />

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $("label + input").css("border", "2px dotted green");
    </script>

</body>

</html>

（4）prev ~ siblings（前 ~ 兄弟）选择器

prev ~ siblings 选择器可以选取指定的prev元素后面根据siblings过滤的元素。例如，使用$("#prev ~ div")可以选择所有紧接在名称为prev的元素后面的div元素。

使用prev ~ siblings选择器的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        div, span {
            display: block;
            width: 80px;
            height: 80px;
            margin: 5px;
            background: #bbffaa;
            float: left;
            font-size: 14px;
        }
        div#small {
            width: 60px;
            height: 25px;
            font-size: 12px;
            background: #ffaabb;
        }
    </style>
</head>

<body>

    <div>div (doesn't match since before #prev)</div>
    <span id="prev">span#prev</span>
    <div>div sibling</div>
    <div>div sibling <div id="small">div niece</div></div>
    <span>span sibling (not div)</span>
    <div>div sibling</div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $("#prev ~ div").css("border", "3px groove blue");
    </script>

</body>

</html>

3）基本过滤器

在jQuery中可以通过过滤器对选取的数据进行过滤，从而选择更明确的元素。

（1）:first

使用:first过滤器可以匹配找到的第一个元素。例如，使用$("tr:first")可以选择表格的第1行。

使用:first过滤器的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <table>
        <tr>
            <td>第1行</td>
        </tr>
        <tr>
            <td>第2行</td>
        </tr>
        <tr>
            <td>第3行</td>
        </tr>
    </table>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $("tr:first").css("font-style", "italic");
    </script>

</body>

</html>

（2）:last

使用:last过滤器可以匹配找到的最后一个元素。例如，使用$("tr:last")可以选择表格的最后一行。其用法与:first过滤器相同。

（3）:not(<选择器>)

使用:not(<选择器>)过滤器可以去除所有与给定选择器匹配的元素。例如，使用$("input:not(:checked)")可以选择所有未被选中的input元素。

（4）:even

使用:even过滤器可以匹配所有索引值为偶数的元素。注意，索引值是从0开始计数的，而用户的习惯是从1开始计数。例如，使用$("tr:even")可以选择表格的奇数行（索引值为偶数）。

（5）:odd

使用:odd过滤器可以匹配所有索引值为奇数的元素。例如，使用$("tr:odd")可以选择表格的偶数行（索引为奇数）。

（6）:eq(index)

使用:eq(index)过滤器可以匹配索引值为index的元素。例如，使用$("tr:eq(1)")可以选择表格的第1行。

（7）:gt(index)

使用:gt(index)过滤器可以匹配索引值大于index的元素。例如，使用$("tr:gt(1)")可以选择表格第1行后面的行。

（8）:lt(index)

使用:lt(index)过滤器可以匹配索引值小于index的元素。例如，使用$("tr:lt(2)")可以选择表格的第1、第2行（索引值为0、1）。

（9）:header

使用:header过滤器可以选择所有h1、h2、h3一类的header标签。

使用:header过滤器的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <h1>标题1</h1>
    <p>内容1</p>
    <h2>标题2</h2>
    <p>内容2</p>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $(":header").css({background: '#CCCCCC', color: 'blue'});
        });
    </script>

</body>

</html>

（10）:animated

使用:animated过滤器可以匹配所有正在执行动画效果的元素。

4）内容过滤器

内容过滤器可以根据元素的内容过滤选择的元素。

（1）:contains()

使用:contains()过滤器可以匹配包含指定文本的元素。例如，使用$("div:contains(HTML)")可以选择内容包含HTML的div元素。

使用:contains()过滤器的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <div>HTML4</div>
    <div>HTML5</div>
    <div>CSS3</div>
    <div>jQuery</div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $("div:contains(HTML)").css({background: 'yellow', color: 'blue'});
        });
    </script>

</body>

</html>

（2）:empty()

使用:empty()过滤器可以匹配不包含子元素或文本为空的元素。例如，使用$("td:empty")可选择内容为空的表格单元格。

（3）:has()

使用:has()过滤器可以匹配包含指定子元素的元素。例如，使用$("div:has(p)")可以选择包含p元素的div元素。

使用:has()过滤器的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <div><p>包含p元素的div元素</p></div>
    <div>不包含p元素的div元素</div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $("div:has(p)").css({background: 'yellow', color: 'blue'});
        });
    </script>

</body>

</html>

（4）:parent()

:parent()过滤器与:empty()过滤器的作用正好相反，使用它可以匹配至少包含一个子元素或文本的元素。

5）可见性过滤器

使用可见性过滤器可以根据元素的可见性对元素进行过滤。jQuery包含:hidden和:visible两个可见性过滤器，:hidden可以匹配所有的不可见元素；:visible可以匹配所有的可见元素。例如，$("input:hidden")可以匹配所有不可见的input元素。

使用:hidden过滤器的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <span></span>
    <form>
        <input type="hidden">
        <input type="hidden">
        <input type="hidden">
    </form>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $("span:first").text("共发现 " + $("input:hidden").length + " 个隐藏的input元素");
        });
    </script>

</body>

</html>

6）属性过滤器

使用属性过滤器可以根据元素的属性或属性值对元素进行过滤。

（1）[属性名]

可以使用$([属性名])过滤器匹配包含指定属性名的元素。例如，$("div[id]")可以匹配所有包含id属性的div元素。

使用$([属性名])过滤器的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <div>no id</div>
    <div id="id1">id1</div>
    <div id="id2">id2</div>
    <div>no id</div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $("div[id]").css("border", "2px dotted green");
        });
    </script>

</body>

</html>

（2）[属性名=值]

可以使用$([属性名=值])过滤器匹配指定属性等于指定值的元素。例如，$("div[id=id1]")可以匹配所有id属性等于id1的div元素。

使用$([属性名=值])过滤器的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <div>no id</div>
    <div id="id1">id1</div>

    <div id="id2">id2</div>
    <div>no id</div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $("div[id=id1]").css("border", "2px dotted green");
        });
    </script>

</body>

</html>

（3）[属性名!=值]

可以使用$([属性名!=值])过滤器匹配指定属性不等于指定值的元素。例如，$("div[id=id1]")可以匹配所有id属性不等于id1的div元素。

（4）[属性名^=值]

可以使用$([属性名^=值])过滤器匹配指定属性值，以指定值开始的元素。例如，$("input[name^='news']")可以匹配所有name属性值以news开始的input元素。

（5）[属性名$=值]

可以使用$([属性名$=值])过滤器匹配指定属性值，以指定值结尾的元素。例如，$("input[name$='news']")可以匹配所有name属性值以news结尾的input元素。

（6）[属性名*=值]

可以使用$([属性名*=值])过滤器匹配指定属性值包含指定值的元素。例如，$("input[name*='news']")可以匹配所有name属性值包含news的input元素。

（7）复合属性过滤器

可以使用$([属性过滤器1][属性过滤器2][属性过滤器n])格式的复合属性过滤器匹配满足多个属性过滤器的元素。例如，$("input[id][name*='news']")可以匹配所有包含id属性，且name属性值包含news的input元素。

7）子元素过滤器

使用子元素过滤器可以根据元素的子元素对元素进行过滤。

（1）:nth-child(index/even/odd/equation)

可以使用:nth-child(index/even/odd/equation)过滤器匹配指定父元素下符合一定条件的索引值的子元素。例如，$("ul li:nth-child(2)")可以匹配ul元素中的第2个li子元素；$("ul li:nth-child(even)")可以匹配ul元素中的第偶数个li子元素；$("ul li:nth-child(odd)")可以匹配ul元素中的第奇数个li子元素。

使用:nth-child(index/even/odd/equation)过滤器的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>天津</li>
        <li>重庆</li>
    </ul>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $("ul li:nth-child(even)").css("border", "2px solid red");
        });
    </script>

</body>

</html>

（2）:first-child

可以使用:first-child过滤器匹配第1个子元素。例如，$("ul li:first-child")可以匹配ul列表中的第一个li子元素。

（3）:last-child

可以使用:last-child过滤器匹配最后一个子元素。例如，$("ul li:last-child")可以匹配ul列表中的最后一个li子元素。

（4）:only-child

可以使用:only-child过滤器匹配父元素的唯一子元素。例如，$("ul li:only-child")可以匹配ul列表中的唯一li子元素（如果ul列表中包含多个li子元素，则没有子元素被选中）。

3、设置HTML元素的属性与CSS样式

每个HTML元素都有一组属性，通过这些属性可以设置HTML元素的外观和特性，也可以通过CSS样式来设置HTML元素的显示风格。jQuery可以很方便地设置HTML元素的属性和CSS样式。

1）设置HTML元素的属性

在jQuery中，可以通过DOM对象设置HTML元素的属性，也可以通过一些函数直接设置HTML元素的属性。

（1）通过DOM对象访问HTML元素的属性

在浏览网页时，浏览器可以将HTML元素解析成DOM对象，HTML元素的属性也就被解析成DOM对象的属性。

可以使用each()方法遍历所有匹配的元素，并对每个元素执行指定的回调函数。each()方法的语法如下。

each(回调函数)

通常回调函数由一个整数参数表示遍历元素的索引，可以在回调函数中设置DOM对象的属性值。

通常可以使用jQuery选择器来调用each()方法。例如，$("div").each()可以遍历所有的div元素。

使用each()方法遍历DOM对象设置属性值，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <div>北京</div>
    <div>上海</div>
    <div>天津</div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $(document.body).click(function () {
                $("div").each(function (i) {
                    if (this.style.color != "blue") {
                        this.style.color = "blue";
                    } else {
                        this.style.color = "";
                    }
                });
            });
        });
    </script>

</body>

</html>

（2）使用attr()方法访问HTML元素的属性

使用attr()方法可以访问匹配的HTML元素的指定属性，语法如下。

attr(属性名)

attr()方法的返回值就是HTML元素的属性值。

使用attr()方法访问HTML元素的属性，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <img src="01.jpg" alt="01.jpg" id="div_img">

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $("#div_img").click(function () {
                alert($("#div_img").attr("src"));
            });
        });
    </script>

</body>

</html>

attr()方法的其他用法如下表所示。

**attr()方法的其他用法**
用法	说明
attr(properties)	以键/值对的形式设置匹配元素的一组属性。例如，可以使用下面的代码设置所有img元素的src、title和alt属性 $("img").attr({ src: "/images/hat.gif", title: "jQuery", alt: "jQuery Logo" });
attr(key, value)	以键/值对的形式设置匹配元素的指定属性。key指定属性名，value指定属性值。例如，可以使用下面的代码禁用所有按钮 $("button").attr("disabled", "disabled");
attr(key, fn)	以键/值对的形式设置匹配元素的指定属性为计算值。key指定属性名，fn指定返回属性值的函数。例如 $("img").attr("src", function () { return "/images/" + this.title; });

（3）使用removeAttr()方法删除HTML元素的属性

removeAttr()方法的语法如下。

removeAttr(属性名)

使用removeAttr()方法删除HTML元素的属性，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <button>启用</button>
    <input type="text" disabled="disabled" value="现在还不可以编辑" />

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $(this).next().removeAttr("disabled").focus().val("现在可以编辑了。");
            });
        });
    </script>

</body>

</html>

（4）使用text()方法设置HTML元素的文本内容

text()方法的语法如下。

text(文本内容)

使用text()方法设置HTML元素的文本内容，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <img src="01.jpg" alt="01.jpg" id="id_img">
    <div id="div_filename">div_filename</div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $("#id_img").click(function () {
                $("#div_filename").text($("#id_img").attr("src"));
            });
        });
    </script>

</body>

</html>

2）设置CSS样式

在jQuery中，可以通过DOM对象设置HTML元素的CSS样式。

（1）使用css()方法获取和设置CSS属性

使用css()方法获取CSS属性的语法如下。

值 = css(属性名);

使用css()方法设置CSS属性的语法如下。

css(属性名, 值);

（2）与HTML类别有关的方法

在HTML中，可以通过class属性指定HTML元素的类别。在CSS中可以指定不同类别的HTML元素的样式。jQuery可以使用下表所示的方法管理HTML类别。

**jQuery中与HTML类别有关的方法**
方法	说明
addClass()	使用addClass()方法可以为匹配的HTML元素添加类别属性。语法如下。 addClass( className ) className是要添加的类别名称
hasClass()	使用hasClass()方法可以判断匹配的元素是否拥有被指定的类别，语法如下。 hasClass( className ) 如果匹配的元素拥有名为className的类别，则hasClass()方法返回True；否则返回False。
removeClass()	使用removeClass()方法可以为匹配的HTML元素删除指定的class属性，也就是执行切换操作。语法如下。 removeClass( className ) className是要切换的类别名称
toggleClass()	检查每个元素中指定的类。如果不存在，则添加类，如果已设置，则将其删除。语法如下。 toggleClass( className ) className是要切换的类别名称

使用addClass()方法为HTML元素添加class属性，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        p {
            margin: 8px;
            font-size: 16px;
        }
        .selected {
            color: red;
        }
        .hignlight {
            background: yellow;
        }
    </style>
</head>

<body>

    <p>北京</p>
    <p>天津</p>
    <p>上海</p>
    <p>重庆</p>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $("p:last").addClass("selected hignlight");
        });
    </script>

</body>

</html>

（3）获取和设置HTML元素的尺寸

jQuery可以使用下表所示的方法获取和设置HTML元素的尺寸。

**jQuery中与HTML元素尺寸有关的方法**
方法	说明
height()	获取和设置元素的高度。获取高度的语法如下。 value = height(); 设置高度的语法如下。 height(value);
innerHeight()	获取元素的高度（包括顶部和底部的内边距）。语法如下。 value = innerHeight();
innerWidth()	获取元素的宽度（包括左侧和右侧的内边距）。语法如下。 value = innerWidth();
outerHeight()	获取元素的高度（包括顶部和底部的内边距、边框和外边距）。语法如下。 value = outerHeight();
outerWidth()	获取元素的宽度（包括左侧和右侧的内边距、边框和外边距）。语法如下。 value = outerWidth();
width()	获取和设置元素的宽度。获取宽度的语法如下。 value = width(); 设置宽度的语法如下。 width(value);

获取HTML元素的高度，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        button {
            font-size: 12px;
            margin: 2px;
        }

        p {
            width: 150px;
            border: 1px solid red;
        }

        div {
            color: red;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <button id="getp">获取段落尺寸</button>
    <button id="getd">获取文档尺寸</button>
    <button id="getw">获取窗口尺寸</button>

    <div>&nbsp;</div>
    <p>
        用于测试尺寸的段落。
    </p>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        function showHeight(ele, h) {
            $("div").text(ele + " 的高度为 " + h + "px");
        }
        $("#getp").click(function () {
            showHeight("段落", $("p").height());
        });
        $("#getd").click(function () {
            showHeight("文档", $("document").height());
        });
        $("#getw").click(function () {
            showHeight("窗口", $("window").height());
        });
    </script>

</body>

</html>

（4）获取和设置元素的位置

jQuery可以使用下表所示的方法获取和设置HTML元素的位置。

**jQuery中与HTML元素的位置有关的方法**
方法	说明
offset()	获取和设置元素在当前视口的相对偏移（坐标）。获取坐标的语法如下。 value = offset(); 设置坐标的语法如下。 offset(value);
position()	获取和设置元素相对父元素的偏移（坐标）。获取坐标的语法如下。 value = position();

（5）滚动条相关

jQuery中与滚动条相关的方法如下表所示。

**jQuery中与滚动条有关的方法**
方法	说明
scrollLeft()	获取或设置元素中滚动条的水平位置。获取滚动条水平位置的语法如下。 value = scrollLeft(); 设置滚动条水平位置的语法如下。 scrollLeft(value);
scrollTop()	获取或设置元素中滚动条的垂直位置。获取滚动条垂直位置的语法如下。 value = scrollTop(); 设置滚动条垂直位置的语法如下。 scrollTop(value);

4、表单编程

在HTML中，表单是用户提交数据的最常用方式。

1）表单选择器

jQuery提供表单选择器，用于选取表单中的元素。

（1）:input

:input选择器可以匹配表单中的所有input元素、textarea元素、select元素和button元素。

:input选择器的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        textarea {
            height: 25px;
        }
    </style>
</head>

<body>

    <form>
        <input type="button" value="Input Button">
        <input type="checkbox">
        <input type="file">
        <input type="hidden">
        <input type="image">
        <input type="password">
        <input type="radio">
        <input type="reset">
        <input type="submit">
        <input type="text">
        <select><option>Option</option></select>
        <textarea></textarea>
        <button>Button</button>
    </form>
    <div id="message"></div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            var allInputs = $(":input");
            var formChildren = $("form > *");
            $("#message").text("找到 " + allInputs.length + " 个input类型元素。");
            $(":input").css("border", "2px solid red");
        });
    </script>

</body>

</html>

（2）:text

:text选择器可以匹配表单中的所有文本类型元素。

:text选择器的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        textarea {
            height: 25px;
        }
    </style>
</head>

<body>

    <form>
        <input type="button" value="Input Button">
        <input type="checkbox">
        <input type="file">
        <input type="hidden">
        <input type="image">
        <input type="password">
        <input type="radio">
        <input type="reset">
        <input type="submit">
        <input type="text">
        <select><option>Option</option></select>
        <textarea></textarea>
        <button>Button</button>
    </form>
    <div id="message"></div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            var allTexts = $(":text");
            var formChildren = $("form > *");
            $("#message").text("找到 " + allTexts.length + " 个文本类型元素。");
            allTexts.css("border", "2px solid red");
        });
    </script>

</body>

</html>

（3）:password

:password选择器可以匹配表单中的所有密码类型元素。

（4）:radio

:radio选择器可以匹配表单中的所有radio类型元素（即单选按钮）。

（5）:checkbox

:checkbox选择器可以匹配表单中的所有checkbox类型元素（即复选框）。

（6）:submit

:submit选择器可以匹配表单中的所有提交按钮元素。

（7）:image

:image选择器可以匹配表单中的所有image元素。

（8）:reset

:reset选择器可以匹配表单中的所有重置按钮元素。

（9）:button

:button选择器可以匹配表单中的所有普通按钮元素。

（10）:file

:file选择器可以匹配表单中的所有file元素（即选择文件的控件）。

2）表单过滤器

通过表单过滤器对选取的数据进行过滤，从而选择更明确的表单元素。

（1）:enabled

:enabled过滤器可以匹配表单中的所有启用元素。

:enabled过滤器的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <form>
       <input name="email" disabled="disabled">
       <input name="id">
    </form>
    <div id="message"></div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $("input:enabled").css("border", "2px solid red");
        });
    </script>

</body>

</html>

（2）:disabled

:disabled过滤器可以匹配表单中的所有禁用元素。

（3）:checked

:checked过滤器可以匹配表单中所有被选中的元素（复选框或单选按钮）。

:checked过滤器的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        div {
            color: red;
        }
    </style>
</head>

<body>

    <form>
        <input type="checkbox" name="newsletter" checked="checked" value="Hourly" >
        <input type="checkbox" name="newsletter" value="Daily" >
        <input type="checkbox" name="newsletter" value="Weekly" >
        <input type="checkbox" name="newsletter" checked="checked" value="Monthly" >
        <input type="checkbox" name="newsletter" value="Yearly" >
    </form>
    <div></div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            function countChecked() {
                var n = $("input:checked").length;
                $("div").text(n + (n <= 1 ? " is" : " are") + " checked!");
            }
            countChecked();
            $(":checkbox").click(countChecked);
        });
    </script>

</body>

</html>

（4）:selected

:selected过滤器可以匹配表单中所有被选中的option元素。

3）表单API

jQuery提供了一组表单API，使用它们可以对表单和表单元素进行操作。

（1）blur()方法和focus()方法

blur()方法用于绑定到blur事件的处理函数，语法如下。

.blur( handler(eventObject) )

handler是blur事件的处理函数，eventObject是事件的参数。

提示：blur事件在元素失去焦点时发生。

与blur()方法相对应的是focus()方法。focus()方法可以绑定到focus事件的处理函数，而focus事件在元素获取焦点时发生。

不使用参数调用blur()方法和focus()方法的简单实例，当文本框获得焦点和失去焦点时切换颜色。代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        div {
            color: red;
        }
    </style>
</head>

<body>

    输入用户名：<input type="text" id="uname">

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $("input").focus(function () {
                $("input").css("background-color", "red");
            });
            $("input").blur(function () {
                $("input").css("background-color", "yellow");
            });
        });
    </script>

</body>

</html>

如果不使用参数调用blur()方法和focus()方法，则会触发对应的事件。

blur()方法和focus()方法的简单实例。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        div {
            color: red;
        }
    </style>
</head>

<body>

    输入用户名：<input type="text" id="uname">
    <button onclick="setfocus();">获得焦点</button>
    <button onclick="lostfocus();">取消焦点</button>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $("#uname").focus(function () {
                $("input").css("background-color", "red");
            });
            $("input").blur(function () {
                $("input").css("background-color", "yellow");
            });
        });

        function setfocus() {
            $("#uname").focus();
        }

        function lostfocus() {
            $("#uname").blur();
        }
    </script>

</body>

</html>

（2）change()方法

change()方法用于绑定到change事件的处理函数，语法如下。

.change(handler(eventObject))

handler是change事件的处理函数，eventObject是事件的参数。

提示：change事件在当元素的值发生改变时发生。

change()方法的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        div {
            color: red;
        }
    </style>
</head>

<body>

    <select name="city" multiple="multiple">
        <option>北京</option>
        <option>天津</option>
        <option>上海</option>
        <option>重庆</option>
    </select>
    <div></div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $("select").change(function () {
            var str = "";
            $("select option:selected").each(function () {
                str += $(this).text() + " ";
            });
            $("div").text(str);
        })
    </script>

</body>

</html>

（3）select()方法

select()方法用于绑定到select事件的处理函数，语法如下。

.select(handler(eventObject))

handler是select事件的处理函数，eventObject是事件的参数。

提示：select事件在元素中的文本被选择时发生。

（4）submit()方法

submit()方法用于绑定到submit事件的处理函数，语法如下。

.submit(handler(eventObject))

handler是submit事件的处理函数，eventObject是事件的参数。

提示：submit事件在提交表单时发生。

（5）val()方法

val()方法用于获取和设置元素的值。获取元素值的语法如下。

value = .val();

设置元素值的语法如下。

.val( value )

value是设置的元素值。

val()方法的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        div {
            color: red;
        }
    </style>
</head>

<body>

    <select id="city">
        <option>北京</option>
        <option>天津</option>
        <option>上海</option>
        <option>重庆</option>
    </select>
    <p></p>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        function displayValue() {
            var Value = $("#city").val();
            $("p").html(Value);
        }
        $("select").change(displayValue);
    </script>

</body>

</html>

5、事件和Event对象

jQuery可以很方便地使用Event对象对触发的元素的事件进行处理，jQuery支持的事件包括键盘事件、鼠标事件、表单事件、文档加载事件和浏览器事件等。

1）事件处理函数

事件处理函数是指触发事件时调用的函数，可以通过下面的方法指定事件处理函数。

jQuery选择器.事件名(function () {
    <函数体>
    ......
});

例如，前面多次使用的$(document).ready()方法指定文档对象的ready事件处理函数。ready事件在文档对象就绪时被触发。

2）Event对象

根据W3C标准，jQuery的事件系统支持Event对象。Event对象的属性如下表所示。

**Event对象的属性**
属性	说明
currentTarget	触发事件的当前元素。例如，下面的代码在单击p元素时，弹出一个显示true的对话框 $("p").click(function (event) { alert( event.currentTarget === this ); // true });
data	传递给正在运行的事件处理函数的可选数据
delegateTarget	正在运行的事件处理函数绑定的元素
namespace	触发事件时指定的命名空间
pageX / pageY	鼠标与文档边缘的距离
relatedTarget	事件涉及的其他DOM元素，如果有的话
result	返回事件处理函数的最后返回值
target	初始化事件的DOM元素
timeStamp	浏览器创建事件的时间与1970年1月1日的时间差，单位为ms
type	事件类型
which	用于键盘事件和鼠标事件，表示按下的键或鼠标按钮

Event对象pageX和pageY属性的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        div {
            color: red;
        }
    </style>
</head>

<body>

    <div id="log"></div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).mousemove(function (e) {
            $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
        });
    </script>

</body>

</html>

Event对象type属性和which属性的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        div {
            color: red;
        }
    </style>
</head>

<body>

    <input id="whichkey" value="">
    <div id="log"></div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $("#whichkey").keydown(function (e) {
            $("#log").html(e.type + ': ' + e.which);
        });
    </script>

</body>

</html>

Event对象的方法如下表所示。

**Event对象的方法**
方法	说明
isDefaultPrevented	返回是否在此Event对象上调用过event.preventDefault()方法
isImmediatePropagationStopped	返回是否在此Event对象上调用过event.stopImmediatePropagation()方法
isPropagationStopped	返回是否在此Event对象上调用过event.stopPropagation()方法
preventDefault	如果调用了此方法，则此事件的默认动作将不会触发
stopImmediatePropagation	阻止执行其余的事件处理函数，并阻止事件在DOM树中冒泡（即在DOM树中的元素间传递）
stopPropagation	阻止事件在DOM树中冒泡，并阻止父处理函数接到事件的通知

提示：容器元素中可以包含子元素，例如，div元素中可以包含img元素。如果在img元素上触发了click事件，则也会触发div元素的click事件。这就是事件的冒泡。

使用Event对象的preventDefault()方法阻止默认事件动作，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <a href="http://www.ptpress.com.cn/">人民邮电出版社</a>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $("a").click(function (event) {
                event.preventDefault();
            });
        });
    </script>

</body>

</html>

3）绑定到事件处理函数

可以使用bind()方法为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。事件处理函数会接收到一个事件对象。bind()方法的语法如下。

bind(type, [data], fn)

参数说明如下。

type：事件类型。
data：可选参数，作为event.data属性值传递给事件对象的额外数据对象。
fn：绑定到指定事件的事件处理器函数。

使用bind()方法绑定事件处理函数的简单实例，代码如下。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <input id="name">

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $("input").bind("click", function () {
                alert($(this).val());
            });
        });
    </script>

</body>

</html>

使用bind()方法在事件处理之前传递附加的数据。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <input id="name">

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            function handler(event) {
                alert(event.data.foo);
            }
            $("input").bind("click", { foo: "hello" }, handler);
        });
    </script>

</body>

</html>

4）键盘事件

jQuery提供的与键盘事件相关的方法如下表所示。

**与键盘事件相关的方法**
方法	说明
focusin(handler(eventObject))	绑定到focusin事件处理函数的方法。当光标进入HTML元素时，触发focusin事件
focusout(handler(eventObject))	绑定到focusout事件处理函数的方法。当光标离开HTML元素时，触发focusout事件
keydown(handler(eventObject))	绑定到keydown事件处理函数的方法。当按下按键时，触发keydown事件
keypress(handler(eventObject))	绑定到focusin事件处理函数的方法。当按下并放开按键时，触发keypress事件
keyup(handler(eventObject))	绑定到focusin事件处理函数的方法。当放开按键时，触发keyup事件

keypress()方法的使用。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <input type="text" id="target" value="按下键">

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            function handler(event) {
                alert(event.data.foo);
            }
            $("#target").keypress(function () {
                alert("Handler for .keypress() called.");
            })
        });
    </script>

</body>

</html>

5）鼠标事件

jQuery提供的与鼠标事件相关的方法如下表所示。

**与鼠标事件相关的方法**
方法	说明
click( handler(eventObject) )	绑定到click事件处理函数的方法。单击鼠标时，触发click事件
dblclick( handler(eventObject) )	绑定到dbclick事件处理函数的方法。双击鼠标时，触发dblclick事件
focusin( handler(eventObject) )	绑定到focusin事件处理函数的方法。当光标进入HTML元素时，触发focusin事件
focusout( handler(eventObject) )	绑定到focusout事件处理函数的方法。当光标离开HTML元素时，触发focusout事件
hover( handlerIn(eventObject), handlerOut(eventObject) )	指定鼠标指针进入和离开指定元素时的处理函数
mousedown( handler(eventObject) )	绑定到mousedown事件处理函数的方法。当按下鼠标按键时，触发mousedown事件
mouseenter( handler(eventObject) )	绑定到鼠标进入元素的事件处理函数
mouseleave( handler(eventObject) )	绑定到鼠标离开元素的事件处理函数
mousemove( handler(eventObject) )	绑定到mousemove事件处理函数的方法。移动鼠标时，触发mousemove事件
mouseout( handler(eventObject) )	绑定到mouseout事件处理函数的方法。当鼠标指针离开被选元素时，触发mouseout事件。不论是鼠标指针离开被选元素，还是任何子元素，都会触发mouseout事件；而只有在鼠标指针离开被选元素时，才会触发mouseleave事件
mouseover( handler(eventObject) )	绑定到mouseover事件处理函数的方法。当鼠标指针位于元素上方时触发mouseover事件
toggle( handler(eventObject) )	将两个或更多处理函数绑定到指定元素，单击指定元素时，交替执行这些处理函数（目前已被移除）

6）文档加载事件

jQuery提供的与文档加载事件相关的方法如下表所示。

**与文档加载事件相关的方法**
方法	说明
load( handler(eventObject) )	绑定到load事件处理函数的方法。当加载文档时，触发load事件
ready( handler(eventObject) )	指定当所有DOM元素都被加载时执行的方法
unload( handler(eventObject) )	绑定到unload事件处理函数的方法。当页面卸载时，触发unload事件

提示：.load()，.unload()，.error()已经被废弃了，改为使用.on()函数来注册。例如，

$(window).load(function () { ... });

改成

$(window).on("load", function () { ... });

load()方法的使用。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>



    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(window).on("load", function () {
            alert("Hello~!");
        });
    </script>

</body>

</html>

7）浏览器事件

jQuery提供的与浏览器事件相关的方法如下表所示。

**与浏览器事件相关的方法**
方法	说明
error( handler(eventObject) )	绑定到error事件处理函数的方法。当元素遇到错误（例如没有正确载入）时，触发error事件
resize( handler(eventObject) )	绑定到resize事件处理函数的方法。当调整浏览器窗口的大小时，触发resize事件
scroll( handler(eventObject) )	绑定到scroll事件处理函数的方法。当ScrollBar控件上的或包含一个滚动条的对象的滚动框被重新定位，或按水平（或垂直）方向滚动时，触发scroll事件

提示：.load()，.unload()，.error()已经被废弃了，改为使用.on()函数来注册。例子参照上述代码。

scroll()方法的使用。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <div style="width: 200px;height: 100px;overflow:scroll;">
        请试着滚动DIV中的文本
        请试着滚动DIV中的文本
        请试着滚动DIV中的文本
        请试着滚动DIV中的文本
        <br><br>
        请试着滚动DIV中的文本
        请试着滚动DIV中的文本
        请试着滚动DIV中的文本
        请试着滚动DIV中的文本
    </div>
    <p>滚动了 <span>0</span> 次。</p>
    <button>触发窗口的 scroll 事件</button>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        var x = 0;
        $(document).ready(function () {
            $("div").scroll(function () {
                $("span").text(x += 1);
            });
            $("button").click(function () {
                $("div").scroll();
            });
        });
    </script>

</body>

</html>

即将入土的羸弱老年人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery程序设计

jQuery是一套 JavaScript 脚本库，它是类似于 .NET 的类库，可将一些工具方法或对象方法封装在类库中。jQuery提供了强大的功能函数和丰富的用户界面设计。1、jQuery基础1）下载jQueryjQuery的官方地址为https://jquery.com/。可在官网中下载jQuery。每个发布的版本都有两种脚本库可供下载，即Minified版和Unc...
复制链接

扫一扫