jQuery-day02

元素位置

jQuery中position和offset可以用来获取位置

返回的都是一个对象
两者获取位置的参照物不同:
- offset始终参照的是html
- position参照的是有定位属性的最近祖先元素
对于margin两者的处理不同
- offset忽略
- position会累加margin
如果要设置位置的话只能通过offset方法

滚动距离

通过.scrollTop()和.scrollLeft()方法可以获取滚动距离，通过给该方法传值也可以操纵页面滚动到指定位置。

获取元素滚动距离

$('选择器').scrollTop()
$('选择器').scrollLeft()

获取网页的滚动距离

$('html').scrollTop()
$('html').scrollLeft()

设置滚动距离

$('html').scrollTop(值)
$('html').scrollLeft(值)

注册滚动事件通过$(window).scroll()注册

动画

显示隐藏动画

显示隐藏动画是三种方法:

.show()是显示动画方法
.hide()是隐藏动画方法
.toggle()是切换动画方法

// 1.show方法
      $('.show').click(function () {
        $('.box').show(1000)
      })
      // 2.hide方法
      $('.hide').click(function () {
        $('.box').hide(1000)
      })
      // 3.toggle方法
      $('.toggle').click(function () {
        $('.box').toggle(3000)
      })

方法中的this是dom对象，可以在方法内传入参数，这里的参数代表的是持续时间，单位是ms。

淡入&淡出

使用jQuery实现淡入淡出动画效果的方法

淡入：.fadeIn()
淡出：.fadeOut()
淡入&淡出：.fadeToggle()

三种方法都可以传入参数，参数值为动画持续时间

      // 1.fadeIn 淡入
      $('.fade-in').click(function () {
        $('.box').fadeIn(2000)
      })

      // 2.fadeOut 淡出
      $('.fade-out').click(function () {
        $('.box').fadeOut(2000)
      })

      // 3.fadeToggle 淡入&淡出
      $('.fade-toggle').click(function () {
        $('.box').fadeToggle(2000)
      })

展开&收起

使用jQuery实现展开&收起动画效果的方法

      // 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)
      })

队列及停止

动画执行是有队列的，在为元素添加动画时，假如动画执行持续时间长，而用户操作反复触发动画。此时会将叠加的动画依次按顺序执行。

但是，在需要的时候，我们是可以通过.stop()方法来停止动画执行的。

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

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

      // 3.传递2个true stop(true,true)
      $('.stop3').click(function () {
        $('.box').stop(true, true)
      })

.stop()方法有三种用法，一种是不传递参数，此时会停止当前动画(所以假如当前只有一个动画，则直接停止)，继续执行后续动画。第二种是传递一个true，此时会停止在当前动画位置,并清除后续动画。第三种是传递两个true，此时会直接清除所有动画。

自定义动画

使用jQuery实现自定义动画效果的方法

使用.animate()方法，参数值可传入需要修改的样式，以对象的形式存入。

动画的回调函数

动画的回调函数，在动画执行完后马上执行。

所有jQuery的动画方法都支持传入回调函数，回调函数的位置永远是在最后一个参数。

简单动画中传入两个参数，第一个是动画持续时间，第二个是回调函数。

自定义动画中传入三个参数，第一个是自定义样式（以对象形式传入），第二个是持续时间，第三个是回调函数。

    // 1.简单动画的回调函数
    $('.simple').click(function () {
      $('.box').fadeOut(2000, function () {
        console.log('淡出啦!')
        console.log('this:', this)
      })
    })

    // 2.自定义动画的回调函数
    $('.animate').click(function () {
      $('.box').animate({ width: 400 }, 2000, function () {
        console.log('变宽啦!')
        console.log('this:', this)
        $(this).css('backgroundColor', 'pink')
      })

    })

动画的延迟方法

动画不仅可以设置持续时长，还可以让动画在执行前延迟一段时间，利用的是.delay()方法。

      $('.animate').click(function () {
        $('.box')
          .delay(2000)
          .fadeOut()
          .delay(2000)
          .slideDown()
      })

以上代码中，点击完以后，延迟两秒淡出，再延迟两秒展开。

插入节点

父元素结尾插入节点：.append()

父元素开头插入节点：.prepend()

兄弟元素前插入节点：.before()

兄弟元素后插入节点：after()

      // 1.父元素结尾插入节点
      $('.insert .append').click(function () {
        // 创建dom元素
        // let img = document.createElement('img')
        // img.src = './img/旺财.jpg'
        // // console.log(img)
        // $('.container').append(img)

        // html结构
        $('.container').append('<img src="./img/旺财.jpg" alt="">')
      })

      // 2.父元素开头插入节点
      $('.insert .prepend').click(function () {
        // html结构
        $('.container').prepend('<img src="./img/旺财.jpg" alt="">')
      })

      // 3.兄弟元素前插入节点
      $('.insert .before').click(function () {
        // html结构
        $('.Teemo').before('<img src="./img/旺财.jpg" alt="">')
      })

      // 4.兄弟元素后插入节点
      $('.insert .after').click(function () {
        // html结构
        $('.Teemo').after('<img src="./img/旺财.jpg" alt="">')
      })

      // 5.移动到父元素结尾
      $('.move .append').click(function () {
        // dom元素
        // $('.container').append(document.querySelector('.doge'))
        // jQuery对象
        $('.container').append($('.doge'))
      })
      // 6.移动到父元素开头
      $('.move .prepend').click(function () {
        // jQuery对象
        $('.container').prepend($('.doge'))
      })

      // 7.移动到兄弟元素前面
      $('.move .before').click(function () {
        // jQuery对象
        $('.Teemo').before($('.doge'))
      })

      // 8.移动到兄弟元素后面
      $('.move .after').click(function () {
        // jQuery对象
        $('.Teemo').after($('.doge'))
      })

删除节点

删除节点可以使用.remove()方法

      // 1.删除自己
      $('.remove').click(function () {
        $(this).remove()
      })

      // 2.删除父元素
      $('.remove-box').click(function () {
        $(this)
          .parent()
          .remove()
      })
//这里虽然是删除父元素，但实际上使用的方法和删除自己没区别，只不过是通过使用了.parent()方法找到父元素然后再删除而已.

获取尺寸

获取尺寸有四种不同的方式,四种方式获取到的大小也有所不同

获取元素内容区域大小

.width()

.height()
获取元素内容+内边距大小

innerWidth()

innerHeight()
获取元素内容+内边距+边框大小

outerWidth()

outerHeight()
获取元素内容+内边距+边框+外边距大小

outerWidth(true)

outerHeight(true)

      // 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)
      })

事件参数

      // 1. 事件触发对象
      $('.outer').click(function (event) {
        // console.log(event)
        console.log('outer-click')
      })

      // 2. 阻止冒泡
      $('.box').click(function (e) {
        console.log('box-click')
        e.stopPropagation()
      })

      // 3. 阻止默认行为
      $('a').click(function (e) {
        e.preventDefault()
      })

      // 4. 判断键盘按键
      $('input').keyup(function (e) {
        console.log(e.keyCode)
      })
//回车键的keyCode为13

事件委托

通过事件委托可以减少事件注册,可以对动态添加的后代元素也可以实现控制,事件委托的原理是事件冒泡。

      // 1.减少事件注册
      // $('.dog').click(function () {
      //   $(this).remove()
      // })
      $('.box').on('click', '.dog', function () {
        // console.log(this)
        $(this).remove()
      })

      // 2.新增后代元素的事件绑定
      $('.add').click(function () {
        $('.box').append('<img class="doge" src="./img/旺财2.jpg" alt="" />')
      })
      $('.box').on('click', '.doge', function () {
        console.log(this)
      })

      // 3.原理是事件冒泡
      $('.dog').click(function (e) {
        e.stopPropagation()
      })

本文含有隐藏内容，请开通VIP 后查看

jQuery学习笔记02