jQuery入门（三）

这是我参与8月更文挑战的第20天，活动详情查看：8月更文挑战

元素操作

• 创建一个元素

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

• 内部插入元素

  // 向 div 元素中插入一个 p 元素，放在最后
  $('div').append($('<p></p>'))
  
  // 把 p 元素插入到 div 中去，放在最后
  $('<p>hello</p>').appendTo($('div'))
  
  // 向 div 元素中插入一个 p 元素，放在最前
  $('div').prepend($('<p></p>'))
  
  // 把 p 元素插入到 div 中去，放在最前
  $('<p>hello</p>').prependTo($('div'))
  

• 外部插入元素

  // 在 div 的后面插入一个元素 p
  $('div').after($('<p></p>'))
  
  // 在 div 的前面插入一个元素 p
  $('div').before($('<p></p>'))
  
  // 把 p 元素插入到 div 元素的后面
  $('div').insertAfter($('<p></p>'))
  
  // 把 p 元素插入到 div 元素的前面
  $('div').insertBefore($('<p></p>'))
  

• 替换元素

  // 把 div 元素替换成 p 元素
  $('div').replaceWith($('<p></p>'))
  
  // 用 p 元素替换掉 div 元素
  $('<p></p>').replaceAll($('div'))
  

• 删除元素

  // 删除元素下的所有子节点
  $('div').empty()
  
  // 把自己从页面中移除
  $('div').remove()
  

• 克隆元素

  // 克隆一个 li 元素
  // 接受两个参数
  //   参数1： 自己身上的事件要不要复制，默认是 false
  //   参数2： 所有子节点身上的事件要不要复制，默认是 true
  $('li').clone()
  

元素尺寸

• 操作元素的宽和高

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

• 获取元素的内置宽和高

  // 获取 div 元素内容位置的高，包含 padding 不包含 border
  $('div').innerHeight()
  
  // 获取 div 元素内容位置的宽，包含 padding 不包含 border
  $('div').innerWidth()
  

• 获取元素的外置宽和高

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

元素位置

• 元素相对页面的位置

  // 获取 div 相对页面的位置
  $('div').offset() // 得到的是以一个对象 { left: 值, top: 值 }
  
  // 给 div 设置相对页面的位置
  $('div').offset({ left: 100, top: 100 })
  // 获取定位到一个距离页面左上角 100 100 的位置
  

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

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

• 获取页面卷去的高度和宽度

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