手機(jī)站首頁(yè)散文詩(shī)歌雜文隨筆日記小小說(shuō)

散文網(wǎng) » 生活 »日常 » 獲取元素名，JQUERY高級(jí)事件，作業(yè)，PPT，事件對(duì)象，動(dòng)畫效果，鼠標(biāo)事件【詩(shī)書畫唱】

獲取元素名，JQUERY高級(jí)事件，作業(yè)，PPT，事件對(duì)象，動(dòng)畫效果，鼠標(biāo)事件【詩(shī)書畫唱】

2020-11-17 21:19 作者:詩(shī)書畫唱 0人讀過(guò) | 我要投稿

獲取元素名（可能面試時(shí)會(huì)問(wèn)）：

<!DOCTYPE>?

<html>?

<head>

<title>鼠標(biāo)點(diǎn)擊頁(yè)面中的任意標(biāo)簽，alert該標(biāo)簽的名稱</title>?

$(function(){

//事件對(duì) 象

$("body").click(function(e){

alert(e["target"].tagName);

});

</script>

</head>?

<body>?

<div class="box">詩(shī)書畫唱告訴你！這是div標(biāo)簽

? <p>詩(shī)書畫唱告訴你！這是div標(biāo)簽里的p標(biāo)簽</p>

? <span>詩(shī)書畫唱告訴你！這是div標(biāo)簽里的span標(biāo)簽</span>

</div>

<p>詩(shī)書畫唱告訴你！這是p標(biāo)簽</p>?

<span>詩(shī)書畫唱告訴你！這是span標(biāo)簽</span>

<ul>

? ? <li>詩(shī)書畫唱告訴你！這是li標(biāo)簽</li>

? ?

</ul>

</body>?

</html>?

<!doctype html>

<html>

? ? <head>

? ? ? ? <title>Document</title>

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;

}

.poem {

? margin: 0 5em;

}

.chapter {

? margin: 1em;

}

.switcher {

? float: right;

? background-color: #ddd;

? border: 1px solid #000;

? margin: 10px;

? padding: 10px;

? font-size: .9em;

}

.switcher h3 {

? margin: .5em 0;

}

#header {

? clear: both;

}

body.large .chapter {

? font-size: 1.5em;

}

body.narrow .chapter {

? width: 250px;

}

.selected {

? font-weight: bold;

}

.hidden {

? display: none;

}

.hover {

? cursor: pointer;

? background-color: #afa;

}

.otherCls {

? ? background: #eee;

}

</style>

? ? ? ? <script type="text/javascript">

? ? $(document).ready(function() {

? ? ? ? ? ? ? ? $('#switcher').click(function(event) {?

? ? if ($(event.target).is('button')) {? ? ? ?

? ? var bodyClass = event.target.id.split('-')[1];? ? ? ?

$('body').removeClass().addClass(bodyClass);? ? ? ?

$('#switcher button').removeClass('selected');? ? ? ?

$(event.target).addClass('selected');? ? ? ?

event.stopPropagation();? ? ?

}? ?

});

var toggleSwitcher = function(event) {? ? ?

if (!$(event.target).is('button')) {? ? ? ?

$('#switcher button').toggleClass('hidden');? ? ?

}? ?

};? ?

$('#switcher').on('click.collapse', toggleSwitcher);

$('#switcher button').click(function() {? ? ?

$('#switcher').off('click.collapse');? ? ?

if (this.id == 'switcher-default') {? ? ? ?

$('#switcher').on('click.collapse', toggleSwitcher);? ? ?

}? ?

});?

? ? ? ? ? ? ? ? $('#switcher').click();

var triggers = {? ? ?

D: 'default',? ? ?

N: 'narrow',? ? ?

L: 'large'? ?

};? ?

$(document).keyup(function(event) {

var ascii = event.which;

var key = String.fromCharCode(ascii);?

if (key in triggers) {? ? ? ?

$('#switcher-' + triggers[key]).click();? ? ?

}? ?

});

//在Charles Dickens被單擊時(shí)，給它應(yīng)用selected樣式

? ? ? ? ? ? ? ? $('div.author:contains("Charles Dickens")').click(function(){

$(this).addClass('selected');

});

//在雙擊<h3>時(shí)，切換p文本的可見性。

$(':header.chapter-title').dblclick(function(){

$(this).nextAll('p').toggle();

});

//當(dāng)用戶按下向右方向鍵時(shí)，切換到下一個(gè)body類；右方向鍵的鍵碼是39。

$('body').keydown(function(event){

? ? ? ? ? ? ? ? ? ? if(event.keyCode == 39){

$('body').toggleClass('otherCls');

}

});

//使用console.log()函數(shù)記錄在段落中移動(dòng)的鼠標(biāo)的坐標(biāo)位置。

$('p').mousemove(function(e){

//該為在div中顯示

$('#ctx').html(e.pageX + ':' + e.pageY);

});

//使用mousedown()和mouseup()跟蹤頁(yè)面中的鼠標(biāo)事件。

? ? ? ? //如果鼠標(biāo)按鍵在按下它的地方被釋放，則為所有段落添加hidden類。

? ? ? ? //如果是在按下它的地方之下被釋放的，刪除所有段落的hidden類。

var y;

? ? ? ? ? ? ? ? $(document).mousedown(function(e){

y = e.pageY;

});

? ? ? ? ? ? ? ? $(document).mouseup(function(e){

//alert(y + ':' + e.pageY);

//y表示鼠標(biāo)按下的地方距離頁(yè)面頂端的距離

if(y < e.pageY) {

$('p').removeClass('hidden');

} else {

? ? ? ? ? ? ? ? ? ? ? ? $('p').addClass('hidden');

}

});

});?

