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 window.setTimeout() 的详细用法
Nov 04 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
详解react-redux插件入门
Apr 19 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 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
一个数据采集类
2007/02/14 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
innerText 使用示例
2014/01/23 Javascript
js验证上传图片的方法
2015/05/12 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
跟老齐学Python之再深点,更懂list
2014/09/20 Python
Python文件处理
2016/02/29 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
Python中表示字符串的三种方法
2017/09/06 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
django-csrf使用和禁用方式
2020/03/13 Python
2014年人事科工作总结
2014/11/19 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis
Python3的进程和线程你了解吗
2022/03/16 Python
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript