jQuery 基础学习（高级部分）

最新推荐文章于 2024-06-26 08:15:00 发布

抹泪的知更鸟

最新推荐文章于 2024-06-26 08:15:00 发布

阅读量661

点赞数

分类专栏： jQuery+BootStrap+VUE 文章标签： jquery 学习 javascript

本文链接：https://blog.csdn.net/qq_51596354/article/details/123456925

版权

这篇博客深入探讨了jQuery的高级用法，包括事件冒泡、绑定事件、元素的隐藏与显示、动画效果、AJAX操作以及jQuery对象与DOM对象的区别。详细介绍了如何阻止事件冒泡、页面加载事件、事件绑定与解除、动画效果的实现如淡入淡出、滑动效果，以及如何使用animate方法自定义动画。此外，还提到了AJAX异步请求的使用和同步与异步的区别，以及jQuery对象与DOM对象的转换方法。最后，提供了一些练习题，帮助读者巩固所学知识。

摘要由CSDN通过智能技术生成

jQuery 基础学习（高级部分）

高级用法

本篇主要内容如下：

事件冒泡
页面加载及常见事件
隐藏（hide）/显示（show）
淡入（fadeIn）/淡出（fadeOut）（自学）
滑入（slideUp）/滑出（slideDown）
动画（animate）
封装（自学）
ajax 方法
同步与异步
JQuery 对象和 DOM 对象（自学）

事件冒泡

在一个对象上触发某类事件（比如单击 onclick 事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回 true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即 document 对象（有些浏览器是 window）。这种现象叫事件冒泡。

案例：

<body>
<div>
    <input id="btn-show" type="button" value="点击"/>
</div>
<div class="show"></div>
<script>
    //记录执行次数
    var intI = 0;
    //单击事件
    $("body,div,#btn-show").click(function () {
    
        intI++;
        $(".show").html("你好，").append("执行次数：" + intI);
    })
</script>
</body>

执行上述的例子后会发现，页面显示执行次数为 3 次，这是因为事件在执行的过程中存在冒泡现象，即虽然单击的是按钮，但是按钮外围的div 元素的事件也被触发，同时div元素的外围元素的事件也随之被触发，其整个事件涉及的过程就像水泡样向外冒，故称为冒泡过程。

而在实际应用中，并不希望事件的冒泡现象发生，即单击按钮就执行单一的单击事件，并不触发其他外围的事件。在 jQuery 中可通过 stopPropagation() 方法来实现，该方法可以阻止冒泡过程的发生，将上面例子中的程序稍加修改即可解决冒泡问题，具体代码如下所示：

$("body,div,#btn-show").click(function () {
    intI++;
    $(".show").show().html("你好，").append("执行次数：" + intI);
    event.stopPropagation();
})

在开发过程中除了使用 stopPropagation() 方法来阻止事件冒泡过程外，还可通过语句 return false 阻止事件的冒泡过程。

页面加载及常见事件

页面载入事件 ready() 方法，除了简化的 $(function(){}) 方法外，ready() 方法还有以下几种不同的写法，但执行效果是相同的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        window.onload = function () {
    
            var innerText = document.getElementById("my_div").innerText;
            console.info(innerText)
        }

        $(function () {
    
            let text = $("#my_div").text();
            alert(text)
        })

        $(document).ready(function () {
    
            let text = $("#my_div").text();
            alert(text)
        })
    </script>
</head>
<body>
<div id="my_div">123</div>
</body>
</html>

注意：$ 等价于 jQuery

绑定事件

在进行事件绑定时，前面曾使用了 .click(function(){}) 绑定按钮的单击事件，除了这种写法之外，在 jQuery 中还可以使用 bind() 方法进行事件的绑定，bind() 功能是为每个选择元素的事件绑定处理函数，其语法结构如下所示：

bind(type,function)

其中参数 type 为一个或多个类型的字符串，如 click 或 change ，也可以自定义类型，可以被参数 type 调用的类型包括：

unload：事件在用户退出页面时发生
blur：失去焦点发生变化
input：当输入框内容发生变化时
focus：点击文本框会获得焦点发生
select：要选中文本框中的内容会执行的事件
change：在 input、select 上失去焦点并且内容变化
reset：当点击重置的时候才会发生
onsubmit：当表单点击提交后
resize：当窗口发生大小变换的时候就会执行
click：点击发生变化
mouseover：鼠标经过会发生变化，类似 hover 效果
mouseout：鼠标移出会发生变化
mousedown：鼠标按键按下去会发生变化
mouseup：按键按下去并释放松开会发生变化
keydown：按下键盘去会发生变化

