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 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
CSS和Javascript简单复习资料
Jun 29 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
javascript制作的滑动图片菜单
May 15 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
js实现开启密码大写提示
Dec 21 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
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
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
python如何随机生成高强度密码
2020/08/19 Python
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
门卫工作岗位职责
2013/12/17 职场文书
开办加工厂创业计划书
2014/01/03 职场文书
医学生职业规划范文
2014/01/05 职场文书
财务部总监岗位职责
2014/03/12 职场文书
实习生岗位职责
2014/04/12 职场文书
施工质量承诺书范文
2014/05/30 职场文书
2014年会计工作总结
2014/11/27 职场文书
总经理致辞
2015/07/29 职场文书
丧事答谢词大全
2015/09/30 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
创业计划书之花店
2019/09/20 职场文书
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript
MySQL系列之二 多实例配置
2021/07/02 MySQL
Javascript 解构赋值详情
2021/11/17 Javascript