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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
JavaScript 组件之旅(一)分析和设计
Oct 28 Javascript
无阻塞加载脚本分析[全]
Jan 20 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
Vue.js的动态组件模板的实现
Nov 26 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
node使用request请求的方法
Dec 20 Javascript
微信小程序实现菜单左右联动
May 19 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
使用 MySQL Date/Time 类型
2008/03/26 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
Angular2使用jQuery的方法教程
2017/05/28 jQuery
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
详解JS中的柯里化(currying)
2017/08/17 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
Python argv用法详解
2016/01/08 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
python处理document文档保留原样式
2019/09/23 Python
如何在python中实现随机选择
2019/11/02 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android