100 Days of DevOps — Day 97-Introduction to JQuery
To view the updated DevOps course(101DaysofDevOps)
Course Registration link: https://www.101daysofdevops.com/register/
Course Link: https://www.101daysofdevops.com/courses/101-days-of-devops/
YouTube link: https://www.youtube.com/user/laprashant/videos
Welcome to Day 97 of 100 Days of DevOps, Focus for today is Introduction to JQuery
- jQuery is a Javascript Library.
- 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.
Download http://jquery.com/download/
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
//Vanilla
var testvar = document.querySelectorAll(‘p’)
//jQuery
var testvar = $(‘p’)
So as we can see it saves lot of our typing works
To confirm jQuery is loaded(type $ sign)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Introduction</title>
<script
src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
</head>
<body>
<h1>This is an Introduction to jQuery</h1>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<a href="https://code.jquery.com/">jQuery</a>
<input type="text" name="Name" value="What is your name">
<input type="button" name="ClickMe" value="ClickMe">
</body>
</html>
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
Reference
