jQuery_day01

最新推荐文章于 2026-01-06 19:45:54 发布
原创 最新推荐文章于 2026-01-06 19:45:54 发布 · 387 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #javascript #前端

jQuery01

DOM: Document Object Model

  • 利用JS来操作网页的技术 – 实际开发中,必须定制化为网站开发功能
  • 缺点: 原生的系统API 使用起来过于繁琐

jQuery: 一款对DOM封装之后 得到的框架, 出生于2006年

  • 秉承着 write less, do more 的理念而生 – 写的少,做的多

  • 官网: https://jquery.com/

  • 脚本下载地址: https://jquery.com/download/

    在这里插入图片描述

  • 学习方式: 查看文档 来掌握API的用法

    https://jquery.cuishifeng.cn/

css

<!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>css 09:21</title>
  </head>
  <body>
    <!-- css方法:  -->
    <ul>
      <li>泡泡</li>
      <li>铭铭</li>
      <li>亮亮</li>
    </ul>

    <script src="./jquery-3.6.1.min.js"></script>
    <script>
      // 原理: 参考DOM最后一天的 Query 理论
      // 通过封装操作, 把查询出来的元素 换了个别的原型
      // 之前查询到的原型是 NodeList -- 方法极少
      console.log(document.querySelectorAll('li'))
      // $: 作者封装的函数, 简化了查询操作的代码

      console.dir($('li')) //查看原型

      // 简单的查找元素, 自动遍历完成操作
      $('li').css('color', 'red')
      // css: 可以遍历查询到的元素, 挨个修改其style

      // 练习:
      // 为每个li 添加 border : '1px solid green'
      $('li').css('border', '1px solid green')

      // 为每个li 添加 margin-bottom: 10px
      $('li').css('margin-bottom', '10px')
      // 简化: 直接写数字, 底层会自动拼接 px 做单位
      $('li').css('padding', 10)

      // 作者大量采用 函数重载 方案来制作 多功能函数
      // 函数的实参 个数 或 类型不同, 执行不同的代码逻辑

      // 参数仅有1个 且 是对象类型, 则可以设置多个属性
      $('li').css({
        background: 'orange',
        // 对象类型的属性名, 不支持  -
        // 解决方案两种: 1. 用字符串   2. 改小驼峰
        'border-radius': 10,
        fontSize: 30,
      })

      // 如果 1个参数 且 是字符串类型, 则会读取第一个元素的样式
      var size = $('li').css('font-size')
      console.log(size)
    </script>
  </body>
</html>

click

<!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>点击事件 10:05</title>
  </head>
  <body>
    <ul>
      <li>泡泡</li>
      <li>铭铭</li>
      <li>亮亮</li>
    </ul>

    <script src="./jquery-3.6.1.min.js"></script>
    <script>
      // 自动遍历 为每个元素绑定 click 事件
      $('li').click(function () {
        console.log(this)
        // 原生
        this.style.color = 'red'
        // JQ: $(元素) - 把元素放到JQ对象里管理, 拥有强大的原型
        console.log($(this))
        $(this).css('border', '2px solid red')
      })
    </script>
  </body>
</html>

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>class操作 10:17</title>
  <link rel="stylesheet" href="./reset.css" />
  <style>
    ul {
      display: flex;
    }

    li {
      padding: 10px 20px;
      user-select: none;
    }

    li.active {
      background-color: orange;
    }
  </style>
</head>

<body>
  <ul>
    <li>泡泡</li>
    <li>亮亮</li>
    <li>铭铭</li>
    <li>小新</li>
  </ul>

  <!-- ctrl+回车:  快速开启新的一行 -->
  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    $('li').click(function () {
      // $(this).addClass('active') //添加
      // $(this).toggleClass('active') //切换

      // 唯一性:
      // siblings: 兄弟姐妹们 --  当前元素的所有兄弟元素
      console.log($(this).siblings())
      // 当前元素.添加类.兄弟元素们.移除类
      $(this).addClass('active').siblings().removeClass('active')
    })
  </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>练习 10:36</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    ul {
      background-color: #002c69;
      padding: 0 20px;
      display: flex;
      user-select: none;
    }

    ul>li {
      cursor: pointer;
      padding: 10px 25px;
      color: white;
    }

    ul>li.active {
      background-color: orange;
    }
  </style>
