Ever ran into situations where only CSS is not able to solve your problem on your site? I admit CSS is now more powerful than before but, sometimes either we are “CSS only solution” lovers or not, we need help from jQuery to save the day. jQuery is a very powerful tool for front-end web designers. As one of them, I end up using it for better display of the website and user experience. On this post, I gathered some useful jQuery snippets for beginners at front-end web design who would like to start using jQuery on their projects.

jQuery Snippets Index

  1. Change style of two buttons based on active or not
  2. On click, hide one element and show another
  3. On click, hide one element, show another and change button label
  4. Change some value/text on a page

General Issues

  1. Most common problem validating jQuery code and way to avoid it
  2. Running jQuery code after page load or after jQuery is loaded

Change style of two buttons based on active or not with jQuery

On click, hide one element and show another

On click, hide one element, show another and change button label

Change some value/text on a page

Most common problem validating jQuery code and way to avoid it

When you are going to use custom jQuery code on your site, you may find them not working or giving error messages on browser console.

jquery-error

Most common fix for this is to replace the $ symbol with jQuery on the code. This is one of the most common problem beginners face using jQuery.

jquery-code-works

Here, you can see the code worked without any issues on the console.

Running jQuery code after page load or after jQuery is loaded

Sometimes, it is necessary to execute jQuery codes after the page is completely loaded. Also, you should make sure custom jQuery codes are deployed after the jQery library is loaded. To achieve these we can use following snippets