1.append(content|fn)//向每个匹配的元素内部追加内容。

$("p").append("<b>Hello</b>");

2.appendTo(content)//把所有匹配的元素追加到另一个指定的元素元素集合中。

$("p").appendTo("div");

appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,返回值是所有被追加的内容,而不仅仅是先前所选中的元素。所以,要选择先前选中的元素,需要使用end()方法

3.prepend(content)//向每个匹配的元素内部前置内容。

$("p").prepend("<b>Hello</b>");

4.prependTo(content)//把所有匹配的元素前置到另一个、指定的元素元素集合中

$("p").prependTo("#foo");

5.after(content|fn)//在每个匹配的元素之后插入内容。

$("p").after("<b>Hello</b>");
结果:<p>I would like to say: </p><b>Hello</b>

6.before(content|fn)//在每个匹配的元素之前插入内容

$("p").before("<b>Hello</b>");
结果:[ <b>Hello</b><p>I would like to say: </p> ]

8.insertAfter(content)//把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

把所有段落插入到一个元素之后。与 $("#foo").after("p")相同

<p>I would like to say: </p><div id="foo">Hello</div>
$("p").insertAfter("#foo");
<div id="foo">Hello</div><p>I would like to say: </p>

9.insertBefore(content)//把所有匹配的元素插入到另一个、指定的元素元素集合的前面

$("p").insertBefore("#foo");

10.wrap(html|element|fn)//把所有匹配的元素用其他元素的结构化标记包裹起来

$("p").wrap("<div class='wrap'></div>");
$("p").wrap(document.getElementById('content'));
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$('.inner').wrap(function() {
return '<div class=" + $(this).text() + " />';
});
<div class="container">
<div class="Hello">
<div class="inner">Hello</div>
</div>
<div class="Goodbye">
<div class="inner">Goodbye</div>
</div>
</div>

11.unwrap()//这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素(以及他们的同辈元素)会在DOM结构上替换他们的父元素。

<div>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</div>
 $("p").unwrap()
 <p>Hello</p>
<p>cruel</p>
<p>World</p>

12.wrapAll(html|ele)//将所有匹配的元素用单个元素包裹起来

$("p").wrapAll("<div></div>");

$("p").wrapAll(document.createElement("div"));

13.wrapInner(htm|element|fnl)//将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

$("p").wrapInner("<b></b>");

$("p").wrapInner(document.createElement("b"));

<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$('.inner').wrapInner(function() { return '<div class=" + $(this).text() + " />'; });
<div class="container">
<div class="inner">
<div class="Hello">Hello</div>
</div>
<div class="inner">
<div class="Goodbye">Goodbye</div>
</div>
</div>

14.replaceWith(content|fn)//将所有匹配的元素替换成指定的HTML或DOM元素

<p>Hello</p><p>cruel</p><p>World</p>
$("p").replaceWith("<b>Paragraph. </b>");
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

15.replaceAll(selector)//用匹配的元素替换掉所有 selector匹配到的元素。

<p>Hello</p><p>cruel</p><p>World</p>
$("<b>Paragraph. </b>").replaceAll("p");
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

16.empty()//删除匹配的元素集合中所有的子节点

<p>Hello, <span>Person</span> <a href="#">and person</a></p>
$("p").empty();
<p></p>

17.remove([expr])//从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除

<p>Hello</p> how are <p>you?</p>
$("p").remove();
how are

18.detach([expr])//从DOM中删除所有匹配的元素

这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来

<p>Hello</p> how are <p>you?</p>
$("p").detach();
how are


19.clone([Even[,deepEven]])//克隆匹配的DOM元素并且选中这些克隆的副本。
Events Boolean一个布尔值(true 或者 false)指示事件处理函数是否会被复制。V1.5以上版本默认值是:false
deepEven:一个布尔值,指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。

创建一个按钮,他可以复制自己,并且他的副本也有同样功能。

<button>Clone Me!</button>
$("button").click(function(){
$(this).clone(true).insertAfter(this);
});

 

