Live Examples of jQuery

Use the buttons to the left, in the examples, to run jQuery code on the structural markup below. Showing the code for each example will display the jQuery code required to make the changes to the structural markup happen.

Examples:

Example A

Get number of paragraphs in column 2 and display that number in an alert box. Including the one in the red box.

Show / Hide jquery code

~$"input.buttonAsize"#click
  (fun _ ->
     let size = ~$"div.contentToChange" #find "p" #size in
     window#alert (string_of_int size);
     false);

Example B

Animate a paragraph in Column 2 by using a slide animation.

Show / Hide jquery code

~$"input.buttonBslidedown"#click
  (fun _ ->
     ~$"div.contentToChange"#find "p.firstparagraph:hidden"
       #slideDown_speed_ "slow" ignore;
     false);
~$"input.buttonBslideup"#click
  (fun _ ->
     ~$"div.contentToChange"#find "p.firstparagraph:visible"
       #slideUp_speed_ "slow" ignore;
     false);

Example C

Add/Remove text from the end of all <p> elements in column 2 except the paragraph in the red box.

Show / Hide jquery code

~$"input.buttonCAdd"#click
  (fun _ ->
     ~$"div.contentToChange" #find "p" #not ".alert"
       #append " This text was just appended to this paragraph";
     false);
~$"input.buttonCRemove"#click
  (fun _ ->
     ~$"strong.addedtext"#remove;
     false);

Example D

Remove paragraph with fade and animation.

Show / Hide jquery code

~$"input.buttonDhide"#click
  (fun _ ->
     ~$"div.contentToChange"#find "p.thirdparagraph"
       #hide_speed_ "slow" ignore;
     false);

Example E

Change the font weight and color of all Italic text in column 2 by adding CSS properties and values to all <em> elements.

Show / Hide jquery code

~$"input.buttonEitalics"#click
  (fun _ ->
     ~$"div.contentToChange" #find "em" #css_obj_
       (object
          method color = "#993300"
          method fontWeight = "bold"
        end);
     false);

Example F

Change the CSS on the fifth paragraph in Column 2 by adding a class value to the <p> element.

Show / Hide jquery code

~$"input.buttonFaddclass"#click
  (fun _ -> ~$"p.fifthparagraph"#addClass "changeP"; false);
~$"input.buttonFremoveclass"#click
  (fun _ -> ~$"p.fifthparagraph"#removeClass "changeP"; false);

Column 2:

Use the buttons to the left to run jQuery code on the HTML below.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.