55 entries/callbacks.lock.xml
View file
@@ -6,85 +6,88 @@
</signature>
<desc>Lock a callback list in its current state.</desc>
<longdesc>
<p>This method returns the Callbacks object onto which it is attached (<code>this</code>). </p>
<p>This method returns the Callbacks object onto which it is attached (<code>this</code>).</p>
<p>If the Callbacks object is created with the <code>"memory"</code> flag as its argument, additional functions may be added and fired after the callback list is locked.</p>
</longdesc>
<example>
<desc>Use <code>callbacks.lock()</code> to lock a callback list to avoid further changes being made to the list state:</desc>
<code><![CDATA[// a sample logging function to be added to a callbacks list
<code><![CDATA[
// A sample logging function to be added to a callbacks list
var foo = function( value ) {
console.log( "foo:" + value );
};
var callbacks = $.Callbacks();
// add the logging function to the callback list
// Add the logging function to the callback list
callbacks.add( foo );
// fire the items on the list, passing an argument
// Fire the items on the list, passing an argument
callbacks.fire( "hello" );
// outputs "foo: hello"
// Outputs "foo: hello"
// lock the callbacks list
// Lock the callbacks list
callbacks.lock();
// try firing the items again
// Try firing the items again
callbacks.fire( "world" );
// as the list was locked, no items
// were called, so "world" isn"t logged
// As the list was locked, no items were called,
// so "world" isn't logged
]]></code>
</example>
<example>
<desc>Use <code>callbacks.lock()</code> to lock a callback list with "memory," and then resume using the list:</desc>
<html><![CDATA[<div id="log"></div>]]></html>
<code><![CDATA[// simple function for logging results
var log = function( value) {
<html><![CDATA[
<div id="log"></div>
]]></html>
<code><![CDATA[
// Simple function for logging results
var log = function( value ) {
$( "#log" ).append( "<p>" + value + "</p>" );
};
// two sample functions to be added to a callbacks list
// Two sample functions to be added to a callbacks list
var foo = function( value ) {
log( "foo: " + value );
};
var bar = function( value ) {
log( "bar: " + value );
};
// create the callbacks object with the "memory" flag
// Create the callbacks object with the "memory" flag
var callbacks = $.Callbacks( "memory" );
// add the foo logging function to the callback list
// Add the foo logging function to the callback list
callbacks.add( foo );
// fire the items on the list, passing an argument
// Fire the items on the list, passing an argument
callbacks.fire( "hello" );
// outputs "foo: hello"
// Outputs "foo: hello"
// lock the callbacks list
// Lock the callbacks list
callbacks.lock();
// try firing the items again
// Try firing the items again
callbacks.fire( "world" );
// as the list was locked, no items were called,
// As the list was locked, no items were called,
// so "foo: world" isn't logged
// add the foo function to the callback list again
// Add the foo function to the callback list again
callbacks.add( foo );
// try firing the items again
// Try firing the items again
callbacks.fire( "silentArgument" );
// outputs "foo: hello" because the argument value was stored in memory
// Outputs "foo: hello" because the argument value was stored in memory
// add the bar function to the callback list
// Add the bar function to the callback list
callbacks.add( bar );
callbacks.fire( "youHadMeAtHello" );
// outputs "bar: hello" because the list is still locked,
// Outputs "bar: hello" because the list is still locked,
// and the argument value is still stored in memory
]]></code>
</example>

<category slug="callbacks-object"/>
<category slug="version/1.7"/>
</entry>
15 entries/callbacks.locked.xml
View file
@@ -8,24 +8,25 @@
<longdesc/>
<example>
<desc>Use <code>callbacks.locked()</code> to determine the lock-state of a callback list:</desc>
<code><![CDATA[// a sample logging function to be added to a callbacks list
<code><![CDATA[
// A sample logging function to be added to a callbacks list
var foo = function( value ) {
console.log( "foo: " + value);
console.log( "foo: " + value );
};
var callbacks = $.Callbacks();
// add the logging function to the callback list
// Add the logging function to the callback list
callbacks.add( foo );
// fire the items on the list, passing an argument
// Fire the items on the list, passing an argument
callbacks.fire( "hello" );
// outputs "foo: hello"
// Outputs "foo: hello"
// lock the callbacks list
// Lock the callbacks list
callbacks.lock();
// test the lock-state of the list
// Test the lock-state of the list
console.log ( callbacks.locked() );
// true
]]></code>
17 entries/callbacks.remove.xml
View file
@@ -11,31 +11,32 @@
</signature>
<desc>Remove a callback or a collection of callbacks from a callback list.</desc>
<longdesc>
<p>This method returns the Callbacks object onto which it is attached (<code>this</code>). </p>
<p>This method returns the Callbacks object onto which it is attached (<code>this</code>).</p>
</longdesc>
<example>
<desc>Use <code>callbacks.remove()</code> to remove callbacks from a callback list:</desc>
<code><![CDATA[// a sample logging function to be added to a callbacks list
<code><![CDATA[
// A sample logging function to be added to a callbacks list
var foo = function( value ) {
console.log( "foo: " + value );
};
var callbacks = $.Callbacks();
// add the function "foo" to the list
// Add the function "foo" to the list
callbacks.add( foo );
// fire the items on the list
// Fire the items on the list
callbacks.fire( "hello" );
// outputs: "foo: hello"
// Outputs: "foo: hello"
// remove "foo" from the callback list
// Remove "foo" from the callback list
callbacks.remove( foo );
// fire the items on the list again
// Fire the items on the list again
callbacks.fire( "world" );
// nothing output as "foo" is no longer in the list
// Nothing output as "foo" is no longer in the list
]]></code>
</example>
<category slug="callbacks-object"/>
79 entries/change.xml
View file
@@ -21,62 +21,73 @@
<added>1.0</added>
</signature>
<longdesc>
<p>This method is a shortcut for <code>.on('change', handler)</code> in the first two variations, and <code>.trigger('change')</code> in the third.</p>
<p>This method is a shortcut for <code>.on( "change", handler )</code> in the first two variations, and <code>.trigger( "change" )</code> in the third.</p>
<p>The <code>change</code> event is sent to an element when its value changes. This event is limited to <code>&lt;input&gt;</code> elements, <code>&lt;textarea&gt;</code> boxes and <code>&lt;select&gt;</code> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.</p>
<p>For example, consider the HTML:</p>
<pre><code>&lt;form&gt;
&lt;input class="target" type="text" value="Field 1" /&gt;
<pre><code>
&lt;form&gt;
&lt;input class="target" type="text" value="Field 1"&gt;
&lt;select class="target"&gt;
&lt;option value="option1" selected="selected"&gt;Option 1&lt;/option&gt;
&lt;option value="option2"&gt;Option 2&lt;/option&gt;
&lt;/select&gt;
&lt;/form&gt;
&lt;div id="other"&gt;
Trigger the handler
&lt;/div&gt;</code></pre>
&lt;/div&gt;
</code></pre>
<p>The event handler can be bound to the text input and the select box:</p>
<pre><code>$('.target').change(function() {
alert('Handler for .change() called.');
});</code></pre>
<pre><code>
$( ".target" ).change(function() {
alert( "Handler for .change() called." );
});
</code></pre>
<p>Now when the second option is selected from the dropdown, the alert is displayed. It is also displayed if you change the text in the field and then click away. If the field loses focus without the contents having changed, though, the event is not triggered. To trigger the event manually, apply <code>.change()</code> without arguments:</p>
<pre><code>$('#other').click(function() {
$('.target').change();
});</code></pre>
<pre><code>
$( "#other" ).click(function() {
$( ".target" ).change();
});
</code></pre>
<p>After this code executes, clicks on <samp>Trigger the handler</samp> will also alert the message. The message will display twice, because the handler has been bound to the <code>change</code> event on both of the form elements.</p>
<p>As of jQuery 1.4, the <code>change</code> event bubbles in Internet Explorer, behaving consistently with the event in other modern browsers.</p>
</longdesc>
<example>
<desc>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.</desc>
<code><![CDATA[
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.change();
$( "select" )
.change(function () {
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
$( "div" ).text( str );
})
.change();
]]></code>
<css><![CDATA[
div { color:red; }
]]></css>
<html><![CDATA[<select name="sweets" multiple="multiple">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<div></div>]]></html>
div {
color: red;
}
]]></css>
<html><![CDATA[
<select name="sweets" multiple="multiple">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<div></div>
]]></html>
</example>
<example>
<desc>To add a validity test to all text input elements:</desc>
<code><![CDATA[$("input[type='text']").change( function() {
// check input ($(this).val()) for validity here
});]]></code>
<code><![CDATA[
$( "input[type='text']" ).change(function() {
// Check input( $( this ).val() ) for validity here
});
]]></code>
</example>
<category slug="events/form-events"/>
<category slug="forms"/>
78 entries/checkbox-selector.xml
View file
@@ -7,47 +7,63 @@
</signature>
<desc>Selects all elements of type checkbox.</desc>
<longdesc>
<p><code>$(':checkbox')</code> is equivalent to <code>$('[type=checkbox]')</code>. As with other pseudo-class selectors (those that begin with a ":") it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare <code>$(':checkbox')</code> is equivalent to <code>$('*:checkbox')</code>, so <code>$('input:checkbox')</code> should be used instead. </p>
<p><code>$( ":checkbox" )</code> is equivalent to <code>$( "[type=checkbox]" )</code>. As with other pseudo-class selectors (those that begin with a ":") it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ("*") is implied. In other words, the bare <code>$(':checkbox')</code> is equivalent to <code>$( "*:checkbox" )</code>, so <code>$( "input:checkbox" )</code> should be used instead. </p>
</longdesc>
<note id="jquery-selector-extension-alt" type="additional" data-selector=":checkbox" data-alt="[type=&quot;checkbox&quot;]"/>
<example>
<desc>Finds all checkbox inputs.</desc>
<code><![CDATA[
var input = $( "form input:checkbox" )
.wrap( "<span></span>" )
.parent()
.css({
background: "yellow",
border: "3px red solid"
});
var input = $("form input:checkbox").wrap('<span></span>').parent().css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
.css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit
$( "div" )
.text( "For this type jQuery found " + input.length + "." )
.css( "color", "red" );
// Prevent the form from submitting
$( "form" ).submit(function( event ) {
event.preventDefault();
});
]]></code>
<css><![CDATA[
textarea { height:25px; }
]]></css>
<html><![CDATA[<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option<option/></select>
<textarea></textarea>
<button>Button</button>
</form>
<div>
</div>]]></html>
textarea {
height: 25px;
}
]]></css>
<html><![CDATA[
<form>
<input type="button" value="Input Button">
<input type="checkbox">
<input type="checkbox">
<input type="file">
<input type="hidden">
<input type="image">
<input type="password">
<input type="radio">
<input type="reset">
<input type="submit">
<input type="text">
<select>
<option>Option</option>
</select>
<textarea></textarea>
<button>Button</button>
</form>
<div></div>
]]></html>
</example>
<category slug="selectors/form-selectors"/>
<category slug="selectors/jquery-selector-extensions"/>
<category slug="version/1.0"/>
</entry>
</entry>
12 entries/checked-selector.xml
View file
@@ -21,8 +21,10 @@ countChecked();
$( "input[type=checkbox]" ).on( "click", countChecked );
]]></code>
<css><![CDATA[
div { color:red; }
]]></css>
div {
color: red;
}
]]></css>
<html><![CDATA[
<form>
<p>
@@ -42,11 +44,13 @@ $( "input[type=checkbox]" ).on( "click", countChecked );
<desc>Identify the checked radio input.</desc>
<code><![CDATA[
$( "input" ).on( "click", function() {
$( "#log" ).html( $("input:checked").val() + " is checked!" );
$( "#log" ).html( $( "input:checked" ).val() + " is checked!" );
});
]]></code>
<css><![CDATA[
input, label { line-height: 1.5em; }
input, label {
line-height: 1.5em;
}
]]></css>
<html><![CDATA[
<form>
18 entries/child-selector.xml
View file
@@ -18,20 +18,28 @@
</longdesc>
<example>
<desc>Places a border around all list items that are children of &lt;ul class="topnav"&gt; .</desc>
<code><![CDATA[$("ul.topnav > li").css("border", "3px double red");]]></code>
<code><![CDATA[
$( "ul.topnav > li" ).css( "border", "3px double red" );
]]></code>
<css><![CDATA[
body { font-size:14px; }
]]></css>
body {
font-size: 14px;
}
]]></css>
<html><![CDATA[
<ul class="topnav">
<li>Item 1</li>
<li>Item 2
<ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul>
<ul>
<li>Nested item 1</li>
<li>Nested item 2</li>
<li>Nested item 3</li>
</ul>
</li>
<li>Item 3</li>
</ul>
]]></html>
</example>
<category slug="selectors/hierarchy-selectors"/>
<category slug="version/1.0"/>
</entry>
</entry>
172 entries/children.xml
View file
@@ -32,95 +32,135 @@
&lt;/ul&gt;
</code></pre>
<p>If we begin at the level-2 list, we can find its children:</p>
<pre><code>$('ul.level-2').children().css('background-color', 'red');</code></pre>
<pre><code>$( "ul.level-2" ).children().css( "background-color", "red" );</code></pre>
<p>The result of this call is a red background behind items A, B, and C. Since we do not supply a selector expression, all of the children are part of the returned jQuery object. If we had supplied one, only the matching items among these three would be included.</p>
</longdesc>
<example>
<desc>Find all children of the clicked element.</desc>
<code><![CDATA[
$( "#container" ).click(function ( event ) {
$( "*" ).removeClass( "hilite" );
var kids = $( event.target ).children();
var len = kids.addClass( "hilite" ).length;
$("#container").click(function (e) {
$("*").removeClass("hilite");
var $kids = $(e.target).children();
var len = $kids.addClass("hilite").length;
$( "#results span:first" ).text( len );
$( "#results span:last" ).text( event.target.tagName );
$("#results span:first").text(len);
$("#results span:last").text(e.target.tagName);
e.preventDefault();
return false;
});
event.preventDefault();
});
]]></code>
<css><![CDATA[
body { font-size:16px; font-weight:bolder; }
div { width:130px; height:82px; margin:10px; float:left;
border:1px solid blue; padding:4px; }
#container { width:auto; height:105px; margin:0; float:none;
border:none; }
.hilite { border-color:red; }
#results { display:block; color:red; }
p { margin:10px; border:1px solid transparent; }
span { color:blue; border:1px solid transparent; }
input { width:100px; }
em { border:1px solid transparent; }
a { border:1px solid transparent; }
b { border:1px solid transparent; }
button { border:1px solid transparent; }
]]></css>
<html><![CDATA[<div id="container">
<div>
<p>This <span>is the <em>way</em> we</span>
body {
font-size: 16px;
font-weight: bolder;
}
div {
width: 130px;
height: 82px;
margin: 10px;
float: left;
border: 1px solid blue;
padding: 4px;
}
#container {
width: auto;
height: 105px;
margin: 0;
float: none;
border: none;
}
.hilite {
border-color: red;
}
#results {
display: block;
color: red;
}
p, span, em, a, b, button {
border: 1px solid transparent;
}
p {
margin: 10px;
}
span {
color: blue;
}
input {
width: 100px;
}
]]></css>
<html><![CDATA[
<div id="container">
<div>
<p>This <span>is the <em>way</em> we</span>
write <em>the</em> demo,</p>
</div>
</div>
<div>
<a href="#"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write
the</button> demo,
</div>
<div>
This <span>the way we <em>write</em> the <em>demo</em> so</span>
<div>
<a href="#"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write
the</button> demo,
</div>
<input type="text" value="early" /> in
</div>
<p>
<span>t</span>he <span>m</span>orning.
<span id="results">Found <span>0</span> children in <span>TAG</span>.</span>
<div>
This <span>the way we <em>write</em> the <em>demo</em> so</span>
<input type="text" value="early"> in
</div>
</p>
</div>]]></html>
<p>
<span>t</span>he <span>m</span>orning.
<span id="results">Found <span>0</span> children in <span>TAG</span>.</span>
</p>
</div>
]]></html>
</example>
<example>
<desc>Find all children of each div.</desc>
<code><![CDATA[$("div").children().css("border-bottom", "3px double red");]]></code>
<code><![CDATA[
$( "div" ).children().css( "border-bottom", "3px double red" );
]]></code>
<css><![CDATA[
body { font-size:16px; font-weight:bolder; }
span { color:blue; }
p { margin:5px 0; }
]]></css>
<html><![CDATA[<p>Hello (this is a paragraph)</p>
body {
font-size: 16px;
font-weight: bolder;
}
span {
color: blue;
}
p {
margin: 5px 0;
}
]]></css>
<html><![CDATA[
<p>Hello (this is a paragraph)</p>
<div><span>Hello Again (this span is a child of the a div)</span></div>
<p>And <span>Again</span> (in another paragraph)</p>
<div><span>Hello Again (this span is a child of the a div)</span></div>
<p>And <span>Again</span> (in another paragraph)</p>
<div>And One Last <span>Time</span> (most text directly in a div)</div>]]></html>
<div>And One Last <span>Time</span> (most text directly in a div)</div>
]]></html>
</example>
<example>
<desc>Find all children with a class "selected" of each div.</desc>
<code><![CDATA[$("div").children(".selected").css("color", "blue");]]></code>
<code><![CDATA[
$( "div" ).children( ".selected" ).css( "color", "blue" );
]]></code>
<css><![CDATA[
body { font-size:16px; font-weight:bolder; }
p { margin:5px 0; }
]]></css>
<html><![CDATA[<div>
<span>Hello</span>
<p class="selected">Hello Again</p>
<div class="selected">And Again</div>
<p>And One Last Time</p>
</div>]]></html>
body {
font-size: 16px;
font-weight: bolder;
}
p {
margin: 5px 0;
}
]]></css>
<html><![CDATA[
<div>
<span>Hello</span>
<p class="selected">Hello Again</p>
<div class="selected">And Again</div>
<p>And One Last Time</p>
</div>
]]></html>
</example>
<category slug="traversing/tree-traversal"/>
<category slug="version/1.0"/>
44 entries/class-selector.xml
View file
@@ -14,40 +14,46 @@
</longdesc>
<example>
<desc>Finds the element with the class "myClass".</desc>
<code><![CDATA[$(".myClass").css("border","3px solid red");]]></code>
<html><![CDATA[<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>]]></html>
<code><![CDATA[
$( ".myClass" ).css( "border", "3px solid red" );
]]></code>
<html><![CDATA[
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
]]></html>
<css><![CDATA[
div,span {
width: 100px;
div, span {
width: 120px;
height: 40px;
float:left;
float: left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
]]></css>
]]></css>
</example>
<example>
<desc>Finds the element with both "myclass" and "otherclass" classes.</desc>
<code><![CDATA[$(".myclass.otherclass").css("border","13px solid red");]]></code>
<html><![CDATA[<div class="myclass">div class="notMe"</div>
<div class="myclass otherclass">div class="myClass"</div>
<span class="myclass otherclass">span class="myClass"</span>]]></html>
<code><![CDATA[
$( ".myclass.otherclass" ).css( "border", "13px solid red" );
]]></code>
<html><![CDATA[
<div class="myclass">div class="notMe"</div>
<div class="myclass otherclass">div class="myClass"</div>
<span class="myclass otherclass">span class="myClass"</span>
]]></html>
<css><![CDATA[
div,span {
width: 100px;
div, span {
width: 120px;
height: 40px;
float:left;
float: left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
]]></css>
]]></css>
</example>
<category slug="selectors/basic-css-selectors"/>
<category slug="version/1.0"/>
</entry>
</entry>
63 entries/clearQueue.xml
View file
@@ -14,44 +14,59 @@
<example>
<desc>Empty the queue.</desc>
<code><![CDATA[
$("#start").click(function () {
$( "#start" ).click(function() {
var myDiv = $( "div" );
myDiv.show( "slow" );
myDiv.animate({
left:"+=200"
}, 5000 );
var myDiv = $("div");
myDiv.show("slow");
myDiv.animate({left:'+=200'},5000);
myDiv.queue(function () {
var _this = $(this);
_this.addClass("newcolor");
_this.dequeue();
myDiv.queue(function() {
var that = $( this );
that.addClass( "newcolor" );
that.dequeue();
});
myDiv.animate({left:'-=200'},1500);
myDiv.queue(function () {
var _this = $(this);
_this.removeClass("newcolor");
_this.dequeue();
myDiv.animate({
left:"-=200"
}, 1500 );
myDiv.queue(function() {
var that = $( this );
that.removeClass( "newcolor" );
that.dequeue();
});
myDiv.slideUp();
});
$("#stop").click(function () {
var myDiv = $("div");
$( "#stop" ).click(function() {
var myDiv = $( "div" );
myDiv.clearQueue();
myDiv.stop();
});]]></code>
});
]]></code>
<css><![CDATA[
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
div {
margin: 3px;
width: 40px;
height: 40px;
position: absolute;
left: 0px;
top: 30px;
background: green;
display: none;
}
div.newcolor {
background: blue;
}
]]></css>
<html><![CDATA[<button id="start">Start</button>
<html><![CDATA[
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>]]></html>
<div></div>
]]></html>
</example>
<category slug="effects/custom-effects"/>
<category slug="data"/>
<category slug="utilities"/>
<category slug="version/1.4"/>
</entry>
</entry>
55 entries/click.xml
View file
@@ -21,30 +21,36 @@
<added>1.0</added>
</signature>
<longdesc>
<p>This method is a shortcut for <code>.on('click', handler)</code> in the first two variations, and <code>.trigger('click')</code> in the third.
<p>This method is a shortcut for <code>.on( "click", handler )</code> in the first two variations, and <code>.trigger( "click" )</code> in the third.
The <code>click</code> event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event.
For example, consider the HTML:</p>
<pre><code>&lt;div id="target"&gt;
<pre><code>
&lt;div id="target"&gt;
Click here
&lt;/div&gt;
&lt;div id="other"&gt;
Trigger the handler
&lt;/div&gt;</code></pre>
&lt;/div&gt;
</code></pre>
<p class="image">
<img src="/resources/0042_05_03.png" alt=""/>
</p>
<p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p>
<pre><code>$("#target").click(function() {
alert("Handler for .click() called.");
});</code></pre>
<pre><code>
$( "#target" ).click(function() {
alert( "Handler for .click() called." );
});
</code></pre>
<p>Now if we click on this element, the alert is displayed:</p>
<p>
<samp>Handler for .click() called.</samp>
</p>
<p>We can also trigger the event when a different element is clicked:</p>
<pre><code>$("#other").click(function() {
$("#target").click();
});</code></pre>
<pre><code>
$( "#other" ).click(function() {
$( "#target" ).click();
});
</code></pre>
<p>After this code executes, clicks on <samp>Trigger the handler</samp> will also alert the message.</p>
<p>The <code>click</code> event is only triggered after this exact series of events:</p>
<ul>
@@ -56,22 +62,31 @@
<example>
<desc>Hide paragraphs on a page when they are clicked:</desc>
<code><![CDATA[
$("p").click(function () {
$(this).slideUp();
});
$( "p" ).click(function() {
$( this ).slideUp();
});
]]></code>
<css><![CDATA[
p { color:red; margin:5px; cursor:pointer; }
p:hover { background:yellow; }
]]></css>
<html><![CDATA[<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>]]></html>
p {
color: red;
margin: 5px;
cursor: pointer;
}
p:hover {
background: yellow;
}
]]></css>
<html><![CDATA[
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>
]]></html>
</example>
<example>
<desc>Trigger the click event on all of the paragraphs on the page:</desc>
<code><![CDATA[$("p").click();]]></code>
<code><![CDATA[
$( "p" ).click();
]]></code>
</example>
<category slug="events/mouse-events"/>
<category slug="version/1.0"/>
41 entries/clone.xml
View file
@@ -19,39 +19,52 @@
<desc>Create a deep copy of the set of matched elements.</desc>
<longdesc>
<p>The <code>.clone()</code> method performs a <em>deep</em> copy of the set of matched elements, meaning that it copies the matched elements as well as all of their descendant elements and text nodes. For performance reasons, the dynamic state of form elements (e.g., user data typed into <code>input</code>, and <code>textarea</code> or user selections made to a <code>select</code>) is not copied to the cloned elements. The clone operation sets these fields to their default values as specified in the HTML.</p>
<p>When used in conjunction with one of the insertion methods, <code>.clone()</code> is a convenient way to duplicate elements on a page. Consider the following HTML:</p>
<pre><code>&lt;div class="container"&gt;
<p>When used in conjunction with one of the insertion methods, <code>.clone()</code> is a convenient way to duplicate elements on a page. Consider the following HTML:</p>
<pre><code>
&lt;div class="container"&gt;
&lt;div class="hello"&gt;Hello&lt;/div&gt;
&lt;div class="goodbye"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;</code></pre>
&lt;/div&gt;
</code></pre>
<p>As shown in the discussion for <code><a href="http://api.jquery.com/append/">.append()</a></code>, normally when an element is inserted somewhere in the DOM, it is moved from its old location. So, given the code:</p>
<pre><code>$('.hello').appendTo('.goodbye');</code></pre>
<pre><code>
$( ".hello" ).appendTo( ".goodbye" );
</code></pre>
<p>The resulting DOM structure would be:</p>
<pre><code>&lt;div class="container"&gt;
<pre><code>
&lt;div class="container"&gt;
&lt;div class="goodbye"&gt;
Goodbye
&lt;div class="hello"&gt;Hello&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
&lt;/div&gt;
</code></pre>
<p>To prevent this and instead create a copy of the element, you could write the following:</p>
<pre><code>$('.hello').clone().appendTo('.goodbye');</code></pre>
<pre><code>
$( ".hello" ).clone().appendTo( ".goodbye" );
</code></pre>
<p>This would produce:</p>
<pre><code>&lt;div class="container"&gt;
<pre><code>
&lt;div class="container"&gt;
&lt;div class="hello"&gt;Hello&lt;/div&gt;
&lt;div class="goodbye"&gt;
Goodbye
&lt;div class="hello"&gt;Hello&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
&lt;/div&gt;
</code></pre>
<div class="warning">
<p><strong>Note:</strong> When using the <code>.clone()</code> method, you can modify the cloned elements or their contents before (re-)inserting them into the document.</p>
</div>
<p>Normally, any event handlers bound to the original element are <em>not</em> copied to the clone. The optional <code>withDataAndEvents</code> parameter allows us to change this behavior, and to instead make copies of all of the event handlers as well, bound to the new copy of the element. As of jQuery 1.4, all element data (attached by the <code>.data()</code> method) is also copied to the new copy. </p>
<p>However, objects and arrays within element data are not copied and will continue to be shared between the cloned element and the original element. To deep copy all data, copy each one manually:</p>
<pre><code>var $elem = $('#elem').data( "arr": [ 1 ] ), // Original element with attached data
<pre><code>
// Original element with attached data
var $elem = $( "#elem" ).data( "arr": [ 1 ] ),
$clone = $elem.clone( true )
.data( "arr", $.extend( [], $elem.data("arr") ) ); // Deep copy to prevent data sharing
</code></pre>
// Deep copy to prevent data sharing
.data( "arr", $.extend( [], $elem.data( "arr" ) ) );
</code></pre>
<p>As of jQuery 1.5, <code>withDataAndEvents</code> can be optionally enhanced with <code>deepWithDataAndEvents </code> to copy the events and data for all children of the cloned element.</p>
<div class="warning">
<p><strong>Note:</strong> Using <code>.clone()</code> has the side-effect of producing elements with duplicate <code>id</code> attributes, which are supposed to be unique. Where possible, it is recommended to avoid cloning elements with this attribute or using <code>class</code> attributes as identifiers instead.</p>
@@ -60,10 +73,10 @@
<example>
<desc>Clones all b elements (and selects the clones) and prepends them to all paragraphs.</desc>
<code><![CDATA[
$("b").clone().prependTo("p");
$( "b" ).clone().prependTo( "p" );
]]></code>
<html><![CDATA[
<b>Hello</b><p>, how are you?</p>
<b>Hello</b><p>, how are you?</p>
]]></html>
</example>
<category slug="manipulation/copying"/>
91 entries/closest.xml
View file
@@ -78,58 +78,81 @@
&lt;/li&gt;
&lt;li class="item-iii"&gt;III&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
</code></pre>
<p>Suppose we perform a search for <code>&lt;ul&gt;</code> elements starting at item A:</p>
<pre><code>
$('li.item-a').closest('ul')
.css('background-color', 'red');
</code></pre>
$( "li.item-a" )
.closest( "ul" )
.css( "background-color", "red" );
</code></pre>
<p>This will change the color of the level-2 <code>&lt;ul&gt;</code>, since it is the first encountered when traveling up the DOM tree.</p>
<p>Suppose we search for an <code>&lt;li&gt;</code> element instead:</p>
<pre><code>$('li.item-a').closest('li')
.css('background-color', 'red');
</code></pre>
<pre><code>
$( "li.item-a" )
.closest( "li" )
.css( "background-color", "red" );
</code></pre>
<p>This will change the color of list item A. The <code>.closest()</code> method begins its search <em>with the element itself</em> before progressing up the DOM tree, and stops when item A matches the selector.</p>
<p>We can pass in a DOM element as the context within which to search for the closest element.</p>
<pre><code>var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII)
.css('background-color', 'red');
$('li.item-a').closest('#one', listItemII)
.css('background-color', 'green');</code></pre>
<pre><code>
var listItemII = document.getElementById( "ii" );
$( "li.item-a" )
.closest( "ul", listItemII )
.css( "background-color", "red" );
$( "li.item-a" )
.closest( "#one", listItemII )
.css( "background-color", "green" );
</code></pre>
<p>This will change the color of the level-2 <code>&lt;ul&gt;</code>, because it is both the first <code>&lt;ul&gt;</code> ancestor of list item A and a descendant of list item II. It will not change the color of the level-1 <code>&lt;ul&gt;</code>, however, because it is not a descendant of list item II.</p>
</longdesc>
<example>
<desc>Show how event delegation can be done with closest. The closest list element toggles a yellow background when it or its descendent is clicked.</desc>
<code><![CDATA[
$( document ).on("click", function( e ) {
$( e.target ).closest("li").toggleClass("hilight");
});
$( document ).on( "click", function( event ) {
$( event.target ).closest( "li" ).toggleClass( "hilight" );
});
]]></code>
<css><![CDATA[
li { margin: 3px; padding: 3px; background: #EEEEEE; }
li.hilight { background: yellow; }
]]></css>
<html><![CDATA[<ul>
<li><b>Click me!</b></li>
<li>You can also <b>Click me!</b></li>
</ul>]]></html>
li {
margin: 3px;
padding: 3px;
background: #EEEEEE;
}
li.hilight {
background: yellow;
}
]]></css>
<html><![CDATA[
<ul>
<li><b>Click me!</b></li>
<li>You can also <b>Click me!</b></li>
</ul>
]]></html>
</example>
<example>
<desc>Pass a jQuery object to closest. The closest list element toggles a yellow background when it or its descendent is clicked.</desc>
<code><![CDATA[
var $listElements = $("li").css("color", "blue");
$( document ).on("click", function( e ) {
$( e.target ).closest( $listElements ).toggleClass("hilight");
});
var listElements = $( "li" ).css( "color", "blue" );
$( document ).on( "click", function( event ) {
$( event.target ).closest( listElements ).toggleClass( "hilight" );
});
]]></code>
<css><![CDATA[
li { margin: 3px; padding: 3px; background: #EEEEEE; }
li.hilight { background: yellow; }
]]></css>
<html><![CDATA[<ul>
<li><b>Click me!</b></li>
<li>You can also <b>Click me!</b></li>
</ul>]]></html>
li {
margin: 3px;
padding: 3px;
background: #EEEEEE;
}
li.hilight {
background: yellow;
}
]]></css>
<html><![CDATA[
<ul>
<li><b>Click me!</b></li>
<li>You can also <b>Click me!</b></li>
</ul>
]]></html>
</example>
<category slug="traversing/tree-traversal"/>
<category slug="version/1.3"/>
@@ -148,7 +171,7 @@ $('li.item-a').closest('#one', listItemII)
</signature>
<desc>Get an array of all the elements and selectors matched against the current element up through the DOM tree.</desc>
<longdesc>
<p><strong>This signature (only!) is deprecated as of jQuery 1.7 and <em>removed</em> in jQuery 1.8</strong>. It was primarily meant to be used internally or by plugin authors.</p>
<div class="warning"><strong>This signature (only!) is deprecated as of jQuery 1.7 and <em>removed</em> in jQuery 1.8</strong>. It was primarily meant to be used internally or by plugin authors.</div>
</longdesc>
<category slug="traversing/tree-traversal"/>
<category slug="version/1.3"/>
8 entries/contains-selector.xml
View file
@@ -15,15 +15,15 @@
<example>
<desc>Finds all divs containing "John" and underlines them.</desc>
<code><![CDATA[
$("div:contains('John')").css("text-decoration", "underline");]]></code>
$( "div:contains('John')" ).css( "text-decoration", "underline" );
]]></code>
<html><![CDATA[
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
]]></html>
]]></html>
</example>
<category slug="selectors/content-filter-selector"/>
<category slug="version/1.1.4"/>
</entry>
</entry>
60 entries/contents.xml
View file
@@ -8,40 +8,56 @@
<longdesc>
<p>Given a jQuery object that represents a set of DOM elements, the <code>.contents()</code> method allows us to search throughthe immediate children of these elements in the DOM tree and construct a new jQuery object from the matching elements. The <code>.contents()</code> and <code>.children()</code> methods are similar, except that the former includes text nodes as well as HTML elements in the resulting jQuery object.</p>
<p>The <code>.contents()</code> method can also be used to get the content document of an iframe, if the iframe is on the same domain as the main page.</p>
<p>Consider a simple <code>&lt;div&gt;</code> with a number of text nodes, each of which is separated by two line break elements (<code>&lt;br /&gt;</code>):</p>
<pre><code>&lt;div class="container"&gt;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
&lt;br /&gt;&lt;br /&gt;
Ut enim ad minim veniam, quis nostrud exercitation ullamco
<p>Consider a simple <code>&lt;div&gt;</code> with a number of text nodes, each of which is separated by two line break elements (<code>&lt;br&gt;</code>):</p>
<pre><code>
&lt;div class="container"&gt;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
&lt;br&gt;&lt;br&gt;
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
&lt;br /&gt; &lt;br /&gt;
Duis aute irure dolor in reprehenderit in voluptate velit
&lt;br&gt;&lt;br&gt;
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
&lt;/div&gt;
</code></pre>
</code></pre>
<p>We can employ the <code>.contents()</code> method to help convert this blob of text into three well-formed paragraphs:</p>
<pre><code>
$('.container').contents().filter(function() {
return this.nodeType == 3;
})
.wrap('&lt;p&gt;&lt;/p&gt;')
.end()
.filter('br')
.remove();
</code></pre>
$( ".container" )
.contents()
.filter(function() {
return this.nodeType === 3;
})
.wrap( "&lt;p&gt;&lt;/p&gt;" )
.end()
.filter( "br" )
.remove();
</code></pre>
<p>This code first retrieves the contents of <code>&lt;div class="container"&gt;</code> and then filters it for text nodes, which are wrapped in paragraph tags. This is accomplished by testing the <a href="https://developer.mozilla.org/en/nodeType"><code>.nodeType</code> property</a> of the element. This DOM property holds a numeric code indicating the node's type; text nodes use the code 3. The contents are again filtered, this time for <code>&lt;br /&gt;</code> elements, and these elements are removed.</p>
</longdesc>
<example>
<desc>Find all the text nodes inside a paragraph and wrap them with a bold tag.</desc>
<code><![CDATA[$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");]]></code>
<html><![CDATA[<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>]]></html>
<code><![CDATA[
$( "p" )
.contents()
.filter(function(){
return this.nodeType !== 1;
})
.wrap( "<b></b>" );
]]></code>
<html><![CDATA[
<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>
]]></html>
</example>
<example>
<desc>Change the background colour of links inside of an iframe.</desc>
<code><![CDATA[$("#frameDemo").contents().find("a").css("background-color","#BADA55");]]></code>
<html><![CDATA[<iframe src="http://api.jquery.com/" width="80%" height="600" id='frameDemo'></iframe> ]]></html>
<code><![CDATA[
$( "#frameDemo" ).contents().find( "a" ).css( "background-color", "#BADA55" );
]]></code>
<html><![CDATA[
<iframe src="http://api.jquery.com/" width="80%" height="600" id="frameDemo"></iframe>
]]></html>
</example>
<category slug="traversing/miscellaneous-traversal"/>
<category slug="version/1.2"/>
</entry>
</entry>
18 entries/context.xml
View file
@@ -13,18 +13,14 @@
</longdesc>
<example>
<desc>Determine the exact context used.</desc>
<code><![CDATA[$("ul")
.append("<li>" + $("ul").context + "</li>")
.append("<li>" + $("ul", document.body).context.nodeName + "</li>");
<code><![CDATA[
$( "ul" )
.append( "<li>" + $( "ul" ).context + "</li>" )
.append( "<li>" + $( "ul", document.body ).context.nodeName + "</li>" );
]]></code>
<css><![CDATA[
body { cursor:pointer; }
div { width:50px; height:30px; margin:5px; float:left;
background:green; }
span { color:red; }
]]></css>
<html><![CDATA[Context:<ul></ul>]]></html>
<html><![CDATA[
Context: <ul></ul>
]]></html>
</example>
<category slug="internals"/>
<category slug="properties/jquery-object-instance-properties"/>
190 entries/css.xml
View file
@@ -18,61 +18,86 @@
<desc>Get the value of style properties for the first element in the set of matched elements.</desc>
<longdesc>
<p>The <code>.css()</code> method is a convenient way to get a style property from the first matched element, especially in light of the different ways browsers access most of those properties (the <code>getComputedStyle()</code> method in standards-based browsers versus the <code>currentStyle</code> and <code>runtimeStyle</code> properties in Internet Explorer) and the different terms browsers use for certain properties. For example, Internet Explorer's DOM implementation refers to the <code>float</code> property as <code>styleFloat</code>, while W3C standards-compliant browsers refer to it as <code>cssFloat</code>. For consistency, you can simply use <code>"float"</code>, and jQuery will translate it to the correct value for each browser.</p>
<p>Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both <code>.css('background-color')</code> and <code>.css('backgroundColor')</code>. Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).</p>
<p>Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: <code>$(elem).css('marginTop')</code> and <code>$(elem).css('marginRight')</code>, and so on.</p>
<p>Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both <code>.css( "background-color" )</code> and <code>.css( "backgroundColor" )</code>. Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).</p>
<p>Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: <code>$( elem ).css( "marginTop" )</code> and <code>$( elem ).css( "marginRight" )</code>, and so on.</p>
<p><strong>As of jQuery 1.9</strong>, passing an array of style properties to <code>.css()</code> will result in an object of property-value pairs.</p>
</longdesc>
<example>
<desc>Get the background color of a clicked div.</desc>
<code><![CDATA[
$("div").click(function () {
var color = $(this).css("background-color");
$("#result").html("That div is <span style='color:" +
color + ";'>" + color + "</span>.");
$( "div" ).click(function() {
var color = $( this ).css( "background-color" );
$( "#result" ).html( "That div is <span style='color:" +
color + ";'>" + color + "</span>." );
});
]]></code>
<css><![CDATA[
div { width:60px; height:60px; margin:5px; float:left; }
]]></css>
div {
width: 60px;
height: 60px;
margin: 5px;
float: left;
}
]]></css>
<html><![CDATA[
<span id="result">&nbsp;</span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>]]></html>
<div style="background-color:#f11;"></div>
]]></html>
</example>

