JQUEY02

最新推荐文章于 2023-07-31 14:28:54 发布

Rouer_jia

最新推荐文章于 2023-07-31 14:28:54 发布

阅读量148

点赞数

分类专栏： JQUERY阶段文章标签：动画 javascript 前端

本文链接：https://blog.csdn.net/Rouer_jia/article/details/122956005

版权

JQUERY阶段专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JQUERY02

作业

<!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>
    <style>
      #menu {
        width: 800px;
        background-color: #002c69;
        user-select: none;
      }
      #menu > span {
        display: inline-block;
        padding: 10px 20px;
        color: white;
        font-size: 1.3em;
      }
      #menu > span.cur {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div id="menu">
      <span class="cur">首页</span>
      <span>关于净美仕</span>
      <span>公司动态</span>
      <span>产品中心</span>
      <span>联系我们</span>
    </div>

    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
      $('#menu>span').click(function () {
        // 为当前点击项添加cur, 为他的兄弟们移除cur
        // 把 this 封装成JQ的对象 $() 才能用JQ的方法
        $(this).addClass('cur').siblings().removeClass('cur')
      })
    </script>
  </body>
</html>

动画切换选中状态

<!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>
    <style>
      #menu {
        width: 800px;
        background-color: #002c69;
        user-select: none;
        /* 为了配合子元素的绝对定位 */
        position: relative;
      }
      #menu > span {
        display: inline-block;
        padding: 10px 20px;
        color: white;
        font-size: 1.3em;
        /* 定位元素: 调整层级 */
        position: relative;
        z-index: 10;
      }
      #menu > .block {
        background-color: orange;
        width: 80px;
        height: 100%;
        /* 定位方式,实现元素之间的层叠 */
        /* 绝对定位 搭配 父元素的 相对定位使用 */
        position: absolute;
        /* 初始值: 靠左, 动画0.3s */
        left: 0;
        transition: 0.3s;
      }
    </style>
  </head>
  <body>
    <div id="menu">
      <!-- 小色块 -->
      <div class="block"></div>
      <span>首页</span>
      <span>关于净美仕</span>
      <span>公司动态</span>
      <span>产品中心</span>
      <span>联系我们</span>
    </div>

    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
      $('#menu>span').click(function () {
        // 能否找到 x,y的值 + 宽和高?
        console.dir(this)
           //   解构语法
        const { offsetLeft, offsetWidth } = this
        // 宽和偏移量 设置给 色块
        $('#menu > .block').css({
          left: offsetLeft,
          width: offsetWidth,
        })
      })
    </script>
  </body>
</html>

还有可能需要修改下边线 height:4px , bottom:0;

输入框相关

<!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>
    <input type="text" value="666" />
    <br />
    <button>读取</button>
    <button>设置</button>

    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
      // ① eq: 有两种语法  $().eq(0) 或 如下:
      $('button:eq(0)').click(function () {
        // val 是 value 的缩写
        console.log($('input').val())
      })
	  // ②
      $('button')
        .eq(1)
        .click(function () {
          // type='text' 可以用 :text 来选择
          $(':text').val('高达555')
          // val 的函数重载:
          // val(): 不带参数是读
          // val(值): 带参数是写
        })
      // ③ 输入框的相关事件:
      // 获得焦点
      $('input').focus(function () {
        console.log('获得焦点')
      })
      // 失去焦点
      $('input').blur(function () {
        console.log('失去焦点')
      })
      // 内容变化: 改->失去焦点
      $('input').change(function () {
        // this.value: 原生DOM的语法
        console.log('内容变化:', this.value)
      })
      // 键盘事件
      $('input').keyup(function (e) {
        console.log('键盘:', e)
        // 回车的 keyCode 13
        if (e.keyCode == 13) console.log('回车')
      })
      // 实时监听: JQ并没有封装所有的DOM事件, 但是提供了万能方法: on(事件名, 函数)
      $('input').on('input', function () {
        console.log(this.value)
      })
    </script>
  </body>
</html>

计数器

