Use of jquery attributes (attributes) (1. attributes)

Source: Internet
Author: User

This article describes how to use ATTR (name), ATTR (properties), ATTR (Key, value), ATTR (Key, FN), and removeattr (name.
You have Article If you have any suggestions or comments, please send to email: sjzlgt@qq.com
You can go to the official jquery website to learn more about jquery.
The following Code , After running, you need to refresh it. <textarea id="runcode73879"></textarea> Xmlns = "http://www.w3.org/1999/xhtml">


Use of jquery-attributes (attributes) (1. attributes)

This series of articles mainly describes how to use the attributes (attributes) of the jquery framework. I will describe it in the form of an instance. It is based on simplicity and comprehensiveness and will not be deeply involved. The articles are divided: attribute, class, HTML code, text, and value.

This article describes how to use ATTR (name), ATTR (properties), ATTR (Key, value), ATTR (Key, FN), and removeattr (name.

If you have any suggestions or comments on this series of articles, please send to: sjzlgt@qq.com

You can go to the official jquery website to learn more about jquery.
Copyright: code-cat blog: http://www.cnblogs.com/bynet reprint please keep the original author, source and copyright information! You have tested IE6/7/8 and Firefox, and the results are all done. 1. ATTR (name) Usage

Definition: gets 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. If the element does not have a property, undefined is returned.

Returned value: Object

Parameter: Name (string): attribute name

Instance: output the path, ID, name, width, ALT, and value of the first image in the DIV with ID "div_a1" to the DIV with ID 'div _ a1_1. Code:

$ ("# Div_a1_1 "). append ('<span style = "color: red;"> <strong> image quantity: $ ("# div_a1 IMG ") get '+ $ ("# div_a1 IMG "). size () + 'image </strong> </span> <br/> ');

$ ("# Div_a1_1 "). append ('path to the first image: '+ $ ("# div_a1 IMG "). ATTR ("src") + '<br/> ');

$ ("# Div_a1_1 "). append ('first image ID: '+ $ ("# div_a1 IMG "). ATTR ("ID") + '<br/> ');

$ ("# Div_a1_1 "). append ('first image name: '+ $ ("# div_a1 IMG "). ATTR ("name") + '<br/> ');

$ ("# Div_a1_1 "). append ('width of the first image frame: '+ $ ("# div_a1 IMG "). ATTR ("width") + '<br/> ');

$ ("# Div_a1_1 "). append ('alt: '+ $ ("# div_a1 IMG") in the first image frame "). ATTR ("Alt") + '<br/> ');

$ ("# Div_a1_1 "). append ('<span style = "color: red;"> <strong> value of the first image frame:' + $ ("# div_a1 IMG "). ATTR ("value") + '</strong> </span> <br/> ');
// Click the button to view the effect

Div id = "div_a1"
Id = "div_a1_1"



You can try to output the attribute value of the text box above

Note: The selector $ ("# div_a1 IMG") gets two images, while ATT (name) only gets the attribute value of the first image. The IMG element does not have the value attribute, so the final output is 'undefined '.2. ATTR (properties) Usage

Definition: sets an object in the form of "name/value" to the attributes of all matching elements.

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. addclass (class) and. removeclass (class ).


Returned value: jquery

Parameter: Properties (MAP): "name/value pair" Object of the attribute

Example: Set the SRC and ALT attributes for all images in the DIV with ID "div_b1. Code:

$ ("# Div_b1 IMG: eq (0)"). ATTR ({SRC: "/upload/2009-12/20091214233425668. GIF", alt: "google "});

$ ("# Div_b1 IMG: eq (1)"). ATTR ({SRC: "/upload/2009-12/20091214233425172. GIF", alt: "yahoo "});// Click button 2 to view the effect

Div id = "div_b1"
3. ATTR (Key, value) usage
definition: Set an attribute value for all matching elements.
return value: jquery
parameter: Key (string): attribute name value (object): attribute value
instance: set the src attribute for all images in the DIV with ID "div_c1. Code:
$ ("# div_c1 IMG: eq (0 )"). ATTR ("src", "/upload/2009-12/20091214233425668. GIF ");
$ (" # div_c1 IMG: eq (1 )"). ATTR ("src", "/upload/2009-12/20091214233425172. GIF "); // click" 3 "to see the effect.

Div id = "div_c1"

4. ATTR (Key, FN) Usage

Definition: Set a calculated attribute value for all matching elements. Instead of providing a value, a function is provided. The value calculated by this function is used as the attribute value.

Returned value: jquery

Parameter: Key (string): attribute name FN (function): Return Value Function range: Current element, parameter: index value of current element

Example: Set the title attribute value to the src attribute value for all images in the DIV with ID "div_d1.
Code: $ ("# div_d1 IMG"). ATTR ("src", function () {return this. Title ;});// Click the button to view the effect

Div id = "div_d1"


5. removeattr (name) Usage

Definition: delete an attribute from each matching element.

Returned value: jquery

Parameter: Name (string): name of the attribute to be deleted

Example: Delete the src attribute of all images in the DIV with ID "div_e1.
Code: $ ("# div_e1 IMG"). removeattr ("src ");// Click "5" to view the effect

Div id = "div_e1"


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.