Web Developer Post

Views: 52171 Comments: 15

10 most useful jQuery functions for your website

Tuesday, January 04, 2011

If you're new to jQuery, you should bookmark this page now. We have put together a simplified list of the most commonly used jQuery functions for your website along with examples of how to use them.

Note: In these examples, you'll see "1000" - this is referring to the speed of the animation. This can be replaced with any number or you can also use "slow", "fast" or leave blank.

Note: In these examples, you'll see "#DivID" - this can be substituted for any one of the jQuery selectors for different elements. It is not restricted to just divs.

So let's jump right in!
 

  1. Commonly Used jQuery Selectors
     
  2. jQuery Toggle, Show and Hide Functions
     
  3. jQuery Slide Functions
     
  4. jQuery Fade Functions
     
  5. jQuery Animate Functions
     
  6. Add & Remove CSS Classes
     
  7. Get & Set Textbox Values
     
  8. Get & Set Element's HTML
     
  9. Get & Set Element's Text
     
  10. Get & Set Element's Width & Height
     
  11. EXTRA: Change Element's CSS Property
     
     

 

1. Commonly Used jQuery Selectors:

            //--- COMMON JQUERY SELECTORS ---//
            // get element by id
            $("#ElementID").whatever();

            // get element by css class
            $(".ClassName").whatever();

            // get elements where id contains a string
            $("[id*='value']").whatever();

            // get elements where id starts with a string
            $("[id^='value']").whatever();

            // get elements where id ends with a string
            $("[id$='value']").whatever();

            // get all elements of certain type (can use "p", "a", "div" - any html tag)
            $("div").whatever();

 

2. jQuery Toggle, Show and Hide Functions:

            //--- JQUERY TOGGLE/SHOW/HIDE ---//
            // toggle hide/show of an element
            $("#DivID").toggle(1000);

            // do something when animation is complete
            $("#DivID").toggle(1000, function () {
                alert("Toggle Complete");
            });


            // hide an element
            $("#DivID").hide(1000);

            // do something when animation is complete
            $("#DivID").hide(1000, function () {
                alert("Hide Complete");
            });


            // show an element
            $("#DivID").show(1000);

            // do something when animation is complete
            $("#DivID").show(1000, function () {
                alert("Show Complete");
            });

 

3. jQuery Slide Functions:

            //--- JQUERY SLIDE - SLIDE AN ELEMENT IN AND OUT ---//
            // toggle slide up and down
            $("#DivID").slideToggle(1000);

            // do something when animation complete
            $("#DivID").slideToggle(1000, function () {
                alert("Slide Toggle Complete");
            });

            // slide up
            $("#DivID").slideUp(1000);

            // do something when animation is complete
            $("#DivID").slideUp(1000, function () {
                alert("Slide Up Complete");
            });

            // slide down
            $("#DivID").slideDown(1000);

            // do something when animation is complete
            $("#DivID").slideDown(1000, function () {
                alert("Slide Down Complete");
            });

 

4. jQuery Fade Functions:

            //--- JQUERY FADE - FADE AN ELEMENT IN, OUT & TO ---//
            // fade in
            $("#DivID").fadeIn(1000);

            // do something when animation complete
            $("#DivID").fadeIn(1000, function () {
                alert("Fade In Complete");
            });

            // fade out
            $("#DivID").fadeOut(1000);

            // do something when animation is complete
            $("#DivID").fadeOut(1000, function () {
                alert("Fade Out Complete");
            });

            // fade to (fades to specified opacity)
            $("#DivID").fadeTo(1000, 0.25);

            // do something when animation is complete
            $("#DivID").fadeTo(1000, 0.25, function () {
                alert("Fade To Complete");
            });

 

5. jQuery Animate Functions:

            //--- ANIMATE (EXAMPLE USES OPACITY, BUT CAN USE ANY CSS PROPERTY. ---//
//--- NOTE SOME MY REQUIRE THE USE OF A PLUGIN SUCH AS JQUERY COLOR ANIMATION PLUGIN. ---//
$("#DivID").animate({ opacity: 0.25 }, 1000); // do something when animation complete $("#DivID").animate({ opacity: 0.25 }, 1000, function () { alert("Opacity Animation Complete"); });

 

