前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版

jQuery之DOM操作小结

首页2017-01-14 10:20:43Front-End
jQueryDOM

# 一、过滤器


# 1 匹配指定元素的父


  • elem.parent([exp])

# 2 匹配指定元素的子元素


  • elem.children([exp])

# 3 匹配指定元素的父、祖元素…


  • elem.parents([exp])

# 4 匹配指定元素的子、孙元素…


  • elem.find([exp])

# 5 匹配指定元素的后一个兄弟元素


  • elem.next([exp])

# 6 匹配指定元素的后面所有兄弟元素


  • elem.nextAll([exp])

# 7 匹配指定元素的前一个兄弟元素


  • elem.prev([exp])

# 8 匹配指定元素的前面所有兄弟元素


  • elem.prevAll([exp])

# 9 匹配指定元素的所有兄弟元素


  • elem.siblings([exp])

# 10 匹配指定以外的元素


  • elem.not(exp)

# 11 包括自身在内的全部元素


  • elem.andSelf()

# 12 返回指定索引值的元素


  • elem.eq(index)

# 13 判断元素是否包含指定的类


  • elem.hasClass(className)

# 二、文档处理


# 1 在指定元素内的未尾追加一个子元素


  • 语法 : Elem.append(ele)

# 2 把元素的追加到指定父级元素内的末尾


  • 语法 : ele.appendTo(Elem)
  • 说明 : 要求ele必须为JQuery元素,可以通过Elem.children(‘:last’)引用

# 3 在指定元素内的开始添加一个子元素


  • 语法 : Elem.prepend(ele)

# 4 把元素的加入指定父级元素内的开始


  • 语法 : ele.prependTo(Elem)
  • 说明 : 要求ele必须为JQuery元素,可以通过Elem.children().eq(0)引用

# 5 使元素逐一被指定的HTML标记包裹起来


  • 语法 : Elem.wrap(Tag)
  • 说明: Tag将成为元素的父元素,可以通过Elem.parent() 引用

# 6 使元素集合被指定的HTML标记包裹起来


  • 语法 : Elem.wrapAll(Tag)
  • 说明: wrap把每个子元素逐一都包裹起来,wrapAll是把所有的子元素作为整体包裹起来。

# 7 包裹指定元素的子元素,相当于在元素和子元素中间加了隔离层


  • 语法 : elem.wrapInner(Tag)

# 8 在元素之后添加兄弟元素。新添加的元素可以通过elem.next() 引用。


  • 语法 : elem.after(ele)

# 9 在元素之前添加兄弟元素。新添加的元素可以通过elem.prev() 引用。


  • 语法 : elem.before(ele)

# 10 将元素A移动到元素B之后


  • 语法 : elA.insertAfter(elB)

# 11 将元素A移动到元素B之前


  • 语法 : elA.insertBefore(elB)

# 12 清空元素的子节点(元素本身及其属性仍然存在)


  • 语法 : elem.empty()

# 13 从DOM中删除所有匹配的元素


  • 语法 : elems.remove([条件])

# 14 将元素A替换为B


  • 语法 : elA.replaceWith(elB);
fe
  • 一、过滤器
    • 1 匹配指定元素的父
    • 2 匹配指定元素的子元素
    • 3 匹配指定元素的父、祖元素…
    • 4 匹配指定元素的子、孙元素…
    • 5 匹配指定元素的后一个兄弟元素
    • 6 匹配指定元素的后面所有兄弟元素
    • 7 匹配指定元素的前一个兄弟元素
    • 8 匹配指定元素的前面所有兄弟元素
    • 9 匹配指定元素的所有兄弟元素
    • 10 匹配指定以外的元素
    • 11 包括自身在内的全部元素
    • 12 返回指定索引值的元素
    • 13 判断元素是否包含指定的类
  • 二、文档处理
    • 1 在指定元素内的未尾追加一个子元素
    • 2 把元素的追加到指定父级元素内的末尾
    • 3 在指定元素内的开始添加一个子元素
    • 4 把元素的加入指定父级元素内的开始
    • 5 使元素逐一被指定的HTML标记包裹起来
    • 6 使元素集合被指定的HTML标记包裹起来
    • 7 包裹指定元素的子元素,相当于在元素和子元素中间加了隔离层
    • 8 在元素之后添加兄弟元素。新添加的元素可以通过elem.next() 引用。
    • 9 在元素之前添加兄弟元素。新添加的元素可以通过elem.prev() 引用。
    • 10 将元素A移动到元素B之后
    • 11 将元素A移动到元素B之前
    • 12 清空元素的子节点(元素本身及其属性仍然存在)
    • 13 从DOM中删除所有匹配的元素
    • 14 将元素A替换为B

← 原生JS与jQuery操作DOM对比javascript常用积累 →