Attributes in JQuery


Introduction: Here we will discuss about the attributes used in JQuery, In the JQuery API there are attributes which contains many methods we will explain these one by one. Further these methods are used to get or set the attributes used in the Dynamic Object Model. Let's see the methods.

Methods: There are some methods we will discuss, including:

  1. .addClass()
  2. .attr()
  3. .hasClass()
  4. .html()
  5. .removeAttr()
  6. .removeClass()

Step 1: .addClass(className) is the method is used to add one or more class names to the class attribute of each element. You may be added more than one class by separating or giving space between the class name to the set of matched element.

Syntax: Let see how we add two classes in it $("div:last").addClass("selected");

Example: Further the example is given below.

Step 1

Output:

output

Step 2: .attr() is the method which is a general attribute the other two methods comes in this category name as define below.

  1. .attr( attributeName )  is used to retrieve or get the value of an attribute for the first element in the set of matched elements. where the   argument passed in the .attr() method is the name of attribute which we have to retrieve or get. let see an example given below.

Application

Output:

Output
   2.    .attr(attributeName, value) is used to retrieve or get the name of attribute and also used to set the value of that attribute the above example will shows you how to set it.

Application Code

Output:

Output

Step 3: .hasClass() is the method which is used to check whether the matched attribute has the class name which is defined and search the element which have the class matched.

let see how  it we write the multiple class name which is given below , p1,p2 are the two different class which is given below in figure first and it will return true if there is any match for class name p1,p2 and otherwise will return false.


Syntax declaration

 It will return only true if the element is matched.

JQuery

 It will return false because p3 class is not matched with the attribute element.

False Return

Step 4: .html() method is used to retrieve the html contents of the first element in the set of matched element

When .html() is used to set an element's content, any content that was in that element is completely replaced by the new content. Consider the following HTML:


Html Body

The content of <div id="d1" class="cl1"> can be set like this:

JQuery

In the code above will replace everything which is inside <div id="d1" class="cl1">:

Step 5: .removeAttr() method is used to remove the attribute from each element in the set of each matched elements.

Syntax: .removeAttribute(AttributeName) now further we will explain it by given an example.

Let's look how will write the code to remove the attribute.

Html Coding

Query for remove attribute
jQuery to Remove
Output:
Output

Step 6: .removeClass() is the method is used to remove one or more class which is being matched with the attribute elements let we see how we will do this.Code:
Code

JQuery