2021-11-11 jQuery的文档处理

1.attr()和removeAttr()

2.标签内部插入

3.标签外部插入

4.warp()、warpAll()、warpInner()

5.html()、text()和end()

6.replaceAll()和replaceWith()

7.empty()、remove()、detach()

8.join()和clone()

附录代码：

1.attr()和removeAttr()

attr() 添加设置属性

removeAttr() 删除属性

//需求1，将类chapter的div下的所有超链接表明是站外链接，不被搜索引擎抓取//给链接添加了rel属性$("div.chapter a").attr({rel:"external"});
//需求2，再给链接添加title属性$("div.chapter a").attr({//告诉搜索引擎，不是本站连接，作用等于target="_blank"设置站外跳转rel:"external",title: "Learn more at Wikipedia"//title鼠标移入时显示提示框});//需求3，再给链接添加id "wikilink序号"$("div.chapter a").attr({rel:"external",title:"Learn more at Wikipedia",//index是当前元素索引值id: function(index,oldValue){//console.log(index)return "wikilink-" + index;}})$("div.chapter a").click(function(e) {e.preventDefault();console.log($(this).attr("id"))});

2.标签内部插入

目标.append(内容) 内部，后面

内容.appendTo(目标) 内部，后面

目标.prepend(内容) 内部，前面

内容.prependTo(目标) 内部，前面

   //需求8 将锚记插入到body起始标记之后         $("<a href='#top'>back to top</a>").insertAfter("div.chapter p");$("body").prepend($("<a id='top'></a>"));//prepend插入到内部文本之前console.log($("body").html())

3.标签外部插入

目标.after(内容) 外部，后面

内容.insertAfter(目标) 外部，后面

目标.before(内容) 外部，前面

内容.insertBefore(目标) 外部，前面

   //需求6，创建一个锚记对象//创建了，但未在页面使用$("<a href='#top'>back to top</a>")$("<a id='top'></a>");//需求7，将链接插入在类chapter的div中每个段落标记的外面之后$("<a href='#top'>back to top</a>").insertAfter("div.chapter p");$("<a id='top'></a>");//insertBefore();  //插入到标签外部之前//需求12 为span原有的位置加入脚注编号var $notes = $("<ol id='notes'></ol>").insertBefore("#footer");$("span.footnote").each(function(index, element) {//sup上标文本，如平方的2上标$("<sup>"+(index + 1)+"</sup>").insertBefore($(this));$(this).appendTo($notes).wrap("<li></li>");});//需求13 使用反向插入方法before() 代替 insertBefore()var $notes = $("<ol id='notes'></ol>").insertBefore("#footer");$("span.footnote").each(function(index, element) {//此处变成了 目标.before(内容)$(this).before("<sup>"+ (index+1) +"</sup>").appendTo($notes).wrap("<li></li>");});//insert  , xxTo  都是 内容 目标，目标通常是已经存在的，所以可以传字符串

4.wrap()、wrapAll()、wrapInner()

集合.wrap(对象) 每个元素外部使用该对象

集合.wrapAll(对象) 所有元素外部使用该对象

集合.wrapInner(对象) 在每个元素的"内容上" 使用该对象

     //wrapAll将三个span最外层包裹//wrap给三个span分别包裹//需求10 将上面3个span 加到<ol>中，再给每个span 加到<li>中$("span.footnote").insertBefore("#footer").wrapAll("<ol id='notes'></ol>").wrap("<li><li>");

5.html()、text()和end()

html() 替换、获取html代码， //html()函数可以获取或者设置网页代码，会执行

text() 设置、获取标记文本，//text()函数会自动过滤掉标签和样式

end() 返回最初的连缀对象

//需求19：//end()函数返回最初的连缀的对象//html()函数可以获取或者设置网页代码，会执行，参考innerHtml$("span.pull-quote").each(function (index,element) {var $p = $(this).parent('p');$p.css("position","relative");$cloneSpan = $(this).clone();//end()返回的是$cloneSpan$cloneSpan.addClass("pulled").find('span.drop').html('&hellip;').end().prependTo($p);})//获取 设置对象的html代码$("h1").html('<i> hello xxx </i>');
//需求20：此处text()函数目的是为了过滤标签及样式,会自动过滤掉标签和样式$('span.pull-quote').each(function(index, element) {var $p = $(this).parent('p');$p.css('position','relative');var $s = $(this).clone();$s.addClass('pulled').find('span.drop').html('&hellip;').end().text($s.text())    //获取文本时没有任何标记.prependTo($p);});

6.replaceAll()和replaceWith()

内容.replaceAll(目标) 替换

目标.replaceWith(内容) 替换

7.empty()、remove()、detach()

对象.empty() 移除对象的内容，包括子节点(删除匹配的元素集合中所有的子节点。)

对象.remove() 移除对象，但不会在jQuery对象中删除，可恢复，

但不保留jquery数据，如事件，绑定数据会丢失。

