Using Basic Selectors

jQuery library includes sizzle, uses CSS selectors to easily select DOM elements.

jQuery or $ is the jquery object, I avoid $, it can cause collisions, using noConflict; syntax for object is jQuery( selector ).chainedMethod.

method css( property name ) or css( property name, property value ) or css( { property name: property value, ... } )
Color Review, #rrggbb, or #rgb or CSS3 Color Name

Table 1.1 Basic Selectors Examples

HTML Core attributes

• available for all HTML tags, attribute name = attribute value
• attribute name set by W3C, e.g.: id, class, title
• Each element on a page should have a unique id, id value is a standard identifer
• identifier case sensitive, number after first letter can use underscore or camel casing
  with quotes you can use spaces and other non standard characters - best to stick with convention,
  
• first paragraph can be identified using id="paragraph_1", or DOM p:first selector
• class="redLine" group of tags; css we use .redLine

Example basic_html5.html

- can download zip from author site. ...

1. Extract zip files and
2. Select extraction folder user DW Replace src="../inc/jquery-1.7.2.js" with exact src in this file src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"
3. Open chap-1/1.1.html - verify jQuery object exists
4. We will be using 1.11.3 instead of 1.7.2 note I use the exact same src link throughout entire faculty site, why?
5. Can use text book tutorials to create files.
6. Analyze file

Tips

• Use ids and classes with HTML elements, that make it easier to select elements
• Avoid using jQuery all selectors, will slow down browser
• If you want to select the same element more than once, save it in a JavaScript variable

Combining selectors

• Same as
• Open chap-1/1.2.html
  • Analyze File notice header h1, h2
  • Use Inspect Console, You will have the jQuery object available in console window
  • In console JS input field enter: $( "h1").css( "background-color", "cyan" );
  • Notice firebug will give you help on finding a chained method $( selector ).
  • Look for Class in file (use Web Developer) change its background color, red, skyblue use Up Arrow

Applying Filters to Selectors

• Similar to CSS Pseudo Classes
• Contains filter , doesn't seem to be working that well
• :even li elments;
• first li tag is 0, :gt than
• nth-child (each ul tag has li children)
• can us equations 2n, 2n+1,
  
  
• CSS3 has a lot of pseudo classes

Basic Filters

• Open chap-1/1.3.html
• Note $('li:not(#third)' all but li id=third has a blue box

Basic Contains Filters

• Open chap-1/1.4.html
• Red+Green is Yellow but can use css color name yellow
• Remember $('selector') selects an HTML element or elements,
  We have been chaining the .css method, but you can use .addClass( 'className' ); which adds a class name to the element
• addClass( "starBullet" );

Use Filter Extension Method

• Open chap-1/1.5.html
• $('li').filter(':first'), $(li) select all li clements, from that seletion select only first one .filter( 'first' )
• can use css li:first
• $('li').filter( ':lt(3)') select all li (entire pages) first 2 on page are selected

:even and :odd filters, nth-child( 2n )

Atrribute Selector -

• 1.7.html check when user leaves the email input field .blur eventHandler
  
• .click( EventHandler ) versus onclick 1.8.html.

Rewind - Review

• • What are the four basic jQuery selector types?
• • How can you combine selectors to allow you to apply jQuery methods and functions to more than one set of elements?
• • Why should you apply the filter() method with jQuery’s filter extensions?
• • When referring to a set of selected elements, what is a zero-based index?
• • If you change the jQuery selector in the example for $(this) from $('#secondLink') to $('a'), what do you think will happen?
• • Can using an attribute selector prevent you from having to use IDs and classes?