JavaWeb入门-JQuery

最新推荐文章于 2025-05-28 19:34:53 发布

Ayin的学习笔记

最新推荐文章于 2025-05-28 19:34:53 发布

阅读量514

点赞数

分类专栏：笔记文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/AyinMars/article/details/121100588

版权

笔记专栏收录该内容

26 篇文章

订阅专栏

jQuery 是一个快速的 JavaScript 库，旨在简化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。本文档介绍了 jQuery 的基本语法、选择器、遍历、过滤、属性操作、CSS 样式和动画效果。通过示例代码展示了如何使用 jQuery 实现全选、反选、添加和删除元素、CSS 样式切换、动画效果等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是**“write Less，Do More”**，即倡导写更少的代码，做更多的事情。

它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

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

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

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

只要通过JavaScript代码语句调用JQuery文件即可使用！

<script type="text/javascript" src="../script/jquery-3.6.0.js"></script>

并且需要明确一个点，JQuery必须要引进JQuery库中，不然代码是不会执行的，而且，在JQuery中的$符号，也是一个函数！

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
    <script>
        // window.onload =function() {
        //     var btnObj = document.getElementById("btn");
        //     alert(btnObj);
        //     btnObj.onclick  = function () {
        //         alert("JS原生的单击事件！")
        //     }
        // }
        $(function() { // 表示页面加载完成之后执行，相当于window.onload
            var $btn = $("#btn"); // 按id查询标签对象
            $btn.click(function () { // 绑定单击事件
                alert("JQuery的单击事件！")
            });
        });

    </script>
</head>
<body>
<button id="btn">Hello</button>
</body>
</html>

JQuery语法

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

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

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

示例：

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

$(“p”).hide() - 隐藏所有段落

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

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

注意： 如果网站包含许多页面，并且希望 jQuery 函数易于维护，那么需要把 jQuery 函数放到独立的 .js 文件中。

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict()，使用自己的名称（比如 jq）来代替 $ 符号。

<script>
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍在运行！");
  });
});
</script>

由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库

如何区分JQuery对象和DOM对象

关于DOM对象：

通过getElementByID()…查询出来的标签对象就是DOM对象、
通过createElement()方法创建的对象也是DOM对象
DOM对象alert出来的效果是：[Object HTMLElement]

关于JQuery对象：

通过JQuery提供的API创建的对象，是JQuery对象
通过JQuery包装的DOM对象，是JQuery对象
通过JQuery提供的API查询到的对象，也是JQuery对象

并且需要注意的是，JQuery对象可以理解成由DOM对象组成的数组，加上JQuery提供的一系列函数！

但是JQuery对象并不能调用DOM对象的属性！同样的，DOM对象也不能调用JQuery提供的一系列函数！

DOM对象和JQuery对象的互转

DOM对象转换成JQuery对象
- 首先需要有DOM对象
- $(DOM对象)就可以转换成JQuery对象
JQuery对象转为DOM对象
- 首先需要有JQuery对象
- JQuery对象[下标]取出相应的DOM对象

JQuery选择器

基本选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$(“p”) 选取

元素。

$(“p.intro”) 选取所有 class=“intro” 的

元素。

$(“p#demo”) 选取所有 id=“demo” 的

元素。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
    <script>
        $(function(){
            $("#id").click(function () {
                $("#id").css("background-color","blue");
            });
            $(".class").click(function() {
                $(".class").css("fontSize", "30px");
            })
            $("span").click(function () {
                $("p").hide();
            })
        });
    </script>
</head>
<body>
    <p id="id">基本id选择器</p>
    <p class="class">基本class选择器</p>
    <span>基本标签选择器</span>
</body>
</html>

层次选择器

1. 全部后代选择

$(‘ancestor descendant’)：在给定的祖先元素下，匹配所有的后代元素

2. 直接后代选择

$(‘parent > child’)：在给定的父元素下匹配所有的子元素

3. 兄弟元素选择器

相邻下一个兄弟元素选择器

$(‘prevSibling + nextSibling’)：匹配所有紧接在prevSibling元素后的nextSibling元素。
后排兄弟元素选择器

$(‘prev ~ sibling’)：匹配所有紧接在prev元素后所有的siblings元素。

示例代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function () {
            // 全部后代选择
            $("#btn1").click(function () {
                var array = $("body input");
                for (let i = 0; i < array.length; i++) {
                    array[i].value = "测试"
                }
            })
            // 直接后代选择
            $("#btn2").click(function () {
                $("form > p").css("fontSize", "25px")
            })
            // 相邻下一个兄弟元素选择器
            $("#btn3").click(function () {
                $("p + input").css("fontSize", "25px")
            })
            // 后排兄弟元素选择器
            $("#btn4").click(function () {
                $("form ~ p").css("fontSize", "25px")
            })
        });
    </script>
</head>
<body>
    <button id="btn1">测试1</button>
    <button id="btn2">测试2</button>
    <button id="btn3">测试3</button>
    <button id="btn4">测试4</button>
    <p>第一个p标签</p>
    <input type="text" value="第一个input标签">
    <form action="#">
        <p>第二个p标签</p>
        <input type="text" value="第二个input标签">
    </form>
    <p>第三个p标签</p>
    <input type="text" value="第三个input标签">
</body>
</html>

其他选择器

选择器	实例	选取
[*]	$("*")	所有元素
[#id]	$("#lastname")	id=“lastname” 的元素
[.class]	$(".intro")	所有 class=“intro” 的元素
[element]	$(“p”)	所有元素
.class.class	$(".intro.demo")	所有 class=“intro” 且 class=“demo” 的元素

[:first]	$(“p:first”)	第一个元素
[:last]	$(“p:last”)	最后一个元素
[:even]	$(“tr:even”)	所有偶数
[:odd]	$(“tr:odd”)	所有奇数

[:eq(index)]	$(“ul li:eq(3)”)	列表中的第四个元素（index 从 0 开始）
[:gt(no)]	$(“ul li:gt(3)”)	列出 index 大于 3 的元素
[:lt(no)]	$(“ul li:lt(3)”)	列出 index 小于 3 的元素
:not(selector)	$(“input:not(:empty)”)	所有不为空的 input 元素

[:header]	$(":header")	所有标题元素 -
[:animated]		所有动画元素

*[:contains(text)*	$(":contains(‘W3School’)")	包含指定字符串的所有元素
[:empty]	$(":empty")	无子（元素）节点的所有元素
:hidden	$(“p:hidden”)	所有隐藏的元素
[:visible]	$(“table:visible”)	所有可见的表格

s1,s2,s3	$(“th,td,.intro”)	所有带有匹配选择的元素

[[attribute]]	$("[href]")	所有带有 href 属性的元素
[[attribute=value]]	$("[href=’#’]")	所有 href 属性的值等于 “#” 的元素
[[attribute!=value]]	$("[href!=’#’]")	所有 href 属性的值不等于 “#” 的元素
[[attribute$=value]]	$(" [h r e f$ =’.jpg’]")	所有 href 属性的值包含以 “.jpg” 结尾的元素

[:input]	$(":input")	所有元素
[:text]	$(":text")	所有 type=“text” 的元素
[:password]	$(":password")	所有 type=“password” 的元素
[:radio]	$(":radio")	所有 type=“radio” 的元素
[:checkbox]	$(":checkbox")	所有 type=“checkbox” 的元素
[:submit]	$(":submit")	所有 type=“submit” 的元素
[:reset]	$(":reset")	所有 type=“reset” 的元素
[:button]	$(":button")	所有 type=“button” 的元素
[:image]	$(":image")	所有 type=“image” 的元素
[:file]	$(":file")	所有 type=“file” 的元素

[:enabled]	$(":enabled")	所有激活的 input 元素
[:disabled]	$(":disabled")	所有禁用的 input 元素
[:selected]	$(":selected")	所有被选取的 input 元素
[:checked]	$(":checked")	所有被选中的 input 元素

元素元素

遍历

jQuery 提供了多种遍历 DOM 的方法，遍历方法中最大的种类是树遍历（tree-traversal）。

向上遍历

以下方法用于向上遍历 DOM 树：

parent()
- parent() 方法返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历。
parents()
- parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
parentsUntil()
- parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

向下遍历

下面是两个用于向下遍历 DOM 树的 jQuery 方法：

children()
- children() 方法返回被选元素的所有直接子元素。
find()
- find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

水平遍历

有许多有用的方法让我们在 DOM 树进行水平遍历：

siblings()
- siblings() 方法返回被选元素的所有同胞元素。
next()
- next() 方法返回被选元素的下一个同胞元素。
nextAll()
- nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil()
- nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
prev()
prevAll()
prevUntil()

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

each

each() 方法规定为每个匹配元素规定运行的函数。

提示： 返回 false 可用于及早停止循环。

$(selector).each(function(index,element))

参数	描述
function(index,element)	必需。为每个匹配元素规定运行的函数。index - 选择器的 index 位置element - 当前的元素（也可使用 “this” 选择器）

代码实例：输出每个 li 元素的文本

$("button").click(function(){
  $("li").each(function(){
    alert($(this).text())
  });
});

其中，this所代表的是当前遍历中已经遍历到的元素！

过滤

过滤说白了就是缩小搜索元素的范围！

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

first() 方法返回被选元素的首个元素。

下面的例子选取首个

元素内部的第一个

元素：

$(document).ready(function(){
  $("div p").first();
});

last() 方法返回被选元素的最后一个元素。

下面的例子选择最后一个

元素中的最后一个

元素：

$(document).ready(function(){
  $("div p").last();
});

eq() 方法返回被选元素中带有指定索引号的元素。

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个

元素（索引号 1）：

$(document).ready(function(){
  $("p").eq(1);
});

filter(exp)方法返回被删选后的元素

.is()方法根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。

.has()方法将匹配元素集合缩减为包含特定元素的后代的集合。

.not()方法从匹配元素集合中删除元素。

.nextUntil()方法获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function () {
            $("#btn01").click(function () {
                // 修改ul标签下，id为id01和最后一个il标签的字体大小
                $("ul li").filter("#id01, :last").css("fontSize", "20px")
            })
            $("#btn02").click(function () {
                // 判断id为text的input标签的父标签是否为form
                alert($("input[id='text']").parent().is("form")) // true
            })
        });
    </script>
</head>
<body>
<button id="btn01">测试1</button>
<button id="btn02">测试2</button>
    <ul>
        <li id="id01">未修改</li>
        <li>未修改</li>
        <li>未修改</li>
    </ul>
<form action="#">
    <input type="text" value="测试1">
    <input type="text" value="测试2" id="text">
</form>
</body>
</html>

以上代码实例中，parent()方法会返回当前所指向标签的父标签！

属性

获得或设置元素的 DOM 属性

这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。

方法	描述
addClass()	向匹配的元素添加指定的类名。
attr()	设置或返回匹配元素的属性和值。
hasClass()	检查匹配的元素是否拥有指定的类。
html()	设置或返回匹配的元素集合中的 HTML 内容。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
text()	设置或返回匹配元素的内容。
toggleClass()	从匹配的元素中添加或删除一个类。
val()	设置或返回表单项匹配元素的值。

一般常用的方法有html()、text()、val()，以上三种方法不传参数是获取，传参则是设置！

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function () {
            // // 获取
            // alert($("span").html())
            // // 设置
            // alert($("span").html("<h2>这里是div中的h2标签</h2>"))
            // // html标签会将参数转换为标签，而text则不会
            // alert($("span").text("<h2>这里是div中的h2标签</h2>"))
            $("#btn").click(function () {
                alert($("input").val());
            })
            // val属性可以进行批量操作
            $(":checkbox").val(["check01", "check02"])
        })

    </script>
</head>
</head>
<body>
<div><span>这里是div标签中的span标签</span></div>
<input type="text">
<button id="btn">获取</button>
</body>
</html>

添加新的 HTML 内容

以下用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

jQuery append() 方法在被选元素的结尾插入内容。

$("p").append("Some appended text.");

jQuery prepend() 方法在被选元素的开头插入内容。

$("p").prepend("Some prepended text.");

在上面的例子中只在被选元素的开头/结尾插入文本/HTML。

不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

在下面的例子中，将创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后可以通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

function appendText()
{
var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
var txt3=document.createElement("p");  // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // 追加新元素
}

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

$("img").after("Some text after");

$("img").before("Some text before");

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

jQuery remove() 方法删除被选元素及其子元素。

$("#div1").remove();

jQuery empty() 方法删除被选元素的子元素。

$("#div1").empty();

过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class=“italic” 的所有

元素：

$("p").remove(".italic");

全选、反选、全不选、提交

attr() 方法设置或返回被选元素的属性值，根据该方法不同的参数，其工作方式也有所差异。

设置被选元素的属性和值。

语法：

$(selector).attr(attribute,value)

代码实例：

改变图像的 width 属性：

$("button").click(function(){
  $("img").attr("width","180");
});

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

注意： prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。

提示： 如需检索 HTML 属性，请使用 attr()方法代替。

