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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery学习笔记之jQuery的DOM操作

    一.节点的操作 1.查找节点: var $var_1=$("htmltype");   //这句话就是获取所有htmltype节点 如:var $ul_1=$("ul"); 2.创建并追加节点: var $var_1=$("<htmltype>");//这句话是创建一个节点 $("htmltype2").append($var_1) ; //这句话是把节点插入所有htmltype2节点中 例子:var $li_1=

  • jQuery中用dom操作替代正则表达式

    在B/S结构客户端越来越"胖"的今天,作为一名全端程序员,您很可能会在前端操作html字符串,注意,是操作html字符串,不是操作当前页面的html. 举个例子,百度推出的在线HTML富文本编辑器Ueditor,可以在线制作富文本文档,功能堪比精简版的Microsoft Word.虽然Ueditor身披百度的光环,但实际效果不太让人满意,我们需要二次处理一下它生成的html字符串,比如把所有图片的宽度设成90%. 通过某个方法,我们可以拿到文本编辑器中的html字符串,假设字符串如下:

  • jQuery DOM插入节点操作指南

    方法 描述 示例 append() 向每个匹配的元素内部追加内容 HTML代码:<p>我想说:</p> jQuery代码: $("p").append("<b>你好</b>"); 结果: <p>我想说:<b>你好</b></p> appendTo() 将所有匹配的元素追加到指定的元素中 .实际上,使用该方法是颠倒了常规 的$(A).append(B)的操作,是将A追加到B

  • jQuery移动和复制dom节点实用DOM操作案例

    本文章简单的介绍了关于jQuery移动和复制dom节点程序实现,有需要学习的朋友可参考参考. 在做一个项目时,需要dom节点移动,如以下代码: 复制代码 代码如下: <div></div> <p></p> 需要把p标签移动到div标签里,经过测试发现,在jQuery中移动dom节点非常方便: 复制代码 代码如下: $('div').append($('p')) 这样即可把p标签移动到div标签里,千万不要写成这样: 复制代码 代码如下: $('div').a

  • jQuery使用手册之二 DOM操作

    jQuery使用手册之二 DOM操作

    属性我们以<img id="a" scr="5.jpg"/>为例,在原始的javascript里面可以用var o=document.getElementById('a')取的id为a的节点对象,在用o.src来取得或修改该节点的scr属性,在jQuery里$("#a")将得到jQuery对象[ <img id="a" scr="5.jpg"/> ],然后可以用jQuery提供的很多

  • jQuery中DOM操作实例分析

    本文实例讲述了jQuery中DOM操作的方法.分享给大家供大家参考.具体分析如下: 这里主要设计的dom操作包括:dom对象的创建(JS方式和jquery方式).属性的修改.样式的修改.动态绑定事件 代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="jquery-1.3.

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

    本文实例讲述了jQuery中DOM树操作之使用反向插入方法.分享给大家供大家参考.具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置.通常,当在jQuery中操作元素时,利用连缀方法更简洁也更有效.可是我们现在没有办法这样做,因为this是.insertBefore()的目标,是.appendTo()的内容.此时,利 用反向插入方法,可以帮我们解决问题. 像.insertBefore()和.appendTo()这样的插人方法,一般

  • jQuery中DOM树操作之复制元素的方法

    jQuery中DOM树操作之复制元素的方法

    本文实例讲述了jQuery中DOM树操作之复制元素的方法.分享给大家供大家参考.具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素.将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素.可是,有时候也会用到复制元素的操作.例如,可以复制出现在页面顶部的导航菜单,并把副本放到页脚上.实际上,无论何时,只要能通过复制元素增强页面的视觉效果,都是以重用代码来实现的好机会.毕竟,如果能够只编写一次代码并让jQuery替我们完成复制,何必要重写两遍同时又增加双倍的出错机会

  • JQuery中使文本框获得焦点的方法实例分析

    本文实例分析了JQuery中使文本框获得焦点的方法.分享给大家供大家参考.具体分析如下: 由于JQuery中获得的对象还是JQuery对象,对其使用focus()只是使该对象获得onFocus()函数,不能是对象获得焦点,所以要使对象获得焦点,应该调用DOM对象的focus 方法,即: $("#id")[0].focus(); 需要注意两个函数之间的区别: $("#id").focus(); $("#id")[0].focus(); 第一个是增加

  • jQuery中DOM常见操作实例小结

    本文实例讲述了jQuery中DOM常见操作.分享给大家供大家参考,具体如下: DOM属性操作 属性列表 属性 版本 说明 attr() 1.0 设置或返回文档节点的属性. removeAttr() 1.0 移除文档节点的属性. prop() 1.6 设置或返回DOM元素的属性. removeProp() 1.6 移除每个匹配元素的属性. addClass() 1.0 添加CSS类名. removeClass() 1.0 移除CSS类名. toggleClass() 1.2 切换CSS类名(存在就

  • JQuery中DOM实现事件移除的方法

    本文实例讲述了JQuery中DOM实现事件移除的方法.分享给大家供大家参考.具体如下: 可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件.假设网页上有一个<button>元素,使用以下代码为该元素绑定多个相同的事件. $(function(){ $('#btn').bind("click", function(){ $('#test').append("<p>我的绑定函数1</p>"); }).bind("c

  • jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解

    本文实例分析了jQuery中bind(),live(),delegate(),on()绑定事件方法.分享给大家供大家参考,具体如下: 前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到各位朋友,文中如有不当之处,还望各位指正,话不多说,直接进入正题. 一.bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 复制

  • jQuery操作基本控件方法实例分析

    本文实例讲述了jQuery操作基本控件方法.分享给大家供大家参考,具体如下: 1. 根据控件的样式class获取控件 复制代码 代码如下: $(".className")...... //className代表的就是控件的样式 2. 根据控件的ID获取控件 复制代码 代码如下: $("#id")...... 3. 根据控件的name获取控件 $("input[name='objName']")...... /*$("check[name

  • jQuery加载及解析XML文件的方法实例分析

    本文实例讲述了jQuery加载及解析XML文件的方法.分享给大家供大家参考,具体如下: 1.简述 XML(eXtensible Markup Language)即可扩展标记语言,与HTML一样,都是属于SGML标准通用语言. 2. Content-Type 很多情况下XML文件不能正常解析都是由于Content-Type没有设置好.如果Content-Type本身就是一个XML文件则不需要设置:如果是由后台程序动态生成的,那么就需要设置Content-Type为"text/xml",否

  • Android中ListView下拉刷新的实现方法实例分析

    Android中ListView下拉刷新的实现方法实例分析

    本文实例讲述了Android中ListView下拉刷新的实现方法.分享给大家供大家参考,具体如下: ListView中的下拉刷新是非常常见的,也是经常使用的,看到有很多同学想要,那我就整理一下,供大家参考.那我就不解释,直接上代码了. 这里需要自己重写一下ListView,重写代码如下: package net.loonggg.listview; import java.util.Date; import android.content.Context; import android.util.

随机推荐