jQuery Introduction

  • 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 convenient methods such as .querySelector() didn’t exist).
  • One of the main features is the use of $ 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)

GITHub link https://github.com/lakhera2016/html/blob/master/jquerytest.html

<!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 object(which act like a dictionary).

Now as we see earlier we can grab multiple objects at once and if want to change color to red it will applied to all items but what would be the case if I want to apply it only to single item,to make it work we need to use eq

NOTE: To grab the last item use 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