首页 > 其他分享 >jQuery(二)

jQuery(二)

时间：2022-12-15 10:33:08浏览次数：39  
标签：jQuery function 元素 box 添加 click

jQuery - day02

元素位置

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

  • position和offset都可以获取位置

    • 返回的是一个对象

  • 两者获取位置的参照物不同:

    • 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作为选择器即可

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

元素尺寸

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。

看下面一段代码

  <style>
      body {
        padding: 0 30px;
      }
      
      p {
        color: #333;
      }
      
      .outer {
        width: 400px;
        height: 210px;
        margin-top: 15px;
        background-color: pink;
        overflow: hidden;
      }

      .box {
        width: 200px;
        height: 120px;
        padding-bottom: 20px;
        padding-left: 10px;
        border: 10px dashed black;
        margin-left: 20px;
        margin-top: 10px;
        background-color: yellowgreen;
      }
      hr {
        margin: 15px 0;
      }
    </style>
  </head>
  <body>
    <h3>元素大小</h3>
    <p>
      由于 jQuery 对获取元素大小进行了封装，使得获取元素不同形式的大小十分方便。
    </p>
    <div class="outer">
      <div class="box"></div>
    </div>
    <hr />
    <button class="content">内容大小</button>
    <button class="padding">包含内边距大小</button>
    <button class="border">包含边框大小</button>
    <button class="margin">包含外边距大小</button>

    <script src="./jquery/jquery-3.5.1.min.js"></script>
    <script>
      // 1.获取元素内容区域大小
      $('.content').click(function () {
        let width = $('.box').width()
        let height = $('.box').height()
        console.log('width:', width)
        console.log('height:', height)
      })

      // 2.获取元素内容区域 + 内边距大小
      $('.padding').click(function () {
        let width = $('.box').innerWidth()
        let height = $('.box').innerHeight()
        console.log('width:', width)
        console.log('height:', height)
      })

      // 3.获取元素内容区域 + 内边距 + 边框大小
      $('.border').click(function () {
        let width = $('.box').outerWidth()
        let height = $('.box').outerHeight()
        console.log('width:', width)
        console.log('height:', height)
      })

      // 4.获取元素内容区域 + 内边距 + 边框 + 外边距大小
      $('.margin').click(function () {
        let width = $('.box').outerWidth(true)
        let height = $('.box').outerHeight(true)
        console.log('width:', width)
        console.log('height:', height)
      })
    </script>

动画 - 显示&隐藏

hide() 和 show() 方法来隐藏和显示 HTML 元素

语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

toggle()

toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素：

语法：

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

 <body>
    <h3>显示&隐藏</h3>
    <p>jQuery 中封装了元素显示/隐藏的快捷操作，并且支持动画形式的交互效果。</p>

    <button class="show">显示</button>
    <button class="hide">隐藏</button>
    <button class="toggle">显示&隐藏</button>

    <div class="box"></div>

    <script src="./jquery/jquery-3.5.1.min.js"></script>
    <script>
      // 1.show方法
      $('.show').click(function () {
        $('.box').show(1000)
      })
      // 2.hide方法
      $('.hide').click(function () {
        $('.box').hide(1000)
      })
      // 3.toggle方法
      $('.toggle').click(function () {
        $('.box').toggle(3000)
      })
    </script>
  </body>

动画 - 队列及停止

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

 <body>
    <h3>动画队列及停止方法</h3>
    <p>
      通过jQuery为元素设置的多个动画会依次添加到动画队列中,并根据添加的顺序依次播放,可以通过
      <b>stop</b> 方法停止
    </p>
    <button class="add">添加动画</button>
    <button class="stop">停止当前动画</button>
    <button class="stop2">传递1个true</button>
    <button class="stop3">传递2个true</button>
    <div class="box"></div>

    <script src="./jquery/jquery-3.5.1.min.js"></script>
    <script>
      // 1.添加动画
      $('.add').click(function () {
        $('.box')
          .slideUp(4000)
          .slideDown(4000)
          .hide(4000)
          .show(4000)
      })

      // 2.不传递参数 stop()
      $('.stop').click(function () {
        $('.box').stop()
      })

      // 3.传递1个true stop(true)
      $('.stop2').click(function () {
        $('.box').stop(true)
      })

      // 4.传递2个true stop(true,true)
      $('.stop3').click(function () {
        $('.box').stop(true, true)
      })
    </script>

动画 - 淡入&淡出

1.jQuery fadeIn() 用于淡入已隐藏的元素。

语法：

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

2.jQuery fadeOut() 方法用于淡出可见元素。

语法：

$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

3.jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法：

$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

4.jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法：

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

动画 - 展开&收起

jQuery 拥有以下滑动方法：

  • slideDown()

  • slideUp()

  • slideToggle()

jQuery slideDown() 方法用于向下滑动元素。

$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

jQuery slideUp() 方法用于向上滑动元素。

$(selector).slideUp(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$(selector).slideToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

 <body>
    <h3>展开&收起</h3>
    <p>jQuery 中封装了元素显示/隐藏的快捷操作，并且支持动画</p>

    <button class="slide-down">展开</button>
    <button class="slide-up">收起</button>
    <button class="slide-toggle">展开&收起</button>

    <div class="box"></div>

    <script src="./jquery/jquery-3.5.1.min.js"></script>
    <script>
      // 1.slideDown展开
      $('.slide-down').click(function () {
        $('.box').slideDown(4000)
      })
      // 2.slideUp收起
      $('.slide-up').click(function () {
        $('.box').slideUp(4000)
      })
      // 3.slideToggle展开&收起
      $('.slide-toggle').click(function () {
        $('.box').slideToggle(1000)
      })
    </script>

动画 - 自定义动画

jQuery animate() 方法用于创建自定义动画。

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

jQuery animate() - 操作多个属性

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

提示：可以用 animate() 方法来操作所有 CSS 属性吗？

是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

实例 1如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能：

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

事件参数

中如何使用事件参数呢?

我们来学习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')
  })

节点 - 新增

在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. append、prepend 以父元素为参考分别在结尾处和开头处添加新的元素节点
  2. after、before 以当前元素为参考在之前或之后插入新的元素节点
  3. append、prepend、after、before 均支持直接将 html 字符串做为节点插入

节点 - 删除

在jQuery中如何删除节点呢?

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

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

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

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

jQuery empty() 方法删除被选元素的子元素。

$("#div1").empty();

总结：

  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 方法

标签：jQuery,function,元素,box,添加,click
From： https://www.cnblogs.com/guozhenqi/p/16984408.html

相关文章

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99