jQuery快速入门

lion_no_back

于 2023-04-02 19:38:31 发布

阅读量468

点赞数 1

分类专栏： jQuery 文章标签： jquery javascript ecmascript Powered by 金山文档

本文链接：https://blog.csdn.net/lion_no_back/article/details/129690190

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

在二次开发人脸识别来进行注册登录时，卡在了前端上传图片到后端这一步，莫得办法，只得来学习前端的jQuery和AJAX看看能不能解决问题

大致思路分为系统性学习和情境性学习，前期以系统性学习为主，跟着视频进行快速入门，之后便根据实际需求以及兴趣进行零散增补

jQuery

视频课程：从这节视频开始到那节视频结束

1.1 概述

jQuery是一套兼容多浏览器的javascript脚本库。核心理念：写得更少，做得更多。

它提供的API让诸如HTML文档遍历和操作、事件处理、动画和Ajax操作更加简单，主要包含以下功能：

HTML元素选取

HTML元素操作

CSS操作

HTML事件函数

CSS操作

HTML事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

除此还提供大量插件

1.2 引入

⚔️本地引入：将jQuery下载下来，然后导入项目中，使用script标签进行引用

首先来到jQuery官网

官网：https://jquery.com

然后下载流程如下

之后就是导入项目中

⚔️CDN引入：使用远程CDN资源库在线引入，避免文件下载（需要联网且具备稳定的网络）

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>

1.3 jQuery核心

$符号在jQuery中代表对jQuery对象的引用。通过该对象可以获取jQuery对象，调用jQuery提供的方法等【只有jQuery对象才能调用jQuery提供的方法】

$ 等价于 jQuery对象

2.1 DOM对象与jQuery包装集对象

原始的DOM对象只有DOM接口提供的方法和属性，通过js代码获取的对象都是dom对象，而通过jQuery获取的对象是jQuery包装集对象，简称jQuery对象

2.1.1 jQuery包装集对象

在jQuery世界中的所有对象，无论是单个还是一组，都封装成一个jQuery包装集，比如获取包含一个元素的jQuery包装集

var jQueryObject = $("#testDiv");

2.1.2 DOM对象转jQuery对象

DOM对象转jQuery对象，只需要利用$()方法进行包装即可

var domDiv = document.getElementsById('mydiv');
mydiv = $(domDiv);

2.1.3 jQuery对象转DOM对象

jQuery对象转DOM对象，只需要获取数组中的元素即可

// 第一种方式 获取jQuery对象
var jQueryDiv = jQuery('mydiv');
// 第二种方式 获取jQuery对象
jQueryDiv = $('#mydiv');
var dom = jQueryDiv[0]; // 将已获取的jQuery对象转为DOM对象

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM对象与jQuery包装集对象</title>
</head>
<body>
    <div id="mydiv"></div>
    <!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined -->
    <script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
    <script>
        // DOM对象
        var divDOM = document.getElementById('mydiv');
        console.log(divDOM);
        var divsDOM = document.getElementsByTagName('div');
        console.log(divsDOM);
        // DOM获取不存在元素
        var spanDOM = document.getElementById("myspan");
        console.log(spanDOM);

        console.log("========");
        // jQuery对象
        // 通过id选择获取元素对象 $("#id属性值")
        var divjQuery = $("#mydiv");
        console.log(divjQuery);
        // jQuery获取不存在元素
        var spanjQuery = $("#myspan");
        console.log(spanjQuery);

        console.log("========");
        // DOM对象转jQuery对象，只需要利用$()方法进行包装即可
        var divDOMTojQuery = $(divDOM);
        console.log(divDOMTojQuery);
        
        // jQuery对象转DOM对象
        var divjQueryToDOM = divjQuery[0];
        console.log(divjQueryToDOM);
    </script>
</body>
</html>

2.2 jQuery选择器

获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便方式来查找|定位元素，称为jQuery选择器。通俗地讲，Selector选择器是一个表示特殊语意的字符串，只要把选择器字符串传入上面的方法中就能够选择不同的DOM对象且以jQuery包装集的形式返回

jQuery选择器按照功能主要分为“选择”和“过滤”，并且是配合使用的

2.2.1 基础选择器

