一.移动元素

1.append():向每个匹配元素的内部追加内容。例如:$("选择器1").qppend("选择器2");将会匹配选择器2的元素,移动到匹配选择器1的内部尾部。

例如:

$("div").append($("p")).addClass("highlight");//添加高亮。

appendTo():将所有匹配的元素追加到指定的元素中//jquery对象发生改变,更改为匹配$("p")元素

append()和appendTo()方法颠倒过来

例如:

$("p").appendTo($("div")).addClass("highlight");//功能与上面相同

2.prepend():向每个匹配的元素内部前置前置内容

prependTo():将所有的匹配元素前置到指定的元素中//内部与内部的前面

3.after():在每个匹配的元素之后插入内容

insertAfter():将所有匹配的元素插入到指定元素的后面

4.before():在每个匹配的元素之前插入内容

insertBefore():将所有匹配的元素插入到指定元素的前面

二、替换元素

replaceWith()方法,可以移动页面上的所有元素来替换当前选定的替换页面的所有元素匹配。

例如:

$(function(){
  $("p").replaceWith("<strong>你好123</strong>");//等同于
  $("<strong>你好123</strong>").replaceAll("p");
})

replaceAll和replaceWith()颠倒过来。

三、包裹节点

1.wrapall()

该方法将所有匹配的元素用一个元素包裹起来

例如:

$("strong").wrapall("<b></b>");是将所有的strong标记外
加上了b标记<p></p>外包裹<b>即是<b><p></p></b>内包裹即是放到里面。

2.wraplnner()

-该方法是将每个匹配元素的子内容(包括文本节点)用其他结构化得标记包裹起来。和上边一样。

例如:

$("strong").wraplnner("<b></b>")可以替换成代码:
<strong><b>你好</b></strong>,b加到strong里面。

四、删除或清空节点

1.remove方法删除。

--将所有匹配的元素删除,例如

$("ul li:eq(1)").remove();

--根据属性删除:

$("ul li").remove("li[title!='ab']");

2.empty清空

--清除节点,它能清除元素中的所有后代节点

$("ul li:eq(1)").empty();回去第二个li元素节点后,清空元素里的内容。

  

javascript-jquery-文档处理的更多相关文章

  1. jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法

    原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp   实例 使用 noConflict() 方法为 jQuery 变量规定新 ...

  2. jQuery文档操作方法对比和src写法

    jQuery文档操作方法对比 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  3. jQuery 文档操作 - prependTo() ,appendTo()方法

    其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...

  4. 转 创建 JavaScript XML 文档注释

    http://www.cnblogs.com/chenxizhang/archive/2009/07/12/1522058.html 如何:创建 JavaScript XML 文档注释 Visual ...

  5. JavaScript : DOM文档解析详解

    JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...

  6. jQuery文档加载完毕的几种写法

    js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...

  7. Javascript自动化文档工具JSDuck在Windows下的使用心得

    作者: zyl910 一.工具比较 为了让前端JavaScript程序更具可维护性,更利于团队开发,文档非常重要.此时便需要使用自动化文档工具了. 我对比了各种JavaScript自动化文档工具,发现 ...

  8. jQuery 文档操作方法

    jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...

  9. JavaScript的文档对象模型DOM

    小伙伴们之前我们讲过很多JavaScript的很多知识点,可以点击回顾一下: <JavaScript大厦之JS运算符>: <JavaScript工作原理:内存管理 + 如何处理4个常 ...

  10. jQuery文档操作

    jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...

随机推荐

  1. Stream流用于按照对象中某一属性来对集合去重+简单数据类型集合的去重

    上次对Stream流来进行分组的文章很多人看,想看的可以来这: Stream流来进行集合分组 这次小编又带来Stream的去重,话不多数,直接上代码: 这是对简单数据类型的去重 //字符串集合进行简单 ...

  2. Mysql常用基础命令操作

    常见操作命令:1.连接Mysql (客户端工具NaviCat.phpMyAdmin.MySQL-Front)格式: mysql -h 主机地址 -u用户名 -p用户密码(1)连接到本机上的MYSQL. ...

  3. tslib移植arm及使用

    测试平台 宿主机平台:Ubuntu 12.04.4 LTS 目标机:Easy-ARM IMX283 目标机内核:Linux 2.6.35.3 tslib 1.4 下载  https://gitlab. ...

  4. k8s资源管理(基础操作)

    1. 基础 本文实操基于k8s 1.22.1 # 可以查看资源分配情况 kubectl describe node # 全局资源情况查看 kubectl api-resources 1.1 apply ...

  5. node实战小例子

    第一章 2020-2-6 留言小本子 思路(由于本章没有数据库,客户提交的数据放在全局变量,接收请求用的是bodyParser, padyParser使用方法 app.use(bodyParser.u ...

  6. gitlab安装CI问题汇总

    0.设置gitlab获取代码的存放位置 vim /etc/gitlab-runner/config.toml 1.unable to access http://gitlab-ci-token:xxx ...

  7. 合并区间 leetcode

    描述: 给出一组区间,请合并所有重叠的区间. 请保证合并后的区间按区间起点升序排列. 输入: [[10,30],[20,60],[80,100],[150,180]] 输出: [[10,60],[80 ...

  8. Apache Dolphin Scheduler - Docker Compose 详解

    Apache DolphinScheduler 是一个分布式去中心化,易扩展的可视化 DAG 工作流任务调度系统.简称 DS,包括 Web 及若干服务,它依赖 PostgreSQL 和 Zookeep ...

  9. centos linux服务器apache+mysql环境访问慢优化方法

    查找软件安装目录:find / -name 软件名称 一.优化apache配置增加MaxClients的值 默认情况下,2.0及以上apache版本MaxClients的值为256,对于中大型应用访问 ...

  10. javascript 比较版本号大小 字符串

    * 不用系统比较大小的函数 // 不考虑字母 function s2i(s) { return s.split('').reduce(function(a, c) { var code = c.cha ...