Difference between revisions of "JQuery"
Jump to navigation
Jump to search
Line 46: | Line 46: | ||
** this in the context of the function will resolve to the current item in the array being iterated over | ** 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. | ** The parameter passed to the function is set to the zero-based index of the element within the set. | ||
− | + | <pre>var allAlts = new Array(); | |
− | var allAlts = new Array(); | ||
$('img').each(function() { | $('img').each(function() { | ||
allAlts.push(this.alt); | allAlts.push(this.alt); | ||
− | }); | + | });</pre> |
− | </pre> |
Revision as of 17:28, 6 October 2009
Contents
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); });