6. Add & Remove CSS Classes:

            //--- ADD & REMOVE CSS CLASSES ---///
            // add css class
            $("#DivID").addClass("newclassname");

            // remove css class
            $("#DivID").removeClass("classname");

            // add & remove class together
            $("#DivID").removeClass("classname").addClass("newclassname");

            // add & remove multiple classes
            $("#DivID").removeClass("classname classname2").addClass("newclassname newclassname2");

 

7. Get & Set Textbox Values: 

            //--- GET & SET TEXTBOX VALUE ---// 
//--- CAN ALSO BE USED ON ANY OTHER ELEMENT THAT HAS A VALUE PROPERTY ---//
// get the value of a textbox var TextboxValue = $("#TextboxID").val(); // set the value of a textbox $("#TextboxID").val("New Textbox Value Here");

 

8. Get & Set Element's HTML:

            //--- GET & SET HTML OF ELEMENT ---//
            // get element html
            var DivHTML = $("#DivID").html();

            // set element html
            $("#DivID").html("<p>This is the new html</p>");

 

9. Get & Set Element's Text:

            //--- GET & SET TEXT OF ELEMENT ---//
            // get text of element
            var DivText = $("#DivID").text();

            // set text of element
            $("#DivID").text("This is the new text.");

 

10. Get & Set Element's Width & Height:

            //--- GET & SET ELEMENT'S WIDTH & HEIGHT
            // get element height
            var ElementHeight = $("#DivID").height();

            // set element height
            $("#DivID").height(300);


            // get element width
            var ElementWidth = $("#DivID").width();

            // set element width
            $("#DivID").width(600);

 

11. EXTRA: Change Element's CSS Property

            //--- CHANGE AN ELEMENT'S CSS PROPERTY ---//
            $("#DivID").css("background-color", "#000");
            $("#DivID").css("border", "solid 2px #ff0000");

 

So there you have it! If you see any we missed, let us know! If we think it would be a good addition for this article, we'll definitely add it!

Good Luck!


Previous ArticlesCreate a floating element on your website with html and css
Create your own sliding divs with jQueryNext Article


Add New Comment

Name:*
Email:*
Website:
What does three added to five make?:
Comment:*
 

Reader Comments

wow thank you, these will definitely come in handy, I am always looking for these because I am not the most prolific javascript coder

web design kent
http://digitalpixels.co.uk
Saturday, February 26, 2011



Got to love jQuery!
I'm tagging this page as http://ogr3.com/jquery for future reference.

Thanks for the update :)

Ricardo Costa

Saturday, February 26, 2011



Thank you for the list. Very useful information.

Charlie
http://www.web-flash-template.com/
Friday, March 18, 2011



Thank you for very interesting information. Good luck!

Endyst
http://www.3template.com/
Friday, April 08, 2011



No words to express . But, it's looks too good :)

Kavya Hari
http://www.best-web-hosting-companies.com/
Tuesday, April 19, 2011



Excellent resource, thanks for sharing. Tos see good coding in action have a look at our cool
web design site.

FIJ Design
http://www.fijdesign.com/search-engine-optimisation.php
Thursday, July 07, 2011



very good g8

priya Khannna

Saturday, July 23, 2011



ok

d
http://webdeveloperpost.com/Articles/10-most-useful-jQuery-functions-for-your-website.aspx
Thursday, August 25, 2011



excellence for beginner of jQuery, and I am one of them.
thanks,

anupam

Thursday, October 20, 2011



Website designing have found a new arena with the introduction of different jQuery functions. Javascript have been a superb platform independent language till date and the use of these java based function added a new look and applications to the websites.

Web Design
http://www.impactdesign-global.com/
Thursday, November 03, 2011



I look forward to visiting your blog again. Thank you for sharing with us!

SEO tips
www.seoforum.co.in
Monday, December 26, 2011



Thank for sharing this useful information
Its really worth of appreciation.

Offshore IT Company
http://www.hashe.com/
Wednesday, January 04, 2012



hi these is a very nice and easy to understood . Thanks

Rajni
www.patel.com
Monday, April 02, 2012



thanks, short and usefull

pegah

Sunday, May 27, 2012



thanx

gabriel

Thursday, November 29, 2012


Most Popular Articles


Recent Articles



© Copyright 2010. WebDeveloperPost.com
Tampa Web Design By Ricketts