jQuery学习笔记(三)——DOM节点操作
2015-11-21 12:40
731 查看
一、创建节点
var box = $(<div></div>)
二、插入节点
1、内部插入
$('#box').append(box) 将box插入内部后面
$('#box').appendTo(box) 移入到box内部后面
$('#box').prepend(box) 将box插入内部前面
$('#box').prependTo(box) 移入到box内部前面
2、外部插入
$('#box').after(box) 将box插入到外部后面
$('#box').before(box) 将box插入到外部前面
$('#box').insertAfter(box) 移入box的外部后面
$('#box').insertBefore(box) 移入box的外部前面
三、包裹节点
$('div').wrap('<strong></strong>') 给div包裹一层html代码
$('div').unwrap() 移除掉一层包裹
$('div').wrapAll()
$('div').wrapInner('<strong></strong>') 里层包裹strong
四、节点操作
$('div').clone(true) 克隆div,包括事件,默认为false
$('div').remove('.red') 删除class为red的div 删除事件
$('div').detach('.red') 删除div节点,保留事件
$('div').enpty() 清空节点里的内容
$('div').replaceWith('<span></span>') 替换节点
var box = $(<div></div>)
二、插入节点
1、内部插入
$('#box').append(box) 将box插入内部后面
$('#box').appendTo(box) 移入到box内部后面
$('#box').prepend(box) 将box插入内部前面
$('#box').prependTo(box) 移入到box内部前面
2、外部插入
$('#box').after(box) 将box插入到外部后面
$('#box').before(box) 将box插入到外部前面
$('#box').insertAfter(box) 移入box的外部后面
$('#box').insertBefore(box) 移入box的外部前面
三、包裹节点
$('div').wrap('<strong></strong>') 给div包裹一层html代码
$('div').unwrap() 移除掉一层包裹
$('div').wrapAll()
$('div').wrapInner('<strong></strong>') 里层包裹strong
四、节点操作
$('div').clone(true) 克隆div,包括事件,默认为false
$('div').remove('.red') 删除class为red的div 删除事件
$('div').detach('.red') 删除div节点,保留事件
$('div').enpty() 清空节点里的内容
$('div').replaceWith('<span></span>') 替换节点
相关文章推荐
- jQuery中on()方法用法实例详解
- jQuery学习笔记(二)——css与节点操作
- jquery.pagination.js分页
- jQuery Mobile基本UI组件
- jQuery实现分隔条左右拖动功能
- jquery实现select选择框内容左右移动代码分享
- 解决jquery插件:TypeError:$.browser is undefined报错的方法
- 六、jQuery与Ajax的应用
- jquery选择器学习
- jquery 滚动条插件
- jQuery各版本CDN
- jQuery-AJAX方法
- JSON--Java与AJAX(Jquery)
- Jquery,ajax 跨域访问
- jQuery学习笔记(一)——选择器
- (译)你应该知道的jQuery技巧
- jquery引入外部CDN,失效后则引入本地jq库
- jQuery-noConflict()方法
- JQuery判断radio是否选中并获取选中值的示例代码
- (译)你应该知道的jQuery小技巧