Useful jQuery Snippets for Beginners
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
- Change style of two buttons based on active or not
- 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
General Issues
- Most common problem validating jQuery code and way to avoid it
- 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.
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.
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
Last Updated: February 15, 2021
