jQuery中DOM树操作之使用反向插入方法实例分析


Posted in Javascript onJanuary 23, 2015

本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下:

使用反向插入方法

这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用连缀方法更简洁也更有效。可是我们现在没有办法这样做,因为this是.insertBefore()的目标,是.appendTo()的内容。此时,利 用反向插入方法,可以帮我们解决问题。

像.insertBefore()和.appendTo()这样的插人方法,一般都有一个对应的反向方法。反 向方法也执行相同的操作,只不过“目标”和“内容”正好相反。例如:

$('<p>Hello</p>').appendTo('#container');

与下面的代码结果一样:

$('#container').append('<p>Hello</p>');

下面我们就使用.before()代替.insertBefore()来重构代码,参见如下代码:

$(document).ready(function() {

var $notes = $('<ol id="notes"></ol>')

.insertBefore('#footer');

$('span.footnote').each(function(index) {

$(this)

.before('<sup>' + (index + 1) + '</sup>')

.appendTo($notes)

.wrap('<li></li>');

});

});

插入方法回调

反向插入方法可以接受一个函数作为参数,与.attr()和.css()方法类似。 这个传入的函数会针对每个目标元素调用,返回被插入的HTML字符串。在此其 实也可以使用这个技术,但由于这样就需要对每个脚注都重复一遍相同的操作, 所以还是使用一个.each()方法来得更清晰。

现在,我们可以考虑最后一步了:在正文中相应的位置创建指向匹配脚注的链接和在脚注中 创建指向正文位置的链接。为此,每个脚注需要4处标记:两个链接,一个在正文中,一个在脚 注中;以及两个id属性。因为这样一来,传人.before()方法的参数会变得复杂,所以有必要 在这里使用一种新的创建字符串的方法。
在上面的代码中,我们使用了 操作符来拼接字符串。使用+操作符虽然没有问题,但
如果要拼接的字符串太多,那看起来就会很乱。所以,我们在这里使用数组的.join()方法来构 建一个更大的数组。换句话说,下面的两行代码结果相同。

var str = 'a' + 'b' + 'c';

var str = ['a', 'b', 'c'].join('');

虽然这个例子要求输人更多字符,但使用.join()方法可以避免因要拼接的字符串过多而引 起混乱。下面我们再看看示例代码吧,如下代码就是使用.join()创建字符串的过程。

$(document).ready(function() {

var $notes = $('<ol id="notes"></ol>') .insertBefore('#footer'); $('span.footnote').each(function(index) { $(this)

.before([

'<sup>', index + 1,

'</sup>'

].join(''))

.appendTo($notes)

.wrap('<li></li>');

});

});

注意,由于数组的每个元素会分别执行运算,因此不再需要把index+1放在括号里了。 使用这种技巧,可以为脚注标签添加一个指向页面底部的链接和一个唯一的id值。同时在后 面的方法中,也要给<li>元素中添加相应的id属性,以便该链接有匹配的目标,参见如下代码:

$(document).ready(function() {

var $notes = $('<ol id="notes"></ol>') .insertBefore('#footer'); $('span.footnote').each(function(index) { $(this)

.before([

'<a href="#footnote-', index + 1,

'"id="context-', index + 1,

'"class="context">',

'<sup>', index + 1,

'</sup></a>'

].join(''))

.appendTo($notes)

.wrap('<li id=Mfootnote-' + (index + 1) + IM></li>');

});

});

添加了这些标记之后,每个脚注标签就有了指向页面底部对应脚注的链接。那么所剩的就是 在脚注中创建一个指向其上下文的链接了。为此,可以使用.appendTo()的反向方 法.append(),参见如下代码:

$(document).ready(function() {

var $notes = $('<ol id="notes__></ol>')

.insertBefore('#footer');

$('span.footnote').each(function(index) {

$(this)

.before([

'<a href="#footnote-', index + 1,

'"id="context-', index + 1,

'"class = "context__>',

'<sup>', index + 1,

'</sup></a>'

].join(''))

.appendTo($notes)

.append([

' (<a href="#context-', index + 1,

'__>context</a>)'

].join(''))

.wrap('<li id="footnote-' + (index + 1) + '__></li>');

});

});

注意,这里的href指向了脚注标签中的id。运行结果中,可以看到包含新链接的脚注。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
js自执行函数的几种不同写法的比较
Aug 16 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
Vue.js开发环境快速搭建教程
Mar 17 Javascript
深入理解vue-loader如何使用
Jun 06 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 #Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 #Javascript
使用angular写一个hello world
Jan 23 #Javascript
Javascript中的几种URL编码方法比较
Jan 23 #Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 #Javascript
AngularJS语法详解(续)
Jan 23 #Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 #Javascript
You might like
php 删除记录实现代码
2009/03/12 PHP
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
详解nodejs模板引擎制作
2017/06/14 NodeJs
Node.js环境下Koa2添加travis ci持续集成工具的方法
2017/06/19 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
haskell实现多线程服务器实例代码
2013/11/26 Python
Python 闭包的使用方法
2017/09/07 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
Python使用进程Process模块管理资源
2020/03/05 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
DNA测试:Orig3n
2019/03/01 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
运动会致辞稿50字
2014/02/04 职场文书
节约能源标语
2014/06/17 职场文书
教育见习报告范文
2014/11/03 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
反腐倡廉观后感
2015/06/08 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
js Proxy的原理详解
2021/05/25 Javascript