Difference between revisions of "JQuery"
Jump to navigation
Jump to search
(9 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
==Selector Syntax== | ==Selector Syntax== | ||
+ | * These are equivalent | ||
+ | <pre> $(document).ready(function() { | ||
+ | $("table tr:nth-child(even)").addClass("even")); | ||
+ | }); | ||
+ | </pre> | ||
+ | <pre> $(function() { | ||
+ | $("table tr:nth-child(even)").addClass("even")); | ||
+ | }); | ||
+ | </pre> | ||
+ | |||
===Basic CSS selectors=== | ===Basic CSS selectors=== | ||
+ | * $('*') -return wrapped set of every DOM element | ||
* $("a") - matches all link (<a>) elements | * $("a") - matches all link (<a>) elements | ||
* $("#specialID") - matches elements that have an id of specilID | * $("#specialID") - matches elements that have an id of specilID | ||
Line 7: | Line 18: | ||
* $("p a.specialClass") - matches links with an id of specialID and a class of specialClass | * $("p a.specialClass") - matches links with an id of specialID and a class of specialClass | ||
===Child, Container, and attribute selectors=== | ===Child, Container, and attribute selectors=== | ||
− | * $("p a") - return link elements that are descendents of | + | * $("p a") - return link elements that are descendents of p tag |
* read the selectors backwards | * read the selectors backwards | ||
− | * $("p > a") - return link elements who have a | + | * $("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 | + | * $("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+a") - matches link elements immediately preceded by sibling p tag |
− | * $("p~a") - matches link elements preceded by any sibling | + | * $("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://" | * $("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 | * $("form[method]") - return any form element that simply has an explicit method attribute | ||
Line 19: | Line 30: | ||
* $("a[href$=.pdf]") | * $("a[href$=.pdf]") | ||
* $("a[href*=jquery.com]") | * $("a[href*=jquery.com]") | ||
− | * $("li:has(a)") - return any | + | * $("li:has(a)") - return any li element that has a link element in it |
* only one level of nesting supported this way | * only one level of nesting supported this way | ||
* $("foo:not(bar:has(baz))") - this is ok | * $("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. | ||
+ | * <pre>var allAlts = new Array(); | ||
+ | $('img').each(function() { | ||
+ | allAlts.push(this.alt); | ||
+ | });</pre> | ||
+ | * also <pre> var altValue = $('#myImage')[0].alt; </pre> | ||
+ | * 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 ) | ||
+ | ** <pre>$('input').attr( { value: '', title: 'Please enter a value' } );</pre> | ||
+ | * removeAttr(name) | ||
+ | |||
+ | ==Changing element styling== | ||
+ | * addClass(names) | ||
+ | * removeClass(names) | ||
+ | * css(name, value) | ||
+ | * css(properties) | ||
+ | * css(name) - get function | ||
+ | * width(value) and height(value) | ||
+ | ** equivalent: | ||
+ | <pre>$('div.myElements').width(500);</pre> | ||
+ | <pre>$('div.myElements').css('width','500px');</pre> | ||
+ | |||
+ | ==Setting element content== | ||
+ | * html() - get | ||
+ | * html(someMarkup) - set | ||
+ | * text() - get | ||
+ | ** <pre>var text = $('#wrappedList').text()</pre> | ||
+ | ** 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('<b>some text</b>'); | ||
+ | ** $("p.appendToMe").append($(a.appendMe")) | ||
+ | * appendTo(target) | ||
+ | * prepend() and prependTo() | ||
+ | * before() and insertBefore() | ||
+ | * After() and insertAfter() |
Latest revision as of 18:07, 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); });
- 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()