一．创建节点
1 |
var box = $('<div>节点</div>'); //创建一个节点，或者var box = "<div>节点</div>"; |
2 |
$('body').append(box); //将节点插入到<body>元素内部 |
二．插入节点
jQuery 提供了好几种个方法来插入节点：
1、内部插入节点方法
| 方法名 |
描述 |
| append(content) |
向指定元素内部后面插入节点 content |
| append(function (index, html) {}) |
使用匿名函数向指定元素内部后面插入节点 |
| appendTo(content) |
将指定元素移入到指定元素 content 内部后面 |
| prepend(content) |
向指定元素 content 内部的前面插入节点 |
| prepend(function (index, html) {}) |
使用匿名函数向指定元素内部的前面插入节点 |
| prependTo(content) |
将指定元素移入到指定元素 content 内部前面 |
代码示例：
01 |
$('div').append('<strong>节点</strong>'); //向 div 内部插入 strong 节点 |
02 |
$('div').append(function (index, html) { //使用匿名函数插入节点，index为该div的索引，即第几个div，html是原节点内部内容。 |
03 |
return '<strong>节点</strong>+index+html'; |
05 |
$('span').appendTo('div'); //讲 span 节点移入 div 节点内 |
06 |
$('span').appendTo($('div')); //同上 |
07 |
$('div').prepend('<span>节点</span>'); //将 span 插入到 div 内部的前面 |
08 |
$('div').append(function (index, html) { //使用匿名函数，同上 |
09 |
return '<span>节点</span>'; |
11 |
$('span').prependTo('div'); //将 span 移入 div 内部的前面 |
12 |
$('span').prependTo($('div')); //同上 |
2、外部插入节点方法
| 方法名 |
描述 |
| after(content) |
向指定元素的外部后面插入节点 content |
| after(function (index, html) {}) |
使用匿名函数向指定元素的外部后面插入节点 |
| before(content) |
向指定元素的外部前面插入节点 content |
| before(function (index, html) {}) |
使用匿名函数向指定元素的外部前面插入节点 |
| insertAfter(content) |
将指定节点移到指定元素 content 外部的后面 |
| insertBefore(content) |
将指定节点移到指定元素 content 外部的前面 |
代码示例：
01 |
$('div').after('<span>节点</span>'); //向 div 的同级节点后面插入 span |
02 |
$('div').after(function (index, html) { //使用匿名函数，同上 |
03 |
return '<span>节点</span>'; |
05 |
$('div').before('<span>节点</span>'); //向 div 的同级节点前面插入 span |
06 |
$('div').before(function (index, html) { //使用匿名函数，同上 |
07 |
return '<span>节点</span>'; |
09 |
$('span').insertAfter('div'); //将 span 元素移到 div 元素外部的后面 |
10 |
$('span').insertBefore('div'); //将 span 元素移到 div 元素外部的前面 |
三．包裹节点
jQuery 包裹节点就是使用字符串代码将指定元素的代码包含着的意思。
| 方法名 |
描述 |
| wrap(html) |
向指定元素包裹一层 html 代码 |
| wrap(element) |
向指定元素包裹一层 DOM 对象节点 |
| wrap(function (index) {}) |
使用匿名函数向指定元素包裹一层自定义内容 |
| unwrap() |
移除一层指定元素包裹的内容 |
| wrapAll(html) |
用 html 将所有元素包裹到一起 |
| wrapAll(element) |
用 DOM 对象将所有元素包裹在一起 |
| wrapInner(html) |
向指定元素的子内容包裹一层 html |
| wrapInner(element) |
向指定元素的子内容包裹一层 DOM 对象节点 |
| wrapInner(function (index) {}) |
用匿名函数向指定元素的子内容包裹一层 |
代码示例：
01 |
$('div').wrap('<strong></strong>'); //在 div 外层包裹一层 strong |
02 |
$('div').wrap('<strong>123</strong>'); //包裹的元素可以带内容 |
03 |
$('div').wrap('<strong><em></em></strong>'); //包裹多个元素 |
04 |
$('div').wrap($('strong').get(0)); //也可以包裹一个原生 DOM |
05 |
$('div').wrap(document.createElement('strong')); //临时的原生 DOM |
06 |
$('div').wrap(function (index) { //匿名函数 |
07 |
return '<strong></strong>'; |
09 |
$('div').unwrap(); //移除一层包裹内容，多个需移除多次 |
10 |
$('div').wrapAll('<strong></strong>'); //所有 div 外面只包一层 strong |
11 |
$('div').wrapAll($('strong').get(0)); //同上 |
12 |
$('div').wrapInner('<strong></strong>'); //包裹子元素内容 |
13 |
$('div').wrapInner($('strong').get(0)); //DOM 节点 |
14 |
$('div').wrapInner(function () { //匿名函数 |
15 |
return '<strong></strong>'; |
注意：.wrap()和.wrapAll()的区别在前者把每个元素当成一个独立体，分别包含一层外层；后者将所有元素作为一个整体作为一个独立体，只包含一层外层。这两种都是在外层包含，而.wrapInner()在内层包含。
四．节点操作
除了创建、插入和包裹节点，jQuery 还提供了一些常规的节点操作方法：复制、替换和删除节点。
2 |
$('body').append($('div').clone(true)); //复制一个节点添加到 HTML 中 |
注意：clone(true)参数可以为空，表示只复制元素和内容，不复制事件行为。而加上 true参数的话，这个元素附带的事件处理行为也复制出来。
2 |
$('div').remove(); //直接删除 div 元素 |
注意：.remove()不带参数时，删除前面对象选择器指定的元素。而.remove()本事也可以带选择符参数的，比如：$('div').remove('#box');只删除 id=box 的 div。
2 |
$('div').detach(); //保留事件行为的删除 |
注意：.remove()和.detach()都是删除节点，而删除后本身方法可以返回当前被删除的节点对象，但区别在于前者在恢复时不保留事件行为，后者则保留。
2 |
$('div').empty(); //删除掉节点里的内容 |
4 |
$('div').replaceWith('<span>节点</span>'); //将 div 替换成 span 元素 |
5 |
$('<span>节点</span>').replaceAll('div'); //同上 |
- redis 集群新增节点，slots槽分配，删除节点， [ERR] Calling MIGRATE ERR Syntax error, try CLIENT (LIST | KILL | GET...
redis reshard 重新分槽(slots) https://github.com/antirez/redis/issues/5029 redis 官方已确认该bug redis 集群重新(re ...
- JQuery（选择器、事件、DOM操作）
一.jQuery简介 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 JavaScript 文件中,其中包含了所有 ...
- 读<jquery 权威指南>[1]-选择器及DOM操作
今天是小年了,2013马上要过去了,但是学习不能间断啊.最近正在看<jQuery权威指南>,先温习一下选择器和DOM操作. 一.基本选择器 1.table单双行: $(function ( ...
- 事件冒泡及事件委托的理解（JQuery Dom操作）
jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...
- jQuery学习笔记（DOM操作）
DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...
- 《锋利的JQuery》读书要点笔记2——DOM操作
第三章 jQuery中的DOM操作 3.1 DOM(Document Object Model)操作的分类 1. DOM Core 例如:document.getElementsByTagNam ...
- jQuery中的DOM操作(三)
一.查找节点 [返回jQuery对象]$(选择器字符串); 使用jQuery函数,里面参数为选择器字符串,查询符合条件的BOM对象并返回jQuery对象eg: $('div.one spa ...
- jQuery进行DOM操作记录
1.在元素内部插入DOM元素 ①插入到元素内部原有元素之后 append(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuer ...
- 用OC实现双向链表：构造链表、插入节点、删除节点、遍历节点
一.介绍 双向链表:每一个节点前后指针域都和它的上一个节点互相指向,尾节点的next指向空,首节点的pre指向空. 二.使用 注:跟单链表差不多,简单写常用的.循环链表无法形象化打印,后面也暂不实现了 ...
- mongodb replica set 添加/删除节点方法--http://www.ii123.com/jc/bc/bczh/258948.html
replica set多服务器主从,添加,删除节点,肯定会经常遇到的.下面详细说明一下,添加,删除节点的2种方法. 一,利用rs.reconfig,来添加,删除节点 1,添加节点 代码如下 re ...
随机推荐
- 如何去除 ckeditor 上传图片后在原码中留下的 style="width: 100%;height:100px"之类的代码呢？
ckeditor编辑器在上传图片的时候,会神奇的加上一段诡异的代码: 这导致上传的小图也是被拉伸到100%,我根本就没有定义它,找来找去也找不到element.style,原来这是在system.cs ...
- 【转】火火火火火！看HomeKit如何改变物联网和智能家居？
摘要: 智能家居并非新概念,然而在苹果等巨头插足之前,它却只是一盘散沙,各自为营,苹果又将如何凭借HomeKit构建起拥有统一界面和控制中心的平台来实现各种智能家居设备与应用之间的无缝连接,真正实现智 ...
- IIS 10 安装URLRewrite组件 方式
1.Open Regedit > HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\InetStp 2.Edit "MajorVersion" an ...
- mongodb3.0 db.addUser报错
> db.addUser("ydkt","ydkt") --19T09:: E QUERY TypeError: Property 'addUser' o ...
- 《简明python教程》学习笔记，长文
引号: 单引号:如果包含的字符串里有单引号的话,需要在那个单引号里加转义符号,或者使用双引号 例:print 'he"llo' or print 'he\'llo' ===> h ...
- h.264 Bi-Predictive Motion Search
在做B帧的运动预测时,有两组参考图像列表(refList0, refList1),需要进行分别前向预测.后向预测.传统的预测方式是: 对refList0进行前向预测,得到最佳前向ref与mv. 对re ...
- 关于oledb对Excel的读取
这两天项目需求要检索excel的内容,于是就研究了一下,话不多说,我就直接贴代码1.首先是连接excel. public DataTable SearchSheetToDT(string strSea ...
- Topcoder 好题推荐
SRM SRM147 DIV1 1000pt DP SRM148 DIV1 1100pt 递归 SRM149 DIV1 1000pt math SRM150 DIV1 500pt DP SRM469 ...
- linux下服务器管理
0.更新国内yum源,参考:http://blog.csdn.net/zhaoyue007101/article/details/8456188 1.创建用户.用户组: 新增用户组 groupadd ...
- 安卓开发24：FrameLayout布局
FrameLayout布局 FrameLayout是五大布局中最简单的一个布局.FrameLayout布局中的元素会根据先后顺序重叠起来.利用FrameLayout布局元素重叠的特性,我们一般可以做一 ...
