1.append()

向每个匹配的元素内部追加内容

HTML代码:

<p>我想说:</p>

jQuery代码:

$('p').append('<b>你好</b>');

结果:

<p>我想说:<b>你好</b></p>

2.appendTo()

将所有匹配的元素追加到指定的元素中。实际上,使用该方法是颠倒了常规$(A).append(B)的操作,既不是将B追加到A中,而是将A追加到B中

HTML代码:

<p>我想说:</p>

jQuery代码:

$('<b>你好</b>').appendTo('p');

结果:

<p>我想说:<b>你好</b></p>

3.prepend()

向每个匹配的元素内部前置内容

HTML代码:

<p>我想说:</p>

jQuery代码:

$('p').prepend('<b>你好</b>');

结果:

<p><b>你好</b>我想说:</p>

4.prependTo()

将所有匹配的元素前置到指定的元素中。实际上,使用该方法是颠倒了常规$(A).prepend(B)的操作,既不是将B前置到A中,而是将A前置到B中

HTML代码:

<p>我想说:</p>

jQuery代码:

$('<b>你好</b>').prependTo('p');

结果:

<p><b>你好</b>我想说:</p>

5.after()

在每个匹配的元素之后插入内容

HTML代码:

<p>我想说:</p>

jQuery代码:

$('p').after('<b>你好</b>');

结果:

<p>我想说:<b>你好</b></p>

6.insertAfter

将所有匹配的元素插入到指定元素的后面。实际上,使用该方法是颠倒了常规$(A).after(B)的操作,既不是将B插入到A后面,而是将A插入到B后面

HTML代码:

<p>我想说:</p>

jQuery代码:

$('<b>你好</b>').insertAfter('p');

结果:

<p>我想说:<b>你好</b></p>

7.before

在每个匹配的元素之前插入内容

HTML代码:

<p>我想说:</p>

jQuery代码:

$('p').before('<b>你好</b>');

结果:

<p><b>你好</b>我想说:</p>

8.insertBefore

将所有匹配的元素插入到指定元素的前面。实际上,使用该方法是颠倒了常规$(A).after(B)的操作,既不是将B插入到A前面,而是将A插入到B前面

HTML代码:

<p>我想说:</p>

jQuery代码:

$('<b>你好</b>').insertBefore('p');

结果:

<p><b>你好</b>我想说:</p>

9.remove()

作用是从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素

注意!     当某个节点用remove()方法删除后,该节点包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。

实例:

var $li=$('ul li:eq(1)').remove();//获取第二个<li>元素节点后,将它从网页中删除

$li.appendTo('ul');//把刚才删除的节点又重新添加到<ul>元素里

另外remove()方法也可以通过传递参数来选择性的删除元素

实例:

$('ul li').remove('li[title!=菠萝]');//将<li>元素中属性title不等于‘菠萝’的<li>元素删除

10.empty()

严格来讲,empty()方法不是删除节点,而是清空节点,他能清空元素中的所有后代节点

实例:

$('ul li:eq(1)').empty();//获得第二个<li>元素节点后,清空此元素里的内容,注意是元素里!

当代码运行后,第二个<li>元素的内容被清空了,只剩下了<li>标签默认符号‘·’

11.clone()

实例:

$('ul li').click(function(){

  $(this).clone().appendTo('ul');//复制当前节点,并将它追加到<ul>元素中

})

注意!      复制节点后,被复制的新元素并不具备任何行为。如果需要新元素也具有行为,使用clone时传递参数true。

实例:

$(this).clone(true).appendTo('ul');

12.replaceWith()和replaceAll()

replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素。

实例:

$('p').replaceWith('<strong>你最不喜欢的方法是?</strong>');

同样上述功能也能使用relaceAll()来实现,该方法与relaceWith()方法的作用相同,只是颠倒了relaceWith()操作。

实例:

$('<strong>你最不喜欢的方法是?</strong>').replaceAll('p');

注意!    如果在替换之前,已经为元素绑定事件,替换后原先绑定的事件将会与被替换的元素一起消失,需要在元素上重新绑定事件。

13.wrap()

将某个节点用其他标记包裹起来。该方法对于需要在文档中插入额外标记的结构化标记非常有用,而且她不会破坏原始文档的语义。

jQuery代码:

$('strong').wrap('<b></b>');//用<b>标签把<strong>元素包裹起来

结果:

<b><strong title='你最不喜欢的方法是'>你最喜欢的方法是?</strong></b>

14.wrapAll()

将所有匹配的元素用一个元素来包裹。它不同于wrap()方法,wrap()方法是将所有的元素进行单独的包裹。

HTML代码:

<strong title='方法'>方法</strong>

