jquery attr () method

In JS, set the attribute and attribute value of the node to setattribute (), get the attribute and attribute value of the node used to GetAttribute (), and in jquery, with a attr () can be all done, praise a first ^^

jquery uses the attr () method to get and set element properties, attr is the abbreviation for attribute (attribute), which is often used in jquery DOM operations to attr (), and attr () has 4 expressions.

1. attr ( attribute name ) // Get the value of the property (gets The property value of the first matching element. This method makes it easy to get the value of an attribute from the first matching element. Returns undefined if the element does not have a corresponding attribute)

2. attr ( property name, property value ) // Set the value of the property ( set a property value for all matching elements.) )

3. attr ( attribute name , function value ) // Set the function value of the property ( set a computed property value for all matching elements.) Instead of providing a value, you provide a function that is evaluated by the function as the value of the property. )

4.attr (properties) // set multiple attribute values for the specified element, namely:{attribute name: "attribute value one", property name two: " Property value Two ", ...} . ( this is the best way to set many properties in bulk in all matching elements.) Note that if you want to set the class property of an object , you must use ' className ' as the property name. Or you can use ' class ' or ' id 'directly. )

HTML code structure:

<Ptitle= "Your favorite fruit is." ">What's your favorite fruit?</P><ul>   <Lititle= "Apple Juice">Apple</Li>   <Lititle= "Orange Juice"value= "123">Orange</Li>   <Lititle= "Pineapple Juice">Pineapple</Li></ul>

1.ATTR (name)//Gets the value of the property

1.1 Get the title value using attr (name):

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

result : orange juice

1.2 use attr (name) to get the value:

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

Results : 123

2. attr (Name,value)//Set the value of the property

2.1 Use attr (Name,value) to modify the title value: Do not eat oranges

<Script>$("ul Li:eq (1)"). attr ("title","Don't eat oranges"); alert ($ ("ul Li:eq (1)"). attr ("title"));</Script>

result : Don't eat oranges

3. attr (NAME,FN)//Set the function value of the property

3.1 Set the Value property to the Title property.

<Script>$("ul Li:eq (1)"). attr ("title",function(){ return  This. Value}); Alert ($ ("ul Li:eq (1)"). attr ("title"));</Script>

Results : 123

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

4.1 Get <ul> 2nd <li> set the title and Value property.

<Script>$("ul Li:eq (1)"). attr ({title:"Don't 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, not 123.

4.2 Get <ul> 2nd <li> set class.

  <   Script  >  $ (  " ul li:eq (1)  "  ). attr ({className:  "  lili  "  });  </ script  >    

Results : The second Li Html:<li class= "Lili" title= "Orange Juice" value= "123" > Orange </li>

4.3 Get <ul> 2nd <li> set ID.

  <   Script  >  $ (  " ul li:eq (1)  "  ). attr ({id:  "  lili  "  });  </ script  >    

Results : The second Li Html:<li id= "Lili" title= "Orange Juice" value= "123" > Orange </li>

4.4 Get <ul> 2nd <li> set style.

< Script > $ ("ul li:eq (1)"). attr ({style:"color:red  "}); </ Script >

So how do you delete attributes?

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

It's so simple . , attr is actually native JS in getattribute the simplified implementation ,  and removeattr is that RemoveAttribute the shorthand for this.

jquery attr () method