jquery Gets the custom attributes (attr and prop) instance introduction _jquery

Source: Internet
Author: User

$ ("form"). attr ("check"); $ ("form"). Prop ("check"); Both can, but the new version of jquery recommended the second, two in other respects are similar, I found that the only difference is on the checkbox, need to use prop, or IE browser will not be compatible

Copy Code code 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>

Attachment: jquery attr () method

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:

Copy Code code 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)//Get the value of the property

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

Copy Code code as follows:

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

Results:

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

Copy Code code 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 is: Do not eat oranges
Copy Code code 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 property to the value of the title property.
Copy Code code 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 "name/value" to the property of all matching elements


4.1 get <ul> 2nd <li> set title and Alt properties.
Copy Code code 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 Code code as follows:

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

Results:


4.3 get <ul> 2nd <li> set ID.
Copy Code code as follows:

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

Results:

4.4 Get <ul> 2nd <li> set style.
Copy Code code as follows:

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

Results:

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:

Copy Code code as follows:

<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);

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.