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作用域与变量提升
Dec 09 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
深入剖析JavaScript instanceof 运算符
Jun 14 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
详解JavaScript 的执行机制
Sep 18 Javascript
JavaScript实现缓动动画
Nov 25 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截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
php实现的ping端口函数实例
2014/11/12 PHP
php之readdir函数用法实例
2014/11/13 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
异步动态加载js与css文件的js代码
2013/09/15 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
python MD5加密的示例
2020/10/19 Python
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
怎么样写好简历中的自我评价
2013/10/25 职场文书
推广普通话标语
2014/06/27 职场文书
酒店前台辞职书
2015/02/26 职场文书
红色故事汇观后感
2015/06/18 职场文书
公司岗位说明书
2015/10/08 职场文书
python字典的元素访问实例详解
2021/07/21 Python