【前端】Jquery详细教程

最新推荐文章于 2024-08-09 02:16:38 发布

孤寒者

最新推荐文章于 2024-08-09 02:16:38 发布

阅读量2.2w

点赞数 39

分类专栏：爬虫必备前端技术教程文章标签： jquery 前端 javascript

转载需文末联系本作者（未经本人允许的转载完全不允许！）

本文链接：https://blog.csdn.net/qq_44907926/article/details/122209778

版权

爬虫必备前端技术教程专栏收录该内容

43 篇文章 124 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文是一篇关于Jquery的入门教程，介绍了Jquery的基本概念、引入方式、选择器的使用，以及包括hide、show、fadeIn等在内的动画效果。通过实例操作帮助读者掌握Jquery的核心功能。

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

👇
👉🚔直接跳到末尾🚔👈 ——>领取专属粉丝福利💖
☝️

👻我又仔细想了想，HTML、CSS、JavaScript系列都做了，怎么能缺少Jquery呢？👻

😬所以！本博主又加班加点产出了Jquery版本的入门级教程！！！😬

😜在本篇博文中，本博主就带领小伙伴们认真地学习一下Jquery~😜

请添加图片描述

重点来啦！重点来啦！！💗💗💗 小伙伴们，快拿出你们的笔记本，开始上课啦！（要打起十足的精神哦~）

第一部分：JQ是什么？

什么是JQ？
JQ是JS写的插件库，说白了，就是一个js文件。
JS和JQ的区别：
凡是用jq能实现的，js都能实现；js能实现的，jq却不一定能实现。可以理解为js是jq他爹，爹会的比儿子多~
JQ的理念：
Write less,do more！

1.JQ的引入：

JQuery官方网址：https://www.bootcdn.cn/jquery/
进入JQ官网之后：
在这里插入图片描述

我们选择第二个或者第三个都可以，第一个和最后两个只是JQ的部分，有些功能没有。
第二个和第三个的区别：第二个是正常版；第三个是压缩版。

（本人运营微信公众号：孤寒者）（欢迎喜欢Python，喜欢编程的小伙伴们的关注哦~）

（1）第一种引入方式：网址引入！

选择第二个或者第三个两个选项都可以，效果一样!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ的引入</title>
</head>
<body>

<!--第一种方法：网址引入-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
    // $是JQ里面的代表符号
    $(function () {         //如果页面弹出123，则证明引入JQ正常！
        alert(123)
    })
</script>

</body>
</html>

（2）第二种引入方式：本地引入！

直接将JQuery复制粘贴到本地保存即可!

<script src="本地的Jquery地址"></script>

2.JQ的选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ的选择器</title>
</head>
<body>

<p>我是一个段落标签</p>

<script src="JQuery.js"></script>

<script>
    // JQ选择器获取元素的方法和CSS一模一样！！！     固定格式：$("")  双引号里面写选择器！！！
    $("p").click(function () {      //注意：JQ里的单击事件是click，注意这个写法和JS是有所不同的！
        alert("我出来了");
    });
</script>

</body>
</html>

（本人运营微信公众号：孤寒者）（欢迎喜欢Python，喜欢编程的小伙伴们的关注哦~）

第二部分：基本使用

（效果都很直观，自己动手实操哦~一步步琢磨，有不懂的可以文末公众号咨询！）

1.基本使用一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ的基本使用一</title>
</head>
<body>

<div>
    <p id="p1">我是段落</p>
    <p id="p2">我是段落666</p>
</div>

<script src="JQuery.js"></script>

<script>
    //                                       1.修改内容
    // JS的写法
    var p = document.getElementById("p1");
    p.innerText = "我不是段落";
    // JQ的写法
    $("#p1").text("我不是段落1");
    $("#p1").html("我就是段落2");

    //                                       2.JQ和JS相互转换
    // JQ转JS        $("#p1")是JQ的获取元素；  .get([0])是将JQ转换为JS；  innerText = "111"是使用JS方法。
    $("#p1").get([0]).innerText = "111";
    $("#p1")[1].innerText = "222";
    // JS转JQ        先是JS的方法获取元素；    $(p11)是将JS转换为JQ；      text("123")是使用JQ方法。
    var p11 = document.getElementById("p1");
    $(p11).text("123");

    //                                       3.单击事件
    // 如果不加下标，JQ可以同一时间给多个元素设置同一事件；下面代码会给选中的两个段落标签都设置单击事件；但是JS就不行，需要加下标！
    // 如果只想选中段落标签里的某一个，那就加下标  .eq(下标)     加在获取元素之后。  即$("p")之后！
    $("p").click(function () {
        alert(456);
    });

    //                                       4.鼠标滑入滑出事件
    $("#p1").hover(function () {
        $("#p1").text(111);
    },function () {            //如果只写第一个函数，就只是鼠标滑入事件；两个都写，就是滑入滑出事件。
        $("#p1").text(222);
    });

    //                                       5.追加和添加       注意：这是加到p1标签里面，是p1的子元素！！！
    $("#p1").append("<p>111</p>");          //追加     后缀
    $("#p1").prepend("<p>222</p>");         //添加     前缀

    //                                       6.前和后           注意：这里加之后是p1的同级标签，是p1的兄弟元素。
    $("#p1").after("<p>333</p>");
    $("#p1").before("<p>444</p>");

    //                                       7.清空           清空所选元素里面的所有东西（包括文本内容和标签）
    $("div").empty();

    //                                       8.移除           清空所有，包括自己本身以及其内所有东西！
    $("div").remove();

