7 jQuery Examples

JavaScript is a scripting language used by many web designers for hover effects, image manipulation, dynamic CSS editing, form validation, text editing, and so much more.

JQuery is a very popular JavaScript library used throughout the web. In this article we will present 7 jQuery examples.

1. Toggling Elements

jQuery Code:

$("#example1").toggle();

Demo:

  • This element
  • will be toggled
  • if you click
  • the link below.

Toggle it!

2. Animated Toggling

We all love effects don’t we. Let’s animate!

$("#example2").toggle(1000);

Did you know that you can show or hide this element? How about doing it in style? View this jQuery example in action below.

See it in action!

3. Sliding is always fancy.

$("#example3").slideToggle(1000);

Who doesn’t like sliding? Use the link below for a demo!

Slide!

4. Fade away!

if ( $("#example4").css("display") == "none" )
     $("#example4").fadeIn(1000);
else
     $("#example4").fadeOut(1000);

Fade me please!

Fading magic.

5. CSS Width/Height Change

How about dynamic width or height editing in minimal code?

if ( $("#example5").css("width") != "100px" )
     $("#example5").width(100);
else
     $("#example5").css( "width", "100%" );

Doesn’t this text look nice when it’s at the original width? Why don’t you squish it down a bit!

It’s squishing time.

6. CSS Property Change

Time to get flexible!

if ( jQuery.data( $("#example6").get(0), "border" ) != "black" )
{
     $("#example6").css("border", "1px solid black");
     jQuery.data( $("#example6").get(0), "border", "black" );
}
else
{
     $("#example6").css("border", "none");
     jQuery.data( $("#example6").get(0), "border", "" );
}
  • Add a border to me please!

Add it!

7. CSS Class Change

Why not change a whole set of properties by just adding in a class!

if ( $("#example7").attr("class") != "purple-box" )
     $("#example7").addClass("purple-box");
else
     $("#example7").removeClass("purple-box");

My class is broken. I need a new one. Use this jQuery example to repair it!

Add one!

That’s all for now! More to come soon.

Leave a Reply

7 jQuery Examples