提示： 如需移除属性，请使用 removeProp()]方法。

以上两种方法的本质区别就是，如果检索的标签不具有待查找的属性值，attr()方法返回的是undefined，而prop返回的是false，假设我们此时需要操作input标签的复选框checkbox格式，为复选框添加checked属性表示被选中，则我们需要使用prop（）方法。

需求：实现复选框的全选、单选、反选、提交，并且设置一个标识框，当复选框为全选或者全不选的状态时，标识框会变更选中和不选中的状态，提交需要弹出已选中的内容！

代码实例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function () {
            $("#All").click(function () {
                $(":checkbox").prop("checked", true);
            })
            $("#not").click(function () {
                $(":checkbox").prop("checked", false);
            })
            $("#reverse").click(function () {
                $(":checkbox[name='items']").each(function () {
                    this.checked= ! this.checked;
                })
                var all = $(":checkbox[name='items']").length;
                var not = $(":checkbox[name='items']:checked").length;
                $(":checkbox[name='checkAll']").prop("checked", all == not);
            })
            $("#submit").click(function () {
                $(":checkbox[name='items']:checked").each(function() {
                    alert(this.value);
                })
            })
            // 给[全选/全不选]复选框绑定单击事件
            $(":checkbox[name='checkAll']").click(function () {
                var flag = this.checked;
                $(":checkbox[name='items']").prop("checked", flag)
            })
            // 给所有球类复选框绑定单击事件
            $(":checkbox[name='items']").click(function () {
                var all = $(":checkbox[name='items']").length;
                var not = $(":checkbox[name='items']:checked").length;
                $(":checkbox[name='checkAll']").prop("checked", all == not);
            })
        })
    </script>
</head>
<body>
    你喜欢的运动是？<input type="checkbox" name="checkAll">全选/全不选
    <br>
    <input type="checkbox" name="items" value="足球">足球
    <input type="checkbox" name="items" value="篮球">篮球
    <input type="checkbox" name="items" value="乒乓球">乒乓球
    <br>
    <button id="All">全选</button>
    <button id="not">全不选</button>
    <button id="reverse">反选</button>
    <button id="submit">提交</button>
</body>
</html>

从左到右，从右到左

需求：设置左右两个下拉选框，可以将左边的下拉选框选中的选项添加进右边的下拉选框中！

代码实例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        button{
            width: 130px;
        }
        select{
            width: 130px;
            height: 180px;
        }
        div{
            width: 150px;
            float: left;
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function () {
            // 选择第一个button标签(下标从0开始)
            $("button:eq(0)").click(function () {
                // 选中id为sel01的标签下，已被选中的option标签
                $("#sel01 option:selected").appendTo($("#sel02"))
            })
            $("button:eq(1)").click(function () {
                $("#sel01 option").appendTo($("#sel02"))
                $("#sel02 option").prop("selected", true);
            })
            $("button:eq(2)").click(function () {
                $("#sel02 option:selected").appendTo($("#sel01"))
            })
            $("button:eq(3)").click(function () {
                $("#sel02 option").appendTo($("#sel01"))
                $("#sel01 option").prop("selected", true);
            })
        })
    </script>
</head>
<body>
    <div id="left">
        <select name="sel01" id="sel01" multiple="multiple">
            <option value="opt1">选项1</option>
            <option value="opt2">选项2</option>
            <option value="opt3">选项3</option>
            <option value="opt4">选项4</option>
            <option value="opt5">选项5</option>
            <option value="opt6">选项6</option>
        </select>
        <button>选中添加至左边</button>
        <button>全部添加至右边</button>
    </div>
    <div id="right">
        <select name="sel01" id="sel02" multiple="multiple">
        </select>
        <button>选中添加至左边</button>
        <button>全部添加至右边</button>
    </div>
</body>
</html>

以上代码实例使用了以下两种方法：

append() 方法在被选元素的结尾插入内容，prop() 方法设置或返回被选元素的属性和值。

动态添加和删除行记录

需求：实现表格的动态添加和动态删除，可以自定义内容添加进表格，也可以动态地删除表格的某一行数据！

