Welcome to Day 97 of 100 Days of DevOps, Focus for today is Introduction to JQuery
- It is just a large single .js file that has many pre-built methods and objects that simplify our workflow.
- jQuery was created as a way to help simplify interactions with the DOM(when jQuery was created the conventional methods such as .querySelector() didn’t exist).
- One of the main features is the use of the $ sign.
If you don’t want to download jQuery, you can use the direct CDN link https://code.jquery.com/
Actual jQuery Code https://code.jquery.com/jquery-3.1.1.js
Difference between using Vanilla vs jQuery
var testvar = document.querySelectorAll(‘p’)
var testvar = $(‘p’)
So as we can see it saves lot of our typing works
To confirm jQuery is loaded(type $ sign)
<h1>This is an Introduction to jQuery</h1>
<input type="text" name="Name" value="What is your name">
<input type="button" name="ClickMe" value="ClickMe">
Now if I need to change the heading color/background it’s pretty straightforward in case of jQuery
Now if I want to change multiple CSS properties at the same time, rather then passing one property at a time we can pass an object(which act as a dictionary).
Now as we see earlier we can grab multiple objects at once and if want to change color to red it will be applied to all items but what would be the case if I want to apply it only to a single item, to make it work we need to use eq
NOTE: To grab the last item using negative indexing eq(-1)
Now if I want to change the text, it is pretty straightforward
If I want to change the style of my contents
Now if I want to change attributes
Same way we can change values
Adding and Removing a class
Looking forward from you guys to join this journey and spend a minimum an hour every day for the next 100 days on DevOps work and post your progress using any of the below medium.
- Twitter: @100daysofdevops OR @lakhera2015
- Facebook: https://www.facebook.com/groups/795382630808645/
- Medium: https://medium.com/@devopslearning
- Slack: https://devops-myworld.slack.com/messages/CF41EFG49/
- GitHub Link:https://github.com/100daysofdevops