jquery Get Custom properties (attr and prop) instance introduction font: [Increase decrease] type: Reprint
jquery uses the attr () method to get and set element properties, attr is an abbreviation for attribute (attribute), which is often used in jquery DOM operations attr (), attr () has 4 expressions
$ ("form"). attr ("check"); $ ("form"). Prop ("check"); Both can be, but the new version of jquery recommended the second, two in other aspects are similar, I found the only difference is on the checkbox when the need to use prop, or IE will not be compatible
Copy CodeThe code is as follows:
<title></title>
<scripttype= "Text/javascript" src= "/js/jq1.3.2.js" ></script>
<body>
<divlang= "Rrery" > </div>
<divdata-url= "Rrery" > </div>
<divdata-url= "RRRRRRRRRRRRRRTTTTTTTTTTTTTTTTTTTTTTGGGGGGGGGGGGGGGGGGGGGG" > </div>
<divdata-url= " Rrrrrrrrrrrrrrrrrrrrrrrrrrttttttttttttttttt777777777777777777777777777777777778888888888455rrrrrrrrrrrrrrrrrrrrrrrrrrrrrr rrtttttttttttttttttttttttttttt777777777777777777777777777777777778888888888888 "> </div>
</body>
<script>
var J = $ ("Div[lang]"). get ();
Alert ($ ("[Data-url]:eq (2)"). attr ("Data-url"));
$ ("[Data-url]"). each (function () {
Alert ($ (this). attr ("Data-url")); });
$ ("[Data-url]"). each (function () {
Alert ($ (this). Prop ("Data-url")); // });
</script>
Attached: jquery attr () method
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:
Copy CodeThe code is as follows:
<! 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):
Copy CodeThe code is as follows:
<script>
Alert ($ ("ul Li:eq (1)"). attr ("title"));
</script>
Results:
1.2 Use attr (name) to get the ALT value:
Copy CodeThe code is as follows:
<script>
Alert ($ ("ul Li:eq (1)"). attr ("alt"));
</script>
Results:
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
Copy CodeThe code is as follows:
<script>
$ ("ul Li:eq (1)"). attr ("title", "Do not eat oranges");
Alert ($ ("ul Li:eq (1)"). attr ("title"));
</script>
Results:
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.
Copy CodeThe code is as follows:
<script>
$ ("ul Li:eq (1)"). attr ("title", function () {return this.alt});
Alert ($ ("ul Li:eq (1)"). attr ("title"));
</script>
Results:
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.
Copy CodeThe code is as follows:
<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:
4.2 Get <ul> 2nd <li> set class.
Copy CodeThe code is as follows:
<script>
$ ("ul Li:eq (1)"). attr ({className: "Lili"});
</script>
Results:
4.3 get <ul> 2nd <li> set ID.
Copy CodeThe code is as follows:
<script>
$ ("ul Li:eq (1)"). attr ({ID: "Lili"});
</script>
Results:
4.4 Get <ul> 2nd <li> set style.
Copy CodeThe code is as follows:
<script>
$ ("ul Li:eq (1)"). attr ({style: "color:red"});
</script>
Results:
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:
Copy CodeThe code is as follows:
<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);
jquery Get Custom properties (attr and prop) instance introduction
