目录

jQuery操作BOM

获取元素的宽高

获取元素的位置

jQuery操作DOM

jQuery创建节点

jQuery追加节点

jQuery删除节点

jQuery克隆节点和替换节点

jQuery操作BOM

  • jQuery中对BOM的操作 主要是针对三大系列属性

获取元素的宽高

  • width/height
  • 用法：jQuery元素.width()/height()
  • 作用：获取jQuery元素自身的宽高
  • innerWidth/innerHeight
  • 用法：同上
  • 作用：获取元素自身宽高+padding
  • outerWidth/outerHeight
  • 用法1：同上
  • 作用：获取元素自身宽高+padding+border
  • 用法2：jQuery元素.outerWidth(true)/outerHeight(true)
  • 作用：自身宽高+padding+border+margin

获取元素的位置

  • offset
  • 用法：jQuery元素.offset();
  • 作用：得到的结果是一个对象 对象中 包含当前jQuery元素的位置数据 这个位置是相对于 整个页面的位置
  • position
  • 用法：同上
  • 作用：得到的结果是一个对象 对象中 包含当前jQuery元素的位置数据 这个位置是相对于 带定位父元素进行计算的 如果没有带定位父元素 则相对于body进行计算
  • scrollTop
  • 用法：jQuery元素.scrollTop()
  • 作用：获取元素内容被卷去的高度
  • 用法：jQuery元素.scrollTop(数字)
  • 作用：将元素内容被卷去的高度 设置为指定数字

jQuery操作DOM

jQuery创建节点

  • 用法：$("html内容")
  • 作用：创建出指定html内容的节点

jQuery追加节点

  • append
  • append
  • 用法：jQuery父元素.append(要追加的子元素)
  • 作用：将子元素追加到 父元素的末尾
  • appenTo
  • 用法：jQuery子元素.appendTo(jQuery父元素)
  • 作用：同上
  • prepend
  • 用法：jQuery父元素.prepend(要追加的子元素)
  • 作用：将子元素追加到 父元素的开头
  • prependTo
  • 用法：jQuery子元素.prependTo(jQuery父元素)
  • 作用：同上
  • insert
  • insertBefore
  • 用法：新子节点.insertBefore(旧子节点)
  • 作用：将新子节点 追加到旧子节点前面
  • before
  • 用法：旧子节点.before(新子节点)
  • 作用：同上
  • insertAfter
  • 用法：新子节点.insertAfter(旧子节点)
  • 作用：将新子节点 追加到旧子节点后面
  • after
  • 用法：旧子节点.after(新子节点)
  • 作用：同上；

jQuery删除节点

  • remove
  • 用法：jQuery元素.remove()
  • 作用：移除当前的jQuery元素
  • detach
  • 用法：jQuery元素.detach();
  • 作用：移除当前的jQuery元素
  • empty
  • 用法：jQuery元素.empty()
  • 作用：清空当前jQuery元素的内容
  • remove 和 detach的区别
  • remove移除掉的元素 会连同元素的事件 一并移除掉
  • detach移除掉的元素 则会保留元素的事件

jQuery克隆节点和替换节点

  • clone
  • 用法：jQuery元素.clone()
  • 作用：将jQuery元素 复制下来 浅克隆 无法克隆 元素的事件
  • 用法2：jQuery元素.clone(true)
  • 作用：将jQuery元素 复制下来 深克隆 可以克隆到 元素的事件
  • replaceWith
  • 用法：jQuery元素.replaceWith(用来替换的新节点)
  • 作用：使用新节点 替换 jQuery元素
  • replaceAll
  • 用法：用来替换的新节点.replaceAll(jQuery元素)
  • 作用：同上