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>
jQuery节点操作方法大全的更多相关文章
- jquery 节点操作大全
$para.attr("title"); 实例: <script type="text/javascript"> //<![CDATA[ $( ...
- jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法
jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容 ,html() - 设置或返回所 ...
- jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...
- jQuery 效果函数,jquery文档操作,jQuery属性操作方法,jQuerycss操作函数,jQuery参考手册-事件,jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- 十分钟玩转 jQuery、实例大全(参考自博主索宁)
十分钟玩转 jQuery.实例大全(参考自博主索宁) 一.简介 书写规则 支持链式操作: 在变量前加"$"符号(var $variable = jQuery 对象): 注:此规定并 ...
- 深入学习jQuery节点操作
× 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...
- python文件和目录操作方法大全(含实例)
一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法.1.得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd()2.返回指定目录下的所有文件和目 ...
- 【python】python文件和目录操作方法大全(含实例)
转自:http://www.jb51.net/article/48001.htm 一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法.1.得到当前工作目录,即当前Pyt ...
- Jquery节点遍历
jquery 节点遍历 <html> <head> <title></title> <script src="Jquery/jquery ...
随机推荐
- 痛苦的Windows下的temp目录
2007不能运行了,错误: [MSBuild Error] “DCC”任务意外失败. System.Configuration.ConfigurationErrorsException: 配置系统未能 ...
- 洛谷 P2341 BZOJ 1051 [HAOI2006]受欢迎的牛
题目描述 每头奶牛都梦想成为牛棚里的明星.被所有奶牛喜欢的奶牛就是一头明星奶牛.所有奶 牛都是自恋狂,每头奶牛总是喜欢自己的.奶牛之间的“喜欢”是可以传递的——如果A喜 欢B,B喜欢C,那么A也喜欢C ...
- 洛谷 P1595 信封问题
题目描述 某人写了n封信和n个信封,如果所有的信都装错了信封.求所有信都装错信封共有多少种不同情况. 输入输出格式 输入格式: 一个信封数n 输出格式: 一个整数,代表有多少种情况. 输入输出样例 输 ...
- [bzoj3038/3211]上帝造题的七分钟2/花神游历各国_线段树
上帝造题的七分钟2 bzoj-3038 题目大意:给定一个序列,支持:区间开方:查询区间和. 注释:$1\le n\le 10^5$,$1\le val[i] \le 10^{12}$. 想法:这题还 ...
- 框架统一出参数DTO格式
这个可以没必要定义. 每个接口返回自己的数据格式就好
- /sys/power/state
kernel/power/main.c中: /** * state - control system power state. * * show() returns what states are s ...
- Object类方法简介二
在学了Object类前面的三个常用方法后,又遇到它的另外三个方法——clone().finalize().getClass(),这三个方法不经常使用,但因为在学习过程遇到了,就简单的对它们的使用做一个 ...
- 控制台中使用SetTimer的提醒
SetTimer是设置定时器,每隔一段时间执行一个操作,原型如下 UINT_PTR SetTimer( HWND hWnd, // 窗口句柄 UINT_PTR nIDEvent, // 定时器ID,多 ...
- 【转】win7下安装搭建tomcat服务器
原文网址:http://www.voidcn.com/blog/tianxiawuzhei/article/p-3450678.html 1.安装jdk,因为tomcat就是一个java程序,所以需要 ...
- TCP心跳包
所谓的心跳包就是客户端定时放送简单的信息给服务器端,告诉它我还在而已.代码就是每 隔几分钟发送一个固定信息给服务器端,服务器端回复一个固定信息.如果服务器端几分钟后没有收到客户端信息则视客户端断开.比 ...