jQuery

  • 昨天讲了 jQuery 的基本选择器筛选器和属性操作
  • 今天来说一些 jQuery 别的东西

元素操作

  • 创建一个元素

    1. var div = $('<div></div>')

  • 内部插入元素 ```javascript // 向 div 元素中插入一个 p 元素，放在最后 $(‘div’).append($(‘

    ‘))

// 把 p 元素插入到 div 中去，放在最后 $(‘

hello

‘).appendTo($(‘div’))

// 向 div 元素中插入一个 p 元素，放在最前 $(‘div’).prepend($(‘

‘))

// 把 p 元素插入到 div 中去，放在最前 $(‘

hello

‘).prependTo($(‘div’))

  2. - 外部插入元素
  3. ```javascript
  4. // 在 div 的后面插入一个元素 p
  5. $('div').after($('<p></p>'))
  7. // 在 div 的前面插入一个元素 p
  8. $('div').before($('<p></p>'))
  10. // 把 p 元素插入到 div 元素的后面
  11. $('div').insertAfter($('<p></p>'))
  13. // 把 p 元素插入到 div 元素的前面
  14. $('div').insertBefore($('<p></p>'))
  • 替换元素 ```javascript // 把 div 元素替换成 p 元素 $(‘div’).replaceWith($(‘

    ‘))

// 用 p 元素替换掉 div 元素 $(‘

‘).replaceAll($(‘div’))

  2. - 删除元素
  3. ```javascript
  4. // 删除元素下的所有子节点
  5. $('div').empty()
  7. // 把自己从页面中移除
  8. $('div').remove()
  • 克隆元素
    1. // 克隆一个 li 元素
    2. // 接受两个参数
    3. //   参数1： 自己身上的事件要不要复制，默认是 false
    4. //   参数2： 所有子节点身上的事件要不要复制，默认是 true
    5. $('li').clone()

元素尺寸

  • 操作元素的宽和高 ```javascript // 获取 div 元素内容位置的高，不包含 padding 和 border $(‘div’).height() // 设置 div 内容位置的高为 200px $(‘div’).height(200)

// 获取 div 元素内容位置的宽，不包含 padding 和 border $(‘div’).width() // 设置 div 内容位置的宽为 200px $(‘div’).width(200)

  2. - 获取元素的内置宽和高
  3. ```javascript
  4. // 获取 div 元素内容位置的高，包含 padding 不包含 border
  5. $('div').innerHeight()
  7. // 获取 div 元素内容位置的宽，包含 padding 不包含 border
  8. $('div').innerWidth()
  • 获取元素的外置宽和高 ```javascript // 获取 div 元素内容位置的高，包含 padding 和 border $(‘div’).outerHeight() // 获取 div 元素内容位置的高，包含 padding 和 border 和 margin $(‘div’).outerHeight(true)

// 获取 div 元素内容位置的宽，包含 padding 和 border $(‘div’).outerWidth() // 获取 div 元素内容位置的高，包含 padding 和 border 和 margin $(‘div’).outerWidth(true)

  2. <a name="d4f25e0f"></a>
  3. ## 元素位置
  5. - 元素相对页面的位置
  6. ```javascript
  7. // 获取 div 相对页面的位置
  8. $('div').offset() // 得到的是以一个对象 { left: 值, top: 值 }
  10. // 给 div 设置相对页面的位置
  11. $('div').offset({ left: 100, top: 100 })
  12. // 获取定位到一个距离页面左上角 100 100 的位置

  • 元素相对于父元素的偏移量

    1. // 获取 div 相对于父元素的偏移量（定位的值）
    2. $('div').position()

  • 获取页面卷去的高度和宽度 ```javascript window.onscroll = function () { // 获取浏览器卷去的高度 console.log($(window).scrollTop()) }

window.onscroll = function () { // 获取浏览器卷去的宽度 console.log($(window).scrollLeft()) }

  2. <a name="47bdbcd3"></a>
  3. ## 元素事件
  5. - 绑定事件的方法
  6. ```javascript
  7. // 给 button 按钮绑定一个点击事件
  8. $('button').on('click', function () {
  9.     console.log('我被点击了')
  10. })
  12. // 给 button 按钮绑定一个点击事件，并且携带参数
  13. $('button').on('click', { name: 'Jack' }, function (e) {
  14.     console.log(e) // 所有的内容都再事件对象里面
  15.     console.log(e.data) // { name: 'Jack' }
  16. })
  18. // 事件委托的方式给 button 绑定点击事件
  19. $('div').on('click', 'button', function () {
  20.     console.log(this) // button 按钮
  21. })
  23. // 事件委托的方式给 button 绑定点击事件并携带参数
  24. $('div').on('click', 'button', { name: 'Jack' }, function (e) {
  25.     console.log(this) // button 按钮
  26.     console.log(e.data)
  27. })
  • 移除事件 ```javascript // 给 button 按钮绑定一个 点击事件，执行 handler 函数 $(‘button’).on(‘click’, handler)

// 移除事件使用 off $(‘button’).off(‘click’, handler)

  2. - 只能执行一次的事件
  3. ```javascript
  4. // 这个事件绑定再 button 按钮身上
  5. // 当执行过一次以后就不会再执行了
  6. $('button').one('click', handler)
  • 直接触发事件
    1. // 当代码执行到这里的时候，会自动触发一下 button 的 click 事件
    2. $('button').trigger('click')

可以直接使用的常见事件

  • 可以直接使用的事件就是可以不利用 on 来绑定，直接就可以使用的事件方法
  • click ```javascript // 直接给 div 绑定一个点击事件 $(‘div’).click(function () { console.log(‘我被点击了’) })

// 给 div 绑定一个点击事件并传递参数 $(‘div’).click({ name: ‘Jack’ }, function (e) { console.log(e.data) })

  2. - `dblclick`
  3. ```javascript
  4. // 直接给 div 绑定一个双击事件
  5. $('div').dblclick(function () {
  6.     console.log('我被点击了')
  7. })
  9. // 给 div 绑定一个双击事件并传递参数
  10. $('div').dblclick({ name: 'Jack' }, function (e) {
  11.     console.log(e.data)
  12. })
  • scroll ```javascript // 直接给 div 绑定一个滚动事件 $(‘div’).scroll(function () { console.log(‘我被点击了’) })

// 给 div 绑定一个滚动事件并传递参数 $(‘div’).scroll({ name: ‘Jack’ }, function (e) { console.log(e.data) })

  2. - `hover`
  3. ```javascript
  4. // 这个事件要包含两个事件处理函数
  5. // 一个是移入的时候，一个是移出的时候触发
  6. $('div').hover(function () {
  7.     console.log('我会再移入的时候触发')
  8. }, function () {
  9.     console.log('我会在移出的时候触发')
  10. })

动画

  • show ```javascript // 给 div 绑定一个显示的动画 $(‘div’).show() // 如果元素本身是 display none 的状态可以显示出来

// 给 div 绑定一个显示的动画 // 接受三个参数 // $(‘div’).show(‘毫秒’, ‘速度’, ‘回调函数’) $(‘div’).show(1000, ‘linear’, function () { console.log(‘我显示完毕’) })

  2. - `hide`
  3. ```javascript
  4. // 给 div 绑定一个隐藏的动画
  5. $('div').hide() // 如果元素本身是 display block 的状态可以隐藏起来
  7. // 给 div 绑定一个显示的动画
  8. // 接受三个参数
  9. // $('div').show('毫秒', '速度', '回调函数') 
  10. $('div').hide(1000, 'linear', function () {
  11.     console.log('我隐藏完毕')
  12. })
  • toggle ```javascript // 给 div 绑定一个切换的动画 $(‘div’).hide() // 元素本身是显示，那么就隐藏，本身是隐藏那么就显示

// 给 div 绑定一个显示的动画 // 接受三个参数 // $(‘div’).show(‘毫秒’, ‘速度’, ‘回调函数’) $(‘div’).toggle(1000, ‘linear’, function () { console.log(‘动画执行完毕’) })

  2. - `animate`
  3. ```javascript
  4. // 定义一个自定义动画
  5. $('.show').click(function () {
  6.     $('div').animate({
  7.         width: 500,
  8.         height: 300
  9.     }, 1000, 'linear', function () {
  10.         console.log('动画运动完毕')
  11.     })
  12. })

  • stop

    1. // 立刻定制动画
    2. $('div').stop() // 就停止再当前状态

  • finish

    1. // 立刻结束动画
    2. $('div').finish() // 停止在动画结束状态