Home > Developer > JavaScript

Introduction to getting custom attributes (attr and prop) by jquery

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

$ ("Form "). attr ("check"); $ ("form "). prop ("check"); both of them are acceptable, but the new version of jquery recommends the second one. Both of them are similar in other aspects. The only difference I found is that in checkbox, you need to use prop, otherwise IE browser will be incompatible
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> </title>
<Scripttype = "text/javascript" src = "/js/jq1.3.2.js"> </script>
</Head>
<Body>
<Divlang = "rrery"> </div>
<Divdata-url = "rrery"> </div>
<Divdata-url = "rrrrrrrrrrrrttttttttttttttttttttttttttgggggggggggggggggg"> </div>
<Divdata-url = "external"> </div>
</Body>
</Html>
<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>

Appendix: jquery attr () method

In jquery, the attr () method is used to obtain and set element attributes. attr is the abbreviation of attribute. attr () and attr () are often used in jQuery DOM operations () there are four expressions.

1.Attr (Attribute name)// Obtain the attribute value (obtain the attribute value of the First Matching Element. This method can be used to conveniently obtain the value of an attribute from the First Matching Element. Undefined is returned if the element does not have an attribute)

2.Attr (Attribute name, attribute value)// Set the attribute value (set an attribute value for all matching elements .)

3.Attr (Attribute name,Function value)// Set the function value of the attribute (set a calculated attribute value for all matching elements. Instead of providing a value, a function is provided, and the value calculated by this function is used as the attribute value .)

4.Attr (properties) // Set multiple attribute values for the specified element, that is, {attribute name 1: "attribute value 1", attribute name 2: "attribute value 2 ",... ... }. (This is the best way to set multiple attributes in batches among all matching elements. Note: To set the class attribute of an object, you must use 'classname' as the attribute name. Or you can directly use 'class' or 'id '.)

Sample 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">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> attr () method in jquery </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>
</Head>
<Body>
<P title = "your favorite fruit is. "> What is your favorite fruit? </P>
<Ul>
<Li title = "apple juice"> Apple </li>
<Li title = "orange juice" alt = "123"> oranges </li>
<Li title = "pineapple juice"> pineapple </li>
</Ul>
<Script>
...
</Script>
</Body>
<Html>

1. attr (name) // obtain the attribute value

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

Copy codeThe Code is as follows:
<Script>
Alert ($ ("ul li: eq (1)"). attr ("title "));
</Script>

Result:

1.2 use attr (name) to obtain the alt value:

Copy codeThe Code is as follows:
<Script>
Alert ($ ("ul li: eq (1)"). attr ("alt "));
</Script>

Result:


2. attr (name, value) // set the attribute value


2.1 use attr (name, value) to modify the title value to: 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>

Result:


3. attr (name, fn) // set the function value of the attribute

3.1 set the value of the alt attribute to the value of the title attribute.
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>

Result:


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


4.1 obtain the <ul> 2nd <li> set title and alt attributes.
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>

Result:



4.2 obtain <ul> 2nd <li> set classes.
Copy codeThe Code is as follows:
<Script>
$ ("Ul li: eq (1)"). attr ({className: "lili "});
</Script>

Result:


4.3 obtain the <ul> 2nd <li> setting IDs.
Copy codeThe Code is as follows:
<Script>
$ ("Ul li: eq (1)"). attr ({id: "lili "});
</Script>

Result:

4.4 obtain <ul> 2nd <li> set styles.
Copy codeThe Code is as follows:
<Script>
$ ("Ul li: eq (1)"). attr ({style: "color: red "});
</Script>

Result:

Adding alt to li is incorrect. 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 image of the submit button. In order to describe the attr () method in detail, there is no proper attribute. alt is used for all examples. It is only for reference in attr () method usage.
This section describes the differences between alt and tite.
Alt: the text used to describe the image. When the image cannot be displayed, the text is displayed instead of the image. This text is displayed when you move the cursor over the image.
Title: The text displayed after the mouse is placed.

How can I delete attributes?

The keyword for deleting attributes in jquery is removeAttr. Note that A is in upper case and how to use it:

The same is the html code in usage 1. If I want to delete the title attribute of li, this is the case:
Copy codeThe Code is as follows:
<Script>
$ ("Ul li: eq (1)"). removeAttr ("title ");
</Script>

In this simple way, attr is actually a simplified implementation of getAttribute in native js, while removeAttr is short for removeAttribute.

Is there any property similar to attr?
In jquery, val () is similar,
$ (This). val (); get the value of an element node, equivalent to $ (this). attr ("value ");
$ (This). val (value); sets the value of an element node, equivalent to $ (this). attr ("value", value );

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
introduction to classes and objects introduction to php and mysql introduction to programming and scripting languages introduction to php and mysql pdf mean by introduction introduction to gis programming and fundamentals with python and arcgis archive and index attributes
Related Article
JavaScript solution to the eight Queens Problem method summar...
The difference between single and double quotes in JavaScript...
Http status code: 301, 302 redirection, 302 redirection
The html space symbol nbsp; ensp; emsp; introduces and implem...
Ajax and 302 response code Testing
Ajax and 302 response code test_javascript-js tutorial

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More