jQuery节点操作方法大全

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>

时间: 2024-08-29 07:19:32

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

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

十分钟玩转 jQuery.实例大全(参考自博主索宁) 一.简介 书写规则 支持链式操作: 在变量前加"$"符号(var $variable = jQuery 对象): 注:此规定并不是强制要求. 二.寻找元素 选择器 基本选择器.层级选择器.属性选择器  与CSS类似,这里不再细说,详细猛戳这里. 基本筛选器 $('li:first') //第一个元素 $('li:last') //最后一个元素 $("tr:even") //索引为偶数的元素,从 0 开始 $(&q

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

一.创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div>"; 2 $('body').append(box); //将节点插入到<body>元素内部 二.插入节点jQuery 提供了好几种个方法来插入节点:1.内部插入节点方法  方法名 描述 append(content) 向指定元素内部后面插入节点 content append(fu

JQuery文档操作方法跟JQuery属性操作方法跟JQuery CSS操作函数

JQuery文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法                            描述 addClass()                    向匹配的元素添加指定的类名. after()                           在匹配的元素之后插入内容. append()                       向匹配的元素内部追加内容. appendTo()                 

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

一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法.1.得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd()2.返回指定目录下的所有文件和目录名:os.listdir()               例: print os.listdir(r'E:\test_dir')3.函数用来删除一个文件:os.remove()4.删除多个目录:os.removedirs(r"c:\python")5.检验给出的路径是否是一个文件:os.

Jquery节点遍历

jquery 节点遍历 <html> <head> <title></title> <script src="Jquery/jquery-1.10.2.min.js" type="text/javascript"></script> </head> <body> <div>AA</div> <div>BB</div> <

python文件和目录操作方法大全

一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法. 1.得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd()2.返回指定目录下的所有文件和目录名:os.listdir()3.函数用来删除一个文件:os.remove()4.删除多个目录:os.removedirs(r“c:\python”)5.检验给出的路径是否是一个文件:os.path.isfile()6.检验给出的路径是否是一个目录:os.path.isdir()7.判断是否是绝对

深入学习jQuery节点操作

× 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的方法,此外,还扩展了包裹节点.本文将详细介绍jQuery节点操作 创建节点 创建节点的流程比较简单,包括创建节点.添加属性和添加文本.若应用原生方法,一般地,包括document.createElement().setAttribute()和innerHTML var ele = document.

jQuery节点

1.查找节点 查找节点: 查找元素节点: 通过 jQuery 选择器完成. 查找属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取.设置各种属性值. 示例: <table id="tbl" border="1" width="500">-</table> <script> var width = $("# tbl").attr("widt

用户界面框架jQuery EasyUI示例大全之PropertyGrid & LinkButton

<jQuery EasyUI最新试用版免费下载> jQuery EasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.jQuery EasyUI提供了基于当下流行的jQuery core和HTML5的控件,助您打造适合当今网络的应用程序. 基本的属性网格 本演示主要展示了基本的属性网格,点击行更改每个属性值.[另附源代码供大家参考] |在线Demo 自定义属性网格列 本演示主要展示了如何自定义属性网格列,属性网格的列是可以被更改的.[另附源代码供大家参考] |在线Demo