We will be undergoing scheduled maintenance on May 20th, 2013 at 02:00 GMT.
jQuery Tutorials
Getting Started / Getting Attributes
Subtitles of the Movie (jQuery / Getting Started / Getting Attributes)
We have seen many ways to alter the attributes of HTML elements using jQuery. It is just as simple to get attributes of elements which can provide important functionality in your jQuery applications. To start create an HTML document with the code shown here or refer to the included file 3.1.html. On line thirteen we have a DIV with an ID of greeting. On line fifteen we have an empty div with an ID of show me. On line eighteen, you may recognize the ATTR function which we used before with two parameters in order to alter the value of a few attributes. In this example ATTR takes only one parameter and so is used to returning the value of the class attribute of the DIV with the ID greeting and we assign it to a variable called my class. The next line uses the html function on the second DIV to make the content of that display the class of the first DIV. When we view this page in a browser, we now see that the second DIV shows the word plain, which is the name of the class of the first div. So we can see that the ATTR function is very useful and versatile as we can use it to both get and set the values of any HTML element, but this function has one important limitation. And that is, it only returns the value of one element. Let's demonstrate this. In the code shown here, also contained in the file 3.2.html we have made a few important changes. The DIV on line fifteen now has a class called fancy. The second difference is that we have changed our Selector on line eighteen to select all DIV elements on the page. So will the second DIV display the first class plain or the second fancy class. Viewing the page shows us that the ATTR function only returns the value of the first element where there is more than one match. The same thing would happen even if we supply a list of element IDs. It will still only show the value that belongs to the first element. Now we've seen a limitation of the ATTR function, but let's look at an impressive feature. Copy the code shown here into a new document or refer to the included 3.3.html file. Note that the show me DIV on line fifteen has an attribute called my data which does not actually exist in the HTML language. Now look at line eighteen, we use the ATTR function and ask it for the value of our custom my data attribute. Displaying this page in your browser will show the actual content of this custom attribute. This can be a very powerful feature in your jQuery applications as you can use data that may not be possible to include in any existing HTML attributes. Similar to the ATTR function, the HTML function can also be used to both get and set the HTML value of any element. Consider the code shown here in 3.4.html. We have two DIVs. The first one Div one shown on line thirteen has a red border and contains no HTML. The second DIV, DIV two on line seventeen contains HTML and has a black border. A jQuery code on line twenty created a variable called My HTML and assigns to it the value of the HTML attribute of DIV two. On line 21, we effectively copy the contents of DIV two to DIV one. When we view the file in a browser, it shows that both DIVs now contain the same HTML. We can see on this one file how jQuery's HTML function can be used to both get and set an elements HTML value. Now that we're very familiar with selecting elements, reading and altering their attributes, let's put it altogether in the next lesson.
Tutorial Information
| Course: | jQuery |
| Author: | John Fontana |
| SKU: | 34277 |
| ISBN: | 978-1-61866-020-6 |
| Release Date: | 2011-11-18 |
| Duration: | 7 hrs / 102 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
