jquery 之节点操作
一、添加节点
【添加内部子节点方法】:内部节点就是儿子节点
append() 在被选元素内部的结尾插入内容
appendTo() 将指定内容插入到被选标签内部的结尾
prepend() 在被选元素内部的开头插入内容
prependTo() 将指定内容插入到被选标签内部的开头
【添加同级节点方法】:同级就是兄弟关系
after() 在被选元素同级的后面插入内容
insertAfter() 将指定内容添加到被选标签同级的后面
before() 在被选元素同级的前面插入内容
insertBefore() 将指定内容添加到被选标签同级的前面
注意:
1、以上方法作用相同。差异在于语法:内容和选择器的位置,是否能够使用函数来插入内容。
2、append、prepend、after、before能使用函数插入内容。
二、删除节点
remove() 删除被选元素(及其子元素)
empty() 从被选元素中删除子元素
三、克隆节点
clone(true) 方法生成被选元素的副本,包含子节点、文本和属性。
参数:可选。布尔值。规定是否复制元素的所有事件处理。默认false。
四、替换节点
replaceWith() 将指定的内容替换被选元素
replaceAll()
$(selector).replaceWith(content)
$(content).replaceAll(selector)
注意:replaceWith() 能够使用函数进行替换,replaceAll则不能。
五、包裹节点
wrap() 把匹配的元素用指定的内容或元素包裹起来。
wrapAll() 把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner() 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="添加">
<p>你好啊!你喜欢吃什么水果</p>
<ul>
<li>葡萄</li>
<li>香蕉</li>
<li>榴莲</li>
</ul> <span>span标签的内容1</span>
<span>span标签的内容2</span> </body>
</html>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//【添加内部子节点方法】:内部节点就是儿子节点
//添加在结尾的
//$('ul').append('<li>苹果1</li>'); //在ul标签内部的结尾添加指定li内容
//$('ul').append(function(){return "<li>苹果-函数的</li>"}); //在ul标签内部的结尾添加指定li内容
//$('<li>苹果2</li>').appendTo('ul');//将指定的li内容添加到ul标签内部的结尾 //添加在开头的
//$('ul').prepend('<li>梨子1</li>'); //在ul标签内部的开头添加指定li内容
//$('ul').prepend(function(){return "<li>梨子-函数的</li>"}); //在ul标签内部的开头添加指定li内容
//$('<li>梨子2</li>').prependTo('ul');//将指定的li内容添加到ul标签内部的开头 //【添加同级节点方法】:同级就是兄弟关系
//$('ul').after('<div>以上水果都好吃1</div>'); //在ul标签同级的后面添加div内容
//$('<div>以上水果都好吃2</div>').insertAfter('ul'); //将div内容添加到ul同级的后面 //$('ul').before('<div>以下水果你喜欢吃什么1</div>'); //在ul标签同级的前面添加div内容
//$('<div>以下水果你喜欢吃什么2</div>').insertBefore('ul'); //将div内容添加到ul同级的前面 //删除节点
//$('ul li').eq(1).empty(); //清空选中元素的子节点
//var $li = $('ul li').eq(2).remove(); //删除选中元素(包括自己和子节点)
//$('ul').append($li); //将删除的li元素在ul内部的后面重新添加 //克隆(复制)方法
$('input').click(function(){
var $p = $('p').clone(true); //克隆p标签,true表示把事件也克隆一份
$('ul').after($p); //将克隆的p标签插入到ul内部的后面
}); //替换节点
//$('p').replaceWith("<p>你好,请问下面的水果你喜欢吗?</p>");
//$('p').replaceWith(function(){return "<p>你好,请问下面的水果你喜欢吗?????</p>"});
//$("<p>你好,请问下面的水果你喜欢吗?????</p>").replaceAll('p'); //包裹节点
$('input').click(function(){
//$('span').wrap('<div></div>'); //用div标签分别包裹每个span标签
$('span').wrapAll('<div></div>'); //用div标签一起包裹所有span标签
$('span').wrapInner('<b></b>'); //在span标签内部用b标签包裹内容
});
</script>
jquery 之节点操作的更多相关文章
- 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
- jquery元素节点操作
jquery元素节点操作 创建节点 var $div = $('<div>'); var $div2 = $('<div>这是一个div元素</div>'); 插入 ...
- jQuery自学笔记(四):jQuery DOM节点操作
获得和设置内容:text( ).html( ) 以及 val( ) text( ) - 设置或返回所选元素的文本内容 html( ) - 设置或返回所选元素的内容(包括 HTML 标记) val( ) ...
- jQuery的节点操作
1.创建节点 var aa = $("<div id='cccc'>插入的内容</div>") var bb = $("<a href='h ...
- jquery——元素节点操作
插入节点: 1.append()和appendTo():在现存元素的内部,从后面插入元素 <script type="text/javascript"> $(funct ...
- jQuery(Dom节点操作)
- jQuery(七):节点操作
jQuery中节点操作主要分为以下几种: 查找节点. 创建节点. 插入节点. 替换节点. 复制节点. 删除节点. 一.查找节点 示例: <!DOCTYPE html> <html l ...
- 解密jQuery内核 DOM操作的核心buildFragment
文档碎片是什么 http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-B63ED1A3 DocumentFragment is a & ...
- 深入学习jQuery节点操作
× 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...
随机推荐
- Python and Bluetooth
环境 Windows7-64bit + Python2.7.15-64bit + Pybluez 安装pybluez时会报错,处理方法~ 1.安装VCForPython27.msi,这是为了提供vis ...
- the unchecked warnings
5.1.9. Unchecked Conversion Let G name a generic type declaration with n type parameters. There is a ...
- Ubuntu 16.04 RTL8111/8168/8411 PCI Express Gigabit Ethernet Controller” 不能上网
来源:http://forum.ubuntu.org.cn/viewtopic.php?f=116&t=463646 1.执行如下命令 uname -a sudo lspci -knn sud ...
- c++ 网络编程课设入门超详细教程 ---目录
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/9663167.html c++ 网络编程(一)TCP/UDP windows/linux 下入门 ...
- 介绍Windows Azure HDInsight服务的Hadoop Storm的视频
介绍Windows Azure HDInsight服务的Hadoop Storm的原理,用例及开发入门的视频,收藏一下: http://channel9.msdn.com/Shows/Data-Exp ...
- Code First配合Entity Framework Power Tools Beta 4使用
基于现有数据库生成POCO数据类和数据库上下文需要借助Visual Studio一个扩展插件-- Entity Framework Power Tools(一个Code First反向工程工具).只要 ...
- A/B_test改变新旧网页 观察用户的引流效果
代码处:https://github.com/xubin97/Data-analysis_exp2 分析A/B测试结果 目录 简介 I - 概率 II - A/B 测试 简介 首先这个项目数据来自某公 ...
- i.mx6 Android6.0.1分析input子系统:测试
getevent与sendevent工具 Android系统提供了getevent与sendevent两个工具供开发者从设备节点中直接读取输入事件或写入输入事件. 在这里,我们测试音量加和音量减按键 ...
- i.mx android6 输入子系统分析(未完)
参考:http://blog.csdn.net/u010312937/article/details/53285286 https://www.jianshu.com/p/7fca94b330ea ...
- IDEA tomcat部署
一.前言 1.CATALINA_HOME和CATALINA_BASE两个变量的区别:前者是tomcat的安装目录,后者是tomcat实例的目录.(安装一个tomcat,可以启动多个tomcat ...