jQuery - Selectors
Following table lists down few basic selectors and explains them with examples.Selector | Description |
---|---|
Name | Selects all elements which match with the given element Name. |
#ID | Selects a single element which matches with the given ID |
.Class | Selects all elements which match with the given Class. |
Universal (*) | Selects all elements available in a DOM. |
Multiple Elements E, F, G | Selects the combined results of all the specified selectors E, F or G. |
- $('*'): This selector selects all elements in the document.
- $("p > *"): This selector selects all elements that are children of a paragraph element.
- $("#specialID"): This selector function gets the element with id="specialID".
- $(".specialClass"): This selector gets all the elements that have the class of specialClass.
- $("li:not(.myclass)"): Selects all elements matched by <li> that do not have class="myclass".
- $("a#specialID.specialClass"): This selector matches links with an id of specialID and a class of specialClass.
- $("p a.specialClass"): This selector matches links with a class of specialClass declared within <p> elements.
- $("ul li:first"): This selector gets only the first <li> element of the <ul>.
- $("#container p"): Selects all elements matched by <p> that are descendants of an element that has an id of container.
- $("li > ul"): Selects all elements matched by <ul> that are children of an element matched by <li>
- $("strong + em"): Selects all elements matched by <em> that immediately follow a sibling element matched by <strong>.
- $("p ~ ul"): Selects all elements matched by <ul> that follow a sibling element matched by <p>.
- $("code, em, strong"): Selects all elements matched by <code> or <em> or <strong>.
- $("p strong, .myclass"): Selects all elements matched by <strong> that are descendants of an element matched by <p> as well as all elements that have a class of myclass.
- $(":empty"): Selects all elements that have no children.
- $("p:empty"): Selects all elements matched by <p> that have no children.
- $("div[p]"): Selects all elements matched by <div> that contain an element matched by <p>.
- $("p[.myclass]"): Selects all elements matched by <p> that contain an element with a class of myclass.
- $("a[@rel]"): Selects all elements matched by <a> that have a rel attribute.
- $("input[@name=myname]"): Selects all elements matched by <input> that have a name value exactly equal to myname.
- $("input[@name^=myname]"): Selects all elements matched by <input> that have a name value beginning with myname.
- $("a[@rel$=self]"): Selects all elements matched by <p> that have a class value ending with bar
- $("a[@href*=domain.com]"): Selects all elements matched by <a> that have an href value containing domain.com.
- $("li:even"): Selects all elements matched by <li> that have an even index value.
- $("tr:odd"): Selects all elements matched by <tr> that have an odd index value.
- $("li:first"): Selects the first <li> element.
- $("li:last"): Selects the last <li> element.
- $("li:visible"): Selects all elements matched by <li> that are visible.
- $("li:hidden"): Selects all elements matched by <li> that are hidden.
- $(":radio"): Selects all radio buttons in the form.
- $(":checked"): Selects all checked boxex in the form.
- $(":input"): Selects only form elements (input, select, textarea, button).
- $(":text"): Selects only text elements (input[type=text]).
- $("li:eq(2)"): Selects the third <li> element
- $("li:eq(4)"): Selects the fifth <li> element
- $("li:lt(2)"): Selects all elements matched by <li> element before the third one; in other words, the first two <li> elements.
- $("p:lt(3)"): selects all elements matched by <p> elements before the fourth one; in other words the first three <p> elements.
- $("li:gt(1)"): Selects all elements matched by <li> after the second one.
- $("p:gt(2)"): Selects all elements matched by <p> after the third one.
- $("div/p"): Selects all elements matched by <p> that are children of an element matched by <div>.
- $("div//code"): Selects all elements matched by <code>that are descendants of an element matched by <div>.
- $("//p//a"): Selects all elements matched by <a> that are descendants of an element matched by <p>
- $("li:first-child"): Selects all elements matched by <li> that are the first child of their parent.
- $("li:last-child"): Selects all elements matched by <li> that are the last child of their parent.
- $(":parent"): Selects all elements that are the parent of another element, including text.
- $("li:contains(second)"): Selects all elements matched by <li> that contain the text second.
jQuery - DOM Attributes
Following table lists down few useful methods which you can use to manipulate attributes and properties:Methods | Description |
---|---|
attr( properties ) | Set a key/value object as properties to all matched elements. |
attr( key, fn ) | Set a single property to a computed value, on all matched elements. |
removeAttr( name ) | Remove an attribute from each of the matched elements. |
hasClass( class ) | Returns true if the specified class is present on at least one of the set of matched elements. |
removeClass( class ) | Removes all or the specified class(es) from the set of matched elements. |
toggleClass( class ) | Adds the specified class if it is not present, removes the specified class if it is present. |
html( ) | Get the html contents (innerHTML) of the first matched element. |
html( val ) | Set the html contents of every matched element. |
text( ) | Get the combined text contents of all matched elements. |
text( val ) | Set the text contents of all matched elements. |
val( ) | Get the input value of the first matched element. |
val( val ) | Set the value attribute of every matched element if it is called on <input> but if it is called on <select> with the passed <option> value then passed option would be selected, if it is called on check box or radio box then all the matching check box and radiobox would be checked. |
- $("#myID").attr("custom") : This would return value of attribute custom for the first element matching with ID myID.
- $("img").attr("alt", "Sample Image"): This sets the alt attribute of all the images to a new value "Sample Image".
- $("input").attr({ value: "", title: "Please enter a value" }); : Sets the value of all <input> elements to the empty string, as well as sets the title to the string Please enter a value.
- $("a[href^=http://]").attr("target","_blank"): Selects all links with an href attribute starting with http:// and set its target attribute to _blank
- $("a").removeAttr("target") : This would remove target attribute of all the links.
- $("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); : This would modify the disabled attribute to the value "disabled" while clicking Submit button.
- $("p:last").hasClass("selected"): This return true if last <p> tag has associated classselected.
- $("p").text(): Returns string that contains the combined text contents of all matched <p> elements.
- $("p").text("<i>Hello World</i>"): This would set "<I>Hello World</I>" as text content of the matching <p> elements
- $("p").html() : This returns the HTML content of the all matching paragraphs.
- $("div").html("Hello World") : This would set the HTML content of all matching <div> to Hello World.
- $("input:checkbox:checked").val() : Get the first value from a checked checkbox
- $("input:radio[name=bar]:checked").val(): Get the first value from a set of radio buttons
- $("button").val("Hello") : Sets the value attribute of every matched element <button>.
- $("input").val("on") : This would check all the radio or check box button whose value is "on".
- $("select").val("Orange") : This would select Orange option in a dropdown box with options Orange, Mango and Banana.
- $("select").val("Orange", "Mango") : This would select Orange and Mango options in a dropdown box with options Orange, Mango and Banana.
jQuery - DOM Traversing
Following table lists down useful methods which you can use to filter out various elements from a list of DOM elements:Selector | Description |
---|---|
eq( index ) | Reduce the set of matched elements to a single element. |
filter( selector ) | Removes all elements from the set of matched elements that do not match the specified selector(s). |
filter( fn ) | Removes all elements from the set of matched elements that do not match the specified function. |
is( selector ) | Checks the current selection against an expression and returns true, if at least one element of the selection fits the given selector. |
map( callback ) | Translate a set of elements in the jQuery object into another set of values in a jQuery array (which may, or may not contain elements). |
not( selector ) | Removes elements matching the specified selector from the set of matched elements. |
slice( start, [end] ) | Selects a subset of the matched elements. |
Selector | Description |
---|---|
add( selector ) | Adds more elements, matched by the given selector, to the set of matched elements. |
andSelf( ) | Add the previous selection to the current selection. |
children( [selector]) | Get a set of elements containing all of the unique immediate children of each of the matched set of elements. |
closest( selector ) | Get a set of elements containing the closest parent element that matches the specified selector, the starting element included. |
contents( ) | Find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe. |
end( ) | Revert the most recent 'destructive' operation, changing the set of matched elements to its previous state . |
find( selector ) | Searches for descendent elements that match the specified selectors. |
next( [selector] ) | Get a set of elements containing the unique next siblings of each of the given set of elements. |
nextAll( [selector] ) | Find all sibling elements after the current element. |
offsetParent( ) | Returns a jQuery collection with the positioned parent of the first matched element. |
parent( [selector] ) | Get the direct parent of an element. If called on a set of elements, parent returns a set of their unique direct parent elements. |
parents( [selector] ) | Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element). |
prev( [selector] ) | Get a set of elements containing the unique previous siblings of each of the matched set of elements. |
prevAll( [selector] ) | Find all sibling elements in front of the current element. |
siblings( [selector] ) | Get a set of elements containing all of the unique siblings of each of the matched set of elements. |
jQuery - CSS Methods
Following table lists down all the methods which you can use to play with CSS properties:Method | Description |
---|---|
css( name ) | Return a style property on the first matched element. |
css( name, value ) | Set a single style property to a value on all matched elements. |
css( properties ) | Set a key/value object as style properties to all matched elements. |
height( val ) | Set the CSS height of every matched element. |
height( ) | Get the current computed, pixel, height of the first matched element. |
innerHeight( ) | Gets the inner height (excludes the border and includes the padding) for the first matched element. |
innerWidth( ) | Gets the inner width (excludes the border and includes the padding) for the first matched element. |
offset( ) | Get the current offset of the first matched element, in pixels, relative to the document |
offsetParent( ) | Returns a jQuery collection with the positioned parent of the first matched element. |
outerHeight( [margin] ) | Gets the outer height (includes the border and padding by default) for the first matched element. |
outerWidth( [margin] ) | Get the outer width (includes the border and padding by default) for the first matched element. |
position( ) | Gets the top and left position of an element relative to its offset parent. |
scrollLeft( val ) | When a value is passed in, the scroll left offset is set to that value on all matched elements. |
scrollLeft( ) | Gets the scroll left offset of the first matched element. |
scrollTop( val ) | When a value is passed in, the scroll top offset is set to that value on all matched elements. |
scrollTop( ) | Gets the scroll top offset of the first matched element. |
width( val ) | Set the CSS width of every matched element. |
width( ) | Get the current computed, pixel, width of the first matched element. |
jQuery - DOM Manipulation Methods
Following table lists down all the methods which you can use to manipulate DOM elements:Method | Description |
---|---|
after( content ) | Insert content after each of the matched elements. |
append( content ) | Append content to the inside of every matched element. |
appendTo( selector ) | Append all of the matched elements to another, specified, set of elements. |
before( content ) | Insert content before each of the matched elements. |
clone( bool ) | Clone matched DOM Elements, and all their event handlers, and select the clones. |
clone( ) | Clone matched DOM Elements and select the clones. |
empty( ) | Remove all child nodes from the set of matched elements. |
html( val ) | Set the html contents of every matched element. |
html( ) | Get the html contents (innerHTML) of the first matched element. |
insertAfter( selector ) | Insert all of the matched elements after another, specified, set of elements. |
insertBefore( selector ) | Insert all of the matched elements before another, specified, set of elements. |
prepend( content ) | Prepend content to the inside of every matched element. |
prependTo( selector ) | Prepend all of the matched elements to another, specified, set of elements. |
remove( expr ) | Removes all matched elements from the DOM. |
replaceAll( selector ) | Replaces the elements matched by the specified selector with the matched elements. |
replaceWith( content ) | Replaces all matched elements with the specified HTML or DOM elements. |
text( val ) | Set the text contents of all matched elements. |
text( ) | Get the combined text contents of all matched elements. |
wrap( elem ) | Wrap each matched element with the specified element. |
wrap( html ) | Wrap each matched element with the specified HTML content. |
wrapAll( elem ) | Wrap all the elements in the matched set into a single wrapper element. |
wrapAll( html ) | Wrap all the elements in the matched set into a single wrapper element. |
wrapInner( elem ) | Wrap the inner child contents of each matched element (including text nodes) with a DOM element. |
wrapInner( html ) | Wrap the inner child contents of each matched element (including text nodes) with an HTML structure. |
jQuery - Events Handling
The following are cross platform and recommended event types which you can bind using JQuery:Event Type | Description |
---|---|
blur | Occurs when the element loses focus |
change | Occurs when the element changes |
click | Occurs when a mouse click |
dblclick | Occurs when a mouse double-click |
error | Occurs when there is an error in loading or unloading etc. |
focus | Occurs when the element gets focus |
keydown | Occurs when key is pressed |
keypress | Occurs when key is pressed and released |
keyup | Occurs when key is released |
load | Occurs when document is loaded |
mousedown | Occurs when mouse button is pressed |
mouseenter | Occurs when mouse enters in an element region |
mouseleave | Occurs when mouse leaves an element region |
mousemove | Occurs when mouse pointer moves |
mouseout | Occurs when mouse pointer moves out of an element |
mouseover | Occurs when mouse pointer moves over an element |
mouseup | Occurs when mouse button is released |
resize | Occurs when window is resized |
scroll | Occurs when window is scrolled |
select | Occurs when a text is selected |
submit | Occurs when form is submitted |
unload | Occurs when documents is unloaded |
jQuery - AJAX
Following is the list of useful AJAX Methods:Methods and Description |
---|
jQuery.ajax( options ) Load a remote page using an HTTP request. |
jQuery.ajaxSetup( options ) Setup global settings for AJAX requests. |
jQuery.get( url, [data], [callback], [type] ) Load a remote page using an HTTP GET request. |
jQuery.getJSON( url, [data], [callback] ) Load JSON data using an HTTP GET request. |
jQuery.getScript( url, [callback] ) Loads and executes a JavaScript file using an HTTP GET request. |
jQuery.post( url, [data], [callback], [type] ) Load a remote page using an HTTP POST request. |
load( url, [data], [callback] ) Load HTML from a remote file and inject it into the DOM. |
serialize( ) Serializes a set of input elements into a string of data. |
serializeArray( ) Serializes all forms and form elements like the .serialize() method but returns a JSON data structure for you to work with. |
Methods and Description |
---|
ajaxComplete( callback ) Attach a function to be executed whenever an AJAX request completes. |
ajaxStart( callback ) Attach a function to be executed whenever an AJAX request begins and there is none already active. |
ajaxError( callback ) Attach a function to be executed whenever an AJAX request fails. |
ajaxSend( callback ) Attach a function to be executed before an AJAX request is sent. |
ajaxStop( callback ) Attach a function to be executed whenever all AJAX requests have ended. |
ajaxSuccess( callback ) Attach a function to be executed whenever an AJAX request completes successfully. |
jQuery - Effects
Following table lists down all the important methods to create different kind of effects:Methods and Description |
---|
animate( params, [duration, easing, callback] ) A function for making custom animations. |
animate( params, options ) A function for making custom animations. |
fadeIn( speed, [callback] ) Fade in all matched elements by adjusting their opacity and firing an optional callback after completion. |
fadeOut( speed, [callback] ) Fade out all matched elements by adjusting their opacity to 0, then setting display to "none" and firing an optional callback after completion. |
fadeTo( speed, opacity, callback ) Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion. |
hide( ) Hides each of the set of matched elements if they are shown. |
hide( speed, [callback] ) Hide all matched elements using a graceful animation and firing an optional callback after completion. |
show( ) Displays each of the set of matched elements if they are hidden. |
show( speed, [callback] ) Show all matched elements using a graceful animation and firing an optional callback after completion. |
slideDown( speed, [callback] ) Reveal all matched elements by adjusting their height and firing an optional callback after completion. |
slideToggle( speed, [callback] ) Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion. |
slideUp( speed, [callback] ) Hide all matched elements by adjusting their height and firing an optional callback after completion. |
stop( [clearQueue, gotoEnd ]) Stops all the currently running animations on all the specified elements. |
toggle( ) Toggle displaying each of the set of matched elements. |
toggle( speed, [callback] ) Toggle displaying each of the set of matched elements using a graceful animation and firing an optional callback after completion. |
toggle( switch ) Toggle displaying each of the set of matched elements based upon the switch (true shows all elements, false hides all elements). |
jQuery.fx.off Globally disable all animations. |
UI Library Based Effects:
To use these effects you would have to download jQuery UI Library jquery-ui-1.7.2.custom.min.js or latest version of this UI library from jQuery UI Library.After extracting jquery-ui-1.7.2.custom.min.js file from the download, you would include this file in similar way as you include core jQuery Library file.
Methods and Description |
---|
Blind Blinds the element away or shows it by blinding it in. |
Bounce Bounces the element vertically or horizontally n-times. |
Clip Clips the element on or off, vertically or horizontally. |
Drop Drops the element away or shows it by dropping it in. |
Explode Explodes the element into multiple pieces. |
Fold Folds the element like a piece of paper. |
Highlight Highlights the background with a defined color. |
Puff Scale and fade out animations create the puff effect. |
Pulsate Pulsates the opacity of the element multiple times. |
Scale Shrink or grow an element by a percentage factor. |
Shake Shakes the element vertically or horizontally n-times. |
Size Resize an element to a specified width and height. |
Slide Slides the element out of the viewport. |
Transfer Transfers the outline of an element to another. |
No comments:
Post a Comment