1. jQuery: Fun ‘n Games with Selectors

2. Learning Objectives By the end of this lecture, you should be able to: – Comfortably use jQuery to select based on tag name, ID name, class name – Select using descendant selectors – Comfortably look up and apply selections using various attribute selectors – Comfortably look up and apply selections using filters – Understand how to apply multiple functions to a single selection on a single line using ‘chaining’.

3. Selecting based on Element, ID, and Class names ID: Suppose you had a div tag withan id of ‘ contact_info ’. You could select this ID in the typical JavaScript way using: document.getElementById('#contact_info'); – Or you can do it the jQuery way: $('#contact_info'); Element: To select an element (a, img, p, h2, etc) using JavaScript: document.getElementsByTagName('h2'); – The jQuery way: $('h2'); Class: While selecting based on class is certainly doable using standard JavaScript, this is one of the many cases in which results can vary depending on the browser being used. So we will forgo discussion on how to do it using JS for now and focus on the jQuery way: $('. name_of_the_class'); EXAMPLE: To hide all elements to which the class ‘ navItem ’ has been applied: $('.navItem').hide();

4. Selector flexibility – Descendant Selectors Let’s start taking a look at ways in which you can use jQuery selectors to really get in there and pinpoint selections you want to work with. Descendant selectors: A way to select all items that are contained within another item. This is more powerful than you might initially think. For example, say you have a list of items with an ID of favoriteFruit like so: and wish to select all of the images present inside that list so that you can resize them. You can select all of the ‘img’ tags within this id using: $('#favoriteFruit img') – The key here is the order: First you select the main item, then place a space, and then specify the inside item. In the example above, we first select the ‘ favoriteFruit ’ id. We then place a space followed by ‘ img ’. The result is that all images anywhere inside a tag with an ID of ‘ favoriteFruit ’ will be selected. – You can then do something such as: $('#favoriteFruit img').width('50px'); $('#favoriteFruit img').height('50px'); //will set all images inside the ‘favoriteFruit’ ID section //to 50 pixels high and wide $('#navigationBar a').hide(); //will hide all hyperlinks inside the //section that has an ID called ‘navigationBar’ EXAMPLE: descendent_selectors.htm descendent_selectors.htm

5. Selector flexibility – Child Selectors Child selectors: Similar to descendent selectors. However, with this one, you select only those instances of a certain tag (or ID, or class) that are directly (i.e. first descendent only) within another tag. You probably won’t use this much, but it’s worth knowing about. This technique also serves as a good example of the kinds of ways in which you can finesse your selections. To create a child selector, you first name the parent item, then a ‘>’, and then the child item: $('body > p'); //selects every p tag directly (i.e. not nested) within body $('#footer > h1'); //selects every h1 directly within a section with id=‘footer’ $('body > strong'); //NOTHING IS SELECTED!!! ‘strong’ is not a direct descendent of body

6. Quick look at the ‘onclick’ attribute For many of you, the only value you have seen provided to the ‘onclick’ attribute is a function. For example: However, there are numerous other scripting commands besides function calls that you can provide as the value to ‘ onclick ’. For example: Two important notes about the value of the onclick attribute: Only relatively simple scripting commands can or should be used as the value to the onclick attribute. If you have any complex scripting to do, you should place that script inside a function and invoke the function via the onclick attribute. We do not place a semicolon at the end of the scripting command.

7. Selector flexibility – Attribute Selectors This is where you select elements based on whether or not a certain attribute is present or by what that attribute contains. For example, you might search for ‘img’ tags that contain the ‘alt’ attribute. You can even get more powerful by searching, say, for those images that have a ‘width’ attribute greater than 200 pixels. Or you can select images whose ‘src’ values contain the text “ball” (e.g. redBall, greenBall, blueBall, etc). So, attribute selectors can be quite powerful. Because of the large number of attribute selectors and the amount of detail, a textbook or reference site should be your resource for really learning about them. Let’s look at a few representative examples…