</script>

? ? </head>

? ? <body>

??

? ? ? ? <div id="container">

? ? <div id="switcher">

<h3>Style Switcher</h3>

? Default

</button>

? Narrow Column

</button>

? Large Print

</button>

? ? ? ? <a id="aLink" href="http://www.baidu.com" >點(diǎn)擊測(cè)試</a>

? ? </div>

? ? <div id="header">

? ? <h2>A Christmas Carol</h2>

? ? <h2>In Prose, Being a Ghost Story of Christmas</h2>

? ? <div>by Charles Dickens</div>

? ? </div>

? ? <div id="chapter-preface">

? ? <h3>Preface</h3>

? ? <p>I HAVE endeavoured in this Ghostly little book, to raise the Ghost of an Idea, which shall not put my readers out of humour with themselves, with each other, with the season, or with me.? May it haunt their houses pleasantly, and no one wish to lay it.</p>

? ? <p>Their faithful Friend and Servant,</p>

? ? <p>C. D.</p>

? ? <p>December, 1843.</p>

? ? </div>

? ? <div id="chapter-1">

? ? <h3>Stave I: Marley's Ghost</h3>

? ? <p>MARLEY was dead: to begin with. There is no doubt whatever about that. The register of his burial was signed by the clergyman, the clerk, the undertaker, and the chief mourner. Scrooge signed it: and Scrooge's name was good upon 'Change, for anything he chose to put his hand to. Old Marley was as dead as a door-nail.</p>

? ? <p>Mind! I don't mean to say that I know, of my own knowledge, what there is particularly dead about a door-nail. I might have been inclined, myself, to regard a coffin-nail as the deadest piece of ironmongery in the trade. But the wisdom of our ancestors is in the simile; and my unhallowed hands shall not disturb it, or the Country's done for. You will therefore permit me to repeat, emphatically, that Marley was as dead as a door-nail.</p>

? ? <p>Scrooge knew he was dead? Of course he did. How could it be otherwise? Scrooge and he were partners for I don't know how many years. Scrooge was his sole executor, his sole administrator, his sole assign, his sole residuary legatee, his sole friend, and sole mourner. And even Scrooge was not so dreadfully cut up by the sad event, but that he was an excellent man of business on the very day of the funeral, and solemnised it with an undoubted bargain.</p>

? ? <p>The mention of Marley's funeral brings me back to the point I started from. There is no doubt that Marley was dead. This must be distinctly understood, or nothing wonderful can come of the story I am going to relate. If we were not perfectly convinced that Hamlet's Father died before the play began, there would be nothing more remarkable in his taking a stroll at night, in an easterly wind, upon his own ramparts, than there would be in any other middle-aged gentleman rashly turning out after dark in a breezy spot—say Saint Paul's Churchyard for instance— literally to astonish his son's weak mind.</p>