<!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>
    <style>
      div {
        display: flex;
      }
      div > input {
        width: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div>
      <button disabled>-</button>
      <input type="text" value="1" />
      <button>+</button>
    </div>

    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
      $('button')
        .eq(1)
        .click(function () {
          // 原生的上一个兄弟: previousElementSibling
          const $inp = $(this).prev()
          console.log($inp)
          // * 1 将值转为数字, 再+1
          const newVal = $inp.val() * 1 + 1
          $inp.val(newVal)
          // 让 减按钮 可用: 不可用 是 假的
          // prop(属性名,值): JQ对象提供的属性设置方式
          $inp.prev().prop('disabled', false)
        })
	//原生DOM写法
      $('button')
        .eq(0)
        .click(function () {
          // 减按钮的 下一个兄弟: next
          const $inp = $(this).next()
          // [0] : 获取JQ对象 $inp 中的序号0的元素 -- 原生DOM
          $inp[0].value--
          // 输入框值为1 则减按钮 无效
          if ($inp.val() == 1) this.disabled = true
        })
     // jq写法
	$('button').eq(0).click(function(){
            const $inp = $(this).next();
            console.log($inp);
            const newVal = $inp.val()*1-1;
            $inp.val(newVal);
            // 输入框值为1 则减按钮 无效
            if ($inp.val() == 1){this.disabled = true} 
        })
      // 如果输入框的值 不是正常的数字, 则变为1
      $('input').change(function () {
        // this.value: 读取输入框的值
        // ^:开头  
        // [1-9]: 1到9之间的数字
        // \d: 任意数字   
        // *:前方元素数量 0个及以上   
        // $:结尾
        const reg = /^[1-9]\d*$/

        // 正则验证: 如果结果不正确, 则值改为1
        if (reg.test(this.value) == false) this.value = 1
        // 如果新的值是 1, 减按钮不可用, 不是1减按钮可用
        $(this).prev().prop('disabled', this.value == 1)
      })
    </script>
  </body>
</html>

动画效果

<!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>
    <style>
      #box {
        width: 100px;
        height: 100px;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div id="box"></div>

    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
      // 显示
      $('button:eq(0)').click(function () {
        	 // $('#box').show();
        // 参数1: 动画速度, 默认是0, 可选值: slow fast 或 毫秒
       		//$('#box').show('slow');
        // 参数2: 动画结束后的回调函数
        $('#box').show('slow', function () {
          alert('已完成显示')
        }) //显示
      })
      // 隐藏
      $('button:eq(1)').click(function () {
          //$('#box').hide();   //隐藏
        $('#box').hide('fast') //隐藏
      })
      // 切换
      $('button:eq(2)').click(function () {
         // $('#box').toggle();
          // $('#box').toggle(2000);
        // 利用回调函数: 实现动画的无限循环
        $('#box').toggle(1000, function () {
          // click: 没有参数, 代表触发点击事件
          $('button:eq(2)').click()
        })
      })
    </script>
  </body>
</html>

滑动动画

<!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>
    <style>
      #box {
        width: 100px;
        height: 100px;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div id="box"></div>

    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
      $('button:eq(0)').click(function () {
        $('#box').slideDown() //展开
      })
      $('button:eq(1)').click(function () {
        $('#box').slideUp() //收起
      })
      $('button:eq(2)').click(function () {
      	//$('#box').slideToggle();
        // 参数1: 动画时长 slow fast 或 毫秒
        // 参数2: 回调函数 -- 动画结束后触发
        $('#box').slideToggle('slow', function () {
          // alert('动画结束')
          // 本次切换效果结束后, 再次触发切换
          // 再次触发 切换按钮的点击事件
          // click(): 没有值, 函数重载中 会实现触发点击事件的效果
          console.log('切换动画已结束, 再次触发切换按钮的事件')
          $('button:eq(2)').click()
        }) //切换
      })
    </script>
  </body>
</html>

透明度动画

<!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>
    <style>
      #box {
        width: 100px;
        height: 100px;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <button>半透明</button>
    <div id="box"></div>

    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
      $('button:eq(0)').click(function () {
        $('#box').fadeIn() //渐入
      })

      $('button:eq(1)').click(function () {
        $('#box').fadeOut() //渐出
      })

      $('button:eq(2)').click(function () {
        // 参数1: 动画时长 -- slow fast 或 毫秒
        // 参数2: 完成时的回调
        $('#box').fadeToggle('slow') //切换
      })

      $('button:eq(3)').click(function () {
        // 参数1: 动画时长 - slow fast 或 毫秒数
        // 参数2: 目标透明度
        $('#box').fadeTo(1000, 0.2)
      })
    </script>
  </body>
</html>

自定义动画

<!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>
    <style>
      #box {
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        position: relative;
      }
    </style>
  </head>
  <body>
    <button>开始动画</button>
    <button>结束动画</button>
    <div id="box"></div>

    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
      // 开始
      $('button:eq(0)').click(function () {
        // 参数1: 动画结束时的css样式
        // 参数2: 动画时长
        // 参数3: 动画完成后的回调
        // 动画序列: 多个动画依次执行
        $('#box')
          .animate({ width: '50px', height: '50px' }, 500)
          .animate({ borderRadius: '50%' }, 1000)
          .animate({ left: '200px', opacity: 0 }, 500, function () {
            //把之前动画修改的值都复原
            $(this).css({
              width: '100px',
              height: '100px',
              borderRadius: 0,
              left: 0,
              opacity: 1,
            })
            // 反复执行:
            $('button:eq(0)').click()
          })
      })
      // JQ不支持: 颜色相关的动画 和 transform相关

      // 停止
      $('button:eq(1)').click(function () {
        // stop(): 默认停止当前进行中的动画, 继续后续的
        // 参数1: 是否停止队列中所有动画, 默认是false
        // 参数2: 停止动画时, 是否直接变为结束时的样子
        $('#box').stop(true, true)
      })
    </script>
  </body>
</html>

轮播图动画

<!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>
    <style>
      #banner {
        display: flex;
        border: 2px solid black;
        width: 200px;
        overflow: hidden;
      }
      /* #banner > img:first-child {
        margin-left: -600px;
      } */
    </style>
  </head>
  <body>
    <div id="banner">
      <img src="./images/1.jpg" alt="" />
      <img src="./images/2.jpg" alt="" />
      <img src="./images/3.jpg" alt="" />
      <img src="./images/4.jpg" alt="" />
    </div>
    <button>上一页</button>
    <button>下一页</button>

    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
      // 代表当前是否可以点击 上一页/下一页
      let canGoNext = true

      // 上一页
      $('button:eq(0)').click(function () {
        if (canGoNext == false) return //如果有锁,则停止操作
        canGoNext = false //进门之后, 上锁

        const $img0 = $('#banner > img:eq(0)')
        const ml = $img0.css('marginLeft')
        console.log(ml)
        $img0.animate(
          {
            marginLeft: ml == '0px' ? '-600px' : '+=200px',
          },
          300,
          function () {
            canGoNext = true //结束后, 开锁
          }
        )
      })

      // 如何确保上厕所的时候安全? -- 蹲坑时 别人进不来
      // 安装门锁
      // 上厕所-> 先判断门锁没锁
      // 如果 锁==true : 等...
      // 如果 锁==false : 进入 并且 把门锁上 -> 完事之后 再开锁

      // 关于: canGoNext 的作用
      // 问题: 多次点击操作, 每次都会触发动画, 如果点击触发的时机是动画正在执行时, 会导致 最后一页的 边距判断失败
      // 解决: 排除掉 动画执行期间的 点击操作
      // 做法: 制作一个变量 canGoNext, 让其在动画期间值保持false, 动画结束后 值为true
      // 点击后 判断 canGoNext, 为false 说明动画在进行中, 就不执行后续代码

      $('button:eq(1)').click(function () {
        // 执行后续代码前: 先判断是否允许
        // 如果不允许 则 终止执行
        if (canGoNext == false) return

        canGoNext = false // 无法继续点击下一页

        //读取当前的marginLeft
        const $img0 = $('#banner>img:eq(0)')
        const ml = $img0.css('marginLeft')
        console.log(ml)
        // 移动 第一张图片的 左侧外边距
        $img0.animate(
          {
            // -= : 当前基础上 -200px
              //marginLeft:'-=200px'
            marginLeft: ml == '-600px' ? 0 : '-=200px',
          },
          300,
            //连点的时候会出现空白, 判定上一次操作结束之后才能 进行下一次操作 - 上厕所
          function () {
            canGoNext = true //开锁, 后续点击可以继续
          }
        )
      })

      // 定时器: 每2s 触发一次下一页
      setInterval(() => {
        // click(): 没有参数, 作用是触发事件 -- 函数重载
        $('button:eq(1)').click()
      }, 2000)
    </script>
  </body>
</html>

数据的动态添加

<!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>
    <button>添加</button>
    <button>添加多个</button>
    <ul></ul>

    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
      $('button:eq(0)').click(function () {
        // 添加子元素: append
        $('ul').append('<li>高达</li>')
      })
      // 加多个
      $('button:eq(1)').click(function () {
        const els = ['<li>亮亮</li>', '<li>暗暗</li>']
        // append: 自动检测参数类型, 如果数组会自动转字符串进行添加
        $('ul').append(els)
      })
    </script>
  </body>
</html>

兄弟元素的添加

<!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>
    <button>前方添加</button>
    <button>后方添加</button>
    <div>111111</div>
    <div id="d2">999999</div>

    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
      //前方
      $('button:eq(0)').click(function () {
        // before: 在...之前
        $('#d2').before('<div>Hello</div>')
      })
      // 后方
      $('button:eq(1)').click(function () {
        // after: 在...之后
        $('#d2').after('<div>World</div>')
      })
    </script>
  </body>
</html>

删除

<!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>
    <button>清空</button>
    <button>删除最后一个</button>
    <div id="box">
      <li>达1</li>
      <li>达2</li>
      <li>达3</li>
      <li>达4</li>
    </div>

    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
      $('button:eq(0)').click(function () {
        // empty: 空的
        $('#box').empty()
      })
      //删除最后一个孩子
      $('button:eq(1)').click(function () {
        // children: 孩子们
        // last: 最后一个      first: 第一个
        // remove: 移除
        // eq(n): n是负数, 代表倒数第几个
        	//$('#box').children().last().remove()
         	//$('#box').children().last().prev().remove();
          // $('#box').children().eq(-2).remove();  倒数第二个
      })
    </script>
  </body>
</html>

委托

<!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>
    <!-- 复习: 冒泡机制 -->
    <!-- 子元素会把自身发生的事件 传递给祖先元素 -->
    <!-- 事件委托: 父元素帮助子元素监听事件 完成操作 -->
    <div id="box">
      <button>高达</button>
      <button>高达</button>
      <b>浪浪浪</b>
      <button>亮亮</button>
      <button>高达</button>
      <button>亮亮</button>
      <button>高达</button>
      <button>亮亮</button>
    </div>

    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
      // 委托: 使用 on 方式添加事件
        $("#box").on('click',function(){
            console.log(this);
        })
      // on: 参数2 可以过滤出想要触发事件的子元素
        $("#box").on('click','button',function(){
            console.log(this);
        })
      //  参数2 的值是选择器
      $('#box').on('click', 'button:contains(高达)', function () {
        // 当添加参数2之后, 函数中this都会发生变化
        // 指向的不再是 id=box;  而是 参数2过滤出来的
        console.log(this)
        $(this).remove()
      })
    </script>
  </body>
</html>

待办事项

<!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>
    <style>
      .cell {
        user-select: none;
        width: 200px;
        border: 1px solid black;
        border-radius: 4px;
        padding: 4px;
        margin-top: 4px;
        display: flex;
        justify-content: space-between;
      }
    </style>
  </head>
  <body>
    <div>
      <input type="text" placeholder="请输入待办事项" />
      <button disabled>确定</button>
    </div>
    <div class="cells">
      <!-- <div class="cell">
        <span>1.吃饭</span>
        <button>删除</button>
      </div> -->
    </div>

    <h1 style="display: none">暂无待办事项</h1>

    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
      const todos = ['吃饭', '睡觉', '打亮亮']
      // 数组映射成 HTML 代码组成的数组: map
      const todos_el = todos.map((value, index) => {
        return `<div class="cell">
                  <span>${index + 1}.${value}</span>
                  <button>删除</button>
                </div>`
      })
      // $('.cells').html(todos_el.join(""))
      $('.cells').append(todos_el)

      // 后续会动态新增很多条数据项, 通过委托实现每个子元素的删除操作:
      $('.cells').on('click', 'button', function () {
        // parent: 父母
          // $(this).parent().remove();
          //$(this).parent().slideUp()
        $(this)
          .parent()
          .slideUp(function () {
            // 隐藏之后: 移除当前元素
            $(this).remove()

            // 如果子元素的个数是0 说明没东西, 显示暂无
            if ($('.cells').children().length == 0) {
              $('h1').show()
            }
          })
      })

      // 确定按钮点击后, 读取输入框的值, 添加到最后面
      $('button:contains(确定)').click(function () {
        const $inp = $(this).prev()

        const el = `<div class="cell">
                      <span>*. ${$inp.val()}</span>
                      <button>删除</button>
                    </div>`

        $('.cells').append(el)
        // 清空输入框的值, 更新成空字符串
        $inp.val('')
        // 让按钮不可点击
        this.disabled = true
        // 隐藏 暂无待办事项
        $('h1').hide()
      })

      // 输入框的值变化时, 应该实时修改确定按钮的不可用状态
      $('input').on('input', function () {
        // 空的时候 不可用是真,  非空就是假
        $(this)
          .next()
          .prop('disabled', this.value == '')
      })

      // 按回车: 13
      $('input').keyup(function (e) {
        if (e.keyCode == 13) {
          //触发与确定按钮点击时 相同的操作
          if (this.value != '') $(this).next().click()
        }
      })
    </script>
  </body>
</html>

作业

待办事项写两遍

Rouer_jia

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQUEY02

JQUERY02作业动画切换选中状态输入框相关计数器动画效果作业<!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, ini
复制链接

扫一扫