8. Selector flexibility – Attribute Selectors - Examples We start with our tag selector, and then refer to the attributes using square brackets: [ and ]. NOTE: As you look at these examples, note the use of nested quotes. Recall our suggested convention of using single quotes most of the time in our scripting, and to try and limit use of double-quotes to attribute values. These examples should help you understand why this is can be a very helpful convention! $('input[type="radio"]'); //selects all radio buttons $('img[alt]'); //selects images that include an ‘alt’ attribute $('img[src="baseball.jpg"]'); //selects images that have an src of ‘baseball.jpg’

9. Attribute Selectors Examples, contd. These two techniques are particuarly helpful: $('img[src*="ball"]'); //selects images that have an src that contains the word ‘ball’ //e.g. redball.jpg, greenball.jpg, balloon.jpg (!), etc $('img[src^="ball"]'); //selects images that have an src that begins with ‘ball’ //e.g. ball_of_wax.jpg, ball_and_chain.tif, balloon.png $('a[href$=".ppt"]'); //selects all hyperlinks that end with the text ‘.ppt’ //e.g. lecture1.ppt, intro_to_jquery.ppt, etc

10. Refining your selections with filters So far we have learned to select based on an ID, a class name, and a tag. We then learned that we can further refine our selections based on whether or not an attribute is present, and even based on the specific value of an attribute. Let’s continue our discussion on techniques for drilling down and pinpointing selections by discussing filters. :has() – Finds elements that contain another selector. Example: Find all sections that contain an unordered list: $('div:has(ul)'). Do not confuse with descendent selectors. As a descendent selector, $('div ul') Would select the ‘ul’ items. In this case, it is the ‘div’s that are being selected. Also, do not confuse the has() filter with selecting based on the item containing specific text such as using an attribute filter: $('a*[href="ppt"]'). :not() – The selection will only include those elements that do not match a certain selector type. Example: $('div:not(.popout)'); //selects only those divs that do not have the 'popout' class applied. :contains() – Selects elements that contain specific text. Example: $('li:contains("hockey")'); //selects only list items that contan the word hockey.

11. Refining your selections with filters Some additional examples: $('p:first'); //selects the first paragraph on a page $('p:last'); //selects the last paragraph on a page $('p:not(.emphasize)'); //selects every paragraph on a page that does NOT apply the.emphasize class $('a:not([href$=".ppt"])'); //selects every anchor tag that does NOT link to a powerpoint file $('li:hidden'); //selects every list item that is hidden //For example, if you have hidden some items previously, you can //make them visible again with: $('li:hidden').show(); $('a:not([href*="google.com")'); //selects all anchors that do NOT include 'google.com' I their href attribute.

12. Selections often return a list As you have seen, a jQuery selection often returns an entire list of items instead of one single item. When you apply a function to a selection, jQuery doesn’t care if the selection is one item or an entire list of items. It will simply apply the function to whatever was returned by the selection. For example, suppose you want to hide all of the images on a page, you could do so with the following code: $('img').hide(); //The $('img') selects all the images on the page. //The hide() function is applied to ALL items in the selection //An impressively quick and simple way of doing things!!

13. Examples The following will hide all of the images on a page $('img').hide(); Suppose you wanted to limit this list so that you only hide images that include an ‘alt’ attribute: $('img[alt]').hide(); Suppose you wanted to further limit this list so that you only hide images that include an ‘alt’ attribute that has the word ‘ball’ anywhere inside of it: $('img[alt*="ball"]').hide(); NOTE: This steps used in these examples also serve as a great way to show you how to get jQuery to work the way you want it to. That is, start with your selection as simple and broad as you can. Then work on refining your selection further and further, testing your page each time, until you get it to work the way you want it to.

14. Chaining functions If you want to do several operations on a selection, you could write out each function one at a time – OR, you could simply concatenate the functions, one after the other. Example: Suppose you want to take all of the images on a page and set them to the identical size (let’s say width=200 pixels, and height = 200 pixels), and then fade them in over 1 second. You could do so with: $('img').width(200); $('img').height(200); $('img').fadeIn(1000); Instead, however, you could save time and space by ‘chaining’ the functions together like so: $('img').width(200).height(200).fadeIn(1000); This is not simply cosmetic. Chaining functions turns out to be faster and more efficient. We will discuss more about efficient coding as we progress through the course. For now, however, if you have a group of related functions that you are planning on applying to a particular selection, you should try and chain them.

15. File: selectors_contd.htm