代码实例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style08.css">
    <script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
    <script>
        var deleteA = function () {
            // 在事件响应的function中，有一个this对象，指向正在响应的dom对象
            /**
             *confirm 是JavaScript提供的一个确认提示框函数，你给它传递什么就会提示什么
             * 当用户点击了确定返回true
             * 当用户点击了取消返回false
             */
            var $this = $(this).parent().parent()
            var $trObj = $this.find("td:first").text();
            if (confirm("你确定要删除 " + $trObj + "吗？")) {
                $this.remove()
            }
            // return false可以阻止标签的默认行为
            return false
        }
        $(function() { // 表示页面加载完成之后执行，相当于window.onload
            // 给submit按钮绑定单击事件
            $("#addEmpButton").click(function () {
                // 先获取对象
                var name = $("#empName").val();
                var email = $("#email").val();
                var salary = $("#salary").val();
                var add = $("    <tr>\n" +
                    "        <td> " + name + "</td>\n" +
                    "        <td>" + email + "</td>\n" +
                    "        <td>" + salary + "</td>\n" +
                    "        <td><a href=\"deleteEmp?id=001\">delete</a></td>\n" +
                    "    </tr>")
                add.appendTo($("#table"))
                // 新添加tr里的a标签并不能调用已绑定的单击事件
                // 所以我们需要每次添加tr标签之后，同时给该标签下的a标签添加绑定事件
                add.find("a").click(deleteA)
                // 需要注意的是，click()方法需要的是一个函数
                // 所以参数是函数名deleteA而不是函数本身deleteA()
            })
            // 给删除的a标签添加单击事件
            $("a").click(deleteA)
        });
    </script>
</head>
<body>
<table border="1" id="table">
    <tr id="employeeTable">
        <td>Name</td>
        <td>Email</td>
        <td>Salary</td>
        <td></td>
    </tr>
    <tr>
        <td>TOM</td>
        <td>tom@qq.com</td>
        <td>12345</td>
        <td><a href="deleteEmp?id=001">delete</a></td>
    </tr>
    <tr>
        <td>Jerry</td>
        <td>jerry@qq.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">delete</a></td>
    </tr>
    <tr>
        <td>Mary</td>
        <td>mary@qq.com</td>
        <td>19245</td>
        <td><a href="deleteEmp?id=003">delete</a></td>
    </tr>
</table>
<div id="formDiv">
    <table>
        <h4>添加新员工</h4>
        <tr>
            <td class="word">name：</td>
            <td class="inp">
                <input type="text" name="empName" id="empName">
            </td>
        </tr>
        <tr>
            <td class="word">email：</td>
            <td class="inp">
                <input type="text" name="email" id="email">
            </td>
        </tr>
        <tr>
            <td class="word">salary：</td>
            <td class="inp">
                <input type="text" name="salary" id="salary">
            </td>
        </tr>
    </table>
    <button id="addEmpButton" value="abc" >Submiit</button>
</div>
</body>
</html>

以上代码实例需要注意一点：this这个关键词是指当前事件响应的dom对象！

confirm()是JavaScript提供的一个确认提示框函数，你给它传递什么就会提示什么，当你点击确定之后会返回true，点击取消会返回false！

CSS样式操作

jQuery 拥有若干进行 CSS 操作的方法：

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
offset() - 返回第一个匹配元素相对应的文档位置
css() - 设置或返回样式属性

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style01.css">
    <style>
        div {
            width: 100px;
            height: 260px;
        }
        div.redDiv {
            background-color: red;
        }
        div.blueBorder {
            border: 2px solid blue;
        }
    </style>
    <script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function () {
            var $divEle = $("div:first")
            $("#btn01").click(function () {
                $divEle.addClass("redDiv blueBorder")
            })
            $("#btn02").click(function () {
                $divEle.removeClass("redDiv")
            })
            $("#btn03").click(function () {
                $divEle.toggleClass("redDiv")
            })
            $("#btn04").click(function () {
                var direction = $divEle.offset()
                console.log(direction)
            })
        })
    </script>
</head>
<body>
<table>
    <tr>
        <td>
            <div class="border">
            </div>
        </td>
        <td>
            <div class="btn">
                <input type="button" value="addClass()" id="btn01">
                <input type="button" value="removeClass()" id="btn02">
                <input type="button" value="toggleClass()" id="btn03">
                <input type="button" value="offset()" id="btn04">
            </div>
        </td>
    </tr>
