前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

jQuery操作DOM(三)

首页
2016-08-07 21:10:08
Front-End
jQuery

# 操作DOM

  • 什么是DOM:Document Object Model缩写,文档对象模型
  • 理解页面的树形结构
  • 什么是节点:是DOM结构中最小单元,包括元素、属性、文本、文档等。

# 创建节点

  • 创建元素

语法:

document.createElement(name);

var div = document.createElement("div");
document.body.appendChild(div);
@前端进阶之旅: 代码已经复制到剪贴板

$(html):根据传递的标记字符串,创建DOM对象

  • 创建文本
var div = document.createElement("div");
var txt = document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);

var $div = = $("<div>DOM</div>");
$(body).append($div);
@前端进阶之旅: 代码已经复制到剪贴板
  • 设置属性
    • 语法:setAttrbute(name,value)
var div = document.createElement("div");
var txt = document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);
div.setAttribute("title","盒子");

var $div = = $("<div title='盒子'>DOM</div>");
$(body).append($div);
@前端进阶之旅: 代码已经复制到剪贴板

# 插入内容

  • 内部插入

    • 向元素最后面插入节点:

      • append():向每个匹配的元素内部追加内容

      • appendTo():把所有匹配的元素追加到指定元素集合中,$("A").append("B&

fe
  • 操作DOM
  • 创建节点
  • 插入内容
  • 删除内容
  • 克隆内容:创建指定节点副本
  • 替换内容

← jQuery动画基础(四)jQuery选择器及优化(二) →