We will be undergoing scheduled maintenance on May 20th, 2013 at 02:00 GMT.
jQuery Tutorials
Getting Started / Selecting Elements
Subtitles of the Movie (jQuery / Getting Started / Selecting Elements)
Whenever we use jQuery or any kind of JavaScript for that matter, we will almost always want to work with existing elements in the web page. To do this we use what is called Selectors. Instead of JavaScript, if we want to refer to all page elements with a particular tag name we use the function get elements by tag name. In the first line of this example, we are referring to the P Tag which would allow us to do something with all paragraph elements. In the second line we are selecting all DIVs on the page. Now go ahead and create an HTML file and try out the code shown here. You may also refer to the accompanying file named 1.1 HTML. This example shows how we can select items on a page, simply by passing the name of the element in quotes to the dollar sign function. We then call jQuery CSS function to manipulate the items we have selected. On line nineteen, we specified that the text color of all paragraphs should be red and the text color of all DIVs should be black. When previewed in your browser, it should like something like this. We can see that our code works and we successfully manipulated the CSS Properties of all HTML paragraphs and DIVs by using the Selectors for those items. It is a very common task in JavaScript to refer to HTML elements with specific IDs. Elements with a certain ID are typically unique elements that are only displayed once. In this example, we see the way we would typically use get element by ID in standard JavaScript to refer to an element with the ID of footer. Now, let's take a look at how we handle this in jQuery. Now create another HTML file with the code shown here. You may also refer to 1.2.html included with this course. On line sixteen we have given the DIV tag an ID of footer. On lines nineteen and twenty we passed the div name the same way we did with HTML elements, only this time we use the pound sign to indicate that we are referring to an ID. We then use jQuery CSS function to set the border color and width of that DIV ID so that we have a page that looks like this. Here we can see that our DIV with the ID of footer shows the border and width that we set, by altering it's CSS attributes with jQuery. It is also frequently useful to select elements by their class name. In this code example, which you can create yourself or refer to 1.3.html we use a period preceding the name of the class in our Selector. Note that we have added the class red to the paragraph tag on line thirteen and to the DIV tag on line sixteen. On line nineteen we used the Selector.red in order to select these elements and change their background color to red using the CSS function. Note that both the paragraph and DIVs background color have been changed, as they both have the class red, even though they are different types of HTML tags. Now here's an interesting twist. Take a look at line nineteen, which is also contained in the file 1.4.html. Our Selector starts with the letter P which indicates the HTML paragraph tag selector, that is followed by a colon and the word first. This useful Selector allows us to specify only the first of a type of element on a page. When we view this in our browser, we can see that only first paragraph tag was effected. It is extremely easy to select multiple elements all at once, simply by separating each element with a comma. You can even mix different types of Selectors, as shown here, we select all items with the class red, as well as any DIVs, the element with the footer ID and all paragraph tags as well. There are many other types of Selectors such as those used for form elements and traversing through parent child elements, which we will cover in greater detail throughout the lessons in this course, through practical examples. Meanwhile feel free to visit the jQuery Selectors Reference at API.jQuery.com/category/selectors.
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