</table>
</body>
</html>

动画操作

显示和隐藏

hide() 和 show() 方法

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

语法

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

下面的例子演示了带有 speed 参数的 hide() 方法

$("button").click(function(){
  $("p").hide(1000);
});

toggle() 方法

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

$("button").click(function(){
  $("p").toggle();
});

语法

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

代码实例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style02.css">
    <script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function () {
            $("#div01").click(function() {
                var $pObj = $("#div02")
                $pObj.toggle();
            })
        })
    </script>
</head>
<body>
<div id="div01">
    <p id="btn">点击这里，隐藏/显示面板</p>
</div>
<div id="div02" hidden>
    <p id="hide">
        一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。
        在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。
    </p>
</div>
</body>
</html>

淡入浅出

fadeIn() 方法

通过fadeIn() 方法，可以用于淡入已隐藏的元素。

语法

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeIn() 方法：

实例

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

fadeOut() 方法

fadeOut() 方法用于淡出可见元素。

语法

$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeOut() 方法：

实例

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

fadeToggle() 方法

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法

$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeToggle() 方法：

实例

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

fadeTo() 方法

fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeTo() 方法：

实例

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

滑动

slideDown() 方法

slideDown() 方法用于向下滑动元素。

语法

$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideDown() 方法：

实例

$("#flip").click(function(){
  $("#panel").slideUp();
});

slideUp() 方法

slideUp() 方法用于向上滑动元素。

语法

$(selector).slideUp(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideUp() 方法：

实例

$("#flip").click(function(){  $("#panel").slideUp();});

slideToggle() 方法

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$(selector).slideToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideToggle() 方法：

实例

$("#flip").click(function(){
  $("#panel").slideToggle();
});

自定义动画

jQuery animate() 方法用于创建自定义动画。

语法

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

下面的例子演示 animate() 方法的简单应用；它把

元素移动到左边，直到 left 属性等于 250 像素为止：

实例

$("button").click(function(){
  $("div").animate({left:'250px'});
});

提示： 默认地，所有 HTML 元素都有一个静态位置，且无法移动。

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

请注意，生成动画的过程中可同时使用多个属性：

实例

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

提示： 可以用 animate() 方法来操作所有 CSS 属性吗？

是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画，需要从 jQuery.com 下载 Color Animations 插件。

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

实例

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

代码实例：移动div标签

$(document).ready(function () {
    $("#btn01").click(function() {
        $("#div01").animate({
            left:'+=100px'
        })
    })
    $("#btn02").click(function() {
        $("#div02").animate({
            right:'+=100px'
        })
    })
    $("#btn03").click(function() {
        $("#div03").animate({
            height:"+=100px",
            width:"+=100px"
        })
    })
    $("#btn04").click(function() {
        $("#div04").animate({left: "100px", height: "200px", opacity:0.5})
        $("#div04").animate({top: "100px", right: "100px",width: "200px", opacity:0.8})
        $("#div04").animate({top: "", height: "100px", opacity:0.5})
        $("#div04").animate({left: "", width: "100px", opacity:0.8})
    })
})

停止动画

stop() 方法用于停止动画或效果，在它们完成之前，而且stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

下面的例子演示 stop() 方法：

$(document).ready(function () {
    $("#div01").click(function() {
        var $pObj = $("#div02")
        // $pObj.slideToggle("slow");
        $("#div03").animate({left: "200px"}, 5000)
        $("#div03").animate({fontSize: "3em"}, 5000)
    })
    $("#btn").click(function() {
        $("#div02").stop(); // 停止当前动画
    })
    $("#btn01").click(function() {
        $("#div03").stop(true); // 停止所有动画
    })
    $("#btn02").click(function() {
        $("#div03").stop(true, true); // 立即完成当前动画
    })
})

Callback函数

由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。

为了避免这个情况，可以以参数的形式添加 Callback 函数。

当动画 100% 完成后，即调用 Callback 函数。

典型的语法

$(selector).hide(speed,callback)

callback 参数是一个在 hide 操作完成后被执行的函数。

错误（没有 callback）

$("p").hide(1000);
alert("The paragraph is now hidden");

正确（有 callback）

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

循环动画

需求：创建一个div标签，默认会在显示和隐藏不断切换！

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
    <script>
        $(function() {
            var method = function () {
                // callback调用函数本身
                $("#div01").toggle(3000, method)
            }
            method();
        })
    </script>
</head>
<body>
循环动画
<div id="div01" style="height: 300px; width: 300px; background-color: red; position: relative"></div>
</body>
</html>

事件

$(function(){})和window.οnlοad=function(){}的区别

分别在什么时候触发？

JQuery的页面加载完成之后，是浏览器的内核解析完页面标签创建好的DOM对象之后就会立刻执行
原生js的页面加载完成之后，除了要等浏览器内核解析完页面标签，还要等标签显示时需要加载内容加载完成

触发的顺序？

jQuery页面加载完成之后先执行
原生js的页面加载完成之后

也就是说，当我们在script标签中写下了JQuery的页面加载和原生js的页面加载，JQuery会优先执行！

执行的次数

原生js的页面加载完成之后，只会执行最后一次的赋值函数
jQuery的页面加载是全部把注册的function函数依次顺序全部执行

常见 DOM 事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

click()

当点击元素时，会发生 click 事件。

当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。

click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

// click()
$("#btn").click(function () {
    $("#div01").slideToggle("slow");
})

mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。

mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：

$("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
});

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
});

