JQuery(二)

jQuery - day02

今天是jQuery的第二天哦

课程介绍

今天重点学点啥呢?

首先有案例:

  1. **待办事项:**用来巩固元素的增删改查

在这里插入图片描述

  1. **爱旅行:**用来巩固位置操作,动画效果

在这里插入图片描述

  1. 腾讯前端首页-滚动效果1

在这里插入图片描述

还有很多需要掌握的知识点哦:

元素位置

jQuery中如何获取元素位置呢?

  • positionoffset都可以获取位置

    • 返回的是一个对象
  • 两者获取位置的参照物不同:

    • offset始终参照的是html
    • position参照的有定位属性的最近祖先元素
  • 对于margin两者的处理也不相同

    • offset忽略
    • position会累加margin
  • 如果要设置位置的话只能通过offset方法

总结:

  1. offset方法和position方法哪个参考的是html?

    offset方法,position方法参考的是最近并且有定位的祖先元素

  2. offset方法和position方法哪个可以用来设置位置?

    offset方法可以设置位置,但是没有动画效果

  3. 如果元素有margin哪个方法会一起计算进去呢?

    offset会把margin也计算进去,而position不会

滚动距离

jQuery中如何获取滚动距离呢?

  • 获取元素滚动距离
$('选择器').scrollTop()
$('选择器').scrollLeft()
  • 获取网页的滚动距离
$('html').scrollTop()
$('html').scrollLeft()
  • 设置滚动距离
$('html').scrollTop(值)
$('html').scrollLeft(值)

小结:

  1. 对于内容可以滚动的元素可以通过scrollTop或者scrollLeft获取滚动距离,如何获取网页的滚动距离呢?

    html作为选择器即可

调用scrollTopscrollLeft方法可以让元素滚到指定位置,但是并没有动画效果,咱们先用这个,今天晚一些的时候就会学习动画啦,别着急

demo - 腾讯全端

完成腾讯全端案例

  • 腾讯全端首页的需求有:
    • 顶部变色
    • 返回顶部
  • 分析并实现顶部变色效果
  • 分析并实现返回顶部效果

小结:

  1. 如何注册滚动事件?

    通过$(window).scroll()注册

  2. 如何获取页面滚动距离?

    通过$('html').scrollTop()

功能搞定了,但是元素的显示隐藏和返回顶部并没有动画,缺少灵魂,别着急等我们学完了动画效果就来给他注入灵魂!!!

动画 - 显示&隐藏

如何使用jQuery的显示隐藏动画

  1. 如何使用show方法
  2. 如何使用hide方法
  3. 如何使用toggle方法
  4. 方法中的this
  5. 动画的持续时间
  6. 动画效果
  7. 调优demo

动画 - 队列及停止

如果为元素叠加了多种动画会依次按顺序执行,如果不要这么做可以手动停止他们

动画 - 淡入&淡出

如何使用jQuery的显示隐藏动画

  1. 如何使用show方法
  2. 如何使用hide方法
  3. 如何使用toggle方法
  4. 方法中的this
  5. 动画的持续时间
  6. 动画效果
  7. demo中使用淡入淡出效果

动画 - 展开&收起

如何使用jQuery的展开收起动画

  1. 如何使用slideDown方法
  2. 如何使用slideUp方法
  3. 如何使用slideToggle方法
  4. 本质是修改了哪个样式
  5. 方法中的this
  6. 动画的持续时间
  7. 动画效果
  8. demo中使用淡入淡出效果

动画 - 自定义动画

如何使用jQuery中的自定义动画

demo - 爱旅行

通过目前所学的知识完成爱旅行这个案例

  1. 回到顶部显示隐藏
  2. 回复客服效果
  3. 轮播图
  4. 回复轮播

事件参数

中如何使用事件参数呢?

hello,同学们好!

​ 我们来学习jQuery中的事件对象,有时候也称之为事件参数,大伙爱叫啥就叫啥.日常开发中使用的频率还行,他在触发事件时为咱们额外提供了一些信息,和功能:比如事件的触发对象,用来阻止冒泡,阻止默认行为什么的.

​ 用法和webapi阶段基本一致,咱们来看看

// 语法
$('选择器').事件(function(event){})
// 比如 点击事件
$('选择器').click(function(event){})
// 比如 键盘抬起事件
$('选择器').keyup(function(event){})

​ 去浏览器中测试一下.

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模板页</title>
    <style>
      body {
        padding: 0 30px;
      }

      p {
        color: #333;
      }
      .box {
        width: 200px;
        height: 100px;
        background-color: pink;
        padding: 20px;
        text-align: center;
        border-radius: 10px;
      }

      input {
        margin: 10px;
      }
      button {
        width: 100%;
        height: 30px;
      }
    </style>
  </head>
  <body>
    <h2>事件对象</h2>
    <p>事件触发时额外提供给开发者的信息,可以用来干不少事情哦</p>
    <div class="box">
      <a href="http://www.itheima.com/">黑马程序员</a>
      <input type="text" />
      <br />
      <button>点我</button>
      <br />
    </div>
    <script src="./jquery/jquery-3.5.1.min.js"></script>
    <script>
    </script>
  </body>
</html>

最外层盒子绑定点击事件,查看触发源

  $('.box').click(function (event) {
    console.log('event.target:',event.target)
    console.log('box-click')
  })

阻止a的默认行为

  $('a').click(function (event) {
    event.preventDefault()
  })

判断键盘按键

  $('input').keyup(function (event) {
    console.log('keyCode:',event.keyCode)
    if (event.keyCode === 13) {
      console.log('按下回车')
    }
  })

阻止冒泡

  $('button').click(function (event) {
    event.stopPropagation()
    console.log('button-click')
  })

小结一下

事件对象:

  • 也可以叫做事件参数用法和webapi阶段学习的基本一致
  • 在事件触发时额外传递给开发者中的信息和功能
  • 可以通过它获取触发源,实现阻止默认行为等功能

节点 - 新增

jQuery中如何新增(插入)节点

用法01-基于创建的jQuery对象进行添加

// 基于html创建jQuery对象
let $a = $('<a href="#">超链接</a>')
// 添加jQuery对象
// 在父元素末尾添加
$('选择器').append($a)
// 在父元素开头添加
$('选择器').prepend($a)
// 在兄弟元素之前添加
$('选择器').before($a)
// 在兄弟元素之后添加
$('选择器').after($a)

用法02-直接添加html结构

// 直接添加html结构
// 在父元素末尾添加
$('选择器').append('html结构')
// 在父元素开头添加
$('选择器').prepend('html结构')
// 在兄弟元素之前添加
$('选择器').before('html结构')
// 在兄弟元素之后添加
$('选择器').after('html结构')

去测试一下:

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery-day02</title>
    <style>
      body {
        padding: 0 30px;
      }

      p {
        color: #333;
      }
      .container {
        overflow: hidden;
        background-color: pink;
      }
      img {
        margin: 10px;
        float: left;
      }
    </style>
  </head>
  <body>
    <h3>节点操作</h3>
    <p>jQuery 中封装了在指定位置动态添加元素节点的方法。</p>
    <div class="insert">
      <button class="append">父元素结尾添加</button>
      <button class="prepend">父元素开头添加</button>
      <button class="before">兄弟元素前添加</button>
      <button class="after">兄弟元素后添加</button>
    </div>
    <hr />
    <div class="container">
      <img
        class="Amumu"
        src="http://game.gtimg.cn/images/lol/act/img/champion/Amumu.png"
      />
      <img
        class="Teemo"
        src="http://game.gtimg.cn/images/lol/act/img/champion/Teemo.png"
        alt=""
      />
      <img
        class="Kennen"
        src="http://game.gtimg.cn/images/lol/act/img/champion/Kennen.png"
      />
    </div>
    <script src="./jquery/jquery-3.5.1.min.js"></script>
  </body>
</html>

**首先是:**父元素结尾添加

 // 父元素结尾添加
  $('.append').click(function () {
    $('.container').append(
      `<img class="Ziggs" src="http://game.gtimg.cn/images/lol/act/img/champion/Ziggs.png" alt="">`
    )
  })

**接下来:**父元素开头添加

  // 父元素开头添加
  $('.prepend').click(function () {
    $('.container').prepend(
      ` <img class="Poppy" src="http://game.gtimg.cn/images/lol/act/img/champion/Poppy.png" alt=""> `
    )
  })

**然后:**兄弟元素前面添加

  // 兄弟元素前添加
  $('.before').click(function () {
    $('.Teemo').before(
      `<img class="Ezreal" src="http://game.gtimg.cn/images/lol/act/img/champion/Ezreal.png" alt="">`
    )
  })

**最后:**兄弟元素末尾添加

  // 兄弟元素后添加
  $('.after').click(function () {
    $('.Teemo').after(
      `<img class="Lulu" src="http://game.gtimg.cn/images/lol/act/img/champion/Lulu.png" alt=""> `
    )
  })

小结一下:

  1. appendprepend 以父元素为参考分别在结尾处和开头处添加新的元素节点
  2. afterbefore 以当前元素为参考在之前或之后插入新的元素节点
  3. appendprependafterbefore 均支持直接将 html 字符串做为节点插入

节点 - 删除

jQuery中如何删除节点呢?

不同于webapi中需要通过父元素才可以删除自己,jQuery中直接就可以把自己给删咯

// 删除自己
$('选择器').remove();

为上一节的案例增加点击删除功能

$('img').click(function(){
	$(this).remove()
})

新增的img无法删除自己,原因是为img绑定点击事件时默认只能找到页面中现有的标签,点击按钮动态添加的可是没有点击事件的哦,咱们一会再来解决

总结:

  1. remove 方法删除的是当前调用方法的元素节点

节点 - 克隆

jQuery中如何基于现有的节点进行克隆(复制)呢?

jQuery 中封装了复制(克隆)元素节点的方法,其用法如下代码所示:

<script>
    // 通过复制获得新的节点 拷贝事件
  $('选择器').clone(true);
   // 通过复制获得新的节点 不拷贝事件
  $('选择器').clone(false);
</script>

通过jQuery的克隆语法来解决上一节的小问题

总结:

  1. clone 方法复制得到的元素节点仍是 jQuery 对象
  2. 待复制的节点中如果有事件监听,需要为 clone 方法传入参数 true

事件委托

jQuery中如何使用事件委托呢?

jQuery 中封装了事件委托的支持,其用法如下代码所示:

  // on 方法内置支持事件委托
  $('祖先元素').on('事件名', '后代选择器', function () {
   
  })

使用事件委托来解决之前删除的小问题

总结:

  1. 事件委托需要为某个在 DOM 中已经存在的祖先元素添加事件监听
  2. delegate 方法是 jQuery 中专门的事件委托的方法
  3. on 方法中也内置支持事件委托,推荐使用 on 方法

todoList01- 需求交接

今天最后一个收尾案例,通过todoList来完成,重点练习增删改查

todoList02 - 新增

实现案例中的新增功能

todoList03 - 删除

实现案例中的删除功能

todoList04 - 全选反选

实现案例中的全选和反选功能

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值