Home > Developer > Web Develop
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: {attribute name one: 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. )
Example code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jquery attr () method </title>
<script src= "Js/jquery-1.4.2.min.js" language= "JavaScript" type= "Text/javascript" ></script>
<style>
P{color:red}
Li{color:blue;}
. lili{font-weight:bold;color:red;}
#lili {font-weight:bold;color:red;}
</style>
<body>
<p title= "Your favorite fruit is. "> What's your favorite fruit?" </p>
<ul>
<li title= "apple juice" > Apple </li>
<li title= "Orange Juice" alt= "123" > Orange </li>
<li title= "pineapple juice" > Pineapple </li>
</ul>
<script>
...
</script>
</body>
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>
Results: orange juice Display
1.2 Use attr (name) to get the ALT value:
<script>
Alert ($ ("ul Li:eq (1)"). attr ("alt"));
</script>
Results: Showing 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", "Do not eat oranges");
Alert ($ ("ul Li:eq (1)"). attr ("title"));
</script>
Result: show no oranges
3. attr (NAME,FN)//Set the function value of the property
3.1 Set the value of the ALT attribute 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: Showing 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 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, it 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. Here in order to explain in detail the attr () method, there is no suitable attribute, all using Alt 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 used to describe the graphic, which will be displayed instead of the picture when the picture cannot be displayed. The text will also appear when you move the mouse over the image.
Title: It is the text that will be displayed after the mouse is put up.
So how do I delete a property?
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 usage one, I want to delete Li's title attribute, then this:
<script>
$ ("ul Li:eq (1)"). Removeattr ("title");
</script>
So simple, attr in fact is the original JS getattribute simplified implementation, and removeattr is removeattribute shorthand.
So is there a property similar to attr ()?
In jquery, Val () is similar to the
$ (this). Val (); Gets the value of an element node, which is equivalent to $ (this). attr ("value");
$ (this). Val (value); Sets the value of an element node, which is equivalent to $ (this). attr ("value", value);
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