对象.detach() 移除对象，不同于remove(),保留JQuery数据

8.join()和clone()

join():用于把数组中的所有元素转换一个字符串。元素是通过指定的分隔符进行分隔的。（是js中的方法）

clone():克隆(复制),克隆匹配的DOM元素并且选中这些克隆的副本。

   //需求14： 使用join()解决字符串追加var $notes = $("<ol id='notes'></ol>").insertBefore("#footer");$("span.footnote").each(function(index, element) {$(this).before(["<sup>",index+1,"</sup>"].join("")).appendTo($notes).wrap("<li></li>");});//需求18//clone()：克隆（复制）$('span.pull-quote').each(function(index, element) {var $p = $(this).parent('p');$p.css('position','relative');var $cloneSpan = $(this).clone();$cloneSpan.addClass('pulled').prependTo($p);});

附录代码：

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Flatland</title><link rel="stylesheet" href="style/05.css" type="text/css" /><script src="js/jquery.js"></script></head><body><div id="container"><h1 id="f-title">Flatland: A Romance of Many Dimensions</h1><div id="f-author">by Edwin A. Abbott</div><h2>Part 1, Section 3</h2><h3 id="f-subtitle">Concerning the Inhabitants of Flatland</h3><div id="excerpt">an excerpt</div><div class="chapter"><p class="square">Our Professional Men and Gentlemen are Squares (to which class I myself belong) and Five-Sided Figures or <a href="http://en.wikipedia.org/wiki/Pentagon">Pentagons</a>.</p><p class="nobility hexagon">Next above these come the Nobility, of whom there are several degrees, beginning at Six-Sided Figures, or <a href="http://en.wikipedia.org/wiki/Hexagon">Hexagons</a>, and from thence rising in the number of their sides till they receive the honourable title of <a href="http://en.wikipedia.org/wiki/Polygon">Polygonal</a>, or many-Sided. Finally when the number of the sides becomes so numerous, and the sides themselves so small, that the figure cannot be distinguished from a <a href="http://en.wikipedia.org/wiki/Circle">circle</a>, he is included in the Circular or Priestly order; and this is the highest class of all.</p><p><span class="pull-quote">It is a Law of Nature <span class="drop">with us</span> that a male child shall have <strong>one more side</strong> than his father</span>, so that each generation shall rise (as a rule) one step in the scale of development and nobility. Thus the son of a Square is a Pentagon; the son of a Pentagon, a Hexagon; and so on.</p><p>But this rule applies not always to the Tradesman, and still less often to the Soldiers, and to the Workmen; who indeed can hardly be said to deserve the name of human Figures, since they have not all their sides equal. With them therefore the Law of Nature does not hold; and the son of an Isosceles (i.e. a Triangle with two sides equal) remains Isosceles still. Nevertheless, all hope is not such out, even from the Isosceles, that his posterity may ultimately rise above his degraded condition.&hellip;</p><p>Rarely&mdash;in proportion to the vast numbers of Isosceles births&mdash;is a genuine and certifiable Equal-Sided Triangle produced from Isosceles parents. <span class="footnote">"What need of a certificate?" a Spaceland critic may ask: "Is not the procreation of a Square Son a certificate from Nature herself, proving the Equal-sidedness of the Father?" I reply that no Lady of any position will marry an uncertified Triangle. Square offspring has sometimes resulted from a slightly Irregular Triangle; but in almost every such case the Irregularity of the first generation is visited on the third; which either fails to attain the Pentagonal rank, or relapses to the Triangular.</span> Such a birth requires, as its antecedents, not only a series of carefully arranged intermarriages, but also a long-continued exercise of frugality and self-control on the part of the would-be ancestors of the coming Equilateral, and a patient, systematic, and continuous development of the Isosceles intellect through many generations.</p><p><span class="pull-quote">The birth  of a True Equilateral Triangle from Isosceles parents is the subject of rejoicing in our country <span class="drop">for many furlongs round</span>.</span> After a strict examination conducted by the Sanitary and Social Board, the infant, if certified as Regular, is with solemn ceremonial admitted into the class of Equilaterals. He is then immediately taken from his proud yet sorrowing parents and adopted by some childless Equilateral. <span class="footnote">The Equilateral is bound by oath never to permit the child henceforth to enter his former home or so much as to look upon his relations again, for fear lest the freshly developed organism may, by force of unconscious imitation, fall back again into his hereditary level.</span></p><p>How admirable is the Law of Compensation! <span class="footnote">And how perfect a proof of the natural fitness and, I may almost say, the divine origin of the aristocratic constitution of the States of Flatland!</span> By a judicious use of this Law of Nature, the Polygons and Circles are almost always able to stifle sedition in its very cradle, taking advantage of the irrepressible and boundless hopefulness of the human mind.&hellip;</p><p>Then the wretched rabble of the Isosceles, planless and leaderless, are ether transfixed without resistance by the small body of their brethren whom the Chief Circle keeps in pay for emergencies of this kind; or else more often, by means of jealousies and suspicious skillfully fomented among them by the Circular party, they are stirred to mutual warfare, and perish by one another's angles. No less than one hundred and twenty rebellions are recorded in our annals, besides minor outbreaks numbered at two hundred and thirty-five; and they have all ended thus.</p></div><div id="footer"><p>Read the <a href="http://web.archive.org/web/20050208012252/http://www.ibiblio.org/eldritch/eaa/FL.HTM">complete text of <i>Flatland</i></a>.</p></div></div></body>
</html>