hover()

hover()方法用于模拟光标悬停事件。

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

**one() **

当使用 one() 方法时，每个元素只能运行一次事件处理器函数。

one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。

// one()
$("p").one("click", function () {
    $(this).animate({
        fontSize: "+=2em"
    })
})

live() 和on()

live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。

live() 方法在 jQuery 版本 1.7 中被废弃，在版本 1.9 中被移除。请使用 on()方法代替。

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

**注意：**使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

**提示：**如需移除事件处理程序，请使用 off() 方法。

**提示：**如需添加只运行一次的事件然后移除，请使用 one() 方法。

向未来的元素添加事件处理程序：

<script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
<script>
    $(function(){
        $("div").on("click", "p", function () {
            $(this).css("background-color", "yellow")
        })
        $("button").click(function() {
            $("<p>新添加的段落</p>").appendTo("div")
        })
    });
</script>

添加多个事件：

<style>
    .onclass {
        background-color: yellow;
    }
</style>
<script>
    $(function(){
        $("div").on("click", "p", function () {
            $(this).css("background-color", "yellow")
        })
        $("button").click(function() {
            $("<p>新添加的段落</p>").appendTo("div")
        })
        $("#p01").on("mouseover mouseout", function () {
            $(this).toggleClass("onclass")
        })
    });
</script>

focus()

当元素获得焦点时，发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

blur()

当元素失去焦点时，发生 blur 事件。

blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

事件的冒泡

事件的冒泡是指，父元素和子元素在监听同一个事件的时候，子元素触发事件的时候，同一个事件也会被传递到父元素的事件中响应！

<script>
    $(function () {
        $("#div01").click(function () {
            alert("div标签")
        })
        $("p").click(function () {
            alert("p标签")
        })
    })
</script>

如上述情况，当我们点击p标签时，不仅会触发p标签的绑定事件，也会触发div标签的绑定事件！

如何解决？

只需要在子标签末尾添加上return false即可！

事件的对象

在给元素绑定事件的时候，在事件的function()参数列表中添加参数，这个参数名一般命名为e或者event，这个event就是JavaScript传递参事件处理函数的事件对象。

原生的js事件对象获取：

window.onload = function () {
    document.getElementById("div01").onclick = function (e) {
        // alert("原生的js事件对象")
        console.log(e)
    }
}

在浏览器的控制台中，我们可以看到单击事件输出了事件对象的一些信息：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ja7Bunhp-1635836444551)(C:/Users/12709/AppData/Roaming/Typora/typora-user-images/image-20211025225114095.png)]

例如第一个属性altkey，返回的是false，但如果发生单击事件的时候同时按下键盘的Alt键，这个属性就会返回true！

JQuery的事件对象获取：

从控制台我们可以看到，在属性栏中有type的属性，会显示当前正在执行的事件！

$(function () {
    $("div").on("mouseout mouseover", function (event) {
        if (event.type == "mouseout") {
            console.log("鼠标移出！")
        } else if (event.type == "mouseover") {
            console.log("鼠标移入！")
        }
    })
})