The basic jquery Tutorial (Fourth Edition), chapter 4th, exercises:

Source: Internet
Author: User

About the answer:

(1) Modify the style sheet, first hide the page content, when the page loaded, slowly fade in content;
$ (document). Ready (function () {
$ (' body '). Hide (). FadeIn (4000);
})

(2) When the mouse hovers over the paragraph, apply a yellow background to the paragraph;
$ (document). Ready (function () {
$ (' P '). MouseMove (function (event) {
When the mouse enters
$ (this). CSS (' background ', ' yellow ');
});
$ (' P '). Mouseout (function (event) {
When the mouse enters
$ (this). CSS (' background ', ' white ');
});
})


(3) Click the title ($ (document). Ready (function () {
$ (' Div#container > H2 '). Click (function () {
$ (this). Animate ({
Opacity: ' 0.25 ',//opacity
MarginLeft: ' 20px ',
}, ' slow ');
$ (' Div.speech '). Animate ({opacity: ' 0.5 '}, ' slow ');
})
})

(4) Challenge: When the arrow key is pressed, the style converter moves smoothly 20 pixels in the corresponding direction, and the key codes of the four arrow keys are 37 (left), 38 (upper), 39 (right) and 40 (bottom).
$ (document). Ready (function () {
$ (' Div#switcher '). CSS (' background ', ' red ');
$ (document). KeyUp (function (event) {
var key = Event.which;
Console.log (key);
Switch (key)
{
Case 37:
$ (' Div#switcher '). CSS ({position: ' relative '})
. Animate ({left: '-=20px '},40);
Break
Case 38:
$ (' Div#switcher '). CSS ({position: ' relative '})
. Animate ({top: '-=20px '},40);
Break
Case 39:
$ (' Div#switcher '). CSS ({position: ' relative '})
. Animate ({left: ' +=20px '},40);
Break
Case 40:
$ (' Div#switcher '). CSS ({position: ' relative '})
. Animate ({top: ' +=20px '},40);
Break
Default
Alert (' Input is invalid, please enter directional keying ');
}
});//keyboard event
})//page load

About the book HTML code:

<! DOCTYPE html>

<meta charset= "Utf-8" >
<title>abraham Lincoln ' s Gettysburg address</title>

<link rel= "stylesheet" href= "Css/04.css" type= "Text/css"/>

<script src= "Jquery.js" ></script>
<script src= "Js/04.js" ></script>
<body>
<div id= "Container" >
<div id= "Switcher" >
<div class= "label" >text size</div>
<button id= "Switcher-default" >Default</button>
<button id= "Switcher-large" >Bigger</button>
<button id= "Switcher-small" >Smaller</button>
</div>
<div class= "speech" >
<p>fourscore and seven years ago our fathers brought forth on the continent a new nation, conceived in liberty, and Dedicated to the proposition, all men is created equal.</p>
<p>now We is engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated , can long endure. We are met in a great battlefield of that war. We have come to dedicate a portion of this field as a final resting-place for those who here gave their lives the NAT Ion might live. It is altogether fitting and proper that we should does this. But, in a larger sense, we cannot dedicate, we cannot consecrate, we cannot hallow, this ground.</p>
<a href= "#" class= "more" >read more</a>
<p>the brave men, living and dead, who struggled here has consecrated it, far above we poor power to add or Detrac T. The world would little note, nor long remember, what are we say here, but it can never forget what they do here. It's For us the living, rather, to being dedicated here and the unfinished work which they who fought here has thus far so n obly advanced.</p>
<p>it is rather for us to being here dedicated to the great task remaining before us&mdash;that from these honored Dead we take increased devotion to, cause for which they gave, the last full measure of devotion&mdash;that we are here Highly resolve that these dead shall not having died in Vain&mdash;that this nation, under God, shall has a new birth of freedom and that government of the people, by the people, for the people, shall not perish from the earth.</p>
</div>
</div>
</body>

About the book CSS section

/***************************************
Default Styles
************************************** */

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

#switcher {
width:300px;
padding:. 5em;
border:1px solid #777;
}
. label {
width:130px;
margin:. 5em 0;
Cursor:pointer;
}

Notes:

respond to keyboard events: If you want to know which key the user has pressed, you should listen for the KeyUp or KeyDown event, if you want to know What characters are entered and should listen for the KeyPress event. For the functionality we want to implement here, we just want to know

When the user presses the D, N, or L keys, it is necessary to use the KeyUp

The parsefloat () function only gets the numeric part of the Font size property

The Event.preventdefault () method blocks the default behavior of an element (for example, when a Submit button is clicked to block the submission of the form)


You can specify two preset speed parameters: ' Slow ' and ' fast '. Make
Use. Show (' slow ') to complete the effect in 600 milliseconds (0.6 seconds), while. Show (' fast ') is 200 milliseconds (0.2 seconds).
If you pass in a different string, jquery completes the effect in the default 400 milliseconds. To specify a more precise speed, you can
To use milliseconds values, such as. Show (850). Note that unlike the speed parameter names represented by a string, the values do not need to make
Use quotation marks


The difference between show () and fadeIn two effects is that. FadeIn () Sets the dimensions of the paragraph at the beginning so that the content can be displayed gradually. Similarly, to gradually reduce the opacity, you can use the. FadeOut ()


jquery provides a. Toggle () method that acts like the. Show () and. Hide () methods, and, as they do, the. Toggle () method is also optional. Another composite method is. Slidetoggle (), which displays or hides elements by gradually increasing or decreasing the element height

The basic jquery Tutorial (Fourth Edition), chapter 4th, exercises:

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.