|
JQuery 101: Getting html attributes using JQuery |
||||||||
One of the things I find myself doing a lot in JQuery is getting and setting html attributes. It is very easy indeed to get the values of attributes, much like the old style document.getElementById javascript method, except in JQuery it is much easier.
This article is the first in a planned series demonstrating some of the key concepts of the JQuery library, and how to use it, starting at a beginner level and working up.
Here is an example of getting attributes using JQuery.
In this article we are using the .attr() method to use JQuery to read html attribute values from elements within the DOM.
2
3<s/cript type="text/javascript">
4$(document).ready(function() {
5
6 $("#getId").click(function() {
7 var data = $("div").attr("id");
8 alert(data);
9 });
10
11 $("#getClass").click(function() {
12 var data = $("div").attr("class");
13 alert(data);
14 });
15
16 $("#getIdent").click(function() {
17 var data = $("div").attr("ident");
18 alert(data);
19 });
20
21 $("#getContent").click(function() {
22 var data = $("div").html();
23 alert(data);
24 });
25
26
27 });
28</s/cript>
29
30<a id="getId" href="#">Get me the div's id</a><br>
31<a id="getClass" href="#">Get me the div's class</a><br>
32<a id="getIdent" href="#">Get me a self created element</a><br>
33<a id="getContent" href="#">Get me the div's content</a><br>
34
35<div id="div Number One" class="textholder" ident="This isn't a real html element">
36This text is inside a div
37</div>
Looking at the code above we can see that we include a reference to the JQuery library, then we have four functions. Each of these four functions has a trigger in the four links below it, that triggers the attribute read.
The important line in each function is this one:
This has a selector of the div element on the page, and then the attr() method, which when you pass in an attributeName will return the first value of that attribute, if it exists. If you pass in an attributeName and a value you can set the attribute, but I'll handle that in a different Blog entry.
So the line above we are saying get me the value of the id attribute.
An important note about this is that there is no validation on the attributes, IE they do not need to be valid html attributes, as in the case of the third link in the code above. I find this a little weird, but very useful. The only thing to watch out for is that if you do something like this then and W3C or WCAG validation will fail, because your html is invalid.
Here is an example of getting attributes using JQuery.
A lot of this information is documented on the JQuery API site here: http://api.jquery.com/attr/.
var myID = document.getElementById('getId').id;
It's marginally less expensive operation wise and doesn't bear the brunt of the overhead of the page query.
Thats one of the reasons I prefer using the attr() method, I often don't know the ID I'm manipulating, and it is usually being used in the middle of some other JQuery function, its 'nice' to keep it part of the same library.