2021-11-11 jQuery的文档处理

陌殇殇

已于 2024-07-02 15:04:17 修改

阅读量849

点赞数

分类专栏：前端文章标签： jquery javascript 前端

于 2021-11-11 19:59:34 首次发布

本文链接：https://blog.csdn.net/weixin_54158370/article/details/121274899

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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;
}