• Javascript知识【jQuery-基本操作】下篇

    目录

    • 💂 个人主页: 爱吃豆的土豆
    • 🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主
    • 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦

    • 🏆人必有所执，方能有所成！

    • 🐋希望大家多多支持😘一起进步呀！

    1，jQuery基本操作

    1.1：基础选择器【重点】

    1.2：动画效果

    1.2.1：普通效果

    1.2.2：自定义动画（扩展）

    2，案例：重新弹出广告

    1，jQuery基本操作

    1.1：基础选择器【重点】

    html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
        <script src="../js/jquery-3.3.1.min.js">script>
        <script>
            /*
                id选择器：获取符合要求的第一个。如果获取不到，对象内容均为undefined
                元素选择器和类选择器：获取到返回jQuery数组，获取不到返回的jQuery数组长度为0
             */
            $(function(){
                //页面加载完成时，获取对应的标签对象
                //获取id为r01的标签对象
                var a1 = $("#r01");
                //alert(a1[0].value);
                //获取标签名为input的标签对象
                var arr = $("input");
                //alert(arr.length);
                //获取class属性值为hehe的标签对象
                var arr2 = $(".hehe");
                alert(arr2.length);
            });

        script>
    head>
    <body>
        <input type="radio" name="hobby" value="敲代码" id="r01"/>
        <input type="radio" name="hobby" value="调试bug" class="hehe"/>
        <input type="radio" name="hobby" value="谈需求" class="hehe"/>
    body>
    html>

    为了更好地获取指定的标签对象

    目标：学会使用jQuery三个基本选择器

    ID选择器            $("#id值")

    元素选择器        $("标签名")

    类选择器            $(".类名") 

    1.2：动画效果

    1.2.1：普通效果

    html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
        <style>
            #d1{
                background-color:lightskyblue;
                width:300px;
                height:300px;
                display: none;
            }
        style>
        <script src="../js/jquery-3.3.1.min.js">script>
        <script>
            //展示
            function run1(){
                //$("#d1").show(500);//单纯展示动画
                //下面回调函数方式：适用于 动画展示完成，回来执行某些代码
                /*$("#d1").show(500,function () {
                    //展示动画完毕，回来调用该函数
                    alert("展示完毕");
                });*/

                //上下滑动
                //$("#d1").slideDown(500);
                //淡入淡出
                $("#d1").fadeIn(500);
            }
            //隐藏
            function run2(){
                //$("#d1").hide(500);
                //上下滑动
                $("#d1").slideUp(500);
            }
            //切换显示/隐藏
            function run3(){
                //$("#d1").toggle(500);
                //上下滑动
                $("#d1").slideToggle(500);
            }
        script>
    head>
    <body>
        <div id="d1">div>
        <input type="button" value="展示" onclick="run1()" />
        <input type="button" value="隐藏" onclick="run2()" />
        <input type="button" value="切换显示/隐藏" onclick="run3()" />
    body>
    html>

    目的：为了掌握基本弹出，收起动画 

    基本效果：（放大缩小滑动） 

     

     

    小结：

    回调函数：某个效果执行完，回来调用执行的函数

    1.2.2：自定义动画（扩展）

    html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
        <style>
            #d1{
                background-color:lightskyblue;
                width:300px;
                height:300px;
                position: absolute;
            }
        style>
        <script src="../js/jquery-3.3.1.min.js">script>
        <script>
            function run1() {
                $("#d1").animate({
                    width:'150px',
                    height:'150px',
                    left:'50px'
                },1000,function () {
                    alert("效果完毕");
                });
            }
        script>
    head>
    <body>
        <div id="d1">div>
        <input type="button" value="自定义动画" onclick="run1()" style="position: absolute"/>
    body>
    html>

     

    2，案例：重新弹出广告

    1. 分析：

    关键点：

    1、页面加载完成时   $(function(){})

    2、定时器    setTimeout(function(){},2000)

    3、获取元素： $("#id")

    4、动画展示： slideDown    slideUp

    步骤：

    1. 页面加载完成时，启动一个弹出广告的定时器
    2. 该定时器2秒后，滑动展示广告页面
    3. 展示完毕后，立刻启动收起广告的定时器
    4. 2秒后，滑动收起广告
    1. 代码实现：

      <script src="../js/jquery-3.3.1.min.js">script>
      <script>
         //1、页面加载完成时，启动一个弹出广告的定时器
         $(function () {
            setTimeout(function () {
               //2、该定时器2秒后，滑动展示广告页面
               $("#ad").slideDown(500,function () {
                  //3、展示完毕后，立刻启动收起广告的定时器
                  setTimeout(function () {
                     //4、2秒后，滑动收起广告
                     $("#ad").slideUp(500);
                  },2000);
               });
            },2000);
         })
      script>

     

    小结：

    1. 获取元素： $("#id");
    2.    slideDown         slideUp

     

  • 相关阅读:
    【FI】采购预付款管理报错“字段BSEG-EBELP在屏幕SAPMF05A0304上不存在”
    ERROR: Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password).
    idea使用技巧、心得1
    elasticsearch 相似度计算
    毕业设计 单片机LSRB算法的走迷宫小车 - 嵌入式 stm32
    2023燕山大学计算机考研信息汇总
    initrd和initramfs的区别
    坚守这50个规则来实现你的目标
    机器学习9—关联分析之Apriori算法和FP-Growth算法
    SkipList(跳表)
  • 原文地址：https://blog.csdn.net/m0_64550837/article/details/126230234