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 相关文章推荐
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
javascript实现避免页面按钮重复提交
Jan 08 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 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
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
python提取xml里面的链接源码详解
2019/10/15 Python
Django封装交互接口代码
2020/07/12 Python
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
函授教育个人学习的自我评价
2013/12/31 职场文书
2014年教研员工作总结
2014/12/23 职场文书
借条如何写
2015/05/26 职场文书
全陪导游词开场白
2015/05/29 职场文书
放假通知怎么写
2015/08/18 职场文书
2016教师国培研修感言
2015/12/08 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
Nginx反向代理配置的全过程记录
2021/06/22 Servers
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers