mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-26 10:40:44 +00:00
added a jQuery api viewer demo.
NOTE: content is a modified version of the downloadable HTML from http://jqapi.com
This commit is contained in:
scottjehl
parent
0e0cb0a5ee
commit
c7fae44a5c
241 changed files with 22003 additions and 0 deletions
166
experiments/api-viewer/docs/add/index.html
Normal file
166
experiments/api-viewer/docs/add/index.html
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><title>test</title><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.add()</h1>
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="add1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.add( selector )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Add elements to the set of matched elements.</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="add-selector">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.add( selector )</h4>
|
||||
<p class="arguement"><strong>selector</strong>A string containing a selector expression to match additional elements against.</p>
|
||||
</li>
|
||||
<li class="signature" id="add-elements">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.add( elements )</h4>
|
||||
<p class="arguement"><strong>elements</strong>one or more elements to add to the set of matched elements.</p>
|
||||
</li>
|
||||
<li class="signature" id="add-html">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.add( html )</h4>
|
||||
<p class="arguement"><strong>html</strong>An HTML fragment to add to the set of matched elements.</p>
|
||||
</li>
|
||||
<li class="signature" id="add-selector-context">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.add( selector, context )</h4>
|
||||
<p class="arguement"><strong>selector</strong>A string containing a selector expression to match additional elements against.</p>
|
||||
<p class="arguement"><strong>context</strong>Add some elements rooted against the specified context.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="longdesc">
|
||||
<p>Given a jQuery object that represents a set of DOM elements, the <code>.add()</code> method constructs a new jQuery object from the union of those elements and the ones passed into the method. The argument to <code>.add()</code> can be pretty much anything that <code>$()</code> accepts, including a jQuery selector expression, references to DOM elements, or an HTML snippet.</p>
|
||||
<p>Consider a page with a simple list and a paragraph following it:</p>
|
||||
<pre><ul>
|
||||
<li>list item 1</li>
|
||||
<li>list item 2</li>
|
||||
<li>list item 3</li>
|
||||
</ul>
|
||||
<p>a paragraph</p></pre>
|
||||
<p>We can select the list items and then the paragraph by using either a selector or a reference to the DOM element itself as the <code>.add()</code> method's argument:</p>
|
||||
<pre>$('li').add('p').css('background-color', 'red');</pre>
|
||||
<p>Or:</p>
|
||||
<pre>$('li').add(document.getElementsByTagName('p')[0])
|
||||
.css('background-color', 'red');</pre>
|
||||
<p>The result of this call is a red background behind all four elements.
|
||||
Using an HTML snippet as the <code>.add()</code> method's argument (as in the third version), we can create additional elements on the fly and add those elements to the matched set of elements. Let's say, for example, that we want to alter the background of the list items along with a newly created paragraph:</p>
|
||||
<pre>$('li').add('<p id="new">new paragraph</p>')
|
||||
.css('background-color', 'red');</pre>
|
||||
<p>Although the new paragraph has been created and its background color changed, it still does not appear on the page. To place it on the page, we could add one of the insertion methods to the chain.</p>
|
||||
<p>As of jQuery 1.4 the results from .add() will always be returned in document order (rather than a simple concatenation).</p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Finds all divs and makes a border. Then adds all paragraphs to the jQuery object to set their backgrounds yellow.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div { width:60px; height:60px; margin:10px; float:left; }
|
||||
p { clear:left; font-weight:bold; font-size:16px;
|
||||
color:blue; margin:0 10px; padding:2px; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
||||
<p>Added this... (notice no border)</p>
|
||||
<script>
|
||||
|
||||
$("div").css("border", "2px solid red")
|
||||
.add("p")
|
||||
.css("background", "yellow");
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">Adds more elements, matched by the given expression, to the set of matched elements.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Hello</p><span>Hello Again</span>
|
||||
<script>$("p").add("span").css("background", "yellow");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-2">
|
||||
<h4>Example: <span class="desc">Adds more elements, created on the fly, to the set of matched elements.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Hello</p>
|
||||
<script>$("p").clone().add("<span>Again</span>").appendTo(document.body);</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-3">
|
||||
<h4>Example: <span class="desc">Adds one or more Elements to the set of matched elements.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Hello</p><span id="a">Hello Again</span>
|
||||
<script>$("p").add(document.getElementById("a")).css("background", "yellow");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-4">
|
||||
<h4>Example: <span class="desc">Demonstrates how to add (or push) elements to an existing collection</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Hello</p><span id="a">Hello Again</span>
|
||||
<script>var collection = $("p");
|
||||
// capture the new collection
|
||||
collection = collection.add(document.getElementById("a"));
|
||||
collection.css("background", "yellow");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
95
experiments/api-viewer/docs/addClass/index.html
Normal file
95
experiments/api-viewer/docs/addClass/index.html
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.addClass()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="addClass1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.addClass( className )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Adds the specified class(es) to each of the set of matched elements.</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="addClass-className">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.addClass( className )</h4>
|
||||
<p class="arguement"><strong>className</strong>One or more class names to be added to the class attribute of each matched element.</p>
|
||||
</li>
|
||||
<li class="signature" id="addClass-functionindex, class">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.addClass( function(index, class) )</h4>
|
||||
<p class="arguement"><strong>function(index, class)</strong>A function returning one or more space-separated class names to be added. Receives the index position of the element in the set and the old class value as arguments.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="longdesc">
|
||||
<p>It's important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.</p>
|
||||
<p>More than one class may be added at a time, separated by a space, to the set of matched elements, like so:</p>
|
||||
<pre>$('p').addClass('myClass yourClass');</pre>
|
||||
<p>This method is often used with <code>.removeClass()</code> to switch elements' classes from one to another, like so:</p>
|
||||
<pre>$('p').removeClass('myClass noClass').addClass('yourClass');</pre>
|
||||
<p>Here, the <code>myClass</code> and <code>noClass</code> classes are removed from all paragraphs, while <code>yourClass</code> is added.</p>
|
||||
<p>As of jQuery 1.4, the <code>.addClass()</code> method allows us to set the class name by passing in a function.</p>
|
||||
<pre>$('ul li:last').addClass(function() {
|
||||
return 'item-' + $(this).index();
|
||||
});</pre>
|
||||
<p>Given an unordered list with five <code><li></code> elements, this example adds the class "item-4" to the last <code><li></code>.</p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Adds the class 'selected' to the matched elements.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
|
||||
p { margin: 8px; font-size:16px; }
|
||||
.selected { color:blue; }
|
||||
.highlight { background:yellow; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Hello</p>
|
||||
<p>and</p>
|
||||
<p>Goodbye</p>
|
||||
<script>$("p:last").addClass("selected");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">Adds the classes 'selected' and 'highlight' to the matched elements.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
|
||||
p { margin: 8px; font-size:16px; }
|
||||
.selected { color:red; }
|
||||
.highlight { background:yellow; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Hello</p>
|
||||
<p>and</p>
|
||||
<p>Goodbye</p>
|
||||
<script>$("p:last").addClass("selected highlight");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
130
experiments/api-viewer/docs/after/index.html
Normal file
130
experiments/api-viewer/docs/after/index.html
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.after()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="after1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.after( content )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Insert content, specified by the parameter, after each element in the set of matched elements.</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="after-content">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.after( content )</h4>
|
||||
<p class="arguement"><strong>content</strong>An element, HTML string, or jQuery object to insert after each element in the set of matched elements.</p>
|
||||
</li>
|
||||
<li class="signature" id="after-functionindex">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.after( function(index) )</h4>
|
||||
<p class="arguement"><strong>function(index)</strong>A function that returns an HTML string to insert after each element in the set of matched elements.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="longdesc">
|
||||
<p>The <code>.after()</code> and <code><a href="/insertAfter">.insertAfter()</a></code> methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With<code> .after()</code>, the selector expression preceding the method is the container after which the content is inserted. With <code>.insertAfter()</code>, on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted after the target container.</p>
|
||||
<p>Consider the following HTML:</p>
|
||||
<pre><div class="container">
|
||||
<h2>Greetings</h2>
|
||||
<div class="inner">Hello</div>
|
||||
<div class="inner">Goodbye</div>
|
||||
</div></pre>
|
||||
<p>We can create content and insert it after several elements at once:</p>
|
||||
<pre>$('.inner').after('<p>Test</p>');</pre>
|
||||
<p>Each inner <code><div></code> element gets this new content:</p>
|
||||
<pre><div class="container">
|
||||
<h2>Greetings</h2>
|
||||
<div class="inner">Hello</div>
|
||||
<p>Test</p>
|
||||
<div class="inner">Goodbye</div>
|
||||
<p>Test</p>
|
||||
</div></pre>
|
||||
<p>We can also select an element on the page and insert it after another:</p>
|
||||
<pre>$('.container').after($('h2'));</pre>
|
||||
<p>If an element selected this way is inserted elsewhere, it will be moved after the target (not cloned):</p>
|
||||
<pre><div class="container">
|
||||
<div class="inner">Hello</div>
|
||||
<div class="inner">Goodbye</div>
|
||||
</div>
|
||||
<h2>Greetings</h2></pre>
|
||||
<p>If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.</p>
|
||||
<p>As of jQuery 1.4, <code>.before()</code> and <code>.after()</code> will also work on disconnected DOM nodes. For example, given the following code:</p>
|
||||
<pre>$('<div/>').after('<p></p>');</pre>
|
||||
<p>The result is a jQuery set containing a div and a paragraph, in that order. We can further manipulate that set, even before inserting it in the document.</p>
|
||||
<pre>$('<div/>').after('<p></p>').addClass('foo')
|
||||
.filter('p').attr('id', 'bar').html('hello')
|
||||
.end()
|
||||
.appendTo('body');</pre>
|
||||
<p>This results in the following elements inserted just before the closing <code></body></code> tag:</p>
|
||||
<pre>
|
||||
<div class="foo"></div>
|
||||
<p class="foo" id="bar">hello</p>
|
||||
</pre>
|
||||
<p>As of jQuery 1.4, <code>.after()</code> allows us to pass a function that returns the elements to insert.</p>
|
||||
<pre>$('p').after(function() {
|
||||
return '<div>' + this.className + '</div>';
|
||||
});</pre>
|
||||
<p>This inserts a <code><div></code> after each paragraph, containing the class name(s) of each paragraph in turn.</p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Inserts some HTML after all paragraphs.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>p { background:yellow; }</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>I would like to say: </p>
|
||||
<script>$("p").after("<b>Hello</b>");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">Inserts a DOM element after all paragraphs.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>p { background:yellow; }</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>I would like to say: </p>
|
||||
<script>$("p").after( document.createTextNode("Hello") );</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-2">
|
||||
<h4>Example: <span class="desc">Inserts a jQuery object (similar to an Array of DOM Elements) after all paragraphs.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>p { background:yellow; }</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<b>Hello</b><p>I would like to say: </p>
|
||||
<script>$("p").after( $("b") );</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
56
experiments/api-viewer/docs/ajaxComplete/index.html
Normal file
56
experiments/api-viewer/docs/ajaxComplete/index.html
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.ajaxComplete()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="ajaxComplete1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.ajaxComplete( handler(event, XMLHttpRequest, ajaxOptions) )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Register a handler to be called when Ajax requests complete. This is an Ajax Event.</p>
|
||||
<ul class="signatures"><li class="signature" id="ajaxComplete-handlerevent, XMLHttpRequest, ajaxOptions">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.ajaxComplete( handler(event, XMLHttpRequest, ajaxOptions) )</h4>
|
||||
<p class="arguement"><strong>handler(event, XMLHttpRequest, ajaxOptions)</strong>The function to be invoked.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<p>Whenever an Ajax request completes, jQuery triggers the <code>ajaxComplete</code> event. Any and all handlers that have been registered with the <code>.ajaxComplete()</code> method are executed at this time.</p>
|
||||
<p>To observe this method in action, we can set up a basic Ajax load request:</p>
|
||||
<pre><div class="trigger">Trigger</div>
|
||||
<div class="result"></div>
|
||||
<div class="log"></div>
|
||||
</pre>
|
||||
<p>We can attach our event handler to any element:</p>
|
||||
<pre>$('.log').ajaxComplete(function() {
|
||||
$(this).text('Triggered ajaxComplete handler.');
|
||||
});
|
||||
</pre>
|
||||
<p>Now, we can make an Ajax request using any jQuery method:</p>
|
||||
<pre>$('.trigger').click(function() {
|
||||
$('.result').load('ajax/test.html');
|
||||
});</pre>
|
||||
<p>When the user clicks the button and the Ajax request completes, the log message is displayed.</p>
|
||||
<p><strong>Note:</strong> Because <code>.ajaxComplete()</code> is implemented as a method of jQuery object instances, we can use the <code>this</code> keyword as we do here to refer to the selected elements within the callback function.</p>
|
||||
<p>All <code>ajaxComplete</code> handlers are invoked, regardless of what Ajax request was completed. If we must differentiate between the requests, we can use the parameters passed to the handler. Each time an <code>ajaxComplete</code> handler is executed, it is passed the event object, the <code>XMLHttpRequest</code> object, and the settings object that was used in the creation of the request. For example, we can restrict our callback to only handling events dealing with a particular URL:</p>
|
||||
<pre>$('.log').ajaxComplete(function(e, xhr, settings) {
|
||||
if (settings.url == 'ajax/test.html') {
|
||||
$(this).text('Triggered ajaxComplete handler.');
|
||||
}
|
||||
});</pre>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Show a message when an Ajax request completes.</span></h4>
|
||||
<pre><code class="example">$("#msg").ajaxComplete(function(event,request, settings){
|
||||
$(this).append("<li>Request Complete.</li>");
|
||||
});</code></pre>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
54
experiments/api-viewer/docs/ajaxError/index.html
Normal file
54
experiments/api-viewer/docs/ajaxError/index.html
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.ajaxError()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="ajaxError1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.ajaxError( handler(event, XMLHttpRequest, ajaxOptions, thrownError) )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event.</p>
|
||||
<ul class="signatures"><li class="signature" id="ajaxError-handlerevent, XMLHttpRequest, ajaxOptions, thrownError">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.ajaxError( handler(event, XMLHttpRequest, ajaxOptions, thrownError) )</h4>
|
||||
<p class="arguement"><strong>handler(event, XMLHttpRequest, ajaxOptions, thrownError)</strong>The function to be invoked.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<p>Whenever an Ajax request completes with an error, jQuery triggers the <code>ajaxError</code> event. Any and all handlers that have been registered with the <code>.ajaxError()</code> method are executed at this time.</p>
|
||||
<p>To observe this method in action, we can set up a basic Ajax load request:</p>
|
||||
<pre><div class="trigger">Trigger</div>
|
||||
<div class="result"></div>
|
||||
<div class="log"></div></pre>
|
||||
<p>We can attach our event handler to any element:</p>
|
||||
<pre>$('.log').ajaxError(function() {
|
||||
$(this).text('Triggered ajaxError handler.');
|
||||
});</pre>
|
||||
<p>Now, we can make an Ajax request using any jQuery method:</p>
|
||||
<pre>$('.trigger').click(function() {
|
||||
$('.result').load('ajax/missing.html');
|
||||
});</pre>
|
||||
<p>When the user clicks the button and the Ajax request fails, because the requested file is missing, the log message is displayed.</p>
|
||||
<p><strong>Note:</strong> Because <code>.ajaxError()</code> is implemented as a method of jQuery object instances, we can use the <code>this</code> keyword as we do here to refer to the selected elements within the callback function.</p>
|
||||
<p>All <code>ajaxError</code> handlers are invoked, regardless of what Ajax request was completed. If we must differentiate between the requests, we can use the parameters passed to the handler. Each time an <code>ajaxError</code> handler is executed, it is passed the event object, the <code>XMLHttpRequest</code> object, and the settings object that was used in the creation of the request. If the request failed because JavaScript raised an exception, the exception object is passed to the handler as a fourth parameter. For example, we can restrict our callback to only handling events dealing with a particular URL:</p>
|
||||
<pre>$('.log').ajaxError(function(e, xhr, settings, exception) {
|
||||
if (settings.url == 'ajax/missing.html') {
|
||||
$(this).text('Triggered ajaxError handler.');
|
||||
}
|
||||
});</pre>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Show a message when an Ajax request fails.</span></h4>
|
||||
<pre><code class="example">$("#msg").ajaxError(function(event, request, settings){
|
||||
$(this).append("<li>Error requesting page " + settings.url + "</li>");
|
||||
});</code></pre>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
54
experiments/api-viewer/docs/ajaxSend/index.html
Normal file
54
experiments/api-viewer/docs/ajaxSend/index.html
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.ajaxSend()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="ajaxSend1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.ajaxSend( handler(event, XMLHttpRequest, ajaxOptions) )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong></p>
|
||||
<ul class="signatures"><li class="signature" id="ajaxSend-handlerevent, XMLHttpRequest, ajaxOptions">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.ajaxSend( handler(event, XMLHttpRequest, ajaxOptions) )</h4>
|
||||
<p class="arguement"><strong>handler(event, XMLHttpRequest, ajaxOptions)</strong>The function to be invoked.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<p>Whenever an Ajax request is about to be sent, jQuery triggers the <code>ajaxSend</code> event. Any and all handlers that have been registered with the <code>.ajaxSend()</code> method are executed at this time.</p>
|
||||
<p>To observe this method in action, we can set up a basic Ajax load request:</p>
|
||||
<pre><div class="trigger">Trigger</div>
|
||||
<div class="result"></div>
|
||||
<div class="log"></div></pre>
|
||||
<p>We can attach our event handler to any element:</p>
|
||||
<pre>$('.log').ajaxSend(function() {
|
||||
$(this).text('Triggered ajaxSend handler.');
|
||||
});</pre>
|
||||
<p>Now, we can make an Ajax request using any jQuery method:</p>
|
||||
<pre>$('.trigger').click(function() {
|
||||
$('.result').load('ajax/test.html');
|
||||
});</pre>
|
||||
<p>When the user clicks the button and the Ajax request is about to begin, the log message is displayed.</p>
|
||||
<p><strong>Note:</strong> Because <code>.ajaxSend()</code> is implemented as a method of jQuery instances, we can use the <code>this</code> keyword as we do here to refer to the selected elements within the callback function.</p>
|
||||
<p>All <code>ajaxSend</code> handlers are invoked, regardless of what Ajax request is to be sent. If we must differentiate between the requests, we can use the parameters passed to the handler. Each time an <code>ajaxSend</code> handler is executed, it is passed the event object, the <code>XMLHttpRequest</code> object, and the <a href="http://api.jquery.com/jQuery.ajax/">settings object</a> that was used in the creation of the Ajax request. For example, we can restrict our callback to only handling events dealing with a particular URL:</p>
|
||||
<pre>$('.log').ajaxSend(function(e, xhr, settings) {
|
||||
if (settings.url == 'ajax/test.html') {
|
||||
$(this).text('Triggered ajaxSend handler.');
|
||||
}
|
||||
});</pre>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Show a message before an Ajax request is sent.</span></h4>
|
||||
<pre><code class="example">$("#msg").ajaxSend(function(evt, request, settings){
|
||||
$(this).append("<li>Starting request at " + settings.url + "</li>");
|
||||
});</code></pre>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
48
experiments/api-viewer/docs/ajaxStart/index.html
Normal file
48
experiments/api-viewer/docs/ajaxStart/index.html
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.ajaxStart()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="ajaxStart1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.ajaxStart( handler() )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Register a handler to be called when the first Ajax request begins. This is an Ajax Event.</p>
|
||||
<ul class="signatures"><li class="signature" id="ajaxStart-handler">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.ajaxStart( handler() )</h4>
|
||||
<p class="arguement"><strong>handler()</strong>The function to be invoked.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<p>Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the <code>ajaxStart</code> event. Any and all handlers that have been registered with the <code>.ajaxStart()</code> method are executed at this time.</p>
|
||||
<p>To observe this method in action, we can set up a basic Ajax load request:</p>
|
||||
<pre><div class="trigger">Trigger</div>
|
||||
<div class="result"></div>
|
||||
<div class="log"></div></pre>
|
||||
<p>We can attach our event handler to any element:</p>
|
||||
<pre>$('.log').ajaxStart(function() {
|
||||
$(this).text('Triggered ajaxStart handler.');
|
||||
});</pre>
|
||||
<p>Now, we can make an Ajax request using any jQuery method:</p>
|
||||
<pre>$('.trigger').click(function() {
|
||||
$('.result').load('ajax/test.html');
|
||||
});</pre>
|
||||
<p>When the user clicks the button and the Ajax request is sent, the log message is displayed.</p>
|
||||
<p><strong>Note:</strong> Because <code>.ajaxStart()</code> is implemented as a method of jQuery object instances, we can use the <code>this</code> keyword as we do here to refer to the selected elements within the callback function.</p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Show a loading message whenever an Ajax request starts (and none is already active).</span></h4>
|
||||
<pre><code class="example">$("#loading").ajaxStart(function(){
|
||||
$(this).show();
|
||||
});</code></pre>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
48
experiments/api-viewer/docs/ajaxStop/index.html
Normal file
48
experiments/api-viewer/docs/ajaxStop/index.html
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.ajaxStop()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="ajaxStop1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.ajaxStop( handler() )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong></p>
|
||||
<ul class="signatures"><li class="signature" id="ajaxStop-handler">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.ajaxStop( handler() )</h4>
|
||||
<p class="arguement"><strong>handler()</strong>The function to be invoked.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<p>Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests. If none remain, jQuery triggers the <code>ajaxStop</code> event. Any and all handlers that have been registered with the <code>.ajaxStop()</code> method are executed at this time.</p>
|
||||
<p>To observe this method in action, we can set up a basic Ajax load request:</p>
|
||||
<pre><div class="trigger">Trigger</div>
|
||||
<div class="result"></div>
|
||||
<div class="log"></div></pre>
|
||||
<p>We can attach our event handler to any element:</p>
|
||||
<pre>$('.log').ajaxStop(function() {
|
||||
$(this).text('Triggered ajaxStop handler.');
|
||||
});</pre>
|
||||
<p>Now, we can make an Ajax request using any jQuery method:</p>
|
||||
<pre>$('.trigger').click(function() {
|
||||
$('.result').load('ajax/test.html');
|
||||
});</pre>
|
||||
<p>When the user clicks the button and the Ajax request completes, the log message is displayed.</p>
|
||||
<p>Because <code>.ajaxStop()</code> is implemented as a method of jQuery object instances, we can use the <code>this</code> keyword as we do here to refer to the selected elements within the callback function.</p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Hide a loading message after all the Ajax requests have stopped.</span></h4>
|
||||
<pre><code class="example">$("#loading").ajaxStop(function(){
|
||||
$(this).hide();
|
||||
});</code></pre>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
54
experiments/api-viewer/docs/ajaxSuccess/index.html
Normal file
54
experiments/api-viewer/docs/ajaxSuccess/index.html
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.ajaxSuccess()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="ajaxSuccess1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.ajaxSuccess( handler(event, XMLHttpRequest, ajaxOptions) )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong></p>
|
||||
<ul class="signatures"><li class="signature" id="ajaxSuccess-handlerevent, XMLHttpRequest, ajaxOptions">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.ajaxSuccess( handler(event, XMLHttpRequest, ajaxOptions) )</h4>
|
||||
<p class="arguement"><strong>handler(event, XMLHttpRequest, ajaxOptions)</strong>The function to be invoked.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<p>Whenever an Ajax request completes successfully, jQuery triggers the <code>ajaxSuccess</code> event. Any and all handlers that have been registered with the <code>.ajaxSuccess()</code> method are executed at this time.</p>
|
||||
<p>To observe this method in action, we can set up a basic Ajax load request:</p>
|
||||
<pre><div class="trigger">Trigger</div>
|
||||
<div class="result"></div>
|
||||
<div class="log"></div></pre>
|
||||
<p>We can attach our event handler to any element:</p>
|
||||
<pre>$('.log').ajaxSuccess(function() {
|
||||
$(this).text('Triggered ajaxSuccess handler.');
|
||||
});</pre>
|
||||
<p>Now, we can make an Ajax request using any jQuery method:</p>
|
||||
<pre>$('.trigger').click(function() {
|
||||
$('.result').load('ajax/test.html');
|
||||
});</pre>
|
||||
<p>When the user clicks the button and the Ajax request completes successfully, the log message is displayed.</p>
|
||||
<p><strong>Note:</strong> Because <code>.ajaxSuccess()</code> is implemented as a method of jQuery object instances, we can use the <code>this</code> keyword as we do here to refer to the selected elements within the callback function.</p>
|
||||
<p>All <code>ajaxSuccess</code> handlers are invoked, regardless of what Ajax request was completed. If we must differentiate between the requests, we can use the parameters passed to the handler. Each time an <code>ajaxSuccess</code> handler is executed, it is passed the event object, the <code>XMLHttpRequest</code> object, and the settings object that was used in the creation of the request. For example, we can restrict our callback to only handling events dealing with a particular URL:</p>
|
||||
<pre>$('.log').ajaxSuccess(function(e, xhr, settings) {
|
||||
if (settings.url == 'ajax/test.html') {
|
||||
$(this).text('Triggered ajaxSuccess handler.');
|
||||
}
|
||||
});</pre>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Show a message when an Ajax request completes successfully.</span></h4>
|
||||
<pre><code class="example">$("#msg").ajaxSuccess(function(evt, request, settings){
|
||||
$(this).append("<li>Successful Request!</li>");
|
||||
});</code></pre>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
94
experiments/api-viewer/docs/all-selector/index.html
Normal file
94
experiments/api-viewer/docs/all-selector/index.html
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>All Selector (“*”)</h1>
|
||||
<div class="entry-meta">Categories:
|
||||
<span class="category"><a href="http://api.jquery.com/category/selectors/" title="View all posts in Selectors">Selectors</a> > <a href="http://api.jquery.com/category/selectors/basic-css-selectors/" title="View all posts in Basic">Basic</a></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="entry selector" id="all1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">all</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery('*')</h4>
|
||||
<p class="desc"><strong>Description: </strong>Selects all elements.</p>
|
||||
<div class="longdesc"><p>Caution: The all, or universal, selector is extremely slow, except when used by itself.</p></div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Finds every element (including head, body, etc) in the document.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
h3 { margin: 0; }
|
||||
div,span,p {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
float:left;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>DIV</div>
|
||||
|
||||
<span>SPAN</span>
|
||||
<p>P <button>Button</button></p>
|
||||
<script>var elementCount = $("*").css("border","3px solid red").length;
|
||||
$("body").prepend("<h3>" + elementCount + " elements found</h3>");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">A common way to select all elements is to find within document.body so elements like head, script, etc are left out.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
h3 { margin: 0; }
|
||||
div,span,p {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
float:left;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
#test {
|
||||
width: auto; height: auto; background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test">
|
||||
<div>DIV</div>
|
||||
<span>SPAN</span>
|
||||
<p>P <button>Button</button></p>
|
||||
</div>
|
||||
<script>
|
||||
var elementCount = $("#test").find("*").css("border","3px solid red").length;
|
||||
$("body").prepend("<h3>" + elementCount + " elements found</h3>");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
67
experiments/api-viewer/docs/andSelf/index.html
Normal file
67
experiments/api-viewer/docs/andSelf/index.html
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.andSelf()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="andSelf1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.andSelf()</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Add the previous set of elements on the stack to the current set.</p>
|
||||
<ul class="signatures"><li class="signature" id="andSelf"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.2/">1.2</a></span>.andSelf()</h4></li></ul>
|
||||
<div class="longdesc">
|
||||
<p>As described in the discussion for <code>.end()</code> above, jQuery objects maintain an internal stack that keeps track of changes to the matched set of elements. When one of the DOM traversal methods is called, the new set of elements is pushed onto the stack. If the previous set of elements is desired as well, <code>.andSelf()</code> can help.</p>
|
||||
<p>Consider a page with a simple list on it:</p>
|
||||
<pre>
|
||||
<ul>
|
||||
<li>list item 1</li>
|
||||
<li>list item 2</li>
|
||||
<li class="third-item">list item 3</li>
|
||||
<li>list item 4</li>
|
||||
<li>list item 5</li>
|
||||
</ul>
|
||||
</pre>
|
||||
<p>If we begin at the third item, we can find the elements which come after it:</p>
|
||||
<pre>$('li.third-item').nextAll().andSelf()
|
||||
.css('background-color', 'red');
|
||||
</pre>
|
||||
<p>The result of this call is a red background behind items 3, 4 and 5. First, the initial selector locates item 3, initializing the stack with the set containing just this item. The call to <code>.nextAll()</code> then pushes the set of items 4 and 5 onto the stack. Finally, the <code>.andSelf()</code> invocation merges these two sets together, creating a jQuery object that points to all three items.</p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">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.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
p, div { margin:5px; padding:5px; }
|
||||
.border { border: 2px solid red; }
|
||||
.background { background:yellow; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>First Paragraph</p>
|
||||
<p>Second Paragraph</p>
|
||||
</div>
|
||||
<script>
|
||||
$("div").find("p").andSelf().addClass("border");
|
||||
$("div").find("p").addClass("background");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
309
experiments/api-viewer/docs/animate/index.html
Normal file
309
experiments/api-viewer/docs/animate/index.html
Normal file
|
|
@ -0,0 +1,309 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.animate()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="animate1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.animate( properties, [ duration ], [ easing ], [ callback ] )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Perform a custom animation of a set of CSS properties.</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="animate-properties-duration-easing-callback">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.animate( properties, [ duration ], [ easing ], [ callback ] )</h4>
|
||||
<p class="arguement"><strong>properties</strong>A map of CSS properties that the animation will move toward.</p>
|
||||
<p class="arguement"><strong>duration</strong>A string or number determining how long the animation will run.</p>
|
||||
<p class="arguement"><strong>easing</strong>A string indicating which easing function to use for the transition.</p>
|
||||
<p class="arguement"><strong>callback</strong>A function to call once the animation is complete.</p>
|
||||
</li>
|
||||
<li class="signature" id="animate-properties-options">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.animate( properties, options )</h4>
|
||||
<p class="arguement"><strong>properties</strong>A map of CSS properties that the animation will move toward.</p>
|
||||
<p class="arguement"><strong>options</strong>A map of additional options to pass to the method. Supported keys:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>duration</code>: A string or number determining how long the animation will run.</li>
|
||||
<li>
|
||||
<code>easing</code>: A string indicating which easing function to use for the transition.</li>
|
||||
<li>
|
||||
<code>complete</code>: A function to call once the animation is complete.</li>
|
||||
<li>
|
||||
<code>step</code>: A function to be called after each step of the animation.</li>
|
||||
<li>
|
||||
<code>queue</code>: A Boolean indicating whether to place the animation in the effects queue. If <code>false</code>, the animation will begin immediately.</li>
|
||||
<li>
|
||||
<code>specialEasing</code>: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="longdesc">
|
||||
<p>The <code>.animate()</code> method allows us to create animation effects on any numeric CSS property. The only required parameter is a map of CSS properties. This map is similar to the one that can be sent to the <code>.css()</code> method, except that the range of properties is more restrictive.</p>
|
||||
<p>All animated properties should be numeric (except as noted below); properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, <code>width</code>, <code>height</code>, or <code>left</code> can be animated but <code>background-color</code> cannot be.) Property values are treated as a number of pixels unless otherwise specified. The units <code>em</code> and <code>%</code> can be specified where applicable.</p>
|
||||
<p>In addition to numeric values, each property can take the strings <code>'show'</code>, <code>'hide'</code>, and <code>'toggle'</code>. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element.</p>
|
||||
<p>Animated properties can also be relative. If a value is supplied with a leading <code>+=</code> or <code>-=</code> sequence of characters, then the target value is computed by adding or subtracting the given number from the current value of the property.</p>
|
||||
<h4 id="duration">Duration</h4>
|
||||
<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 <code>200</code> and <code>600</code> milliseconds, respectively.</p>
|
||||
<h4 id="callback">Callback Function</h4>
|
||||
<p>If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but <code>this</code> is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.</p>
|
||||
<p>We can animate any element, such as a simple image:</p>
|
||||
<pre><div id="clickme">
|
||||
Click here
|
||||
</div>
|
||||
<img id="book" src="book.png" alt="" width="100" height="123"
|
||||
style="position: relative; left: 10px;" /></pre>
|
||||
<p>We can animate the opacity, left offset, and height of the image simultaneously:</p>
|
||||
<pre>$('#clickme').click(function() {
|
||||
$('#book').animate({
|
||||
opacity: 0.25,
|
||||
left: '+=50',
|
||||
height: 'toggle'
|
||||
}, 5000, function() {
|
||||
// Animation complete.
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
<p class="image">
|
||||
<img src="http://api.jquery.com/images/animate-1.jpg" alt=""></p>
|
||||
<p>Note that we have specified <code>toggle</code> as the target value of the <code>height</code> property. Since the image was visible before, the animation shrinks the height to 0 to hide it. A second click then reverses this transition:
|
||||
</p>
|
||||
<p class="image">
|
||||
<img src="http://api.jquery.com/images/animate-2.jpg" alt=""></p>
|
||||
<p>The <code>opacity</code> of the image is already at its target value, so this property is not animated by the second click. Since we specified the target value for <code>left</code> as a relative value, the image moves even farther to the right during this second animation.</p>
|
||||
<p>The <code>position</code> attribute of the element must not be <code>static</code> if we wish to animate the <code>left</code> property as we do in the example.</p>
|
||||
<blockquote><p>The <a href="http://jqueryui.com">jQuery UI</a> project extends the <code>.animate()</code> method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.</p></blockquote>
|
||||
<h4 id="easing">Easing</h4>
|
||||
<p>The remaining parameter of <code>.animate()</code> is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="http://jqueryui.com/">jQuery UI suite</a>.</p>
|
||||
<h4 id="per-property-easing">Per-property Easing</h4>
|
||||
<p>As of jQuery version 1.4, we can set per-property easing functions within a single <code>.animate()</code> call. In the first version of <code>.animate()</code>, each property can take an array as its value: The first member of the array is the CSS property and the second member is an easing function. If a per-property easing function is not defined for a particular property, it uses the value of the <code>.animate()</code> method's optional easing argument. If the easing argument is not defined, the default <code>swing</code> function is used.</p>
|
||||
<p>We can, for example, simultaneously animate the width and height with the <code>swing</code> easing function and the opacity with the <code>linear</code> easing function:</p>
|
||||
<pre>$('#clickme').click(function() {
|
||||
$('#book').animate({
|
||||
width: ['toggle', 'swing'],
|
||||
height: ['toggle', 'swing'],
|
||||
opacity: 'toggle'
|
||||
}, 5000, 'linear', function() {
|
||||
$(this).after('<div>Animation complete.</div>');
|
||||
});
|
||||
});</pre>
|
||||
<p>In the second version of <code>.animate()</code>, the options map can include the <code>specialEasing</code> property, which is itself a map of CSS properties and their corresponding easing functions. We can simultaneously animate the width using the <code>linear</code> easing function and the height using the <code>easeOutBounce</code> easing function.</p>
|
||||
<pre>$('#clickme').click(function() {
|
||||
$('#book').animate({
|
||||
width: 'toggle',
|
||||
height: 'toggle'
|
||||
}, {
|
||||
duration: 5000,
|
||||
specialEasing: {
|
||||
width: 'linear',
|
||||
height: 'easeOutBounce'
|
||||
},
|
||||
complete: function() {
|
||||
$(this).after('<div>Animation complete.</div>');
|
||||
}
|
||||
});
|
||||
});</pre>
|
||||
<p>As previously noted, a plug-in is required for the <code>easeOutBounce</code> function.</p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Click the button to animate the div with a number of different properties.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div {
|
||||
background-color:#bca;
|
||||
width:100px;
|
||||
border:1px solid green;
|
||||
}
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<button id="go">&raquo; Run</button>
|
||||
|
||||
<div id="block">Hello!</div>
|
||||
<script>
|
||||
|
||||
// Using multiple unit types within one animation.
|
||||
$("#go").click(function(){
|
||||
$("#block").animate({
|
||||
width: "70%",
|
||||
opacity: 0.4,
|
||||
marginLeft: "0.6in",
|
||||
fontSize: "3em",
|
||||
borderWidth: "10px"
|
||||
}, 1500 );
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">Shows a div animate with a relative move. Click several times on the buttons to see the relative animations queued up.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div {
|
||||
position:absolute;
|
||||
background-color:#abc;
|
||||
left:50px;
|
||||
width:90px;
|
||||
height:90px;
|
||||
margin:5px;
|
||||
}
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<button id="left">&laquo;</button> <button id="right">&raquo;</button>
|
||||
<div class="block"></div>
|
||||
|
||||
<script>
|
||||
$("#right").click(function(){
|
||||
$(".block").animate({"left": "+=50px"}, "slow");
|
||||
});
|
||||
|
||||
$("#left").click(function(){
|
||||
$(".block").animate({"left": "-=50px"}, "slow");
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-2">
|
||||
<h4>Example: <span class="desc">Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("p").animate({
|
||||
"height": "toggle", "opacity": "toggle"
|
||||
|
||||
}, "slow");</code></pre>
|
||||
</div>
|
||||
<div id="example-3">
|
||||
<h4>Example: <span class="desc">Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds.</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("p").animate({
|
||||
"left": "50", "opacity": 1
|
||||
}, 500);
|
||||
</code></pre>
|
||||
</div>
|
||||
<div id="example-4">
|
||||
<h4>Example: <span class="desc">An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function. Note, this code will do nothing unless the paragraph element is hidden.</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("p").animate({
|
||||
"opacity": "show"
|
||||
|
||||
}, "slow", "easein");</code></pre>
|
||||
</div>
|
||||
<div id="example-5">
|
||||
<h4>Example: <span class="desc">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.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>div {
|
||||
background-color:#bca;
|
||||
width:200px;
|
||||
height:1.1em;
|
||||
text-align:center;
|
||||
border:2px solid green;
|
||||
margin:3px;
|
||||
font-size:14px;
|
||||
}
|
||||
button {
|
||||
font-size:14px;
|
||||
}
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<button id="go1">&raquo; Animate Block1</button>
|
||||
<button id="go2">&raquo; Animate Block2</button>
|
||||
<button id="go3">&raquo; Animate Both</button>
|
||||
|
||||
<button id="go4">&raquo; Reset</button>
|
||||
<div id="block1">Block1</div>
|
||||
<div id="block2">Block2</div>
|
||||
<script>
|
||||
|
||||
$("#go1").click(function(){
|
||||
$("#block1").animate( { width:"90%" }, { queue:false, duration:3000 } )
|
||||
.animate( { fontSize:"24px" }, 1500 )
|
||||
.animate( { borderRightWidth:"15px" }, 1500);
|
||||
});
|
||||
|
||||
$("#go2").click(function(){
|
||||
$("#block2").animate( { width:"90%"}, 1000 )
|
||||
.animate( { fontSize:"24px" } , 1000 )
|
||||
.animate( { borderLeftWidth:"15px" }, 1000);
|
||||
});
|
||||
|
||||
$("#go3").click(function(){
|
||||
$("#go1").add("#go2").click();
|
||||
});
|
||||
|
||||
$("#go4").click(function(){
|
||||
$("div").css({width:"", fontSize:"", borderWidth:""});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-6">
|
||||
<h4>Example: <span class="desc">Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("p").animate({
|
||||
"height": "toggle", "opacity": "toggle"
|
||||
|
||||
}, { duration: "slow" });</code></pre>
|
||||
</div>
|
||||
<div id="example-7">
|
||||
<h4>Example: <span class="desc">Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds. It also will do it outside the queue, meaning it will automatically start without waiting for its turn.</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("p").animate({
|
||||
left: "50px", opacity: 1
|
||||
}, { duration: 500, queue: false });</code></pre>
|
||||
</div>
|
||||
<div id="example-8">
|
||||
<h4>Example: <span class="desc">An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function.</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("p").animate({
|
||||
"opacity": "show"
|
||||
|
||||
}, { "duration": "slow", "easing": "easein" });</code></pre>
|
||||
</div>
|
||||
<div id="example-9">
|
||||
<h4>Example: <span class="desc">An example of using a callback function. The first argument is an array of CSS properties, the second specifies that the animation should take 1000 milliseconds to complete, the third states the easing type, and the fourth argument is an anonymous callback function. </span>
|
||||
</h4>
|
||||
<pre><code class="example">$("p").animate({
|
||||
height:200, width:400, opacity: .5
|
||||
}, 1000, "linear", function(){alert("all done");} );
|
||||
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
53
experiments/api-viewer/docs/animated-selector/index.html
Normal file
53
experiments/api-viewer/docs/animated-selector/index.html
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>:animated Selector</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="animated1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">animated</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.2/">1.2</a></span>jQuery(':animated')</h4>
|
||||
<p class="desc"><strong>Description: </strong>Select all elements that are in the progress of an animation at the time the selector is run.</p>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Change the color of any div that is animated.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:5px; float:left; }
|
||||
div.colored { background:green; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<button id="run">Run</button>
|
||||
|
||||
<div></div>
|
||||
<div id="mover"></div>
|
||||
<div></div>
|
||||
<script>
|
||||
|
||||
$("#run").click(function(){
|
||||
$("div:animated").toggleClass("colored");
|
||||
});
|
||||
function animateIt() {
|
||||
$("#mover").slideToggle("slow", animateIt);
|
||||
}
|
||||
animateIt();
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
122
experiments/api-viewer/docs/append/index.html
Normal file
122
experiments/api-viewer/docs/append/index.html
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.append()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="append1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.append( content )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Insert content, specified by the parameter, to the end of each element in the set of matched elements.</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="append-content">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.append( content )</h4>
|
||||
<p class="arguement"><strong>content</strong>An element, HTML string, or jQuery object to insert at the end of each element in the set of matched elements.</p>
|
||||
</li>
|
||||
<li class="signature" id="append-functionindex, html">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.append( function(index, html) )</h4>
|
||||
<p class="arguement"><strong>function(index, html)</strong>A function that returns an HTML string to insert at the end of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="longdesc">
|
||||
<p>The <code>.append()</code> and <code><a href="/appendTo">.appendTo()</a></code> methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With<code> .append()</code>, the selector expression preceding the method is the container into which the content is inserted. With <code>.appendTo()</code>, on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.</p>
|
||||
<p>Consider the following HTML:</p>
|
||||
<pre><h2>Greetings</h2>
|
||||
<div class="container">
|
||||
<div class="inner">Hello</div>
|
||||
<div class="inner">Goodbye</div>
|
||||
</div>
|
||||
</pre>
|
||||
<p>We can create content and insert it into several elements at once:</p>
|
||||
<pre>$('.inner').append('<p>Test</p>');
|
||||
</pre>
|
||||
<p>Each inner <code><div></code> element gets this new content:</p>
|
||||
<pre><h2>Greetings</h2>
|
||||
<div class="container">
|
||||
<div class="inner">
|
||||
Hello
|
||||
<p>Test</p>
|
||||
</div>
|
||||
<div class="inner">
|
||||
Goodbye
|
||||
<p>Test</p>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
<p>We can also select an element on the page and insert it into another:</p>
|
||||
<pre>$('.container').append($('h2'));
|
||||
</pre>
|
||||
<p>If an element selected this way is inserted elsewhere, it will be moved into the target (not cloned):</p>
|
||||
<pre><div class="container">
|
||||
<div class="inner">Hello</div>
|
||||
<div class="inner">Goodbye</div>
|
||||
<h2>Greetings</h2>
|
||||
</div>
|
||||
</pre>
|
||||
<p>If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.</p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Appends some HTML to all paragraphs.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>p { background:yellow; }</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>I would like to say: </p>
|
||||
<script>$("p").append("<strong>Hello</strong>");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">Appends an Element to all paragraphs.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>p { background:yellow; }</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>I would like to say: </p>
|
||||
<script>$("p").append(document.createTextNode("Hello"));</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-2">
|
||||
<h4>Example: <span class="desc">Appends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>p { background:yellow; }</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<strong>Hello world!!!</strong><p>I would like to say: </p>
|
||||
<script>$("p").append( $("strong") );</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
80
experiments/api-viewer/docs/appendTo/index.html
Normal file
80
experiments/api-viewer/docs/appendTo/index.html
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.appendTo()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="appendTo1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.appendTo( target )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Insert every element in the set of matched elements to the end of the target.</p>
|
||||
<ul class="signatures"><li class="signature" id="appendTo-target">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.appendTo( target )</h4>
|
||||
<p class="arguement"><strong>target</strong>A selector, element, HTML string, or jQuery object; the matched set of elements will be inserted at the end of the element(s) specified by this parameter.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<p>The <code><a href="/append">.append()</a></code> and <code>.appendTo()</code> methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With<code> .append()</code>, the selector expression preceding the method is the container into which the content is inserted. With <code>.appendTo()</code>, on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.</p>
|
||||
<p>Consider the following HTML:</p>
|
||||
<pre><h2>Greetings</h2>
|
||||
<div class="container">
|
||||
<div class="inner">Hello</div>
|
||||
<div class="inner">Goodbye</div>
|
||||
</div>
|
||||
</pre>
|
||||
<p>We can create content and insert it into several elements at once:</p>
|
||||
<pre>$('<p>Test</p>').appendTo('.inner');
|
||||
</pre>
|
||||
<p>Each inner <code><div></code> element gets this new content:</p>
|
||||
<pre><h2>Greetings</h2>
|
||||
<div class="container">
|
||||
<div class="inner">
|
||||
Hello
|
||||
<p>Test</p>
|
||||
</div>
|
||||
<div class="inner">
|
||||
Goodbye
|
||||
<p>Test</p>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
<p>We can also select an element on the page and insert it into another:</p>
|
||||
<pre>$('h2').appendTo($('.container'));
|
||||
</pre>
|
||||
<p>If an element selected this way is inserted elsewhere, it will be moved into the target (not cloned):</p>
|
||||
<pre><div class="container">
|
||||
<div class="inner">Hello</div>
|
||||
<div class="inner">Goodbye</div>
|
||||
<h2>Greetings</h2>
|
||||
</div>
|
||||
</pre>
|
||||
<p>If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.</p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Appends all spans to the element with the ID "foo"</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>#foo { background:yellow; }</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<span>I have nothing more to say... </span>
|
||||
|
||||
<div id="foo">FOO! </div>
|
||||
<script>$("span").appendTo("#foo"); // check append() examples</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
228
experiments/api-viewer/docs/attr/index.html
Normal file
228
experiments/api-viewer/docs/attr/index.html
Normal file
|
|
@ -0,0 +1,228 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.attr()</h1>
|
||||
|
||||
</div>
|
||||
|
||||
<fieldset class="toc">
|
||||
<legend>Contents:</legend>
|
||||
<ul class="toc-list">
|
||||
<li>
|
||||
<a href="#attr1">attr( attributeName ) </a><ul><li>.attr( attributeName )
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#attr2">attr( attributeName, value ) </a><ul>
|
||||
<li>.attr( attributeName, value )
|
||||
</li>
|
||||
<li>.attr( map )
|
||||
</li>
|
||||
<li>.attr( attributeName, function(index, attr) )
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
<div class="entry method" id="attr1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.attr( attributeName )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#String">String</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Get the value of an attribute for the first element in the set of matched elements.</p>
|
||||
<ul class="signatures"><li class="signature" id="attr-attributeName">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.attr( attributeName )</h4>
|
||||
<p class="arguement"><strong>attributeName</strong>The name of the attribute to get.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<p>It's important to note that the <code>.attr()</code> method gets the attribute value for only the <em>first</em> element in the matched set. To get the value for each element individually, we need to rely on a looping construct such as jQuery's <code>.each()</code> method.</p>
|
||||
<p>Using jQuery's <code>.attr()</code> method to get the value of an element's attribute has two main benefits:</p>
|
||||
<ol>
|
||||
<li>
|
||||
<strong>Convenience</strong>: It can be called directly on a jQuery object and chained to other jQuery methods.</li>
|
||||
<li>
|
||||
<strong>Cross-browser consistency</strong>: Some attributes have inconsistent naming from browser to browser. Furthermore, the values of some attributes are reported inconsistently across browsers, and even across versions of a single browser. The <code>.attr()</code> method reduces such inconsistencies. </li>
|
||||
</ol>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds the title attribute of the first <em> in the page.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>em { color:blue; font-weight;bold; }
|
||||
div { color:red; }</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Once there was a <em title="huge, gigantic">large</em> dinosaur...
|
||||
</p>
|
||||
|
||||
The title of the emphasis is:<div></div>
|
||||
<script>var title = $("em").attr("title");
|
||||
$("div").text(title);
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="attr2">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.attr( attributeName, value )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Set one or more attributes for the set of matched elements.</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="attr-attributeName-value">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.attr( attributeName, value )</h4>
|
||||
<p class="arguement"><strong>attributeName</strong>The name of the attribute to set.</p>
|
||||
<p class="arguement"><strong>value</strong>A value to set for the attribute.</p>
|
||||
</li>
|
||||
<li class="signature" id="attr-map">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.attr( map )</h4>
|
||||
<p class="arguement"><strong>map</strong>A map of attribute-value pairs to set.</p>
|
||||
</li>
|
||||
<li class="signature" id="attr-attributeName-functionindex, attr">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.1/">1.1</a></span>.attr( attributeName, function(index, attr) )</h4>
|
||||
<p class="arguement"><strong>attributeName</strong>The name of the attribute to set.</p>
|
||||
<p class="arguement"><strong>function(index, attr)</strong>A function returning the value to set. <code>this</code> is the current element. Receives the index position of the element in the set and the old attribute value as arguments.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="longdesc">
|
||||
<p>The <code>.attr()</code> method is a convenient and powerful way to set the value of attributes—especially when setting multiple attributes or using values returned by a function. Let's consider the following image:</p>
|
||||
<pre><img id="greatphoto" src="brush-seller.jpg" alt="brush seller" /></pre>
|
||||
<h4>Setting a simple attribute</h4>
|
||||
<p>We can change the <code>alt</code> attribute by simply passing the name of the attribute and its new value to the <code>.attr()</code> method:</p>
|
||||
<pre>$('#greatphoto').attr('alt', 'Beijing Brush Seller');</pre>
|
||||
<p>We can <em>add</em> an attribute the same way:</p>
|
||||
<pre>$('#greatphoto')
|
||||
.attr('title', 'Photo by Kelly Clark');</pre>
|
||||
<h4>Setting several attributes at once</h4>
|
||||
<p>To change the <code>alt</code> attribute and add the <code>title</code> attribute at the same time, we can pass both sets of names and values into the method at once using a map (JavaScript object literal). Each key-value pair in the map adds or modifies an attribute:</p>
|
||||
<pre>$('#greatphoto').attr({
|
||||
alt: 'Beijing Brush Seller',
|
||||
title: 'photo by Kelly Clark'
|
||||
});</pre>
|
||||
<p>When setting multiple attributes, the quotes around attribute names are optional.</p>
|
||||
<p><strong>WARNING</strong> When setting the 'class' attribute, you must always use quotes!</p>
|
||||
<h4>Computed attribute values</h4>
|
||||
<p>By using a function to set attributes, we can compute the value based on other properties of the element. For example, we could concatenate a new value with an existing value:</p>
|
||||
<pre>$('#greatphoto').attr('title', function() {
|
||||
return this.alt + ' - photo by Kelly Clark'
|
||||
});</pre>
|
||||
<p>This use of a function to compute attribute values can be particularly useful when we modify the attributes of multiple elements at once.</p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Set some attributes for all <img>s in the page.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
img { padding:10px; }
|
||||
div { color:red; font-size:24px; }</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<img />
|
||||
<img />
|
||||
<img />
|
||||
|
||||
<div><B>Attribute of Ajax</B></div>
|
||||
<script>$("img").attr({
|
||||
src: "/images/hat.gif",
|
||||
title: "jQuery",
|
||||
alt: "jQuery Logo"
|
||||
});
|
||||
$("div").text($("img").attr("alt"));</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">Disables buttons greater than the 1st button.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>button { margin:10px; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<button>0th Button</button>
|
||||
<button>1st Button</button>
|
||||
<button>2nd Button</button>
|
||||
<script>$("button:gt(1)").attr("disabled","disabled");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-2">
|
||||
<h4>Example: <span class="desc">Sets id for divs based on the position in the page.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div { color:blue; }
|
||||
span { color:red; }
|
||||
b { font-weight:bolder; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>Zero-th <span></span></div>
|
||||
<div>First <span></span></div>
|
||||
<div>Second <span></span></div>
|
||||
<script>$("div").attr("id", function (arr) {
|
||||
return "div-id" + arr;
|
||||
})
|
||||
.each(function () {
|
||||
$("span", this).html("(ID = '<b>" + this.id + "</b>')");
|
||||
});</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-3">
|
||||
<h4>Example: <span class="desc">Sets src attribute from title attribute on the image.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<img title="hat.gif"/>
|
||||
<script>$("img").attr("src", function() {
|
||||
return "/images/" + this.title;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>Attribute Contains Prefix Selector [name|=value]</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="attributeContainsPrefix1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">attributeContainsPrefix</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery('[attribute|=value]')</h4>
|
||||
<ul class="signatures"><li><dl class="arguments">
|
||||
<dt>attribute</dt>
|
||||
<dd>An attribute name.</dd>
|
||||
<dt>value</dt>
|
||||
<dd>An attribute value. Quotes are optional.</dd>
|
||||
</dl></li></ul>
|
||||
<p class="desc"><strong>Description: </strong>Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).</p>
|
||||
<div class="longdesc"><p>This selector was introduced into the CSS specification to handle language attributes.</p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds all links with an hreflang attribute that is english.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<a href="example.html" hreflang="en">Some text</a>
|
||||
|
||||
<a href="example.html" hreflang="en-UK">Some other text</a>
|
||||
|
||||
<script>$('a[hreflang|=en]').css('border','3px dotted green');</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>Attribute Contains Selector [name*=value]</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="attributeContains1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">attributeContains</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery('[attribute*=value]')</h4>
|
||||
<ul class="signatures"><li><dl class="arguments">
|
||||
<dt>attribute</dt>
|
||||
<dd>An attribute name.</dd>
|
||||
<dt>value</dt>
|
||||
<dd>An attribute value. Quotes are optional.</dd>
|
||||
</dl></li></ul>
|
||||
<p class="desc"><strong>Description: </strong>Selects elements that have the specified attribute with a value containing the a given substring.</p>
|
||||
<div class="longdesc"><p>This is the most generous of the jQuery attribute selectors that match against a value. It will select an element if the selector's string appears anywhere within the element's attribute value. Compare this selector with the Attribute Contains Word selector (e.g. [attr~=word]), which is more appropriate in many cases.</p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds all inputs with a name attribute that contains 'man' and sets the value with some text.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<input name="man-news" />
|
||||
|
||||
<input name="milkman" />
|
||||
<input name="letterman2" />
|
||||
<input name="newmilk" />
|
||||
<script>$("input[name*='man']").val("has man in it!");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>Attribute Contains Word Selector [name~=value]</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="attributeContainsWord1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">attributeContainsWord</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery('[attribute~=value]')</h4>
|
||||
<ul class="signatures"><li><dl class="arguments">
|
||||
<dt>attribute</dt>
|
||||
<dd>An attribute name.</dd>
|
||||
<dt>value</dt>
|
||||
<dd>An attribute value. Quotes are optional.</dd>
|
||||
</dl></li></ul>
|
||||
<p class="desc"><strong>Description: </strong>Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.</p>
|
||||
<div class="longdesc"><p>This selector matches the test string against each word in the attribute value, where a "word" is defined as a string delimited by whitespace. The selector matches if the test string is exactly equal to any of the words.</p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds all inputs with a name attribute that contains the word 'man' and sets the value with some text.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<input name="man-news" />
|
||||
|
||||
<input name="milk man" />
|
||||
<input name="letterman2" />
|
||||
<input name="newmilk" />
|
||||
<script>$("input[name~=man]").val("mr. man is in it!");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>Attribute Ends With Selector [name$=value]</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="attributeEndsWith1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">attributeEndsWith</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery('[attribute$=value]')</h4>
|
||||
<ul class="signatures"><li><dl class="arguments">
|
||||
<dt>attribute</dt>
|
||||
<dd>An attribute name.</dd>
|
||||
<dt>value</dt>
|
||||
<dd>An attribute value. Quotes are optional.</dd>
|
||||
</dl></li></ul>
|
||||
<p class="desc"><strong>Description: </strong>Selects elements that have the specified attribute with a value ending exactly with a given string.</p>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds all inputs with an attribute name that ends with 'letter' and puts text in them.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<input name="newsletter" />
|
||||
|
||||
<input name="milkman" />
|
||||
<input name="jobletter" />
|
||||
<script>$("input[name$='letter']").val("a letter");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>Attribute Equals Selector [name=value]</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="attributeEquals1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">attributeEquals</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery('[attribute=value]')</h4>
|
||||
<ul class="signatures"><li><dl class="arguments">
|
||||
<dt>attribute</dt>
|
||||
<dd>An attribute name.</dd>
|
||||
<dt>value</dt>
|
||||
<dd>An attribute value. Quotes are optional.</dd>
|
||||
</dl></li></ul>
|
||||
<p class="desc"><strong>Description: </strong>Selects elements that have the specified attribute with a value exactly equal to a certain value.</p>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds all inputs with name 'newsletter' and changes the text of the span next to it.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
|
||||
<input type="radio" name="newsletter" value="Hot Fuzz" />
|
||||
<span>name?</span>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="newsletters" value="Cold Fusion" />
|
||||
|
||||
<span>name?</span>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="accept" value="Evil Plans" />
|
||||
|
||||
<span>name?</span>
|
||||
</div>
|
||||
<script>$("input[name='newsletter']").next().text(" is newsletter");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>Attribute Not Equal Selector [name!=value]</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="attributeNotEqual1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">attributeNotEqual</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery('[attribute!=value]')</h4>
|
||||
<ul class="signatures"><li><dl class="arguments">
|
||||
<dt>attribute</dt>
|
||||
<dd>An attribute name.</dd>
|
||||
<dt>value</dt>
|
||||
<dd>An attribute value. Quotes are optional.</dd>
|
||||
</dl></li></ul>
|
||||
<p class="desc"><strong>Description: </strong>Select elements that either don't have the specified attribute, or do have the specified attribute but not with a certain value.</p>
|
||||
<div class="longdesc"><p>This selector is equivalent to <code>:not([attr=value])</code>.</p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds all inputs that don't have the name 'newsletter' and appends text to the span next to it.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
|
||||
<input type="radio" name="newsletter" value="Hot Fuzz" />
|
||||
<span>name is newsletter</span>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" value="Cold Fusion" />
|
||||
<span>no name</span>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="accept" value="Evil Plans" />
|
||||
|
||||
<span>name is accept</span>
|
||||
</div>
|
||||
<script>$("input[name!=newsletter]").next().append("<b>; not newsletter</b>");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>Attribute Starts With Selector [name^=value]</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="attributeStartsWith1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">attributeStartsWith</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery('[attribute^=value]')</h4>
|
||||
<ul class="signatures"><li><dl class="arguments">
|
||||
<dt>attribute</dt>
|
||||
<dd>An attribute name.</dd>
|
||||
<dt>value</dt>
|
||||
<dd>An attribute value. Quotes are optional.</dd>
|
||||
</dl></li></ul>
|
||||
<p class="desc"><strong>Description: </strong>Selects elements that have the specified attribute with a value beginning exactly with a given string.</p>
|
||||
<div class="longdesc"><p>This selector can be useful for identifying elements in pages produced by server-side frameworks that produce HTML with systematic element IDs. However it will be slower than using a class selector so leverage classes, if you can, to group like elements.</p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds all inputs with an attribute name that starts with 'news' and puts text in them.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<input name="newsletter" />
|
||||
|
||||
<input name="milkman" />
|
||||
<input name="newsboy" />
|
||||
<script>$("input[name^='news']").val("news here!");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
116
experiments/api-viewer/docs/before/index.html
Normal file
116
experiments/api-viewer/docs/before/index.html
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.before()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="before1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.before( content )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Insert content, specified by the parameter, before each element in the set of matched elements.</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="before-content">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.before( content )</h4>
|
||||
<p class="arguement"><strong>content</strong>An element, HTML string, or jQuery object to insert before each element in the set of matched elements.</p>
|
||||
</li>
|
||||
<li class="signature" id="before-function">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.before( function )</h4>
|
||||
<p class="arguement"><strong>function</strong>A function that returns an HTML string to insert before each element in the set of matched elements.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="longdesc">
|
||||
<p>The <code>.before()</code> and <code><a href="/insertBefore">.insertBefore()</a></code> methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With<code> .before()</code>, the selector expression preceding the method is the container before which the content is inserted. With <code>.insertBefore()</code>, on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted before the target container.</p>
|
||||
<p>Consider the following HTML:</p>
|
||||
<pre><div class="container">
|
||||
<h2>Greetings</h2>
|
||||
<div class="inner">Hello</div>
|
||||
<div class="inner">Goodbye</div>
|
||||
</div></pre>
|
||||
<p>We can create content and insert it before several elements at once:</p>
|
||||
<pre>$('.inner').before('<p>Test</p>');</pre>
|
||||
<p>Each inner <code><div></code> element gets this new content:</p>
|
||||
<pre><div class="container">
|
||||
<h2>Greetings</h2>
|
||||
<p>Test</p>
|
||||
<div class="inner">Hello</div>
|
||||
<p>Test</p>
|
||||
<div class="inner">Goodbye</div>
|
||||
</div></pre>
|
||||
<p>We can also select an element on the page and insert it before another:</p>
|
||||
<pre>$('.container').before($('h2'));</pre>
|
||||
<p>If an element selected this way is inserted elsewhere, it will be moved before the target (not cloned):</p>
|
||||
<pre><h2>Greetings</h2>
|
||||
<div class="container">
|
||||
<div class="inner">Hello</div>
|
||||
<div class="inner">Goodbye</div>
|
||||
</div></pre>
|
||||
<p>If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.</p>
|
||||
<p>In jQuery 1.4, <code>.before()</code> and <code>.after()</code> will also work on disconnected DOM nodes:</p>
|
||||
<pre>$("<div/>").before("<p></p>");</pre>
|
||||
<p>The result is a jQuery set that contains a paragraph and a div (in that order).</p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Inserts some HTML before all paragraphs.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>p { background:yellow; }</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p> is what I said...</p>
|
||||
<script>$("p").before("<b>Hello</b>");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">Inserts a DOM element before all paragraphs.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>p { background:yellow; }</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p> is what I said...</p>
|
||||
<script>$("p").before( document.createTextNode("Hello") );</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-2">
|
||||
<h4>Example: <span class="desc">Inserts a jQuery object (similar to an Array of DOM Elements) before all paragraphs.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>p { background:yellow; }</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p> is what I said...</p><b>Hello</b>
|
||||
<script>$("p").before( $("b") );</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
243
experiments/api-viewer/docs/bind/index.html
Normal file
243
experiments/api-viewer/docs/bind/index.html
Normal file
|
|
@ -0,0 +1,243 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.bind()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="bind1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.bind( eventType, [ eventData ], handler(eventObject) )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Attach a handler to an event for the elements.</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="bind-eventType-eventData-handlereventObject">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.bind( eventType, [ eventData ], handler(eventObject) )</h4>
|
||||
<p class="arguement"><strong>eventType</strong>A string containing one or more JavaScript event types, such as "click" or "submit," or custom event names.</p>
|
||||
<p class="arguement"><strong>eventData</strong>A map of data that will be passed to the event handler.</p>
|
||||
<p class="arguement"><strong>handler(eventObject)</strong>A function to execute each time the event is triggered.</p>
|
||||
</li>
|
||||
<li class="signature" id="bind-events">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.bind( events )</h4>
|
||||
<p class="arguement"><strong>events</strong>A map of one or more JavaScript event types and functions to execute for them.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="longdesc">
|
||||
<p>The <code>.bind()</code> method is the primary means of attaching behavior to a document. All JavaScript event types, such as <code>focus</code>, <code>mouseover</code>, and <code>resize</code>, are allowed for <code>eventType.</code></p>
|
||||
<p>The jQuery library provides shortcut methods for binding the standard event types, such as <code>.click()</code> for <code>.bind('click')</code>. A description of each can be found in the discussion of its shortcut method: <a href="/blur">blur</a>, <a href="/focus">focus</a>, <a href="/focusin">focusin</a>, <a href="/focusout">focusout</a>, <a href="/load">load</a>, <a href="/resize">resize</a>, <a href="/scroll">scroll</a>, <a href="/unload">unload</a>, <a href="/click">click</a>, <a href="/dblclick">dblclick</a>, <a href="/mousedown">mousedown</a>, <a href="/mouseup">mouseup</a>, <a href="/mousemove">mousemove</a>, <a href="/mouseover">mouseover</a>, <a href="/mouseout">mouseout</a>, <a href="/mouseenter">mouseenter</a>, <a href="/mouseleave">mouseleave</a>, <a href="/change">change</a>, <a href="/select">select</a>, <a href="/submit">submit</a>, <a href="/keydown">keydown</a>, <a href="/keypress">keypress</a>, <a href="/keyup">keyup</a>, <a href="/error">error</a></p>
|
||||
<p>Any string is legal for <code>eventType</code>; if the string is not the name of a native JavaScript event, then the handler is bound to a custom event. These events are never called by the browser, but may be triggered manually from other JavaScript code using <code>.trigger()</code> or <code>.triggerHandler()</code>.</p>
|
||||
<p>If the <code>eventType</code> string contains a period (<code>.</code>) character, then the event is namespaced. The period character separates the event from its namespace. For example, in the call <code>.bind('click.name', handler)</code>, the string <code>click</code> is the event type, and the string <code>name</code> is the namespace. Namespacing allows us to unbind or trigger some events of a type without affecting others. See the discussion of <code>.unbind()</code> for more information.</p>
|
||||
<p>When an event reaches an element, all handlers bound to that event type for the element are fired. If there are multiple handlers registered, they will always execute in the order in which they were bound. After all handlers have executed, the event continues along the normal event propagation path.</p>
|
||||
<p>A basic usage of <code>.bind()</code> is:</p>
|
||||
<pre>
|
||||
$('#foo').bind('click', function() {
|
||||
alert('User clicked on "foo."');
|
||||
});
|
||||
</pre>
|
||||
<p>This code will cause the element with an ID of <code>foo</code> to respond to the <code>click</code> event. When a user clicks inside this element thereafter, the alert will be shown.</p>
|
||||
<h4 id="multiple-events">Multiple Events</h4>
|
||||
<p>Multiple event types can be bound at once by including each one separated by a space:</p>
|
||||
<pre>
|
||||
$('#foo').bind('mouseenter mouseleave', function() {
|
||||
$(this).toggleClass('entered');
|
||||
});
|
||||
</pre>
|
||||
<p>The effect of this on <code><div id="foo"></code> (when it does not initially have the "entered" class) is to add the "entered" class when the mouse enters the <code><div></code> and remove the class when the mouse leaves. </p>
|
||||
<p>As of jQuery 1.4 we can bind multiple event handlers simultaneously by passing a map of event type/handler pairs:</p>
|
||||
<pre>
|
||||
$('#foo').bind({
|
||||
click: function() {
|
||||
// do something on click
|
||||
},
|
||||
mouseenter: function() {
|
||||
// do something on mouseenter
|
||||
}
|
||||
});
|
||||
</pre>
|
||||
<h4 id="event-handlers">Event Handlers</h4>
|
||||
<p>The <code>handler</code> parameter takes a callback function, as shown above. Within the handler, the keyword <code>this</code> refers to the DOM element to which the handler is bound. To make use of the element in jQuery, it can be passed to the normal <code>$()</code> function. For example:</p>
|
||||
<pre>$('#foo').bind('click', function() {
|
||||
alert($(this).text());
|
||||
});
|
||||
</pre>
|
||||
<p>After this code is executed, when the user clicks inside the element with an ID of <code>foo</code>, its text contents will be shown as an alert.
|
||||
</p>
|
||||
<p>As of jQuery 1.4.2 duplicate event handlers can be bound to an element instead of being discarded. For example:</p>
|
||||
<pre>function test(){ alert("Hello"); }
|
||||
$("button").click( test );
|
||||
$("button").click( test );</pre>
|
||||
<p>The above will generate two alerts when the button is clicked.</p>
|
||||
<h4 id="event-object"><a href="/category/events/event-object/">The Event object</a></h4>
|
||||
<p>The <code>handler</code> callback function can also take parameters. When the function is called, the JavaScript event object will be passed to the first parameter.</p>
|
||||
<p>The event object is often unnecessary and the parameter omitted, as sufficient context is usually available when the handler is bound to know exactly what needs to be done when the handler is triggered. However, at times it becomes necessary to gather more information about the user's environment at the time the event was initiated. <a href="/category/events/event-object/">View the full Event Object</a>.</p>
|
||||
<p>Returning <code>false</code> from a handler is equivalent to calling both <code>.preventDefault()</code> and <code>.stopPropagation()</code> on the event object.</p>
|
||||
<p>Using the event object in a handler looks like this:</p>
|
||||
<pre>$(document).ready(function() {
|
||||
$('#foo').bind('click', function(event) {
|
||||
alert('The mouse cursor is at ('
|
||||
+ event.pageX + ', ' + event.pageY + ')');
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
<p>Note the parameter added to the anonymous function. This code will cause a click on the element with ID <code>foo</code> to report the page coordinates of the mouse cursor at the time of the click.</p>
|
||||
<h4 id="passing-event-data">Passing Event Data</h4>
|
||||
<p>The optional <code>eventData</code> parameter is not commonly used. When provided, this argument allows us to pass additional information to the handler. One handy use of this parameter is to work around issues caused by closures. For example, suppose we have two event handlers that both refer to the same external variable:</p>
|
||||
<pre>var message = 'Spoon!';
|
||||
$('#foo').bind('click', function() {
|
||||
alert(message);
|
||||
});
|
||||
message = 'Not in the face!';
|
||||
$('#bar').bind('click', function() {
|
||||
alert(message);
|
||||
});
|
||||
</pre>
|
||||
<p>Because the handlers are closures that both have <code>message</code> in their environment, both will display the message <span class="output">Not in the face!</span> when triggered. The variable's value has changed. To sidestep this, we can pass the message in using <code>eventData</code>:
|
||||
</p>
|
||||
<pre>var message = 'Spoon!';
|
||||
$('#foo').bind('click', {msg: message}, function(event) {
|
||||
alert(event.data.msg);
|
||||
});
|
||||
message = 'Not in the face!';
|
||||
$('#bar').bind('click', {msg: message}, function(event) {
|
||||
alert(event.data.msg);
|
||||
});
|
||||
</pre>
|
||||
<p>This time the variable is not referred to directly within the handlers; instead, the variable is passed in <em>by value</em> through <code>eventData</code>, which fixes the value at the time the event is bound. The first handler will now display <span class="output">Spoon!</span> while the second will alert <span class="output">Not in the face!</span>
|
||||
</p>
|
||||
<blockquote>
|
||||
<p>Note that objects are passed to functions <em>by reference</em>, which further complicates this scenario.</p>
|
||||
</blockquote>
|
||||
<p>If <code>eventData</code> is present, it is the second argument to the <code>.bind()</code> method; if no additional data needs to be sent to the handler, then the callback is passed as the second and final argument.</p>
|
||||
<blockquote><p>See the <code>.trigger()</code> method reference for a way to pass data to a handler at the time the event happens rather than when the handler is bound.</p></blockquote>
|
||||
<p>As of jQuery 1.4 we can no longer attach data (and thus, events) to object, embed, or applet elements because critical errors occur when attaching data to Java applets.</p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Handle click and double-click for the paragraph. Note: the coordinates are window relative, so in this case relative to the demo iframe.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
p { background:yellow; font-weight:bold; cursor:pointer;
|
||||
padding:5px; }
|
||||
p.over { background: #ccc; }
|
||||
span { color:red; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Click or double click here.</p>
|
||||
<span></span>
|
||||
<script>
|
||||
$("p").bind("click", function(event){
|
||||
var str = "( " + event.pageX + ", " + event.pageY + " )";
|
||||
$("span").text("Click happened! " + str);
|
||||
});
|
||||
$("p").bind("dblclick", function(){
|
||||
$("span").text("Double-click happened in " + this.nodeName);
|
||||
});
|
||||
$("p").bind("mouseenter mouseleave", function(event){
|
||||
$(this).toggleClass("over");
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">To display each paragraph's text in an alert box whenever it is clicked:</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("p").bind("click", function(){
|
||||
alert( $(this).text() );
|
||||
});</code></pre>
|
||||
</div>
|
||||
<div id="example-2">
|
||||
<h4>Example: <span class="desc">You can pass some extra data before the event handler:</span>
|
||||
</h4>
|
||||
<pre><code class="example">function handler(event) {
|
||||
alert(event.data.foo);
|
||||
}
|
||||
$("p").bind("click", {foo: "bar"}, handler)</code></pre>
|
||||
</div>
|
||||
<div id="example-3">
|
||||
<h4>Example: <span class="desc">Cancel a default action and prevent it from bubbling up by returning false:</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("form").bind("submit", function() { return false; })</code></pre>
|
||||
</div>
|
||||
<div id="example-4">
|
||||
<h4>Example: <span class="desc">Cancel only the default action by using the .preventDefault() method.</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("form").bind("submit", function(event) {
|
||||
event.preventDefault();
|
||||
});</code></pre>
|
||||
</div>
|
||||
<div id="example-5">
|
||||
<h4>Example: <span class="desc">Stop an event from bubbling without preventing the default action by using the .stopPropagation() method.</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("form").bind("submit", function(event) {
|
||||
event.stopPropagation();
|
||||
});</code></pre>
|
||||
</div>
|
||||
<div id="example-6">
|
||||
<h4>Example: <span class="desc">Bind custom events.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
p { color:red; }
|
||||
span { color:blue; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Has an attached custom event.</p>
|
||||
<button>Trigger custom event</button>
|
||||
<span style="display:none;"></span>
|
||||
<script>
|
||||
|
||||
$("p").bind("myCustomEvent", function(e, myName, myValue){
|
||||
$(this).text(myName + ", hi there!");
|
||||
$("span").stop().css("opacity", 1)
|
||||
.text("myName = " + myName)
|
||||
.fadeIn(30).fadeOut(1000);
|
||||
});
|
||||
$("button").click(function () {
|
||||
$("p").trigger("myCustomEvent", [ "John" ]);
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-7">
|
||||
<h4>Example: <span class="desc">Bind multiple events simultaneously.</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("div.test").bind({
|
||||
click: function(){
|
||||
$(this).addClass("active");
|
||||
},
|
||||
mouseenter: function(){
|
||||
$(this).addClass("inside");
|
||||
},
|
||||
mouseleave: function(){
|
||||
$(this).removeClass("inside");
|
||||
}
|
||||
});</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
57
experiments/api-viewer/docs/blur/index.html
Normal file
57
experiments/api-viewer/docs/blur/index.html
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.blur()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="blur1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.blur( handler(eventObject) )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Bind an event handler to the "blur" JavaScript event, or trigger that event on an element.</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="blur-handlereventObject">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.blur( handler(eventObject) )</h4>
|
||||
<p class="arguement"><strong>handler(eventObject)</strong>A function to execute each time the event is triggered.</p>
|
||||
</li>
|
||||
<li class="signature" id="blur"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.blur()</h4></li>
|
||||
</ul>
|
||||
<div class="longdesc">
|
||||
<p>This method is a shortcut for <code>.bind('blur', handler)</code> in the first variation, and <code>.trigger('blur')</code> in the second.</p>
|
||||
<p>The <code>blur</code> event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as <code><input></code>. In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.</p>
|
||||
<p>For example, consider the HTML:</p>
|
||||
<pre><form>
|
||||
<input id="target" type="text" value="Field 1" />
|
||||
<input type="text" value="Field 2" />
|
||||
</form>
|
||||
<div id="other">
|
||||
Trigger the handler
|
||||
</div>
|
||||
The event handler can be bound to the first input field:
|
||||
$('#target').blur(function() {
|
||||
alert('Handler for .blur() called.');
|
||||
});</pre>
|
||||
<p>Now if the first field has the focus and we click elsewhere, or tab away from it, the alert is displayed:</p>
|
||||
<p><span class="output">Handler for .blur() called.</span></p>
|
||||
<p>We can trigger the event when another element is clicked:</p>
|
||||
<pre>$('#other').click(function() {
|
||||
$('#target').blur();
|
||||
});</pre>
|
||||
<p>After this code executes, clicks on <span class="output">Trigger the handler</span> will also alert the message.</p>
|
||||
<p>The <code>blur</code> event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the <code>blur</code> event will not work consistently across browsers.</p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">To trigger the blur event on all paragraphs:</span></h4>
|
||||
<pre><code class="example">$("p").blur();</code></pre>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
66
experiments/api-viewer/docs/button-selector/index.html
Normal file
66
experiments/api-viewer/docs/button-selector/index.html
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>:button Selector</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="button1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">button</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery(':button')</h4>
|
||||
<p class="desc"><strong>Description: </strong>Selects all button elements and elements of type button.</p>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds all button inputs.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
textarea { height:45px; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<form>
|
||||
<input type="button" value="Input Button"/>
|
||||
<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>
|
||||
<script>
|
||||
|
||||
var input = $(":button").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
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
102
experiments/api-viewer/docs/change/index.html
Normal file
102
experiments/api-viewer/docs/change/index.html
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.change()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="change1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.change( handler(eventObject) )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Bind an event handler to the "change" JavaScript event, or trigger that event on an element.</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="change-handlereventObject">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.change( handler(eventObject) )</h4>
|
||||
<p class="arguement"><strong>handler(eventObject)</strong>A function to execute each time the event is triggered.</p>
|
||||
</li>
|
||||
<li class="signature" id="change"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.change()</h4></li>
|
||||
</ul>
|
||||
<div class="longdesc">
|
||||
<p>This method is a shortcut for <code>.bind('change', handler)</code> in the first variation, and <code>.trigger('change')</code> in the second.</p>
|
||||
<p>The <code>change</code> event is sent to an element when its value changes. This event is limited to <code><input></code> elements, <code><textarea></code> boxes and <code><select></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><form>
|
||||
<input class="target" type="text" value="Field 1" />
|
||||
<select class="target">
|
||||
<option value="option1" selected="selected">Option 1</option>
|
||||
<option value="option2">Option 2</option>
|
||||
</select>
|
||||
</form>
|
||||
<div id="other">
|
||||
Trigger the handler
|
||||
</div></pre>
|
||||
<p>The event handler can be bound to the text input and the select box:</p>
|
||||
<pre>$('.target').change(function() {
|
||||
alert('Handler for .change() called.');
|
||||
});</pre>
|
||||
<p>Now when the second option is selected from the dropdown, the alert is displayed. It is also displayed if we 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. We can trigger the event manually when another element is clicked:</p>
|
||||
<pre>$('#other').click(function() {
|
||||
$('.target').change();
|
||||
});</pre>
|
||||
<p>After this code executes, clicks on <span class="output">Trigger the handler</span> will also alert the message. The message will be displayed 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 now bubbles, and works identically to all other browsers, in Internet Explorer.</p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="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.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
|
||||
div { color:red; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<script>
|
||||
$("select").change(function () {
|
||||
var str = "";
|
||||
$("select option:selected").each(function () {
|
||||
str += $(this).text() + " ";
|
||||
});
|
||||
$("div").text(str);
|
||||
})
|
||||
.change();
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">To add a validity test to all text input elements:</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("input[type='text']").change( function() {
|
||||
// check input ($(this).val()) for validity here
|
||||
});</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
69
experiments/api-viewer/docs/checkbox-selector/index.html
Normal file
69
experiments/api-viewer/docs/checkbox-selector/index.html
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>:checkbox Selector</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="checkbox1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">checkbox</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery(':checkbox')</h4>
|
||||
<p class="desc"><strong>Description: </strong>Selects all elements of type checkbox.</p>
|
||||
<div class="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></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds all checkbox inputs.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
textarea { height:25px; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<script>
|
||||
|
||||
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
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
62
experiments/api-viewer/docs/checked-selector/index.html
Normal file
62
experiments/api-viewer/docs/checked-selector/index.html
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>:checked Selector</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="checked1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">checked</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery(':checked')</h4>
|
||||
<p class="desc"><strong>Description: </strong>Matches all elements that are checked.</p>
|
||||
<div class="longdesc"><p>The <code>:checked</code> selector works for checkboxes and radio buttons. For select elements, use the <code>:selected</code> selector.</p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds all input elements that are checked.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div { color:red; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<form>
|
||||
<input type="checkbox" name="newsletter" checked="checked" value="Hourly" />
|
||||
|
||||
<input type="checkbox" name="newsletter" value="Daily" />
|
||||
<input type="checkbox" name="newsletter" value="Weekly" />
|
||||
|
||||
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
|
||||
<input type="checkbox" name="newsletter" value="Yearly" />
|
||||
|
||||
</form>
|
||||
<div></div>
|
||||
<script>
|
||||
|
||||
function countChecked() {
|
||||
var n = $("input:checked").length;
|
||||
$("div").text(n + (n <= 1 ? " is" : " are") + " checked!");
|
||||
}
|
||||
countChecked();
|
||||
$(":checkbox").click(countChecked);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
<h4>Result:</h4>
|
||||
<pre><code class="results"><input type="checkbox" name="newsletter" checked="checked" value="Daily" />,
|
||||
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]</code></pre>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
61
experiments/api-viewer/docs/child-selector/index.html
Normal file
61
experiments/api-viewer/docs/child-selector/index.html
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>Child Selector (“parent > child”)</h1>
|
||||
<div class="entry-meta">Categories:
|
||||
<span class="category"><a href="http://api.jquery.com/category/selectors/" title="View all posts in Selectors">Selectors</a> > <a href="http://api.jquery.com/category/selectors/hierarchy-selectors/" title="View all posts in Hierarchy">Hierarchy</a></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="entry selector" id="child1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">child</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery('parent > child')</h4>
|
||||
<ul class="signatures"><li><dl class="arguments">
|
||||
<dt>parent</dt>
|
||||
<dd>Any valid selector.</dd>
|
||||
<dt>child</dt>
|
||||
<dd>A selector to filter the child elements.</dd>
|
||||
</dl></li></ul>
|
||||
<p class="desc"><strong>Description: </strong>Selects all direct child elements specified by "child" of elements specified by "parent".</p>
|
||||
<div class="longdesc">
|
||||
<p>As a CSS selector, the child combinator is supported by all modern web browsers including Safari, Firefox, Opera, Chrome, and Internet Explorer 7 and above, but notably not by Internet Explorer versions 6 and below. However, in jQuery, this selector (along with all others) works across all supported browsers, including IE6.</p>
|
||||
<p>The child combinator (E <strong>></strong> F) can be thought of as a more specific form of the descendant combinator (E F) in that it selects only first-level descendants.</p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Places a border around all list items that are children of <ul class="topnav"> .</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
body { font-size:14px; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<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>
|
||||
</li>
|
||||
<li>Item 3</li>
|
||||
</ul>
|
||||
|
||||
<script>$("ul.topnav > li").css("border", "3px double red");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
174
experiments/api-viewer/docs/children/index.html
Normal file
174
experiments/api-viewer/docs/children/index.html
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.children()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="children1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.children( [ selector ] )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Get the children of each element in the set of matched elements, optionally filtered by a selector.</p>
|
||||
<ul class="signatures"><li class="signature" id="children-selector">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.children( [ selector ] )</h4>
|
||||
<p class="arguement"><strong>selector</strong>A string containing a selector expression to match elements against.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<p>Given a jQuery object that represents a set of DOM elements, the <code>.children()</code> method allows us to search through the immediate children of these elements in the DOM tree and construct a new jQuery object from the matching elements. The <code>.find()</code> and <code>.children()</code> methods are similar, except that the latter only travels a single level down the DOM tree.</p>
|
||||
<p>The method optionally accepts a selector expression of the same type that we can pass to the <code>$()</code> function. If the selector is supplied, the elements will be filtered by testing whether they match it.</p>
|
||||
<p>Consider a page with a basic nested list on it:</p>
|
||||
<pre>
|
||||
<ul class="level-1">
|
||||
<li class="item-i">I</li>
|
||||
<li class="item-ii">II
|
||||
<ul class="level-2">
|
||||
<li class="item-a">A</li>
|
||||
<li class="item-b">B
|
||||
<ul class="level-3">
|
||||
<li class="item-1">1</li>
|
||||
<li class="item-2">2</li>
|
||||
<li class="item-3">3</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="item-c">C</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="item-iii">III</li>
|
||||
</ul>
|
||||
</pre>
|
||||
<p>If we begin at the level-2 list, we can find its children:</p>
|
||||
<pre>$('ul.level-2').children().css('background-color', 'red');</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>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Find all children of the clicked element.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
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; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
|
||||
<div>
|
||||
<p>This <span>is the <em>way</em> we</span>
|
||||
write <em>the</em> demo,</p>
|
||||
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
$("#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(e.target.tagName);
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">Find all children of each div.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
body { font-size:16px; font-weight:bolder; }
|
||||
span { color:blue; }
|
||||
p { margin:5px 0; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<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>And One Last <span>Time</span> (most text directly in a div)</div>
|
||||
<script>$("div").children().css("border-bottom", "3px double red");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-2">
|
||||
<h4>Example: <span class="desc">Find all children with a class "selected" of each div.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
|
||||
body { font-size:16px; font-weight:bolder; }
|
||||
p { margin:5px 0; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<span>Hello</span>
|
||||
<p class="selected">Hello Again</p>
|
||||
<div class="selected">And Again</div>
|
||||
|
||||
<p>And One Last Time</p>
|
||||
</div>
|
||||
<script>$("div").children(".selected").css("color", "blue");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
89
experiments/api-viewer/docs/class-selector/index.html
Normal file
89
experiments/api-viewer/docs/class-selector/index.html
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>Class Selector (“.class”)</h1>
|
||||
<div class="entry-meta">Categories:
|
||||
<span class="category"><a href="http://api.jquery.com/category/selectors/" title="View all posts in Selectors">Selectors</a> > <a href="http://api.jquery.com/category/selectors/basic-css-selectors/" title="View all posts in Basic">Basic</a></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="entry selector" id="class1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">class</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery('.class')</h4>
|
||||
<ul class="signatures"><li><dl class="arguments">
|
||||
<dt>class</dt>
|
||||
<dd>A class to search for. An element can have multiple classes; only one of them must match.</dd>
|
||||
</dl></li></ul>
|
||||
<p class="desc"><strong>Description: </strong>Selects all elements with the given class. </p>
|
||||
<div class="longdesc"><p>For class selectors, jQuery uses JavaScript's native <code>getElementsByClassName()</code> function if the browser supports it.</p></div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Finds the element with the class "myClass".</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div,span {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
float:left;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="notMe">div class="notMe"</div>
|
||||
|
||||
<div class="myClass">div class="myClass"</div>
|
||||
<span class="myClass">span class="myClass"</span>
|
||||
<script>$(".myClass").css("border","3px solid red");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">Finds the element with both "myclass" and "otherclass" classes.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div,span {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
float:left;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class=".myclass">div class="notMe"</div>
|
||||
|
||||
<div class="myclass otherclass">div class="myClass"</div>
|
||||
<span class="myclass otherclass">span class="myClass"</span>
|
||||
<script>$(".myclass.otherclass").css("border","13px solid red");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
66
experiments/api-viewer/docs/clearQueue/index.html
Normal file
66
experiments/api-viewer/docs/clearQueue/index.html
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.clearQueue()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="clearQueue1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.clearQueue( [ queueName ] )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Remove from the queue all items that have not yet been run.</p>
|
||||
<ul class="signatures"><li class="signature" id="clearQueue-queueName">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.clearQueue( [ queueName ] )</h4>
|
||||
<p class="arguement"><strong>queueName</strong>A string containing the name of the queue. Defaults to <code>fx</code>, the standard effects queue.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc"><p>When the <code>.clearQueue()</code> method is called, all functions on the queue that have not been executed are removed from the queue. When used without an argument, <code>.clearQueue()</code> removes the remaining functions from <code>fx</code>, the standard effects queue. In this way it is similar to <code>.stop(true)</code>. However, while the <code>.stop()</code> method is meant to be used only with animations, <code>.clearQueue()</code> can also be used to remove any function that has been added to a generic jQuery queue with the <code>.queue()</code> method. </p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Empty the queue.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div { margin:3px; width:40px; height:40px;
|
||||
position:absolute; left:0px; top:30px;
|
||||
background:green; display:none; }
|
||||
div.newcolor { background:blue; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<button id="start">Start</button>
|
||||
<button id="stop">Stop</button>
|
||||
<div></div>
|
||||
<script>$("#start").click(function () {
|
||||
$("div").show("slow");
|
||||
$("div").animate({left:'+=200'},5000);
|
||||
$("div").queue(function () {
|
||||
$(this).addClass("newcolor");
|
||||
$(this).dequeue();
|
||||
});
|
||||
$("div").animate({left:'-=200'},1500);
|
||||
$("div").queue(function () {
|
||||
$(this).removeClass("newcolor");
|
||||
$(this).dequeue();
|
||||
});
|
||||
$("div").slideUp();
|
||||
});
|
||||
$("#stop").click(function () {
|
||||
$("div").clearQueue();
|
||||
$("div").stop();
|
||||
});</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
97
experiments/api-viewer/docs/click/index.html
Normal file
97
experiments/api-viewer/docs/click/index.html
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.click()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="click1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.click( handler(eventObject) )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Bind an event handler to the "click" JavaScript event, or trigger that event on an element.</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="click-handlereventObject">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.click( handler(eventObject) )</h4>
|
||||
<p class="arguement"><strong>handler(eventObject)</strong>A function to execute each time the event is triggered.</p>
|
||||
</li>
|
||||
<li class="signature" id="click"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.click()</h4></li>
|
||||
</ul>
|
||||
<div class="longdesc">
|
||||
<p>This method is a shortcut for <code>.bind('click', handler)</code> in the first variation, and <code>.trigger('click')</code> in the second.</p>
|
||||
<p>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.</p>
|
||||
<pre>For example, consider the HTML:
|
||||
<div id="target">
|
||||
Click here
|
||||
</div>
|
||||
<div id="other">
|
||||
Trigger the handler
|
||||
</div></pre>
|
||||
<p class="image"><img src="http://api.jquery.com/images/0042_05_03.png" alt=""></p>
|
||||
<p>The event handler can be bound to any <code><div></code>:</p>
|
||||
<pre>$('#target').click(function() {
|
||||
alert('Handler for .click() called.');
|
||||
});</pre>
|
||||
<p>Now if we click on this element, the alert is displayed:</p>
|
||||
<p><span class="output">Handler for .click() called.</span></p>
|
||||
<p>We can also trigger the event when a different element is clicked:</p>
|
||||
<pre>$('#other').click(function() {
|
||||
$('#target').click();
|
||||
});</pre>
|
||||
<p>After this code executes, clicks on <span class="output">Trigger the handler</span> will also alert the message.</p>
|
||||
<p>The <code>click</code> event is only triggered after this exact series of events:</p>
|
||||
<ul>
|
||||
<li>The mouse button is depressed while the pointer is inside the element.</li>
|
||||
<li>The mouse button is released while the pointer is inside the element.</li>
|
||||
</ul>
|
||||
<p>This is usually the desired sequence before taking an action. If this is not required, the <code>mousedown</code> or <code>mouseup</code> event may be more suitable.</p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">To hide paragraphs on a page when they are clicked:</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
p { color:red; margin:5px; cursor:pointer; }
|
||||
p.hilite { background:yellow; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>First Paragraph</p>
|
||||
|
||||
<p>Second Paragraph</p>
|
||||
<p>Yet one more Paragraph</p>
|
||||
<script>
|
||||
$("p").click(function () {
|
||||
$(this).slideUp();
|
||||
});
|
||||
$("p").hover(function () {
|
||||
$(this).addClass("hilite");
|
||||
}, function () {
|
||||
$(this).removeClass("hilite");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">To trigger the click event on all of the paragraphs on the page:</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("p").click();</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
70
experiments/api-viewer/docs/clone/index.html
Normal file
70
experiments/api-viewer/docs/clone/index.html
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.clone()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="clone1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.clone( [ withDataAndEvents ] )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Create a copy of the set of matched elements.</p>
|
||||
<ul class="signatures"><li class="signature" id="clone-withDataAndEvents">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.clone( [ withDataAndEvents ] )</h4>
|
||||
<p class="arguement"><strong>withDataAndEvents</strong>A Boolean indicating whether event handlers should be copied along with the elements. As of jQuery 1.4 element data will be copied as well.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<p>The <code>.clone()</code> method, when used in conjunction with one of the insertion methods, is a convenient way to duplicate elements on a page. Consider the following HTML:</p>
|
||||
<pre><div class="container">
|
||||
<div class="hello">Hello</div>
|
||||
<div class="goodbye">Goodbye</div>
|
||||
</div></pre>
|
||||
<p>As shown in the discussion for <code><a href="/append">.append()</a></code>, normally when we insert an element somewhere in the DOM, it is moved from its old location. So, given the code:</p>
|
||||
<pre>$('.hello').appendTo('.goodbye');</pre>
|
||||
<p>The resulting DOM structure would be:</p>
|
||||
<pre><div class="container">
|
||||
<div class="goodbye">
|
||||
Goodbye
|
||||
<div class="hello">Hello</div>
|
||||
</div>
|
||||
</div></pre>
|
||||
<p>To prevent this and instead create a copy of the element, we could write the following:</p>
|
||||
<pre>$('.hello').clone().appendTo('.goodbye');</pre>
|
||||
<p>This would produce:</p>
|
||||
<pre><div class="container">
|
||||
<div class="hello">Hello</div>
|
||||
<div class="goodbye">
|
||||
Goodbye
|
||||
<div class="hello">Hello</div>
|
||||
</div>
|
||||
</div></pre>
|
||||
<blockquote><p>Note that when using the <code>.clone()</code> method, we can modify the cloned elements or their contents before (re-)inserting them into the document.</p></blockquote>
|
||||
<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>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Clones all b elements (and selects the clones) and prepends them to all paragraphs.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<b>Hello</b><p>, how are you?</p>
|
||||
<script>$("b").clone().prependTo("p");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
<h4>Result:</h4>
|
||||
<pre><code class="results"><b>Hello</b><p><b>Hello</b>, how are you?</p></code></pre>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
174
experiments/api-viewer/docs/closest/index.html
Normal file
174
experiments/api-viewer/docs/closest/index.html
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.closest()</h1>
|
||||
|
||||
</div>
|
||||
|
||||
<fieldset class="toc">
|
||||
<legend>Contents:</legend>
|
||||
<ul class="toc-list">
|
||||
<li>
|
||||
<a href="#closest1">closest( selector ) </a><ul>
|
||||
<li>.closest( selector )
|
||||
</li>
|
||||
<li>.closest( selector, [ context ] )
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#closest2">closest( selectors, [ context ] ) </a><ul><li>.closest( selectors, [ context ] )
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
<div class="entry method" id="closest1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.closest( selector )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Get the first element that matches the selector, beginning at the current element and progressing up through the DOM tree.</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="closest-selector">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.3/">1.3</a></span>.closest( selector )</h4>
|
||||
<p class="arguement"><strong>selector</strong>A string containing a selector expression to match elements against.</p>
|
||||
</li>
|
||||
<li class="signature" id="closest-selector-context">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.closest( selector, [ context ] )</h4>
|
||||
<p class="arguement"><strong>selector</strong>A string containing a selector expression to match elements against.</p>
|
||||
<p class="arguement"><strong>context</strong>A DOM element within which a matching element may be found. If no context is passed in then the context of the jQuery set will be used instead.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="longdesc">
|
||||
<p>Given a jQuery object that represents a set of DOM elements, the <code>.closest()</code> method allows us to search through these elements and their ancestors in the DOM tree and construct a new jQuery object from the matching elements. The <code>.parents()</code> and <code>.closest()</code> methods are similar in that they both traverse up the DOM tree. The differences between the two, though subtle, are significant:</p>
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>.closest()</th>
|
||||
<th>.parents()</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Begins with the current element</td>
|
||||
<td>Begins with the parent element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Travels up the DOM tree until it finds a match for the supplied selector</td>
|
||||
<td>Travels up the DOM tree to the document's root element, adding each ancestor element to a temporary collection; it then filters that collection based on a selector if one is supplied </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>The returned jQuery object contains zero or one element</td>
|
||||
<td>The returned jQuery object contains zero, one, or multiple elements</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<pre>
|
||||
<ul id="one" class="level-1">
|
||||
<li class="item-i">I</li>
|
||||
<li id="ii" class="item-ii">II
|
||||
<ul class="level-2">
|
||||
<li class="item-a">A</li>
|
||||
<li class="item-b">B
|
||||
<ul class="level-3">
|
||||
<li class="item-1">1</li>
|
||||
<li class="item-2">2</li>
|
||||
<li class="item-3">3</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="item-c">C</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="item-iii">III</li>
|
||||
</ul>
|
||||
</pre>
|
||||
<p>Suppose we perform a search for <code><ul></code> elements starting at item A:</p>
|
||||
<pre>
|
||||
$('li.item-a').closest('ul')
|
||||
.css('background-color', 'red');
|
||||
</pre>
|
||||
<p>This will change the color of the level-2 <code><ul></code>, since it is the first encountered when traveling up the DOM tree.</p>
|
||||
<p>Suppose we search for an <code><li></code> element instead:</p>
|
||||
<pre>$('li.item-a').closest('li')
|
||||
.css('background-color', 'red');
|
||||
</pre>
|
||||
<p>This will change the color of list item A. The <code>.closest()</code> method begins its search with the element itself 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>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');</pre>
|
||||
<p>This will change the color of the level-2 <code><ul></code>, because it is both the first <code><ul></code> ancestor of list item A and a descendant of list item II. It will not change the color of the level-1 <code><ul></code>, however, because it is not a descendant of list item II.</p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Show how event delegation can be done with closest.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
li { margin: 3px; padding: 3px; background: #EEEEEE; }
|
||||
li.hilight { background: yellow; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li><b>Click me!</b></li>
|
||||
<li>You can also <b>Click me!</b></li>
|
||||
</ul>
|
||||
<script>
|
||||
|
||||
$(document).bind("click", function (e) {
|
||||
$(e.target).closest("li").toggleClass("hilight");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="closest2">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.closest( selectors, [ context ] )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#Array">Array</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Gets an array of all the elements and selectors matched against the current element up through the DOM tree.</p>
|
||||
<ul class="signatures"><li class="signature" id="closest-selectors-context">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.closest( selectors, [ context ] )</h4>
|
||||
<p class="arguement"><strong>selectors</strong>An array of string containing a selector expression to match elements against (can also be a jQuery object).</p>
|
||||
<p class="arguement"><strong>context</strong>A DOM element within which a matching element may be found. If no context is passed in then the context of the jQuery set will be used instead.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc"><p>This method is primarily meant to be used internally or by plugin authors.</p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Show how event delegation can be done with closest.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style></style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<ul><li></li><li></li></ul>
|
||||
<script>var close = $("li:first").closest(["ul", "body"]);
|
||||
$.each(close, function(i){
|
||||
$("li").eq(i).html( this.selector + ": " + this.elem.nodeName );
|
||||
});</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
46
experiments/api-viewer/docs/contains-selector/index.html
Normal file
46
experiments/api-viewer/docs/contains-selector/index.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>:contains() Selector</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="contains1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">contains</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.1.4/">1.1.4</a></span>jQuery(':contains(text)')</h4>
|
||||
<p class="desc"><strong>Description: </strong>Select all elements that contain the specified text.</p>
|
||||
<div class="longdesc"><p>The matching text can appear directly within the selected element, in any of that element's descendants, or a combination thereof. As with attribute value selectors, text inside the parentheses of <code>:contains()</code> can be written as bare words or surrounded by quotation marks. The text must have matching case to be selected.</p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds all divs containing "John" and underlines them.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>John Resig</div>
|
||||
|
||||
<div>George Martin</div>
|
||||
<div>Malcom John Sinclair</div>
|
||||
<div>J. Ohn</div>
|
||||
|
||||
|
||||
<script>
|
||||
$("div:contains('John')").css("text-decoration", "underline");
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
83
experiments/api-viewer/docs/contents/index.html
Normal file
83
experiments/api-viewer/docs/contents/index.html
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.contents()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="contents1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.contents()</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Get the children of each element in the set of matched elements, including text nodes.</p>
|
||||
<ul class="signatures"><li class="signature" id="contents"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.2/">1.2</a></span>.contents()</h4></li></ul>
|
||||
<div class="longdesc">
|
||||
<p>Given a jQuery object that represents a set of DOM elements, the <code>.contents()</code> method allows us to search through the 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><div></code> with a number of text nodes, each of which is separated by two line break elements (<code><br /></code>):</p>
|
||||
<pre><div class="container">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
|
||||
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
<br /><br />
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat.
|
||||
<br /> <br />
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit
|
||||
esse cillum dolore eu fugiat nulla pariatur.
|
||||
</div>
|
||||
</pre>
|
||||
<p>We can employ the <code>.contents()</code> method to help convert this blob of text into three well-formed paragraphs:</p>
|
||||
<pre>
|
||||
$('.container').contents().filter(function() {
|
||||
return this.nodeType == 3;
|
||||
})
|
||||
.wrap('<p></p>')
|
||||
.end()
|
||||
.filter('br')
|
||||
.remove();
|
||||
</pre>
|
||||
<p>This code first retrieves the contents of <code><div class="container"></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><br /></code> elements, and these elements are removed.</p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Find all the text nodes inside a paragraph and wrap them with a bold tag.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>
|
||||
<script>$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">Change the background colour of links inside of an iframe.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<iframe src="http://api.jquery.com/" width="80%" height="600" id='frameDemo'></iframe>
|
||||
<script>$("#frameDemo").contents().find("a").css("background-color","#BADA55");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
52
experiments/api-viewer/docs/context/index.html
Normal file
52
experiments/api-viewer/docs/context/index.html
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.context</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="context1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">context</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#Element">Element</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>The DOM node context originally passed to jQuery(); if none was passed then context will likely be the document.</p>
|
||||
<ul class="signatures"><li class="signature" id="context"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.3/">1.3</a></span>context</h4></li></ul>
|
||||
<div class="longdesc">
|
||||
<p>The <code>.live()</code> method for binding event handlers uses this property to determine the root element to use for its event delegation needs. Plug-ins which perform similar tasks may also find the property useful.</p>
|
||||
<p>
|
||||
The value of this property is typically equal to document, as this is the default context for jQuery objects if none is supplied. The context may differ if, for example, the object was created by searching within an <code><iframe></code> or XML document.</p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Determine the exact context used.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
body { cursor:pointer; }
|
||||
div { width:50px; height:30px; margin:5px; float:left;
|
||||
background:green; }
|
||||
span { color:red; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
Context:<ul></ul>
|
||||
<script>$("ul")
|
||||
.append("<li>" + $("ul").context + "</li>")
|
||||
.append("<li>" + $("ul", document.body).context.nodeName + "</li>");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
254
experiments/api-viewer/docs/css/index.html
Normal file
254
experiments/api-viewer/docs/css/index.html
Normal file
|
|
@ -0,0 +1,254 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.css()</h1>
|
||||
|
||||
</div>
|
||||
|
||||
<fieldset class="toc">
|
||||
<legend>Contents:</legend>
|
||||
<ul class="toc-list">
|
||||
<li>
|
||||
<a href="#css1">css( propertyName ) </a><ul><li>.css( propertyName )
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#css2">css( propertyName, value ) </a><ul>
|
||||
<li>.css( propertyName, value )
|
||||
</li>
|
||||
<li>.css( propertyName, function(index, value) )
|
||||
</li>
|
||||
<li>.css( map )
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
<div class="entry method" id="css1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.css( propertyName )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#String">String</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Get the value of a style property for the first element in the set of matched elements.</p>
|
||||
<ul class="signatures"><li class="signature" id="css-propertyName">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.css( propertyName )</h4>
|
||||
<p class="arguement"><strong>propertyName</strong>A CSS property.</p>
|
||||
</li></ul>
|
||||
<div class="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>. The <code>.css()</code> method accounts for such differences, producing the same result no matter which term we use. For example, an element that is floated left will return the string <code>left</code> for each of the following three lines:</p>
|
||||
<ol>
|
||||
<li><code>$('div.left').css('float');</code></li>
|
||||
<li><code>$('div.left').css('cssFloat');</code></li>
|
||||
<li><code>$('div.left').css('styleFloat');</code></li>
|
||||
</ol>
|
||||
<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>.</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>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">To access the background color of a clicked div.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div { width:60px; height:60px; margin:5px; float:left; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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>
|
||||
<script>
|
||||
$("div").click(function () {
|
||||
var color = $(this).css("background-color");
|
||||
$("#result").html("That div is <span style='color:" +
|
||||
color + ";'>" + color + "</span>.");
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="css2">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.css( propertyName, value )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Set one or more CSS properties for the set of matched elements.</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="css-propertyName-value">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.css( propertyName, value )</h4>
|
||||
<p class="arguement"><strong>propertyName</strong>A CSS property name.</p>
|
||||
<p class="arguement"><strong>value</strong>A value to set for the property.</p>
|
||||
</li>
|
||||
<li class="signature" id="css-propertyName-functionindex, value">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.css( propertyName, function(index, value) )</h4>
|
||||
<p class="arguement"><strong>propertyName</strong>A CSS property name.</p>
|
||||
<p class="arguement"><strong>function(index, value)</strong>A function returning the value to set. Receives the index position of the element in the set and the old value as arguments.</p>
|
||||
</li>
|
||||
<li class="signature" id="css-map">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.css( map )</h4>
|
||||
<p class="arguement"><strong>map</strong>A map of property-value pairs to set.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="longdesc">
|
||||
<p>As with the <code>.attr()</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 map of key-value pairs (JavaScript object notation).</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>As with <code><a href="/attr">.attr()</a></code>, <code>.css()</code> allows us to pass a function as the property value:</p>
|
||||
<pre>$('div.example').css('width', function(index) {
|
||||
return index * 50;
|
||||
});</pre>
|
||||
<p>This example sets the widths of the matched elements to incrementally larger values.</p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">To change the color of any paragraph to red on mouseover event.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
p { color:blue; width:200px; font-size:14px; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Just roll the mouse over me.</p>
|
||||
|
||||
<p>Or me to see a color change.</p>
|
||||
|
||||
<script>
|
||||
$("p").mouseover(function () {
|
||||
$(this).css("color","red");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">To highlight a clicked word in the paragraph.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
p { color:blue; font-weight:bold; cursor:pointer; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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>
|
||||
<script>
|
||||
var words = $("p:first").text().split(" ");
|
||||
var text = words.join("</span> <span>");
|
||||
$("p:first").html("<span>" + text + "</span>");
|
||||
$("span").click(function () {
|
||||
$(this).css("background-color","yellow");
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-2">
|
||||
<h4>Example: <span class="desc">To set the color of all paragraphs to red and background to blue:</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
p { color:green; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Move the mouse over a paragraph.</p>
|
||||
<p>Like this one or the one above.</p>
|
||||
|
||||
<script>
|
||||
$("p").hover(function () {
|
||||
$(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
|
||||
}, function () {
|
||||
var cssObj = {
|
||||
'background-color' : '#ddd',
|
||||
'font-weight' : '',
|
||||
'color' : 'rgb(0,40,244)'
|
||||
}
|
||||
$(this).css(cssObj);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-3">
|
||||
<h4>Example: <span class="desc">Increase the size of a div when you click it:</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div { width: 20px; height: 15px; background-color: #f33; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>click</div>
|
||||
<div>click</div>
|
||||
|
||||
<script>
|
||||
$("div").click(function() {
|
||||
$(this).css({
|
||||
width: function(index, value) {
|
||||
return parseFloat(value) * 1.2;
|
||||
},
|
||||
height: function(index, value) {
|
||||
return parseFloat(value) * 1.2;
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
183
experiments/api-viewer/docs/data/index.html
Normal file
183
experiments/api-viewer/docs/data/index.html
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.data()</h1>
|
||||
|
||||
</div>
|
||||
|
||||
<fieldset class="toc">
|
||||
<legend>Contents:</legend>
|
||||
<ul class="toc-list">
|
||||
<li>
|
||||
<a href="#data1">data( key, value ) </a><ul>
|
||||
<li>.data( key, value )
|
||||
</li>
|
||||
<li>.data( obj )
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#data2">data( key ) </a><ul>
|
||||
<li>.data( key )
|
||||
</li>
|
||||
<li>.data()
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
<div class="entry method" id="data1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.data( key, value )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Store arbitrary data associated with the matched elements.</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="data-key-value">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.2.3/">1.2.3</a></span>.data( key, value )</h4>
|
||||
<p class="arguement"><strong>key</strong>A string naming the piece of data to set.</p>
|
||||
<p class="arguement"><strong>value</strong>The new data value; it can be any Javascript type including Array or Object.</p>
|
||||
</li>
|
||||
<li class="signature" id="data-obj">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.data( obj )</h4>
|
||||
<p class="arguement"><strong>obj</strong>An object of key-value pairs of data to set.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="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.</p>
|
||||
<p> We can set several distinct values for a single element and retrieve them later:</p>
|
||||
<pre>
|
||||
$('body').data('foo', 52);
|
||||
$('body').data('bar', { myType: 'test', count: 40 });
|
||||
|
||||
$('body').data('foo'); // 52
|
||||
$('body').data(); // {foo: 52, bar: { myType: 'test', count: 40 }}
|
||||
</pre>
|
||||
<p>Setting an element's data object with <code>.data(obj)</code> replaces all data previously stored with that element. 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. Until jQuery 1.4.2, jQuery itself used the <code>.data()</code> method to save information about events that have been bound to the element, using a data item named 'events'.</p>
|
||||
<pre>
|
||||
$('body').data('foo', 52);
|
||||
$('body').data({one: 1, two: 2});
|
||||
|
||||
$('body').data('foo'); // undefined
|
||||
$('body').data(); // {one: 1, two: 2}
|
||||
</pre>
|
||||
<p>Due to the way browsers interact with plugins and external code, the <code>.data()</code> method cannot be used on <code><object></code>, <code><applet></code> or <code><embed></code> elements.</p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Store then retrieve a value from the div element.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div { color:blue; }
|
||||
span { color:red; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
The values stored were
|
||||
<span></span>
|
||||
and
|
||||
<span></span>
|
||||
</div>
|
||||
<script>
|
||||
$("div").data("test", { first: 16, last: "pizza!" });
|
||||
$("span:first").text($("div").data("test").first);
|
||||
$("span:last").text($("div").data("test").last);
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="data2">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.data( key )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#Object">Object</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Returns value at named data store for the element, as set by data(name, value).</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="data-key">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.2.3/">1.2.3</a></span>.data( key )</h4>
|
||||
<p class="arguement"><strong>key</strong>Name of the data stored.</p>
|
||||
</li>
|
||||
<li class="signature" id="data"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.data()</h4></li>
|
||||
</ul>
|
||||
<div class="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>
|
||||
alert($('body').data('foo'));
|
||||
alert($('body').data());
|
||||
</pre>
|
||||
<p>The above lines alert the data values that were set on the <code>body</code> element. If nothing was set on that element, an empty string is returned:</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>.</p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Get the data named "blah" stored at for an element.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div { margin:5px; background:yellow; }
|
||||
button { margin:5px; font-size:14px; }
|
||||
p { margin:5px; color:blue; }
|
||||
span { color:red; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<script>
|
||||
$("button").click(function(e) {
|
||||
var value;
|
||||
|
||||
switch ($("button").index(this)) {
|
||||
case 0 :
|
||||
value = $("div").data("blah");
|
||||
break;
|
||||
case 1 :
|
||||
$("div").data("blah", "hello");
|
||||
value = "Stored!";
|
||||
break;
|
||||
case 2 :
|
||||
$("div").data("blah", 86);
|
||||
value = "Stored!";
|
||||
break;
|
||||
case 3 :
|
||||
$("div").removeData("blah");
|
||||
value = "Removed!";
|
||||
break;
|
||||
}
|
||||
|
||||
$("span").text("" + value);
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
99
experiments/api-viewer/docs/dblclick/index.html
Normal file
99
experiments/api-viewer/docs/dblclick/index.html
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.dblclick()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="dblclick1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.dblclick( handler(eventObject) )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element.</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="dblclick-handlereventObject">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.dblclick( handler(eventObject) )</h4>
|
||||
<p class="arguement"><strong>handler(eventObject)</strong>A function to execute each time the event is triggered.</p>
|
||||
</li>
|
||||
<li class="signature" id="dblclick"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.dblclick()</h4></li>
|
||||
</ul>
|
||||
<div class="longdesc">
|
||||
<p>This method is a shortcut for <code>.bind('dblclick', handler)</code> in the first variation, and <code>.trigger('dblclick')</code> in the second.
|
||||
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><div id="target">
|
||||
Double-click here
|
||||
</div>
|
||||
<div id="other">
|
||||
Trigger the handler
|
||||
</div></pre>
|
||||
<p class="image"><img src="http://api.jquery.com/images/0042_05_04.png" alt=""></p>
|
||||
<p>The event handler can be bound to any <code><div></code>:</p>
|
||||
<pre>$('#target').dblclick(function() {
|
||||
alert('Handler for .dblclick() called.');
|
||||
});</pre>
|
||||
<p>Now if we double-click on this element, the alert is displayed:</p>
|
||||
<p><span class="output">Handler for .dblclick() called.</span></p>
|
||||
<p>We can also trigger the event when a different element is clicked:</p>
|
||||
<pre>$('#other').click(function() {
|
||||
$('#target').dblclick();
|
||||
});</pre>
|
||||
<p>After this code executes, (single) clicks on <span class="output">Trigger the handler</span> will also alert the message.</p>
|
||||
<p>The <code>dblclick</code> event is only triggered after this exact series of events:</p>
|
||||
<ul>
|
||||
<li>The mouse button is depressed while the pointer is inside the element.</li>
|
||||
<li>The mouse button is released while the pointer is inside the element.</li>
|
||||
<li>The mouse button is depressed again while the pointer is inside the element, within a time window that is system-dependent.</li>
|
||||
<li>The mouse button is released while the pointer is inside the element.</li>
|
||||
</ul>
|
||||
<p>It is inadvisable to bind handlers to both the <code>click</code> and <code>dblclick</code> events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two <code>click</code> events and others only one. If an interface that reacts differently to single- and double-clicks cannot be avoided, then the <code>dblclick</code> event should be simulated within the <code>click</code> handler. We can achieve this by saving a timestamp in the handler, and then comparing the current time to the saved timestamp on subsequent clicks. If the difference is small enough, we can treat the click as a double-click.
|
||||
</p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">To bind a "Hello World!" alert box the dblclick event on every paragraph on the page:</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("p").dblclick( function () { alert("Hello World!"); });</code></pre>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">Double click to toggle background color.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
|
||||
div { background:blue;
|
||||
color:white;
|
||||
height:100px;
|
||||
width:150px;
|
||||
}
|
||||
div.dbl { background:yellow;color:black; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div></div><span>Double click the block</span>
|
||||
<script>
|
||||
var divdbl = $("div:first");
|
||||
divdbl.dblclick(function () {
|
||||
divdbl.toggleClass('dbl');
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
63
experiments/api-viewer/docs/delay/index.html
Normal file
63
experiments/api-viewer/docs/delay/index.html
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.delay()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="delay1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.delay( duration, [ queueName ] )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Set a timer to delay execution of subsequent items in the queue.</p>
|
||||
<ul class="signatures"><li class="signature" id="delay-duration-queueName">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.delay( duration, [ queueName ] )</h4>
|
||||
<p class="arguement"><strong>duration</strong>An integer indicating the number of milliseconds to delay execution of the next item in the queue.</p>
|
||||
<p class="arguement"><strong>queueName</strong>A string containing the name of the queue. Defaults to <code>fx</code>, the standard effects queue.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<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. </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><div id="foo"></code>:</p>
|
||||
<pre>$('#foo').slideUp(300).delay(800).fadeIn(400);</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>
|
||||
<p><strong>jQuery.delay() is best for delaying between queued jQuery effects and such, and is not a replacement for JavaScript's native <a href="https://developer.mozilla.org/en/DOM/window.setTimeout">setTimeout</a> function, which may be more appropriate for certain use cases.</strong></p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Animate the hiding and showing of two divs, delaying the first before showing it.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div { width: 60px; height: 60px; float: left; }
|
||||
.first { background-color: #3f3; }
|
||||
.second { background-color: #33f;}
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p><button>Run</button></p>
|
||||
<div class="first"></div>
|
||||
<div class="second"></div>
|
||||
|
||||
<script>
|
||||
$("button").click(function() {
|
||||
$("div.first").slideUp(300).delay(800).fadeIn(400);
|
||||
$("div.second").slideUp(300).fadeIn(400);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
133
experiments/api-viewer/docs/delegate/index.html
Normal file
133
experiments/api-viewer/docs/delegate/index.html
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.delegate()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="delegate1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.delegate( selector, eventType, handler )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="delegate-selector-eventType-handler">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4.2/">1.4.2</a></span>.delegate( selector, eventType, handler )</h4>
|
||||
<p class="arguement"><strong>selector</strong>A selector to filter the elements that trigger the event.</p>
|
||||
<p class="arguement"><strong>eventType</strong>A string containing one or more space-separated JavaScript event types, such as "click" or "keydown," or custom event names.</p>
|
||||
<p class="arguement"><strong>handler</strong>A function to execute at the time the event is triggered.</p>
|
||||
</li>
|
||||
<li class="signature" id="delegate-selector-eventType-eventData-handler">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4.2/">1.4.2</a></span>.delegate( selector, eventType, eventData, handler )</h4>
|
||||
<p class="arguement"><strong>selector</strong>A selector to filter the elements that trigger the event.</p>
|
||||
<p class="arguement"><strong>eventType</strong>A string containing one or more space-separated JavaScript event types, such as "click" or "keydown," or custom event names.</p>
|
||||
<p class="arguement"><strong>eventData</strong>A map of data that will be passed to the event handler.</p>
|
||||
<p class="arguement"><strong>handler</strong>A function to execute at the time the event is triggered.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="longdesc">
|
||||
<p>Delegate is an alternative to using the <a href="/live">.live()</a> method, allowing for each binding of event delegation to specific DOM elements. For example the following delegate code:</p>
|
||||
<pre>$("table").delegate("td", "hover", function(){
|
||||
$(this).toggleClass("hover");
|
||||
});</pre>
|
||||
<p>Is equivalent to the following code written using <code>.live()</code>:</p>
|
||||
<pre>$("table").each(function(){
|
||||
$("td", this).live("hover", function(){
|
||||
$(this).toggleClass("hover");
|
||||
});
|
||||
});</pre>
|
||||
<p>See also the <a href="/undelegate">.undelegate()</a> method for a way of removing event handlers added in <a href="/delegate">.delegate()</a>.</p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Click a paragraph to add another. Note that .delegate() binds the click event to all paragraphs - even new ones.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
p { background:yellow; font-weight:bold; cursor:pointer;
|
||||
padding:5px; }
|
||||
p.over { background: #ccc; }
|
||||
span { color:red; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Click me!</p>
|
||||
|
||||
<span></span>
|
||||
<script>
|
||||
$("body").delegate("p", "click", function(){
|
||||
$(this).after("<p>Another paragraph!</p>");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">To display each paragraph's text in an alert box whenever it is clicked:</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("body").delegate("p", "click", function(){
|
||||
alert( $(this).text() );
|
||||
});</code></pre>
|
||||
</div>
|
||||
<div id="example-2">
|
||||
<h4>Example: <span class="desc">To cancel a default action and prevent it from bubbling up, return false:</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("body").delegate("a", "click", function() { return false; })</code></pre>
|
||||
</div>
|
||||
<div id="example-3">
|
||||
<h4>Example: <span class="desc">To cancel only the default action by using the preventDefault method.</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("body").delegate("a", "click", function(event){
|
||||
event.preventDefault();
|
||||
});</code></pre>
|
||||
</div>
|
||||
<div id="example-4">
|
||||
<h4>Example: <span class="desc">Can bind custom events too.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
p { color:red; }
|
||||
span { color:blue; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Has an attached custom event.</p>
|
||||
<button>Trigger custom event</button>
|
||||
<span style="display:none;"></span>
|
||||
<script>
|
||||
|
||||
$("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");
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
58
experiments/api-viewer/docs/dequeue/index.html
Normal file
58
experiments/api-viewer/docs/dequeue/index.html
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.dequeue()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="dequeue1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.dequeue( [ queueName ] )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Execute the next function on the queue for the matched elements.</p>
|
||||
<ul class="signatures"><li class="signature" id="dequeue-queueName">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.2/">1.2</a></span>.dequeue( [ queueName ] )</h4>
|
||||
<p class="arguement"><strong>queueName</strong>A string containing the name of the queue. Defaults to <code>fx</code>, the standard effects queue.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc"><p>When <code>.dequeue()</code> is called, the next function on the queue is removed from the queue, and then executed. This function should in turn (directly or indirectly) cause <code>.dequeue()</code> to be called, so that the sequence can continue.</p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Use dequeue to end a custom queue function which allows the queue to keep going.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div { margin:3px; width:50px; position:absolute;
|
||||
height:50px; left:10px; top:30px;
|
||||
background-color:yellow; }
|
||||
div.red { background-color:red; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<button>Start</button>
|
||||
<div></div>
|
||||
<script>
|
||||
$("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);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
65
experiments/api-viewer/docs/descendant-selector/index.html
Normal file
65
experiments/api-viewer/docs/descendant-selector/index.html
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>Descendant Selector (“ancestor descendant”)</h1>
|
||||
<div class="entry-meta">Categories:
|
||||
<span class="category"><a href="http://api.jquery.com/category/selectors/" title="View all posts in Selectors">Selectors</a> > <a href="http://api.jquery.com/category/selectors/hierarchy-selectors/" title="View all posts in Hierarchy">Hierarchy</a></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="entry selector" id="descendant1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">descendant</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery('ancestor descendant')</h4>
|
||||
<ul class="signatures"><li><dl class="arguments">
|
||||
<dt>ancestor</dt>
|
||||
<dd>Any valid selector.</dd>
|
||||
<dt>descendant</dt>
|
||||
<dd>A selector to filter the descendant elements.</dd>
|
||||
</dl></li></ul>
|
||||
<p class="desc"><strong>Description: </strong>Selects all elements that are descendants of a given ancestor.</p>
|
||||
<div class="longdesc"><p>A descendant of an element could be a child, grandchild, great-grandchild, and so on, of that element.</p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds all input descendants of forms.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
|
||||
body { font-size:14px; }
|
||||
form { border:2px green solid; padding:2px; margin:0;
|
||||
background:#efe; }
|
||||
div { color:red; }
|
||||
fieldset { margin:1px; padding:3px; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<form>
|
||||
<div>Form is surrounded by the green outline</div>
|
||||
<label>Child:</label>
|
||||
<input name="name" />
|
||||
|
||||
<fieldset>
|
||||
<label>Grandchild:</label>
|
||||
<input name="newsletter" />
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
Sibling to form: <input name="none" />
|
||||
<script>$("form input").css("border", "2px dotted blue");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
57
experiments/api-viewer/docs/detach/index.html
Normal file
57
experiments/api-viewer/docs/detach/index.html
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.detach()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="detach1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.detach( [ selector ] )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Remove the set of matched elements from the DOM.</p>
|
||||
<ul class="signatures"><li class="signature" id="detach-selector">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.detach( [ selector ] )</h4>
|
||||
<p class="arguement"><strong>selector</strong>A selector expression that filters the set of matched elements to be removed.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc"><p>The <code>.detach()</code> method is the same as <code><a href="/remove">.remove()</a></code>, except that <code>.detach()</code> keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.</p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Detach all paragraphs from the DOM</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>p { background:yellow; margin:6px 0; } p.off { background: black; }</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Hello</p>
|
||||
how are
|
||||
<p>you?</p>
|
||||
<button>Attach/detach paragraphs</button>
|
||||
<script>
|
||||
$("p").click(function(){
|
||||
$(this).toggleClass("off");
|
||||
});
|
||||
var p;
|
||||
$("button").click(function(){
|
||||
if ( p ) {
|
||||
p.appendTo("body");
|
||||
p = null;
|
||||
} else {
|
||||
p = $("p").detach();
|
||||
}
|
||||
});</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
116
experiments/api-viewer/docs/die/index.html
Normal file
116
experiments/api-viewer/docs/die/index.html
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.die()</h1>
|
||||
|
||||
</div>
|
||||
|
||||
<fieldset class="toc">
|
||||
<legend>Contents:</legend>
|
||||
<ul class="toc-list">
|
||||
<li>
|
||||
<a href="#die1">die() </a><ul><li>.die()
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#die2">die( eventType, [ handler ] ) </a><ul><li>.die( eventType, [ handler ] )
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
<div class="entry method" id="die1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.die()</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Remove all event handlers previously attached using .live() from the elements.</p>
|
||||
<ul class="signatures"><li class="signature" id="die"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4.1/">1.4.1</a></span>.die()</h4></li></ul>
|
||||
<div class="longdesc"><p>Any handler that has been attached with <code>.live()</code> can be removed with <code>.die()</code>. This method is analogous to calling <code>.unbind()</code> with no arguments, which is used to remove all handlers attached with <code>.bind()</code>.
|
||||
See the discussions of <code>.live()</code> and <code>.unbind()</code> for further details.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="die2">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.die( eventType, [ handler ] )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Remove an event handler previously attached using .live() from the elements.</p>
|
||||
<ul class="signatures"><li class="signature" id="die-eventType-handler">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.3/">1.3</a></span>.die( eventType, [ handler ] )</h4>
|
||||
<p class="arguement"><strong>eventType</strong>A string containing a JavaScript event type, such as <code>click</code> or <code>keydown</code>.</p>
|
||||
<p class="arguement"><strong>handler</strong>The function that is to be no longer executed.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc"><p>Any handler that has been attached with <code>.live()</code> can be removed with <code>.die()</code>. This method is analogous to <code>.unbind()</code>, which is used to remove handlers attached with <code>.bind()</code>.
|
||||
See the discussions of <code>.live()</code> and <code>.unbind()</code> for further details.</p></div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Can bind and unbind events to the colored button.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
button { margin:5px; }
|
||||
button#theone { color:red; background:yellow; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<button id="theone">Does nothing...</button>
|
||||
<button id="bind">Bind Click</button>
|
||||
<button id="unbind">Unbind Click</button>
|
||||
|
||||
<div style="display:none;">Click!</div>
|
||||
<script>
|
||||
|
||||
function aClick() {
|
||||
$("div").show().fadeOut("slow");
|
||||
}
|
||||
$("#bind").click(function () {
|
||||
$("#theone").live("click", aClick)
|
||||
.text("Can Click!");
|
||||
});
|
||||
$("#unbind").click(function () {
|
||||
$("#theone").die("click", aClick)
|
||||
.text("Does nothing...");
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">To unbind all live events from all paragraphs, write:</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("p").die()</code></pre>
|
||||
</div>
|
||||
<div id="example-2">
|
||||
<h4>Example: <span class="desc">To unbind all live click events from all paragraphs, write:</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("p").die( "click" )</code></pre>
|
||||
</div>
|
||||
<div id="example-3">
|
||||
<h4>Example: <span class="desc">To unbind just one previously bound handler, pass the function in as the second argument:</span>
|
||||
</h4>
|
||||
<pre><code class="example">var foo = function () {
|
||||
// code to handle some kind of event
|
||||
};
|
||||
|
||||
$("p").live("click", foo); // ... now foo will be called when paragraphs are clicked ...
|
||||
|
||||
$("p").die("click", foo); // ... foo will no longer be called.</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
41
experiments/api-viewer/docs/disabled-selector/index.html
Normal file
41
experiments/api-viewer/docs/disabled-selector/index.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>:disabled Selector</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="disabled1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">disabled</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery(':disabled')</h4>
|
||||
<p class="desc"><strong>Description: </strong>Selects all elements that are disabled.</p>
|
||||
<div class="longdesc"><p>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>$(':disabled')</code> is equivalent to <code>$('*:disabled')</code>, so <code>$('input:disabled')</code> should be used instead. </p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds all input elements that are disabled.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<form>
|
||||
|
||||
<input name="email" disabled="disabled" />
|
||||
<input name="id" />
|
||||
</form>
|
||||
<script>$("input:disabled").val("this is it");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
154
experiments/api-viewer/docs/each/index.html
Normal file
154
experiments/api-viewer/docs/each/index.html
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.each()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="each1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.each( function(index, Element) )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Iterate over a jQuery object, executing a function for each matched element. </p>
|
||||
<ul class="signatures"><li class="signature" id="each-functionindex, Element">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.each( function(index, Element) )</h4>
|
||||
<p class="arguement"><strong>function(index, Element)</strong>A function to execute for each matched element.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<p>The <code>.each()</code> method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword <code>this</code> refers to the element.</p>
|
||||
<p>Suppose we had a simple unordered list on the page:</p>
|
||||
<pre><ul>
|
||||
<li>foo</li>
|
||||
<li>bar</li>
|
||||
</ul>
|
||||
</pre>
|
||||
<p>We can select the list items and iterate across them:</p>
|
||||
<pre>$('li').each(function(index) {
|
||||
alert(index + ': ' + $(this).text());
|
||||
});
|
||||
</pre>
|
||||
<p>A message is thus alerted for each item in the list:</p>
|
||||
<p><span class="output">0: foo</span><br><span class="output">1: bar</span></p>
|
||||
<p>We can stop the loop from within the callback function by returning <code>false</code>.</p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Iterates over three divs and sets their color property.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div { color:red; text-align:center; cursor:pointer;
|
||||
font-weight:bolder; width:300px; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>Click here</div>
|
||||
|
||||
<div>to iterate through</div>
|
||||
<div>these divs.</div>
|
||||
<script>
|
||||
$(document.body).click(function () {
|
||||
$("div").each(function (i) {
|
||||
if (this.style.color != "blue") {
|
||||
this.style.color = "blue";
|
||||
} else {
|
||||
this.style.color = "";
|
||||
}
|
||||
});
|
||||
});</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">If you want to have the jQuery object instead of the regular DOM element, use the $(this) function, for example:</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
ul { font-size:18px; margin:0; }
|
||||
span { color:blue; text-decoration:underline; cursor:pointer; }
|
||||
.example { font-style:italic; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
To do list: <span>(click here to change)</span>
|
||||
<ul>
|
||||
<li>Eat</li>
|
||||
<li>Sleep</li>
|
||||
|
||||
<li>Be merry</li>
|
||||
</ul>
|
||||
<script>
|
||||
$("span").click(function () {
|
||||
$("li").each(function(){
|
||||
$(this).toggleClass("example");
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-2">
|
||||
<h4>Example: <span class="desc">You can use 'return' to break out of each() loops early.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div { width:40px; height:40px; margin:5px; float:left;
|
||||
border:2px blue solid; text-align:center; }
|
||||
span { color:red; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<button>Change colors</button>
|
||||
<span></span>
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div id="stop">Stop here</div>
|
||||
<div></div>
|
||||
|
||||
<div></div>
|
||||
<div></div>
|
||||
<script>
|
||||
$("button").click(function () {
|
||||
$("div").each(function (index, domEle) {
|
||||
// domEle == this
|
||||
$(domEle).css("backgroundColor", "yellow");
|
||||
if ($(this).is("#stop")) {
|
||||
$("span").text("Stopped at div index #" + index);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
57
experiments/api-viewer/docs/element-selector/index.html
Normal file
57
experiments/api-viewer/docs/element-selector/index.html
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>Element Selector (“element”)</h1>
|
||||
<div class="entry-meta">Categories:
|
||||
<span class="category"><a href="http://api.jquery.com/category/selectors/" title="View all posts in Selectors">Selectors</a> > <a href="http://api.jquery.com/category/selectors/basic-css-selectors/" title="View all posts in Basic">Basic</a></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="entry selector" id="element1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">element</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery('element')</h4>
|
||||
<ul class="signatures"><li><dl class="arguments">
|
||||
<dt>element</dt>
|
||||
<dd>An element to search for. Refers to the tagName of DOM nodes.</dd>
|
||||
</dl></li></ul>
|
||||
<p class="desc"><strong>Description: </strong>Selects all elements with the given tag name.</p>
|
||||
<div class="longdesc"><p>JavaScript's <code>getElementsByTagName()</code> function is called to return the appropriate elements when this expression is used.</p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds every DIV element.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div,span {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
float:left;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>DIV1</div>
|
||||
|
||||
<div>DIV2</div>
|
||||
<span>SPAN</span>
|
||||
<script>$("div").css("border","9px solid red");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
50
experiments/api-viewer/docs/empty-selector/index.html
Normal file
50
experiments/api-viewer/docs/empty-selector/index.html
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>:empty Selector</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="empty1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">empty</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery(':empty')</h4>
|
||||
<p class="desc"><strong>Description: </strong>Select all elements that have no children (including text nodes).</p>
|
||||
<div class="longdesc">
|
||||
<p>This is the inverse of <code>:parent</code>. </p>
|
||||
<p>One important thing to note with :empty (and :parent) is that child elements include text nodes.</p>
|
||||
<p>The W3C recommends that the <code><p></code> element have at least one child node, even if that child is merely text (see http://www.w3.org/TR/html401/struct/text.html#edef-P). Some other elements, on the other hand, are empty (i.e. have no children) by definition: <input>, <img>, <br>, and <hr>, for example.</p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds all elements that are empty - they don't have child elements or text.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
|
||||
td { text-align:center; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<table border="1">
|
||||
<tr><td>TD #0</td><td></td></tr>
|
||||
<tr><td>TD #2</td><td></td></tr>
|
||||
|
||||
<tr><td></td><td>TD#5</td></tr>
|
||||
</table>
|
||||
<script>$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
64
experiments/api-viewer/docs/empty/index.html
Normal file
64
experiments/api-viewer/docs/empty/index.html
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.empty()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="empty1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.empty()</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Remove all child nodes of the set of matched elements from the DOM.</p>
|
||||
<ul class="signatures"><li class="signature" id="empty"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.empty()</h4></li></ul>
|
||||
<div class="longdesc">
|
||||
<p>This method removes not only child (and other descendant) elements, but also any text within the set of matched elements. This is because, according to the DOM specification, any string of text within an element is considered a child node of that element. Consider the following HTML:</p>
|
||||
<pre><div class="container">
|
||||
<div class="hello">Hello</div>
|
||||
<div class="goodbye">Goodbye</div>
|
||||
</div></pre>
|
||||
<p>We can target any element for removal:</p>
|
||||
<pre>$('.hello').empty();</pre>
|
||||
<p>This will result in a DOM structure with the <code>Hello</code> text deleted:</p>
|
||||
<pre><div class="container">
|
||||
<div class="hello"></div>
|
||||
<div class="goodbye">Goodbye</div>
|
||||
</div></pre>
|
||||
<p>If we had any number of nested elements inside <code><div class="hello"></code>, they would be removed, too. Other jQuery constructs such as data or event handlers are erased as well.</p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Removes all child nodes (including text nodes) from all paragraphs</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
p { background:yellow; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Hello, <span>Person</span> <a href="javascript:;">and person</a>
|
||||
</p>
|
||||
|
||||
<button>Call empty() on above paragraph</button>
|
||||
<script>
|
||||
$("button").click(function () {
|
||||
$("p").empty();
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
41
experiments/api-viewer/docs/enabled-selector/index.html
Normal file
41
experiments/api-viewer/docs/enabled-selector/index.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>:enabled Selector</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="enabled1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">enabled</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery(':enabled')</h4>
|
||||
<p class="desc"><strong>Description: </strong>Selects all elements that are enabled.</p>
|
||||
<div class="longdesc"><p>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>$(':enabled')</code> is equivalent to <code>$('*:enabled')</code>, so <code>$('input:enabled')</code> should be used instead. </p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds all input elements that are enabled.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<form>
|
||||
|
||||
<input name="email" disabled="disabled" />
|
||||
<input name="id" />
|
||||
</form>
|
||||
<script>$("input:enabled").val("this is it");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
132
experiments/api-viewer/docs/end/index.html
Normal file
132
experiments/api-viewer/docs/end/index.html
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.end()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="end1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.end()</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.</p>
|
||||
<ul class="signatures"><li class="signature" id="end"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.end()</h4></li></ul>
|
||||
<div class="longdesc">
|
||||
<p>Most of the methods in this chapter operate on a jQuery object and produce a new one, matching a different set of DOM elements. When this happens, it is as if the new set of elements is pushed onto a stack that is maintained inside the object. Each successive filtering method pushes a new element set onto the stack. If we need an older element set, we can use <code>end()</code> to pop the sets back off of the stack.</p>
|
||||
<p>Suppose we have a couple short lists on a page:</p>
|
||||
<pre>
|
||||
<ul class="first">
|
||||
<li class="foo">list item 1</li>
|
||||
<li>list item 2</li>
|
||||
<li class="bar">list item 3</li>
|
||||
</ul>
|
||||
<ul class="second">
|
||||
<li class="foo">list item 1</li>
|
||||
<li>list item 2</li>
|
||||
<li class="bar">list item 3</li>
|
||||
</ul>
|
||||
</pre>
|
||||
<p>The <code>end()</code> method is useful primarily when exploiting jQuery's chaining properties. When not using chaining, we can usually just call up a previous object by variable name, so we don't need to manipulate the stack. With <code>end()</code>, though, we can string all the method calls together:</p>
|
||||
<pre>
|
||||
$('ul.first').find('.foo').css('background-color', 'red')
|
||||
<code>.end()</code>.find('.bar').css('background-color', 'green');
|
||||
</pre>
|
||||
<p>This chain searches for items with the class <code>foo</code> within the first list only and turns their backgrounds red. Then <code>end()</code> returns the object to its state before the call to <code>find()</code>, so the second <code>find()</code> looks for '.bar' inside <code><ul class="first"></code>, not just inside that list's <code><li class="foo"></code>, and turns the matching elements' backgrounds green. The net result is that items 1 and 3 of the first list have a colored background, and none of the items from the second list do.</p>
|
||||
<p>A long jQuery chain can be visualized as a structured code block, with filtering methods providing the openings of nested blocks and <code>end()</code> methods closing them:</p>
|
||||
<pre>
|
||||
$('ul.first').find('.foo')
|
||||
.css('background-color', 'red')
|
||||
.end().find('.bar')
|
||||
.css('background-color', 'green')
|
||||
.end();
|
||||
</pre>
|
||||
<p>The last <code>end()</code> is unnecessary, as we are discarding the jQuery object immediately thereafter. However, when the code is written in this form, the <code>end()</code> provides visual symmetry and closure—making the program, at least to the eyes of some developers, more readable.</p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
p, div { margin:1px; padding:1px; font-weight:bold;
|
||||
font-size:16px; }
|
||||
div { color:blue; }
|
||||
b { color:red; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Hi there <span>how</span> are you <span>doing</span>?
|
||||
</p>
|
||||
|
||||
<p>
|
||||
This <span>span</span> is one of
|
||||
several <span>spans</span> in this
|
||||
<span>sentence</span>.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
Tags in jQuery object initially: <b></b>
|
||||
</div>
|
||||
<div>
|
||||
Tags in jQuery object after find: <b></b>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
Tags in jQuery object after end: <b></b>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
jQuery.fn.showTags = function (n) {
|
||||
var tags = this.map(function () {
|
||||
return this.tagName;
|
||||
})
|
||||
.get().join(", ");
|
||||
$("b:eq(" + n + ")").text(tags);
|
||||
return this;
|
||||
};
|
||||
|
||||
$("p").showTags(0)
|
||||
.find("span")
|
||||
.showTags(1)
|
||||
.css("background", "yellow")
|
||||
.end()
|
||||
.showTags(2)
|
||||
.css("font-style", "italic");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>p { margin:10px; padding:10px; }</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p><span>Hello</span>, how are you?</p>
|
||||
<script>$("p").find("span").end().css("border", "2px red solid");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
48
experiments/api-viewer/docs/eq-selector/index.html
Normal file
48
experiments/api-viewer/docs/eq-selector/index.html
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>:eq() Selector</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="eq1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">eq</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery(':eq(index)')</h4>
|
||||
<ul class="signatures"><li><dl class="arguments">
|
||||
<dt>index</dt>
|
||||
<dd>Zero-based index of the element to match.</dd>
|
||||
</dl></li></ul>
|
||||
<p class="desc"><strong>Description: </strong>Select the element at index n within the matched set.</p>
|
||||
<div class="longdesc">
|
||||
<p>The index-related selectors (<code>:eq()</code>, <code>:lt()</code>, <code>:gt()</code>, <code>:even</code>, <code>:odd</code>) filter the set of elements that have matched the expressions that precede them. They narrow the set down based on the order of the elements within this matched set. For example, if elements are first selected with a class selector (<code>.myclass</code>) and four elements are returned, these elements are given indices <code>0</code> through <code>3</code> for the purposes of these selectors.</p>
|
||||
<p>Note that since JavaScript arrays use <em>0-based indexing</em>, these selectors reflect that fact. This is why <code>$('.myclass:eq(1)')</code> selects the second element in the document with the class myclass, rather than the first. In contrast, <code>:nth-child(n)</code> uses <em>1-based indexing</em> to conform to the CSS specification.</p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds the third td.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<table border="1">
|
||||
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
|
||||
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
|
||||
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
|
||||
</table>
|
||||
<script>$("td:eq(2)").css("color", "red");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
84
experiments/api-viewer/docs/eq/index.html
Normal file
84
experiments/api-viewer/docs/eq/index.html
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.eq()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="eq1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.eq( index )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Reduce the set of matched elements to the one at the specified index.</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="eq-index">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.1.2/">1.1.2</a></span>.eq( index )</h4>
|
||||
<p class="arguement"><strong>index</strong>An integer indicating the 0-based position of the element. </p>
|
||||
</li>
|
||||
<li class="signature" id="eq--index">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.eq( -index )</h4>
|
||||
<p class="arguement"><strong>-index</strong>An integer indicating the position of the element, counting backwards from the last element in the set. </p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="longdesc">
|
||||
<p>Given a jQuery object that represents a set of DOM elements, the <code>.eq()</code> method constructs a new jQuery object from one of the matching elements. The supplied index identifies the position of this element in the set.</p>
|
||||
<p>Consider a page with a simple list on it:</p>
|
||||
<pre>
|
||||
<ul>
|
||||
<li>list item 1</li>
|
||||
<li>list item 2</li>
|
||||
<li>list item 3</li>
|
||||
<li>list item 4</li>
|
||||
<li>list item 5</li>
|
||||
</ul>
|
||||
</pre>
|
||||
<p>We can apply this method to the set of list items:</p>
|
||||
<pre>
|
||||
$('li').eq(2).css('background-color', 'red');
|
||||
</pre>
|
||||
<p>The result of this call is a red background for item 3. Note that the supplied index is zero-based, and refers to the position of the element within the jQuery object, not within the DOM tree.</p>
|
||||
<p>If a negative number is provided, this indicates a position starting from the end of the set, rather than the beginning. For example:</p>
|
||||
<pre>
|
||||
$('li').eq(-2).css('background-color', 'red');
|
||||
</pre>
|
||||
<p>This time list item 4 is turned red, since it is two from the end of the set.</p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Turn the div with index 2 blue by adding an appropriate class.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div { width:60px; height:60px; margin:10px; float:left;
|
||||
border:2px solid blue; }
|
||||
.blue { background:blue; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<script>
|
||||
|
||||
$("div").eq(2).addClass("blue");
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
64
experiments/api-viewer/docs/error/index.html
Normal file
64
experiments/api-viewer/docs/error/index.html
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.error()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="error1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.error( handler(eventObject) )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Bind an event handler to the "error" JavaScript event.</p>
|
||||
<ul class="signatures"><li class="signature" id="error-handlereventObject">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.error( handler(eventObject) )</h4>
|
||||
<p class="arguement"><strong>handler(eventObject)</strong>A function to execute when the event is triggered.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<p>This method is a shortcut for <code>.bind('error', handler)</code>.</p>
|
||||
<p>The <code>error</code> event is sent to elements, such as images, that are referenced by a document and loaded by the browser. It is called if the element was not loaded correctly.</p>
|
||||
<p>For example, consider a page with a simple image:</p>
|
||||
<pre><img src="missing.png" alt="Book" id="book" /></pre>
|
||||
<p>The event handler can be bound to the image:</p>
|
||||
<pre>$('#book').error(function() {
|
||||
alert('Handler for .error() called.')
|
||||
});
|
||||
</pre>
|
||||
<p>If the image cannot be loaded (for example, because it is not present at the supplied URL), the alert is displayed:</p>
|
||||
<p><span class="output">Handler for .error() called.</span></p>
|
||||
<blockquote>
|
||||
<p>This event may not be correctly fired when the page is served locally. Since <code>error</code> relies on normal HTTP status codes, it will generally not be triggered if the URL uses the <code>file:</code> protocol.</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">To keep a server-side log of JavaScript errors, you might want to:</span>
|
||||
</h4>
|
||||
<pre><code class="example">$(window).error(function(msg, url, line){
|
||||
jQuery.post("js_error_log.php", { msg: msg, url: url, line: line });
|
||||
});</code></pre>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">To hide JavaScript errors from the user, you can try:</span>
|
||||
</h4>
|
||||
<pre><code class="example">$(window).error(function(){
|
||||
return true;
|
||||
});</code></pre>
|
||||
</div>
|
||||
<div id="example-2">
|
||||
<h4>Example: <span class="desc">To hide the "broken image" icons for your IE users, you can try:</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("img").error(function(){
|
||||
$(this).hide();
|
||||
});</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
49
experiments/api-viewer/docs/even-selector/index.html
Normal file
49
experiments/api-viewer/docs/even-selector/index.html
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>:even Selector</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="even1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">even</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery(':even')</h4>
|
||||
<p class="desc"><strong>Description: </strong>Selects even elements, zero-indexed. See also odd.</p>
|
||||
<div class="longdesc"><p>In particular, note that the <em>0-based indexing</em> means that, counter-intuitively, <code>:even</code> selects the first element, third element, and so on within the matched set.</p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds even table rows, matching the first, third and so on (index 0, 2, 4 etc.).</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
|
||||
table {
|
||||
background:#eeeeee;
|
||||
}
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<table border="1">
|
||||
<tr><td>Row with Index #0</td></tr>
|
||||
<tr><td>Row with Index #1</td></tr>
|
||||
|
||||
<tr><td>Row with Index #2</td></tr>
|
||||
<tr><td>Row with Index #3</td></tr>
|
||||
</table>
|
||||
<script>$("tr:even").css("background-color", "#bbbbff");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
29
experiments/api-viewer/docs/event.currentTarget/index.html
Normal file
29
experiments/api-viewer/docs/event.currentTarget/index.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>event.currentTarget</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="event.currentTarget1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">event.currentTarget</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#Element">Element</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong> The current DOM element within the event bubbling phase. </p>
|
||||
<ul class="signatures"><li class="signature" id="event.currentTarget"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.3/">1.3</a></span>event.currentTarget</h4></li></ul>
|
||||
<div class="longdesc"><p>This property will always be equal to the <code>this</code> of the function.</p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Alert that currentTarget matches the `this` keyword.</span></h4>
|
||||
<pre><code class="example">$("p").click(function(event) {
|
||||
alert( event.currentTarget === this ); // true
|
||||
}); </code></pre>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
30
experiments/api-viewer/docs/event.data/index.html
Normal file
30
experiments/api-viewer/docs/event.data/index.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>event.data</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="event.data1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">event.data</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#Anything">Anything</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong> Contains the optional data passed to jQuery.fn.bind when the current executing handler was bound. </p>
|
||||
<ul class="signatures"><li class="signature" id="event.data"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.1/">1.1</a></span>event.data</h4></li></ul>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">The description of the example.</span></h4>
|
||||
<pre><code class="example">$("a").each(function(i) {
|
||||
$(this).bind('click', {index:i}, function(e){
|
||||
alert('my index is ' + e.data.index);
|
||||
});
|
||||
}); </code></pre>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>event.isDefaultPrevented()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="event.isDefaultPrevented1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">event.isDefaultPrevented()</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Returns whether event.preventDefault() was ever called on this event object. </p>
|
||||
<ul class="signatures"><li class="signature" id="event.isDefaultPrevented"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.3/">1.3</a></span>event.isDefaultPrevented()</h4></li></ul>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Checks whether event.preventDefault() was called.</span></h4>
|
||||
<pre><code class="example">$("a").click(function(event){
|
||||
alert( event.isDefaultPrevented() ); // false
|
||||
event.preventDefault();
|
||||
alert( event.isDefaultPrevented() ); // true
|
||||
}); </code></pre>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>event.isImmediatePropagationStopped()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="event.isImmediatePropagationStopped1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">event.isImmediatePropagationStopped()</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong> Returns whether event.stopImmediatePropagation() was ever called on this event object. </p>
|
||||
<ul class="signatures"><li class="signature" id="event.isImmediatePropagationStopped"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.3/">1.3</a></span>event.isImmediatePropagationStopped()</h4></li></ul>
|
||||
<div class="longdesc"><p>This property was introduced in <a href="http://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-Event-isImmediatePropagationStopped">DOM level 3</a>.</p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Checks whether event.stopImmediatePropagation() was called.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>$("p").click(function(event){
|
||||
alert( event.isImmediatePropagationStopped() );
|
||||
event.stopImmediatePropagation();
|
||||
alert( event.isImmediatePropagationStopped() );
|
||||
}); </script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
<h4>Result:</h4>
|
||||
<pre><code class="results"></code></pre>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>event.isPropagationStopped()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="event.isPropagationStopped1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">event.isPropagationStopped()</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong> Returns whether event.stopPropagation() was ever called on this event object. </p>
|
||||
<ul class="signatures"><li class="signature" id="event.isPropagationStopped"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.3/">1.3</a></span>event.isPropagationStopped()</h4></li></ul>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Checks whether event.stopPropagation() was called</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>$("p").click(function(event){
|
||||
alert( event.isPropagationStopped() );
|
||||
event.stopPropagation();
|
||||
alert( event.isPropagationStopped() );
|
||||
}); </script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
<h4>Result:</h4>
|
||||
<pre><code class="results"></code></pre>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
41
experiments/api-viewer/docs/event.pageX/index.html
Normal file
41
experiments/api-viewer/docs/event.pageX/index.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>event.pageX</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="event.pageX1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">event.pageX</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#Number">Number</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>The mouse position relative to the left edge of the document. </p>
|
||||
<ul class="signatures"><li class="signature" id="event.pageX"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0.4/">1.0.4</a></span>event.pageX</h4></li></ul>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Show the mouse position relative to the left and top edges of the document (within the iframe).</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>body {background-color: #eef; }
|
||||
div { padding: 20px; }</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>$(document).bind('mousemove',function(e){
|
||||
$("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
|
||||
}); </script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
41
experiments/api-viewer/docs/event.pageY/index.html
Normal file
41
experiments/api-viewer/docs/event.pageY/index.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>event.pageY</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="event.pageY1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">event.pageY</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#Number">Number</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>The mouse position relative to the top edge of the document. </p>
|
||||
<ul class="signatures"><li class="signature" id="event.pageY"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0.4/">1.0.4</a></span>event.pageY</h4></li></ul>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Show the mouse position relative to the left and top edges of the document (within this iframe).</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>body {background-color: #eef; }
|
||||
div { padding: 20px; }</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>$(document).bind('mousemove',function(e){
|
||||
$("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
|
||||
}); </script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
48
experiments/api-viewer/docs/event.preventDefault/index.html
Normal file
48
experiments/api-viewer/docs/event.preventDefault/index.html
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>event.preventDefault()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="event.preventDefault1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">event.preventDefault()</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#undefined">undefined</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong> If this method is called, the default action of the event will not be triggered. </p>
|
||||
<ul class="signatures"><li class="signature" id="event.preventDefault"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>event.preventDefault()</h4></li></ul>
|
||||
<div class="longdesc"><p>For example, clicked anchors will not take the browser to a new URL. We can use <code>event.isDefaultPrevented()</code> to determine if this method has been called by an event handler that was triggered by this event.</p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Cancel the default action (navigation) of the click.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<a href="http://jquery.com">default click action is prevented</a>
|
||||
<div id="log"></div>
|
||||
|
||||
<script>
|
||||
$("a").click(function(event) {
|
||||
event.preventDefault();
|
||||
$('<div/>')
|
||||
.append('default ' + event.type + ' prevented')
|
||||
.appendTo('#log');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
29
experiments/api-viewer/docs/event.relatedTarget/index.html
Normal file
29
experiments/api-viewer/docs/event.relatedTarget/index.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>event.relatedTarget</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="event.relatedTarget1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">event.relatedTarget</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#Element">Element</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong> The other DOM element involved in the event, if any. </p>
|
||||
<ul class="signatures"><li class="signature" id="event.relatedTarget"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.1.4/">1.1.4</a></span>event.relatedTarget</h4></li></ul>
|
||||
<div class="longdesc"><p>For <code>mouseout</code>, indicates the element being entered; for <code>mousein</code>, indicates the element being exited. </p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">On mouseout of anchors, alert the element type being entered.</span></h4>
|
||||
<pre><code class="example">$("a").mouseout(function(event) {
|
||||
alert(event.relatedTarget.nodeName); // "DIV"
|
||||
}); </code></pre>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
44
experiments/api-viewer/docs/event.result/index.html
Normal file
44
experiments/api-viewer/docs/event.result/index.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>event.result</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="event.result1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">event.result</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#Object">Object</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong> This attribute contains the last value returned by an event handler that was triggered by this event, unless the value was undefined. </p>
|
||||
<ul class="signatures"><li class="signature" id="event.result"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.3/">1.3</a></span>event.result</h4></li></ul>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Alert previous handler's return value</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>$("p").click(function(event) {
|
||||
return "hey"
|
||||
});
|
||||
$("p").click(function(event) {
|
||||
alert( event.result );
|
||||
}); </script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
<h4>Result:</h4>
|
||||
<pre><code class="results">"hey" </code></pre>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>event.stopImmediatePropagation()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="event.stopImmediatePropagation1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">event.stopImmediatePropagation()</span> <span class="returns"></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong> Keeps the rest of the handlers from being executed.
|
||||
</p>
|
||||
<ul class="signatures"><li class="signature" id="event.stopImmediatePropagation"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.3/">1.3</a></span>event.stopImmediatePropagation()</h4></li></ul>
|
||||
<div class="longdesc"><p>This method also stops the bubbling by implicitly calling <code>event.stopPropagation()</code>. Use <code>event.isImmediatePropagationStopped()</code> to know whether this method was ever called (on that event object).</p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Prevents other event handlers from being called.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
p { height: 30px; width: 150px; background-color: #ccf; }
|
||||
div {height: 30px; width: 150px; background-color: #cfc; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>paragraph</p>
|
||||
<div>division</div>
|
||||
<script>
|
||||
$("p").click(function(event){
|
||||
event.stopImmediatePropagation();
|
||||
});
|
||||
$("p").click(function(event){
|
||||
// This function won't be executed
|
||||
$(this).css("background-color", "#f00");
|
||||
});
|
||||
$("div").click(function(event) {
|
||||
// This function will be executed
|
||||
$(this).css("background-color", "#f00");
|
||||
});</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
47
experiments/api-viewer/docs/event.stopPropagation/index.html
Normal file
47
experiments/api-viewer/docs/event.stopPropagation/index.html
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>event.stopPropagation()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="event.stopPropagation1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">event.stopPropagation()</span> <span class="returns"></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong> This method prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. </p>
|
||||
<ul class="signatures"><li class="signature" id="event.stopPropagation"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>event.stopPropagation()</h4></li></ul>
|
||||
<div class="longdesc">
|
||||
<p>We can use <code>.isPropagationStopped()</code> to determine if this method has been called by an event handler that was triggered by this event. </p>
|
||||
<p>This method works for custom events triggered with <a href="/trigger">trigger()</a>, as well.</p>
|
||||
<p>Note that this will not prevent other handlers <em>on the same element</em> from running. Use the method <a href="/event.isPropagationStopped">event.isPropagationStopped()</a> to know whether this method was ever called (on that event object). </p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Kill the bubbling on the click event.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>$("p").click(function(event){
|
||||
event.stopPropagation();
|
||||
// do something
|
||||
}); </script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
<h4>Result:</h4>
|
||||
<pre><code class="results"></code></pre>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
89
experiments/api-viewer/docs/event.target/index.html
Normal file
89
experiments/api-viewer/docs/event.target/index.html
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>event.target</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="event.target1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">event.target</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#Element">Element</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong> The DOM element that initiated the event. </p>
|
||||
<ul class="signatures"><li class="signature" id="event.target"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>event.target</h4></li></ul>
|
||||
<div class="longdesc"><p>This can be the element that registered for the event or a child of it. It is often useful to compare <code>event.target</code> to <code>this</code> in order to determine if the event is being handled due to event bubbling. This property is very useful in event delegation, when events bubble.</p></div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Display the tag's name on click</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
span, strong, p {
|
||||
padding: 8px; display: block; border: 1px solid #999; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="log"></div>
|
||||
<div>
|
||||
<p>
|
||||
<strong><span>click</span></strong>
|
||||
</p>
|
||||
</div>
|
||||
<script>$("body").click(function(event) {
|
||||
$("#log").html("clicked: " + event.target.nodeName);
|
||||
}); </script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">Implements 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.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li>item 1
|
||||
<ul>
|
||||
<li>sub item 1-a</li>
|
||||
<li>sub item 1-b</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>item 2
|
||||
<ul>
|
||||
<li>sub item 2-a</li>
|
||||
<li>sub item 2-b</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<script>function handler(event) {
|
||||
var $target = $(event.target);
|
||||
if( $target.is("li") ) {
|
||||
$target.children().toggle();
|
||||
}
|
||||
}
|
||||
$("ul").click(handler).find("ul").hide();</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
44
experiments/api-viewer/docs/event.timeStamp/index.html
Normal file
44
experiments/api-viewer/docs/event.timeStamp/index.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>event.timeStamp</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="event.timeStamp1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">event.timeStamp</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#Number">Number</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong> This attribute returns the number of milliseconds since January 1, 1970, when the event is triggered. </p>
|
||||
<ul class="signatures"><li class="signature" id="event.timeStamp"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.2.6/">1.2.6</a></span>event.timeStamp</h4></li></ul>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Alert the time since click handler last executed.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>var last;
|
||||
$(document.body).click(function(event) {
|
||||
if( last )
|
||||
alert( "time since last event " + event.timeStamp - last );
|
||||
last = event.timeStamp;
|
||||
}); </script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
<h4>Result:</h4>
|
||||
<pre><code class="results"></code></pre>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
28
experiments/api-viewer/docs/event.type/index.html
Normal file
28
experiments/api-viewer/docs/event.type/index.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>event.type</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="event.type1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">event.type</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#String">String</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong> Describes the nature of the event. </p>
|
||||
<ul class="signatures"><li class="signature" id="event.type"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>event.type</h4></li></ul>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">On all anchor clicks, alert the event type.</span></h4>
|
||||
<pre><code class="example">$("a").click(function(event) {
|
||||
alert(event.type); // "click"
|
||||
}); </code></pre>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
44
experiments/api-viewer/docs/event.which/index.html
Normal file
44
experiments/api-viewer/docs/event.which/index.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>event.which</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="event.which1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">event.which</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#String">String</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong> For key or button events, this attribute indicates the specific button or key that was pressed. </p>
|
||||
<ul class="signatures"><li class="signature" id="event.which"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.1.3/">1.1.3</a></span>event.which</h4></li></ul>
|
||||
<div class="longdesc"><p><code>event.which</code> normalizes <code>event.keyCode</code> and <code>event.charCode</code>. It is recommended to watch <code>event.which</code> for keyboard key input. For more detail, read about <a href="https://developer.mozilla.org/en/DOM/event.charCode#Notes">event.charCode on the MDC</a>. </p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Log what key was depressed.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<input id="whichkey" value="type something">
|
||||
<div id="log"></div>
|
||||
<script>$('#whichkey').bind('keydown',function(e){
|
||||
$('#log').html(e.type + ': ' + e.which );
|
||||
}); </script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
<h4>Result:</h4>
|
||||
<pre><code class="results">"keydown" 74 </code></pre>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
118
experiments/api-viewer/docs/fadeIn/index.html
Normal file
118
experiments/api-viewer/docs/fadeIn/index.html
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.fadeIn()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="fadeIn1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.fadeIn( [ duration ], [ callback ] )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Display the matched elements by fading them to opaque.</p>
|
||||
<ul class="signatures"><li class="signature" id="fadeIn-duration-callback">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.fadeIn( [ duration ], [ callback ] )</h4>
|
||||
<p class="arguement"><strong>duration</strong>A string or number determining how long the animation will run.</p>
|
||||
<p class="arguement"><strong>callback</strong>A function to call once the animation is complete.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<p>The <code>.fadeIn()</code> method animates the opacity of the matched elements.</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 <code>200</code> and <code>600</code> milliseconds, respectively. If any other string is supplied, or if the <code>duration</code> parameter is omitted, the default duration of <code>400</code> milliseconds is used.</p>
|
||||
<p>If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but <code>this</code> is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.</p>
|
||||
<p>We can animate any element, such as a simple image:</p>
|
||||
<pre><div id="clickme">
|
||||
Click here
|
||||
</div>
|
||||
<img id="book" src="book.png" alt="" width="100" height="123" />
|
||||
With the element initially hidden, we can show it slowly:
|
||||
$('#clickme').click(function() {
|
||||
$('#book').fadeIn('slow', function() {
|
||||
// Animation complete
|
||||
});
|
||||
});</pre>
|
||||
<p class="image four-across">
|
||||
<img src="http://api.jquery.com/images/0042_06_33.png" alt=""><img src="http://api.jquery.com/images/0042_06_34.png" alt=""><img src="http://api.jquery.com/images/0042_06_35.png" alt=""><img src="http://api.jquery.com/images/0042_06_36.png" alt=""></p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Animates hidden divs to fade in one by one, completing each animation within 600 milliseconds.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
span { color:red; cursor:pointer; }
|
||||
div { margin:3px; width:80px; display:none;
|
||||
height:80px; float:left; }
|
||||
div#one { background:#f00; }
|
||||
div#two { background:#0f0; }
|
||||
div#three { background:#00f; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<span>Click here...</span>
|
||||
|
||||
<div id="one"></div>
|
||||
<div id="two"></div>
|
||||
<div id="three"></div>
|
||||
<script>
|
||||
$(document.body).click(function () {
|
||||
$("div:hidden:first").fadeIn("slow");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">Fades a red block in over the text. Once the animation is done, it quickly fades in more text on top.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
p { position:relative; width:400px; height:90px; }
|
||||
div { position:absolute; width:400px; height:65px;
|
||||
font-size:36px; text-align:center;
|
||||
color:yellow; background:red;
|
||||
padding-top:25px;
|
||||
top:0; left:0; display:none; }
|
||||
span { display:none; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Let it be known that the party of the first part
|
||||
and the party of the second part are henceforth
|
||||
and hereto directed to assess the allegations
|
||||
for factual correctness... (<a href="#">click!</a>)
|
||||
<div><span>CENSORED!</span></div>
|
||||
|
||||
</p>
|
||||
<script>
|
||||
$("a").click(function () {
|
||||
$("div").fadeIn(3000, function () {
|
||||
$("span").fadeIn(100);
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
113
experiments/api-viewer/docs/fadeOut/index.html
Normal file
113
experiments/api-viewer/docs/fadeOut/index.html
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.fadeOut()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="fadeOut1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.fadeOut( [ duration ], [ callback ] )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Hide the matched elements by fading them to transparent.</p>
|
||||
<ul class="signatures"><li class="signature" id="fadeOut-duration-callback">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.fadeOut( [ duration ], [ callback ] )</h4>
|
||||
<p class="arguement"><strong>duration</strong>A string or number determining how long the animation will run.</p>
|
||||
<p class="arguement"><strong>callback</strong>A function to call once the animation is complete.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<p>The <code>.fadeOut()</code> method animates the opacity of the matched elements. Once the opacity reaches 0, the <code>display</code> style property is set to <code>none</code>, so the element no longer affects the layout of the page.</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 <code>200</code> and <code>600</code> milliseconds, respectively. If any other string is supplied, or if the <code>duration</code> parameter is omitted, the default duration of <code>400</code> milliseconds is used.</p>
|
||||
<p>If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but <code>this</code> is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.</p>
|
||||
<p>We can animate any element, such as a simple image:</p>
|
||||
<pre><div id="clickme">
|
||||
Click here
|
||||
</div>
|
||||
<img id="book" src="book.png" alt="" width="100" height="123" /></pre>
|
||||
<p>With the element initially shown, we can hide it slowly:</p>
|
||||
<pre>$('#clickme').click(function() {
|
||||
$('#book').fadeOut('slow', function() {
|
||||
// Animation complete.
|
||||
});
|
||||
});</pre>
|
||||
<p class="image four-across">
|
||||
<img src="http://api.jquery.com/images/0042_06_37.png" alt=""><img src="http://api.jquery.com/images/0042_06_38.png" alt=""><img src="http://api.jquery.com/images/0042_06_39.png" alt=""><img src="http://api.jquery.com/images/0042_06_40.png" alt=""></p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Animates all paragraphs to fade out, completing the animation within 600 milliseconds.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
p { font-size:150%; cursor:pointer; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
If you click on this paragraph
|
||||
you'll see it just fade away.
|
||||
</p>
|
||||
<script>
|
||||
$("p").click(function () {
|
||||
$("p").fadeOut("slow");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">Fades out spans in one section that you click on.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
span { cursor:pointer; }
|
||||
span.hilite { background:yellow; }
|
||||
div { display:inline; color:red; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h3>Find the modifiers - <div></div></h3>
|
||||
<p>
|
||||
If you <span>really</span> want to go outside
|
||||
<span>in the cold</span> then make sure to wear
|
||||
your <span>warm</span> jacket given to you by
|
||||
your <span>favorite</span> teacher.
|
||||
</p>
|
||||
<script>
|
||||
|
||||
$("span").click(function () {
|
||||
$(this).fadeOut(1000, function () {
|
||||
$("div").text("'" + $(this).text() + "' has faded!");
|
||||
$(this).remove();
|
||||
});
|
||||
});
|
||||
$("span").hover(function () {
|
||||
$(this).addClass("hilite");
|
||||
}, function () {
|
||||
$(this).removeClass("hilite");
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
157
experiments/api-viewer/docs/fadeTo/index.html
Normal file
157
experiments/api-viewer/docs/fadeTo/index.html
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.fadeTo()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="fadeTo1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.fadeTo( duration, opacity, [ callback ] )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Adjust the opacity of the matched elements.</p>
|
||||
<ul class="signatures"><li class="signature" id="fadeTo-duration-opacity-callback">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.fadeTo( duration, opacity, [ callback ] )</h4>
|
||||
<p class="arguement"><strong>duration</strong>A string or number determining how long the animation will run.</p>
|
||||
<p class="arguement"><strong>opacity</strong>A number between 0 and 1 denoting the target opacity.</p>
|
||||
<p class="arguement"><strong>callback</strong>A function to call once the animation is complete.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<p>The <code>.fadeTo()</code> method animates the opacity of the matched elements.</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 <code>200</code> and <code>600</code> milliseconds, respectively. If any other string is supplied, the default duration of <code>400</code> milliseconds is used. Unlike the other effect methods, <code>.fadeTo()</code> requires that <code>duration</code> be explicitly specified.</p>
|
||||
<p>If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but <code>this</code> is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.</p>
|
||||
<p>We can animate any element, such as a simple image:</p>
|
||||
<pre><div id="clickme">
|
||||
Click here
|
||||
</div>
|
||||
<img id="book" src="book.png" alt="" width="100" height="123" />
|
||||
With the element initially shown, we can dim it slowly:
|
||||
$('#clickme').click(function() {
|
||||
$('#book').fadeTo('slow', 0.5, function() {
|
||||
// Animation complete.
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
<p class="image four-across">
|
||||
<img src="http://api.jquery.com/images/0042_06_41.png" alt=""><img src="http://api.jquery.com/images/0042_06_42.png" alt=""><img src="http://api.jquery.com/images/0042_06_43.png" alt=""><img src="http://api.jquery.com/images/0042_06_44.png" alt=""></p>
|
||||
<p>With <code>duration</code> set to <code>0</code>, this method just changes the <code>opacity</code> CSS property, so <code>.fadeTo(0, opacity)</code> is the same as <code>.css('opacity', opacity)</code>.</p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Animates first paragraph to fade to an opacity of 0.33 (33%, about one third visible), completing the animation within 600 milliseconds.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Click this paragraph to see it fade.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Compare to this one that won't fade.
|
||||
</p>
|
||||
<script>
|
||||
$("p:first").click(function () {
|
||||
$(this).fadeTo("slow", 0.33);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">Fade div to a random opacity on each click, completing the animation within 200 milliseconds.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
p { width:80px; margin:0; padding:5px; }
|
||||
div { width:40px; height:40px; position:absolute; }
|
||||
div#one { top:0; left:0; background:#f00; }
|
||||
div#two { top:20px; left:20px; background:#0f0; }
|
||||
div#three { top:40px; left:40px; background:#00f; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>And this is the library that John built...</p>
|
||||
|
||||
<div id="one"></div>
|
||||
<div id="two"></div>
|
||||
<div id="three"></div>
|
||||
<script>
|
||||
$("div").click(function () {
|
||||
$(this).fadeTo("fast", Math.random());
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-2">
|
||||
<h4>Example: <span class="desc">Find the right answer! The fade will take 250 milliseconds and change various styles when it completes.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div, p { width:80px; height:40px; top:0; margin:0;
|
||||
position:absolute; padding-top:8px; }
|
||||
p { background:#fcc; text-align:center; }
|
||||
div { background:blue; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Wrong</p>
|
||||
<div></div>
|
||||
<p>Wrong</p>
|
||||
<div></div>
|
||||
|
||||
<p>Right!</p>
|
||||
<div></div>
|
||||
<script>
|
||||
var getPos = function (n) {
|
||||
return (Math.floor(n) * 90) + "px";
|
||||
};
|
||||
$("p").each(function (n) {
|
||||
var r = Math.floor(Math.random() * 3);
|
||||
var tmp = $(this).text();
|
||||
$(this).text($("p:eq(" + r + ")").text());
|
||||
$("p:eq(" + r + ")").text(tmp);
|
||||
$(this).css("left", getPos(n));
|
||||
});
|
||||
$("div").each(function (n) {
|
||||
$(this).css("left", getPos(n));
|
||||
})
|
||||
.css("cursor", "pointer")
|
||||
.click(function () {
|
||||
$(this).fadeTo(250, 0.25, function () {
|
||||
$(this).css("cursor", "")
|
||||
.prev().css({"font-weight": "bolder",
|
||||
"font-style": "italic"});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
67
experiments/api-viewer/docs/file-selector/index.html
Normal file
67
experiments/api-viewer/docs/file-selector/index.html
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>:file Selector</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="file1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">file</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery(':file')</h4>
|
||||
<p class="desc"><strong>Description: </strong>Selects all elements of type file.</p>
|
||||
<div class="longdesc"><p>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>$(':file')</code> is equivalent to <code>$('*:file')</code>, so <code>$('input:file')</code> should be used instead. </p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds all file inputs.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
textarea { height:45px; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<form>
|
||||
<input type="button" value="Input Button"/>
|
||||
<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>
|
||||
<script>
|
||||
|
||||
var input = $("input:file").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
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
153
experiments/api-viewer/docs/filter/index.html
Normal file
153
experiments/api-viewer/docs/filter/index.html
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.filter()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="filter1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.filter( selector )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Reduce the set of matched elements to those that match the selector or pass the function's test. </p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="filter-selector">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.filter( selector )</h4>
|
||||
<p class="arguement"><strong>selector</strong>A string containing a selector expression to match elements against.</p>
|
||||
</li>
|
||||
<li class="signature" id="filter-functionindex">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.filter( function(index) )</h4>
|
||||
<p class="arguement"><strong>function(index)</strong>A function used as a test for each element in the set. <code>this</code> is the current DOM element.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="longdesc">
|
||||
<p>Given a jQuery object that represents a set of DOM elements, the <code>.filter()</code> method constructs a new jQuery object from a subset of the matching elements. The supplied selector is tested against each element; all elements matching the selector will be included in the result.</p>
|
||||
<p>Consider a page with a simple list on it:</p>
|
||||
<p>We can apply this method to the set of list items:</p>
|
||||
<pre>
|
||||
$('li').filter(':even').css('background-color', 'red');
|
||||
</pre>
|
||||
<p>The result of this call is a red background for items 1, 3, and 5, as they match the selector (recall that <code>:even</code> and <code>:odd</code> use 0-based indexing).</p>
|
||||
<h4 id="using-filter-function">Using a Filter Function</h4>
|
||||
<p>The second form of this method allows us to filter elements against a function rather than a selector. For each element, if the function returns <code>true</code>, the element will be included in the filtered set; otherwise, it will be excluded. Suppose we have a somewhat more involved HTML snippet:</p>
|
||||
<pre>
|
||||
<ul>
|
||||
<li><strong>list</strong> item 1 -
|
||||
one strong tag</li>
|
||||
<li><strong>list</strong> item <strong>2</strong> -
|
||||
two <span>strong tags</span></li>
|
||||
<li>list item 3</li>
|
||||
<li>list item 4</li>
|
||||
<li>list item 5</li>
|
||||
<li>list item 6</li>
|
||||
</ul>
|
||||
</pre>
|
||||
<p>We can select the list items, then filter them based on their contents:</p>
|
||||
<pre>
|
||||
$('li').filter(function(index) {
|
||||
return $('strong', this).length == 1;
|
||||
}).css('background-color', 'red');
|
||||
</pre>
|
||||
<p>This code will alter the first list item only, as it contains exactly one <code><strong></code> tag. Within the filter function, <code>this</code> refers to each DOM element in turn. The parameter passed to the function tells us the index of that DOM element within the set matched by the jQuery object.</p>
|
||||
<p>We can also take advantage of the <code>index</code> passed through the function, which indicates the 0-based position of the element within the unfiltered set of matched elements:</p>
|
||||
<pre>
|
||||
$('li').filter(function(index) {
|
||||
return index % 3 == 2;
|
||||
}).css('background-color', 'red');
|
||||
</pre>
|
||||
<p>This alteration to the code will cause the third and sixth list items to be highlighted, as it uses the modulus operator (<code>%</code>) to select every item with an <code>index</code> value that, when divided by 3, has a remainder of <code>2</code>.</p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Change the color of all divs then put a border around only some of them.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div { width:60px; height:60px; margin:5px; float:left;
|
||||
border:2px white solid;}
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
|
||||
<div class="middle"></div>
|
||||
<div class="middle"></div>
|
||||
<div class="middle"></div>
|
||||
<div class="middle"></div>
|
||||
|
||||
<div></div>
|
||||
<script>
|
||||
|
||||
$("div").css("background", "#c8ebcc")
|
||||
.filter(".middle")
|
||||
.css("border-color", "red");
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">Selects all paragraphs and removes those without a class "selected".</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("p").filter(".selected")</code></pre>
|
||||
</div>
|
||||
<div id="example-2">
|
||||
<h4>Example: <span class="desc">Selects all paragraphs and removes those that aren't of class "selected" or the first one.</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("p").filter(".selected, :first")</code></pre>
|
||||
</div>
|
||||
<div id="example-3">
|
||||
<h4>Example: <span class="desc">Change the color of all divs then put a border to specific ones.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div { width:60px; height:60px; margin:5px; float:left;
|
||||
border:3px white solid; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="first"></div>
|
||||
<div id="second"></div>
|
||||
<div id="third"></div>
|
||||
|
||||
<div id="fourth"></div>
|
||||
<div id="fifth"></div>
|
||||
<div id="sixth"></div>
|
||||
<script>
|
||||
$("div").css("background", "#b4b0da")
|
||||
.filter(function (index) {
|
||||
return index == 1 || $(this).attr("id") == "fourth";
|
||||
})
|
||||
.css("border", "3px double red");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-4">
|
||||
<h4>Example: <span class="desc">Remove all elements that have a descendant ol element</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("div").filter(function(index) {
|
||||
return $("ol", this).length == 0;
|
||||
});</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
111
experiments/api-viewer/docs/find/index.html
Normal file
111
experiments/api-viewer/docs/find/index.html
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.find()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="find1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.find( selector )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Get the descendants of each element in the current set of matched elements, filtered by a selector.</p>
|
||||
<ul class="signatures"><li class="signature" id="find-selector">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.find( selector )</h4>
|
||||
<p class="arguement"><strong>selector</strong>A string containing a selector expression to match elements against.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<p>Given a jQuery object that represents a set of DOM elements, the <code>.find()</code> method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements. The <code>.find()</code> and <code>.children()</code> methods are similar, except that the latter only travels a single level down the DOM tree.</p>
|
||||
<p>The method accepts a selector expression of the same type that we can pass to the $() function. The elements will be filtered by testing whether they match this selector.</p>
|
||||
<p>Consider a page with a basic nested list on it:</p>
|
||||
<pre>
|
||||
<ul class="level-1">
|
||||
<li class="item-i">I</li>
|
||||
<li class="item-ii">II
|
||||
<ul class="level-2">
|
||||
<li class="item-a">A</li>
|
||||
<li class="item-b">B
|
||||
<ul class="level-3">
|
||||
<li class="item-1">1</li>
|
||||
<li class="item-2">2</li>
|
||||
<li class="item-3">3</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="item-c">C</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="item-iii">III</li>
|
||||
</ul>
|
||||
</pre>
|
||||
<p>If we begin at item II, we can find list items within it:</p>
|
||||
<pre>$('li.item-ii').find('li').css('background-color', 'red');</pre>
|
||||
<p>The result of this call is a red background on items A, B, 1, 2, 3, and C. Even though item II matches the selector expression, it is not included in the results; only descendants are considered candidates for the match.</p>
|
||||
<p>As discussed in “The jQuery Factory Function” section above, selector context is implemented with the <code>.find()</code> <code>method;</code> therefore, <code>$('li.item-ii').find('li')</code> is equivalent to <code>$('li', 'li.item-ii')</code>.</p>
|
||||
<blckquote>Unlike in the rest of the tree traversal methods, the selector expression is required in a call to <code>.find()</code>. If we need to retrieve all of the descendant elements, we can pass in the universal selector <code>'*'</code> to accomplish this.</blckquote>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Starts with all paragraphs and searches for descendant span elements, same as $("p span")</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p><span>Hello</span>, how are you?</p>
|
||||
|
||||
<p>Me? I'm <span>good</span>.</p>
|
||||
<script>$("p").find("span").css('color','red');</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">Add spans around each word then add a hover and italicize words with the letter t.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
p { font-size:20px; width:200px; cursor:default;
|
||||
color:blue; font-weight:bold; margin:0 10px; }
|
||||
.hilite { background:yellow; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
When the day is short
|
||||
find that which matters to you
|
||||
or stop believing
|
||||
</p>
|
||||
<script>
|
||||
var newText = $("p").text().split(" ").join("</span> <span>");
|
||||
newText = "<span>" + newText + "</span>";
|
||||
|
||||
$("p").html(newText)
|
||||
.find('span')
|
||||
.hover(function () { $(this).addClass("hilite"); },
|
||||
function () { $(this).removeClass("hilite"); })
|
||||
.end()
|
||||
.find(":contains('t')")
|
||||
.css({"font-style":"italic", "font-weight":"bolder"});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
61
experiments/api-viewer/docs/first-child-selector/index.html
Normal file
61
experiments/api-viewer/docs/first-child-selector/index.html
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>:first-child Selector</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="first-child1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">first-child</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.1.4/">1.1.4</a></span>jQuery(':first-child')</h4>
|
||||
<p class="desc"><strong>Description: </strong>Selects all elements that are the first child of their parent.</p>
|
||||
<div class="longdesc"><p>While <a href="/first-selector">:first</a> matches only a single element, the <code>:first-child</code> selector can match more than one: one for each parent. This is equivalent to <code>:nth-child(1)</code>.</p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds the first span in each matched div to underline and add a hover state.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
span { color:#008; }
|
||||
span.sogreen { color:green; font-weight: bolder; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<span>John,</span>
|
||||
<span>Karl,</span>
|
||||
<span>Brandon</span>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<span>Glen,</span>
|
||||
<span>Tane,</span>
|
||||
<span>Ralph</span>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
$("div span:first-child")
|
||||
.css("text-decoration", "underline")
|
||||
.hover(function () {
|
||||
$(this).addClass("sogreen");
|
||||
}, function () {
|
||||
$(this).removeClass("sogreen");
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
46
experiments/api-viewer/docs/first-selector/index.html
Normal file
46
experiments/api-viewer/docs/first-selector/index.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>:first Selector</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="first1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">first</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery(':first')</h4>
|
||||
<p class="desc"><strong>Description: </strong>Selects the first matched element.</p>
|
||||
<div class="longdesc"><p>The <code>:first</code> pseudo-class is equivalent to <code>:eq(0)</code>. It could also be written as <code>:lt(1)</code>. While this matches only a single element, <a href="first-child-selector">:first-child</a> can match more than one: One for each parent.</p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds the first table row.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
|
||||
td { color:blue; font-weight:bold; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr><td>Row 1</td></tr>
|
||||
<tr><td>Row 2</td></tr>
|
||||
|
||||
<tr><td>Row 3</td></tr>
|
||||
</table>
|
||||
<script>$("tr:first").css("font-style", "italic");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
54
experiments/api-viewer/docs/first/index.html
Normal file
54
experiments/api-viewer/docs/first/index.html
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.first()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="first1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.first()</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Reduce the set of matched elements to the first in the set.</p>
|
||||
<ul class="signatures"><li class="signature" id="first"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.first()</h4></li></ul>
|
||||
<div class="longdesc">
|
||||
<p>Given a jQuery object that represents a set of DOM elements, the <code>.first()</code> method constructs a new jQuery object from the first matching element.</p>
|
||||
<p>Consider a page with a simple list on it:</p>
|
||||
<pre>
|
||||
<ul>
|
||||
<li>list item 1</li>
|
||||
<li>list item 2</li>
|
||||
<li>list item 3</li>
|
||||
<li>list item 4</li>
|
||||
<li>list item 5</li>
|
||||
</ul>
|
||||
</pre>
|
||||
<p>We can apply this method to the set of list items:</p>
|
||||
<pre>$('li').first().css('background-color', 'red');</pre>
|
||||
<p>The result of this call is a red background for the first item.</p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Highlight the first span in a paragraph.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>.highlight{background-color: yellow}</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p><span>Look:</span> <span>This is some text in a paragraph.</span> <span>This is a note about it.</span></p>
|
||||
<script>$("p span").first().addClass('highlight');</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
97
experiments/api-viewer/docs/focus/index.html
Normal file
97
experiments/api-viewer/docs/focus/index.html
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.focus()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="focus1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.focus( handler(eventObject) )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Bind an event handler to the "focus" JavaScript event, or trigger that event on an element.</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="focus-handlereventObject">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.focus( handler(eventObject) )</h4>
|
||||
<p class="arguement"><strong>handler(eventObject)</strong>A function to execute each time the event is triggered.</p>
|
||||
</li>
|
||||
<li class="signature" id="focus"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.focus()</h4></li>
|
||||
</ul>
|
||||
<div class="longdesc">
|
||||
<ul>
|
||||
<li>This method is a shortcut for <code>.bind('focus', handler)</code> in the first variation, and <code>.trigger('focus')</code> in the second.</li>
|
||||
<li>The <code>focus</code> event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (<code><input></code>, <code><select></code>, etc.) and links (<code><a href></code>). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's <code>tabindex</code> property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.</li>
|
||||
<li>Elements with focus are usually highlighted in some way by the browser, for example with a dotted line surrounding the element. The focus is used to determine which element is the first to receive keyboard-related events.</li>
|
||||
</ul>
|
||||
<p>For example, consider the HTML:</p>
|
||||
<pre><form>
|
||||
<input id="target" type="text" value="Field 1" />
|
||||
<input type="text" value="Field 2" />
|
||||
</form>
|
||||
<div id="other">
|
||||
Trigger the handler
|
||||
</div>
|
||||
</pre>
|
||||
<p>The event handler can be bound to the first input field:</p>
|
||||
<pre>$('#target').focus(function() {
|
||||
alert('Handler for .focus() called.');
|
||||
});</pre>
|
||||
<p>Now if we click on the first field, or tab to it from another field, the alert is displayed:</p>
|
||||
<p><span class="output">Handler for .focus() called.</span></p>
|
||||
<p>We can trigger the event when another element is clicked:</p>
|
||||
<pre>$('#other').click(function() {
|
||||
$('#target').focus();
|
||||
});</pre>
|
||||
<p>After this code executes, clicks on <span class="output">Trigger the handler</span> will also alert the message.</p>
|
||||
<p>The <code>focus</code> event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the <code>focus</code> event will not work consistently across browsers.</p>
|
||||
<blockquote><p>Triggering the focus on hidden elements causes an error in Internet Explorer. Take care to only call <code>.focus()</code> without parameters on elements that are visible.</p></blockquote>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Fire focus.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>span {display:none;}</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p><input type="text" /> <span>focus fire</span></p>
|
||||
|
||||
<p><input type="password" /> <span>focus fire</span></p>
|
||||
<script>
|
||||
$("input").focus(function () {
|
||||
$(this).next("span").css('display','inline').fadeOut(1000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">To stop people from writing in text input boxes, try:</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("input[type=text]").focus(function(){
|
||||
$(this).blur();
|
||||
});</code></pre>
|
||||
</div>
|
||||
<div id="example-2">
|
||||
<h4>Example: <span class="desc">To focus on a login input box with id 'login' on page startup, try:</span>
|
||||
</h4>
|
||||
<pre><code class="example">$(document).ready(function(){
|
||||
$("#login").focus();
|
||||
});</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
51
experiments/api-viewer/docs/focusin/index.html
Normal file
51
experiments/api-viewer/docs/focusin/index.html
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.focusin()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="focusin1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.focusin( handler(eventObject) )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Bind an event handler to the "focusin" JavaScript event.</p>
|
||||
<ul class="signatures"><li class="signature" id="focusin-handlereventObject">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.focusin( handler(eventObject) )</h4>
|
||||
<p class="arguement"><strong>handler(eventObject)</strong>A function to execute each time the event is triggered.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<p>This method is a shortcut for <code>.bind('focusin', handler)</code>.</p>
|
||||
<p>The <code>focusin</code> event is sent to an element when it, or any element inside of it, gains focus. This is distinct from the <a href="/focus">focus</a> event in that it supports detecting the focus event on parent elements.</p>
|
||||
<p>This event will likely be used together with the <a href="/focusout">focusout</a> event.</p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Watch for a focus to occur within the paragraphs on the page.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>span {display:none;}</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p><input type="text" /> <span>focusin fire</span></p>
|
||||
<p><input type="password" /> <span>focusin fire</span></p>
|
||||
<script>
|
||||
$("p").focusin(function() {
|
||||
$(this).find("span").css('display','inline').fadeOut(1000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
58
experiments/api-viewer/docs/focusout/index.html
Normal file
58
experiments/api-viewer/docs/focusout/index.html
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.focusout()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="focusout1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.focusout( handler(eventObject) )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Bind an event handler to the "focusout" JavaScript event.</p>
|
||||
<ul class="signatures"><li class="signature" id="focusout-handlereventObject">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.focusout( handler(eventObject) )</h4>
|
||||
<p class="arguement"><strong>handler(eventObject)</strong>A function to execute each time the event is triggered.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<p>This method is a shortcut for <code>.bind('focusout', handler)</code>.</p>
|
||||
<p>The <code>focusout</code> event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the <a href="/blur">blur</a> event in that it supports detecting the loss of focus from parent elements (in other words, it supports events bubbling).</p>
|
||||
<p>This event will likely be used together with the <a href="/focusin">focusin</a> event.</p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Watch for a loss of focus to occur within the paragraphs on the page.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>span {display:none;}</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
<input type="text" />
|
||||
<span>focusout fire</span>
|
||||
</p>
|
||||
<p>
|
||||
<input type="password" />
|
||||
<span>focusout fire</span>
|
||||
</p>
|
||||
<script>
|
||||
$("p").focusout(function() {
|
||||
$(this).find("span").css('display','inline').fadeOut(1000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
114
experiments/api-viewer/docs/get/index.html
Normal file
114
experiments/api-viewer/docs/get/index.html
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.get()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="get1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.get( [ index ] )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#Element,%20Array">Element, Array</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Retrieve the DOM elements matched by the jQuery object.</p>
|
||||
<ul class="signatures"><li class="signature" id="get-index">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.get( [ index ] )</h4>
|
||||
<p class="arguement"><strong>index</strong>A zero-based integer indicating which element to retrieve.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<p>The <code>.get()</code> method grants us access to the DOM nodes underlying each jQuery object. Suppose we had a simple unordered list on the page:</p>
|
||||
<pre>
|
||||
<ul>
|
||||
<li id="foo">foo</li>
|
||||
<li id="bar">bar</li>
|
||||
</ul>
|
||||
</pre>
|
||||
<p>Without a parameter, <code>.get()</code> returns all of the elements:</p>
|
||||
<pre>alert($('li').get());</pre>
|
||||
<p>All of the matched DOM nodes are returned by this call, contained in a standard array:</p>
|
||||
<p><span class="result">[<li id="foo">, <li id="bar">]</span></p>
|
||||
<p>With an index specified, .get() will retrieve a single element:</p>
|
||||
<pre>($('li').get(0));</pre>
|
||||
<p>Since the index is zero-based, the first list item is returned:</p>
|
||||
<p><span class="output"><li id="foo"></span></p>
|
||||
<p>Each jQuery object also masquerades as an array, so we can use the array dereferencing operator to get at the list item instead:</p>
|
||||
<pre>alert($('li')[0]);</pre>
|
||||
<p>However, this syntax lacks some of the additional capabilities of .get(), such as specifying a negative index:</p>
|
||||
<pre>alert($('li').get(-1));</pre>
|
||||
<p>A negative index is counted from the end of the matched set, so this example will return the last item in the list:</p>
|
||||
<p><span class="output"><li id="bar"></span></p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">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.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
span { color:red; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
Reversed - <span></span>
|
||||
|
||||
<div>One</div>
|
||||
<div>Two</div>
|
||||
<div>Three</div>
|
||||
<script>
|
||||
|
||||
function disp(divs) {
|
||||
var a = [];
|
||||
for (var i = 0; i < divs.length; i++) {
|
||||
a.push(divs[i].innerHTML);
|
||||
}
|
||||
$("span").text(a.join(" "));
|
||||
}
|
||||
|
||||
disp( $("div").get().reverse() );
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">Gives the tag name of the element clicked on.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
span { color:red; }
|
||||
div { background:yellow; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<span>&nbsp;</span>
|
||||
<p>In this paragraph is an <span>important</span> section</p>
|
||||
|
||||
<div><input type="text" /></div>
|
||||
<script>
|
||||
|
||||
$("*", document.body).click(function (e) {
|
||||
e.stopPropagation();
|
||||
var domEl = $(this).get(0);
|
||||
$("span:first").text("Clicked on - " + domEl.tagName);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
47
experiments/api-viewer/docs/gt-selector/index.html
Normal file
47
experiments/api-viewer/docs/gt-selector/index.html
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>:gt() Selector</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="gt1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">gt</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery(':gt(index)')</h4>
|
||||
<p class="desc"><strong>Description: </strong>Select all elements at an index greater than index within the matched set.</p>
|
||||
<div class="longdesc">
|
||||
<p><strong>index-related selectors</strong></p>
|
||||
<p>The index-related selector expressions (including this "greater than" selector) filter the set of elements that have matched the expressions that precede them. They narrow the set down based on the order of the elements within this matched set. For example, if elements are first selected with a class selector (<code>.myclass</code>) and four elements are returned, these elements are given indices 0 through 3 for the purposes of these selectors.</p>
|
||||
<p>Note that since JavaScript arrays use <em>0-based indexing</em>, these selectors reflect that fact. This is why <code>$('.myclass:gt(1)')</code> selects elements after the second element in the document with the class <code>myclass</code>, rather than after the first. In contrast, <code>:nth-child(n)</code> uses <em>1-based indexing</em> to conform to the CSS specification.</p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Finds TD #5 and higher. Reminder: the indexing starts at 0.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<table border="1">
|
||||
|
||||
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
|
||||
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
|
||||
|
||||
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
|
||||
</table>
|
||||
<script>$("td:gt(4)").css("text-decoration", "line-through");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>Has Attribute Selector [name]</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="attributeHas1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">attributeHas</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery('[attribute]')</h4>
|
||||
<ul class="signatures"><li><dl class="arguments">
|
||||
<dt>attribute</dt>
|
||||
<dd>An attribute name.</dd>
|
||||
</dl></li></ul>
|
||||
<p class="desc"><strong>Description: </strong>Selects elements that have the specified attribute, with any value. </p>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Bind a single click that adds the div id to its text.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>no id</div>
|
||||
<div id="hey">with id</div>
|
||||
|
||||
<div id="there">has an id</div>
|
||||
<div>nope</div>
|
||||
<script>
|
||||
|
||||
$("div[id]").one("click", function(){
|
||||
var idString = $(this).text() + " = " + $(this).attr("id");
|
||||
$(this).text(idString);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
42
experiments/api-viewer/docs/has-selector/index.html
Normal file
42
experiments/api-viewer/docs/has-selector/index.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>:has() Selector</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="has1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">has</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.1.4/">1.1.4</a></span>jQuery(':has(selector)')</h4>
|
||||
<p class="desc"><strong>Description: </strong>Selects elements which contain at least one element that matches the specified selector.</p>
|
||||
<div class="longdesc"><p>The expression <code>$('div:has(p)')</code> matches a <code><div></code> if a <code><p></code> exists anywhere among its descendants, not just as a direct child.</p></div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Adds the class "test" to all divs that have a paragraph inside of them.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.test{ border: 3px inset red; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div><p>Hello in a paragraph</p></div>
|
||||
|
||||
<div>Hello again! (with no paragraph)</div>
|
||||
<script>$("div:has(p)").addClass("test");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
75
experiments/api-viewer/docs/has/index.html
Normal file
75
experiments/api-viewer/docs/has/index.html
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.has()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="has1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.has( selector )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="has-selector">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.has( selector )</h4>
|
||||
<p class="arguement"><strong>selector</strong>A string containing a selector expression to match elements against.</p>
|
||||
</li>
|
||||
<li class="signature" id="has-contained">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.has( contained )</h4>
|
||||
<p class="arguement"><strong>contained</strong>A DOM element to match elements against.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="longdesc">
|
||||
<p>Given a jQuery object that represents a set of DOM elements, the <code>.has()</code> method constructs a new jQuery object from a subset of the matching elements. The supplied selector is tested against the descendants of the matching elements; the element will be included in the result if any of its descendant elements matches the selector.</p>
|
||||
<p>Consider a page with a nested list as follows:</p>
|
||||
<pre>
|
||||
<ul>
|
||||
<li>list item 1</li>
|
||||
<li>list item 2
|
||||
<ul>
|
||||
<li>list item 2-a</li>
|
||||
<li>list item 2-b</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>list item 3</li>
|
||||
<li>list item 4</li>
|
||||
</ul>
|
||||
</pre>
|
||||
<p>We can apply this method to the set of list items as follows:</p>
|
||||
<pre>$('li').has('ul').css('background-color', 'red');</pre>
|
||||
<p>The result of this call is a red background for item 2, as it is the only <code><li></code> that has a <code><ul></code> among its descendants.</p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Check if an element is inside another.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.full { border: 1px solid red; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul><li>Does the UL contain an LI?</li></ul>
|
||||
|
||||
<script>
|
||||
$("ul").append("<li>" + ($("ul").has("li").length ? "Yes" : "No") + "</li>");
|
||||
$("ul").has("li").addClass("full");
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
61
experiments/api-viewer/docs/hasClass/index.html
Normal file
61
experiments/api-viewer/docs/hasClass/index.html
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.hasClass()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="hasClass1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.hasClass( className )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#Boolean">Boolean</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Determine whether any of the matched elements are assigned the given class.</p>
|
||||
<ul class="signatures"><li class="signature" id="hasClass-className">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.2/">1.2</a></span>.hasClass( className )</h4>
|
||||
<p class="arguement"><strong>className</strong>The class name to search for.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<p>Elements may have more than one class assigned to them. In HTML, this is represented by separating the class names with a space:</p>
|
||||
<pre><div id="mydiv" class="foo bar"></div></pre>
|
||||
<p>The <code>.hasClass()</code> method will return <code>true</code> if the class is assigned to an element, even if other classes also are. For example, given the HTML above, the following will return <code>true</code>:</p>
|
||||
<pre>$('#mydiv').hasClass('foo')</pre>
|
||||
<p>as would:</p>
|
||||
<pre>$('#mydiv').hasClass('bar')</pre>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Looks for the class 'selected' on the matched elements.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
|
||||
p { margin: 8px; font-size:16px; }
|
||||
.selected { color:red; }
|
||||
.highlight { background:yellow; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Hello</p>
|
||||
<p class="selected">Goodbye</p>
|
||||
<div id="result1">First paragraph has selected class: </div>
|
||||
|
||||
<div id="result2">Last paragraph has selected class: </div>
|
||||
<div id="result3">Some paragraph has selected class: </div>
|
||||
<script>$("div#result1").append($("p:first").hasClass("selected").toString());
|
||||
$("div#result2").append($("p:last").hasClass("selected").toString());
|
||||
$("div#result3").append($("p").hasClass("selected").toString());</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
44
experiments/api-viewer/docs/header-selector/index.html
Normal file
44
experiments/api-viewer/docs/header-selector/index.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>:header Selector</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="header1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">header</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.2/">1.2</a></span>jQuery(':header')</h4>
|
||||
<p class="desc"><strong>Description: </strong>Selects all elements that are headers, like h1, h2, h3 and so on.</p>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Adds a background and text color to all the headers on the page.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
body { font-size: 10px; font-family: Arial; }
|
||||
h1, h2 { margin: 3px 0; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Header 1</h1>
|
||||
|
||||
<p>Contents 1</p>
|
||||
<h2>Header 2</h2>
|
||||
<p>Contents 2</p>
|
||||
<script>$(":header").css({ background:'#CCC', color:'blue' });</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
141
experiments/api-viewer/docs/height/index.html
Normal file
141
experiments/api-viewer/docs/height/index.html
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.height()</h1>
|
||||
|
||||
</div>
|
||||
|
||||
<fieldset class="toc">
|
||||
<legend>Contents:</legend>
|
||||
<ul class="toc-list">
|
||||
<li>
|
||||
<a href="#height1">height() </a><ul><li>.height()
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#height2">height( value ) </a><ul>
|
||||
<li>.height( value )
|
||||
</li>
|
||||
<li>.height( function(index, height) )
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
<div class="entry method" id="height1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.height()</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#Integer">Integer</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Get the current computed height for the first element in the set of matched elements.</p>
|
||||
<ul class="signatures"><li class="signature" id="height"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.height()</h4></li></ul>
|
||||
<div class="longdesc">
|
||||
<p>The difference between <code>.css('height')</code> and <code>.height()</code> is that the latter returns a unit-less pixel value (for example, <code>400</code>) while the former returns a value with units intact (for example, <code>400px</code>). The <code>.height()</code> method is recommended when an element's height needs to be used in a mathematical calculation.</p>
|
||||
<p class="image"><img src="http://api.jquery.com/images/0042_04_01.png"></p>
|
||||
<p>This method is also able to find the height of the window and document.</p>
|
||||
<pre>$(window).height(); // returns height of browser viewport
|
||||
$(document).height(); // returns height of HTML document</pre>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Show various heights. Note the values are from the iframe so might be smaller than you expected. The yellow highlight shows the iframe body.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
body { background:yellow; }
|
||||
button { font-size:12px; margin:2px; }
|
||||
p { width:150px; border:1px red solid; }
|
||||
div { color:red; font-weight:bold; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<button id="getp">Get Paragraph Height</button>
|
||||
<button id="getd">Get Document Height</button>
|
||||
<button id="getw">Get Window Height</button>
|
||||
|
||||
<div>&nbsp;</div>
|
||||
<p>
|
||||
Sample paragraph to test height
|
||||
</p>
|
||||
<script>
|
||||
function showHeight(ele, h) {
|
||||
$("div").text("The height for the " + ele +
|
||||
" is " + h + "px.");
|
||||
}
|
||||
$("#getp").click(function () {
|
||||
showHeight("paragraph", $("p").height());
|
||||
});
|
||||
$("#getd").click(function () {
|
||||
showHeight("document", $(document).height());
|
||||
});
|
||||
$("#getw").click(function () {
|
||||
showHeight("window", $(window).height());
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="height2">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.height( value )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Set the CSS height of every matched element.</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="height-value">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.height( value )</h4>
|
||||
<p class="arguement"><strong>value</strong>An integer representing the number of pixels, or an integer with an optional unit of measure appended (as a string).</p>
|
||||
</li>
|
||||
<li class="signature" id="height-functionindex, height">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4.1/">1.4.1</a></span>.height( function(index, height) )</h4>
|
||||
<p class="arguement"><strong>function(index, height)</strong>A function returning the height to set. Receives the index position of the element in the set and the old height as arguments.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="longdesc">
|
||||
<p>When calling <code>.height(value)</code>, the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, any valid CSS measurement may be used for the height (such as <code>100px</code>, <code>50%</code>, or <code>auto</code>). Note that in modern browsers, the CSS height property does not include padding, border, or margin.</p>
|
||||
<p>If no explicit unit was specified (like 'em' or '%') then "px" is concatenated to the value.</p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">To set the height of each div on click to 30px plus a color change.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>div { width:50px; height:70px; float:left; margin:5px;
|
||||
background:rgb(255,140,0); cursor:pointer; } </style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<script>$("div").one('click', function () {
|
||||
$(this).height(30)
|
||||
.css({cursor:"auto", backgroundColor:"green"});
|
||||
});</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
73
experiments/api-viewer/docs/hidden-selector/index.html
Normal file
73
experiments/api-viewer/docs/hidden-selector/index.html
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>:hidden Selector</h1>
|
||||
|
||||
</div>
|
||||
<div class="entry selector" id="hidden1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">hidden</span> selector</h2>
|
||||
<div class=" entry-details">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/version/1.0/">1.0</a></span>jQuery(':hidden')</h4>
|
||||
<p class="desc"><strong>Description: </strong>Selects all elements that are hidden.</p>
|
||||
<div class="longdesc">
|
||||
<p>Elements can be considered hidden for several reasons:</p>
|
||||
<ul>
|
||||
<li>They have a display value of none.</li>
|
||||
<li>They are form elements with type="hidden".</li>
|
||||
<li>Their width and height are explicitly set to 0.</li>
|
||||
<li>An ancestor element is hidden, so the element is not shown on the page.</li>
|
||||
</ul>
|
||||
<p>How <code>:hidden</code> is determined was changed in jQuery 1.3.2. An element is assumed to be hidden if it or any of its parents consumes no space in the document. CSS visibility isn't taken into account (therefore <code>$(elem).css('visibility','hidden').is(':hidden') == false</code>). The <a href="http://docs.jquery.com/Release:jQuery_1.3.2#:visible.2F:hidden_Overhauled">release notes</a> outline the changes in more detail.</p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Shows all hidden divs and counts hidden inputs.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }
|
||||
span { display:block; clear:left; color:red; }
|
||||
.starthidden { display:none; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<span></span>
|
||||
<div></div>
|
||||
<div style="display:none;">Hider!</div>
|
||||
<div></div>
|
||||
|
||||
<div class="starthidden">Hider!</div>
|
||||
<div></div>
|
||||
<form>
|
||||
<input type="hidden" />
|
||||
|
||||
<input type="hidden" />
|
||||
<input type="hidden" />
|
||||
</form>
|
||||
<span>
|
||||
|
||||
</span>
|
||||
<script>
|
||||
// in some browsers :hidden includes head, title, script, etc... so limit to body
|
||||
$("span:first").text("Found " + $(":hidden", document.body).length +
|
||||
" hidden elements total.");
|
||||
$("div:hidden").show(3000);
|
||||
$("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
172
experiments/api-viewer/docs/hide/index.html
Normal file
172
experiments/api-viewer/docs/hide/index.html
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.hide()</h1>
|
||||
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="hide1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.hide( )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Hide the matched elements.</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="hide"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.hide()</h4></li>
|
||||
<li class="signature" id="hide-duration-callback">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.hide( duration, [ callback ] )</h4>
|
||||
<p class="arguement"><strong>duration</strong>A string or number determining how long the animation will run.</p>
|
||||
<p class="arguement"><strong>callback</strong>A function to call once the animation is complete.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="longdesc">
|
||||
<p>With no parameters, the <code>.hide()</code> method is the simplest way to hide an element:</p>
|
||||
<pre>$('.target').hide();
|
||||
</pre>
|
||||
<p>The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling <code>.css('display', 'none')</code>, except that the value of the <code>display</code> property is saved in jQuery's data cache so that <code>display</code> can later be restored to its initial value. If an element has a <code>display</code> value of <code>inline</code>, then is hidden and shown, it will once again be displayed <code>inline</code>.</p>
|
||||
<p>When a duration is provided, <code>.hide()</code> becomes an animation method. The <code>.hide()</code> method animates the width, height, and opacity of the matched elements simultaneously. When these properties reach 0, the <code>display</code> style property is set to <code>none</code> to ensure that the element no longer affects the layout of the page.</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 <code>200</code> and <code>600</code> milliseconds, respectively.</p>
|
||||
<p>If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but <code>this</code> is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.</p>
|
||||
<p>We can animate any element, such as a simple image:</p>
|
||||
<pre><div id="clickme">
|
||||
Click here
|
||||
</div>
|
||||
<img id="book" src="book.png" alt="" width="100" height="123" />
|
||||
With the element initially shown, we can hide it slowly:
|
||||
$('#clickme').click(function() {
|
||||
$('#book').hide('slow', function() {
|
||||
$.print('Animation complete.');
|
||||
});
|
||||
});</pre>
|
||||
<p class="image four-across">
|
||||
<img src="http://api.jquery.com/images/0042_06_05.png" alt=""><img src="http://api.jquery.com/images/0042_06_06.png" alt=""><img src="http://api.jquery.com/images/0042_06_07.png" alt=""><img src="http://api.jquery.com/images/0042_06_08.png" alt=""></p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Hides all paragraphs then the link on click.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>Hello</p>
|
||||
<a href="#">Click to hide me too</a>
|
||||
<p>Here is another paragraph</p>
|
||||
<script>
|
||||
|
||||
$("p").hide();
|
||||
$("a").click(function () {
|
||||
$(this).hide();
|
||||
return true;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">Animates all shown paragraphs to hide slowly, completing the animation within 600 milliseconds.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
p { background:#dad; font-weight:bold; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<button>Hide 'em</button>
|
||||
|
||||
<p>Hiya</p>
|
||||
<p>Such interesting text, eh?</p>
|
||||
<script>
|
||||
$("button").click(function () {
|
||||
$("p").hide("slow");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-2">
|
||||
<h4>Example: <span class="desc">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.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
span { background:#def3ca; padding:3px; float:left; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<button id="hidr">Hide</button>
|
||||
<button id="showr">Show</button>
|
||||
<div>
|
||||
|
||||
<span>Once</span> <span>upon</span> <span>a</span>
|
||||
<span>time</span> <span>there</span> <span>were</span>
|
||||
<span>three</span> <span>programmers...</span>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
$("#hidr").click(function () {
|
||||
$("span:last-child").hide("fast", function () {
|
||||
// use callee so don't have to name the function
|
||||
$(this).prev().hide("fast", arguments.callee);
|
||||
});
|
||||
});
|
||||
$("#showr").click(function () {
|
||||
$("span").show(2000);
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-3">
|
||||
<h4>Example: <span class="desc">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.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div { background:#ece023; width:30px;
|
||||
height:40px; margin:2px; float:left; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
<script>
|
||||
for (var i = 0; i < 5; i++) {
|
||||
$("<div>").appendTo(document.body);
|
||||
}
|
||||
$("div").click(function () {
|
||||
$(this).hide(2000, function () {
|
||||
$(this).remove();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
170
experiments/api-viewer/docs/hover/index.html
Normal file
170
experiments/api-viewer/docs/hover/index.html
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.hover()</h1>
|
||||
|
||||
</div>
|
||||
|
||||
<fieldset class="toc">
|
||||
<legend>Contents:</legend>
|
||||
<ul class="toc-list">
|
||||
<li>
|
||||
<a href="#hover1">hover( handlerIn(eventObject), handlerOut(eventObject) ) </a><ul><li>.hover( handlerIn(eventObject), handlerOut(eventObject) )
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#hover2">hover( handlerInOut(eventObject) ) </a><ul><li>.hover( handlerInOut(eventObject) )
|
||||
</li></ul>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
<div class="entry method" id="hover1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.hover( handlerIn(eventObject), handlerOut(eventObject) )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.</p>
|
||||
<ul class="signatures"><li class="signature" id="hover-handlerIneventObject-handlerOuteventObject">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.hover( handlerIn(eventObject), handlerOut(eventObject) )</h4>
|
||||
<p class="arguement"><strong>handlerIn(eventObject)</strong>A function to execute when the mouse pointer enters the element.</p>
|
||||
<p class="arguement"><strong>handlerOut(eventObject)</strong>A function to execute when the mouse pointer leaves the element.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<p>The <code>.hover()</code> method binds handlers for both <code>mouseenter</code> and <code>mouseleave</code> events. We can use it to simply apply behavior to an element during the time the mouse is within the element.</p>
|
||||
<p>Calling <code>$(selector).hover(handlerIn, handlerOut)</code> is shorthand for:</p>
|
||||
<pre>$(selector).mouseenter(handlerIn).mouseleave(handlerOut);</pre>
|
||||
<p>See the discussions for <code><a href="/mouseenter">.mouseenter()</a></code> and <code><a href="/mouseleave">.mouseleave()</a></code> for more details.</p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">To add a special style to list items that are being hovered over, try:</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
ul { margin-left:20px; color:blue; }
|
||||
li { cursor:default; }
|
||||
span { color:red; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Milk</li>
|
||||
<li>Bread</li>
|
||||
<li class='fade'>Chips</li>
|
||||
|
||||
<li class='fade'>Socks</li>
|
||||
</ul>
|
||||
<script>
|
||||
$("li").hover(
|
||||
function () {
|
||||
$(this).append($("<span> ***</span>"));
|
||||
},
|
||||
function () {
|
||||
$(this).find("span:last").remove();
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
|
||||
//li with fade class
|
||||
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">To add a special style to table cells that are being hovered over, try:</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("td").hover(
|
||||
function () {
|
||||
$(this).addClass("hover");
|
||||
},
|
||||
function () {
|
||||
$(this).removeClass("hover");
|
||||
}
|
||||
);</code></pre>
|
||||
</div>
|
||||
<div id="example-2">
|
||||
<h4>Example: <span class="desc">To unbind the above example use:</span>
|
||||
</h4>
|
||||
<pre><code class="example">$("td").unbind('mouseenter mouseleave');</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="hover2">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.hover( handlerInOut(eventObject) )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Bind a single handler to the matched elements, to be executed when the mouse pointer enters or leaves the elements.</p>
|
||||
<ul class="signatures"><li class="signature" id="hover-handlerInOuteventObject">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.hover( handlerInOut(eventObject) )</h4>
|
||||
<p class="arguement"><strong>handlerInOut(eventObject)</strong>A function to execute when the mouse pointer enters or leaves the element.</p>
|
||||
</li></ul>
|
||||
<div class="longdesc">
|
||||
<p>The <code>.hover()</code> method, when passed a single function, will execute that handler for both <code>mouseenter</code> and <code>mouseleave</code> events. This allows the user to use jQuery's various toggle methods within the handler.</p>
|
||||
<p>Calling <code>$(selector).hover(handlerInOut)</code> is shorthand for:</p>
|
||||
<pre>$(selector).bind("mouseenter mouseleave",handlerInOut);</pre>
|
||||
<p>See the discussions for <code><a href="/mouseenter">.mouseenter()</a></code> and <code><a href="/mouseleave">.mouseleave()</a></code> for more details.</p>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Slide the next sibling LI up or down on hover, and toggle a class.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
ul { margin-left:20px; color:blue; }
|
||||
li { cursor:default; }
|
||||
li.active { background:black;color:white; }
|
||||
span { color:red; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li>Milk</li>
|
||||
<li>White</li>
|
||||
<li>Carrots</li>
|
||||
<li>Orange</li>
|
||||
<li>Broccoli</li>
|
||||
<li>Green</li>
|
||||
</ul>
|
||||
<script>
|
||||
$("li")
|
||||
.filter(":odd")
|
||||
.hide()
|
||||
.end()
|
||||
.filter(":even")
|
||||
.hover(
|
||||
function () {
|
||||
$(this).toggleClass("active")
|
||||
.next().stop(true, true).slideToggle();
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
181
experiments/api-viewer/docs/html/index.html
Normal file
181
experiments/api-viewer/docs/html/index.html
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||||
<div class="ui-page">
|
||||
<div class="ui-header">
|
||||
<h1>.html()</h1>
|
||||
|
||||
</div>
|
||||
|
||||
<fieldset class="toc">
|
||||
<legend>Contents:</legend>
|
||||
<ul class="toc-list">
|
||||
<li>
|
||||
<a href="#html1">html() </a><ul><li>.html()
|
||||
</li></ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#html2">html( htmlString ) </a><ul>
|
||||
<li>.html( htmlString )
|
||||
</li>
|
||||
<li>.html( function(index, html) )
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
<div class="entry method" id="html1">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.html()</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#String">String</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Get the HTML contents of the first element in the set of matched elements.</p>
|
||||
<ul class="signatures"><li class="signature" id="html"><h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.html()</h4></li></ul>
|
||||
<div class="longdesc">
|
||||
<p>This method is not available on XML documents.</p>
|
||||
<p>In an HTML document, we can use <code>.html()</code> to get the contents of any element. If the selector expression matches more than one element, only the first one's HTML content is returned. Consider this code:</p>
|
||||
<pre>$('div.demo-container').html();</pre>
|
||||
<p>In order for the following <code><div></code>'s content to be retrieved, it would have to be the first one with <code>class="demo-container"</code> in the document:</p>
|
||||
<pre><div class="demo-container">
|
||||
<div class="demo-box">Demonstration Box</div>
|
||||
</div></pre>
|
||||
<p>The result would look like this:</p>
|
||||
<pre><div class="demo-box">Demonstration Box</div></pre>
|
||||
</div>
|
||||
<h3>Example:</h3>
|
||||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||||
<h4><span class="desc">Click a paragraph to convert it from html to text.</span></h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
p { margin:8px; font-size:20px; color:blue;
|
||||
cursor:pointer; }
|
||||
b { text-decoration:underline; }
|
||||
button { cursor:pointer; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
||||
<b>Click</b> to change the <span id="tag">html</span>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
to a <span id="text">text</span> node.
|
||||
</p>
|
||||
<p>
|
||||
This <button name="nada">button</button> does nothing.
|
||||
</p>
|
||||
<script>
|
||||
$("p").click(function () {
|
||||
var htmlStr = $(this).html();
|
||||
$(this).text(htmlStr);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui-content ui-body ui-body-c" id="html2">
|
||||
<h2 class="jq-clearfix roundTop section-title">
|
||||
<span class="name">.html( htmlString )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||||
</h2>
|
||||
<div class=" entry-details">
|
||||
<p class="desc"><strong>Description: </strong>Set the HTML contents of each element in the set of matched elements.</p>
|
||||
<ul class="signatures">
|
||||
<li class="signature" id="html-htmlString">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.html( htmlString )</h4>
|
||||
<p class="arguement"><strong>htmlString</strong>A string of HTML to set as the content of each matched element.</p>
|
||||
</li>
|
||||
<li class="signature" id="html-functionindex, html">
|
||||
<h4 class="name">
|
||||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.html( function(index, html) )</h4>
|
||||
<p class="arguement"><strong>function(index, html)</strong>A function returning the HTML content to set. Receives the index position of the element in the set and the old HTML value as arguments.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="longdesc">
|
||||
<p>The <code>.html()</code> method is not available in XML documents. </p>
|
||||
<p>When we use <code>.html()</code> to set elements' contents, any contents that were in those elements is completely replaced by the new contents. Consider the following HTML:</p>
|
||||
<pre><div class="demo-container">
|
||||
<div class="demo-box">Demonstration Box</div>
|
||||
</div></pre>
|
||||
<p>We can set the HTML contents of <code><div class="demo-container"></code> like so:</p>
|
||||
<pre>$('div.demo-container')
|
||||
.html('<p>All new content. <em>You bet!</em></p>');</pre>
|
||||
<p>That line of code will replace everything inside <code><div class="demo-container"></code>:</p>
|
||||
<pre><div class="demo-container">
|
||||
<p>All new content. <em>You bet!</em></p>
|
||||
</div></pre>
|
||||
<p>As of jQuery 1.4, the <code>.html()</code> method allows us to set the HTML content by passing in a function.</p>
|
||||
<pre>$('div.demo-container').html(function() {
|
||||
var emph = '<em>' + $('p').length + ' paragraphs!</em>';
|
||||
return '<p>All new content for ' + emph + '</p>';
|
||||
});</pre>
|
||||
<p>Given a document with six paragraphs, this example will set the HTML of <code><div class="demo-container"></code> to <code><p>All new content for <em>6 paragraphs!</em></p></code>.</p>
|
||||
</div>
|
||||
<h3>Examples:</h3>
|
||||
<div id="entry-examples" class="entry-examples">
|
||||
<div id="example-0">
|
||||
<h4>Example: <span class="desc">Add some html to each div.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
|
||||
.red { color:red; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<span>Hello</span>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<script>$("div").html("<span class='red'>Hello <b>Again</b></span>");</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
<div id="example-1">
|
||||
<h4>Example: <span class="desc">Add some html to each div then immediately do further manipulations to the inserted html.</span>
|
||||
</h4>
|
||||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
div { color:blue; font-size:18px; }
|
||||
</style>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<script>
|
||||
|
||||
$("div").html("<b>Wow!</b> Such excitement...");
|
||||
$("div b").append(document.createTextNode("!!!"))
|
||||
.css("color", "red");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
<h4>Demo:</h4>
|
||||
<div class="demo code-demo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue