学习要点:

  • 1.创建节点
  • 2.插入节点
  • 3.包裹节点
  • 4.节点操作

DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”。页面中的元素结构就是通过这种节点模型来互相对应着的,通过这些节点关系,可以创建、插入、替换、克隆、删除等等一些列的元素操作。

一.创建节点

为了使页面更加智能化,有时想动态的在 html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点。

  1. var box = $('<div id="box">节点</div>'); //创建一个节点
  2. $('body').append(box); //将节点插入到<body>元素内部

二.插入节点

在创建节点的过程中已经演示怎么通过.append()方法来插入一个节点。但除了这个方法之余呢,jQuery 提供了其他几个方法来插入节点。

  1. $('div').append('<strong>节点</strong>'); //向 div 内部插入 strong 节点

  2. $('div').append(function (index, html) { //使用匿名函数插入节点,html 是原节点
  3.   return '<strong>节点</strong>';
    });

  4. $('span').appendTo('div'); //讲 span 节点移入 div 节点内

  5. $('span').appendTo($('div')); //同上

  6. $('div').prepend('<span>节点</span>'); //将 span 插入到 div 内部的前面

  7. $('div').append(function (index, html) { //使用匿名函数,同上
  8.   return '<span>节点</span>';
  9. });

  10. $('span').prependTo('div'); //将 span 移入 div 内部的前面

  11. $('span').prependTo($('div')); //同上

  1. $('div').after('<span>节点</span>'); //向 div 的同级节点后面插入 span
  2.  
  3. $('div').after(function (index, html) { //使用匿名函数,同上
  4. return '<span>节点</span>';
  5. });
  6.  
  7. $('div').before('<span>节点</span>'); //向 div 的同级节点前面插入 span
  8.  
  9. $('div').before(function (index, html) { //使用匿名函数,同上
  10. return '<span>节点</span>';
  11. });
  12.  
  13. $('span').insertAfter('div'); //将 span 元素移到 div 元素外部的后面
  14.  
  15. $('span').insertBefore('div'); //将 span 元素移到 div 元素外部的前面

三.包裹节点

jQuery 提供了一系列方法用于包裹节点,那包裹节点是什么意思呢?其实就是使用字符串代码将指定元素的代码包含着的意思。

  1. $('div').wrap('<strong></strong>'); //在 div 外层包裹一层 strong
  2. $('div').wrap('<strong>123</strong>'); //包裹的元素可以带内容
  3. $('div').wrap('<strong><em></em></strong>'); //包裹多个元素
  4. $('div').wrap($('strong').get(0)); //也可以包裹一个原生 DOM
  5. $('div').wrap(document.createElement('strong')); //临时的原生 DOM
  6. $('div').wrap(function (index) { //匿名函数
  7. return '<strong></strong>';
  8. });
  9. $('div').unwrap(); //移除一层包裹内容,多个需移除多次
  10. $('div').wrapAll('<strong></strong>'); //所有 div 外面只包一层 strong
  11. $('div').wrapAll($('strong').get(0)); //同上
  12. $('div').wrapInner('<strong></strong>'); //包裹子元素内容
  13. $('div').wrapInner($('strong').get(0)); //DOM 节点
  14. $('div').wrapInner(function () { //匿名函数
  15. return '<strong></strong>';
  16. });

注意:.wrap()和.wrapAll()的区别在前者把每个元素当成一个独立体,分别包含一层外层;后者将所有元素作为一个整体作为一个独立体,只包含一层外层。这两种都是在外层包含,而.wrapInner()在内层包含。

四.节点操作

除了创建、插入和包裹节点,jQuery 还提供了一些常规的节点操作方法:复制、替换和删除节点。

  1. //复制节点
  2. $('body').append($('div').clone(true)); //复制一个节点添加到 HTML 中

注意:clone(true)参数可以为空,表示只复制元素和内容,不复制事件行为。而加上 true参数的话,这个元素附带的事件处理行为也复制出来。

  1. //删除节点
  2. $('div').remove(); //直接删除 div 元素

注意:.remove()不带参数时,删除前面对象选择器指定的元素。而.remove()本事也可以带选择符参数的,比如:$('div').remove('#box');只删除 id=box 的 div。

  1. //保留事件的删除节点
  2. $('div').detach(); //保留事件行为的删除

注意:.remove()和.detach()都是删除节点,而删除后本身方法可以返回当前被删除的节点对象,但区别在于前者在恢复时不保留事件行为,后者则保留。

  1. //清空节点
  2. $('div').empty(); //删除掉节点里的内容
  3. //替换节点
  4. $('div').replaceWith('<span>节点</span>'); //将 div 替换成 span 元素
  5. $('<span>节点</span>').replaceAll('div'); //同上

注意:节点被替换后,所包含的事件行为就全部消失了。

Jquery6 DOM 节点操作的更多相关文章

  1. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  2. (转载)html dom节点操作(获取/修改/添加或删除)

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

  3. 04-老马jQuery教程-DOM节点操作及位置和大小

    1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...

  4. 第一百六十七节,jQuery,DOM 节点操作,DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

  5. 前端JavaScript之DOM节点操作

    1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

  6. Dom节点操作总结

    Dom   一:Dom的概念 Dom的简介:  全称为 document object model  文档对象模型,是操作文档的一整套方法 - 文档 - html,document时一个对象,是dom ...

  7. 第6章 DOM节点操作

    一.创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. varbox=$('<div id="box ...

  8. 通过DOM节点操作来获取表单信息

    这是之前突发奇想地用dom节点的关系来操作表单的故事.. 事情的经过是这样的,大概就是一个平台注册后有留言功能,管理员登录之后可以对这些留言进行回复.这个页面呢,就是通过foreach获取到数据库里的 ...

  9. 原生JS的DOM节点操作

    DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...

随机推荐

  1. QBC检索和本地SQL检索

    细说QBC:QBC(Query By Criteria) 查询:这种方式比较面向对象方式,因为是面向对象,所以查询时参数名就是所查询的类的属性名并不是数据库的表的列名重点是有三个描述条件的对象:Res ...

  2. traceroute tracert 路由器地址 清单 192.168.2.1 网关路由器地址

    [root@a ~]# traceroute www.ijntv.cntraceroute to www.ijntv.cn (42.81.61.31), 30 hops max, 60 byte pa ...

  3. python常见模块之序列化(json与pickle以及shelve)

    什么是序列化? 我们把对象(变量)从内存中变成可存储或传输的过程称之为序列化,在Python中叫pickling,在其他语言中也被称之为serialization,marshalling,flatte ...

  4. flask请求和应用上下文

    关于WSGI WSGI(全称Web Server Gateway Interface),是为 Python 语言定义的Web服务器和Web应用程序之间的一种简单而通用的接口,它封装了接受HTTP请求. ...

  5. myeclipse中更改web项目在tomcat中部署的路径

    右键点击项目名称,选择属性properties,选择myeclipse->web.更改web context-root就可以.

  6. 详解C++中命名空间的意义和用法

    看过鸡啄米的C++编程入门系列教程的朋友,应该能注意到,在其中的很多实例中,都有这么一条语句:using namespace std;,即使用命名空间std,其作用就是规定该文件中使用的标准库函数都是 ...

  7. Linux环境下NodeJS的安装配置(HelloWorld)

    Linux环境下NodeJS的安装配置(HelloWorld) 最简单的环境安装,测试helloworld.给初学者!! 安装脚本,请仔细阅读逐行执行: #!/bin/bash #检查是否已经安装 r ...

  8. 006-Hadoop Hive sql语法详解1-数据结构和Hive表建立

    1.认识hive:  Hive 是基于Hadoop 构建的一套数据仓库分析系统,它提供了丰富的SQL查询方式来分析存储在Hadoop 分布式文件系统中的数据,可以将结构化的数据文件映射为一张数据库表, ...

  9. 配置支持Basler的API函数的开发环境

    第一步:文件说明 使用默认路径安装Basler pylon x86 4.2.1.4845.exe 以后生产的文件如下: 文件说明: apps为用于配置ip和调试相机的软件 bin为驱动程序 CLPro ...

  10. python全栈开发从入门到放弃之socket并发编程之IO模型

    一 IO模型介绍 同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别?这个问 ...