jquery dom 应用

最新推荐文章于 2022-12-11 16:06:27 发布

fonyer

最新推荐文章于 2022-12-11 16:06:27 发布

阅读量108

点赞数

本文链接：https://blog.csdn.net/fonyer/article/details/83119327

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.footnote{color:#f00;}
.square{font-size:16px;
color:#0f0;
}
span.footnote{
font-style:italic;
font-family:"Times New Roman",Times,serif;
display:block;
margin:1em 0;
}
.chapter span.footnote{
display:inline;
}
.pulled{
background:#e5e5e5;
position:absolute;
width:145px;
top:-20px;
right:80px;
padding:12px 5px 12px 10px;
font:italic 0.8em "Times New Roman",Times,serif;
}
</style>
<script src="../jquery.js"/></script>
<script language="javascript">
jQuery(function(){
/* $("div.chapter a").each(function(index){
   var $link = $(this);
       $link.attr({'rel':'external','id':'wikilink-'+index,'title':"learn more "+$link.text()});
   })*/

    //insertBefore before insertAfter after 区别可以用来移动元素 prependTo 插入锚
   //$("<a href='#top'>back to top</a>").insertAfter('div.chapter p');
/* $('div.chapter p:gt(2)').after("<a href='#top'>back to top</a>");
   $("<a id='top'></a>").prependTo('body');

   $('p.footnote').insertBefore("#excerpt");
   $('<ol id="notes"></ol>').insertAfter("div.chapter");
   //appendTo 插入到元素的末尾 wrap 包装
   $('span.footnote').each(function(index){
      $(this).before(["<a href='#foot-note-",index+1," 'id='context-",index+1,"' class='context'",'<sup>'+(index+1)+'</sup>','</a>'].join('')).appendTo('#notes')
      .append(" (<a href='#context-"+(index+1)+"'>context</a>)")
      .wrap("<li id='foot-note-"+(index+1)+"'></li>");
   })
   $("div.chapter p:eq(0)").clone().insertBefore(".footnote");
   $(".square").click(function(){
   alert("clone");
   })*/
   $("span.pull-quote").each(function(){
   var $paress = $(this).parent('p');
   $paress.css('position','relative');
   $clones = $(this).clone();

    $clones.addClass('pulled').find("span.drops").html("…").end().prependTo($paress);
   var ctext = $clones.text();
    $clones.html(ctext);
   })
})
</script>
</head>
<body>
<p>
  <span class="pull-quote">
  11111111111 <a href=''>Concerning</a> the Inhabitants of Flatland
  </span>
  <span class="drops">
   Linkin Park - Pushing MeLinkin Park - Pushing Me
  </span>
  I'll take the blame for the sake of being with you
(Everything falls apart
Even the people who never frown
Eventually break down)I'll take the blame for the sake of being with you
(Everything falls apart
Even the people who never frown
Eventually break down)
</p>
<p>
  <span class="pull-quote">
  22222Concerning the Inhabitants of Flatland22222222
  </span>
  <span class="drops">
   Linkin Park - Pushing Me Linkin Park - Pushing Me
  </span>
  I'll take the blame for the sake of being with you
(Everything falls apart
Even the people who never frown
Eventually break down)I'll take the blame for the sake of being with you
(Everything falls apart
Even the people who never frown
Eventually break down)
   </p>
<h1 id="f-title">A Romance of Many</h1>
<div id="f-author">by Edwin A.Abbott</div>
<h2>Part Section</h2>
<h3 id="f-subtitle">Concerning the Inhabitants of Flatland</h3>
<div id="excerpt">an Excerpt</div>
<span class="footnote">This is the last time
I'll take the blame for the sake of being with you
(Everything falls apart
Even the people who never frown
Eventually break down)
The sacrifice of hiding in a lie
(Everything has to end
</span>
<div class="chapter">
<p class="square">Linkin Park - Pushing Me <a href="http://en.wikipedia.org/wiki/Pentagon">Pentagon</a></p>
<p class="nobility">
    Linkin Park - Pushing Me Away
I've lied to you
The same way that I always do
This is the last smile
<a href="http://en.wikipedia.org/wiki/Hexagons">Hexagons</a>
That I'll fake for the sake of being with you
(Everything falls apart
Even the people who never frown
Eventually break down)
The sacrifice of hiding in a lie
(Everything has to end
You'll soon find we're out of time
To watch it all unwind)
The sacrifice is never knowing
  Why I never walked away
  Why I <a href="http://en.wikipedia.org/wiki/played">played</a> myself this way
  Now I see your testing me pushes me away
  Why I never walked away
  Why I played myself this way
  Now I see your testing me pushes me away
  I've tried like you

To do everything you wanted too
<span class="footnote">This is the last time
I'll take the blame for the sake of being with you
(Everything falls apart
Even the people who never frown
Eventually break down)
The sacrifice of hiding in a lie
(Everything has to end
</span>
  You'll soon find we're out of time
  To watch it all unwind)
  The sacrifice is never knowing
  Why I never walked away
  Why I played myself this way
  Now I see your testing me pushes me away
  Why I never walked away
  Why I played myself this way
</p>

<p class="footnote">
This is how we find how it all unwinds)
The sacrifice is never knowing
</p>

</div>
</body>
</html>

fonyer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery dom 应用

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta h
复制链接

扫一扫