jQuery prop() Method

Hello guys, welcome to our series jQuery.

In our previous segment which we saw, we will continue the same segment in today's video.

So today our video is the continuation of the same previous segment.

We will move forward with what we saw previously.

After ATTR comes, property.

What is property?

Property is basically one of our elements which has its attributes and it has value along with its colour etc., it becomes the property.

So our old program of ATTR that we saw, in that the colour width and height which we gave becomes its property.

Along with that, as written here, “It is used to return the value of a property for the first element in the set of matched elements.”

It is used to set one or more property values for a set of matched elements.

Means, that they will, whatever our properties are, if matched then will return us.

Or maybe it will set the value of the very first element.

Meaning, that with property we can do two tasks.

If we want to set the values then I have multiple elements then its very first element value will only get.

Now what will happen when we GET all the values that matched then its value will get set.

Means to GET only the first value we will GET, and to set all the values will set.

Here, this is its syntax.

If we write prop and perform just property tasks, then the property’s simple status will be returned to us.

If I pass the value inside the property too, then my property will be set too.

Now let's say, this is the attribute in our case, ID is my attribute, and  “div1” is the value and it is its property also.

If you have done our HTML course in which we used the checkboxes, the check box value is either true or false but true or false are returned in the form of value and its value actually gets checked.

So, if in any attribute there is an attribute inside the check box named “checked” then what is its property? Checked.

Means true false.

Means true  false are values and their property is checked.

So, if I want to check this, how will I check?

So here, we took a program, a simple program, in this we will firstly create a checkbox.

Now, here you can see Html in ATTR PROP and IS kind of things.

IS returns value, ATTR returns value of attribute and PROP returns us the value of property whether my checkbox is checked or not.

Then if my checkbox is checked, then the value of the property passes true for me.

If my checkbox is not checked then the value of PROP property passes false.

But if I check the attribute then the value of checked will always pass checked.

That means if I have created a checkbox then the attribute of the checkbox, value of checked will return whatever name we passed.

I will practically explain what is this to you.

As I am going to the HTML here.

HTML…

Example prop..

…

We will pass our library here.( 7 seconds pause, typing)

Dollar.

Now we will not use the buttons in our today’s program we will use the checkbox actually.

So, I will keep this part empty here.

Here I will take h1 and inside h1, an example of prop.

And here, style…

…

Body.

Text-align.

Centre.

We will save this program.

We will keep its name as PROP.

And we will run this program.

…

So this is my program.

So, in this program, I will add a checkbox here and then check the attribute and property of that checkbox.

So let's say, I will actually add an input after h1 here.

…

Input…

What is the type of my input?

Checkbox...

There is no requirement of a name for us.

There is a necessity of ID for us that is checkbox1, let us take that.

Now, one thing, if I save this and run then you can see my checkbox.

If I click on this, it will be checked.

If I click it again it will be unchecked.

If I want to keep my checkbox as a default checked, when my page reloads from then it should be checked, to keep it like this then I will write as checked equal to checked.

When I reload this program every time I am reloading, you can see that my checkbox is checked by default.

If I remove this property and save it and reload it then now what is my property on being checked?

That means it was unchecked when my page was reloaded.

Again I will check it, save it and reload it so that when I check my page it will be default checked.

To keep the checkbox default checked, what is our attribute?

Checked and its value is checked.

So If I want to GET the value of checked then I should write ATTR for it here.
So what I will do for that, let's say we have input value.

Here inside the script, I will not write dollar document dot ready because my checkbox is already checked.

Then what will I write?

Dollar…

I will use the same input here, dollar input dot…

We write a click event every time on the button, button dot.click..

Now for my input, what input will I write?

Change.

That means, when the value of my input changes, then what to do?

Function…

I write that in the function now.

Let’s say, now I will take the p tag below this input and I will write anything in it for now.

But when there is a change in its value then some changes come in my p.

What changes came?

Let’s say, dollar p dot HTML…

This means that when I change in this when I change the input values in this then the changes in my p should come out written.

So what comes inside my HTML, so first of all, dot.

Inside HTML, inside quotes, dot.. ATTR which is my function.

Now, inside this whatever my checked is, means whatever my input is, I want the checked value of my input to be written here.

Then what can I do about that?

So inside this ATTR, now watch my style of what I am writing, then here between these two …

OK?

So here you can see that I have written escape operator then quotes then again escape operator.

And I have covered the outsides here.