jQuery慢慢啃之文档处理(五)的更多相关文章

  1. jquery获取元素在文档中的位置信息以及滚动条位置(转)

    jquery获取元素在文档中的位置信息以及滚动条位置 http://blog.csdn.net/qq_34095777/article/details/78750886     原文链接 原创 201 ...

  2. jQuery慢慢啃之事件对象(十一)

    1.event.currentTarget//在事件冒泡阶段中的当前DOM元素 $("p").click(function(event) { alert( event.curren ...

  3. jQuery慢慢啃筛选(四)

    1.eq(index|-index) 获取第N个元素 其中负数:一个整数,指示元素的位置,从集合中的最后一个元素开始倒数.(1算起) $("p").eq(1)//获取匹配的第二个元 ...

  4. jQuery慢慢啃之核心(一)

    1. $("div > p"); div 元素的所有p子元素. $(document.body).css( "background", "bla ...

  5. jQuery慢慢啃之属性(三)

    1.attr(name|properties|key,value|fn)设置或返回被选元素的属性值. $("img").attr("src");//获取属性 $ ...

  6. jQuery慢慢啃之选择器(二)

    1.$("#myDiv");ID匹配一个元素 <span id="foo[bar]"></span> $("#foo\\[ba ...

  7. GameUnity 2.0 文档(五) 人工智能之---------------Flocking算法 (聚集,分散,列队 )

    AI是游戏的灵魂,是人物的智商,是让玩家觉得游戏是否幼稚的重要判断功能,下面我将介绍国外流行,国内不行的,ai算法. 主要介绍  Flocking  和 Reciprocal Velocity Obs ...

  8. pyautogui 文档(五):截图及定位功能

    截图函数 PyAutoGUI可以截取屏幕截图,将其保存到文件中,并在屏幕中查找图像.如果您有一个小图像,例如需要单击并希望在屏幕上找到它的按钮,这将非常有用.这些功能由PyScreeze模块提供,该模 ...

  9. jQuery中获取相对文档的坐标的方法是什么?

    offset(),获取匹配元素在当前视口的相对偏移.返回的对象包含两个整型属性:top 和 left,以像素计.此方法只对可见元素有效. position()获取匹配元素相对定位父级的偏移.没有定位父 ...

随机推荐

  1. LINUX系统中动态链接库的创建与使用{补充}

    大家都知道,在WINDOWS系统中有很多的动态链接库(以.DLL为后缀的文件,DLL即Dynamic Link Library).这种动态链接库,和静态函数库不同,它里面的函数并不是执行程序本身的一部 ...

  2. Linux下用户及用户组的管理

    一.用户账号管理 1. 添加新用户账号 命令格式: useradd 选项 用户名 选项含义如下: -c comment 指定一段注释性描述. -d 目录 指定用户主目录,如果此目录不存在,则同时使用- ...

  3. C++之函数指针

    函数指针常用的有三类 1.指向普通函数的函数指针 2.指向类中静态成员函数的函数指针 3.指向类的成员函数的函数指针 一.指向普通函数的函数指针 #include <iostream> u ...

  4. 将cocos的app直接在我的设备上测试运行

    首先,你要有一个写好了的,准备在真机上测试的cocos程序. 1.设置ARC,设置的过程在另外一篇博文上有写. 2.在Target的Build Setting里面 找到Valid Archs 删除里面 ...

  5. How to disable Eclipse splash

    Run eclipse with the -nosplash option.

  6. Apple Pay强势来袭,开发者应做的事情

    "iOS8.1就已经有这个功能了,只是木有现在这么的火,现在的趋势是要火的节奏,因此很多电商平台B2B,P2P,C2C,X2X都有可能需要这个屌丝的付款功能了,在此简单的研究一下." ...

  7. HTTPClient实现java自动登录人人网

    参考网址: https://passport.csdn.net/account/login  http://www.iteye.com/topic/638206 httpClient http://b ...

  8. spring项目中监听器作用-ContextLoaderListener(转)

    1 spring框架的启动入口 ContextLoaderListener 2 作用:在启动Web 容器时,自动装配Spring applicationContext.xml 的配置信息. 因为它实现 ...

  9. JavaCodeTra 猴子选猴王 约瑟夫循环

    之前用的是循环链表,java刚学,不知道怎么用链表.用个小算法吧 代码: import java.util.Scanner; /** * */ /** * @author john * @约瑟夫循环/ ...

  10. linux下ntfs硬盘的加载

    问题:       # mount –t ntfs /dev/sdb1 /mnt/       mount: unknown filesystem type ‘ntfs’       这是由于Cent ...