参数 data 是作为 event.data 属性值传递给事件对象的额外数据对象。

如果要在一个元素中绑定多个事件，可以将事件用空格隔开，具体代码如下所示。

<body>
<form onsubmit="return subForm()">
    <input id="input" name="name">
    <input type="submit" value="提交">
</form>

<script>
    $("#input").bind("change input", function () {
    
        console.info(this.value)
    })

    function subForm() {
    
        if ($("#input").val().length < 10) {
    
            return false;
        }
        return true;
    }
</script>
</body>

移除事件（unbind）

在 DOM 对象的实际操作中，既然存在用于绑定事件的 bind 方法，那么相应的也存在用于移除绑定事件的方法，在 jQuery 中，可通过 unbind() 方法移除绑定的所有事件或指定某一个事件，其语法结构如下所示：

unbind([type],[fn])

其中参数 type 为移除的事件类型，fn 为需要移除的事件处理函数：如果该方法没有参数，则移除所有绑定事件；如果带有参数 type，则移除该参数指定的事件类型；如果带有参数 fn，则只移除绑定时指定的函数 fn。可以通过以下例子对移除事件有一个更为深刻的理解，具体代码如下所示：

案例：点击按钮三后，所有按钮绑定的事件都被移除

<body>
<input type="button" value="按钮一">
<input type="button" value="按钮二">
<input type="button" value="按钮三">
<script>
    $("input:eq(0)").bind("click", function () {
    
        alert("按钮一的单击事件");
    })
    $("input:eq(1)").bind("click", onclick);
    
    $("input:eq(2)").bind("click", function () {
    
        $("input").unbind();
    });

    function onclick() {
    
        alert("按钮二的单击事件")
    }
</script>
</body>

隐藏（hide）/显示（show）

在页面中，元素的显示与隐藏是使用最频繁的操作，在 JavaSeript 中，一般通过改变元素的显示方式从而实现其隐藏/显示，如以下代码所示：

document.getElementById("p").style.display = "none";
document.getElementById("p").style.display = "block";

而在 jQuery 中，元素的显示与隐藏方法要比 JavaScript 多得多，并且实现的效果更为友好，下面将逐一介绍在 jQuery 中如何实现隐藏与显示效果。

在前面已经用到过 show() 方法与 hide() 方法，前者是显示页面中的元素，后者是隐藏页面中的元素，它们的实现原理是通过改变元素的显示方式从而实现其隐藏/显示，与 JavaScript 的处理方式几乎一模一样，不同的是书写代码量十分少。

jQuery 中的 show() 与 hide() 方法不仅可以实现静态模式的显示与隐藏，还可以完成有动画特效的显示与隐藏，只需在方法的括号中加入相应的参数即可，其语法结构如下所示：

//动画效果的显示功能
show(speed,[callback])
//动画效果的隐藏功能
hide(speed,[callback])

方法中的参数 speed 表示执行动画时的速度，该速度有三个默认字符值 slow、normal、fast，其对应的速度分别是“0.6 秒”“0.4秒”“0.2 秒”;如果不使用默认的字符值，也可以直接输入数字，如“3000”，表示该动画执行的速度为 3000 亳秒。

案例：

<body>
<input id="btnShow" type="button" value="点我试试"/>
<div class="show">看看我如何隐藏和显示</div>
<h1>1</h1>
<script>
    let flag = true;
    $("#btnShow").click(function () {
    
        if (flag) {
    
            $(".show").hide(3000);
            flag = false
        } else {
    
            $(".show").show(3000);
            flag = true;
        }
    })
</script>
</body>

淡入（fadeIn）/淡出（fadeOut）(自学)

在 jQuery 中可以通过实现元素逐渐变幻背景色的动画效果来显示或隐藏元素，也就是所谓的淡入淡出效果。

show() 、hide() 方法与 fadeIn()、 fadeOut() 方法相比较，相同之处是都切换元素的显示状态，不同之处在于，前者的动画效果使元素的宽高属性都发生了变化，而后者仅仅是改变了元素的透明度，并不修改其他的属性。fadeIn() 与fadeOut() 方法语法结构如下所示：