? ? <p>Scrooge never painted out Old Marley's name. There it stood, years afterwards, above the warehouse door: Scrooge and Marley. The firm was known as Scrooge and Marley. Sometimes people new to the business called Scrooge Scrooge, and sometimes Marley, but he answered to both names. It was all the same to him.</p>

? ? <p>Oh! .</p>

? ? <p>External heat and cold had little influence on Scrooge. </p>

? ? <p>Nobody ever stopped him in the street to say, </p>

? ? <p>But what did Scrooge care! It was the very thing he liked.</p>

</div>

</div>?

? ? </body>

</html>

<!DOCTYPE html>

<html>

<head>

// window.onload = function(){

// alert(1);

// }

// //后面的函數(shù)會(huì)覆蓋掉前面的函數(shù)，所以只會(huì)彈出2

// window.onload = function(){

// alert(2);

// }

? ? ? ? ? ? //通過(guò)這種方式綁定的函數(shù)不會(huì)產(chǎn)生覆蓋

? ? ? ? ? ? //多播事件委托

? ? ? ? ? ? $(document).ready(function(){

? ? ? ? ? ? alert(1);

? ? ? ? ? ? });

? ? ? ? ? ? $(document).ready(function(){

? ? ? ? ? ? alert(2);

? ? ? ? ? ? });

? ? ? ? ? ??

? ? ? ? ? ? //我們可以給jQuery對(duì)象取其他的名字

? ? ? ? ? ? var $$ = jQuery;

? ? ? ? ? ??

? ? ? ? ? ? $$(document).ready(function(){

? ? ? ? ? ? alert(3);

? ? ? ? ? ? })

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

$(function(){

$('#btn').click(function(){

alert('Hello world');

});

//模擬操作：不需要點(diǎn)擊鼠標(biāo)就可以執(zhí)行事件函數(shù)

//$('#btn').trigger('click');

//簡(jiǎn)化

//$('#btn').click();

$('#triInp').focus(function(){

$('<span>追加的文本</span>').appendTo($('#rs'));

});

//模擬操作

//$('#triInp').trigger('focus');

$('#triInp').triggerHandler('focus');

});

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

