jQuery中对节点进行操作的相关介绍


Posted in Javascript onApril 16, 2013

动态创建Dom节点

jQuery中使用$(html字符串)来动态创建Dom节点,并且返回一个jQuery对象,可以调用append等方法将创建的节点添加到Dom中。

例如:

        var link = $("<a href='http://www.baidu.com'>百度</a>");

        $("div:first").append(link);

添加节点元素的方法:

Append方法用来在元素的末尾追加元素(最后一个子节点)

Prepend在元素的开始添加元素(第一个子节点)

After:在元素之后添加元素(添加兄弟节点)

Before:在元素之前添加元素(添加兄弟节点)

子元素.appendTo(父元素):在元素的末尾追加一个子元素

子元素.prependTo(父元素):在元素的开始追加一个子元素

A.insertBefore(B)    将A插入到B的前面,等同于B.before(A);

X.insertAfter(B)   将X插入到Y的后面,等同于Y.after(X);
 

删除节点:

Empty():清空该元素下的所有子节点

        等同于:while(ele.firstChild){ele.removeChild(ele.firstChild);}

Remove(selectot);自杀;删除当前元素,返回值为被删除的元素,可以讲节点删除之后放到其他节点下面,有一个移动的效果,例如:

       var lis = $("#ulSite li").remove();

       $("#ulSite2").append(lis);

     
Clone()克隆节点,支复制节点,不复制节点

Clone(true):克隆节点带事件

节点的替换:

$("br").replaceWith("<hr/>");

$("br").replaceAll("<hr/>");
 

包裹节点

Wrap()方法用来将所有的元素逐个用指定的标签包裹

$("b").wrap("<font color='red'></font>");将所有粗体字红色显示

wrapInner();在内部围绕

Javascript 相关文章推荐
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
Mar 04 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
jQuery实现伪分页的方法分享
Feb 17 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 #Javascript
基于jQuery中对数组进行操作的方法
Apr 16 #Javascript
js中 关于undefined和null的区别介绍
Apr 16 #Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 #Javascript
用js实现trim()的解决办法
Apr 16 #Javascript
Javascript中 关于prototype属性实现继承的原理图
Apr 16 #Javascript
jquery时间下拉框小例子
Apr 15 #Javascript
You might like
第1次亲密接触PHP5(2)
2006/10/09 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
javascript cookies操作集合
2010/04/12 Javascript
web前端开发也需要日志
2010/12/09 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
JS中的多态实例详解
2017/10/15 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
Python 画出来六维图
2019/07/26 Python
python opencv进行图像拼接
2020/03/27 Python
django使用多个数据库的方法实例
2021/03/04 Python
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
ASP.NET中的身份验证有那些
2012/07/13 面试题
办理暂住证介绍信
2014/01/11 职场文书
降消项目实施方案
2014/03/30 职场文书
人事经理岗位职责
2014/04/28 职场文书
求职信名称怎么写
2014/05/26 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
植物园观后感
2015/06/11 职场文书
通知怎么写?
2019/04/17 职场文书
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python