</head>

<body>
  <ul>
    <li class="active">首页</li>
    <li>关于净美仕</li>
    <li>公司动态</li>
    <li>产品中心</li>
    <li>联系我们</li>
  </ul>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    $('li').click(function () {
      $(this).addClass('active').siblings().removeClass('active')
    })
  </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>显示与隐藏 10:52</title>
  <style>
    #box {
      background-color: orange;
      width: 300px;
      height: 300px;
      margin-top: 10px;
    }
  </style>
</head>

<body>
  <button>显示</button>
  <button>隐藏</button>
  <button>切换</button>

  <div id="box"></div>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    console.log($('button'))
    // 从查询结果中 筛选 出指定序号的元素: eq(序号)
    // equal: 等于
    console.log($('button').eq(1))

    // 隐藏
    $('button').eq(1).click(function () {
      // 本质: 利用 style.display = 'none' 实现
      $('#box').hide()  //hide:隐藏
    })

    // 显示
    $('button').eq(0).click(function () {
      $('#box').show()
    })

    // 切换
    $('button').eq(2).click(function () {
      $('#box').toggle()
    })
  </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>弹出菜单 11:26</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    #menu {
      background-color: #f9f9fb;
      border: 1px solid #aaa;
      padding: 10px;
      margin: 3px;
      position: relative;
    }

    #menu>ul {
      position: absolute;
      background-color: #f9f9fb;
      border: 1px solid #aaa;
      top: calc(100% + 5px);
      padding: 10px;
      display: none;
    }
  </style>
</head>

<body>
  <div id="menu">
    <button>中文</button>
    <ul>
      <li>English</li>
      <li>日本语</li>
      <li>韩语</li>
      <li>中文(简体)</li>
    </ul>
  </div>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    $('#menu>button').click(function () {
      // 下一个兄弟: next
      $(this).next().toggle()
    })
  </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>菜单 11:39</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    #menu {
      width: 300px;
    }

    #menu>li {
      padding: 10px;
      border-bottom: 1px solid #bbb;
    }

    #menu>li>div {
      padding: 10px 0;
      user-select: none;
    }

    #menu>li>ul {
      margin-left: 20px;
      display: none;
    }

    #menu>li>ul>li {
      padding: 5px 0;
    }
  </style>
</head>

<body>
  <ul id="menu">
    <li>
      <div>开发</div>
      <ul>
        <li>基于JS开发</li>
        <li>基于Java开发</li>
      </ul>
    </li>
    <li>
      <div>示例教程</div>
      <ul>
        <li>示例代码</li>
        <li>Codelabs</li>
        <li>视频教程</li>
      </ul>
    </li>
    <li>
      <div>示例教程</div>
      <ul>
        <li>示例代码</li>
        <li>Codelabs</li>
        <li>视频教程</li>
      </ul>
    </li>
    <li>
      <div>示例教程</div>
      <ul>
        <li>示例代码</li>
        <li>Codelabs</li>
        <li>视频教程</li>
      </ul>
    </li>
  </ul>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    $('#menu div').click(function () {
      // slide: 带有滑动动画的切换
      // 多次点击: 动画会排队执行, 应该在执行新的动画之前 停止旧的
      // stop: 用于停止动画
      // 参数1: 可以定制动画时长, 单位毫秒  1000毫秒 = 1秒
      $(this).next().stop().slideToggle(200)
    })
  </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>弹窗广告 14:03</title>
  <style>
    #popup {
      position: fixed;
      bottom: 0;
      right: 0;
      width: 150px;
      padding: 10px;
      background-color: #eee;
    }

    #dialog {
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, .2);
      /* 层级确保最高 */
      z-index: 1000;
      /* 让子元素居中 */
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #dialog>div {
      width: 300px;
      padding: 10px;
      border-radius: 10px;
      background-color: white;
    }
  </style>
