Fun ‘n Games with Selectors jQuery Fun ‘n Games with Selectors

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’.

Selecting based on Element, ID, and Class names ID: Suppose you had a div tag with an 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();

Selector flexibility – Descendant Selectors Let’s start with 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: <ol id="favoriteFruit"> 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

Selector flexibility – Child Selectors Child selectors: Similar to descendent selectors. However, with this one, you select only those items 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 > h1'); //In this case, will select the 'header' h1 tag $('body > strong');  See below: //NOTHING IS SELECTED!!! ‘strong’ is not a direct descendent of body

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: <input type= "button" value= "Greet Me" onclick= "greetUser()"> However, there are numerous other scripting commands besides function calls that you can provide as the value to ‘onclick’. For example: <input type= "button" value= "Greet Me" onclick= "alert('Hello!')"> Typically, we use only relatively simple scripting commands 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.

Selector flexibility – Attribute Selectors This is where you select elements based on: Whether or not a certain attribute is present What that attribute contains. Selecting based on presence of an attribute: For example, you might search for ‘img’ tags that contain the ‘alt’ attribute. Selecting based on the particular value of an attribute: You can even get more control 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. For now, let’s look at a few representative examples…

Selector flexibility – Attribute Selectors - Examples Syntax: We start with our tag selector, and then refer to the attributes using square brackets: [ and ] . Important note: As you review the examples throughout this lecture, 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! See if you can figure out what each one selects… $('img[alt]'); //selects images that include an 'alt' attribute $('input[type]'); //selects all buttons that have a 'type' attribute $('input[type="radio"]'); //selects all input elements that have a type of 'radio' //I.e. This commands selects all radio buttons on the page $('img[src="baseball.jpg"]'); //selects images that have an src of 'baseball.jpg'

Stop!!! Did you click through without practicing? There is no "secret" to getting this stuff other than stopping at every step along the way to practice and experiment with new concepts and techniques. It's fine to go through the lecture one time completely without doing so. But it is then vitally important to go back and review and practice the code and concepts that were discussed.

Attribute Selectors Examples, contd. These following three 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

Attribute Selectors Examples, contd. Let's break it down: $('img'); //selects all images on the page $('img[src]'); //selects images that have an src attribute $('img[src="ball"]'); //selects images that have an src attribute with a value //of 'ball' $('img[src*="ball"]'); //selects images that have an src that contains the word ‘ball’

The code above below will not only select redball. jpg and greenball The code above below will not only select redball.jpg and greenball.jpg, but it will also select balloon.jpg. $('img[src*="ball"]'); //selects images that have an src that contains the word ‘ball’ //e.g. redball.jpg, greenball.jpg, balloon.jpg (!), etc Can you come up with a line of code that will select only the first two but not the third? Answer: One option is: $('img[src$="ball.jpg"]'); This will select only src attributes whose values end with the value 'ball.jpg'

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 techniques for selecting based on attributes inside a tag. jQuery provides several additional techniques for selecting based on things other than attribute, IDs, classes, etc. Here we demonstrate a technique that called ‘filtering’. To use a filter, you provide a colon, : after the main selector, and then add the filter name. :has() – Finds elements that contain another selector. Example: Find all <div> 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 contain the word hockey.

Refining your selections with filters Some other filters include: first, last, even, odd, hidden, visible Examples – See if you can predict what is selected in each case: $('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' in their href attribute.

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') returns a list of 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!!

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 a strategy for figuring out 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.

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.

File: selectors_contd.htm