一.移动元素

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. Leetcode 146. LRU 缓存机制

    前言 缓存是一种提高数据读取性能的技术,在计算机中cpu和主内存之间读取数据存在差异,CPU和主内存之间有CPU缓存,而且在内存和硬盘有内存缓存.当主存容量远大于CPU缓存,或磁盘容量远大于主存时,哪 ...

  2. 微前端框架single-spa初探

    前言 最近入职的一家公司采用single-spa这个微前端框架,所以自学了此框架. single-spa这个微前端框架虽然有中文文档,但是有些零散和晦涩. 所以我想在学习之余,写篇博客拉平一下这个学习 ...

  3. 菜鸟入门Linux之路(方法论浅谈)

    Linux是为人熟知的OS之王,已"统治"世界.要想学好绝非易事. 作为菜鸟,可以与Linux亲密接触的方法很多,如视频.书籍.各种企培资料等等,如今的在线教育也如火如荼. 总结说 ...

  4. Mybatis(三)——全局配置文件

    二.properties     三.settings 四.typeAilases 这里不做介绍.

  5. HTB Hack The Box -- Oopsiec

    信息收集 开放了22ssh,80端口,其中ssh有弱口令爆破端口 先打开网页,然后进行目录爆破,在这期间先看一下网页的大概信息 没爆到什么有用的东西,但是有uploads文件夹说明是不是说明有文件上传 ...

  6. 通过JDK动态代理实现 Spring AOP

    1.新建一个目标类 接口:public interface IUserService //切面编程 public void addUser(); public void updateUser( ); ...

  7. c# List集合类常用操作:二、增加

    所有操作基于以下类 class Employees { public int Id { get; set; } public string Name { get; set; } public stri ...

  8. LeetCode通关:连刷十四题,回溯算法完全攻略

    刷题路线:https://github.com/youngyangyang04/leetcode-master 大家好,我是被算法题虐到泪流满面的老三,只能靠发发文章给自己打气! 这一节,我们来看看回 ...

  9. ansible 批量安装yum包

    1.首先安装一下ansible yum install ansible 2.修改一下ansible的参数以防ssh过去的时候需要首次判断yes  或者no sed -i 's/#host_key_ch ...

  10. Docker修改容器中的时间

    Docker修改容器中的时间 前言 在公司开发时使用 Docker 创建数据库(SQL Server)的实例十分方便,还原数据库也只要设置好共享文件夹,在 SQL Server Management ...