Notes by James
Displaying keyword search results 1 - 10
Created by James on May 02, 2012 13:01:24
Last update: May 02, 2012 13:01:24
Use the .prev() function to find the previous sibling of the current element:
$(this).prev()
or
$(this).prev('.selected')
Created by James on April 25, 2012 08:50:18
Last update: April 25, 2012 08:50:18
All DOM manipulation methods can move an element from one place to another, but the .appendTo() and .insertBefore variations are more convenient:
// moves h2 before .detail if there's one h2 a...
Created by James on March 11, 2011 08:53:31
Last update: January 30, 2012 09:33:56
Both delegate and live allow you to bind event handlers to elements created in the future, but there are some differences: For .delegate , the event bubbles up to the element on which it is called. For .live , the event bubbles up to the root of the DOM tree, or, as of jQuery 1.4, optionally stop at a DOM element context. DOM traversal methods are not supported for finding elements to send to .live() . Rather, the .live() method should always be called directly after a selector. The opposite of .live is .die . The opposite of .delegate is .undelegate . Note: As of jQuery 1.7, the .live() method is deprecated . Use .on() to attach event handlers. Users of older versions of jQuery...
Created by James on January 27, 2012 12:38:53
Last update: January 27, 2012 12:39:46
A brief summary of jQuery DOM manipulation methods for reference.
.before() and .insertBefore() : insert content before target element - as sibling.
Examples:
// insert summary before details
$('#detail').b...
.after() and .insertAfter() : insert content after target element - as sibling.
Examples:
// insert details after summary
$('#summary').a...
.prepend() and .prependTo() : insert content as first child of target element.
Examples:
// prepend caption to table
$('table').prepend(...
.append() and .appendTo() : insert content as last child of target element.
Examples:
// append row to table
$('table').append('<tr><...
Created by James on January 16, 2012 10:05:10
Last update: January 16, 2012 10:06:13
There are two ways to get the submit button:
Use the :submit selector (note the space between the form name and :submit ):
$('#the-form-id :submit')
Use attribute selector (also, space between form id and attribute selector):
$('#the-form-id [type="submit"] ')
// or
$(...
jQuery recommends the latter if you are concerned about performance:
Because :submit is a jQuery extension and not part of the CSS specification, queries using :submit cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use [type="submit"] instead.
Created by James on May 01, 2011 21:57:33
Last update: May 01, 2011 21:57:33
Both visibility:hidden and display:none hides an element in the DOM. But elements with visibility:hidden still takes up space, while display:none does not.
Example (click the divs to hide or show):
<!doctype html>
<html>
<head>
<style t...
Created by James on April 30, 2011 21:28:06
Last update: May 01, 2011 13:00:35
This script moves a paragraph inside a div and then move it out.
<!doctype html>
<html>
<head>
<title>M...
Created by James on March 02, 2011 12:29:38
Last update: March 11, 2011 08:42:50
jQuery event delegation allows you to bind event handlers to elements not yet created, under these conditions:
The DOM element must nest inside the element to which the event is delegated to
The inner element must not stop event bubbling
The opposite of delegate is undelegate .
<!DOCTYPE HTML>
<html>
<head>
<title>jQu...
Created by James on November 18, 2009 23:11:48
Last update: January 11, 2011 20:16:08
It turned out the removing the underline decoration from an element is not that trivial. The underline could have been introduced by any containing element up in the DOM tree! Try this page:
<!doctype html>
<html>
<head>
<style t...
Created by James on May 24, 2009 20:14:25
Last update: January 11, 2011 20:07:38
In the following HTML code, I attached an inline handler to the text field input and added two event handlers with addEventListener / attachEvent . Both IE and Firefox called the inline handler first. But the order in which the added event handlers were called are different between IE and Firefox (IE calls attached_click2 first). Further, if I add the same event handler multiple times, IE calls the handler the same number of times. But Firefox only calls the same handler once, no matter how many times it was added.
<html> <body> <form> Input: <input type="... You can attach an event handler to an HTML element either inline , with JavaScript , or by calling addEventListener (DOM level 2), or attachEvent (IE specific). When you...