Now, inside this by writing plus dollar, whatever my input is, what is my input?

Input dot…..

Input dot… ATTR.

What is my first ?

My first is “check.”

This means I want to check whether it is getting printed or not.

So I will write about that here.

Save this program.

I will run it.

Here I am changing but can’t find anything.

The reason for it is that I have not bound the change with this function.

Meaning I have changed but whose change I need to show I did not write that only and straight input, I have used my variable which is my dollar input.

Here I will define var dollar input is equal to a dollar.

My input changes I need to show here, so I will write here.

If you want to know about this then you can do the javascript course.

This operator is written in detail in that.

For now, I will explain to you this that whatever we, meaning the change that we are passing on the input currently, If I only want to pass the reference of the input then I can do it with the help of..dollar… this.

In place of this if I want to do something on the button’s click on the button then here I can pass the variable button’s ID dot click function which is one of my references.

So meaning to which you are changing we can give the task reference to the element which we are changing.

Now I save this, reload it and I will check again.

There is nothing happening even now.

It means that there is a problem inside our some task or the coding which we did there is some mess in it.

So basically I have kept the portion above my body.

I will take it below inside the body and I will check whether there is any mistake or not.

So that's it. We have just taken this below.

Here we will do the colon and add  a little space.

I will reload this program now.

Which is already checked, I will un-check it.

As soon as I unchecked it, my value here, what value?

What is the checked value of my checkbox?

You can see I am getting checked here.

Why?

Because we have kept it default checked.

The value of checked is checked that is why we are getting the value of checked checked.

Now in the same way that I have written here, In the same way, I will write here plus, I will add br here twice and do plus.

Now, in place of ATTR PROP meaning, I will check the property now, which property? whether my checkbox is checked or not.

Here even after the input, PROP and checks remain here.

Save.

Reload.

So what are we getting now?

We are getting the value of the attribute as checked because we have passed it by default but I am getting the value of the property checked as false.

Why?

Because my checkbox is not currently checked.

I clicked it, and as soon as my checkbox gets checked my property will get changed to true.

I will click it again true, false, true, false meaning whatever my checkbox status is I am getting that in the property.

Now here you have to understand the difference between attribute and property.

An attribute is anything that we have defined with an element attribute; it will pass its value, whatever we have already written in the code.

What is the current status?

What is the current value of that attribute?

If we want to know this then we will use the property.

If I will check in ATTR. checked I will get checked.

But if I check its property.

That is what is the property of checked.

If the checkbox is checked then it will come as true if it's unchecked it is false.

Same as we did with checked”, that same thing we can also do with IS.

The only thing we have to check is let's say plus br.

…

Br

…

The property we have written here, in that case only we will add IS here.

Meaning it will also check what? whether our checkbox is checked or not.

So property and IS are almost the same task.

Reload.

Unchecked.

So property is also false and IS checked means that my checkbox is checked or not is false.

Let us change it, true false true false.

So now here in every case property is getting updated is checked means that it is checked initially or not

So it is getting false.

So when we are reloading it's checked but when I unchecked it my property is firing.

That's why here we have observed two things.

The first one is what is property? As you can see we understood what the property is and here we understood how we get property value we saw that and how to set its value.

Here we took a difficult example by using the checkbox.

We used the same checkbox.

And using the same we are changing it and along with that, we are getting its property.

And together we checked what is the difference between attribute and property and IS.

Later on, we will study about IS in detail.

Every time we fire the event by clicking the button, this time we have the fire on the change in input. So that we know how to work with input, especially checkboxes.

So this was today's segment.

In today's segment, we have learned about lots of things.

How to get and set attributes.

And how to get and set up the property.

These are all things we learned in today's segment.

We studied about clones too, after clones we also saw scroll top we also saw its live example.

 We also gave live examples of checkboxes in attribute and property.

 All these things are used on different websites and in different places.

So we will consider its application wherever contact form or checkbox or radio buttons etc.

Mostly in the contact form.

Over there with the help of this value its chain events through jquery you can get it and accordingly you can manipulate it.

So with this, our model means the jquery HTML manipulation module ends.

Guys the last practicals we did in these two segments are difficult ones so practice and learn it. If you don't understand anything you can ask your questions on forums.learvern.com, you can tell your difficulties over there we will answer all your questions with solutions. Discussion to be added.

We will meet in our next segment on how to work CSS and how to manipulate it so here our module ends so from the next segment we will start CSS.

Thank you