Jquery attr () method attribute assignment and Property Get detailed _jquery

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

1. attr (property name)//Get the value of the property (get the property value of the first matching element). This method makes it easy to get the value of a property from the first matching element. Returns undefined if the element has no corresponding property

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

3. attr (property name, function value)//Set the function value of the property (set a computed property value for all matching elements). Instead of providing a value, a function is provided that evaluates the value of the function as the property value. ）

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

Sample code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

 
 

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

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

<script>

Alert ($ ("ul Li:eq (1)"). attr ("title"));

</script>

Result: Orange juice displayed

1.2 Use attr (name) to get the ALT value:

<script>

Alert ($ ("ul Li:eq (1)"). attr ("alt"));

</script>

Results:

Show 123

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

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

<script>

$ ("ul Li:eq (1)"). attr ("title", "Do not eat oranges");

Alert ($ ("ul Li:eq (1)"). attr ("title"));

</script>

Results:

Show no eating oranges

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

3.1 Set the value of the Alt property to the value of the title property.

<script>

$ ("ul Li:eq (1)"). attr ("title", function () {return this.alt});

Alert ($ ("ul Li:eq (1)"). attr ("title"));

</script>

Results:

Show 123

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

4.1 Get <ul> 2nd <li> set title and Alt properties.

<script>

$ ("ul Li:eq (1)"). attr ({title: "Do not drink orange juice", alt: "Not 123"});

Alert ($ ("ul Li:eq (1)"). attr ("title"));

Alert ($ ("ul Li:eq (1)"). attr ("alt"));

</script>

Results:

Show 2, no orange juice, not 123.

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

<script>

$ ("ul Li:eq (1)"). attr ({className: "Lili"});

</script>

Results:

<li title= "apple juice" > Apple </li>

<li class= "Lili" alt= "123" title= "Orange juice" > Orange </li>

<li title= "pineapple juice" > Pineapple </li>

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

<script>

$ ("ul Li:eq (1)"). attr ({ID: "Lili"});

</script>

Results:

<li title= "apple juice" > Apple </li>

<li class= "Lili" alt= "123" title= "Orange juice" > Orange </li>

<li title= "pineapple juice" > Pineapple </li>

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

<script>

$ ("ul Li:eq (1)"). attr ({style: "color:red"});

</script>

Results:

<li title= "apple juice" > Apple </li>

<li class= "Lili" alt= "123" title= "Orange Juice" style= "color:red" > Orange </li>

<li title= "pineapple juice" > Pineapple </li>

Adding Alt to Li is an error that can only be used in IMG, area, and input elements (including applet elements). For the INPUT element, the ALT attribute is intended to replace the picture of the Submit button. In order to explain the attr () method in detail here, there is no suitable attribute, all ALT is used for example, only for learning reference attr () method usage.

Here is a description of the difference between Alt and Tite.

ALT: This is the text that describes the graphic, and when the picture cannot be displayed, the text is displayed instead of the picture. The text will also appear when you move the mouse over the picture.

Title: After the mouse is put up, will display the text.

So how do you delete attributes?

The key word for deleting attributes in jquery is: removeattr Note that a is uppercase. See how it's used:

The same is the HTML code in the usage one, I want to delete Li's title attribute, so that's it:

<script>

$ ("ul Li:eq (1)"). Removeattr ("title");

</script>

So simple, attr in fact is the original JS getattribute simplification, and removeattr is the removeattribute of the shorthand.

So is there a property similar to attr ()?

The Val () in jquery is similar,

$ (this). Val (); Gets the value of an element node, equivalent to $ (this). attr ("value");

$ (this). Val (value); Set the value value of an element node, equivalent to $ (this). attr ("value", value);

Above this jquery attr () method property assignment and property access is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.