Using jQuery Selectors in JavaScript

This video will show, with simple code examples, how to utilize jQuery selectors to add CSS styling and JavaScript event functionality to HTML elements. In this video you will be shown the jQuery selectors that give access to elements by ID, class and tag name. In addition you will be shown how to select elements that are direct descendants of other elements on the page.

By properly including the jQuery library at the top of your HTML page you are equipped to use jQuery selectors to access HTML elements on the page to perform any of the operations provided through the use of the jQuery API

Prerequisites include: No specific software

Today I'm going to demonstrate how to use JQuery selectors to add CSS S styling or event functionality to particular elements on an HTML page. The first step is to include the JQuery Library and then we also include a sample dot JS file where we can demonstrate utilizing JQuery selectors by default are HTML page is simply a list of favorite movies. An least favorite movies with no click functionality and no styling really added to it at all returning to our code. We will first demonstrate how to use the JQuery Selector for selecting by ID value. Our favorite movies. Header has the ID value favourites header for this H 3 tag. Taking that ID value, we can simply type dollar open paren open quote Pound and then utilized the ID value favourites header close quote close paren and that will serve as our selector to show you that this selector does indeed select that particular element. We will use the JQuery click function to add click functionality to change the text color from black to blue when the elements clicked returning to our web page in the browser. You can see that now when we click favorite movies. The text color changes from black to blue clicking around you can see that this wasn't added to any other element due to the unique ID value that exists for that favorite movies header. The next JQuery Selector that will show you is selecting by class name. Each list item for each favorite movie and least favorite movie on the page has the class movie dash List dash item added to it by taking this class value and setting up the Selector almost the same way. Instead, replacing the pound sign with a dot we can now select element by class name. Here will add click functionality that changes the text color from black to red when the element is clicked since this class is appended to more than one tag on the page clicking any of those tags. With that particular class will change the text color from black to red apad refreshing or page. You can see that clicking any movie in the favorite or least favorite list will change the text color from black to red. Returning to our code will now take a look at selecting by element with a given tag name for this particular example. We will select each age 3 tag on the page and add CSS styling for those particular headers. This selector will apply to both the favorite movies header and the least favorite movie Center in our JS file. We can type dollar open paren open quote and then simply the tag name of H 3 close quote close paren in here will use the CSS Jquery function. To add a background color of yellow to both of these H 3 tags on the page after refreshing we can see that this worked, adding the background color to both the favorite movies header as well as the least favorite movie Center. The final selector that will look at today is selecting a child element from a parent element. So we're going to go ahead and create this example by looking to select all unordered list elements that are nested directly beneath the Div tag so this selector will apply to. Just our favorite movies list as you can see, there's an unordered list tag right within a diff tag. So right now will type dollar open paren open quotes Div followed by greater than symbol and then followed by the tag name for unordered list. And this will allow us to select the unordered list elements that are direct children of a Div tag. Returning to a browser and refreshing you can see that we have added a background color of light gray to the unordered list that is a direct descendant of a Div tag. This is the case for favorite movies, but not the case for least favorite movies. So returning to our code. If we wanted. This to apply to the least favorite movies. List as well, or we can simply nest that unordered list within a diff. Now returning to our browser and refreshing you can see that that particular JQuery Selector, now applies to both favorite movies list and our least favorite movies list. So that is a simple introduction to JQuery selectors for selecting by ID selecting by class name selecting by elements with a given tag name or selecting direct descendants of a particular element on the page.