选择器	名称	举例
id选择器	#id	$("#testDiv")选择id为testDiv的元素
元素选择器	element	$("div")选择所有div元素
类选择器	.class	$(".blue")选择所有class=blue的元素
通用选择器	*	$("*")选择页面所有元素
组合选择器	selector1,select2...	$("#testDiv,span,.blue")同时选中多个选择器匹配的元素

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器</title>
</head>
<body>
    <div id="mydiv1">id选择器<span>span中的内容</span></div>
    <div id="mydiv1" class="blue">元素选择器</div>
    <span class="blue">样式选择器</span>
    <!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined -->
    <script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
    <script>
        // id选择器
        // 如果有多个同名id，则以第一个为准
        var mydiv = $("#mydiv1");
        console.log(mydiv);

        // 类选择器
        var clas = $(".blue");
        console.log(clas);

        // 元素选择器
        var spans = $("span");
        console.log(spans);

        // 通用选择器
        var all = $("*");
        console.log(all);

        // 组合选择器
        var group = $("#mydiv1,div,.blue");
        console.log(group);
    </script>
</body>
</html>

2.2.2 层次选择器

选择器	名称	举例
后代选择器	ancestor descendant	$("#parent div") 选择id为parent的元素的所有div元素
子代选择器	parent > child	$("#parent > div") 选择id为parent的直接div子元素
相邻选择器	prev + next	$(".blue+img") 选择css类为blue的下一个img元素
同辈选择器	prev - sibling	$(".blue ~ img") 选择css类为blue的之后的img元素

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层次选择器</title>
    <style>
        .testColor {
            background: green;
        }
        .gray {
            background: gray;
        }
    </style>
</head>
<body>
    <div id="parent">层次选择器
        <div id="child" class="testColor">父选择器
            <div class="gray">子选择器</div>
            <img src="https://mk-image-article.oss-cn-hangzhou.aliyuncs.com/img/20230327162508.png" width="270" height="129">
            <img src="https://mk-image-article.oss-cn-hangzhou.aliyuncs.com/img/20230327162508.png" width="270" height="129">
        </div>
        <div>选择器2
            <div>选择器2中的div</div>
        </div>
    </div>
    <!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined -->
    <script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
    <script>
        // 后代选择器
        var hd = $('#parent div');
        console.log(hd);

        // 子代选择器
        var son = $('#parent > div');
        console.log(son);

        // 相邻选择器
        var next = $('#child + div');
        console.log(next);

        // 同辈选择器
        var imgs = $('.gray ~ img');
        console.log(imgs);
    </script>
</body>
</html>

2.2.3 表单选择器

Forms	名称	举例
表单选择器	:input	查找所有input元素：$(":input"); 注意：会匹配所有的input、textarea、select和button元素
文本框选择器	:text	查找所有文本框：$(":text")
密码框选择器	:password	查找所有密码框：$(":password")
单选按钮选择器	:radio	查找所有单选按钮：$(":radio")
复选框选择器	:checkbox	查找所有复选框：$(":checkbox")
提交按钮选择器	:submit	查找所有提交按钮：$(":submit")
图像域选择器	:image	查找所有图像域：$(":image")
重置按钮选择器	:reset	查找所有重置按钮：$(":reset")
按钮选择器	:button	查找所有按钮：$(":button")
文件域选择器	:file	查找所有文件域：$(":file")

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form id="myform" name="myform" method="post">
        <input type="hidden" name="uno" value="999" disabled="disabled">
        姓名:<input type="text" id="uname" name="uname"> <br>
        密码:<input type="password" id="upwd" name="upwd" value="123456"> <br>
        年龄:<input type="radio" name="uage" value="0" checked="checked">小屁孩
             <input type="radio" name="uage" value="1">你懂的 <br>
        爱好:<input type="checkbox" name="ufav" value="篮球">篮球
             <input type="checkbox" name="ufav" value="爬床">爬床
             <input type="checkbox" name="ufav" value="代码">代码<br>
        来自:<select id="uform" name="uform">
                <option value="-1" selected="selected">请选择</option>
                <option value="0">北京</option>
                <option value="1">上海</option>
        </select><br>
        简介:<textarea rows="10" cols="30" name="uintro"></textarea><br>
        头像:<input type="file"><br>
        <input type="image" src="https://mk-image-article.oss-cn-hangzhou.aliyuncs.com/img/20230327162508.png" width="20" height="20">
        <button type="submit" onclick="return checkForm();">提交</button>
        <button type="reset">重置</button>
    </form>
    <!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined -->
    <script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
    <script>
        // 表单选择器
        var inputs = $(':input');
        console.log(inputs);

        // 元素选择器
        var inputsT = $('input');
        console.log(inputsT);
    </script>
</body>
</html>

3.1 jQuery DOM操作

jQuery提供了对HTML节点操作，而且是在原生js基础上进行了优化，使用起来更加方便

3.1.1 操作元素的属性

3.1.1.1 获取属性

两者区别：

如果是固有属性，attr()和prop()方法均可操作

如果是自定义属性，attr()可获取，prop()不可获取

如果返回值是boolean类型的属性

若设置了属性，attr()返回具体的值，prop()返回true

若未设置属性，attr()返回undefined，prop()返回false

3.1.1.2 设置属性和移除属性

如果属性返回的boolean类型的值，则使用prop()方法，否则就使用attr()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作元素的属性</title>
</head>
<body>
    <input type="checkbox" name="ch" checked="checked" id="aa" abc="aabbcc"> aa
    <input type="checkbox" name="ch" id="bb"> bb
    <!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined -->
    <script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
    <script>
        // 获取属性
        // 属性的分类，分为固有属性、返回值为boolean的属性以及自定义属性
        // 固有属性
        var name = $('#aa').attr('name');
        console.log(name);
        var nameT = $('#aa').prop('name');
        console.log(nameT);

        // 返回值boolean的属性 元素设置了属性
        var ckO = $('#aa').attr('checked'); 
        var ckT = $('#aa').prop('checked');
        console.log(ckO); // checked
        console.log(ckT); // true
        // 返回值boolean的属性 元素未设置属性
        var ckThr = $('#bb').attr('checked');
        var ckF = $('#bb').prop('checked');
        console.log(ckThr); // undefined
        console.log(ckF); // false

        // 自定义属性
        var abcO = $('#aa').attr('abc');
        var abcT = $('#aa').prop('abc');
        console.log(abcO);
        console.log(abcT);

        // 设置固有属性
        $('#aa').attr('value','1');
        $('#bb').prop('value','2');

        // 返回值是boolean的属性
        $('#bb').attr('checked','checked');
        $('#bb').prop('checked',false);

        // 自定义属性
        $('#aa').attr('uname','admin');
        $('#aa').prop('uage',18);

        // 移除属性
        $('#aa').removeAttr('checked');
    </script> 
</body>
</html>

3.1.2 操作元素的样式

方法	说明
attr("class")	获取class属性的值，即样式名称
attr("class",“样式名")	修改class属性的值，修改样式
addClass("样式名")	添加样式名称
css()	添加具体的样式
removeClass(class)	移除样式名称

添加样式是在原来的样式基础上添加的，原本样式会保留，若出现相同的样式，以样式中后定义的为准

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作元素的样式</title>
    <style>
        div {
            padding: 8px;
            width: 180px;
        }
        .blue {
            background-color: blue;
        }
        .larger {
            font-size: 30px;
        }
        .green {
            background: green;
        }
        .pink {
            background: pink;
        }
    </style>
</head>
<body>
    <h3>css()方法设置元素样式</h3>
    <div id="conBlue" class="blue larger">天蓝色</div>
    <div id="conRed">大红色</div>
    <div id="remove" class="blue larger">天蓝色</div>
    <!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined -->
    <script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
    <script>
        // 获取元素样式名
        var cla = $("#conBlue").attr("class");
        console.log(cla);
        
        // 获取元素的样式
        $("#conBlue").attr("class","green");

        // 添加样式
        $("#conBlue").addClass("larger");
        $("#conBlue").addClass("pink");

        // 添加具体的样式 (添加行内样式)
        $('#conRed').css("font-size","40px");
        $('#conRed').css({"font-family":"楷体","color":"red"});

        // 移除样式
        $("#remove").removeClass('larger');
    </script>
</body>
</html>

3.1.3 操作元素的内容

方法	说明
html()	获取元素的html内容
html("html,内容")	设定元素的html内容
text()	设置元素的文本内容，不包含html
text("text 内容")	设置元素的文本内容，不包含html
val()	获取元素value值
val("值")	设置元素的value值

表单元素：

文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select

非表单元素：

div、span、h1~h6、table、tr、td、li、p等

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作元素的内容</title>
</head>
<body>
    <h3><span>html()和text()方法设置元素内容</span></h3>
    <div id="html"></div>
    <div id="htmlT"></div>
    <div id="text"></div>
    <input type="text" name="uname" id="op" value="oop">
    <!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined -->
    <script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
    <script>
        // 设置元素内容
        $("#html").html("<h2>上海</h2>");
        $("#htmlT").html("上海");

        // 获取元素的内容
        var html = $("#html").html();
        var htmlT = $("#htmlT").html();
        console.log(html);
        console.log(htmlT);

        // 设置元素的纯文本内容，不识别HTML标签（非表单元素）
        $("#text").text("北京");
        $("#text2").text("<h2>好</h2>");

        // 获取元素的值（表单元素）
        var val = $('#op').val();
        console.log(val);
        $('#op').val('今天天气不错');
    </script>
</body>
</html>

3.1.4 元素常见操作

3.1.4.1 创建元素

在jQuery中创建元素很简单，直接使用核心函数即可，创建格式如下：

$('元素内容') 实例 -> $('<p>this is a paragraph!!!</p>');

3.1.4.2 添加元素

方法	说明
prepend(content)	在被选元素内部的开头插入元素或内容，被追加的content参数，可以是字符、HTML元素
$(content).prependTo(selector)	把content元素或内容加入selector元素开头
append(content)	在被选元素内部的结尾插入元素或内容，被追加的content参数，可以是字符、HTML元素
$(content).appendTo(selector)	把content元素或内容插入selector元素内，默认是在尾部
before()	在元素前插入指定的元素或内容：$(selector).before(content)
after()	在元素后插入指定的元素或内容：$(selector).after(content)

添加元素时，如果元素不存在，则将元素追加到指定位置；如果元素存在，将原来元素直接剪切到指定位置

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建和添加元素</title>
    <style>
        div {
            margin: 10px 0px;
        }
        span {
            color: white;
            padding: 8px;
        }
        .red {
            background-color: red;
        }
        .blue {
            background-color: blue;
        }
        .green {
            background-color: green;
        }
        .pink {
            background-color: pink;
        }
        .gray {
            background-color: gray;
        }
    </style>
</head>
<body>
    <h3>prepend()方法前追加内容</h3>
    <h3>prependTo()方法前追加内容</h3>
    <h3>append()方法后追加内容</h3>
    <h3>appendTo()方法后追加内容</h3>

    <span class="red">男神</span>
    <span class="blue">偶像</span>
    <div class="green">
        <span>小鲜肉</span>
    </div>
    <!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined -->
    <script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
    <script>
        // 创建元素
        var p = "<p>这是一个p标签</p>";
        console.log($(p));
        
        // 新建文本元素并添加
        var span = '<span>小奶狗</span>';
        $('.green').prepend(span);
        var span2 = '<span>小狼狗</span>';
        $(span2).prependTo($('.green'));

        var spanO = '<span>小奶狗1</span>';
        var spanT = '<span>小狼狗1</span>';
        $('.green').append(spanO);
        $(spanT).appendTo($('.green'));

        // 将已存在内容追加到指定元素中 
        $('.green').append($('.red'));

        // 同级追加
        var sp1 = "<span class='pink'>女神</span>";
        var sp2 = "<span class='gray'>歌手</span>";

        $(".blue").before(sp1);
        $(".blue").after(sp2);
    </script>
</body>
</html>

3.1.4.3 删除元素

指定元素.remove()

删除元素及其对应的子元素，标签和内容一起删除

指定元素.empty()

清空元素内容，保留标签

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除元素</title>
    <style>
        span {
            color: white;
            padding: 8px;
            margin: 5px;
            float: left;
        }
        .green {
            background-color: green;
        }
        .blue {
            background-color: blue;
        }
    </style>
</head>
<body>
    <h3>删除元素</h3>
    <span class="green">jQuery<a>删除</a></span>
    <span class="blue">javase</span>
    <span class="green">http协议</span>
    <span class="blue">servlet</span>
    <!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined -->
    <script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $('.green').remove();
        $('.blue').empty();
    </script>
</body>
</html>

3.1.4.4 遍历元素

$(selector).each(function(index,element)); 遍历元素

函数function为遍历时的回调函数

index为遍历元素的序列号，从0开始

element是当前元素，此时是dom元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍历元素</title>
    <style>
        span {
            color: white;
            padding: 8px;
            margin: 5px;
            float: left;
        }
        .green {
            background-color: green;
        }
        .blue {
            border-color: blue;
        }
    </style>
</head>
<body>
    <h3>遍历元素 each()</h3>
    <span class="green">jQuery</span>
    <span class="green">javase</span>
    <span class="green">http协议</span>
    <span class="green">servlet</span>
    <!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined -->
    <script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $('.green').each(function(index,element){
            console.log(index);
            console.log(element);
            console.log(this);
            console.log($(this));
        })
    </script>
</body>
</html>

4.1 jQuery事件

jQuery 是为事件处理特别设计的

4.1.1 ready()加载事件

预加载事件，文档加载完毕事件，当文档全部加载完毕之后执行，等价于window.onload事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ready加载事件</title>
    <!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined -->
    <script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $(document).ready(function(){
            // 获取元素
            console.log($('#p1'));
        });
        $(function(){
            console.log('ready加载事件...');
        })
    </script>
</head>
<body>
    <p id="p1">文本</p>
</body>
</html>

4.1.2 bind()绑定事件

bind绑定事件：为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数

语法：$(selector).bind( eventType[,eventData], handler(eventObject));

eventType：是一个字符串类型的事件类型

[,eventData]: 传递的参数、格式：{名: 值，名2：值2}

handler(eventObject): 该事件触发执行的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定事件</title>
</head>
<body>
    <h3>bind()方向简单的绑定事件</h3>
    <div id="test" style="cursor: pointer;">点击查看名言</div>
    <input id="btntest" type="button" value="点击就不可用了">
    <hr>
    <button type="button" id="btn1">按钮1</button>
    <button type="button" id="btn2">按钮2</button>
    <button type="button" id="btn3">按钮3</button>
    <button type="button" id="btn4">按钮4</button>
    <!-- 引入jQuery的核心js文件 若未引入jQuery 则报错：$ is not defined -->
    <script src="../js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
    <script>
        // 绑定单个事件
        $('#test').bind('click',function(){
            console.log('世上无难事，只怕有心人');
        }); 
        $('#btntest').click(function(){
            console.log(this);
            $(this).prop('disabled',true);
        });

        // 绑定多个事件
        $('#btn1').bind('click mouseout',function() {
            console.log('按钮1...');
        });
        $('#btn2').bind('click',function(){
            console.log('按钮2被点击了...');
        }).bind('mouseout',function() {
            console.log('按钮2移开了...');
        });
        $('#btn3').bind({
            'click': function() {
                console.log('按钮3被点击了...');
            },
            'mouseout': function() {
                console.log('按钮3移开了...');
            }
        });
        // 直接绑定
        $('#btn4').click(function() {
            console.log(('按钮4被点击了...'));
        }).mouseout(function(){
            console.log('按钮4移开了...');
        });
    </script>
</body>
</html>

情境学习

1.1 显示和隐藏

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>toggle</title>
    <style>
        .text {
            border: 1px solid rgba(173, 160, 160, 0.8);
        }
        .btn {
            float: right;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="text">
        <p>普罗大众：人工智能应该被隐藏</p>
        <button class="btn">展开</button>
        <p>魔术师：世界应该被重塑</p>
    </div>
    <script src="../js/jquery-3.6.4.js"></script>
    <script>
        var flag = 1;
        $('button').click(function() {
            if (flag == 0) {
                $(this).text('显示');
                flag = 1;
            } else {
                $(this).text('隐藏');
                flag = 0;
            }
            $('p').toggle();
        })
    </script>
</body>
</html>