100 Days of DevOps — Day 97-Introduction to JQuery

Prashant Lakhera
May 24 · 3 min read

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>
Selecting via jQuery

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.

Reference