<!DOCTYPE html>
<!--
声明：练习素材来自于jquery基础教程
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flatland</title>
<link rel="stylesheet" href="../css/05.css" type="text/css" />
<script src="../lib/jquery.js"></script>
<script>
/*1、操作属性*/
//之前.addClass()或者removeClass()其实操作的是DOM属性className
/*非类属性*/
//给每个a链接加rel属性以及title属性，以及id属性，要求每个id值是唯一的
//注意：jQuery的.css()和.each()方法的另一个特性： 值回调
// $(document).ready(function(){
// $('div.chapter a').attr({
// rel : 'external',
// title : 'Learn more at Wikipedia',
// //值回调：值回调其实就是给参数传入一个函数，而不是传入具体的值。这个函数会针对匹配的元素集
// //中的每个元素都调用一次，调用后的返回值将作为属性的值
// id : function(index,oldValue){
// return 'Wikipedia-'+index;
// }
// });
// });
//为了把.attr()方法的使用讲得更透彻，下面演示怎么让这些链接的title属性更具体地包
//含链接的目标
$(document).ready(function(){
$('div.chapter a[href*="wikipedia"]').attr({
rel:'external',
title:function(){
return 'Learn more about '+$(this).text()+'at Wikipedia';
},
id:function(index,oldValue){
return 'Wikipedia-'+index;
}
});
});
/*prop()可以获取布尔类型的值，而attr()获取的值是String类型的*/
$(document).ready(function(){
$('#math').prop('checked',true);
});
/*表单控件的值*/
// //取得文本输入框的当前值
// var inputValue = $('#my-input').val();
// //取得选项列表的当前值
// var selectValue = $('#my-select').val();
// //设置单选列表的值
// $('#my-single-select').val('value3');
// //设置多选列表的值
// $('#my-multi-select').val(['value1', 'value2']);
/*2、DOM树操作*/
/*
*插入方法：
* 以下这四种方法相当于ctrl+x的操作一样
* (1).insertBefore()在现有元素外部、之前添加内容
* (2).prependTo()将内容添加到现有元素的最前面
* (3).appendTo()将内容添加到现有元素的最后面
* (4).insertAfter()在现有元素外部、之后添加内容
* */
/*重新认识$()函数*/
$(document).ready(function(){
//创建新元素
$('<a href="#top">back to top</a>').insertAfter('div.chapter p');
$('<a id="top"></a>').prependTo('body');
});
//移动元素
// $(document).ready(function(){
// $('span.footnote').insertBefore('#footer');
// });
//包装元素
/**
* 包装方法：
* (1)wrap()为当前DOM对象的每一个元素都包装一个DOM元素
* (2)wrapAll()为当前DOM对象的整体元素包装一个DOM元素
* */
// $(document).ready(function(){
// $('span.footnote').insertBefore('#footer')
// .wrapAll('<ol id="notes"></ol>')
// .wrap('<li></li>');
// });
//以上的方法进行一个重构
// $(document).ready(function(){
// var $notes = $('<ol id="notes"></ol>').insertBefore('#footer');
// $('span.footnote').each(function(index){
// $('<sup>'+(index+1)+'</sup>').insertBefore(this);
// $(this).appendTo($notes).wrap('<li></li>');
// });
// });
/*使用反向插入方法*/
// $(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()方法来得更清晰。
* */
$(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(''))
.append([' (<a href="#context-',index+1,'">context</a>'].join(''))
.appendTo($notes).wrap('<li id="footnote-'+(index+1)+'"></li>');
});
});
</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.…</p>
<p>Rarely—in proportion to the vast numbers of Isosceles births—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.…</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>
<div>
<form id='fm'>
<input type="checkbox" checked="checked" id="music"/>音乐<br />
<input type="checkbox" id="sprot"/>体育<br />
<input type="checkbox" id="math"/>数学
</form>
</div>
</body>
</html>
扫一扫
1481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