fadeIn(speed,[callback])
fadeOut(speed,[callback])

fadeIn() 与 fadeOut() 方法的功能是通过改变元素透明度，实现淡入淡出的动画效果，并在完成时，可执行一个回调的函数，参数 speed 为动画效果的速度，可选参数 [callback] 为动画完成时可执行的函数。

案例：

<body>
<div>
    <input type="button" value="fadeIn" id="button1"/>
    <input type="button" value="fadeOut" id="button2"/>
</div>

<img src="http://web.book.51xueweb.cn/anli/15/images/15-01/img01.jpg"/>
<h1>1</h1>

<script>
    $("#button1").click(function () {
    
        $("img").fadeIn(3000)
    })
    $("#button2").click(function () {
    
        $("img").fadeOut(3000)
    })
</script>
</body>

在 jQuery 中，fadeIn() 和 fadeOut() 方法通过动画效果改变元素的透明度，来切换元素显示状态，其透明度从 0.0 到 1.0 淡出或从 1.0 到 0.0 淡入，从而实现淡入淡出的动画效果。

如果要将透明度指定一个值，则需要使用 fadeTo() 方法，其语法结构如下所示：

fadeTo(speed,opacity,[callback])

该方法的功能是将所选择元素的不透明度以动画的效果调整到指定不透明度值，动画完成时，可以执行一个回调函数，参数 speed 为动画效果的速度，参数 opacity 为指定的不透明值，取值范围是 0.0~1.0，可选参数 [callback] 为动画完成时执行的函数。

$("img").fadeTo(3000,0.2)

滑入（slideUp）/滑出（slideDown）

在 jQuery 中，还有一种滑动的动画效果可改变元素的高度。要实现元素的滑动效果，需要调用 jQuery 中的两个方法，一个是 slideDown()，另一个是 slideUp()，其语法结构如下所示：

slideDown(speed,[callback])

其功能是以动画的效果将所选元素的高度向下增大，使其呈现一种“滑动”的效果，而元素的其他属性并不发生变化；参数 speed 为动画显示的速度，可选项[callback]为动画显示完成后，执行的回调函数。slideUp() 方法的用法和slideDown() 相同。在实际使用中，通过 slideToggle() 方法，无需定义变量，可以根据当前元素的显示状态自动进行切换。

案例：

<body>
<input type="button" value="slideToggle" id="button1"/>
<div>
    <img src="http://web.book.51xueweb.cn/anli/15/images/15-01/img01.jpg" alt=""/>
</div>
<script>
    $("#button1").click(function () {
    
        $("img").slideToggle(3000);
    });
</script>
</body>

练习：

1.选项卡：点击对应的选项卡打开对应的折叠页面。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qCosyLt8-1647143427398)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220309101559203.png)]$
2.身份证输入法：按照设计图完成下面的身份证输入效果。

在这里插入图片描述
参考代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>电子身份证键盘</title>
    <style>
        * {
    
            margin: 0;
            padding: 0;
        }

        .content {
    
            width: 80%;
            margin: 50px auto;
            position: relative;
        }

        #keyboard {
    

            position: absolute;
            top: 30px;
            width: 240px;
            height: 240px;
            background-color: gray;
        }

        .content > input[type="text"] {
    
            font-size: 20px;
            width: 240px;
            height: 24px;
            border: 1px solid #666666;
            margin: 0;
        }

        #keyboard > button, input {
    
            width: 52px;
            height: 52px;
            float: left;
            border: none;
            margin: 4px;
            font-size: 30px;
            background-color: white;
        }
        #keyboard >input{
    
            width

最低0.47元/天解锁文章

抹泪的知更鸟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery 基础学习（高级部分）

jQuery 基础学习（高级部分）高级用法事件冒泡绑定事件隐藏（hide）/显示（show）淡入（fadeIn）/淡出（fadeOut）(自学)滑入（slideUp）/滑出（slideDown）动画（animate）封装（自学）find()与children()（自学）Ajax练习：（默写 30 分钟）JQuery 对象和 DOM 对象DOM 对象jQuery对象章节练习：高级用法本篇主要内容如下：事件冒泡页面加载及常见事件隐藏（hide）/显示（show）淡入（fadeIn）/淡出（fade
复制链接

扫一扫