Jquery attr () method

SetAttribute () is used to set node attributes and attribute values in JS, getAttribute () is used to obtain node attributes and attribute values, and attr () is used in jquery () you can get all done, like a first ^

In jquery, the attr () method is used to obtain and set element attributes. attr is the abbreviation of attribute. attr () and attr () are often used in jQuery DOM operations () there are four expressions.

1.Attr (Attribute name) // Obtain the attribute value (obtain the attribute value of the First Matching Element. This method can be used to conveniently obtain the value of an attribute from the First Matching Element. Undefined is returned if the element does not have an attribute)

2. Attr (Attribute name, attribute value) // Set the attribute value (set an attribute value for all matching elements .)

3.Attr (Attribute name,Function value) // Set the function value of the attribute(Set a calculated attribute value for all matching elements. Instead of providing a value, a function is provided, and the value calculated by this function is used as the attribute value .)

4.Attr (properties) // Set multiple attribute values for the specified element, that is, {attribute name 1: "attribute value 1", attribute name 2: "attribute value 2 ",... ... }. (This is the best way to set multiple attributes in batches among all matching elements.Note: If you want to set the class attribute of an object, you must use 'classname'As the property name. Or you can directly use 'class' or 'id '.)

Html code structure:

What is your favorite fruit?

• Apple


• Orange


• Pineapple

1. attr (name) // obtain the attribute value

1.1 Use attr (name) to obtain the title value:

<Script>
Alert ($ ("ul li: eq (1)"). attr ("title "));
</Script>

Result: Orange Juice

1.2 use attr (name) to obtainValueValue:

<Script>
Alert ($ ("ul li: eq (1)"). attr ("value "));
</Script>

Result: 123

2.Attr (name, value) // Set the attribute value

2.1 use attr (name, value) to modify the title value to: Do not eat oranges
<Script>
$ ("Ul li: eq (1)"). attr ("title", "do not eat oranges ");
Alert ($ ("ul li: eq (1)"). attr ("title "));
</Script>

Result: Do not eat oranges.

3.Attr (name, fn)// Set the function value of the attribute

3.1ValueSet the attribute value to the title attribute.
<Script>
$ ("Ul li: eq (1)"). attr ("title", function () {return this. value });
Alert ($ ("ul li: eq (1)"). attr ("title "));
</Script>

Result: 123

4. attr (properties)// Set an object in the form of "name/value" to attributes of all matching elements

4.1 obtain

Up to 2nd
• Set the title and value attributes.
  <Script>
  $ ("Ul li: eq (1)"). attr ({title: "Do not drink orange juice", value: "Not 123 "});
  Alert ($ ("ul li: eq (1)"). attr ("title "));
  Alert ($ ("ul li: eq (1)"). attr ("value "));
  </Script>

  
  

  Result: No orange juice is consumed.Not 123

  
  

  4.2 obtain

  Up to 2nd
  • Set the class.
    <Script>
    $ ("Ul li: eq (1)"). attr ({className: "lili "});
    </Script>

    
    

    Result: html of the second li:

  • Orange

  
  

  4.3 obtain

  Up to 2nd
  • Set the id.
    <Script>
    $ ("Ul li: eq (1)"). attr ({id: "lili "});
    </Script>

    
    

    Result: html of the second li:

  • Orange
  
  

  
  

  4.4 obtain

  Up to 2nd
  • Set the style.
    <Script>
    $ ("Ul li: eq (1)"). attr ({style: "color: red "});
    </Script>

    
    

    How can I delete attributes?

    
    

    <Script>
    $ ("Ul li: eq (1)"). removeAttr ("title ");
    </Script>

    
    

    That's simple, attrIt is actually in native js.GetAttributeSimplified Implementation,While removeAttrYesRemoveAttribute.