jQuery attr() Method

Hello guys, welcome to our series jQuery.

In the last segment we covered other HTML methods which jQuery provides us and other single methods from that we saw two methods that are clone and scrollTop.

In today’s segment we are continuing with the last segment. Two methods are left, for attribute ATTR and for property PROP, so in today’s segment we will continue the same.

The very first method is ATTR which is visible on the screen. “ATTR method is used to set or return attributes and values of the selected elements”.

Basically, it is clear from the name that to set any attribute value or to get the value of an attribute we use ATTR.

Like how the other normal methods of HTML jQuery are used, exactly that way this is also used. It is used in two ways.

One is to return attribute values and the other is to set attribute values. Here, you can see in syntax, if I have passed only the name of an attribute, for example, our image has width and if I will pass only width then my attribute is width.

So, if I write width here and don’t write value then it will return the value of width and if I pass width and attribute both values then what will happen is value of my property so and so will get fixed.

Means let’s say I have created div and given width, height, and background colour, ETC. And if I want to get the value of it then I will pass only the name of property and if I also want to set the value of attribute, I will pass it along with values.

A very easy example of this is, here we have taken an image and set its width to five hundred.

Let’s take this in another way. I’ll open sublime text and here I am setting it to HTML Example ATTR…. to get value, here we will add our library, and here we will add our …script that we have to write.

Here comes the style. Let’s say under h one I write… example of ….ATTR… to get values….., to get attribute values

Now I will do one thing. I'll create a div and give id ….to div ABCD or we can write div one and I’ll generate the div to which we gave an id…. hashtag div one, …will give width two hundred pixels…., height two hundred pixels…., background colour light coral….

We’ll pass three things here and save it. This is our ATTR underscore one and we will run this program…..

So, this is our program here. Now here we get the heading and div of the program.

Here, body text…. align…. centre and we will give margin to div margin zero auto and to our button which we add for each and every event, id which we forgot to add.

Click and this will go under our script section that is dollar document…. dot ready…. function…. dollar hashtag button…. dot click…. function. This is our what to do on button click is still pending.

So our div is generated and we have given color to it, all things are centre aligned and a button is also added.

For proper view br…. after button one br tag and then again br for proper spacing.

Now on clicking nothing happened, but if I want to get the colour whichever colour, we have given I don’t know the name of colour.

What I will do is that whenever I click whichever is the colour of div it will appear in the alert box

So, I will write in this click event alert… dollar… div one hashtag… dot ATTR… and inside quotes I will pass the background colour which is written here and let’s see what thing we will get. Save. Reload. Click.

So, here I am getting undefined means we had passed div one that is div one dot.. ATTR background colour and I am getting undefined which means we may have made a mistake in writing background colour.

Save. Reload and click. Now there is no function running on click means there may be an error in the console.

On seeing,  console, you can see the background is not defined perfectly, which means we are not getting the value of the attribute we want to get here, definitely this will be inside our quotes.

So basically, what is going on here is that we are not getting the value of the attribute which we have passed here is not properly returning on the button click.

Whenever we get undefined, as you can see, it means that either the value is not set or we are unable to get the value.

In this case, as a trial method we are removing this script and will add this inside the body, but here after the document loads. And we will click. Still, we are getting it as undefined.

Means definitely there is an error in what we have written or the value we had passed. So, what is the mistake here?

The mistake here is that the div which we had generated and all the things of div we have written here under CSS. Things written under CSS are not its attributes. What is an attribute?

If under this div I have taken an id so id is my attribute. I am saying again that whichever things I add in the element are called attributes.

So, if I remove width from here …and add it here as width hundred,…. height hundred then save and reload.

You can see it has been removed because width and height are not the part of division, are not the attribute of division, that’s why these are not added to it. 

I’ll again control Z whatever we did. Save and reload.

So, what do you think after seeing that what is its part or attribute? Id is the attribute.

Therefore, if I pass id in place of background colour and save it, reload and then click.

I am getting the value; I am getting the answer div one. It means the attribute of div one is id and its value is div one that’s why it is returned to us.

On control space you can see style, title, align; these are its different attributes.

So, if I write any on click method on this div then I will select on click and I will write whatever my method is. Okay?

Let’s say I write the title…” this is a div”. Save.

So, what is the use of the title?  It is seen when we hover as you can see whenever I hover then here, I can see tooltip” this is a div.”

So, if I want to get the value of the title then I will pass the title in its attribute. Save and reload.

And then on clicking I will get “this is a div”, it means that the value of title is “This is a div” which definitely can be seen on clicking.

If I again do id of this and reload then I am getting ‘id’ in return.

So, guys remember one thing: that attribute doesn't return CSS values, it passes the element values of the element or attribute we passed.

If you make a mistake, like I had done intentionally by-passing background colour, then you won’t be able to get values.

If you pass the passed attribute in the element in ATTR then you will get it definitely.

So, this is our first program to get the attribute. Now we will write a similar program to set the attribute value.

ATTR to set value. Now what I will do, I will remove the title for example and write ATTR title and for now I save it and here will come the set value save as ATTR underscore… two and I will run this program.

So, this is my program which is running. Now on clicking it is showing undefined. If we need to describe it properly, we can write here but it is not allowed to us under attribute.

So var STR equal to and here… alert value of… div one …title. Okay.

What we do is after taking its value we store it in string and making it alert. Reload. 

Value of div one title is undefined means our answer is not generated because under this div there is no title.

Now if under this div I want to set the title then what will I do? I will write the same thing which I wrote here, which is a div one dot ATTR title comma inside this is a div means we don’t add title here in attribute, we are adding it dynamically through jQuery.

Save. Reload. Click. Value of div one title is a div means now our value has changed from undefined to “This is a div” plus on hovering I can get the answer and you can see that wherever I hover “This is a div” is visible.

So, what do we do in this program? In the first program, we get the attribute which is already defined and, in this program, we dynamically give the attribute,  what attribute we have to set and get the same value in return.

This property , the CSS property doesn’t return ATTR but it returns the attribute values of elements.

So, guys this is all in this segment. See you in another segment where we will continue with the same topic and will see the rest methods of this topic.

So, see you all in the next video of the same segment.

Thank you!