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延迟加载
Mar 09 Javascript
javascript 页面划词搜索JS
Sep 28 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
JavaScript canvas实现围绕旋转动画
Nov 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
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
css样式标签和js语法属性区别
2013/11/06 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
python关闭占用端口方式
2019/12/17 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
大学生村官典型材料
2014/01/12 职场文书
办理居住证介绍信
2014/01/15 职场文书
保管员岗位职责
2015/02/14 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
教师反邪教心得体会
2016/01/15 职场文书