Understanding jQuery example for beginners

Hello guys

You are welcome to our jQuery series

In the last segment, we covered the introduction portion of jQuery.

I hope you understood everything clearly in the last segment, but if there is any point somewhere which you didn't understand then you can let us know at forum.learnvern.com, we will revert with solutions to your concerns.

Let's move further in today's segment.

Today's segment is "Understanding jQuery with an example", which means the segment today will help you understand the very first example of how we can use jQuery in the web page.

So let's move ahead in today's segment.

When you add jQuery, some basic things are seen in the example of jQuery,

Like “jQuery is developed by Google”,

If you are creating the very first example of jQuery, you will have to use javascript because, if you remember or have covered the Javascript course of learnvern successfully we used to write everything or the javascript code in the script tag.

If we are writing a code of jQuery we will add everything under the script tag the same way as the javascript, which means two script tags will be included in the code or the program.

One script tag will add the URL given here and the second on the place where we will write the code.

Now, you will feel why the URL is important?

So when we add jQuery in the program, we have two available ways:

One is to install jQuery if you are creating an application and using visual studio, after installing you can easily use it.

As you can also see on the official website of jQuery, here some steps are given after downloading the jQuery

So some options like "npm install jQuery" and "yarn add jQuery" are given after downloading, so where will you use them?

So if you go to the visual studio (here I have already opened visual studio)

Go to the terminal after view in the visual studio so that you can get the terminal.

Once you go to the terminal, you have to copy the command "npm install jQuery" given and paste it here.

So, in this way you can install jQuery.

Where??

So, it will be installed in this folder or the path given here.

But only when you are going to work with visual studio or any other tool which you are going to work with.

But we will not use any tool in the complete course, we are going to learn the coding of jQuery through the text editors like notepad or sublime text because as of now it will be easier on the basic level.

(03/33)

If we are creating a web application,or we are working with angular or working with a framework of JavaScript like react then you can install jQuery by going to the path through the visual studio.

But as I said, we are not going to create an application, we will learn every topic and point individually and independently. That is why we will take the help of the URL also called DNS (domain Namespace),instead of installation.

This means we will add this URL in every program and then we will move further in our program.

So, these were the two ways of using jQuery,I have explained you both the ways

Either you go to tools and install it or we will add the URL everytime and move ahead.

Here the example is given, the very first example for jQuery.

We will see how we will do it?

So, firstly let us open the sublime text.., this is our first program of jQuery

As we know that we are going to use jQuery in the HTML programs, so… HTML and we will select HTML from here

Clear

Press control space so that we get the option,

So we get the code of HTML generated here.

Doctype after exclamation mark, means the program is in HTML 5.

This is our first program of jQuery, so we will give it a name like.. "my first jQuery program" (read slowly) and save it.

Okay so it is saved in HTML.

Now, as I said we need to create jQuery but we also want to do something through jQuery.

So what we will do is that we will create a simple program and take some p tags in it, and we will color those p tags through jQuery and not through CSS.

So here in this program we will be able to understand both: how to add jQuery and how to use jquery, and we will also see its application related to CSS.

Let's say I want some p tags in the program, so I will add a p tag and write "this is the… first line" in the p tag

"This is the second line",…

"This is the third line"…

Okay

We are adding three things to our body tag.

Save and

We will run this program.

So this is our program and you can see the first line, second line and third line, three things are shown here.

Now what we have to do is to apply CSS but we will apply it through jQuery.

So, first of all we have to add that URL.

You can see the URL if I go to the slide,

So, “script type equal to text javascript” and we will add the url in the source.

How will we do that?

So let's go to the program

Here below the title we will add the URL, I have got it copied and will paste it here.

Okay…

So, this is my URL of jQuery

Now, I will add whatever I want to write and do through jQuery.

So guys make sure when you add the URL you add it in head tag because when the program will execute, as we know our program gets executed step by step

So, when the program will be executing and the URL will be added somewhere after the body tag instead of the head tag, the program will be loaded first and then the script will be executed.

But if we want to get something done related to jQuery while loading, it will be performed after loading which will not generate proper results.

So, to overcome such confusion and mistakes make sure to always add the script in the head.

Okay

If you add it in head, it will be executed before the execution of body and the library of jQuery would be loaded already.

So, now we will do what we have to.

We will add the script here, here we will write a text javascript file, and this is what we need because we have a library of JavaScript as jQuery is a library of JavaScript.

So it will be javascript in the type.

Here are a few things which we need to remember whenever you are adding jQuery you need to add the script portion in the head, that is mandatory.

But you can add the script portion in which we are going to write the jquery code that you can add in head, body or after the body also.

(09/00)

Here you will not face any problem but if there will be a program in future, in which you want that first the content should be added in the browser and then the script, then you need to make sure to add the script of the jQuery after the body.