</script>
</body>
</html>

（本人运营微信公众号：孤寒者）（欢迎喜欢Python，喜欢编程的小伙伴们的关注哦~）

2.基本使用二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ的基本使用二</title>

    <style>
        div{
            width: 1200px;
            height: 1200px;
        }
    </style>

</head>
<body>

<div>
    <p id="p1">我是段落1</p>
    <p id="p2">我是段落2</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

<script src="JQuery.js"></script>

<script>

            // 操作标签属性
            // 第一部分：自定义属性
    // 1.增加属性
    $("div").attr("id","div1");
    // 2.改变属性
    $("div").attr("id","div2");
    // 3.删除属性
    $("div").removeAttr("id");
    // 4.查
    console.log($("div").attr("id"));
            // 第二部分：合法属性
    // 1.增加属性
    $("div").addClass("div1");
    // 要注意：常规的如果增加重复标签属性就是变相的改，但是此处不是改，仍然是增，一个class可以对应多个值！！！
    $("div").addClass("div2");
    // 2.修改属性       得先删然后增，变相的改！
    $("div").removeClass("div1").addClass("div2");
    // 3.删除属性
    $("div").removeClass("div2");
    // 查
    console.log($("div").hasClass("div2"));
    // 注意：如果只是删除属性，那么只是删除了属性对应的属性值，属性名还会存在
    $("div").removeClass("div2");       //就像这样，删的不彻底哎，所以用下面的移除方法：
    $("div").removeAttr("class");       //这样就删除的很彻底了！ 属性名也没了！

            // 遍历
    $("li").each(function () {
        alert($(this).text());                //this代表当前元素。
    });

            //索引                获取当前文本的下标！
    $("li").click(function () {
        alert($(this).index());
    });

            //滚动条事件         scroll()里面写函数，当网页的滚动条发生变化时，执行其内的函数！
    $(window).scroll(function () {
        console.log("顶部："+$(document).scrollTop());         //弹出滚动条相对于浏览器顶部的偏移
        console.log("左边："+$(document).scrollLeft());        //弹出滚动条相对于浏览器左边的偏移
    })

</script>

</body>
</html>

3.基本使用三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ的基本使用三</title>

    <style>
        div{
            position: relative;
        }
    </style>

</head>
<body>

<div>
    <p id="p1">我是段落1 </p>
    <p id="p2">我是段落2 </p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <button id="btn1">移除事件</button>
</div>

<script src="JQuery.js"></script>

<script>
            // 查找父元素
    console.log($("#p1").parent());      //div
            // 查找子元素
    console.log($("div").children());
            // 查找兄弟元素
    console.log($("#p1").siblings());
            // 查找后代元素  必须要指明要查找的是哪个后代，不然查找不到哦！
    console.log($("div").find("p"));
            //查找祖先元素
    console.log($("div").parents());      //body  html

            // 定位父级（绝对定位，参考对象是设置了定位的父级，没有即为浏览器）   当前元素距离它父级的位置，单位是px
    var box = $("#p1").position();    //id为p1的标签的父级是div，而且我们给div设置了定位，所以绝对定位参考对象是div。
    console.log(box.left);            //0px
    console.log(box.top);             //-16px
            //定位窗口            相对于当前文档偏移的坐标！        注意：如果定位父级的父级没有设置定位，那么这两个定位效果一样！
    var box1 = $("div").offset();
    console.log(box1.left);           //8
    console.log(box1.top);            //16

            // 宽高
    console.log($("div").width());
    console.log($("div").height());

            // 循环添加    添加的是事件
    $("p").on("click",function () {
        $(this).css("background-color","red");      //.css是JQ里设置样式的方法
    });
            //移除         移除的也是事件。注意：移除的是后续的事件。
    //比如：下面是通过点击按钮移除上面的循环添加事件，在没有点击按钮之前事件可以执行，如果点击按钮，也只是后续事件，
    //再点击按钮之后事件不能实现，但是之前实现的事件仍存在！
    $("#btn1").click(function () {
        $("p").off("click");
    });

