In this section we'll learn how to select an element by its ID and apply the same border seen previously.
This task can be achieved by performing the following instructions:
Create a copy of the
template.htmlfile and rename it asselecting-by-id.html.Inside the
<body>tag, add the following HTML markup:<h1 id="title">The Id selector</h1> <div id="container"> This example shows you how to use the Id selector. <p id="description">As you can see, this time the border is applied only to the h1 element because of its id.</p> <span id="note">Hey, I'm a note</span> </div>Edit the
<head>section as we did in the previous chapter, but this time add this script after the jQuery library instead:<script> $(document).ready(function() { $('#title').css('border', '2px solid #000000'); }); </script>Save the file and open it with your favorite browser.
The code shown is very similar to the previous code, but for the purpose of the task, we've applied an id to all of the elements children of <body>. Also, the texts have changed, but this is much less important.
The core part of our code is the third step where, instead of the All selector, we've used the ID selector. In our example, we've used it to pick up the <h1> having as id title and then apply the border. The ID selector is characterized by the sign # prepended to the value of the element's ID attribute and using it, jQuery returns a collection of either zero or one DOM element. It's important to highlight that this selector is surely the fastest one, regardless of the browser used since when it turns to deal with an ID, behind the scenes jQuery uses the JavaScript function document.getElementById(), which is very efficient.
Remember that, although doable, having more than one element with the same ID is invalid and must be avoided. However, in case you decided to ignore this rule (Please don't! Really!), be aware that jQuery will retrieve only the first matched element encountered. Moreover, just like the other selectors that we'll see, when no match is found, an empty collection is returned.
There are many characters you can use to set the ID of your elements, but you need to be aware that some of them need to be treated carefully.
The value of an ID doesn't allow just alphabetical characters, but also: dots, hyphens, semicolons, and others as regulated by the W3C (http://www.w3.org/TR/html4/types.html#type-id). You are free to use each of the described characters, but to tell jQuery to treat these characters literally rather than as CSS notation they must be escaped. You can escape them by prepending them with two backslashes.
So, if we want to select an element having ID .title, we would have to write $('#\\.title').
Once you performed a selection, the matched collection of elements can be stored in a variable for a later processing. The usual convention to name these variables is to write a dollar sign in front of the variable's name to highlight that it contains a jQuery object. Here is a example:
var $title = $('#title');
var $borderedTitle = $('#title').css('border', '2px solid #000000');