I hope I am clear.

If you want to keep it before it's fine, but if there's a requirement in which the body has to be executed first and any transition, animation or any other jQuery code which must be loaded after the body is loaded then you can add it after the body also.

So you need to keep a check where you want to add the jQuery script.

As this is a simple jQuery program of how jQuery is written and how it works,

We will first write a "dollar ($)" document.. inside a bracket.. dot outside.. the bracket ready…and bracket.

And in this bracket, we will add whatever we want to.

Like the first, as I said the jQuery is a library of JavaScript itself

Here we will write "function".. the braces of function will start…, these are my curly braces and enter.

So this will be a fixed format,what will it be? Fixed format.

Whenever you will add jQuery you don't need to write document dot ready everytime, you will need to write this only once all the content after that will be written here

The second thing,  and the third thing

We will move ahead in this way.

So guys make sure that you don't need to write document dot ready again and again but only once.

We will understand what is document dot ready after executing this program.

We will understand what is the use of the dollar and what is the use of writing document dot ready after this program.

Firstly we will write a simple program, as you can see we have some p tags and I want to color them with the help of jQuery.

So, to get that page of HTML which is generated and to get the p tags from that page of HTML, what I will write?

So, like dollar.., p inside parentheses….

Clear

I have to give a color to p after writing it.

So dot CSS and here I will write the property of CSS  that is background…color comma, the color I want to give like green, cyan etc.

So, what this line will do is that it will give color to three of the p tags,

You definitely might be thinking that if I want to give it a color, why am I not giving this color by going into style p.

We can choose that way also, not a big deal but currently we are learning the first example of jQuery.

This is why I will give a simple example in which we are performing this transition with the help of jQuery.

So let's say I save this program and run.

You can see the reloading is being performed, usually when we used to do the programs in HTML, JavaScript or CSS the page gets to reload immediately but today you saw it took some time.

Why did it take time?

Because we have added the script of the jQuery library, every time when you load a request call will be sent to this library from our computer or this program and the useful elements related to this library will be sent through the response and will be added to the program.

So the time taken in the transition or the request response that time is taken for this request response.

That is why it took some time for the page to reload.

(13/24)

But you can see that our task in which we have changed the background color to cyan is performed successfully.

If I reload it again, it is now reloading faster , why is it faster?

It first took time because it sent a call to get to the library  but now it is performing faster.

So that was the very basic program for how the jQuery is added and how we can  change the color with the help of jQuery.

Now we will come to the slide,

We have covered this example

Now, we will see basically what is dollar document dot ready

When we run a jQuery program, a line is written here "dollar document dot ready", means this document also called dom

When the document gets ready means all the elements are loaded, we have to perform some operations after loading.

Means, document dot ready,the document is ready and all the elements are loaded, what we have to perform after that

So as written in the code, perform this function after document dot ready

What is our function?

Give a background color cyan to p.

Here we have used dollar, correct

And the document dot ready after it.

So guys remember one thing, when we work with jQuery we will use dollar signs with everything.

Dollar will indicate which operation has to be performed, meaning the browser will identify through the dollar which operations are to be performed and where they are to be performed?

The function we wrote after the first line dollar document dot ready

Definitely everything in JavaScript is performed through Function

So this function will be executed, when this function will be executed???

When the document will be ready

And what we have written in that function?

To give this background color to p.

So, here two things were included: the first was dollar document dot ready and second dollar along with parentheses.(the bracket one)

So, we understood dollar document dot ready, now the parentheses portion

If you haven't written document dot ready you can also write it without, like this way

Dollar.., and not writing document dot ready in the parentheses..,

Simple…. function

Clear?

And this portion

This will also do the same work as it is performing here..

So if I remove this p and put it here and run the program by commenting this file…..

You can see there is no color change yet.

Let me give this a green color

Okay

So the color becomes green

So it will work if you write document dot ready or write the function simply without writing document dot ready.

It will run in both ways but we will write document dot ready every time because this is a traditional way of writing the javascript .

So we will go with document dot ready, if you write it in this way then it's fine too, no problem….  but it's up to you which approach you use.

Every developer has their own way of writing it.

If you go in this way then also it's good and there is no problem if you use the shorthand method it will work either ways.

So these were both the things, you can run jQuery by writing document dot ready and also by writing dollar but the thing we learned in today's example is:

By writing the dollar, browser understands that the code is related to jQuery

So that was today's segment in which we covered a basic example,

How to add jQuery, if it has to be added in the tools or the web page.

So, we have learned this in today's segment.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

The next topic is the global selector in jQuery, how many selectors are available and how we use them.

This we will learn in the next segment.

Thank you.

(video duration :18:03)