Java Web：jquery，基礎(chǔ)DOM和CSS操作 ，PPT，閱讀材料，作業(yè)，筆記，代碼【詩(shī)書畫唱】
元素樣式操作例子：
$(function(){
//鼠標(biāo)點(diǎn)擊次數(shù)
var count = 0;
$('#dv').click(function(){
//this就是id為dv的div
count ++;
$(this).toggleClass('bg', count% 3 == 0);
});
})
<div id="dv">Hello world</div>
DOM創(chuàng)作例子：
<!doctype html>
<html>
? ? <head>
? ? ? ? <title>Document</title>
<style type="text/css">
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 {
? 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;
}
</style>
<script type="text/javascript" srcc="jquery-1.11.1.min.js"></script>
? ? ? ? <script type="text/javascript">
? ? $(document).ready(function() {
//非樣式屬性
? ? ? ? ? ? ? ? $('div.chapter a[href*="wikipedia"]').attr({? ? ?
rel: 'external',? ? ?
title: function() {? ? ? ?
return 'Learn more about ' + $(this).text() + ' at Wikipedia.';? ? ?
},
//參數(shù)oldValue為修改之前該屬性的值
id: function(index, oldValue) {? ? ? ?
return 'wikilink-' + index;? ? ?
}? ?
});??
//DOM元素屬性
//取得"checked"屬性的當(dāng)前值 var currentlyChecked = $('.my-checkbox').prop('checked');?
//設(shè)置"checked"屬性的值 $('.my-checkbox').prop('checked', false);?
//prop()方法與attr()方法沒有什么不同，比如它們都可以一次性接受一個(gè)包含多個(gè)值的對(duì)象，也支持值回調(diào)函數(shù)。
//表單控件的值
//在取得和設(shè)置表單控件的值時(shí)，不要使用.attr()方法。而對(duì)于選項(xiàng)列表呢，連.prop()方法也不要使用。建議使用jQuery提供的.val() 方法
//取得文本輸入框的當(dāng)前值?
//var inputValue = $('#my-input').val();?
//取得選項(xiàng)列表的當(dāng)前值?
//var selectValue = $('#my-select').val();?
//設(shè)置單選列表的值?
//$('#my-single-select').val('value3');?
//設(shè)置多選列表的值?
//$('#my-multi-select').val(['value1', 'value2']);?
//DOM樹操作
//創(chuàng)建新元素
$('<a href="#top">back to top</a>').insertAfter('div.chapter p');? ?
$('<a id="top"></a>').prependTo('body');? ?
//在其他元素前、后插入新內(nèi)容的一套方案
//insertBefore()在現(xiàn)有元素外部、之前添加內(nèi)容； ??
//prependTo()在現(xiàn)有元素內(nèi)部、之前添加內(nèi)容； ??
//appendTo()在現(xiàn)有元素內(nèi)部、之后添加內(nèi)容； ??
//insertAfter()在現(xiàn)有元素外部、之后添加內(nèi)容。?
//移動(dòng)元素
//提取腳注，然后把它們插入到文檔的底部，具體來說，就是插入到<div>和<div id = "footer">之間。
//$('span.footnote').insertBefore('#footer');?
//包裝元素
//變化1：隱式迭代包裝
/*$('span.footnote').insertBefore('#footer')
.wrapAll('<ol id="notes"></ol>')? ? ?
.wrap('<li></li>');*/
//變化2：顯示迭代包裝
? ? ? ? ? ? ? ? /*var $notes = $('<ol id="notes"></ol>').insertBefore('#footer');? ?
$('span.footnote').each(function(index) {
//為每個(gè)標(biāo)注編號(hào)
//這里的操作順序十分重要。必須要在腳注被移動(dòng)之前插入這個(gè)編碼，否則就找不到原始位置了
$('<sup>' + (index + 1) + '</sup>').insertBefore(this);? ? ?
$(this).appendTo($notes).wrap('<li></li>');? ?
});*/??
//變化3：反向插入
//像insertBefore()和appendTo()這樣的插入方法，一般都有一個(gè)對(duì)應(yīng)的反向方法。反向方法也執(zhí)行相同的操作，只不過“目標(biāo)”和“內(nèi)容”正好相反
/*var $notes = $('<ol id="notes"></ol>').insertBefore('#footer');? ?
$('span.footnote').each(function(index) {? ? ?
? ? $(this).before('<sup>' + (index + 1) + '</sup>')? ? ? ?
.appendTo($notes)? ? ? ?
.wrap('<li></li>');? ?
});*/
//變化4:減少字符串拼接的+號(hào)
var $notes = $('<ol id="notes"></ol>').insertBefore('#footer');? ?
$('span.footnote').each(function(index) {? ? ?
? ? $(this).before([
? ? //在文本中的位置上創(chuàng)建一個(gè)指向?qū)?yīng)腳注的鏈接
? ? '<a href="#footnote-',? ? ? ? ?
index + 1,? ? ? ? ?
'" id="context-',? ? ? ? ?
index + 1,? ? ? ? ?
'">',? ? ? ? ?
'<sup>',? ? ? ? ?
index + 1,? ? ? ? ?
'</sup></a>'
].join(''))? ? ? ?
.appendTo($notes)
? ? //在腳注中創(chuàng)建返回文本位置的鏈接(context鏈接)
.append([
? ? ' (<a href="#context-',? ? ? ? ?
index + 1,? ? ? ? ?
'">context</a>)'? ? ? ?
].join(''))?
.wrap('<li id="footnote-' + (index + 1) + '"></li>');? ?
});
//復(fù)制元素
//在復(fù)制元素時(shí)，需要使用jQuery的clone()方法，這個(gè)方法能夠創(chuàng)建任何匹配的元素集合的副本以便將來使用
//創(chuàng)建<div>中第一段落的副本并插入到<div>前
? ? ? ? ? ? ? ? //$('div.chapter p:eq(0)').clone().insertBefore('div.chapter');?
//連同事件一起復(fù)制?
//在默認(rèn)情況下，clone()方法不會(huì)復(fù)制匹配的元素或其后代元素中綁定的事件。
//不過，可以為這個(gè)方法傳遞一個(gè)布爾值參數(shù)，將這個(gè)參數(shù)設(shè)置為true， 就可以連同事件一起復(fù)制，即clone(true)。
//通過復(fù)制創(chuàng)建突出引用
/*$('span.pull-quote').each(function(index) {? ? ?
var $parentParagraph = $(this).parent('p');? ? ?
//父容器p背景色被染成了紅色，引用的內(nèi)容距離上p頂-20px
//當(dāng)為pull-quote設(shè)置right屬性時(shí)，值為0會(huì)使 pull-quote的右邊與其父元素的右邊對(duì)齊。
//如果設(shè)置為-180則表示往反方向（左邊）移動(dòng)
$parentParagraph.css('position', 'relative').css('backgroundColor','red');? ? ?
var $clonedCopy = $(this).clone();? ? ?
$clonedCopy.addClass('pulled').prependTo($parentParagraph);? ?
});*/
//設(shè)置內(nèi)容
$('span.pull-quote').each(function(index) {? ? ?
var $parentParagraph = $(this).parent('p');? ? ?
$parentParagraph.css('position', 'relative');??
? ? ? ? ? ? ? ? ? ? var $clonedCopy = $(this).clone();? ? ?
$clonedCopy.addClass('pulled').
find('span.drop')
//html實(shí)體表示省略號(hào)
.html('…')
.end()
.prependTo($parentParagraph);? ?
});
//dom操作總結(jié)
//(1) 要在HTML中創(chuàng)建新元素，使用$()函數(shù)。?
//(2) 要在每個(gè)匹配的元素中插入新元素，使用： ??
//append() ??
//appendTo() ??
//prepend() ??
//prependTo()?
? ? ? ? ? ? ? ? //(3) 要在每個(gè)匹配的元素相鄰的位置上插入新元素，使用： ??
//after() ??
//insertAfter() ??
//before() ??
//insertBefore()?
//(4) 要在每個(gè)匹配的元素外部插入新元素，使用： ??
//wrap() ??
//wrapAll() ??
//wrapInner()?
//(5) 要用新元素或文本替換每個(gè)匹配的元素，使用： ??
//html() ??
//text() ??
//replaceAll() ??
//replaceWith()?
//(6) 要移除每個(gè)匹配的元素中的元素，使用： ??
//empty()?
//(7) 要從文檔中移除每個(gè)匹配的元素及其后代元素，但不實(shí)際刪除它們，使用： ??
//remove() ??
//detach()
});?
</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>
<p>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>It is a Law of Nature <span>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>"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>The birth? of a True Equilateral Triangle from Isosceles parents is the subject of rejoicing in our country <span>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>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>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>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
? ? ? ? ? ? </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>
作業(yè)：
? <!--
(1) 修改添加back to top鏈接的代碼，以便這些鏈接只從第四段后面才開始出現(xiàn)。?
(2) 在單擊back to top鏈接時(shí)，為每個(gè)鏈接后面添加一個(gè)新段落，其中包含You were here字樣。 確保鏈接仍然有效。?
(3) 在單擊作者名字時(shí)，把文本改為粗體（通過添加一個(gè)標(biāo)簽，而不是操作類或CSS屬性）。?
(4) 挑戰(zhàn)：在隨后單擊粗體作者名字時(shí)，刪除之前添加的<b>元素（也就是在粗體文本與正常文本之間切換）。?
(5) 挑戰(zhàn)：為正文中的每個(gè)段落添加一個(gè)inhabitants類，但不能調(diào)用.addClass()方法(css())。 確保不影響現(xiàn)有的類。? ?
-->
//1
$(document).ready(function(){
? ? var $p=$('div.chapter p').eq(2).nextAll();
? ? $('<a href="#top">back to top</a>').insertAfter($p);
? ? $('<a id="top"></a>').prependTo('body');
})
//2
$(document).ready(function(){
? ? var $p=$('div.chapter p').eq(2).nextAll();
? ? $('<a href="#top">back to top</a>').insertAfter($p);
? ? $('<a id="top"></a>').prependTo('body');
? ? $('a[href$=#top]').click(function(){
? ? ? ? $('<p>You were here</p>').insertAfter(this);
? ? })
})
//3
$(document).ready(function(){
? ? var $name=$('div.chapter p a');
? ? $name.click(function(){
? ? ? ? $(this).wrap('<b></b>');
? ? })
})
//4
$(document).ready(function(){
? ? ?var $name=$('#f-author');
? ? ?$name.click(function(){
? ? ? ? ?if($(this).html()=="by Edwin A. Abbott"){
? ? ? ? ? ? ?$(this).html('<b>by Edwin A. Abbott</b>');
? ? ? ? ?}else{
? ? ? ? ?$(this).html('by Edwin A. Abbott');
? ? ? ? ? ? ? }
? ? ?})
})
//5
$(document).ready(function(){
? ? $('div.chapter p').attr({
? ? ? ? class:'+= inhabitants'
? ? });
})
<!doctype html>
<html>
? ? <head>
? ? ? ? <title>Document</title>
<style type="text/css">
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 {
? 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;
}
</style>
<script type="text/javascript" srcc="jquery-1.11.1.min.js"></script>
? ? ? ? <script type="text/javascript">
? ? $(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 'wikilink-' + index;? ? ?
}? ?
});??
$('<a href="#top">back to top</a>').insertAfter('div.chapter p');? ?
$('<a id="top"></a>').prependTo('body');? ?
var $notes = $('<ol id="notes"></ol>').insertBefore('#footer');? ?
$('span.footnote').each(function(index) {? ? ?
? ? $(this).before([
? ? '<a href="#footnote-',? ? ? ? ?
index + 1,? ? ? ? ?
'" id="context-',? ? ? ? ?
index + 1,? ? ? ? ?
'">',? ? ? ? ?
'<sup>',? ? ? ? ?
index + 1,? ? ? ? ?
'</sup></a>'
].join(''))? ? ? ?
.appendTo($notes)
.append([
? ? ' (<a href="#context-',? ? ? ? ?
index + 1,? ? ? ? ?
'">context</a>)'? ? ? ?
].join(''))?
.wrap('<li id="footnote-' + (index + 1) + '"></li>');? ?
});
$('span.pull-quote').each(function(index) {? ? ?
var $parentParagraph = $(this).parent('p');? ? ?
$parentParagraph.css('position', 'relative');??
? ? ? ? ? ? ? ? ? ? var $clonedCopy = $(this).clone();? ? ?
$clonedCopy.addClass('pulled').
find('span.drop')
.html('…')
.end()
.prependTo($parentParagraph);? ?
});
});?
//1
$(document).ready(function(){
? ? var $p=$('div.chapter p').eq(2).nextAll();
? ? $('<a href="#top">back to top</a>').insertAfter($p);
? ? $('<a id="top"></a>').prependTo('body');
})
//2
$(document).ready(function(){
? ? var $p=$('div.chapter p').eq(2).nextAll();
? ? $('<a href="#top">back to top</a>').insertAfter($p);
? ? $('<a id="top"></a>').prependTo('body');
? ? $('a[href$=#top]').click(function(){
? ? ? ? $('<p>You were here</p>').insertAfter(this);
? ? })
})
//3
$(document).ready(function(){
? ? var $name=$('div.chapter p a');
? ? $name.click(function(){
? ? ? ? $(this).wrap('<b></b>');
? ? })
})
//4
$(document).ready(function(){
? ? ?var $name=$('#f-author');
? ? ?$name.click(function(){
? ? ? ? ?if($(this).html()=="by Edwin A. Abbott"){
? ? ? ? ? ? ?$(this).html('<b>by Edwin A. Abbott</b>');
? ? ? ? ?}else{
? ? ? ? ?$(this).html('by Edwin A. Abbott');
? ? ? ? ? ? ? }
? ? ?})
})
//5
$(document).ready(function(){
? ? $('div.chapter p').attr({
? ? ? ? class:'+= inhabitants'
? ? });
})
</script>
? ? </head>
? ? <body>
? ? <!--
(1) 修改添加back to top鏈接的代碼，以便這些鏈接只從第四段后面才開始出現(xiàn)。?
(2) 在單擊back to top鏈接時(shí)，為每個(gè)鏈接后面添加一個(gè)新段落，其中包含You were here字樣。 確保鏈接仍然有效。?
(3) 在單擊作者名字時(shí)，把文本改為粗體（通過添加一個(gè)標(biāo)簽，而不是操作類或CSS屬性）。?
(4) 挑戰(zhàn)：在隨后單擊粗體作者名字時(shí)，刪除之前添加的<b>元素（也就是在粗體文本與正常文本之間切換）。?
(5) 挑戰(zhàn)：為正文中的每個(gè)段落添加一個(gè)inhabitants類，但不能調(diào)用.addClass()方法(css())。 確保不影響現(xiàn)有的類。? ?
-->
? ? ? ? <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>
<p>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>It is a Law of Nature <span>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>"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>The birth? of a True Equilateral Triangle from Isosceles parents is the subject of rejoicing in our country <span>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>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>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>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
? ? ? ? ? ? </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>
