Johnson's Front-end Shed

I try to use jquery in a different js file rather than put all code in one html file.

1. Hide and show some elements.

This is a paragragh.

2. Fade in and fade out elements.

This is a paragragh.

Can also fade to a certain opacity.(Click again to restore the opacity.)

3. Sliding effects.

Here are two divs to demostrate the sliding.

Click the header to see the effect.

4. Animations

The button changes the style of the div below.

Next try to click the box below.

5. Set and get

This is a sample paragragh.

This paragragh will show the output.

6. Add and remove content

7. About classes

Let's define a style with a class name.

class name = "testClass", background-color: lightgray; font-size: 20px; font-family: fantasy

class name = "redText", color:red;

You can add class to this text.

8. Height and width

Here used a graph to demostrate the different hieght and weight in web.

The yellow part is the content, the red part is padding, the blue part is margin.The ivory part is border.

I use a button to change the "height()",and thus there is change in " innerHeight() " and "outerHeight()".

The height of the content is

The inner height of the box is (content+padding)

The outer height of the box is (content+padding+border)

The true height of the box is (content+padding+border+margin)