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 的 trim 函数的代码
Aug 13 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
Node.js 深度调试方法解析
Jul 28 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
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
php jquery 多文件上传简单实例
2013/12/23 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
js 毫秒转天时分秒的实例
2017/11/17 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
Python Tkinter简单布局实例教程
2014/09/03 Python
python单元测试unittest实例详解
2015/05/11 Python
python读写csv文件实例代码
2019/07/05 Python
django框架cookie和session用法实例详解
2019/12/10 Python
python——全排列数的生成方式
2020/02/26 Python
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
安全检查与奖惩制度
2014/01/23 职场文书
道路建设实施方案
2014/03/18 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
物理学专业自荐信
2014/06/11 职场文书
2014年党支部工作总结
2014/11/13 职场文书
加强党性修养心得体会
2016/01/21 职场文书