本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下:
使用反向插入方法
这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用连缀方法更简洁也更有效。可是我们现在没有办法这样做,因为this是.insertBefore()的目标,是.appendTo()的内容。此时,利 用反向插入方法,可以帮我们解决问题。
像.insertBefore()和.appendTo()这样的插人方法,一般都有一个对应的反向方法。反 向方法也执行相同的操作,只不过“目标”和“内容”正好相反。例如:
Hello
').appendTo('#container');与下面的代码结果一样:
Hello
');下面我们就使用.before()代替.insertBefore()来重构代码,参见如下代码:
var $notes = $('
.insertBefore('#footer');
$('span.footnote').each(function(index) {
$(this)
.before('' + (index + 1) + '')
.appendTo($notes)
.wrap('
});
});
插入方法回调
反向插入方法可以接受一个函数作为参数,与.attr()和.css()方法类似。 这个传入的函数会针对每个目标元素调用,返回被插入的HTML字符串。在此其 实也可以使用这个技术,但由于这样就需要对每个脚注都重复一遍相同的操作, 所以还是使用一个.each()方法来得更清晰。
现在,我们可以考虑最后一步了:在正文中相应的位置创建指向匹配脚注的链接和在脚注中 创建指向正文位置的链接。为此,每个脚注需要4处标记:两个链接,一个在正文中,一个在脚 注中;以及两个id属性。因为这样一来,传人.before()方法的参数会变得复杂,所以有必要 在这里使用一种新的创建字符串的方法。
在上面的代码中,我们使用了 操作符来拼接字符串。使用+操作符虽然没有问题,但
如果要拼接的字符串太多,那看起来就会很乱。所以,我们在这里使用数组的.join()方法来构 建一个更大的数组。换句话说,下面的两行代码结果相同。
var str = ['a', 'b', 'c'].join('');
虽然这个例子要求输人更多字符,但使用.join()方法可以避免因要拼接的字符串过多而引 起混乱。下面我们再看看示例代码吧,如下代码就是使用.join()创建字符串的过程。
var $notes = $('
.before([
'', index + 1,
''
].join(''))
.appendTo($notes)
.wrap('
});
});
注意,由于数组的每个元素会分别执行运算,因此不再需要把index+1放在括号里了。 使用这种技巧,可以为脚注标签添加一个指向页面底部的链接和一个唯一的id值。同时在后 面的方法中,也要给
var $notes = $('
.before([
'',
'', index + 1,
''
].join(''))
.appendTo($notes)
.wrap('
});
});
添加了这些标记之后,每个脚注标签就有了指向页面底部对应脚注的链接。那么所剩的就是 在脚注中创建一个指向其上下文的链接了。为此,可以使用.appendTo()的反向方 法.append(),参见如下代码:
var $notes = $(' '"id="context-', index + 1,
'"class = "context__>',
'', index + 1,
''
].join(''))
.appendTo($notes)
.append([
' (');
});
});
注意,这里的href指向了脚注标签中的id。运行结果中,可以看到包含新链接的脚注。
希望本文所述对大家的jQuery程序设计有所帮助。

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

Atom编辑器mac版下载
最流行的的开源编辑器

VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器

Dreamweaver CS6
视觉化网页开发工具