<strong title='方法'>方法</strong>

<ul>

  <li title='方法一'>方法一</li>

  <li title='方法二'>方法二</li>

  <li title='方法三'>方法三</li>

</ul>

如果使用wrap()方法包裹<strong>元素

jQuery代码:

$('strong').wrap('<b></b>');

结果:

<b><strong title='方法'>方法</strong></b>

<b><strong title='方法'>方法</strong></b>

如果使用wrapAll()方法包裹<strong>元素

jQuery代码:

$('strong').wrapAll('<b></b>');

结果:

<b>

  <strong title='方法'>方法</strong>

  <strong title='方法'>方法</strong>

</b>

15.wrapInner()

将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来。

jQuery代码:

$('strong').wrapInner('<b></b>');

结果:

<strong title='喜欢的方法'><b>喜欢的方法</b></strong>

jQuery节点操作方法大全的更多相关文章

  1. jquery 节点操作大全

    $para.attr("title"); 实例: <script type="text/javascript"> //<![CDATA[ $( ...

  2. jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法

    jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容   ,html() - 设置或返回所 ...

  3. jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作

    一.创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...

  4. jQuery 效果函数,jquery文档操作,jQuery属性操作方法,jQuerycss操作函数,jQuery参考手册-事件,jQuery选择器

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  5. 十分钟玩转 jQuery、实例大全(参考自博主索宁)

    十分钟玩转 jQuery.实例大全(参考自博主索宁) 一.简介 书写规则 支持链式操作: 在变量前加"$"符号(var $variable = jQuery 对象): 注:此规定并 ...

  6. 深入学习jQuery节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...

  7. python文件和目录操作方法大全(含实例)

    一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法.1.得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd()2.返回指定目录下的所有文件和目 ...

  8. 【python】python文件和目录操作方法大全(含实例)

    转自:http://www.jb51.net/article/48001.htm 一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法.1.得到当前工作目录,即当前Pyt ...

  9. Jquery节点遍历

    jquery 节点遍历 <html> <head> <title></title> <script src="Jquery/jquery ...

随机推荐

  1. 痛苦的Windows下的temp目录

    2007不能运行了,错误: [MSBuild Error] “DCC”任务意外失败. System.Configuration.ConfigurationErrorsException: 配置系统未能 ...

  2. 洛谷 P2341 BZOJ 1051 [HAOI2006]受欢迎的牛

    题目描述 每头奶牛都梦想成为牛棚里的明星.被所有奶牛喜欢的奶牛就是一头明星奶牛.所有奶 牛都是自恋狂,每头奶牛总是喜欢自己的.奶牛之间的“喜欢”是可以传递的——如果A喜 欢B,B喜欢C,那么A也喜欢C ...

  3. 洛谷 P1595 信封问题

    题目描述 某人写了n封信和n个信封,如果所有的信都装错了信封.求所有信都装错信封共有多少种不同情况. 输入输出格式 输入格式: 一个信封数n 输出格式: 一个整数,代表有多少种情况. 输入输出样例 输 ...

  4. [bzoj3038/3211]上帝造题的七分钟2/花神游历各国_线段树

    上帝造题的七分钟2 bzoj-3038 题目大意:给定一个序列,支持:区间开方:查询区间和. 注释:$1\le n\le 10^5$,$1\le val[i] \le 10^{12}$. 想法:这题还 ...

  5. 框架统一出参数DTO格式

    这个可以没必要定义. 每个接口返回自己的数据格式就好

  6. /sys/power/state

    kernel/power/main.c中: /** * state - control system power state. * * show() returns what states are s ...

  7. Object类方法简介二

    在学了Object类前面的三个常用方法后,又遇到它的另外三个方法——clone().finalize().getClass(),这三个方法不经常使用,但因为在学习过程遇到了,就简单的对它们的使用做一个 ...

  8. 控制台中使用SetTimer的提醒

    SetTimer是设置定时器,每隔一段时间执行一个操作,原型如下 UINT_PTR SetTimer( HWND hWnd, // 窗口句柄 UINT_PTR nIDEvent, // 定时器ID,多 ...

  9. 【转】win7下安装搭建tomcat服务器

    原文网址:http://www.voidcn.com/blog/tianxiawuzhei/article/p-3450678.html 1.安装jdk,因为tomcat就是一个java程序,所以需要 ...

  10. TCP心跳包

    所谓的心跳包就是客户端定时放送简单的信息给服务器端,告诉它我还在而已.代码就是每 隔几分钟发送一个固定信息给服务器端,服务器端回复一个固定信息.如果服务器端几分钟后没有收到客户端信息则视客户端断开.比 ...