JQuery

Selector Syntax

• These are equivalent

 $(document).ready(function() {
  $("table tr:nth-child(even)").addClass("even"));
});

 $(function() {
  $("table tr:nth-child(even)").addClass("even"));
});

Basic CSS selectors

• $('*') -return wrapped set of every DOM element
• $("a") - matches all link (<a>) elements
• $("#specialID") - matches elements that have an id of specilID
• $(".specialClass") - matches elements that have the class of specialClass
• $("a#specialID.specialClass") - matches links with an id of specialID and a class of special Class.
• $("p a.specialClass") - matches links with an id of specialID and a class of specialClass

Child, Container, and attribute selectors

• $("p a") - return link elements that are descendents of p tag
• read the selectors backwards
• $("p > a") - return link elements who have a p for a parent element
• $("ul.myList > li > a") - return link elements who are children of a li element, which are in turn children of a ul element of class "myList"
• $("p+a") - matches link elements immediately preceded by sibling p tag
• $("p~a") - matches link elements preceded by any sibling p tag
• $("a[href^=http://]") - return any link elements, the beginning of whose href attribute matches "http://"
• $("form[method]") - return any form element that simply has an explicit method attribute
• $("input[type=text]") - return any input element with a type attribute of text
• $("div[title^=my]") - return any div element whose title attribute starts with "my"
• $("a[href$=.pdf]")
• $("a[href*=jquery.com]")
• $("li:has(a)") - return any li element that has a link element in it
• only one level of nesting supported this way
• $("foo:not(bar:has(baz))") - this is ok

Managing the wrapped element set

• use of 'this' and 'this.innerHTML
• size()
• $('selector')[index] == $('selector').get(index)
  • returns a DOM element or an array of DOM elements
  • var allLabeledButtons = $('label+button').get();
• var n = $('img').index($('img#findMe')[0]);

Manipulating element properties and attributes

• each( function( index_within_array) { do something });
  • this in the context of the function will resolve to the current item in the array being iterated over
  • The parameter passed to the function is set to the zero-based index of the element within the set.

• var allAlts = new Array();

$('img').each(function() { allAlts.push(this.alt); });

• also

   var altValue = $('#myImage')[0].alt; 

• attr(name) - (fetch variant)
  • $('#myImage').attr("src");
  • attr names not case sensitive
• attr( name, value)
  • where name (string) = {class, cssFloat, float, for, maxlength, readonly, styleFloat }
  • and where value (string|Object|Function) = anything that resolves to a value.
• attr( attributes )

  • $('input').attr( { value: '', title: 'Please enter a value' } );

• removeAttr(name)

Changing element styling

• addClass(names)
• removeClass(names)
• css(name, value)
• css(properties)
• css(name) - get function
• width(value) and height(value)
  • equivalent:

$('div.myElements').width(500);

$('div.myElements').css('width','500px');