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 相关文章推荐
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 Javascript
jQuery实现的分页插件完整示例
May 26 jQuery
浅谈TypeScript 索引签名的理解
Oct 16 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优于Node.js的五大理由分享
2012/09/15 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python笔记(叁)继续学习
2012/10/24 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
用Python shell简化开发
2018/08/08 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
家长会主持词开场白
2014/03/18 职场文书
我爱我家教学反思
2014/05/01 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
国王的演讲观后感
2015/06/03 职场文书
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android