Now I have started learning JQuery so I wanted to have my own concise tutorial article for JQuery. I hope this will be helpful to other beginners too.
What is JQuery and What is not
What JQuery can do
- DOM Manipulation
- CSS Manipulation
- Effects and Animation
How to use JQuery
You can start using JQuery by adding the JQuery library in HTML file.
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Demo</title> </head> <body> <a href="https://Javabeginnerstutotrial.com/">JBT</a> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </body> </html>
Imp Point in above code
- Here we are using JQuery.min.js instead of JQuery.js. In Production you should use minified version of library. It will load fast as it doesn’t contain unnecessary comment and whitespaces.
- JQuery is getting loaded from Google CDN instead of self hosting. It will again make your site load faster. Also it will help you website take advantage of cache.
Now we know how to use JQuery in web page. Next step would be using JQuery syntax. Common syntax for JQuery would be
Example of JQuery Syntax
I want to show an alert message when ever document is ready or loaded completely.
Where(Selectors) : On Document.
When (Action): Document is in ready state or loaded completely.
What(Function) : Show an alert message.
Syntax in JQuery for above requirement
Different options for Selector(Where)
All Element – *
Current HTML element – this
Class – .<Class_Name> (look for dot)
Id – #<Id_Name> (look for #)
- a (hyperlink)
Complete HTML Code
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Demo</title> </head> <body> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(alert("Hi")); </script> </body> </html>