</script>

</body>
</html>

（本人运营微信公众号：孤寒者）（欢迎喜欢Python，喜欢编程的小伙伴们的关注哦~）

第三部分：操作样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ操作样式</title>
</head>
<body>

<div>
    <p id="p1">我是段落1 </p>
    <p id="p2">我是段落2 </p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <button id="btn1">单个样式添加</button>
    <button id="btn2">多个样式添加</button>
</div>

<script src="JQuery.js"></script>

<script>

    // 单个样式的操作方法
    $("#btn1").click(function () {
        $("div").css("color","red");
    });

    // 多个样式的操作方法
    $("#btn2").click(function () {
        $("div").css({
            "width":300,        //注意：不同样式间逗号隔开；宽高之类的默认单位是px，如果加px，需要双引号括住！！！
            "height":400,
            "border":"3px solid bule",
            "color":"red",
        });
    });

</script>

</body>
</html>

第四部分：动画

（效果很明显，实操一步步琢磨琢磨~）

（1） hide（隐藏），show（显示），slideToggle（取反）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>

    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: #ff25ec;
        }
    </style>

</head>
<body>

<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<button id="btn3">按钮三</button>

<div></div>

<script src="JQuery.js"></script>

<script>

           //隐藏(向上隐藏)                都可在括号里加时间，单位是ms！
   $("#btn1").click(function () {
       $("div").hide(1000);
   });
           //显示（向下显示）
   $("#btn2").click(function () {
       $("div").show();
   });

              //取反
   $("#btn3").click(function () {
       $("div").show();
       $("div").slideToggle();          //取反，向下显示取反即向上隐藏
   });

</script>

</body>
</html>

（2）深入讲解—slideUp（向上），slideDown（向下），slideToggle（取反）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>

    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: #ff25ec;
        }
    </style>

</head>
<body>

<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<button id="btn3">按钮三</button>

<div></div>

<script src="JQuery.js"></script>

<script>


           // 向上隐藏
   $("#btn1").click(function () {
       $("div").slideUp();
   });
           //向下显示
   $("#btn2").click(function () {
       $("div").slideDown();
   });

           // 取反操作
   $("#btn3").click(function () {
       $("div").slideDown();
       $("div").slideToggle();         //取反，向下显示取反即是向上隐藏；同理：向上隐藏取反即是向下显示！！！
   });

</script>

</body>
</html>

（本人运营微信公众号：孤寒者）（欢迎喜欢Python，喜欢编程的小伙伴们的关注哦~）

（3）深入讲解—fadeIn（淡入），fadeOut（淡出），fadeToggle（取反）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>

    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: #ff25ec;
        }
    </style>

</head>
<body>

<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<button id="btn3">按钮三</button>

<div></div>

<script src="JQuery.js"></script>

<script>

           //淡出
   $("#btn1").click(function () {
       $("div").fadeOut();
   });
           //淡入
   $("#btn2").click(function () {
       $("div").fadeIn();
   });
           //取反
   $("#btn3").click(function () {
       $("div").fadeOut();
       $("div").fadeToggle(1000);      //取反，淡出取反即是淡入；淡入取反即是淡出！！！
   });

</script>

</body>
</html>

fadeTo（自定义）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义</title>

    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: #ff25ec;
        }
    </style>

</head>
<body>

<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>

<div></div>

<script src="JQuery.js"></script>

<script>

           //自定义
   $("#btn1").click(function () {
       $("div").fadeTo(2000,0.1);      //默认是全显示状态，即为1。可调节范围是：0到1。
   });
   $("#btn2").click(function () {
       $("div").fadeTo(2000,0.8);
   });

</script>

</body>
</html>

（4）深入讲解—animate（动画），stop（停止），delay（延迟）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>

    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: #ff25ec;
        }
    </style>

</head>
<body>

<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>

<div></div>

<script src="JQuery.js"></script>

<script>

         //动画
    $("#btn1").click(function () {
        $("div").animate({              //如果不给设置动画的元素设置定位，那这个元素默认是静态定位，设置动画只会进行元素本身的
            width:500,                  //变化，如果想让元素发生移位，就需要给设置动画的元素设置定位！！！
            height:500
        },2000).delay(3000)            //2000是以多长时间完成这个动画；
    });                                //delay是延迟，在动画途中如果执行停止，再继续执行这个事件，那么就会执行延迟！
            //停止
    $("#btn2").click(function () {
        $("div").stop();
    })

</script>

</body>
</html>