$(function(){

$('#myLink').click(function(e){

alert('Hello world');

//阻止頁(yè)面跳轉(zhuǎn)

//e.preventDefault();

//阻止事件冒泡

//e.stopPropagation();

//return false阻止了事件冒泡和默認(rèn)行為

return false;

});

$('body').click(function(e){

alert('hehe');

});

</script>

</head>

<body>

</body>

</html>

鼠標(biāo)移動(dòng)到哪里就可以顯示當(dāng)前的x軸方向，y軸方向的位移

<!DOCTYPE html>

<html>

<head>

$(function(){

//事件對(duì)象

$('#btn').click(function(e){

alert(e.target);

});

$('#btn').bind('click',{flag:'哈哈'},function(e){

alert(e.data.flag);

});

//鼠標(biāo)移動(dòng)的時(shí)候在頁(yè)面上顯示鼠標(biāo)的位置

$(document).mousemove(function(e){

var x = e.pageX;

var y = e.pageY;

$('#ctx').html('x:' + x + ',y:' + y);

});

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

$(function(){

$('#tst').click(function(e){

alert('按鈕的點(diǎn)擊事件被觸發(fā)啦');

//阻止事件冒泡

e.stopPropagation();

});

$('#myDiv').click(function(e){

alert('div的點(diǎn)擊事件被觸發(fā)了');

});

$('body').click(function(e){

alert('body的點(diǎn)擊事件被觸發(fā)啦');

});

</script>

</head>

<body>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

$(function(){

//給div中的所有按鈕綁定一個(gè)點(diǎn)擊事件，彈出abc

//給div中的所有的a鏈接綁定一個(gè)點(diǎn)擊事件，彈出def

//利用事件冒泡實(shí)現(xiàn)動(dòng)態(tài)元素的綁定

$('#ctx').click(function(e){

var tn = e.target.tagName;

if(tn === 'BUTTON') {

alert('abc');

} else if(tn === 'A') {

alert('def');

}

});

$('#ctx').append($('<button>點(diǎn)我</button>'));

$('#ctx').append($('<a href="#">瀏覽</a>'));

});

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

$(function(){

$('#btn').one('click',function(e){

alert('我只執(zhí)行一次');

});

</script>

</head>

<body>

</body>

</html>

作業(yè)：

?

? ?

? ? <!--

(1) 修改添加back to top鏈接的代碼，以便這些鏈接只從第四段后面才開始出現(xiàn)。?

(2) 在單擊back to top鏈接時(shí)，為每個(gè)鏈接后面添加一個(gè)新段落，其中包含You were here字樣。確保鏈接仍然有效。?

(3) 在單擊作者名字時(shí)，把文本改為粗體（通過(guò)添加一個(gè)標(biāo)簽，而不是操作類或CSS屬性）。?

(4) 挑戰(zhàn)：在隨后單擊粗體作者名字時(shí)，刪除之前添加的<b>元素（也就是在粗體文本與正常文本之間切換）。?

(5) 挑戰(zhàn)：為正文中的每個(gè)段落添加一個(gè)inhabitants類，但不能調(diào)用.addClass()方法(css())。確保不影響現(xiàn)有的類。? ?

-->

<!doctype html>

<html>

? ? <head>

? ? ? ? <title>Document</title>

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">\n

? ? ? ??

? ? ? ??

? ? ? ?// 1、修改添加back to top鏈接的代碼，以便這些鏈接只從第四段后面才開始出現(xiàn)

$(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、在單擊back to top鏈接時(shí)，為每個(gè)連接后面添加一個(gè)新段落，其中包含You were here字樣，確保鏈接仍然有效

$(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、在單擊作者名字時(shí)，把文本改成粗體（通過(guò)添加一個(gè)標(biāo)簽，而不是操作類或者CSS屬性）

$(document).ready(function(){

? ? var $name=$('div.chapter p a');

? ? $name.click(function(){

? ? ? ? $(this).wrap('<b></b>');

? ? })

})

//4、挑戰(zhàn)：在隨后單擊粗體作者名字時(shí)，刪除之前添加的<b>元素，也就是在粗體文本與正常文本之間的切換。

$(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、挑戰(zhàn)：為正文中的每個(gè)段落添加一個(gè)inhabitants類，但不能調(diào)用.addClass()方法。確保不影響現(xiàn)有的類。

$(document).ready(function(){

? ? $('div.chapter p').attr({

? ? ? ? class:'+= inhabitants'

? ? });

})

? ? ? //————————??

? ? $(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);? ?

});

? ? ? ? ? ? ? ? //修改添加back to top鏈接的代碼，以便這些鏈接只從第四段后面才開始出現(xiàn)。

$('<a href="#top">back to top</a>').insertAfter('div.chapter p:gt(3)');

//在單擊back to top鏈接時(shí)，為每個(gè)鏈接后面添加一個(gè)新段落，其中包含You were here字樣。確保鏈接仍然有效。

? ? ? ? ? ? ? ? $('a:contains("back to top")').click(function(){

$(this).append('<p>You were here<p>');

});

//在單擊作者名字時(shí)，把文本改為粗體（通過(guò)添加一個(gè)標(biāo)簽，而不是操作類或CSS屬性）。

var flag = true;

? ? ? ? ? ? ? ? $('#f-author').click(function(){

if(flag){

$(this).wrap('<strong></strong>');

flag = false;

} else {

//把strong標(biāo)簽去除掉

? ? ? ? ? ? ? ? ? ? ? ? flag = true;

$(this).unwrap();

}

});

//在隨后單擊粗體作者名字時(shí)，刪除之前添加的<b>元素（也就是在粗體文本與正常文本之間切換）。

//為正文中的每個(gè)段落添加一個(gè)inhabitants類，但不能調(diào)用.addClass()方法(css())。確保不影響現(xiàn)有的類。

$('p').wrapInner('<div></div>');

});?

</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>

? ? ? ? ? ? </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>