获取元素名，JQUERY高级事件，作业，PPT，事件对象，动画效果，鼠标事件【诗书画唱】

2020-11-17 21:19 作者:诗书画唱 0人读过 | 我要投稿

获取元素名（可能面试时会问）：

<!DOCTYPE>

<html>

<head>

<title>鼠标点击页面中的任意标签，alert该标签的名称</title>

$(function(){

//事件对象

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

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

});

</script>

</head>

<body>

<div class="box">诗书画唱告诉你！这是div标签

<p>诗书画唱告诉你！这是div标签里的p标签</p>

<span>诗书画唱告诉你！这是div标签里的span标签</span>

</div>

<p>诗书画唱告诉你！这是p标签</p>

<span>诗书画唱告诉你！这是span标签</span>

<ul>

<li>诗书画唱告诉你！这是li标签</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>

$(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被单击时，给它应用selected样式

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

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

});

//在双击<h3>时，切换p文本的可见性。

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

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

});

//当用户按下向右方向键时，切换到下一个body类；右方向键的键码是39。

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

if(event.keyCode == 39){

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

}

});

//使用console.log()函数记录在段落中移动的鼠标的坐标位置。

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

//该为在div中显示

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

});

//使用mousedown()和mouseup()跟踪页面中的鼠标事件。

//如果鼠标按键在按下它的地方被释放，则为所有段落添加hidden类。

//如果是在按下它的地方之下被释放的，删除所有段落的hidden类。

var y;

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

y = e.pageY;

});

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

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

//y表示鼠标按下的地方距离页面顶端的距离

if(y < e.pageY) {

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

} else {

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

}

});

</script>

</head>

<body>

<h3>Style Switcher</h3>

Default

</button>

Narrow Column

</button>

Large Print

</button>

</div>

<h2>A Christmas Carol</h2>

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

<div>by Charles Dickens</div>

</div>

<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>December, 1843.</p>

</div>

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

</body>

</html>

<!DOCTYPE html>

<html>

<head>

// window.onload = function(){

// alert(1);

// }

// //后面的函数会覆盖掉前面的函数，所以只会弹出2

// window.onload = function(){

// alert(2);

// }

//通过这种方式绑定的函数不会产生覆盖

//多播事件委托

$(document).ready(function(){

alert(1);

});

$(document).ready(function(){

alert(2);

});

//我们可以给jQuery对象取其他的名字

var $$ = jQuery;

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

alert(3);

})

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

$(function(){

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

alert('Hello world');

});

//模拟操作：不需要点击鼠标就可以执行事件函数

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

//简化

//$('#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');

//阻止页面跳转

//e.preventDefault();

//阻止事件冒泡

//e.stopPropagation();

//return false阻止了事件冒泡和默认行为

return false;

});

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

alert('hehe');

});

</script>

</head>

<body>

</body>

</html>

鼠标移动到哪里就可以显示当前的x轴方向，y轴方向的位移

<!DOCTYPE html>

<html>

<head>

$(function(){

//事件对象

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

alert(e.target);

});

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

alert(e.data.flag);

});

//鼠标移动的时候在页面上显示鼠标的位置

$(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('按钮的点击事件被触发啦');

//阻止事件冒泡

e.stopPropagation();

});

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

alert('div的点击事件被触发了');

});

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

alert('body的点击事件被触发啦');

});

</script>

</head>

<body>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

$(function(){

//给div中的所有按钮绑定一个点击事件，弹出abc

//给div中的所有的a链接绑定一个点击事件，弹出def

//利用事件冒泡实现动态元素的绑定

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

var tn = e.target.tagName;

if(tn === 'BUTTON') {

alert('abc');

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

alert('def');

}

});

$('#ctx').append($('<button>点我</button>'));

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

});

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

$(function(){

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

alert('我只执行一次');

});

</script>

</head>

<body>

</body>

</html>

作业：

<!--

(1) 修改添加back to top链接的代码，以便这些链接只从第四段后面才开始出现。

(2) 在单击back to top链接时，为每个链接后面添加一个新段落，其中包含You were here字样。确保链接仍然有效。

(3) 在单击作者名字时，把文本改为粗体（通过添加一个标签，而不是操作类或CSS属性）。

(4) 挑战：在随后单击粗体作者名字时，删除之前添加的<b>元素（也就是在粗体文本与正常文本之间切换）。

(5) 挑战：为正文中的每个段落添加一个inhabitants类，但不能调用.addClass()方法(css())。确保不影响现有的类。

-->

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

// 1、修改添加back to top链接的代码，以便这些链接只从第四段后面才开始出现

$(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链接时，为每个连接后面添加一个新段落，其中包含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、在单击作者名字时，把文本改成粗体（通过添加一个标签，而不是操作类或者CSS属性）

$(document).ready(function(){

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

$name.click(function(){

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

})

//4、挑战：在随后单击粗体作者名字时，删除之前添加的<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、挑战：为正文中的每个段落添加一个inhabitants类，但不能调用.addClass()方法。确保不影响现有的类。

$(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链接的代码，以便这些链接只从第四段后面才开始出现。

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

//在单击back to top链接时，为每个链接后面添加一个新段落，其中包含You were here字样。确保链接仍然有效。

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

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

});

//在单击作者名字时，把文本改为粗体（通过添加一个标签，而不是操作类或CSS属性）。

var flag = true;

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

if(flag){

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

flag = false;

} else {

//把strong标签去除掉

flag = true;

$(this).unwrap();

}

});

//在随后单击粗体作者名字时，删除之前添加的<b>元素（也就是在粗体文本与正常文本之间切换）。

//为正文中的每个段落添加一个inhabitants类，但不能调用.addClass()方法(css())。确保不影响现有的类。

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

});

</script>

</head>

<body>

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

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

</body>

</html>