.
Examples jQuery
Your first example jQueryExplanation of examples jQuery
Examples click()
To hide paragraphs on a page when they are clicked:Explanation of examples click()
Examples Function jQuery $
jQuery provides a function that removes extra spaces from a string: shortest wayIn the following example function with name 'myfunc' is executed immediately after loading the page
In the following example for each even row is added class name oddStripe, and for the odd rows - class name evenStripe
jQuery provides a function that removes extra spaces from a string
The following function adds a class called bar for all paragraphs (p) that have a class named foo
Explanation of examples Function jQuery $
Examples jQuery Methods
finds the union of all div tags with class attribute test and all p tags with CSS class attribute quote, adds the class attribute blue to each matched element, and then slides them down with an animationExplanation of examples jQuery Methods
Examples jQuery.trim()
Removes the two whitespaces at the start and at the end of the string.Explanation of examples jQuery.trim()
Examples addClass()
Adds the classes 'selected' and 'highlight' to the matched elements.Adds the class 'selected' to the matched elements.
Explanation of examples addClass()
Examples $(document).ready()
Displays a message, when DOM is ready:Explanation of examples $(document).ready()
Examples toggle()
Click to toggle highlight on the list item.Toggles all paragraphs.
Animates all paragraphs to be shown if they are hidden and hidden if they are visible, completing the animation within 600 milliseconds.
Shows all paragraphs, then hides them all, back and forth.
Explanation of examples toggle()
Examples slideDown()
Animates all inputs to slide down, completing the animation within 1000 milliseconds. Once the animation is done, the input look is changed especially if it is the middle input which gets the focus.Explanation of examples slideDown()
Examples add()
Finds all divs and makes a border. Then adds all paragraphs to the jQuery object to set their backgrounds yellow.Adds more elements, matched by the given expression, to the set of matched elements.Adds more elements, matched by the given expression, to the set of matched elements.
Adds more elements, created on the fly, to the set of matched elements
Adds one or more Elements to the set of matched elements.
Demonstrates how to add (or push) elements to an existing collection
Explanation of examples add()
Examples load()
Load the main page's footer navigation into an ordered list.Display a notice if the Ajax request encounters an error.
Animates all divs to slide down and show themselves over 600 milliseconds.
Explanation of examples load()
Examples removeClass()
Remove the class 'blue' from the matched elementsRemove the class 'blue' and 'under' from the matched elements
Remove all the classes from the matched elements
Explanation of examples removeClass()
Examples slideUp()
Animates all paragraph to slide up, completing the animation within 200 milliseconds. Once the animation is done, it displays an alert.Animates all divs to slide up, completing the animation within 400 milliseconds.
Explanation of examples slideUp()
Examples hover()
Slide the next sibling LI up or down on hover, and toggle a class.To unbind the above example use:
To add a special style to table cells that are being hovered over, try:
To add a special style to list items that are being hovered over, try:
Explanation of examples hover()
Examples append()
Appends some HTML to all paragraphs.Appends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.
Explanation of examples append()
Examples remove()
Removes all paragraphs from the DOMRemoves all paragraphs that contain "Hello" from the DOM
Explanation of examples remove()
Examples find()
Starts with all paragraphs and searches for descendant span elements, same as $("p span")Add spans around each word then add a hover and italicize words with the letter t.
A selection using a jQuery collection of all span tags. Only spans within p tags are changed to red while others are left blue.
Explanation of examples find()
Examples fadeIn()
Fades a red block in over the text. Once the animation is done, it quickly fades in more text on top.Animates hidden divs to fade in one by one, completing each animation within 600 milliseconds.
Explanation of examples fadeIn()
Examples fadeOut()
If you'd like to prevent forms from being submitted unless a flag variable is setAnimates all paragraphs to fade out, completing the animation within 600 milliseconds.
בלחיצה מסתיר אלמנטים span באמצעות אפקט fadeOut.
Explanation of examples fadeOut()
Examples unbind()
Can bind and unbind events to the colored button.Explanation of examples unbind()
Examples show()
Shows all paragraphs.Animates all hidden divs to show fastly in order, completing each animation within 200 milliseconds. Once each animation is done, it starts the next one.
Animates all span and input elements to show normally. Once the animation is done, it changes the text.
Explanation of examples show()
Examples bind()
Handle click and double-click for the paragraph. Note: the coordinates are window relative so in this case relative to the demo iframe.Explanation of examples bind()
Examples text()
Add text to the paragraph (notice the bold tag is escaped).Find the text in the first paragraph (stripping out the html), then set the html of the last paragraph to show it is just text (the red bold is gone).
Explanation of examples text()
Examples Handle click and double-click for the paragraph. Note: the coordinates are window relative so in this case relative to the demo iframe.
Can bind custom events too.Explanation of examples Handle click and double-click for the paragraph. Note: the coordinates are window relative so in this case relative to the demo iframe.
Examples toggleClass()
Toggle the class 'highlight' on every third clickExplanation of examples toggleClass()
Examples trigger()
Clicks to button #2 also trigger a click for button #1.Explanation of examples trigger()
Examples stop()
Click the Go button once to start the animation, then click the STOP button to stop it where it's currently positioned. Another option is to click several buttons to queue them up and see that stop just kills the currently playing one.Explanation of examples stop()
Examples css()
To access the background color of a clicked div.To set the font color of all paragraphs and background
If the property name includes a "-", put it between quotation marks:
To change the color of any paragraph to red on mouseover event
To highlight a clicked word in the paragraph.
Explanation of examples css()
Examples jQuery
Finds all p elements that are children of a div element.Explanation of examples jQuery
Examples :last
Finds the last table row.Explanation of examples :last
Examples :even
Finds even table rows, matching the first, third and so on (index 0, 2, 4 etc.).Explanation of examples :even
Examples :odd
Finds odd table rows, matching the second, fourth and so on (index 1, 3, 5 etc.).Explanation of examples :odd
Examples :eq(index)
Finds the third td.Explanation of examples :eq(index)
Examples val()
Get the single value from a single select and an array of values from a multiple select and display their values.Find the value of an input box.
Set a single select and a multiple select .
Set the value of an input box
Explanation of examples val()
Examples :first
Finds the first table row.Explanation of examples :first
Examples html()
Add some html to each div then immediately do further manipulations to the inserted htmlAdd some html to each div.
Click a paragraph to convert it from html to text.
Explanation of examples html()
Examples :selected
Attaches a change event to the select that gets the text for each selected option and writes them in the div. It then triggers the event for the initial text draw.Explanation of examples :selected
Examples :checked
Finds all input elements that are checked.Explanation of examples :checked
Examples change()
Attaches a change event to the select that gets the text for each selected option and writes them in the div. It then triggers the event for the initial text draw.Explanation of examples change()
Examples keyup()
Show the event object for the keyup handler when a key is released in the input.To perform an action when the escape key has been released:
Explanation of examples keyup()
Examples each()
Iterates over three divs and sets their color property.If you want to have the jQuery object instead of the regular DOM element, use the $(this) function, for example:
You can use 'return' to break out of each() loops early.
Explanation of examples each()
Examples hide()
Hides all paragraphs then the link on click.Animates all shown paragraphs to hide slowly, completing the animation within 600 milliseconds.
Animates all spans (words in this case) to hide fastly, completing each animation within 200 milliseconds. Once each animation is done, it starts the next one.
Hides the divs when clicked over 2 seconds, then removes the div element when its hidden. Try clicking on more than one box at a time.
Explanation of examples hide()
Examples is()
Shows a few ways is() can be used inside an event handler.Returns true, because the parent of the input is a form element
Returns false, because the parent of the input is a p element
Checks against an existing collection of alternating list elements. Blue, alternating list elements slide up while others turn red.
An alternate way to achieve the above example using an element rather than a jQuery object. Checks against an existing collection of alternating list elements. Blue, alternating list elements slide up while others turn red.
Explanation of examples is()
Examples filter()
Change the color of all divs then put a border around only some of them.Change the color of all divs then put a border to specific ones.
Explanation of examples filter()
Examples focus()
Fire focus.To stop people from writing in text input boxes, try:
Explanation of examples focus()
Examples parent()
Shows the parent of each element as (parent > child). Check the View Source to see the raw html.Find the parent element of each paragraph with a class "selected".
Explanation of examples parent()
Examples ready()
Display a message when the DOM is loaded.Explanation of examples ready()
Examples next()
Find the very next sibling of each disabled button and change its text "this button is disabled".Find the very next sibling of each paragraph. Keep only the ones with a class "selected".
Explanation of examples next()
Examples blur()
Fire blur.Explanation of examples blur()
Examples one()
To display the text of all paragraphs in an alert box the first time each of them is clicked:Tie a one-time click to each div.
Explanation of examples one()
Examples triggerHandler()
If you called .triggerHandler() on a focus event - the browsers default focus action would not be triggered, only the event handlers bound to the focus event.Explanation of examples triggerHandler()
Examples live()
Can bind custom events too.Click a paragraph to add another. Note that live binds the click event to all paragraphs - even new ones.
Explanation of examples live()
Examples die()
Can bind and unbind events to the colored button.Explanation of examples die()
Examples
Toggles all paragraphs.Animates all paragraphs to be shown if they are hidden and hidden if they are visible, completing the animation within 600 milliseconds.
Shows all paragraphs, then hides them all, back and forth.
Click to toggle highlight on the list item.
Explanation of examples
Examples dblclick()
Double click to toggle background color.Explanation of examples dblclick()
Examples keydown()
Show the event object for the keydown handler when a key is pressed in the input.Explanation of examples keydown()
Examples keypress()
Show the event object for the keypress handler when a key is pressed in the input.Show spaces and letters when typed.
Explanation of examples keypress()
Examples mousedown()
Show texts when mouseup and mousedown event triggering.Explanation of examples mousedown()
Examples mouseenter()
Show texts when mouseenter and mouseout event triggeringExplanation of examples mouseenter()
Examples mouseleave()
Show texts when mouseover and mouseleave event triggeringExplanation of examples mouseleave()
Examples mousemove()
Show the mouse coordinates when the mouse is moved over the yellow divExplanation of examples mousemove()
Examples mouseout()
Show texts when mouseover and mouseout event triggeringExplanation of examples mouseout()
Examples mouseover()
Show texts when mouseover and mouseout event triggeringExplanation of examples mouseover()
Examples mouseup()
Show texts when mouseup and mousedown event triggeringExplanation of examples mouseup()
Examples scroll()
To do something when your page is scrolledExplanation of examples scroll()
Examples select()
To do something when text in input boxes is selectedExplanation of examples select()
Examples index()
On click, returns the index (based zero) of that div in the page.Returns the index for the element with ID bar.
Returns the index for the first item in the jQuery collection.
Returns the index for the element with ID bar in relation to all 'li' elements.
Returns the index for the element with ID bar in relation to its siblings.
Returns -1, as there is no element with ID foobar.
Explanation of examples index()
Examples appendTo()
Appends all spans to the element with the ID 'foo'Explanation of examples appendTo()
Examples after()
Inserts some HTML after all paragraphs.Inserts a DOM element after all paragraphs.
Inserts a jQuery object (similar to an Array of DOM Elements) after all paragraphs.
Explanation of examples after()
Examples children()
Find all children of the clicked element.Find all children of each div.
Find all children with a class "selected" of each div.
Explanation of examples children()
Examples height()
Show various heights. Note the values are from the iframe so might be smaller than you expected. The yellow highlight shows the iframe body.To set the height of each div on click to 30px plus a color change.
Explanation of examples height()
Examples jQuery.support
Returns the box model for the iframeExplanation of examples jQuery.support
Examples jQuery.browser
Returns the browser version.Show the browser info
Explanation of examples jQuery.browser
Examples
Returns the browser versionExplanation of examples
Examples jQuery.boxModel
Returns the box model for the iframeExplanation of examples jQuery.boxModel
Examples jQuery.each()
Iterates through the array displaying each number as both a word and numeralExplanation of examples jQuery.each()
Examples jQuery.grep()
Filters the original array of numbers leaving that are not 5 and have an index greater than 4. Then it removes all 9sExplanation of examples jQuery.grep()
Examples jQuery.makeArray()
Turn a collection of HTML Elements into an Array of themExplanation of examples jQuery.makeArray()
Examples jQuery.map()
A couple examples of using .map()Explanation of examples jQuery.map()
Examples jQuery.inArray()
Return index of found valueExplanation of examples jQuery.inArray()
Examples jQuery.unique()
Removes any duplicate elements from the array of divs.Explanation of examples jQuery.unique()
Examples jQuery.isArray()
Finds out if the parameter is an arrayExplanation of examples jQuery.isArray()
Examples jQuery.isFunction()
Test a few parameter examples.Explanation of examples jQuery.isFunction()
Examples jQuery.param( obj )
Serialize a key/value objectExplanation of examples jQuery.param( obj )
Examples get()
Selects all divs in the document and returns the DOM Elements as an Array, then uses the built-in reverse-method to reverse that array.Gives the tag name of the element clicked on.
Explanation of examples get()
Examples attr()
Finds the title attribute of the first <em> in the pageSet some attributes for all <img>s in the page
Disables buttons greater than the 1st button.
Sets id for divs based on the position in the page.
Sets src attribute from title attribute on the image.
Explanation of examples attr()
Examples removeAttr()
Clicking the button enables the input next to it.Explanation of examples removeAttr()
Examples hasClass()
Looks for the class 'selected' on the matched elementsExplanation of examples hasClass()
Examples :gt(index)
Finds TD #5 and higher. Reminder: the indexing starts at 0.Explanation of examples :gt(index)
Examples slideToggle()
Animates all paragraphs to slide up or down, completing the animation within 600 milliseconds.Animates divs between dividers with a toggle that makes some appear and some disappear.
Explanation of examples slideToggle()
Examples fadeTo()
Animates first paragraph to fade to an opacity of 0.33 (33%, about one third visible), completing the animation within 600 milliseconds.Fade div to a random opacity on each click, completing the animation within 200 milliseconds.
Find the right answer! The fade will take 250 milliseconds and change various styles when it completes.
Explanation of examples fadeTo()
Examples animate()
Click the button to animate the div with a number of different properties.The first button shows how an unqueued The first button shows how an unqueued animation works. It expands the div out to 90% width while the font-size is increasing. Once the font-size change is complete, the border animation will begin. The second button starts a traditional chained animation, where each animation will start once the previous animation on the element has completed.
Shows a div animate with a relative move. Click several times on the buttons to see the relative animations queued up.
Explanation of examples animate()
Examples jQuery.fx.off
Run a disabled animationExplanation of examples jQuery.fx.off
Examples prev()
Find the very previous sibling of each div.Find the very previous sibling of each paragraph that has a class "selected".
Explanation of examples prev()
Examples
Click a paragraph to convert it from html to textAdd some html to each div.
Add some html to each div then immediately do further manipulations to the inserted html.
Explanation of examples
Examples
Appends an Element to all paragraphs.Explanation of examples
Examples prepend()
Prepends some HTML to all paragraphs.Explanation of examples prepend()
Examples prependTo()
Prepends all spans to the element with the ID 'foo'Explanation of examples prependTo()
Examples before()
Inserts some HTML before all paragraphs.Inserts a DOM element before all paragraphs.
Inserts a jQuery object (similar to an Array of DOM Elements) before all paragraphs.
Explanation of examples before()
Examples insertAfter()
Inserts all paragraphs after an element with id of 'foo'. Same as $('#foo').after('p')Inserts all paragraphs before an element with id of 'foo'. Same as $('#foo').before('p')
Explanation of examples insertAfter()
Examples wrap()
Wrap a new div around all of the paragraphs.Wraps a newly created tree of objects around the spans. Notice anything in between the spans gets left out like the 'strong' (red text) in this example. Even the white space between spans is left out. Click View Source to see the original html.
Wrap a new div around all of the paragraphs.
Wrap a jQuery object double depth div around all of the paragraphs. Notice it doesn't move the object but just clones it to wrap around its target.
Explanation of examples wrap()
Examples wrapAll()
Wrap a new div around all of the paragraphs.Wraps a newly created tree of objects around the spans. Notice anything in between the spans gets left out like the 'strong' (red text) in this example. Even the white space between spans is left out. Click View Source to see the original html.
Wrap a new div around all of the paragraphs.
Wrap a jQuery object double depth div around all of the paragraphs. Notice it doesn't move the object but just clones it to wrap around its target.
Explanation of examples wrapAll()
Examples wrapInner()
Selects all paragraphs and wraps a bold tag around each of its contents.Selects all paragraphs and wraps a bold tag around each of its contents.
Wraps a newly created tree of objects around the inside of the body.
Selects all paragraphs and wraps a jQuery object around each of its contents.
Explanation of examples wrapInner()
Examples replaceWith()
On click, replace the button with a div containing the same word.Replace all the paragraphs with bold words.
Replace all the paragraphs with empty div elements.
Explanation of examples replaceWith()
Examples replaceAll()
Replace all the paragraphs with bold words.Explanation of examples replaceAll()
Examples empty()
Removes all child nodes (including text nodes) from all paragraphsExplanation of examples empty()
Examples clone()
Clones all b elements (and selects the clones) and prepends them to all paragraphs.Create a button that's able to clone itself - and have the clones themselves be clonable.
Explanation of examples clone()
Examples id selector
Finds the element with the id "myID.entry[1]". See how certain characters must be escaped with backslashes.Finds the element with the id 'myDiv'.
Explanation of examples id selector
Examples element selector
Finds every DIV element.Explanation of examples element selector
Examples class selector
Finds the element with the class 'myClass'.Finds the element with both classes 'myClass' and 'myOtherClass'.
Explanation of examples class selector
Examples all selector
A common way to select all elements is to find within document.body so elements like head, script, etc are left out.Finds every element (including head, body, etc).
Explanation of examples all selector
Examples multiple selector
Show the order in the jQuery objectFinds the elements that match any of these three selectors.
Explanation of examples multiple selector
Examples ancestor descendant
Finds all input descendants of forms.Explanation of examples ancestor descendant
Examples parent > child
Places a border around all list items that are children of <ul class="topnav"> .Finds all children of the element with id 'main' which is yellow.
Explanation of examples parent > child
Examples prev + next
Finds all inputs that are next to a label.Explanation of examples prev + next
Examples prev ~ siblings
Finds all divs that are siblings after the element with #prev as its id. Notice the span isn't selected since it is not a div and the "niece" isn't selected since it is a child of a sibling, not an actual sibling.Explanation of examples prev ~ siblings
Examples :not(selector)
Finds all inputs that are not checked and highlights the next sibling span. Notice there is no change when clicking the checkboxes since no click events have been linked.Explanation of examples :not(selector)
Examples :lt(index)
Finds TDs less than the one with the 4th index (TD 4).Explanation of examples :lt(index)
Examples :header
Adds a background and text color to all the headers on the page.Explanation of examples :header
Examples :animated
Change the color of any div that is animated.Explanation of examples :animated
Examples :contains(text)
Finds all divs containing "John" and underlines themExplanation of examples :contains(text)
Examples :empty
Finds all elements that are empty - they don't have child elements or textExplanation of examples :empty
Examples :has(selector)
Adds the class "test" to all divs that have a paragraph inside of them.Explanation of examples :has(selector)
Examples :parent
Finds all tds with children, including text.Explanation of examples :parent
Examples :hidden
Shows all hidden divs and counts hidden inputs.Explanation of examples :hidden
Examples :visible
Make all visible divs turn yellow on click.Explanation of examples :visible
Examples [attribute]
Bind a single click that adds the div id to its text.Explanation of examples [attribute]
Examples [attribute=value]
Finds all inputs with name 'newsletter' and changes the text of the span next to it.Explanation of examples [attribute=value]
Examples [attribute!=value]
Finds all inputs that don't have the name 'newsletter' and appends text to the span next to it.Explanation of examples [attribute!=value]
Examples [attribute$=value]
Finds all inputs with an attribute name that ends with 'letter' and puts text in them.Explanation of examples [attribute$=value]
Examples [attribute*=value]
Finds all inputs with a name attribute that contains 'man' and sets the value with some text.Explanation of examples [attribute*=value]
Examples [attributeFilter1][attributeFilterN]
Finds all inputs that have an id attribute and whose name attribute ends with man and sets the value.Explanation of examples [attributeFilter1][attributeFilterN]
Examples :nth-child(index/even/odd/equation)
This is a playground to see how the selector works with different strings. Notice that this is different from the :even and :odd which have no regard for parent and just filter the list of elements to every other one. The :nth-child, however, counts the index of the child to its particular parent. In any case, it's easier to see than explain so...Finds the second li in each matched ul and notes it.
Explanation of examples :nth-child(index/even/odd/equation)
Examples :first-child
Finds the first span in each matched div to underline and add a hover state.Explanation of examples :first-child
Examples :last-child
Finds the last span in each matched div and adds some css plus a hover state.Explanation of examples :last-child
Examples :only-child
Finds the button with no siblings in each matched div and modifies look.Explanation of examples :only-child
Examples :input
Finds all input elements.Explanation of examples :input
Examples :text
Finds all text inputs.Explanation of examples :text
Examples :password
Finds all password inputs.Explanation of examples :password
Examples :radio
Finds all radio inputs.Explanation of examples :radio
Examples :checkbox
Finds all checkbox inputs.Explanation of examples :checkbox
Examples :submit
Finds all submit inputs.Explanation of examples :submit
Examples :image
Finds all image inputs.Explanation of examples :image
Examples :reset
Finds all reset inputs.Explanation of examples :reset
Examples :button
Finds all button inputs.Explanation of examples :button
Examples :file
Finds all file inputs.Explanation of examples :file
Examples :enabled
Matches all elements that are enabled.Explanation of examples :enabled
Examples :disabled
Finds all input elements that are disabled.Explanation of examples :disabled
Examples [attribute^=value]
Finds all inputs with an attribute name that starts with 'news' and puts text in them.Explanation of examples [attribute^=value]
Examples length
Count the divs. Click to add more.Explanation of examples length
Examples eq()
Turn the div with index 2 blue by adding an appropriate class.Explanation of examples eq()
Examples map()
Build a list of all the values within a form.A contrived example to show some functionality.
Equalize the heights of the divs.
Explanation of examples map()
Examples not()
Adds a border to divs that are not green or blue.Explanation of examples not()
Examples slice()
Turns divs yellow based on a random slice.Explanation of examples slice()
Examples closest()
Show how event delegation can be done with closest.Show how event delegation can be done with closest. The closest list element toggles a yellow background when it or its descendent is clicked.
Show how event delegation can be done with closest.
Explanation of examples closest()
Examples contents()
Find all the text nodes inside a paragraph and wrap them with a bold tag.Append some new content into an empty iframe.
Change the background color of links inside of an iframe.
Explanation of examples contents()
Examples nextAll()
Locate all the divs after the first and give them a class.Locate all the paragraphs after the second child in the body and give them a class.
Explanation of examples nextAll()
Examples
Find the offsetParent of item "A":Explanation of examples
Examples parents()
Find all parent elements of each b.Click to find all unique div parent elements of each span.
Explanation of examples parents()
Examples prevAll()
Locate all the divs in front of the last div and give them a class.Explanation of examples prevAll()
Examples siblings()
Find the unique siblings of all yellow li elements in the 3 lists (including other yellow li elements if appropriate).Find all siblings with a class "selected" of each div.
Explanation of examples siblings()
Examples andSelf()
Find all divs, and all the paragraphs inside of them, and give them both classnames. Notice the div doesn't have the yellow background color since it didn't use andSelf().Explanation of examples andSelf()
Examples end()
Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.
Explanation of examples end()
Examples offset()
Access the offset of the second paragraph:Click to see the offset.
Explanation of examples offset()
Examples offsetParent()
Find the offsetParent of item "A."Explanation of examples offsetParent()
Examples position()
Access the position of the second paragraph:Explanation of examples position()
Examples scrollTop()
Get scrollTopGet scrollTop
Explanation of examples scrollTop()
Examples scrollLeft()
Get the scrollLeft of a paragraph.Set the scrollLeft of a div.
Explanation of examples scrollLeft()
Examples width()
Show various widths. Note the values are from the iframe so might be smaller than you expected. The yellow highlight shows the iframe body.To set the width of each div on click to 30px plus a color change.
Explanation of examples width()
Examples innerHeight()
Get the innerHeight of a paragraph.Explanation of examples innerHeight()
Examples innerWidth()
Get the innerWidth of a paragraph.Explanation of examples innerWidth()
Examples outerHeight()
Get the outerHeight of a paragraph.Explanation of examples outerHeight()
Examples outerWidth()
Get the outerWidth of a paragraph.Explanation of examples outerWidth()
Examples size()
Count the divs. Click to add more.Explanation of examples size()
Examples selector
Determine the selector used.Collecting elements differently
Explanation of examples selector
Examples context
Determine the exact context used.Explanation of examples context
Examples
Turn the div with index 2 blue by adding an appropriate class.Explanation of examples
Examples data()
Store then retrieve a value from the div element.Get the data named "blah" stored at for an element.
Explanation of examples data()
Examples removeData()
Set a data store for 2 names then remove one of them.Explanation of examples removeData()
Examples queue()
Show the length of the queue.Queue a custom function.
Set a queue array to delete the queue.
Empty the queue.
Explanation of examples queue()
Examples dequeue()
Use dequeue to end a custom queue function which allows the queue to keep going.Explanation of examples dequeue()
Examples jQuery.param()
Serialize a key/value object.Serialize a form to a query string, that could be sent to a server in an Ajax request
Explanation of examples jQuery.param()
Examples serializeArray()
Get the values from a form, iterate through them, and append them to a results display.Get the values from a form, iterate through them, and append them to a results display.
Explanation of examples serializeArray()
Examples jQuery.getScript()
We load the new official jQuery Color Animation plugin dynamically and bind some color animations to occur once the new functionality is loaded.Explanation of examples jQuery.getScript()
Examples [attribute|=value]
Finds all links with an hreflang attribute that is english.Explanation of examples [attribute|=value]
Examples [attribute~=value]
Finds all inputs with a name attribute that contains the word 'man' and sets the value with some text.Explanation of examples [attribute~=value]
Examples event.preventDefault()
Cancel the default action (navigation) of the click.Explanation of examples event.preventDefault()
Examples event.target
Display the tag's name on clickImplements a simple event delegation: The click handler is added to an unordered list, and the children of its li children are hidden. Clicking one of the li children toggles (see toggle()) their children.
Explanation of examples event.target
Examples event.pageX
Show the mouse position relative to the left and top edges of the document (within the iframe).Explanation of examples event.pageX
Examples event.which
Log what key was depressed.Explanation of examples event.which
Examples event.timeStamp
Display the time since the click handler last executed.Explanation of examples event.timeStamp
Examples event.isImmediatePropagationStopped()
Checks whether event.stopImmediatePropagation() was called.Explanation of examples event.isImmediatePropagationStopped()
Examples event.isPropagationStopped()
Checks whether event.stopPropagation() was calledExplanation of examples event.isPropagationStopped()
Examples event.result
Alert previous handler's return valueExplanation of examples event.result
Examples event.stopImmediatePropagation()
Prevents other event handlers from being called.Explanation of examples event.stopImmediatePropagation()
Examples delay()
Animate the hiding and showing of two divs, delaying the first before showing it.Explanation of examples delay()
Examples detach()
Detach all paragraphs from the DOMExplanation of examples detach()
Examples first()
Highlight the first span in a paragraph.Explanation of examples first()
Examples focusin()
Watch for a focus to occur within the paragraphs on the page.Explanation of examples focusin()
Examples focusout()
Watch for a loss of focus to occur inside paragraphs and note the difference between the focusout count and the blur count.Explanation of examples focusout()
Examples has()
Check if an element is inside another.Explanation of examples has()
Examples last()
Highlight the last span in a paragraph.Explanation of examples last()
Examples nextUntil()
Find the siblings that follow <dt id="term-2"> up to the next <dt> and give them a red background color.Explanation of examples nextUntil()
Examples parentsUntil()
Find the ancestors of <li class="item-a"> up to <ul class="level-1"> and give them a red background color.Explanation of examples parentsUntil()
Examples prevUntil()
Find the siblings that precede <dt id="term-2"> up to the preceding <dt> and give them a red background color.Explanation of examples prevUntil()
Examples toArray()
Selects all divs in the document and returns the DOM Elements as an Array, then uses the built-in reverse-method to reverse that array.Explanation of examples toArray()
Examples unwrap()
Wrap/unwrap a div around each of the paragraphs.Explanation of examples unwrap()
Examples delegate()
Click a paragraph to add another. Note that .delegate() binds the click event to all paragraphs - even new ones.Can bind custom events too.
Explanation of examples delegate()
Examples undelegate()
Can bind and unbind events to the colored button.Explanation of examples undelegate()
Examples Replace all the paragraphs with empty div elements.
On click, replace each paragraph with a jQuery div object that is already in the DOM. Notice it doesn't clone the object but rather moves it to replace the paragraph.Explanation of examples Replace all the paragraphs with empty div elements.
Examples Navigation
A simple show-submenu-on-hover-menuA simple show-submenu-on-hover-menu: another method with less animation
Explanation of examples Navigation
Examples event.namespace
Determine the event namespace used.Explanation of examples event.namespace
Examples jQuery.isWindow()
Finds out if the parameter is a window.Explanation of examples jQuery.isWindow()
Examples jQuery.type()
Finds out if the parameter is a RegExp.Explanation of examples jQuery.type()
Examples jQuery.fx.interval
Cause all animations to run with less frames.Explanation of examples jQuery.fx.interval
Examples fadeToggle()
Fades first paragraph in or out, completing the animation within 600 milliseconds and using a linear easing. Fades last paragraph in or out for 200 milliseconds, inserting a "finished" message upon completion.Explanation of examples fadeToggle()
Examples jQuery.hasData()
Set data on an element and see the results of hasData.Explanation of examples jQuery.hasData()
Examples prop()
Display the checked property and attribute of a checkbox as it changes.Disable all checkboxes on the page.
Explanation of examples prop()
Examples promise()
Resolve the returned Promise when all animations have ended (including those initiated in the animation callback or added later on):Resolve the returned Promise using a $.when() statement (the .promise() method makes it possible to do this with jQuery collections):
Explanation of examples promise()
Examples removeProp()
Set a numeric property on a paragraph and then remove it.Explanation of examples removeProp()
Was this information helpful?
