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学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
JavaScript实现图片伪异步上传过程解析
Apr 10 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 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
typecho插件编写教程(六):调用接口
2015/05/28 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
js Event对象的5种坐标
2011/09/12 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
vue实现文字加密功能
2019/09/27 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
利用Python写一个爬妹子的爬虫
2018/06/08 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
为什么需要版本控制
2016/10/28 面试题
JAVA高级程序员面试题
2013/09/06 面试题
影视动画专业个人的自我评价
2013/12/31 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
建筑安全标语
2014/06/07 职场文书
思品教学工作总结
2015/08/10 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
box-shadow单边阴影的实现
2023/05/21 HTML / CSS