</head>

<body>
  <div id="popup">
    <button>关闭</button>
    <br>
    原来装备真能还钱啊,装备回收,找一基友,提现到手,我系渣渣辉,贪玩蓝月,来到就是赚到, 是兄弟就来砍我
  </div>

  <!-- 全屏弹窗 -->
  <div id="dialog">
    <div>
      <button>x</button>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dolore ullam architecto fugit obcaecati
        neque vero molestias quia voluptate quae, illo, error ex explicabo laudantium voluptatem. Expedita inventore
        dicta consequatur.</p>
    </div>
  </div>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    $('#popup>button').click(function () {
      // slideUp: 滑动收起
      // 收起来以后, 过段时间 再出来
      // 参数2: 动画结束后的回调函数
      $(this).parent().slideUp(1000, function () {
        // 定时器: 3秒后 再展开
        // 回调函数中的this 指向触发当前动画的元素, 即parent
        setTimeout(() => {
          $(this).slideDown()
        }, 3000);
      })
    })

    // 初始隐藏:
    $('#dialog').hide()

    setTimeout(() => {
      $('#dialog').show()
    }, 3000);

    $('#dialog button').click(function () {
      $('#dialog').hide()
    })
  </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>渐变动画隐藏 14:37</title>
  <style>
    #box>div:last-child>img {
      border: 4px solid #7a7a7a;
      border-radius: 0 16px;
    }

    #box>div:last-child>img.active {
      border-color: orange;
    }

    #box>div:first-child {
      width: 600px;
      height: 300px;
      position: relative;
    }

    #box>div:first-child>img {
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      top: 0;
    }
  </style>
</head>

<body>
  <div id="box">
    <div>
      <img src="./imgs/bigskin-1.jpg" alt="">
      <img src="./imgs/bigskin-2.jpg" alt="">
      <img src="./imgs/bigskin-3.jpg" alt="">
      <img src="./imgs/bigskin-4.jpg" alt="">
      <img src="./imgs/bigskin-5.jpg" alt="">
    </div>
    <div>
      <img class="active" src="./imgs/smallskin-1.jpg" alt="">
      <img src="./imgs/smallskin-2.jpg" alt="">
      <img src="./imgs/smallskin-3.jpg" alt="">
      <img src="./imgs/smallskin-4.jpg" alt="">
      <img src="./imgs/smallskin-5.jpg" alt="">
    </div>
  </div>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    // 初始化状态: 让第一张图显示, 其他图隐藏
    // 规范: 如果JQ对象, 则推荐 变量名用 $ 开头, 见名知意
    var $imgs = $('#box>div:first-child>img')

    $('#box>div:last-child>img').mouseover(function () {
      $(this).addClass('active').siblings().removeClass('active')

      // index(): 获取元素 在兄弟们中的序号
      const i = $(this).index()
      console.log(i)
      // 根据当前序号,获取对应的大图, 让其显示
      // $imgs.eq(i).show().siblings().hide()
      // fade: -- 通过透明度效果来隐藏和显示
      // in: 渐入-显示  out: 渐出 - 隐藏
      $imgs.stop().eq(i).fadeIn().siblings().fadeOut()
    })

    $imgs.eq(0).show().siblings().hide()






  </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>自定义动画 15:35</title>
  <style>
    #box {
      width: 100px;
      height: 100px;
      position: relative;
      background-color: orange;
    }
  </style>
</head>