/***************************************Default Styles
***************************************/html, body {margin: 0;padding: 0;
}body {font: 62.5% Verdana, Helvetica, Arial, sans-serif;color: #000;background: #fff;
}
#container {font-size: 1.2em;margin: 10px 2em;
}h1 {font-size: 2.5em;margin-bottom: 0;
}h2 {font-size: 1.3em;margin-bottom: .5em;
}
h3 {font-size: 1.1em;margin-bottom: 0;
}code {font-size: 1.2em;
}a {color: #06581f;
}/***************************************Chapter Styles
***************************************/.chapter {margin-right: 200px;
}
#f-title {font-size: 1.5em;
}
#excerpt {font-style: italic;
}span.footnote {font-style: italic;font-family: "Times New Roman", Times, serif;display: block;margin: 1em 0;
}.chapter span.footnote {display: inline;
}
.text-reference {font-weight: bold;
}#notes {margin-top: 1em;border-top: 1px solid #dedede;
}
#notes li {margin: 1em 0;
}#footer {margin-top: 1em;border-top: 1px solid #dedede;
}.pulled {position: absolute;width: 120px;top: -20px;right: -180px;padding: 20px;font: italic 1.2em "Times New Roman", Times, serif;background: #e5e5e5;border: 1px solid #999;border-radius: 8px;box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6);
}.inhabitants {border-left: 5px solid #800;padding-left: 5px;
}

2021-11-11 jQuery的文档处理相关推荐

Ubuntu 11.04解决txt文档中文乱码方法
Ubuntu 11.04解决txt文档中文乱码方法: $ gconftool-2 --set --type=list --list-type=string /apps/gedit-2/preferen ...
悉数11种主流NoSQL文档型数据库
悉数11种主流NoSQL文档型数据库文档型数据库是NoSQL中非常重要的一个分支,它主要用来存储.索引并管理面向文档的数据或者类似的半结构化数据.顾名思义,文档型数据库(面向文档数据库)的关键核心概 ...
JDK 11 API中文帮助文档.CHM文档无法打开问题
JDK 11 API中文帮助文档.CHM文档无法打开问题 1)开始–运行–输入"regedit",打开注册表,找到以下分支:找到计算机\HKEY_LOCAL_MACHINE\SOF ...
计算机毕业设计Java某银行OA系统某银行OA系统演示2021(源代码+数据库+系统+lw文档)
计算机毕业设计Java某银行OA系统某银行OA系统演示2021(源代码+数据库+系统+lw文档) 计算机毕业设计Java某银行OA系统某银行OA系统演示2021(源代码+数据库+系统+lw文档) 本源 ...
JAVA毕业设计飞机航班信息查询系统演示视频2021计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计飞机航班信息查询系统演示视频2021计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计飞机航班信息查询系统演示视频2021计算机源码+lw文档+系统+调试部署+数据库本源 ...
JAVA毕业设计家电售后管理系统演示录像2021计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计家电售后管理系统演示录像2021计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计家电售后管理系统演示录像2021计算机源码+lw文档+系统+调试部署+数据库本源码技术栈 ...
JAVA毕业设计高校宿舍管理系统演示视频2021计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计高校宿舍管理系统演示视频2021计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计高校宿舍管理系统演示视频2021计算机源码+lw文档+系统+调试部署+数据库本源码技术栈 ...
JAVA毕业设计家庭食谱管理系统2021计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计家庭食谱管理系统2021计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计家庭食谱管理系统2021计算机源码+lw文档+系统+调试部署+数据库本源码技术栈: 项目架构:B ...
jquery获取文档高度和窗口高度的例子
jquery获取文档高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...
jQuery基础文档(持续更新)
文章目录 jQuery基础文档(持续更新) 1 jQuery入门仪式: jQuery基础文档(持续更新) 1 jQuery入门仪式: 还是先上一段代码吧,对照这看: <!DOCTYPE html ...

2021-11-11 jQuery的文档处理

1.attr()和removeAttr()

2.标签内部插入

3.标签外部插入

4.wrap()、wrapAll()、wrapInner()

5.html()、text()和end()

6.replaceAll()和replaceWith()

7.empty()、remove()、detach()

8.join()和clone()

附录代码：

2021-11-11 jQuery的文档处理相关推荐

最新文章

热门文章