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 HashTable
Jan 22 Javascript
IE bug table元素的innerHTML
Jan 11 Javascript
JS拖动技术 关于setCapture使用
Dec 09 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
原生js实现碰撞检测
Mar 12 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
php 静态页面中显示动态内容
2009/08/14 PHP
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
python多线程扫描端口示例
2014/01/16 Python
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
Python中random模块生成随机数详解
2016/03/10 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
Python中的整除和取模实例
2020/06/03 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
悬挂训练绳:TRX
2017/12/14 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
采购类个人求职的自我评价
2014/02/18 职场文书
自我管理的活动方案
2014/08/25 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
上诉状格式
2015/05/23 职场文书