50 jQuery Snippets

Here is going to show you guys 50 jQuery Snippets that can help you with your JavaScript projects. Some of these snippets are going to be things that have just been supported with jQuery 1.4.2 whilst others are really useful functions or methods that can help you do things better or quicker. I’ve tried to bare in mind optimal performance with these snippets so if there’s anything you see that you think could be done better, please feel free to post your version in the comments!. I hope you find the post useful.

  • Create A Nested Filter:

  • Reuse Your Element Searches

  • Check If An Element contains a certain class or element with has():

  • Switch StyleSheets With jQuery:

  • Limit the Scope of Selection (For Optimization):

  • Correctly Use ToggleClass:

  • Set an IE Specific Function:

  • Replace an element with jQuery:

  • Verify if an element is empty:

  • Find the index of an element in an unordered set

  • Bind a function to an event:

  • Append or add HTML to an element:

  • Use an object literal to define properties when creating an element

  • Filter using multiple-attributes

  • Preload images:

  • Set an event handler for any element that matches a selector:

  • Find an option element that’s been selected:

  • Hide an element that contains text of a certain value:

  • AutoScroll to a section of your page:

  • Detect Any Browser:

  • Replace a word in a string:

  • Disable right-click contextual menu :

  • Define a Custom Selector

  • Check element existing

  • Detect Both Right & Left Mouse-clicks with jQuery:

  • Show or Erase a Default Value In An Input Field:


  • Automatically Hide or Close Elements After An Amount Of Time (supports 1.4):

  • Add Dynamically Created Elements to the DOM:

  • Limit The Number Of Characters in a “Text-Area” field:

  • create a basic test for a function

  • Clone an element:

  • Test if an element visibility:

  • Center an element on screen:

  • Put the values of all the elements of a particular name into an array:

  • Strip HTML From Your Element

  • Get a parent element using closest:

  • log jQuery events using Firebug and Firefox:

  • Force links to open in a pop-up window:

  • Force links to open in a new tab:

  • Select siblings in jQuery using .siblings()

  • Toggle All the checkboxes on a page:

  • filter down a list of elements based on some input text:

  • Get mouse cursor X and Y

  • Make an entire List Element (LI) clickable

  • Parse XML with jQuery (Basic example):

  • Check if an image has been fully loaded:

  • Namespace events:

  • Check if Cookies Are Enabled Or Not:

  • Expire A Cookie:

  • Replace any URL on your page with a clickable link

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA