JQuery

From Colettapedia
Jump to: navigation, search

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');

Setting element content

  • html() - get
  • html(someMarkup) - set
  • text() - get
    • var text = $('#wrappedList').text()
    • concatenates all the text inside all the html markup
  • text(content)
    • where content (String) = The text content to be set into the wrapped elements. Any angle bracket characters are escaped as HTML entities.
    • returns the wrapped set
  • append()
    • $('p').append('some text');
    • $("p.appendToMe").append($(a.appendMe"))
  • appendTo(target)
  • prepend() and prependTo()
  • before() and insertBefore()
  • After() and insertAfter()