<example>
<desc>Get the width, height, text color, and background color of a clicked div.</desc>
<code><![CDATA[
$("div").click(function () {
var html = ["The clicked div has the following styles:"];
$( "div" ).click(function() {
var html = [ "The clicked div has the following styles:" ];
var styleProps = $(this).css( ["width", "height", "color", "background-color"] );
var styleProps = $( this ).css([
"width", "height", "color", "background-color"
]);
$.each( styleProps, function( prop, value ) {
html.push( prop + ": " + value );
});
$( "#result" ).html( html.join( "<br>" ) );
});
]]></code>
<css><![CDATA[
div { height: 50px; margin: 5px; padding: 5px; float: left; }
#box1 { width: 50px; color: yellow; background-color: blue; }
#box2 { width: 80px; color: rgb(255,255,255); background-color: rgb(15,99,30); }
#box3 { width: 40px; color: #fcc; background-color: #123456; }
#box4 { width: 70px; background-color: #f11; }
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb(255, 255, 255);
background-color: rgb(15, 99, 30);
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
]]></css>
<html><![CDATA[
<p id="result">&nbsp;</p>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>]]></html>
<div id="box4">4</div>
]]></html>
</example>
<category slug="css"/>
<category slug="manipulation/style-properties"/>
@@ -110,100 +135,117 @@ div { height: 50px; margin: 5px; padding: 5px; float: left; }
<desc>Set one or more CSS properties for the set of matched elements.</desc>
<longdesc>
<p>As with the <code>.prop()</code> method, the <code>.css()</code> method makes setting properties of elements quick and easy. This method can take either a property name and value as separate parameters, or a single object of key-value pairs.</p>
<p>Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both <code>.css({'background-color': '#ffe', 'border-left': '5px solid #ccc'})</code> and <code>.css({backgroundColor: '#ffe', borderLeft: '5px solid #ccc'})</code>. Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name.</p>
<p>When using <code>.css()</code> as a setter, jQuery modifies the element's <code>style</code> property. For example, <code>$('#mydiv').css('color', 'green')</code> is equivalent to <code>document.getElementById('mydiv').style.color = 'green'</code>. Setting the value of a style property to an empty string &#x2014; e.g. <code>$('#mydiv').css('color', '')</code> &#x2014; removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's <code>.css()</code> method, or through direct DOM manipulation of the <code>style</code> property. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or <code>&lt;style&gt;</code> element. <strong>Warning:</strong> one notable exception is that, for IE 8 and below, removing a shorthand property such as <code>border</code> or <code>background></code> will remove that style entirely from the element, regardless of what is set in a stylesheet or <code>&lt;style&gt;</code> element.</p>
<p>Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both <code>.css({ "background-color": "#ffe", "border-left": "5px solid #ccc" })</code> and <code>.css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" })</code>. Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name.</p>
<p>When using <code>.css()</code> as a setter, jQuery modifies the element's <code>style</code> property. For example, <code>$( "#mydiv" ).css( "color", "green" )</code> is equivalent to <code>document.getElementById( "mydiv" ).style.color = "green"</code>. Setting the value of a style property to an empty string &#x2014; e.g. <code>$( "#mydiv" ).css( "color", "" )</code> &#x2014; removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's <code>.css()</code> method, or through direct DOM manipulation of the <code>style</code> property. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or <code>&lt;style&gt;</code> element. <strong>Warning:</strong> one notable exception is that, for IE 8 and below, removing a shorthand property such as <code>border</code> or <code>background></code> will remove that style entirely from the element, regardless of what is set in a stylesheet or <code>&lt;style&gt;</code> element.</p>
<p>As of jQuery 1.6, <code>.css()</code> accepts relative values similar to <code>.animate()</code>. Relative values are a string starting with <code>+=</code> or <code>-=</code> to increment or decrement the current value. For example, if an element's padding-left was 10px, <code>.css( "padding-left", "+=15" )</code> would result in a total padding-left of 25px.</p>
<p>As of jQuery 1.4, <code>.css()</code> allows us to pass a function as the property value:</p>
<pre><code>$('div.example').css('width', function(index) {
<pre><code>
$( "div.example" ).css( "width", function( index ) {
return index * 50;
});</code></pre>
});
</code></pre>
<p>This example sets the widths of the matched elements to incrementally larger values.</p>
<p><strong>Note: </strong>If nothing is returned in the setter function (ie. <code>function(index, style){})</code>, or if <code>undefined</code> is returned, the current value is not changed. This is useful for selectively setting values only when certain criteria are met.</p>
<p><strong>Note: </strong>If nothing is returned in the setter function (ie. <code>function( index, style ){} )</code>, or if <code>undefined</code> is returned, the current value is not changed. This is useful for selectively setting values only when certain criteria are met.</p>
</longdesc>
<example>
<desc>Change the color of any paragraph to red on mouseover event.</desc>
<code><![CDATA[
$("p").on( "mouseover", function() {
$(this).css( "color", "red" );
});
$( "p" ).on( "mouseover", function() {
$( this ).css( "color", "red" );
});
]]></code>
<css><![CDATA[
p { color:blue; width:200px; font-size:14px; }
]]></css>
p {
color: blue;
width: 200px;
font-size: 14px;
}
]]></css>
<html><![CDATA[
<p>Just roll the mouse over me.</p>
<p>Or me to see a color change.</p>
]]></html>
]]></html>
</example>
<example>
<desc>Increase the width of #box by 200 pixels the first time it is clicked.</desc>
<code><![CDATA[
$("#box").one( "click", function() {
$( this ).css( "width", "+=200" );
});
$( "#box" ).one( "click", function() {
$( this ).css( "width", "+=200" );
});
]]></code>
<css><![CDATA[
#box { background: black; color: snow; width:100px; padding:10px; }
]]></css>
#box {
background: black;
color: snow;
width: 100px;
padding: 10px;
}
]]></css>
<html><![CDATA[
<div id="box">Click me to grow</div>
]]></html>
<div id="box">Click me to grow</div>
]]></html>
</example>
<example>
<desc>Highlight a clicked word in the paragraph.</desc>
<code><![CDATA[
var words = $("p").first().text().split( /\s+/ );
var text = words.join( "</span> <span>" );
$("p").first().html( "<span>" + text + "</span>" );
$("span").on( "click", function() {
$(this).css( "background-color", "yellow" );
});
var words = $( "p" ).first().text().split( /\s+/ );
var text = words.join( "</span> <span>" );
$( "p" ).first().html( "<span>" + text + "</span>" );
$( "span" ).on( "click", function() {
$( this ).css( "background-color", "yellow" );
});
]]></code>
<css><![CDATA[
p { color:blue; font-weight:bold; cursor:pointer; }
]]></css>
p {
color: blue;
font-weight: bold;
cursor: pointer;
}
]]></css>
<html><![CDATA[
<p>
Once upon a time there was a man
who lived in a pizza parlor. This
man just loved pizza and ate it all
the time. He went on to be the
happiest man in the world. The end.
</p>]]></html>
</p>
]]></html>
</example>
<example>
<desc>Change the font weight and background color on mouseenter and mouseleave.</desc>
<code><![CDATA[
$("p")
.on( "mouseenter", function() {
$(this).css({
"background-color": "yellow",
"font-weight": "bolder"
});
})
.on( "mouseleave", function() {
var styles = {
backgroundColor : "#ddd",
fontWeight: ""
};
$(this).css( styles );
$( "p" )
.on( "mouseenter", function() {
$( this ).css({
"background-color": "yellow",
"font-weight": "bolder"
});
})
.on( "mouseleave", function() {
var styles = {
backgroundColor : "#ddd",
fontWeight: ""
};
$( this ).css( styles );
});
]]></code>
<css><![CDATA[
p { color:green; }
p {
color: green;
}
]]></css>
<html><![CDATA[
<p>Move the mouse over a paragraph.</p>
<p>Like this one or the one above.</p>
<p>Move the mouse over a paragraph.</p>
<p>Like this one or the one above.</p>
]]></html>
</example>
<example>
<desc>Increase the size of a div when you click it.</desc>
<code><![CDATA[
$("div").on( "click", function() {
$(this).css({
$( "div" ).on( "click", function() {
$( this ).css({
width: function( index, value ) {
return parseFloat( value ) * 1.2;
},
@@ -214,11 +256,15 @@ $("div").on( "click", function() {
});
]]></code>
<css><![CDATA[
div { width: 20px; height: 15px; background-color: #f33; }
]]></css>
div {
width: 20px;
height: 15px;
background-color: #f33;
}
]]></css>
<html><![CDATA[
<div>click</div>
<div>click</div>
<div>click</div>
<div>click</div>
]]></html>
</example>
<category slug="css"/>
126 entries/data.xml
View file
@@ -23,13 +23,12 @@
<p>The <code>.data()</code> method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.</p>
<p> We can set several distinct values for a single element and retrieve them later:</p>
<pre><code>
$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });

$("body").data("foo"); // 52
$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }
</code></pre>
$( "body" ).data( "foo", 52 );
$( "body" ).data( "bar", { myType: "test", count: 40 } );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );
$( "body" ).data( "foo" ); // 52
$( "body" ).data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }
</code></pre>
<p>In jQuery 1.4.3 setting an element's data object with <code>.data(obj)</code> extends the data previously stored with that element. jQuery itself uses the <code>.data()</code> method to save information under the names 'events' and 'handle', and also reserves any data name starting with an underscore ('_') for internal use.</p>
<p>Prior to jQuery 1.4.3 (starting in jQuery 1.4) the .data() method completely replaced all data, instead of just extending the data object. If you are using third-party plugins it may not be advisable to completely replace the element's data object, since plugins may have also set data.</p>
<p>Due to the way browsers interact with plugins and external code, the <code>.data()</code> method cannot be used on <code>&lt;object&gt;</code> (unless it's a Flash plugin), <code>&lt;applet&gt;</code> or <code>&lt;embed&gt;</code> elements.</p>
@@ -38,20 +37,26 @@ $("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2,
<example>
<desc>Store then retrieve a value from the div element.</desc>
<code><![CDATA[
$("div").data("test", { first: 16, last: "pizza!" });
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span:first" ).text( $( "div" ).data( "test" ).first );
$( "span:last" ).text( $( "div" ).data( "test" ).last );
]]></code>
<css><![CDATA[
div { color:blue; }
span { color:red; }
]]></css>
<html><![CDATA[<div>
The values stored were
<span></span>
and
<span></span>
</div>]]></html>
div {
color: blue;
}
span {
color: red;
}
]]></css>
<html><![CDATA[
<div>
The values stored were
<span></span>
and
<span></span>
</div>
]]></html>
</example>
<category slug="data"/>
<category slug="miscellaneous/data-storage"/>
@@ -73,81 +78,94 @@ $("span:last").text($("div").data("test").last);
<longdesc>
<p>The <code>.data()</code> method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks. We can retrieve several distinct values for a single element one at a time, or as a set:</p>
<pre><code>
alert($('body').data('foo'));
alert($('body').data());
</code></pre>
alert( $( "body" ).data( "foo" ) );
alert( $( "body" ).data() );
</code></pre>
<p>The above lines alert the data values that were set on the <code>body</code> element. If no data at all was set on that element, <code>undefined</code> is returned.</p>
<pre><code>
alert( $("body").data("foo")); //undefined
$("body").data("bar", "foobar");
alert( $("body").data("bar")); //foobar
</code></pre>
alert( $( "body" ).data( "foo" ) ); // undefined
$( "body" ).data( "bar", "foobar" );
alert( $( "body" ).data( "bar" ) ); // foobar
</code></pre>
<h4 id="data-html5">
<a href="#data-html5">HTML5 data-* Attributes</a>
</h4>
<p>As of jQuery 1.4.3 <a href="http://ejohn.org/blog/html-5-data-attributes/">HTML 5 data- attributes</a> will be automatically pulled in to jQuery's data object. The treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the <a href="http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes">W3C HTML5 specification</a>.</p>
<p>For example, given the following HTML:</p>
<pre><code>&lt;div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'&gt;&lt;/div&gt;</code></pre>
<p>All of the following jQuery code will work.</p>
<pre><code>$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";</code></pre>
<pre><code>
$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";
</code></pre>
<p>Every attempt is made to convert the string to a JavaScript value (this includes booleans, numbers, objects, arrays, and null). A value is only converted to a number if doing so doesn't change the value's representation. For example, "1E02" and "100.000" are equivalent as numbers (numeric value 100) but converting them would alter their representation so they are left as strings. The string value "100" is converted to the number 100.</p>
<p>When the data attribute is an object (starts with '{') or array (starts with '[') then <code>jQuery.parseJSON</code> is used to parse the string; it must follow <a href="http://en.wikipedia.org/wiki/JSON#Data_types.2C_syntax_and_example">valid JSON syntax</a> <em>including quoted property names</em>. If the value isn't parseable as a JavaScript value, it is left as a string.</p>
<p>To retrieve the value's attribute as a string without any attempt to convert it, use the <code><a href="/attr/">attr()</a></code> method.</p>
<p>The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).</p>
<p>Calling <code>.data()</code> with no parameters retrieves all of the values as a JavaScript object. This object can be safely cached in a variable as long as a new object is not set with <code>.data(obj)</code>. Using the object directly to get or set values is faster than making individual calls to <code>.data()</code> to get or set each value:</p>
<pre><code>
var mydata = $("#mydiv").data();
var mydata = $( "#mydiv" ).data();
if ( mydata.count &lt; 9 ) {
mydata.count = 43;
mydata.status = "embiggened";
mydata.count = 43;
mydata.status = "embiggened";
}
</code></pre>
</code></pre>
</longdesc>
<note id="no-data-on-xml" type="additional"/>
<example>
<desc>Get the data named "blah" stored at for an element.</desc>
<code><![CDATA[
$("button").click(function(e) {
$( "button" ).click(function() {
var value;
switch ($("button").index(this)) {
switch ( $( "button" ).index( this ) ) {
case 0 :
value = $("div").data("blah");
value = $( "div" ).data( "blah" );
break;
case 1 :
$("div").data("blah", "hello");
$( "div" ).data( "blah", "hello" );
value = "Stored!";
break;
case 2 :
$("div").data("blah", 86);
$( "div" ).data( "blah", 86 );
value = "Stored!";
break;
case 3 :
$("div").removeData("blah");
$( "div" ).removeData( "blah" );
value = "Removed!";
break;
}
$("span").text("" + value);
$( "span" ).text( "" + value );
});
]]></code>
<css><![CDATA[
div { margin:5px; background:yellow; }
button { margin:5px; font-size:14px; }
p { margin:5px; color:blue; }
span { color:red; }
]]></css>
<html><![CDATA[<div>A div</div>
<button>Get "blah" from the div</button>
<button>Set "blah" to "hello"</button>
<button>Set "blah" to 86</button>
<button>Remove "blah" from the div</button>
<p>The "blah" value of this div is <span>?</span></p>]]></html>
div {
margin: 5px;
background: yellow;
}
button {
margin: 5px;
font-size: 14px;
}
p {
margin: 5px;
color: blue;
}
span {
color: red;
}
]]></css>
<html><![CDATA[
<div>A div</div>
<button>Get "blah" from the div</button>
<button>Set "blah" to "hello"</button>
<button>Set "blah" to 86</button>
<button>Remove "blah" from the div</button>
<p>The "blah" value of this div is <span>?</span></p>
]]></html>
</example>
<category slug="data"/>
<category slug="miscellaneous/data-storage"/>
59 entries/dblclick.xml
View file
@@ -21,30 +21,36 @@
<added>1.0</added>
</signature>
<longdesc>
<p>This method is a shortcut for <code>.on('dblclick', handler)</code> in the first two variations, and <code>.trigger('dblclick')</code> in the third.
<p>This method is a shortcut for <code>.on( "dblclick", handler)</code> in the first two variations, and <code>.trigger( "dblclick" )</code> in the third.
The <code>dblclick</code> event is sent to an element when the element is double-clicked. Any HTML element can receive this event.
For example, consider the HTML:</p>
<pre><code>&lt;div id="target"&gt;
<pre><code>
&lt;div id="target"&gt;
Double-click here
&lt;/div&gt;
&lt;div id="other"&gt;
Trigger the handler
&lt;/div&gt;</code></pre>
&lt;/div&gt;
</code></pre>
<p class="image">
<img src="/resources/0042_05_04.png" alt=""/>
</p>
<p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p>
<pre><code>$('#target').dblclick(function() {
alert('Handler for .dblclick() called.');
});</code></pre>
<pre><code>
$( "#target" ).dblclick(function() {
alert( "Handler for .dblclick() called." );
});
</code></pre>
<p>Now double-clicking on this element displays the alert:</p>
<p>
<samp>Handler for .dblclick() called.</samp>
</p>
<p>To trigger the event manually, apply <code>.dblclick()</code> without an argument:</p>
<pre><code>$('#other').click(function() {
$('#target').dblclick();
});</code></pre>
<pre><code>
$( "#other" ).click(function() {
$( "#target" ).dblclick();
});
</code></pre>
<p>After this code executes, (single) clicks on <samp>Trigger the handler</samp> will also alert the message.</p>
<p>The <code>dblclick</code> event is only triggered after this exact series of events:</p>
<ul>
@@ -58,25 +64,36 @@
</longdesc>
<example>
<desc>To bind a "Hello World!" alert box the dblclick event on every paragraph on the page:</desc>
<code><![CDATA[$("p").dblclick( function () { alert("Hello World!"); });]]></code>
<code><![CDATA[
$( "p" ).dblclick(function() {
alert( "Hello World!" );
});
]]></code>
</example>
<example>
<desc>Double click to toggle background color.</desc>
<code><![CDATA[
var divdbl = $("div:first");
divdbl.dblclick(function () {
divdbl.toggleClass('dbl');
});
var divdbl = $( "div:first" );
divdbl.dblclick(function() {
divdbl.toggleClass( "dbl" );
});
]]></code>
<css><![CDATA[
div { background:blue;
color:white;
height:100px;
width:150px;
div {
background: blue;
color: white;
height: 100px;
width: 150px;
}
div.dbl { background:yellow;color:black; }
]]></css>
<html><![CDATA[<div></div><span>Double click the block</span>]]></html>
div.dbl {
background: yellow;
color: black;
}
]]></css>
<html><![CDATA[
<div></div>
<span>Double click the block</span>
]]></html>
</example>
<category slug="events/mouse-events"/>
<category slug="version/1.0"/>
8 entries/deferred.always.xml
View file
@@ -21,11 +21,11 @@
<example>
<desc>Since the <a href="http://api.jquery.com/jQuery.get/"><code>jQuery.get()</code></a> method returns a <code>jqXHR</code> object, which is derived from a Deferred object, we can attach a callback for both success and error using the <code>deferred.always()</code> method.</desc>
<code><![CDATA[
$.get("test.php").always( function() {
alert("$.get completed with success or error callback arguments");
} );
$.get( "test.php" ).always(function() {
alert( "$.get completed with success or error callback arguments" );
});
]]></code>
</example>
<category slug="deferred-object"/>
<category slug="version/1.6"/>
</entry>
</entry>
40 entries/deferred.done.xml
View file
@@ -21,45 +21,45 @@
<example>
<desc>Since the <a href="/jQuery.get"><code>jQuery.get</code></a> method returns a jqXHR object, which is derived from a Deferred object, we can attach a success callback using the <code>.done()</code> method.</desc>
<code><![CDATA[
$.get("test.php").done(function() {
alert("$.get succeeded");
$.get( "test.php" ).done(function() {
alert( "$.get succeeded" );
});
]]></code>
</example>
<example>
<desc>Resolve a Deferred object when the user clicks a button, triggering a number of callback functions:</desc>
<code><![CDATA[
/* 3 functions to call when the Deferred object is resolved */
// 3 functions to call when the Deferred object is resolved
function fn1() {
$("p").append(" 1 ");
$( "p" ).append( " 1 " );
}
function fn2() {
$("p").append(" 2 ");
$( "p" ).append( " 2 " );
}
function fn3(n) {
$("p").append(n + " 3 " + n);
function fn3( n ) {
$( "p" ).append( n + " 3 " + n );
}
/* create a deferred object */
// Create a deferred object
var dfd = $.Deferred();
/* add handlers to be called when dfd is resolved */
// Add handlers to be called when dfd is resolved
dfd
/* .done() can take any number of functions or arrays of functions */
.done( [fn1, fn2], fn3, [fn2, fn1] )
/* we can chain done methods, too */
.done(function(n) {
$("p").append(n + " we're done.");
});
// .done() can take any number of functions or arrays of functions
.done( [ fn1, fn2 ], fn3, [ fn2, fn1 ] )
// We can chain done methods, too
.done(function( n ) {
$( "p" ).append( n + " we're done." );
});
/* resolve the Deferred object when the button is clicked */
$("button").on("click", function() {
dfd.resolve("and");
// Resolve the Deferred object when the button is clicked
$( "button" ).on( "click", function() {
dfd.resolve( "and" );
});
]]></code>
<html><![CDATA[
<button>Go</button>
<p>Ready...</p>
<button>Go</button>
<p>Ready...</p>
]]></html>
</example>
<category slug="deferred-object"/>
12 entries/deferred.fail.xml
View file
@@ -21,11 +21,15 @@
<example>
<desc>Since the <a href="http://api.jquery.com/jQuery.get/"><code>jQuery.get</code></a> method returns a jqXHR object, which is derived from a Deferred, you can attach a success and failure callback using the <code>deferred.done()</code> and <code>deferred.fail()</code> methods.</desc>
<code><![CDATA[
$.get("test.php")
.done(function(){ alert("$.get succeeded"); })
.fail(function(){ alert("$.get failed!"); });
$.get( "test.php" )
.done(function() {
alert( "$.get succeeded" );
})
.fail(function() {
alert( "$.get failed!" );
});
]]></code>
</example>
<category slug="deferred-object"/>
<category slug="version/1.5"/>
</entry>
</entry>
19 entries/deferred.pipe.xml
View file
@@ -41,9 +41,9 @@
<desc>Filter resolve value:</desc>
<code><![CDATA[
var defer = $.Deferred(),
filtered = defer.pipe(function( value ) {
return value * 2;
});
filtered = defer.pipe(function( value ) {
return value * 2;
});
defer.resolve( 5 );
filtered.done(function( value ) {
@@ -55,9 +55,9 @@ filtered.done(function( value ) {
<desc>Filter reject value:</desc>
<code><![CDATA[
var defer = $.Deferred(),
filtered = defer.pipe( null, function( value ) {
return value * 3;
});
filtered = defer.pipe( null, function( value ) {
return value * 3;
});
defer.reject( 6 );
filtered.fail(function( value ) {
@@ -69,14 +69,13 @@ filtered.fail(function( value ) {
<desc>Chain tasks:</desc>
<code><![CDATA[
var request = $.ajax( url, { dataType: "json" } ),
chained = request.pipe(function( data ) {
return $.ajax( url2, { data: { user: data.userId } } );
});
chained = request.pipe(function( data ) {
return $.ajax( url2, { data: { user: data.userId } } );
});
chained.done(function( data ) {
// data retrieved from url2 as provided by the first request
});
]]></code>
</example>
<category slug="deferred-object"/>
74 entries/deferred.promise.xml
View file
@@ -17,42 +17,42 @@
<example>
<desc>Create a Deferred and set two timer-based functions to either resolve or reject the Deferred after a random interval. Whichever one fires first "wins" and will call one of the callbacks. The second timeout has no effect since the Deferred is already complete (in a resolved or rejected state) from the first timeout action. Also set a timer-based progress notification function, and call a progress handler that adds "working..." to the document body.</desc>
<code><![CDATA[
function asyncEvent(){
var dfd = new jQuery.Deferred();
function asyncEvent() {
var dfd = new jQuery.Deferred();
// Resolve after a random interval
setTimeout(function(){
dfd.resolve("hurray");
}, Math.floor(400+Math.random()*2000));
// Resolve after a random interval
setTimeout(function() {
dfd.resolve( "hurray" );
}, Math.floor( 400 + Math.random() * 2000 ) );
// Reject after a random interval
setTimeout(function(){
dfd.reject("sorry");
}, Math.floor(400+Math.random()*2000));
// Reject after a random interval
setTimeout(function() {
dfd.reject( "sorry" );
}, Math.floor( 400 + Math.random() * 2000 ) );
// Show a "working..." message every half-second
setTimeout(function working(){
if ( dfd.state() === "pending" ) {
dfd.notify("working... ");
setTimeout(working, 500);
}
}, 1);
// Show a "working..." message every half-second
setTimeout(function working() {
if ( dfd.state() === "pending" ) {
dfd.notify( "working... " );
setTimeout( working, 500 );
}
}, 1 );
// Return the Promise so caller can't change the Deferred
return dfd.promise();
// Return the Promise so caller can't change the Deferred
return dfd.promise();
}
// Attach a done, fail, and progress handler for the asyncEvent
$.when( asyncEvent() ).then(
function(status){
alert( status+', things are going well' );
},
function(status){
alert( status+', you fail this time' );
},
function(status){
$("body").append(status);
}
function( status ) {
alert( status + ", things are going well" );
},
function( status ) {
alert( status + ", you fail this time" );
},
function( status ) {
$( "body" ).append( status );
}
);
]]></code>
</example>
@@ -61,12 +61,12 @@ $.when( asyncEvent() ).then(
<code><![CDATA[
// Existing object
var obj = {
hello: function( name ) {
alert( "Hello " + name );
}
},
// Create a Deferred
defer = $.Deferred();
hello: function( name ) {
alert( "Hello " + name );
}
},
// Create a Deferred
defer = $.Deferred();
// Set object as a promise
defer.promise( obj );
@@ -76,10 +76,10 @@ defer.resolve( "John" );
// Use the object as a Promise
obj.done(function( name ) {
obj.hello( name ); // will alert "Hello John"
}).hello( "Karl" ); // will alert "Hello Karl"
obj.hello( name ); // Will alert "Hello John"
}).hello( "Karl" ); // Will alert "Hello Karl"
]]></code>
</example>
<category slug="deferred-object"/>
<category slug="version/1.5"/>
</entry>
</entry>
2 entries/deferred.state.xml
View file
@@ -16,4 +16,4 @@
</longdesc>
<category slug="deferred-object"/>
<category slug="version/1.7"/>
</entry>
</entry>
30 entries/deferred.then.xml
View file
@@ -69,9 +69,12 @@
<example>
<desc>Since the <a href="/jQuery.get"><code>jQuery.get</code></a> method returns a jqXHR object, which is derived from a Deferred object, we can attach handlers using the <code>.then</code> method.</desc>
<code><![CDATA[
$.get("test.php").then(
function(){ alert("$.get succeeded"); },
function(){ alert("$.get failed!"); }
$.get( "test.php" ).then(
function() {
alert( "$.get succeeded" );
}, function() {
alert( "$.get failed!" );
}
);
]]></code>
</example>
@@ -83,11 +86,10 @@ $.get("test.php").then(
]]></html>
<code><![CDATA[
var filterResolve = function() {
var defer = $.Deferred(),
filtered = defer.then(function( value ) {
return value * 2;
});
filtered = defer.then(function( value ) {
return value * 2;
});
defer.resolve( 5 );
filtered.done(function( value ) {
@@ -97,15 +99,14 @@ var filterResolve = function() {
$( "button" ).on( "click", filterResolve );
]]></code>

</example>
<example>
<desc>Filter reject value:</desc>
<code><![CDATA[
var defer = $.Deferred(),
filtered = defer.then( null, function( value ) {
return value * 3;
});
filtered = defer.then( null, function( value ) {
return value * 3;
});
defer.reject( 6 );
filtered.fail(function( value ) {
@@ -117,14 +118,13 @@ filtered.fail(function( value ) {
<desc>Chain tasks:</desc>
<code><![CDATA[
var request = $.ajax( url, { dataType: "json" } ),
chained = request.then(function( data ) {
return $.ajax( url2, { data: { user: data.userId } } );
});
chained = request.then(function( data ) {
return $.ajax( url2, { data: { user: data.userId } } );
});
chained.done(function( data ) {
// data retrieved from url2 as provided by the first request
});
]]></code>
</example>
<category slug="deferred-object"/>
35 entries/delay.xml
View file
@@ -15,7 +15,9 @@
<p>Added to jQuery in version 1.4, the <code>.delay()</code> method allows us to delay the execution of functions that follow it in the queue. It can be used with the standard effects queue or with a custom queue. Only subsequent events in a queue are delayed; for example this will <em>not</em> delay the no-arguments forms of <code>.show()</code> or <code>.hide()</code> which do not use the effects queue.</p>
<p>Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings <code>'fast'</code> and <code>'slow'</code> can be supplied to indicate durations of 200 and 600 milliseconds, respectively.</p>
<p>Using the standard effects queue, we can, for example, set an 800-millisecond delay between the <code>.slideUp()</code> and <code>.fadeIn()</code> of <code>&lt;div id="foo"&gt;</code>:</p>
<pre><code>$('#foo').slideUp(300).delay(800).fadeIn(400);</code></pre>
<pre><code>
$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
</code></pre>
<p>When this statement is executed, the element slides up for 300 milliseconds and then pauses for 800 milliseconds before fading in for 400 milliseconds.</p>
<div class="warning">
<p>
@@ -26,20 +28,33 @@
<example>
<desc>Animate the hiding and showing of two divs, delaying the first before showing it.</desc>
<css><![CDATA[
div { position: absolute; width: 60px; height: 60px; float: left; }
.first { background-color: #3f3; left: 0;}
.second { background-color: #33f; left: 80px;}
div {
position: absolute;
width: 60px;
height: 60px;
float: left;
}
.first {
background-color: #3f3;
left: 0;
}
.second {
background-color: #33f;
left: 80px;
}
]]></css>
<code><![CDATA[
$("button").click(function() {
$("div.first").slideUp(300).delay(800).fadeIn(400);
$("div.second").slideUp(300).fadeIn(400);
});]]></code>
$( "button" ).click(function() {
$( "div.first" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
$( "div.second" ).slideUp( 300 ).fadeIn( 400 );
});
]]></code>
<html><![CDATA[
<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>]]></html>
<div class="second"></div>
]]></html>
</example>
<category slug="effects/custom-effects"/>
<category slug="version/1.4"/>
</entry>
</entry>
113 entries/delegate.xml
View file
@@ -42,77 +42,106 @@
<p>As of jQuery 1.7, <code>.delegate()</code> has been superseded by the <a href="http://api.jquery.com/on">.on()</a> method. For earlier versions, however, it remains the most effective means to use event delegation. More information on event binding and delegation is in the <a href="http://api.jquery.com/on">.on()</a> method. In general, these are the equivalent templates for the two methods:</p>
<pre><code>
// jQuery 1.4.3+
$(elements).delegate( selector, events, data, handler );
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$(elements).on( events, selector, data, handler );
</code></pre>
$( elements ).on( events, selector, data, handler );
</code></pre>
<p>For example, the following <code>.delegate()</code> code:</p>
<pre><code>$("table").delegate("td", "click", function() {
$(this).toggleClass("chosen");
});</code></pre>
<pre><code>
$( "table" ).delegate( "td", "click", function() {
$( this ).toggleClass( "chosen" );
});
</code></pre>
<p>is equivalent to the following code written using <code>.on()</code>:</p>
<pre><code>$("table").on("click", "td", function() {
$(this).toggleClass("chosen");
});</code></pre>
<pre><code>
$( "table" ).on( "click", "td", function() {
$( this ).toggleClass( "chosen" );
});
</code></pre>
<p>To remove events attached with <code>delegate()</code>, see the <a href="http://api.jquery.com/undelegate">.undelegate()</a> method.</p>
<p>Passing and handling event data works the same way as it does for <code>.on()</code>.</p>
</longdesc>
<note id="propagation-for-live-or-delegate" type="additional"/>
<example>
<desc>Click a paragraph to add another. Note that .delegate() attaches a click event handler to all paragraphs - even new ones.</desc>
<code><![CDATA[
$("body").delegate("p", "click", function(){
$(this).after("<p>Another paragraph!</p>");
});
$( "body" ).delegate( "p", "click", function() {
$( this ).after( "<p>Another paragraph!</p>" );
});
]]></code>
<css><![CDATA[
p { background:yellow; font-weight:bold; cursor:pointer;
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
]]></css>
<html><![CDATA[<p>Click me!</p>
p {
background: yellow;
font-weight: bold;
cursor: pointer;
padding: 5px;
}
p.over {
background: #ccc;
}
span {
color: red;
}
]]></css>
<html><![CDATA[
<p>Click me!</p>
<span></span>]]></html>
<span></span>
]]></html>
</example>
<example>
<desc>To display each paragraph's text in an alert box whenever it is clicked:</desc>
<code><![CDATA[$("body").delegate("p", "click", function(){
alert( $(this).text() );
});]]></code>
<code><![CDATA[
$( "body" ).delegate( "p", "click", function() {
alert( $( this ).text() );
});
]]></code>
</example>
<example>
<desc>To cancel a default action and prevent it from bubbling up, return false:</desc>
<code><![CDATA[$("body").delegate("a", "click", function() { return false; })]]></code>
<code><![CDATA[
$( "body" ).delegate( "a", "click", function() {
return false;
});
]]></code>
</example>
<example>
<desc>To cancel only the default action by using the preventDefault method.</desc>
<code><![CDATA[$("body").delegate("a", "click", function(event){
<code><![CDATA[
$( "body" ).delegate( "a", "click", function( event ) {
event.preventDefault();
});]]></code>
});
]]></code>
</example>
<example>
<desc>Can bind custom events too.</desc>
<code><![CDATA[
$("body").delegate("p", "myCustomEvent", function(e, myName, myValue){
$(this).text("Hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent");
});
$( "body" ).delegate( "p", "myCustomEvent", function( e, myName, myValue ) {
$( this ).text( "Hi there!" );
$( "span" )
.stop()
.css( "opacity", 1 )
.text( "myName = " + myName )
.fadeIn( 30 )
.fadeOut( 1000 );
});
$( "button" ).click(function() {
$( "p" ).trigger( "myCustomEvent" );
});
]]></code>
<css><![CDATA[
p { color:red; }
span { color:blue; }
]]></css>
<html><![CDATA[<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>]]></html>
p {
color: red;
}
span {
color: blue;
}
]]></css>
<html><![CDATA[
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
]]></html>
</example>
<category slug="events/event-handler-attachment"/>
<category slug="version/1.4.2"/>
40 entries/dequeue.xml
View file
@@ -14,27 +14,37 @@
<example>
<desc>Use dequeue to end a custom queue function which allows the queue to keep going.</desc>
<code><![CDATA[
$("button").click(function () {
$("div").animate({left:'+=200px'}, 2000);
$("div").animate({top:'0px'}, 600);
$("div").queue(function () {
$(this).toggleClass("red");
$(this).dequeue();
});
$("div").animate({left:'10px', top:'30px'}, 700);
$( "button" ).click(function() {
$( "div" )
.animate({ left:"+=200px" }, 2000 )
.animate({ top:"0px" }, 600 )
.queue(function() {
$( this ).toggleClass( "red" ).dequeue();
})
.animate({ left:"10px", top:"30px" }, 700 );
});
]]></code>
<css><![CDATA[
div { margin:3px; width:50px; position:absolute;
height:50px; left:10px; top:30px;
background-color:yellow; }
div.red { background-color:red; }
div {
margin: 3px;
width: 50px;
position: absolute;
height: 50px;
left: 10px;
top: 30px;
background-color: yellow;
}
div.red {
background-color: red;
}
]]></css>
<html><![CDATA[<button>Start</button>
<div></div>]]></html>
<html><![CDATA[
<button>Start</button>
<div></div>
]]></html>
</example>
<category slug="effects/custom-effects"/>
<category slug="data"/>
<category slug="utilities"/>
<category slug="version/1.2"/>
</entry>
</entry>
32 entries/descendant-selector.xml
View file
@@ -22,22 +22,30 @@ $( "form input" ).css( "border", "2px dotted blue" );
$( "form fieldset input" ).css( "backgroundColor", "yellow" );
]]></code>
<css><![CDATA[
body { font-size: 14px; }
form { border: 2px green solid; padding: 2px;
margin: 0; background: #efe; }
div { color: red; }
fieldset { margin: 1px; padding: 3px; }
]]></css>
<html><![CDATA[<form>
form {
border: 2px green solid;
padding: 2px;
margin: 0;
background: #efe;
}
div {
color: red;
}
fieldset {
margin: 1px;
padding: 3px;
}
]]></css>
<html><![CDATA[
<form>
<div>Form is surrounded by the green border.</div>
<label>Child of form:</label>
<input name="name">
<label for="name">Child of form:</label>
<input name="name" id="name">
<fieldset>
<label>Grandchild of form, child of fieldset:</label>
<input name="newsletter">
<label for="newsletter">Grandchild of form, child of fieldset:</label>
<input name="newsletter" id="newsletter">
</fieldset>
</form>
Sibling to form: <input name="none">
47 entries/detach.xml
View file
@@ -14,24 +14,35 @@
<example>
<desc>Detach all paragraphs from the DOM</desc>
<code><![CDATA[
$("p").click(function(){
$(this).toggleClass("off");
});
var p;
$("button").click(function(){
if ( p ) {
p.appendTo("body");
p = null;
} else {
p = $("p").detach();
}
});]]></code>
<css><![CDATA[p { background:yellow; margin:6px 0; } p.off { background: black; }]]></css>
<html><![CDATA[<p>Hello</p>
how are
<p>you?</p>
<button>Attach/detach paragraphs</button>]]></html>
$( "p" ).click(function() {
$( this ).toggleClass( "off" );
});
var p;
$( "button" ).click(function() {
if ( p ) {
p.appendTo( "body" );
p = null;
} else {
p = $( "p" ).detach();
}
});
]]></code>
<css><![CDATA[
p {
background: yellow;
margin: 6px 0;
}
p.off {
background: black;
}
]]></css>
<html><![CDATA[
<p>Hello</p>
how are
<p>you?</p>
<button>Attach/detach paragraphs</button>
]]></html>
</example>
<category slug="manipulation/dom-removal"/>
<category slug="version/1.4"/>
</entry>
</entry>
21 entries/die.xml
View file
@@ -29,21 +29,29 @@
</longdesc>
<example>
<desc>To unbind all live events from all paragraphs, write:</desc>
<code><![CDATA[$("p").die()]]></code>
<code><![CDATA[
$( "p" ).die();
]]></code>
</example>
<example>
<desc>To unbind all live click events from all paragraphs, write:</desc>
<code><![CDATA[$("p").die( "click" )]]></code>
<code><![CDATA[
$( "p" ).die( "click" );
]]></code>
</example>
<example>
<desc>To unbind just one previously bound handler, pass the function in as the second argument:</desc>
<code><![CDATA[var foo = function () {
// code to handle some kind of event
<code><![CDATA[
var foo = function() {
// Code to handle some kind of event
};
$("p").live("click", foo); // ... now foo will be called when paragraphs are clicked ...
// Now foo will be called when paragraphs are clicked
$( "p" ).live( "click", foo );
$("p").die("click", foo); // ... foo will no longer be called.]]></code>
// Now foo will no longer be called
$( "p" ).die( "click", foo );
]]></code>
</example>
<category slug="events/event-handler-attachment"/>
<category slug="version/1.3"/>
@@ -52,4 +60,3 @@ $("p").die("click", foo); // ... foo will no longer be called.]]></code>
<category slug="deprecated/deprecated-1.7"/>
<category slug="removed"/>
</entry>

15 entries/disabled-selector.xml
View file
@@ -16,12 +16,15 @@
</longdesc>
<example>
<desc>Finds all input elements that are disabled.</desc>
<code><![CDATA[$("input:disabled").val("this is it");]]></code>
<html><![CDATA[<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>]]></html>
<code><![CDATA[
$( "input:disabled" ).val( "this is it" );
]]></code>
<html><![CDATA[
<form>
<input name="email" disabled="disabled">
<input name="id">
</form>
]]></html>
</example>
<category slug="selectors/form-selectors"/>
<category slug="version/1.0"/>
16 entries2html.xsl
View file
@@ -6,22 +6,24 @@
<xsl:variable name="version-category-links" select="true()"/>

<xsl:template name="example-code">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;<xsl:if test="css/text()">
&lt;style&gt;<xsl:copy-of select="css/text()" />&lt;/style&gt;</xsl:if>
&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;<xsl:value-of select="//entry/@name"/> demo&lt;/title&gt;<xsl:if test="css">
&lt;style&gt;<xsl:value-of select="css/text()"/> &lt;/style&gt;</xsl:if>
&lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;<xsl:if test="code/@location='head'">
&lt;script&gt;
<xsl:copy-of select="code/text()" />
<xsl:copy-of select="code/text()"/>
&lt;/script&gt;
</xsl:if>
&lt;/head&gt;
&lt;body&gt;
<xsl:copy-of select="html/text()" />
<xsl:copy-of select="html/text()"/>
<xsl:choose>
<xsl:when test="code/@location='head'"></xsl:when>
<xsl:otherwise>
&lt;script&gt;<xsl:copy-of select="code/text()" />&lt;/script&gt;</xsl:otherwise>
&lt;script&gt;<xsl:copy-of select="code/text()"/>&lt;/script&gt;</xsl:otherwise>
</xsl:choose>

&lt;/body&gt;