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 style 中visibility和display之间的区别
Jan 22 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 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
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
php 中的closure用法详解
2017/06/12 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
python写xml文件的操作实例
2014/10/05 Python
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
Pytorch释放显存占用方式
2020/01/13 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
PHP面试题及答案一
2012/06/18 面试题
最新英语专业学生求职信范文
2013/09/21 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
北京爱情故事观后感
2015/06/12 职场文书
环保宣传语大全
2015/07/13 职场文书
好人好事新闻稿
2015/07/17 职场文书
运动会广播稿300字
2015/08/19 职场文书
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