<body>
  <!-- JQ提供了最常见的: 滑动 和 透明度 两种动画 -->
  <button>开始</button>
  <button>停止</button>

  <div id="box"></div>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    const $box = $('#box')

    $('button').eq(0).click(function () {
      // animate: 动画
      // 参数1: 动画的目标效果
      $box.animate({ top: 100, borderRadius: '50%' })
      // 动画队列: 多个动画会排队执行
      $box.animate({ left: 200, top: 50 })
      // 设置时长, 参数2  单位毫秒  1000毫秒 = 1秒
      $box.animate(
        { left: 0, borderRadius: 0, top: 0 },
        2000
      )
    })

    //////////////////////////////
    // 停止
    $('button').eq(1).click(function () {
      // stop: 默认停止当前动画, 开始队列中的其他动画
      // 参数1: 是否清空队列, 默认false 不清空
      // 参数2: 是否在停止后, 直接跳转到最终状态, 默认false
      $box.stop(true, true)
    })

    // JQ只适合比较简单的动画, 不支持 颜色 和 transform 相关
    // 如果复杂动画: 推荐用 animation 关键帧动画
  </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>属性操作 15:59</title>
</head>

<body>
  <!-- 属性分类: -->
  <!-- 1. 系统属性: 比如 href target -->
  <!-- 
    2. 自定义属性
    -- 旧方案: 随便写 - suibian
    -- 新方案: 用 data- 声明 
   -->
  <a href="http://tmooc.cn" target="_blank" suibian="随便" data-x="88" data-shi-yu="bug王子">Tmooc</a>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    // 系统属性: 用 prop 方法
    const $a = $('a')
    console.log($a.prop('href'), $a.prop('target'))

    // data- 声明的, 用 data 方法
    console.log($a.data('x'))
    console.log($a.data('shiYu'))

    // 通用方法: attr  读取所有方式声明的属性
    console.log($a.attr('href'))
    console.log($a.attr('data-x'))
    console.log($a.attr('data-shi-yu'))
    console.log($a.attr('suibian'))

    // 修改
    $a.prop('href', 'http://baidu.com')
    // 自定义属性修改: 只能用attr
    $a.attr('data-x', 1000)

  </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>练习 16:31</title>
  <style>
    #box>div>img {
      border: 3px solid gray;
      width: 70px;
    }

    #box>div>img.active {
      border-color: orange;
    }
  </style>
</head>

<body>
  <div id="box">
    <img src="./imgs/1_lg.jpg" alt="">
    <div>
      <!-- 利用自定义属性, 在小图上保存对应的大图地址 -->
      <img data-lg="./imgs/1_lg.jpg" class="active" src="./imgs/1_sm.jpg" alt="">
      <img data-lg="./imgs/2_lg.jpg" src="./imgs/2_sm.jpg" alt="">
      <img data-lg="./imgs/3_lg.jpg" src="./imgs/3_sm.jpg" alt="">
      <img data-lg="./imgs/4_lg.jpg" src="./imgs/4_sm.jpg" alt="">
      <img data-lg="./imgs/5_lg.jpg" src="./imgs/5_sm.jpg" alt="">
    </div>
  </div>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    $('#box>div>img').mouseover(function () {
      $(this).addClass('active').siblings().removeClass('active')
      // 自定义属性 data-lg  用data方法
      const lg = $(this).data('lg')
      console.log(lg)
      // 设置给 大图的 src 属性 -- 系统属性用prop
      $('#box>img').prop('src', lg)
    })
  </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>练习 16:51</title>
</head>

<body>
  <div id="banner">
    <img src="./imgs/banner1.png" alt="">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</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>inner</title>
</head>

<body>
  <div id="box1">
    <a href="">Hello World!</a>
  </div>

  <div id="box2">Hello World!</div>

  <ul></ul>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    // 0个参数: 读取
    console.log($('#box1').html()) // innerHTML
    console.log($('#box1').text()) // innerText

    // 1个参数: 设置
    $('#box1').html('<h1>你好</h1>') //当成html解析
    $('#box2').text('<h1>你好</h1>') //作为文本展示

    // 函数重载: 如果参数的类型是数组, 则会自动拼接成字符串
    const names = [
      '<li>泡泡</li>', '<li>亮亮</li>', '<li>铭铭</li>',
    ]

    // 使用时不需要写 .join(), 会自动完成拼接
    $('ul').html(names)
  </script>
</body>

</html>

get请求

<!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>get 17:34</title>
</head>

<body>
  <ul></ul>

  <!-- Ajax 原生的方案 最少要4个步骤 -->
  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    // 在 $ 函数中, 作者存储了大量的易用的方法, 包括与网络请求相关的, 例如 get post ajax 等...
    console.dir($)

    const url = 'http://douyu.xin88.top/api/cate/recList'

    // 原理: 参考之前课程中封装过的 get 方法 -- JS高级第四天
    // 参数1: 接口地址     参数2: 成功后的回调函数
    $.get(url, data => {
      console.log(data)

      $('ul').html(
        data.data.map(item => `<li>${item.name}</li>`)
      )
    })
  </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>练习 17:46</title>
</head>

<body>
  <ul></ul>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    const url = 'https://web.codeboy.com/mfresh/data/news_select.php'

    $.get(url, data => {
      console.log(data);

      $('ul').html(
        data.data.map(item => `<li>${item.title}</li>`)
      )
    })
  </script>
</body>

</html>
java_ajax_JQuery_day01.pdf
05-08
java_ajax_JQuery_day01.pdf
java_ajax_JQuery_day02.pdf
05-08
java_ajax_JQuery_day02.pdf
JQuery_day01
big_lu的博客
11-20 305
正课: 什么是jQuery 如何使用jQuery 查找 什么是jQuery jQuery是第三方提供的执行DOM操作的极简化的函数库 第三方: 先下载，才能用 执行DOM操作: 学jQuery还是在学DOM的增删改查，事件绑定 极简化: jQuery是对DOM API的终极简化 函数库: jQuery是用函数解决一切问题！ 为什么: 2个主要原因: API极简化: 4个方面:...
JavaWeb_day5_JQuery01
weixin_42062397的博客
09-26 257
  1.使用jquery书写定时弹出广告 &lt;script type="text/javascript" src="js/jquery-1.8.3.js"&gt;&lt;/script&gt; &lt;script&gt; $(function() { //书写广告图片的定时操作 time = setInterval("showAd()", 3000); ..
jQuery day_01(7.12)
m0_70328115的博客
07-14 204
样式操作-style、点击事件、class操作、显示与隐藏、动画效果、轮播图、属性操作
Jquery-day01
weixin_50519232的博客
04-26 1589
jquery是一个js工具库，它是对js的封装形成工具类。 jquery选择器： 一. jquery操作DOM 1.如何获取dom get()获取到的是一个dom对象 console.log($("tr").get(1)); jquery转dom jq[0] dom转化为jquery $(js对象) con...
jQuery-Day01 基础
weiweianx的博客
02-04 220
jQuery-Day01基础 JavaScript库是一个封装号的特定的集合（方法和函数）。 常见的库有jQuery、YUI、Dojo、Ext Js、zeptol（移动端）； 都是对原生js的封装。 jQuery 宗旨：“write less， Do More" 学习jQuery，重在学会调用其内部函数 优点：核心文件齐全；跨浏览器兼容；链式编程，隐式迭代；对事件、样式、动画支持；支持插件扩展开发；免费、开源。 官网：”https://jQuery.com“; 选择版本： 1x: 支持IE678低
jQuery学习day01
li的博客
08-25 197
1、jQuery介绍 2、使用与安装 1.本地js文件 $与jQuery都代表jQuery，使用时没有任何区别 2.cdn bootcdn在线引用的方式使用 在使用cdn引入的时候，必须联网 3、基本使用 4、基本语法 1.选择器 2.事件绑定 3.DOM操作 4.设置属性方法 ...
jQuery 01day 初识jQuery
qq_54088653的博客
05-01 226
jquery学习 目录 jquery学习 01 day 初识jQuery jQuery的两把利器 jQuery的核心函数 01 day 初识jQuery 是什么？ 为什么用？ 怎么用？ what: http://jquery.com 一个优秀的js函数库：封装了 Bom和Dom why: html元素选取（选择器） html元素处理 css操作 html事件处理 js动画效果 链式调用 读写合一 .
前端学习笔记_Day 01
weixin_61145501的博客
06-26 222
mongodb 数据库。Uniapp Hybrid 混合开发。Typescript JS的超集。Nodejs – 后端语言。
jQuery day01
lzw995189944的博客
12-05 744
1. 什么是:jQuery (1). 第三方开发的:必须下载才能用 (2). 执行DOM操作的:jQuery还是执行DOM的增删改查+事件绑定操作。学习jQuery只是学习DOM的延续而已。 (3). 极简化的:jQuery对DOM操作的每一步都进行了简化。 (4). 函数库:jQuery中都是用函数来解决一切问题。 2. 为什么:2个原因: (1). 简单 (2). 解决了大部分浏览器兼容性问题。只要jQuery让用的，几乎都没有兼容性问题。 3. 何...
day46_jquery_组件开发
优快云_AF的博客
04-14 1273
1Js的组件开发1.1基本组件的开发1.1.1树的组件的开发1.1.1.1开发基本的组件1、以jquery插件的形式开发(function($){ })($);2、因为要用继承的形式实现具体的树，所以整个组件采用json格式的写法 createTree: function(config){ //var treeObj = this;//把this赋值给当前变量
CoreJava_day05_all.zip_JavaScript/JQuery_Java_
08-11
在本压缩包“CoreJava_day05_all.zip”中，主要涵盖了JavaScript、jQuery以及Java的基础知识，这些都是编程领域中至关重要的技术。以下是这些技术的详细解释： **JavaScript**： JavaScript是一种广泛应用于网页和...
5-4_JQuery使用_Day05_pm.mp4
04-02
5-4_JQuery使用_Day05_pm.mp4
5-1_JQuery使用_Day05_AM.mp4
04-02
5-1_JQuery使用_Day05_AM.mp4
Vue 2 项目中 template 使用可选链 ?. 导致的诡异编译报错及 webpack loader 配置坑
GhostPaints的博客
01-05 814
最近在维护一个基于 Vue 2 的老项目（RuoYi-Vue 框架衍生）时，遇到一个特别诡异的编译问题：同一个项目，使用 pnpm run dev（连接测试环境）一切正常，但切换到 pnpm run dev:local（连接本地后端）时，启动就直接报错，错误信息指向 template 中的可选链运算符?这让我百思不得其其解——Vue 2.7 明明官方支持 template 中的?.，为什么本地环境就炸了？。
前端组件级权限控制
最新发布
马优晨
01-06 207
前端组件级权限控制通过统一管理权限数据，采用声明式或编程式方式在组件层面进行校验。核心方案包括：1）指令式控制（适合按钮/小组件），通过自定义指令如v-permission实现；2）组件封装式控制（适合通用组件），封装<Permission>容器组件；3）编程式控制（适合复杂逻辑），在JS中直接判断权限。所有方案都需配合后端接口校验防止权限篡改，并适配不同框架如Vue、React和Angular。关键点是先规范权限数据管理，再选择适合的控制方式，同时确保后端兜底校验。
vue3中使用element-plus的el-scrollbar实现自动滚动（横向/纵横滚动）
qq_43730272的博客
12-31 417
vue3中使用element-plus的el-scrollbar实现自动滚动（横向/纵横滚动）
22-mini-vue props
weixin_57142035的博客
01-04 175
【代码】22-mini-vue props。
jQuery-dayin实现跨浏览器打印功能
在描述中提到的“jQuery-dayin调用浏览器打印”，很可能是指一个特定的jQuery插件或脚本，该插件名为“dayin”。通过下载这个“dayin”文件，开发者可以快速实现跨浏览器的打印功能而不需要自己从头开始编写代码。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值