0
+loadDocs({"version": "1.2.6", "timestamp": "2008-06-03T15:40:58Z", "startdoc": "API", "letters": ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w"], "data": {"jquery1": {"id": 1, "searchname": "jquery", "name": "jQuery", "type": "function", "category": "Core", "subcategory": "$(...) The jQuery Function", "return": "jQuery", "added": "1.0", "sample": "", "desc": "This function accepts a string containing a CSS selector which is then used to match a set of elements.", "longdesc": "<p>The core functionality of jQuery centers around this function. Everything in jQuery is based upon this, or uses this in some way. The most basic use of this function is to pass in an expression (usually consisting of CSS), which then finds all matching elements.</p><p>By default, if no context is specified, $() looks for DOM elements within the context of the current HTML document. If you do specify a context, such as a DOM element or jQuery object, the expression will be matched against the contents of that context.</p><p>See <a href='Selectors'>Selectors</a> for the allowed CSS syntax for expressions. </p>", "params": [{"optional": false, "name": "expression", "type": "String", "desc": "An expression to search with."}, {"optional": true, "name": "context", "type": "Element, jQuery", "desc": "A DOM Element, Document or jQuery to use as context"}], "examples": [{"code": "$(\"div > p\").css(\"border\", \"1px solid gray\");", "htmlCode": "$(\"div > p\").css(\"border\", \"1px solid gray\");", "desc": "Finds all p elements that are children of a div element.", "css": "", "inhead": "", "html": "<p>one</p> <div><p>two</p></div> <p>three</p>", "exampleId": "1iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"div > p\").css(\"border\", \"1px solid gray\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<p>one</p> <div><p>two</p></div> <p>three</p>\n</body>\n</html>"}, {"code": "$(\"input:radio\", document.forms[0]);", "htmlCode": "$(\"input:radio\", document.forms[0]);", "desc": "Finds all inputs of type radio within the first form in the document.", "css": "", "inhead": "", "html": "", "exampleId": "1iframeExample1", "runCode": ""}, {"code": "$(\"div\", xml.responseXML);", "htmlCode": "$(\"div\", xml.responseXML);", "desc": "Finds all div elements within an XML document from an AJAX response.", "css": "", "inhead": "", "html": "", "exampleId": "1iframeExample2", "runCode": ""}]}, "jquery2": {"id": 2, "searchname": "jquery", "name": "jQuery", "type": "function", "category": "Core", "subcategory": "$(...) The jQuery Function", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Create DOM elements on-the-fly from the provided String of raw HTML.", "longdesc": "<p>You can pass in plain HTML Strings written by hand, create them using some template engine or plugin, or load them via AJAX. There are limitations when creating input elements, see the second example. Also when passing strings that may include slashes (such as an image path), escape the slashes. When creating single elements use the closing tag or XHTML format. For example, to create a span use $(\"<span/>\") or $(\"<span></span>\") instead of without the closing slash/tag.</p>", "params": [{"optional": false, "name": "html", "type": "String", "desc": "A string of HTML to create on the fly."}], "examples": [{"code": "$(\"<div><p>Hello</p></div>\").appendTo(\"body\")", "htmlCode": "$(\"<div><p>Hello</p></div>\").appendTo(\"body\")", "desc": "Creates a div element (and all of its contents) dynamically, and appends it to the body element. Internally, an element is created and its innerHTML property set to the given markup. It is therefore both quite flexible and limited.", "css": "", "inhead": "", "html": "", "exampleId": "2iframeExample0", "runCode": ""}, {"code": "// Does NOT work in IE:\n$(\"<input/>\").attr(\"type\", \"checkbox\");\n// Does work in IE:\n$(\"<input type='checkbox'/>\");", "htmlCode": "// Does NOT work in IE:\n$(\"<input/>\").attr(\"type\", \"checkbox\");\n// Does work in IE:\n$(\"<input type='checkbox'/>\");", "desc": "Do not create <input>-Elements without a type-attribute, due to Microsofts read/write-once-rule for the type-attribute of <input>-elements, see this <a href=\"http://msdn2.microsoft.com/en-us/library/ms534700.aspx\">http://msdn2.microsoft.com/en-us/library/ms534700.aspx</a> for details.", "css": "", "inhead": "", "html": "", "exampleId": "2iframeExample1", "runCode": ""}]}, "jquery3": {"id": 3, "searchname": "jquery", "name": "jQuery", "type": "function", "category": "Core", "subcategory": "$(...) The jQuery Function", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Wrap jQuery functionality around a single or multiple DOM Element(s).", "longdesc": "<p>This function also accepts XML Documents and Window objects as valid arguments (even though they are not DOM Elements).</p>", "params": [{"optional": false, "name": "elements", "type": "Element, Array<Element>", "desc": "DOM element(s) to be encapsulated by a jQuery object."}], "examples": [{"code": "$(document.body).css( \"background\", \"black\" );", "htmlCode": "$(document.body).css( \"background\", \"black\" );", "desc": "Sets the background color of the page to black.", "css": "", "inhead": "", "html": "", "exampleId": "3iframeExample0", "runCode": ""}, {"code": "$(myForm.elements).hide()", "htmlCode": "$(myForm.elements).hide()", "desc": "Hides all the input elements within a form.", "css": "", "inhead": "", "html": "", "exampleId": "3iframeExample1", "runCode": ""}]}, "jquery4": {"id": 4, "searchname": "jquery", "name": "jQuery", "type": "function", "category": "Core", "subcategory": "$(...) The jQuery Function", "return": "jQuery", "added": "1.0", "sample": "", "desc": "A shorthand for $(document).ready().", "longdesc": "<p>Allows you to bind a function to be executed when the DOM document has finished loading. This function behaves just like $(document).ready(), in that it should be used to wrap other $() operations on your page that depend on the DOM being ready to be operated on. While this function is, technically, chainable - there really isn't much use for chaining against it.</p><p>You can have as many $(document).ready events on your page as you like.</p><p>See ready(Function) for details about the ready event. </p>", "params": [{"optional": false, "name": "callback", "type": "Function", "desc": "The function to execute when the DOM is ready."}], "examples": [{"code": "$(function(){\n // Document is ready\n});", "htmlCode": "$(function(){\n // Document is ready\n});", "desc": "Executes the function when the DOM is ready to be used.", "css": "", "inhead": "", "html": "", "exampleId": "4iframeExample0", "runCode": ""}, {"code": "jQuery(function($) {\n // Your code using failsafe $ alias here...\n});", "htmlCode": "jQuery(function($) {\n // Your code using failsafe $ alias here...\n});", "desc": "Uses both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias.", "css": "", "inhead": "", "html": "", "exampleId": "4iframeExample1", "runCode": ""}]}, "each5": {"id": 5, "searchname": "each", "name": "each", "type": "function", "category": "Core", "subcategory": "jQuery Object Accessors", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Execute a function within the context of every matched element.", "longdesc": "<p>This means that every time the passed-in function is executed (which is once for every element matched) the 'this' keyword points to the specific DOM element.</p><p>Additionally, the function, when executed, is passed a single argument representing the position of the element in the matched set (integer, zero-index).</p><p>Returning 'false' from within the each function completely stops the loop through all of the elements (this is like using a 'break' with a normal loop). Returning 'true' from within the loop skips to the next iteration (this is like using a 'continue' with a normal loop). </p>", "params": [{"optional": false, "name": "callback", "type": "Function", "desc": "The callback to execute for each matched element.\n<pre>function callback(index, domElement) {\n this; // this == domElement\n}\n</pre>"}], "examples": [{"code": "\n $(document.body).click(function () {\n $(\"div\").each(function (i) {\n if (this.style.color != \"blue\") {\n this.style.color = \"blue\";\n } else {\n this.style.color = \"\";\n }\n });\n });\n", "htmlCode": "\n $(document.body).click(function () {\n $(\"div\").each(function (i) {\n if (this.style.color != \"blue\") {\n this.style.color = \"blue\";\n } else {\n this.style.color = \"\";\n }\n });\n });\n", "desc": "Iterates over three divs and sets their color property.", "css": "\n div { color:red; text-align:center; cursor:pointer; \n font-weight:bolder; width:300px; }\n ", "inhead": "", "html": "<div>Click here</div>\n <div>to iterate through</div>\n <div>these divs.</div>", "exampleId": "5iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(document.body).click(function () {\n $(\"div\").each(function (i) {\n if (this.style.color != \"blue\") {\n this.style.color = \"blue\";\n } else {\n this.style.color = \"\";\n }\n });\n });\n\n });\n</script>\n<style>\n\n div { color:red; text-align:center; cursor:pointer; \n font-weight:bolder; width:300px; }\n \n</style>\n</head>\n<body>\n<div>Click here</div>\n <div>to iterate through</div>\n <div>these divs.</div>\n</body>\n</html>"}, {"code": "\n $(\"span\").click(function () {\n $(\"li\").each(function(){\n $(this).toggleClass(\"example\");\n });\n });\n", "htmlCode": "\n $(\"span\").click(function () {\n $(\"li\").each(function(){\n $(this).toggleClass(\"example\");\n });\n });\n", "desc": "If you want to have the jQuery object instead of the regular DOM element, use the $(this) function, for example:", "css": "\n ul { font-size:18px; margin:0; }\n span { color:blue; text-decoration:underline; cursor:pointer; }\n .example { font-style:italic; }\n ", "inhead": "", "html": "To do list: <span>(click here to change)</span>\n <ul>\n <li>Eat</li>\n <li>Sleep</li>\n <li>Be merry</li>\n </ul>", "exampleId": "5iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"span\").click(function () {\n $(\"li\").each(function(){\n $(this).toggleClass(\"example\");\n });\n });\n\n });\n</script>\n<style>\n\n ul { font-size:18px; margin:0; }\n span { color:blue; text-decoration:underline; cursor:pointer; }\n .example { font-style:italic; }\n \n</style>\n</head>\n<body>\nTo do list: <span>(click here to change)</span>\n <ul>\n <li>Eat</li>\n <li>Sleep</li>\n <li>Be merry</li>\n </ul>\n</body>\n</html>"}, {"code": "\n $(\"button\").click(function () {\n $(\"div\").each(function (index, domEle) {\n // domEle == this\n $(domEle).css(\"backgroundColor\", \"yellow\"); \n if ($(this).is(\"#stop\")) {\n $(\"span\").text(\"Stopped at div index #\" + index);\n return false;\n }\n });\n });\n", "htmlCode": "\n $(\"button\").click(function () {\n $(\"div\").each(function (index, domEle) {\n // domEle == this\n $(domEle).css(\"backgroundColor\", \"yellow\"); \n if ($(this).is(\"#stop\")) {\n $(\"span\").text(\"Stopped at div index #\" + index);\n return false;\n }\n });\n });\n", "desc": "You can use 'return' to break out of each() loops early.", "css": "\n div { width:40px; height:40px; margin:5px; float:left;\n border:2px blue solid; text-align:center; }\n span { color:red; }\n ", "inhead": "", "html": "<button>Change colors</button> \n <span></span>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div id=\"stop\">Stop here</div>\n <div></div>\n <div></div>\n <div></div>", "exampleId": "5iframeExample2", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"button\").click(function () {\n $(\"div\").each(function (index, domEle) {\n // domEle == this\n $(domEle).css(\"backgroundColor\", \"yellow\"); \n if ($(this).is(\"#stop\")) {\n $(\"span\").text(\"Stopped at div index #\" + index);\n return false;\n }\n });\n });\n\n });\n</script>\n<style>\n\n div { width:40px; height:40px; margin:5px; float:left;\n border:2px blue solid; text-align:center; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<button>Change colors</button> \n <span></span>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div id=\"stop\">Stop here</div>\n <div></div>\n <div></div>\n <div></div>\n</body>\n</html>"}]}, "eq6": {"id": 6, "searchname": "eq", "name": "eq", "type": "function", "category": "Core", "subcategory": "jQuery Object Accessors", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Reduce the set of matched elements to a single element.", "longdesc": "<p>The position of the element in the set of matched elements starts at 0 and goes to length - 1.</p>", "params": [{"optional": false, "name": "position", "type": "Number", "desc": "The index of the element to select."}], "examples": [{"code": "$(\"p\").eq(1).css(\"color\", \"red\")", "htmlCode": "$(\"p\").eq(1).css(\"color\", \"red\")", "desc": "Reduces the selection to the second selected element.", "css": "", "inhead": "", "html": "<p>This is just a test.</p><p>So is this</p>", "exampleId": "6iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").eq(1).css(\"color\", \"red\")\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<p>This is just a test.</p><p>So is this</p>\n</body>\n</html>"}]}, "get7": {"id": 7, "searchname": "get", "name": "get", "type": "function", "category": "Core", "subcategory": "jQuery Object Accessors", "return": "Array<Element>", "added": "1.0", "sample": "", "desc": "Access all matched DOM elements.", "longdesc": "<p>This serves as a backwards-compatible way of accessing all matched elements (other than the jQuery object itself, which is, in fact, an array of elements).</p><p>It is useful if you need to operate on the DOM elements themselves instead of using built-in jQuery functions. </p>", "params": [], "examples": [{"code": "\n function disp(divs) {\n var a = [];\n for (var i = 0; i < divs.length; i++) {\n a.push(divs[i].innerHTML);\n }\n $(\"span\").text(a.join(\" \"));\n }\n \n disp( $(\"div\").get().reverse() );\n", "htmlCode": "\n function disp(divs) {\n var a = [];\n for (var i = 0; i < divs.length; i++) {\n a.push(divs[i].innerHTML);\n }\n $(\"span\").text(a.join(\" \"));\n }\n \n disp( $(\"div\").get().reverse() );\n", "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.", "css": "\n span { color:red; }\n ", "inhead": "", "html": "Reversed - <span></span>\n <div>One</div>\n <div>Two</div>\n <div>Three</div>", "exampleId": "7iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n function disp(divs) {\n var a = [];\n for (var i = 0; i < divs.length; i++) {\n a.push(divs[i].innerHTML);\n }\n $(\"span\").text(a.join(\" \"));\n }\n \n disp( $(\"div\").get().reverse() );\n\n });\n</script>\n<style>\n\n span { color:red; }\n \n</style>\n</head>\n<body>\nReversed - <span></span>\n <div>One</div>\n <div>Two</div>\n <div>Three</div>\n</body>\n</html>"}]}, "get8": {"id": 8, "searchname": "get", "name": "get", "type": "function", "category": "Core", "subcategory": "jQuery Object Accessors", "return": "Element", "added": "1.0", "sample": "", "desc": "Access a single matched DOM element at a specified index in the matched set.", "longdesc": "<p>This allows you to extract the actual DOM element and operate on it directly without necessarily using jQuery functionality on it. This function called as $(this).get(0) is the equivalent of using square bracket notation on the jQuery object itself like $(this)[0].</p>", "params": [{"optional": false, "name": "index", "type": "Number", "desc": "Access the element in the Nth position."}], "examples": [{"code": "\n $(\"*\", document.body).click(function (e) {\n e.stopPropagation();\n var domEl = $(this).get(0);\n $(\"span:first\").text(\"Clicked on - \" + domEl.tagName);\n });\n", "htmlCode": "\n $(\"*\", document.body).click(function (e) {\n e.stopPropagation();\n var domEl = $(this).get(0);\n $(\"span:first\").text(\"Clicked on - \" + domEl.tagName);\n });\n", "desc": "Gives the tag name of the element clicked on.", "css": "\n span { color:red; }\n div { background:yellow; }\n ", "inhead": "", "html": "<span> </span>\n <p>In this paragraph is an <span>important</span> section</p>\n <div><input type=\"text\" /></div>", "exampleId": "8iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"*\", document.body).click(function (e) {\n e.stopPropagation();\n var domEl = $(this).get(0);\n $(\"span:first\").text(\"Clicked on - \" + domEl.tagName);\n });\n\n });\n</script>\n<style>\n\n span { color:red; }\n div { background:yellow; }\n \n</style>\n</head>\n<body>\n<span> </span>\n <p>In this paragraph is an <span>important</span> section</p>\n <div><input type=\"text\" /></div>\n</body>\n</html>"}]}, "index9": {"id": 9, "searchname": "index", "name": "index", "type": "function", "category": "Core", "subcategory": "jQuery Object Accessors", "return": "Number", "added": "1.0", "sample": "", "desc": "Searches every matched element for the object and returns the index of the element, if found, starting with zero.", "longdesc": "<p>Returns -1 if the object wasn't found.</p>", "params": [{"optional": false, "name": "subject", "type": "Element ", "desc": "Object to search for."}], "examples": [{"code": "\n $(\"div\").click(function () {\n // this is the dom element clicked\n var index = $(\"div\").index(this);\n $(\"span\").text(\"That was div index #\" + index);\n });\n", "htmlCode": "\n $(\"div\").click(function () {\n // this is the dom element clicked\n var index = $(\"div\").index(this);\n $(\"span\").text(\"That was div index #\" + index);\n });\n", "desc": "On click, returns the index (based zero) of that div in the page.", "css": "\n div { background:yellow; margin:5px; }\n span { color:red; }\n ", "inhead": "", "html": "<span>Click a div!</span>\n <div>First div</div>\n <div>Second div</div>\n <div>Third div</div>", "exampleId": "9iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div\").click(function () {\n // this is the dom element clicked\n var index = $(\"div\").index(this);\n $(\"span\").text(\"That was div index #\" + index);\n });\n\n });\n</script>\n<style>\n\n div { background:yellow; margin:5px; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<span>Click a div!</span>\n <div>First div</div>\n <div>Second div</div>\n <div>Third div</div>\n</body>\n</html>"}, {"code": "$(\"*\").index( $('#foobar')[0] )", "htmlCode": "$(\"*\").index( $('#foobar')[0] )", "desc": "Returns the index for the element with ID foobar.", "css": "", "inhead": "", "html": "<div id=\"foobar\"><b></b><span id=\"foo\"></span></div>", "exampleId": "9iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"*\").index( $('#foobar')[0] )\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<div id=\"foobar\"><b></b><span id=\"foo\"></span></div>\n</body>\n</html>"}, {"code": "$(\"*\").index( $('#foo')[0] )", "htmlCode": "$(\"*\").index( $('#foo')[0] )", "desc": "Returns the index for the element with ID foo within another element.", "css": "", "inhead": "", "html": "<div id=\"foobar\"><b></b><span id=\"foo\"></span></div>", "exampleId": "9iframeExample2", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"*\").index( $('#foo')[0] )\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<div id=\"foobar\"><b></b><span id=\"foo\"></span></div>\n</body>\n</html>"}, {"code": "var mainNavLinks = $('ul#mainNav li a');\nmainNavLinks.click(function(){alert(mainNavLinks.index(this)0;});", "htmlCode": "var mainNavLinks = $('ul#mainNav li a');\nmainNavLinks.click(function(){alert(mainNavLinks.index(this)0;});", "desc": "Returns the index for the element clicked within a collection.", "css": "", "inhead": "", "html": "", "exampleId": "9iframeExample3", "runCode": ""}, {"code": "$(\"*\").index( $('#bar')[0] )", "htmlCode": "$(\"*\").index( $('#bar')[0] )", "desc": "Returns -1, as there is no element with ID bar.", "css": "", "inhead": "", "html": "<div id=\"foobar\"><b></b><span id=\"foo\"></span></div>", "exampleId": "9iframeExample4", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"*\").index( $('#bar')[0] )\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<div id=\"foobar\"><b></b><span id=\"foo\"></span></div>\n</body>\n</html>"}]}, "length10": {"id": 10, "searchname": "length", "name": "length", "type": "property", "category": "Core", "subcategory": "jQuery Object Accessors", "return": "Number", "added": "", "sample": "", "desc": "The number of elements in the jQuery object.", "longdesc": "<p>The number of elements currently matched. The <a href='Core/size'>size</a> function will return the same value.</p>", "params": [], "examples": [{"code": " \n $(document.body).click(function () {\n $(document.body).append($(\"<div>\"));\n var n = $(\"div\").length;\n $(\"span\").text(\"There are \" + n + \" divs.\" +\n \"Click to add more.\");\n }).trigger('click'); // trigger the click to start\n", "htmlCode": " \n $(document.body).click(function () {\n $(document.body).append($(\"<div>\"));\n var n = $(\"div\").length;\n $(\"span\").text(\"There are \" + n + \" divs.\" +\n \"Click to add more.\");\n }).trigger('click'); // trigger the click to start\n", "desc": "Count the divs. Click to add more.", "css": "\n body { cursor:pointer; }\n div { width:50px; height:30px; margin:5px; float:left;\n background:green; }\n span { color:red; }\n ", "inhead": "", "html": "<span></span>\n <div></div>", "exampleId": "10iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n \n $(document.body).click(function () {\n $(document.body).append($(\"<div>\"));\n var n = $(\"div\").length;\n $(\"span\").text(\"There are \" + n + \" divs.\" +\n \"Click to add more.\");\n }).trigger('click'); // trigger the click to start\n\n });\n</script>\n<style>\n\n body { cursor:pointer; }\n div { width:50px; height:30px; margin:5px; float:left;\n background:green; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<span></span>\n <div></div>\n</body>\n</html>"}]}, "data11": {"id": 11, "searchname": "data", "name": "data", "type": "function", "category": "Core", "subcategory": "Data Cache", "return": "Any", "added": "1.2.3", "sample": "", "desc": "Returns value at named data store for the element, as set by data(name, value).", "longdesc": "<p>If the JQuery collection references multiple elements, the value returned refers to the first element.</p><p>This function is used to get stored data on an element without the risk of a circular reference. It uses jQuery.data and is new to version 1.2.3. It can be used for many reasons and jQuery UI uses it heavily. </p>", "params": [{"optional": false, "name": "name", "type": "String", "desc": "Name of the data stored."}], "examples": [{"code": "\n $(\"button\").click(function(e) {\n var value;\n\n switch ($(\"button\").index(this)) {\n case 0 :\n value = $(\"div\").data(\"blah\");\n break;\n case 1 :\n $(\"div\").data(\"blah\", \"hello\");\n value = \"Stored!\";\n break;\n case 2 :\n $(\"div\").data(\"blah\", 86);\n value = \"Stored!\";\n break;\n case 3 :\n $(\"div\").removeData(\"blah\");\n value = \"Removed!\";\n break;\n }\n\n $(\"span\").text(\"\" + value);\n });\n", "htmlCode": "\n $(\"button\").click(function(e) {\n var value;\n\n switch ($(\"button\").index(this)) {\n case 0 :\n value = $(\"div\").data(\"blah\");\n break;\n case 1 :\n $(\"div\").data(\"blah\", \"hello\");\n value = \"Stored!\";\n break;\n case 2 :\n $(\"div\").data(\"blah\", 86);\n value = \"Stored!\";\n break;\n case 3 :\n $(\"div\").removeData(\"blah\");\n value = \"Removed!\";\n break;\n }\n\n $(\"span\").text(\"\" + value);\n });\n", "desc": "Get the data named \"blah\" stored at for an element.", "css": "\n div { margin:5px; background:yellow; }\n button { margin:5px; font-size:14px; }\n p { margin:5px; color:blue; }\n span { color:red; }\n ", "inhead": "", "html": "<div>A div</div>\n <button>Get \"blah\" from the div</button>\n <button>Set \"blah\" to \"hello\"</button>\n <button>Set \"blah\" to 86</button>\n <button>Remove \"blah\" from the div</button>\n <p>The \"blah\" value of this div is <span>?</span></p>", "exampleId": "11iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"button\").click(function(e) {\n var value;\n\n switch ($(\"button\").index(this)) {\n case 0 :\n value = $(\"div\").data(\"blah\");\n break;\n case 1 :\n $(\"div\").data(\"blah\", \"hello\");\n value = \"Stored!\";\n break;\n case 2 :\n $(\"div\").data(\"blah\", 86);\n value = \"Stored!\";\n break;\n case 3 :\n $(\"div\").removeData(\"blah\");\n value = \"Removed!\";\n break;\n }\n\n $(\"span\").text(\"\" + value);\n });\n\n });\n</script>\n<style>\n\n div { margin:5px; background:yellow; }\n button { margin:5px; font-size:14px; }\n p { margin:5px; color:blue; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<div>A div</div>\n <button>Get \"blah\" from the div</button>\n <button>Set \"blah\" to \"hello\"</button>\
8000
n <button>Set \"blah\" to 86</button>\n <button>Remove \"blah\" from the div</button>\n <p>The \"blah\" value of this div is <span>?</span></p>\n</body>\n</html>"}]}, "data12": {"id": 12, "searchname": "data", "name": "data", "type": "function", "category": "Core", "subcategory": "Data Cache", "return": "Any", "added": "1.2.3", "sample": "", "desc": "Stores the value in the named spot and also returns the value.", "longdesc": "<p>If the JQuery collection references multiple elements, the data element is set on all of them.</p><p>This function can be useful for attaching data to elements without having to create a new expando. It also isn't limited to a string. The value can be any format.</p>", "params": [{"optional": false, "name": "name", "type": "String", "desc": "Name of the data to store."}, {"optional": false, "name": "value", "type": "Any", "desc": "Value to be stored."}], "examples": [{"code": "\n $(\"div\").data(\"test\", { first: 16, last: \"pizza!\" });\n $(\"span:first\").text($(\"div\").data(\"test\").first);\n $(\"span:last\").text($(\"div\").data(\"test\").last);\n", "htmlCode": "\n $(\"div\").data(\"test\", { first: 16, last: \"pizza!\" });\n $(\"span:first\").text($(\"div\").data(\"test\").first);\n $(\"span:last\").text($(\"div\").data(\"test\").last);\n", "desc": "Store then retrieve a value from the div element.", "css": "\n div { color:blue; }\n span { color:red; }\n ", "inhead": "", "html": "<div>\n The values stored were \n <span></span>\n and\n <span></span>\n </div>", "exampleId": "12iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div\").data(\"test\", { first: 16, last: \"pizza!\" });\n $(\"span:first\").text($(\"div\").data(\"test\").first);\n $(\"span:last\").text($(\"div\").data(\"test\").last);\n\n });\n</script>\n<style>\n\n div { color:blue; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<div>\n The values stored were \n <span></span>\n and\n <span></span>\n </div>\n</body>\n</html>"}]}, "removedata13": {"id": 13, "searchname": "removedata", "name": "removeData", "type": "function", "category": "Core", "subcategory": "Data Cache", "return": "jQuery", "added": "1.2.3", "sample": "", "desc": "Removes named data store from an element.", "longdesc": "<p>This is the complement function to $(...).data(name, value).</p>", "params": [{"optional": false, "name": "name", "type": "String", "desc": "The name of the data store property to remove."}], "examples": [{"code": "\n $(\"span:eq(0)\").text(\"\" + $(\"div\").data(\"test1\"));\n $(\"div\").data(\"test1\", \"VALUE-1\");\n $(\"div\").data(\"test2\", \"VALUE-2\");\n $(\"span:eq(1)\").text(\"\" + $(\"div\").data(\"test1\"));\n $(\"div\").removeData(\"test1\");\n $(\"span:eq(2)\").text(\"\" + $(\"div\").data(\"test1\"));\n $(\"span:eq(3)\").text(\"\" + $(\"div\").data(\"test2\"));\n", "htmlCode": "\n $(\"span:eq(0)\").text(\"\" + $(\"div\").data(\"test1\"));\n $(\"div\").data(\"test1\", \"VALUE-1\");\n $(\"div\").data(\"test2\", \"VALUE-2\");\n $(\"span:eq(1)\").text(\"\" + $(\"div\").data(\"test1\"));\n $(\"div\").removeData(\"test1\");\n $(\"span:eq(2)\").text(\"\" + $(\"div\").data(\"test1\"));\n $(\"span:eq(3)\").text(\"\" + $(\"div\").data(\"test2\"));\n", "desc": "Set a data store for 2 names then remove one of them.", "css": "\n div { margin:2px; color:blue; }\n span { color:red; }\n ", "inhead": "", "html": "<div>value1 before creation: <span></span></div>\n <div>value1 after creation: <span></span></div>\n <div>value1 after removal: <span></span></div>\n <div>value2 after removal: <span></span></div>", "exampleId": "13iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"span:eq(0)\").text(\"\" + $(\"div\").data(\"test1\"));\n $(\"div\").data(\"test1\", \"VALUE-1\");\n $(\"div\").data(\"test2\", \"VALUE-2\");\n $(\"span:eq(1)\").text(\"\" + $(\"div\").data(\"test1\"));\n $(\"div\").removeData(\"test1\");\n $(\"span:eq(2)\").text(\"\" + $(\"div\").data(\"test1\"));\n $(\"span:eq(3)\").text(\"\" + $(\"div\").data(\"test2\"));\n\n });\n</script>\n<style>\n\n div { margin:2px; color:blue; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<div>value1 before creation: <span></span></div>\n <div>value1 after creation: <span></span></div>\n <div>value1 after removal: <span></span></div>\n <div>value2 after removal: <span></span></div>\n</body>\n</html>"}]}, "fn.extend14": {"id": 14, "searchname": "fn.extend", "name": "$.fn.extend", "type": "function", "category": "Core", "subcategory": "Plugins", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Extends the jQuery element set to provide new methods (used to make a typical jQuery plugin).", "longdesc": "<p>Can be used to add functions into the to add <a href='Plugins/Authoring'>plugin methods (plugins)</a>. </p>", "params": [{"optional": false, "name": "object", "type": "Object", "desc": "The object that will be merged into the jQuery object."}], "examples": [{"code": "jQuery.fn.extend({\n check: function() {\n return this.each(function() { this.checked = true; });\n },\n uncheck: function() {\n return this.each(function() { this.checked = false; });\n }\n});", "htmlCode": "jQuery.fn.extend({\n check: function() {\n return this.each(function() { this.checked = true; });\n },\n uncheck: function() {\n return this.each(function() { this.checked = false; });\n }\n});", "desc": "Adds two plugin methods.", "css": "", "inhead": "", "html": "", "exampleId": "14iframeExample0", "runCode": ""}]}, "extend15": {"id": 15, "searchname": "extend", "name": "$.extend", "type": "function", "category": "Core", "subcategory": "Plugins", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Extends the jQuery object itself.", "longdesc": "<p>Can be used to add functions into the jQuery namespace. See <a href='Core/jQuery.fn.extend'>jQuery.fn.extend</a> for more information on using this method to add <a href='Plugins/Authoring'>Plugins</a>.</p>", "params": [{"optional": false, "name": "object", "type": "Object", "desc": "The object that will be merged into the jQuery object."}], "examples": [{"code": "jQuery.extend({\n min: function(a, b) { return a < b ? a : b; },\n max: function(a, b) { return a > b ? a : b; }\n});", "htmlCode": "jQuery.extend({\n min: function(a, b) { return a < b ? a : b; },\n max: function(a, b) { return a > b ? a : b; }\n});", "desc": "Adds two functions into the jQuery namespace.", "css": "", "inhead": "", "html": "", "exampleId": "15iframeExample0", "runCode": ""}]}, "noconflict16": {"id": 16, "searchname": "noconflict", "name": "$.noConflict", "type": "function", "category": "Core", "subcategory": "Interoperability", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Run this function to give control of the $ variable back to whichever library first implemented it.", "longdesc": "<p>This helps to make sure that jQuery doesn't conflict with the $ object of other libraries.</p><p>By using this function, you will only be able to access jQuery using the 'jQuery' variable. For example, where you used to do $(\"div p\"), you now must do jQuery(\"div p\").</p><p><strong>NOTE:</strong> This function must be called after including the jQuery javascript file, but <strong>before</strong> including any other conflicting library, and also before actually that other conflicting library gets used, in case jQuery is included last.</p>", "params": [], "examples": [{"code": "jQuery.noConflict();\n// Do something with jQuery\njQuery(\"div p\").hide();\n// Do something with another library's $()\n$(\"content\").style.display = 'none';", "htmlCode": "jQuery.noConflict();\n// Do something with jQuery\njQuery(\"div p\").hide();\n// Do something with another library's $()\n$(\"content\").style.display = 'none';", "desc": "Maps the original object that was referenced by $ back to $.", "css": "", "inhead": "", "html": "", "exampleId": "16iframeExample0", "runCode": ""}, {"code": "jQuery.noConflict();\n(function($) { \n $(function() {\n // more code using $ as alias to jQuery\n });\n})(jQuery);\n// other code using $ as an alias to the other library", "htmlCode": "jQuery.noConflict();\n(function($) { \n $(function() {\n // more code using $ as alias to jQuery\n });\n})(jQuery);\n// other code using $ as an alias to the other library", "desc": "Reverts the $ alias and then creates and executes a function to provide the $ as a jQuery alias inside the functions scope. Inside the function the original $ object is not available. This works well for most plugins that don't rely on any other library.", "css": "", "inhead": "", "html": "", "exampleId": "16iframeExample1", "runCode": ""}, {"code": "var j = jQuery.noConflict();\n// Do something with jQuery\nj(\"div p\").hide();\n// Do something with another library's $()\n$(\"content\").style.display = 'none';", "htmlCode": "var j = jQuery.noConflict();\n// Do something with jQuery\nj(\"div p\").hide();\n// Do something with another library's $()\n$(\"content\").style.display = 'none';", "desc": "Creates a different alias instead of jQuery to use in the rest of the script.", "css": "", "inhead": "", "html": "", "exampleId": "16iframeExample2", "runCode": ""}]}, "noconflict17": {"id": 17, "searchname": "noconflict", "name": "$.noConflict", "type": "function", "category": "Core", "subcategory": "Interoperability", "return": "jQuery", "added": "1.1.4", "sample": "", "desc": "Revert control of both the $ and jQuery variables to their original owners. '''Use with discretion.'''", "longdesc": "<p>This is a more-extreme version of the simple <a href='Core/jQuery.noConflict'>noConflict</a> method, as this one will completely undo what jQuery has introduced. This is to be used in an extreme case where you'd like to embed jQuery into a high-conflict environment. <strong>NOTE:</strong> It's very likely that plugins won't work after this particular method has been called.</p>", "params": [{"optional": false, "name": "extreme", "type": "Boolean", "desc": "Set to true to enable the extreme rollback of jQuery and it's variables."}], "examples": [{"code": "var dom = {};\ndom.query = jQuery.noConflict(true);", "htmlCode": "var dom = {};\ndom.query = jQuery.noConflict(true);", "desc": "Completely move jQuery to a new namespace in another object.", "css": "", "inhead": "", "html": "", "exampleId": "17iframeExample0", "runCode": ""}]}, "id18": {"id": 18, "searchname": "id", "name": "id", "type": "selector", "category": "Selectors", "subcategory": "Basics", "return": "Array<Element>", "added": "1.0", "sample": "#id", "desc": "Matches a single element with the given id attribute. ", "longdesc": "<p>If the id contains characters like periods or colons you have to escape those characters with backslashes <a href=\"http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_select_an_element_that_has_weird_characters_in_its_ID.3F\">http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_select_an_element_that_has_weird_characters_in_its_ID.3F</a>.</p>", "params": [{"optional": false, "name": "id", "type": "String", "desc": "An ID to search for, specified via the id attribute of an element."}], "examples": [{"code": "$(\"#myDiv\").css(\"border\",\"3px solid red\");", "htmlCode": "$(\"#myDiv\").css(\"border\",\"3px solid red\");", "desc": "Finds the element with the id \"myDiv\".", "css": "\n div {\n width: 90px;\n height: 90px;\n float:left;\n padding: 5px;\n margin: 5px;\n background-color: #EEEEEE;\n }\n ", "inhead": "", "html": "<div id=\"notMe\"><p>id=\"notMe\"</p></div>\n <div id=\"myDiv\">id=\"myDiv\"</div>", "exampleId": "18iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"#myDiv\").css(\"border\",\"3px solid red\");\n });\n</script>\n<style>\n\n div {\n width: 90px;\n height: 90px;\n float:left;\n padding: 5px;\n margin: 5px;\n background-color: #EEEEEE;\n }\n \n</style>\n</head>\n<body>\n<div id=\"notMe\"><p>id=\"notMe\"</p></div>\n <div id=\"myDiv\">id=\"myDiv\"</div>\n</body>\n</html>"}, {"code": "$(\"#myID\\\\.entry\\\\[1\\\\]\").css(\"border\",\"3px solid red\");", "htmlCode": "$(\"#myID\\\\.entry\\\\[1\\\\]\").css(\"border\",\"3px solid red\");", "desc": "Finds the element with the id \"myID.entry[1]\". See how certain characters must be escaped with backslashes.", "css": "\n div {\n width: 300px;\n float:left;\n padding: 2px;\n margin: 3px;\n background-color: #EEEEEE;\n }\n ", "inhead": "", "html": "<div id=\"myID.entry[0]\">id=\"myID.entry[0]\"</div>\n <div id=\"myID.entry[1]\">id=\"myID.entry[1]\"</div>\n <div id=\"myID.entry[2]\">id=\"myID.entry[2]\"</div>", "exampleId": "18iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"#myID\\\\.entry\\\\[1\\\\]\").css(\"border\",\"3px solid red\");\n });\n</script>\n<style>\n\n div {\n width: 300px;\n float:left;\n padding: 2px;\n margin: 3px;\n background-color: #EEEEEE;\n }\n \n</style>\n</head>\n<body>\n<div id=\"myID.entry[0]\">id=\"myID.entry[0]\"</div>\n <div id=\"myID.entry[1]\">id=\"myID.entry[1]\"</div>\n <div id=\"myID.entry[2]\">id=\"myID.entry[2]\"</div>\n</body>\n</html>"}]}, "element19": {"id": 19, "searchname": "element", "name": "element", "type": "selector", "category": "Selectors", "subcategory": "Basics", "return": "Array<Element(s)>", "added": "1.0", "sample": "element", "desc": "Matches all elements with the given name. ", "longdesc": "", "params": [{"optional": false, "name": "element", "type": "String", "desc": "An element to search for. Refers to the tagName of DOM nodes."}], "examples": [{"code": "$(\"div\").css(\"border\",\"3px solid red\");", "htmlCode": "$(\"div\").css(\"border\",\"3px solid red\");", "desc": "Finds every DIV element.", "css": "\n div,span {\n width: 60px;\n height: 60px;\n float:left;\n padding: 10px;\n margin: 10px;\n background-color: #EEEEEE;\n }\n ", "inhead": "", "html": "<div>DIV1</div>\n <div>DIV2</div>\n <span>SPAN</span>", "exampleId": "19iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"div\").css(\"border\",\"3px solid red\");\n });\n</script>\n<style>\n\n div,span {\n width: 60px;\n height: 60px;\n float:left;\n padding: 10px;\n margin: 10px;\n background-color: #EEEEEE;\n }\n \n</style>\n</head>\n<body>\n<div>DIV1</div>\n <div>DIV2</div>\n <span>SPAN</span>\n</body>\n</html>"}]}, "class20": {"id": 20, "searchname": "class", "name": "class", "type": "selector", "category": "Selectors", "subcategory": "Basics", "return": "Array<Element(s)>", "added"
10000
;: "1.0", "sample": ".class", "desc": "Matches all elements with the given class. ", "longdesc": "", "params": [{"optional": false, "name": "class", "type": "String", "desc": "A class to search for. An element can have multiple classes, one of them must match."}], "examples": [{"code": "$(\".myClass\").css(\"border\",\"3px solid red\");", "htmlCode": "$(\".myClass\").css(\"border\",\"3px solid red\");", "desc": "Finds the element with the class \"myClass\".", "css": "\n div,span {\n width: 150px;\n height: 60px;\n float:left;\n padding: 10px;\n margin: 10px;\n background-color: #EEEEEE;\n }\n ", "inhead": "", "html": "<div class=\"notMe\">div class=\"notMe\"</div>\n <div class=\"myClass\">div class=\"myClass\"</div>\n <span class=\"myClass\">span class=\"myClass\"</span>", "exampleId": "20iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\".myClass\").css(\"border\",\"3px solid red\");\n });\n</script>\n<style>\n\n div,span {\n width: 150px;\n height: 60px;\n float:left;\n padding: 10px;\n margin: 10px;\n background-color: #EEEEEE;\n }\n \n</style>\n</head>\n<body>\n<div class=\"notMe\">div class=\"notMe\"</div>\n <div class=\"myClass\">div class=\"myClass\"</div>\n <span class=\"myClass\">span class=\"myClass\"</span>\n</body>\n</html>"}]}, "all21": {"id": 21, "searchname": "all", "name": "all", "type": "selector", "category": "Selectors", "subcategory": "Basics", "return": "Array<Element(s)>", "added": "1.0", "sample": "*", "desc": "Matches all elements.", "longdesc": "<p>Most useful when combined with a context to search in.</p>", "params": [], "examples": [{"code": "$(\"*\").css(\"border\",\"3px solid red\");", "htmlCode": "$(\"*\").css(\"border\",\"3px solid red\");", "desc": "Finds every element (including head, body, etc).", "css": "\n div,span,p {\n width: 150px;\n height: 60px;\n float:left;\n padding: 10px;\n margin: 10px;\n background-color: #EEEEEE;\n }\n ", "inhead": "", "html": "<div>DIV</div>\n <span>SPAN</span>\n <p>P <button>Button</button></p>", "exampleId": "21iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"*\").css(\"border\",\"3px solid red\");\n });\n</script>\n<style>\n\n div,span,p {\n width: 150px;\n height: 60px;\n float:left;\n padding: 10px;\n margin: 10px;\n background-color: #EEEEEE;\n }\n \n</style>\n</head>\n<body>\n<div>DIV</div>\n <span>SPAN</span>\n <p>P <button>Button</button></p>\n</body>\n</html>"}, {"code": "$(\"*\", document.body).css(\"border\",\"3px solid red\");", "htmlCode": "$(\"*\", document.body).css(\"border\",\"3px solid red\");", "desc": "A common way to find all elements is to set the 'context' to document.body so elements like head, script, etc are left out.", "css": "", "inhead": "", "html": "", "exampleId": "21iframeExample1", "runCode": ""}]}, "multiple22": {"id": 22, "searchname": "multiple", "name": "multiple", "type": "selector", "category": "Selectors", "subcategory": "Basics", "return": "Array<Element(s)>", "added": "1.0", "sample": "selector1, selector2, selectorN", "desc": "Matches the combined results of all the specified selectors.", "longdesc": "<p>You can specify any number of selectors to combine into a single result. Note order of the dom elements in the jQuery object aren't necessarily identical.</p>", "params": [{"optional": false, "name": "selector1", "type": "Selector", "desc": "Any valid selector"}, {"optional": false, "name": "selector2", "type": "Selector", "desc": "Another valid selector"}, {"optional": true, "name": "selectorN", "type": "Selector", "desc": "As many more valid selectors as you like"}], "examples": [{"code": "$(\"div,span,p.myClass\").css(\"border\",\"3px solid red\");", "htmlCode": "$(\"div,span,p.myClass\").css(\"border\",\"3px solid red\");", "desc": "Finds the elements that match any of these three selectors.", "css": "\n div,span,p {\n width: 130px;\n height: 60px;\n float:left;\n padding: 3px;\n margin: 2px;\n background-color: #EEEEEE;\n font-size:14px;\n }\n ", "inhead": "", "html": "<div>div</div>\n <p class=\"myClass\">p class=\"myClass\"</p>\n <p class=\"notMyClass\">p class=\"notMyClass\"</p>\n <span>span</span>", "exampleId": "22iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"div,span,p.myClass\").css(\"border\",\"3px solid red\");\n });\n</script>\n<style>\n\n div,span,p {\n width: 130px;\n height: 60px;\n float:left;\n padding: 3px;\n margin: 2px;\n background-color: #EEEEEE;\n font-size:14px;\n }\n \n</style>\n</head>\n<body>\n<div>div</div>\n <p class=\"myClass\">p class=\"myClass\"</p>\n <p class=\"notMyClass\">p class=\"notMyClass\"</p>\n <span>span</span>\n</body>\n</html>"}, {"code": "\n var list = $(\"div,p,span\").map(function () {\n return this.tagName;\n }).get().join(\", \");\n $(\"b\").append(document.createTextNode(list));\n", "htmlCode": "\n var list = $(\"div,p,span\").map(function () {\n return this.tagName;\n }).get().join(\", \");\n $(\"b\").append(document.createTextNode(list));\n", "desc": "Show the order in the jQuery object.", "css": "\n b { color:red; font-size:16px; display:block; clear:left; }\n div,span,p { width: 40px; height: 40px; float:left;\n margin: 10px; background-color: blue; \n padding:3px; color:white; }\n ", "inhead": "", "html": "<span>span</span>\n <p>p</p>\n <p>p</p>\n <div>div</div>\n <span>span</span>\n <p>p</p>\n <div>div</div>\n <b></b>", "exampleId": "22iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var list = $(\"div,p,span\").map(function () {\n return this.tagName;\n }).get().join(\", \");\n $(\"b\").append(document.createTextNode(list));\n\n });\n</script>\n<style>\n\n b { color:red; font-size:16px; display:block; clear:left; }\n div,span,p { width: 40px; height: 40px; float:left;\n margin: 10px; background-color: blue; \n padding:3px; color:white; }\n \n</style>\n</head>\n<body>\n<span>span</span>\n <p>p</p>\n <p>p</p>\n <div>div</div>\n <span>span</span>\n <p>p</p>\n <div>div</div>\n <b></b>\n</body>\n</html>"}]}, "descendant23": {"id": 23, "searchname": "descendant", "name": "descendant", "type": "selector", "category": "Selectors", "subcategory": "Hierarchy", "return": "Array<Element(s)>", "added": "1.0", "sample": "ancestor descendant", "desc": "Matches all descendant elements specified by \"descendant\" of elements specified by \"ancestor\".", "longdesc": "", "params": [{"optional": false, "name": "ancestor", "type": "Selector", "desc": "Any valid selector."}, {"optional": false, "name": "descendant", "type": "Selector", "desc": "A selector to match elements that are descendants of the first selector."}], "examples": [{"code": "$(\"form input\").css(\"border\", \"2px dotted blue\");", "htmlCode": "$(\"form input\").css(\"border\", \"2px dotted blue\");", "desc": "Finds all input descendants of forms.", "css": "\n body { font-size:14px; }\n form { border:2px green solid; padding:2px; margin:0; \n background:#efe; }\n div { color:red; }\n fieldset { margin:1px; padding:3px; }\n ", "inhead": "", "html": "<form>\n <div>Form is surrounded by the green outline</div>\n <label>Child:</label>\n <input name=\"name\" />\n <fieldset>\n <label>Grandchild:</label>\n <input name=\"newsletter\" />\n </fieldset>\n </form>\n Sibling to form: <input name=\"none\" />", "exampleId": "23iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"form input\").css(\"border\", \"2px dotted blue\");\n });\n</script>\n<style>\n\n body { font-size:14px; }\n form { border:2px green solid; padding:2px; margin:0; \n background:#efe; }\n div { color:red; }\n fieldset { margin:1px; padding:3px; }\n \n</style>\n</head>\n<body>\n<form>\n <div>Form is surrounded by the green outline</div>\n <label>Child:</label>\n <input name=\"name\" />\n <fieldset>\n <label>Grandchild:</label>\n <input name=\"newsletter\" />\n </fieldset>\n </form>\n Sibling to form: <input name=\"none\" />\n</body>\n</html>"}]}, "child24": {"id": 24, "searchname": "child", "name": "child", "type": "selector", "category": "Selectors", "subcategory": "Hierarchy", "return": "Array<Element(s)>", "added": "1.0", "sample": "parent > child", "desc": "Matches all child elements specified by \"child\" of elements specified by \"parent\".", "longdesc": "", "params": [{"optional": false, "name": "parent", "type": "Selector", "desc": "Any valid selector."}, {"optional": false, "name": "child", "type": "Selector", "desc": "A selector to match elements that are children of the first selector."}], "examples": [{"code": "$(\"#main > *\").css(\"border\", \"3px double red\");", "htmlCode": "$(\"#main > *\").css(\"border\", \"3px double red\");", "desc": "Finds all children of the element with id \"main\" which is yellow.", "css": "\n body { font-size:14px; }\n span#main { display:block; background:yellow; height:110px; }\n button { display:block; float:left; margin:2px; \n font-size:14px; }\n div { width:90px; height:90px; margin:5px; float:left;\n background:#bbf; font-weight:bold; }\n div.mini { width:30px; height:30px; background:green; }\n ", "inhead": "", "html": "<span id=\"main\">\n <div></div>\n <button>Child</button>\n <div class=\"mini\"></div>\n <div>\n <div class=\"mini\"></div>\n <div class=\"mini\"></div>\n </div>\n <div><button>Grand</button></div>\n <div><span>A Span <em>in</em> child</span></div>\n <span>A Span in main</span>\n </span>", "exampleId": "24iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"#main > *\").css(\"border\", \"3px double red\");\n });\n</script>\n<style>\n\n body { font-size:14px; }\n span#main { display:block; background:yellow; height:110px; }\n button { display:block; float:left; margin:2px; \n font-size:14px; }\n div { width:90px; height:90px; margin:5px; float:left;\n background:#bbf; font-weight:bold; }\n div.mini { width:30px; height:30px; background:green; }\n \n</style>\n</head>\n<body>\n<span id=\"main\">\n <div></div>\n <button>Child</button>\n <div class=\"mini\"></div>\n <div>\n <div class=\"mini\"></div>\n <div class=\"mini\"></div>\n </div>\n <div><button>Grand</button></div>\n <div><span>A Span <em>in</em> child</span></div>\n <span>A Span in main</span>\n </span>\n</body>\n</html>"}]}, "next25": {"id": 25, "searchname": "next", "name": "next", "type": "selector", "category": "Selectors", "subcategory": "Hierarchy", "return": "Array<Element(s)>", "added": "1.0", "sample": "prev + next", "desc": "Matches all next elements specified by \"next\" that are next to elements specified by \"prev\".", "longdesc": "", "params": [{"optional": false, "name": "prev", "type": "Selector", "desc": "Any valid selector."}, {"optional": false, "name": "next", "type": "Selector", "desc": "A selector to match elements that are next to the first selector."}], "examples": [{"code": "$(\"label + input\").css(\"color\", \"blue\").val(\"Labeled!\")", "htmlCode": "$(\"label + input\").css(\"color\", \"blue\").val(\"Labeled!\")", "desc": "Finds all inputs that are next to a label.", "css": "", "inhead": "", "html": "<form>\n <label>Name:</label>\n <input name=\"name\" />\n <fieldset>\n <label>Newsletter:</label>\n <input name=\"newsletter\" />\n </fieldset>\n </form>\n <input name=\"none\" />", "exampleId": "25iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"label + input\").css(\"color\", \"blue\").val(\"Labeled!\")\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<form>\n <label>Name:</label>\n <input name=\"name\" />\n <fieldset>\n <label>Newsletter:</label>\n <input name=\"newsletter\" />\n </fieldset>\n </form>\n <input name=\"none\" />\n</body>\n</html>"}]}, "siblings26": {"id": 26, "searchname": "siblings", "name": "siblings", "type": "selector", "category": "Selectors", "subcategory": "Hierarchy", "return": "Array<Element(s)>", "added": "1.0", "sample": "prev ~ siblings", "desc": "Matches all sibling elements after the \"prev\" element that match the filtering \"siblings\" selector.", "longdesc": "", "params": [{"optional": false, "name": "prev", "type": "Selector", "desc": "Any valid selector."}, {"optional": false, "name": "siblings", "type": "Selector", "desc": "A filter selector to match elements that are following siblings to the first selector."}], "examples": [{"code": "$(\"#prev ~ div\").css(\"border\", \"3px groove blue\");", "htmlCode": "$(\"#prev ~ div\").css(\"border\", \"3px groove blue\");", "desc": "Finds all divs that are siblings after the element with #prev as its id. Notice the span isn't selected since it is not a div and the \"niece\" isn't selected since it is a child of a sibling, not an actual sibling.", "css": "\n div,span {\n display:block;\n width:80px;\n height:80px;\n margin:5px;\n background:#bbffaa;\n float:left;\n font-size:14px;\n }\n div#small {\n width:60px;\n height:25px;\n font-size:12px;\n background:#fab;\n }\n ", "inhead": "", "html": "<div>div (doesn't match since before #prev)</div>\n <div id=\"prev\">div#prev</div>\n <div>div sibling</div>\n <div>div sibling <div id=\"small\">div neice</div></div>\n <span>span sibling (not div)</span>\n <div>div sibling</div>", "exampleId": "26iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"#prev ~ div\").css(\"border\", \"3px groove blue\");\n });\n</script>\n<style>\n\n div,span {\n display:block;\n width:80px;\n height:80px;\n margin:5px;\n background:#bbffaa;\n float:left;\n font-size:14px;\n }\n div#small {\n width:60px;\n height:25px;\n font-size:12px;\n background:#fab;\n }\n \n</style>\n</head>\n<body>\n<div>div (doesn't match since before #prev)</div>\n <div id=\"prev\">div#prev</div>\n <div>div sibling</div>\n <div>div sibling <div id=\"small\">div neice</div></div>\n <span>span sibling (not div)</span>\n <div>div sibling</div>\n</body>\n</html>"}]}, "first27": {"id": 27, "searchname": "first", "name": "first", "type": "selector", "category": "Selectors", "subcategory": "Basic Filters", "return": "Array<Element>", "added": "1.0", "sample": ":first", "desc": "Matches the first selected element.", "longdesc": "<p>While this matches only a single element, <a href='Selectors/firstChild'>:first-child</a> matches more than one: One for each parent.</p>", "params": [], "examples": [{"code": "$(\"tr:first\").css(\"font-style\", \"italic\");", "htmlCode": "$(\"tr:first\").css(\"font-style\", \"italic\");", "desc": "Finds the first table row.", "css": "\n td { color:blue; font-weight:bold; }\n ", "inhead": "", "html": "<table>\n <tr><td>Row 1</td></tr>\n <tr><td>Row 2</td></tr>\n <tr><td>Row 3</td></tr>\n </table>", "exampleId": "27iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"tr:first\").css(\"font-style\", \"italic\");\n });\n</script>\n<style>\n\n td { color:blue; font-weight:bold; }\n \n</style>\n</head>\n<body>\n<table>\n <tr><td>Row 1</td></tr>\n <tr><td>Row 2</td></tr>\n <tr><td>Row 3</td></tr>\n </table>\n</body>\n</html>"}]}, "last28": {"id": 28, "searchname": "last", "name": "last", "type": "selector", "category": "Selectors", "subcategory": "Basic Filters", "return": "Array<Element>", "added": "1.0", "sample": ":last", "desc": "Matches the last selected element.", "longdesc": "", "params": [], "examples": [{"code": "$(\"tr:last\").css({backgroundColor: 'yellow', fontWeight: 'bolder'});", "htmlCode": "$(\"tr:last\").css({backgroundColor: 'yellow', fontWeight: 'bolder'});", "desc": "Finds the last table row.", "css": "", "inhead": "", "html": "<table>\n <tr><td>First Row</td></tr>\n <tr><td>Middle Row</td></tr>\n <tr><td>Last Row</td></tr>\n </table>", "exampleId": "28iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"tr:last\").css({backgroundColor: 'yellow', fontWeight: 'bolder'});\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<table>\n <tr><td>First Row</td></tr>\n <tr><td>Middle Row</td></tr>\n <tr><td>Last Row</td></tr>\n </table>\n</body>\n</html>"}]}, "not29": {"id": 29, "searchname": "not", "name": "not", "type": "selector", "category": "Selectors", "subcategory": "Basic Filters", "return": "Array<Element(s)>", "added": "1.1.4", "sample": ":not(selector)", "desc": "Filters out all elements matching the given selector.", "longdesc": "", "params": [{"optional": false, "name": "selector", "type": "Selector", "desc": "A selector with which to filter by."}], "examples": [{"code": "\n $(\"input:not(:checked) + span\").css(\"background-color\", \"yellow\");\n $(\"input\").attr(\"disabled\", \"disabled\");\n", "htmlCode": "\n $(\"input:not(:checked) + span\").css(\"background-color\", \"yellow\");\n $(\"input\").attr(\"disabled\", \"disabled\");\n", "desc": "Finds all inputs that are not checked and highlights the next sibling span. Notice there is no change when clicking the checkboxes since no click events have been linked.", "css": "", "inhead": "", "html": "<div>\n <input type=\"checkbox\" name=\"a\" />\n <span>Mary</span>\n </div>\n <div>\n <input type=\"checkbox\" name=\"b\" />\n <span>lcm</span>\n </div>\n <div>\n <input type=\"checkbox\" name=\"c\" checked=\"checked\" />\n <span>Peter</span>\n </div>", "exampleId": "29iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"input:not(:checked) + span\").css(\"background-color\", \"yellow\");\n $(\"input\").attr(\"disabled\", \"disabled\");\n\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<div>\n <input type=\"checkbox\" name=\"a\" />\n <span>Mary</span>\n </div>\n <div>\n <input type=\"checkbox\" name=\"b\" />\n <span>lcm</span>\n </div>\n <div>\n <input type=\"checkbox\" name=\"c\" checked=\"checked\" />\n <span>Peter</span>\n </div>\n</body>\n</html>"}]}, "even30": {"id": 30, "searchname": "even", "name": "even", "type": "selector", "category": "Selectors", "subcategory": "Basic Filters", "return": "Array<Element(s)>", "added": "1.0", "sample": ":even", "desc": "Matches even elements, zero-indexed.", "longdesc": "", "params": [], "examples": [{"code": "$(\"tr:even\").css(\"background-color\", \"#bbbbff\");", "htmlCode": "$(\"tr:even\").css(\"background-color\", \"#bbbbff\");", "desc": "Finds even table rows, matching the first, third and so on (index 0, 2, 4 etc.).", "css": "\n table {\n background:#eeeeee;\n }\n ", "inhead": "", "html": "<table border=\"1\">\n <tr><td>Row with Index #0</td></tr>\n <tr><td>Row with Index #1</td></tr>\n <tr><td>Row with Index #2</td></tr>\n <tr><td>Row with Index #3</td></tr>\n </table>", "exampleId": "30iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"tr:even\").css(\"background-color\", \"#bbbbff\");\n });\n</script>\n<style>\n\n table {\n background:#eeeeee;\n }\n \n</style>\n</head>\n<body>\n<table border=\"1\">\n <tr><td>Row with Index #0</td></tr>\n <tr><td>Row with Index #1</td></tr>\n <tr><td>Row with Index #2</td></tr>\n <tr><td>Row with Index #3</td></tr>\n </table>\n</body>\n</html>"}]}, "odd31": {"id": 31, "searchname": "odd", "name": "odd", "type": "selector", "category": "Selectors", "subcategory": "Basic Filters", "return": "Array<Element(s)>", "added": "1.0", "sample": ":odd", "desc": "Matches odd elements, zero-indexed.", "longdesc": "", "params": [], "examples": [{"code": "$(\"tr:odd\").css(\"background-color\", \"#bbbbff\");", "htmlCode": "$(\"tr:odd\").css(\"background-color\", \"#bbbbff\");", "desc": "Finds odd table rows, matching the second, fourth and so on (index 1, 3, 5 etc.).", "css": "\n table {\n background:#f3f7f5;\n }\n ", "inhead": "", "html": "<table border=\"1\">\n <tr><td>Row with Index #0</td></tr>\n <tr><td>Row with Index #1</td></tr>\n <tr><td>Row with Index #2</td></tr>\n <tr><td>Row with Index #3</td></tr>\n </table>", "exampleId": "31iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"tr:odd\").css(\"background-color\", \"#bbbbff\");\n });\n</script>\n<style>\n\n table {\n background:#f3f7f5;\n }\n \n</style>\n</head>\n<body>\n<table border=\"1\">\n <tr><td>Row with Index #0</td></tr>\n <tr><td>Row with Index #1</td></tr>\n <tr><td>Row with Index #2</td></tr>\n <tr><td>Row with Index #3</td></tr>\n </table>\n</body>\n</html>"}]}, "eq32": {"id": 32, "searchname": "eq", "name": "eq", "type": "selector", "category": "Selectors", "subcategory": "Basic Filters", "return": "Array<Element>", "added": "1.0", "sample": ":eq(index)", "desc": "Matches a single element by its index.", "longdesc": "", "params": [{"optional": false, "name": "index", "type": "Number", "desc": "Zero-based index of the element to match."}], "examples": [{"code": "$(\"td:eq(2)\").css(\"color\", \"red\");", "htmlCode": "$(\"td:eq(2)\").css(\"color\", \"red\");", "desc": "Finds the third td.", "css": "", "inhead": "", "html": "<table border=\"1\">\n <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>\n <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>\n <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>\n </table>", "exampleId": "32iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"td:eq(2)\").css(\"color\", \"red\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<table border=\"1\">\n <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>\n <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>\n <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>\n </table>\n</body>\n</html>"}]}, "gt33": {"id": 33, "searchname": "gt", "name": "gt", "type": "selector", "category": "Selectors", "subcategory": "Basic Filters", "return": "Array<Element(s)>", "added": "1.0", "sample": ":gt(index)", "desc": "Matches all elements with an index above the given one.", "longdesc": "", "params": [{"optional": false, "name": "index", "type": "Number", "desc": "Zero-based index."}], "examples": [{"code": "$(\"td:gt(4)\").css(\"text-decoration\", \"line-through\");", "htmlCode": "$(\"td:gt(4)\").css(\"text-decoration\", \"line-through\");", "desc": "Finds TD #5 and higher. Reminder: the indexing starts at 0.", "css": "", "inhead": "", "html": "<table border=\"1\">\n <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>\n <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>\n <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>\n </table>", "exampleId": "33iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"td:gt(4)\").css(\"text-decoration\", \"line-through\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<table border=\"1\">\n <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>\n <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>\n <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>\n </table>\n</body>\n</html>"}]}, "lt34": {"id": 34, "searchname": "lt", "name": "lt", "type": "selector", "category": "Selectors", "subcategory": "Basic Filters", "return": "Array<Element(s)>", "added": "1.0", "sample": ":lt(index)", "desc": "Matches all elements with an index below the given one.", "longdesc": "", "params": [{"optional": false, "name": "index", "type": "Number", "desc": "Zero-based index."}], "examples": [{"code": "$(\"td:lt(4)\").css(\"color\", \"red\");", "htmlCode": "$(\"td:lt(4)\").css(\"color\", \"red\");", "desc": "Finds TDs less than the one with the 4th index (TD#4).", "css": "", "inhead": "", "html": "<table border=\"1\">\n <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>\n <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>\n <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>\n </table>", "exampleId": "34iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"td:lt(4)\").css(\"color\", \"red\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<table border=\"1\">\n <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>\n <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>\n <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>\n </table>\n</body>\n</html>"}]}, "header35": {"id": 35, "searchname": "header", "name": "header", "type": "selector", "category": "Selectors", "subcategory": "Basic Filters", "return": "Array<Element(s)>", "added": "1.2", "sample": ":header", "desc": "Matches all elements that are headers, like h1, h2, h3 and so on.", "longdesc": "", "params": [], "examples": [{"code": "$(\":header\").css({ background:'#CCC', color:'blue' });", "htmlCode": "$(\":header\").css({ background:'#CCC', color:'blue' });", "desc": "Adds a background and text color to all the headers on the page.", "css": "\n body { font-size: 10px; font-family: Arial; } \n h1, h2 { margin: 3px 0; }\n ", "inhead": "", "html": "<h1>Header 1</h1>\n <p>Contents 1</p>\n <h2>Header 2</h2>\n <p>Contents 2</p>", "exampleId": "35iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\":header\").css({ background:'#CCC', color:'blue' });\n });\n</script>\n<style>\n\n body { font-size: 10px; font-family: Arial; } \n h1, h2 { margin: 3px 0; }\n \n</style>\n</head>\n<body>\n<h1>Header 1</h1>\n <p>Contents 1</p>\n <h2>Header 2</h2>\n <p>Contents 2</p>\n</body>\n</html>"}]}, "animated36": {"id": 36, "searchname": "animated", "name": "animated", "type": "selector", "category": "Selectors", "subcategory": "Basic Filters", "return": "Array<Element(s)>", "added": "1.2", "sample": ":animated", "desc": "Matches all elements that are currently being animated.", "longdesc": "", "params": [], "examples": [{"code": "\n $(\"#run\").click(function(){\n $(\"div:animated\").toggleClass(\"colored\");\n });\n function animateIt() {\n $(\"#mover\").slideToggle(\"slow\", animateIt);\n }\n animateIt();\n", "htmlCode": "\n $(\"#run\").click(function(){\n $(\"div:animated\").toggleClass(\"colored\");\n });\n function animateIt() {\n $(\"#mover\").slideToggle(\"slow\", animateIt);\n }\n animateIt();\n", "desc": "Change the color of any div that is animated.", "css": "\n div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:5px; float:left; }\n div.colored { background:green; }\n ", "inhead": "", "html": "<button id=\"run\">Run</button>\n <div></div>\n <div id=\"mover\"></div>\n <div></div>", "exampleId": "36iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"#run\").click(function(){\n $(\"div:animated\").toggleClass(\"colored\");\n });\n function animateIt() {\n $(\"#mover\").slideToggle(\"slow\", animateIt);\n }\n&n
10000
bsp; animateIt();\n\n });\n</script>\n<style>\n\n div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:5px; float:left; }\n div.colored { background:green; }\n \n</style>\n</head>\n<body>\n<button id=\"run\">Run</button>\n <div></div>\n <div id=\"mover\"></div>\n <div></div>\n</body>\n</html>"}]}, "contains37": {"id": 37, "searchname": "contains", "name": "contains", "type": "selector", "category": "Selectors", "subcategory": "Content Filters", "return": "Array<Element(s)>", "added": "1.1.4", "sample": ":contains(text)", "desc": "Matches elements which contain the given text.", "longdesc": "", "params": [{"optional": false, "name": "text", "type": "String", "desc": "A string of text to look for. It's case sensitive."}], "examples": [{"code": "$(\"div:contains('John')\").css(\"text-decoration\", \"underline\");", "htmlCode": "$(\"div:contains('John')\").css(\"text-decoration\", \"underline\");", "desc": "Finds all divs containing \"John\" and underlines them.", "css": "", "inhead": "", "html": "<div>John Resig</div>\n <div>George Martin</div>\n <div>Malcom John Sinclair</div>\n <div>J. Ohn", "exampleId": "37iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"div:contains('John')\").css(\"text-decoration\", \"underline\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<div>John Resig</div>\n <div>George Martin</div>\n <div>Malcom John Sinclair</div>\n <div>J. Ohn\n</body>\n</html>"}]}, "empty38": {"id": 38, "searchname": "empty", "name": "empty", "type": "selector", "category": "Selectors", "subcategory": "Content Filters", "return": "Array<Element(s)>", "added": "1.0", "sample": ":empty", "desc": "Matches all elements that have no children (including text nodes).", "longdesc": "", "params": [], "examples": [{"code": "$(\"td:empty\").text(\"Was empty!\").css('background', 'rgb(255,220,200)');", "htmlCode": "$(\"td:empty\").text(\"Was empty!\").css('background', 'rgb(255,220,200)');", "desc": "Finds all elements that are empty - they don't have child elements or text.", "css": "\n td { text-align:center; }\n ", "inhead": "", "html": "<table border=\"1\">\n <tr><td>TD #0</td><td></td></tr>\n <tr><td>TD #2</td><td></td></tr>\n <tr><td></td><td>TD#5</td></tr>\n </table>", "exampleId": "38iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"td:empty\").text(\"Was empty!\").css('background', 'rgb(255,220,200)');\n });\n</script>\n<style>\n\n td { text-align:center; }\n \n</style>\n</head>\n<body>\n<table border=\"1\">\n <tr><td>TD #0</td><td></td></tr>\n <tr><td>TD #2</td><td></td></tr>\n <tr><td></td><td>TD#5</td></tr>\n </table>\n</body>\n</html>"}]}, "has39": {"id": 39, "searchname": "has", "name": "has", "type": "selector", "category": "Selectors", "subcategory": "Content Filters", "return": "Array<Element(s)>", "added": "1.1.4", "sample": ":has(selector)", "desc": "Matches elements which contain at least one element that matches the specified selector.", "longdesc": "", "params": [{"optional": false, "name": "selector", "type": "Selector", "desc": "A selector with which to filter by."}], "examples": [{"code": "$(\"div:has(p)\").addClass(\"test\");", "htmlCode": "$(\"div:has(p)\").addClass(\"test\");", "desc": "Adds the class \"test\" to all divs that have a paragraph inside of them.", "css": "\n .test{ border: 3px inset red; }\n ", "inhead": "", "html": "<div><p>Hello in a paragraph</p></div>\n <div>Hello again! (with no paragraph)</div>", "exampleId": "39iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"div:has(p)\").addClass(\"test\");\n });\n</script>\n<style>\n\n .test{ border: 3px inset red; }\n \n</style>\n</head>\n<body>\n<div><p>Hello in a paragraph</p></div>\n <div>Hello again! (with no paragraph)</div>\n</body>\n</html>"}]}, "parent40": {"id": 40, "searchname": "parent", "name": "parent", "type": "selector", "category": "Selectors", "subcategory": "Content Filters", "return": "Array<Element(s)>", "added": "1.0", "sample": ":parent", "desc": "Matches all elements that are parents - they have child elements, including text.", "longdesc": "", "params": [], "examples": [{"code": "$(\"td:parent\").fadeTo(1500, 0.3);", "htmlCode": "$(\"td:parent\").fadeTo(1500, 0.3);", "desc": "Finds all tds with children, including text.", "css": "\ntd { width:40px; background:green; }\n ", "inhead": "", "html": "<table border=\"1\">\n <tr><td>Value 1</td><td></td></tr>\n <tr><td>Value 2</td><td></td></tr>\n </table>", "exampleId": "40iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"td:parent\").fadeTo(1500, 0.3);\n });\n</script>\n<style>\n\ntd { width:40px; background:green; }\n \n</style>\n</head>\n<body>\n<table border=\"1\">\n <tr><td>Value 1</td><td></td></tr>\n <tr><td>Value 2</td><td></td></tr>\n </table>\n</body>\n</html>"}]}, "hidden41": {"id": 41, "searchname": "hidden", "name": "hidden", "type": "selector", "category": "Selectors", "subcategory": "Visibility Filters", "return": "Array<Element(s)>", "added": "1.0", "sample": ":hidden", "desc": "Matches all elements that are hidden, or input elements of type \"hidden\".", "longdesc": "", "params": [], "examples": [{"code": "\n // in some browsers :hidden includes head, title, script, etc... so limit to body\n $(\"span:first\").text(\"Found \" + $(\":hidden\", document.body).length + \n \" hidden elements total.\");\n $(\"div:hidden\").show(3000);\n $(\"span:last\").text(\"Found \" + $(\"input:hidden\").length + \" hidden inputs.\");\n", "htmlCode": "\n // in some browsers :hidden includes head, title, script, etc... so limit to body\n $(\"span:first\").text(\"Found \" + $(\":hidden\", document.body).length + \n \" hidden elements total.\");\n $(\"div:hidden\").show(3000);\n $(\"span:last\").text(\"Found \" + $(\"input:hidden\").length + \" hidden inputs.\");\n", "desc": "Shows all hidden divs and counts hidden inputs.", "css": "\n div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }\n span { display:block; clear:left; color:red; }\n .starthidden { display:none; }\n ", "inhead": "", "html": "<span></span>\n <div></div>\n <div style=\"display:none;\">Hider!</div>\n <div></div>\n <div class=\"starthidden\">Hider!</div>\n <div></div>\n <form>\n <input type=\"hidden\" />\n <input type=\"hidden\" />\n <input type=\"hidden\" />\n </form>\n <span>\n </span>", "exampleId": "41iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n // in some browsers :hidden includes head, title, script, etc... so limit to body\n $(\"span:first\").text(\"Found \" + $(\":hidden\", document.body).length + \n \" hidden elements total.\");\n $(\"div:hidden\").show(3000);\n $(\"span:last\").text(\"Found \" + $(\"input:hidden\").length + \" hidden inputs.\");\n\n });\n</script>\n<style>\n\n div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }\n span { display:block; clear:left; color:red; }\n .starthidden { display:none; }\n \n</style>\n</head>\n<body>\n<span></span>\n <div></div>\n <div style=\"display:none;\">Hider!</div>\n <div></div>\n <div class=\"starthidden\">Hider!</div>\n <div></div>\n <form>\n <input type=\"hidden\" />\n <input type=\"hidden\" />\n <input type=\"hidden\" />\n </form>\n <span>\n </span>\n</body>\n</html>"}]}, "visible42": {"id": 42, "searchname": "visible", "name": "visible", "type": "selector", "category": "Selectors", "subcategory": "Visibility Filters", "return": "Array<Element(s)>", "added": "1.0", "sample": ":visible", "desc": "Matches all elements that are visible.", "longdesc": "", "params": [], "examples": [{"code": "\n $(\"div:visible\").click(function () {\n $(this).css(\"background\", \"yellow\");\n });\n $(\"button\").click(function () {\n $(\"div:hidden\").show(\"fast\");\n });\n", "htmlCode": "\n $(\"div:visible\").click(function () {\n $(this).css(\"background\", \"yellow\");\n });\n $(\"button\").click(function () {\n $(\"div:hidden\").show(\"fast\");\n });\n", "desc": "Make all visible divs turn yellow on click.", "css": "\n div { width:50px; height:40px; margin:5px; border:3px outset green; float:left; }\n .starthidden { display:none; }\n ", "inhead": "", "html": "<button>Show hidden to see they don't change</button>\n <div></div>\n <div class=\"starthidden\"></div>\n <div></div>\n <div></div>\n <div style=\"display:none;\"></div>", "exampleId": "42iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div:visible\").click(function () {\n $(this).css(\"background\", \"yellow\");\n });\n $(\"button\").click(function () {\n $(\"div:hidden\").show(\"fast\");\n });\n\n });\n</script>\n<style>\n\n div { width:50px; height:40px; margin:5px; border:3px outset green; float:left; }\n .starthidden { display:none; }\n \n</style>\n</head>\n<body>\n<button>Show hidden to see they don't change</button>\n <div></div>\n <div class=\"starthidden\"></div>\n <div></div>\n <div></div>\n <div style=\"display:none;\"></div>\n</body>\n</html>"}]}, "attributehas43": {"id": 43, "searchname": "attributehas", "name": "attributeHas", "type": "selector", "category": "Selectors", "subcategory": "Attribute Filters", "return": "Array<Element(s)>", "added": "1.0", "sample": "[attribute]", "desc": "Matches elements that have the specified attribute.", "longdesc": "", "params": [{"optional": false, "name": "attribute", "type": "String", "desc": "An attribute name."}], "examples": [{"code": "\n $(\"div[id]\").one(\"click\", function(){\n var idString = $(this).text() + \" = \" + $(this).attr(\"id\");\n $(this).text(idString);\n });\n", "htmlCode": "\n $(\"div[id]\").one(\"click\", function(){\n var idString = $(this).text() + \" = \" + $(this).attr(\"id\");\n $(this).text(idString);\n });\n", "desc": "Bind a single click that adds the div id to its text.", "css": "", "inhead": "", "html": "<div>no id</div>\n <div id=\"hey\">with id</div>\n <div id=\"there\">has an id</div>\n <div>nope</div>", "exampleId": "43iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div[id]\").one(\"click\", function(){\n var idString = $(this).text() + \" = \" + $(this).attr(\"id\");\n $(this).text(idString);\n });\n\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<div>no id</div>\n <div id=\"hey\">with id</div>\n <div id=\"there\">has an id</div>\n <div>nope</div>\n</body>\n</html>"}]}, "attributeequals44": {"id": 44, "searchname": "attributeequals", "name": "attributeEquals", "type": "selector", "category": "Selectors", "subcategory": "Attribute Filters", "return": "Array<Element(s)>", "added": "1.0", "sample": "[attribute=value]", "desc": "Matches elements that have the specified attribute with a certain value.", "longdesc": "", "params": [{"optional": false, "name": "attribute", "type": "String", "desc": "An attribute name."}, {"optional": false, "name": "value", "type": "String", "desc": "An attribute value. Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like \"]\"."}], "examples": [{"code": "$(\"input[name='newsletter']\").next().text(\" is newsletter\");", "htmlCode": "$(\"input[name='newsletter']\").next().text(\" is newsletter\");", "desc": "Finds all inputs with name 'newsletter' and changes the text of the span next to it.", "css": "", "inhead": "", "html": "<div>\n <input type=\"radio\" name=\"newsletter\" value=\"Hot Fuzz\" />\n <span>name?</span>\n </div>\n <div>\n <input type=\"radio\" name=\"newsletters\" value=\"Cold Fusion\" />\n <span>name?</span>\n </div>\n <div>\n <input type=\"radio\" name=\"accept\" value=\"Evil Plans\" />\n <span>name?</span>\n </div>", "exampleId": "44iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"input[name='newsletter']\").next().text(\" is newsletter\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<div>\n <input type=\"radio\" name=\"newsletter\" value=\"Hot Fuzz\" />\n <span>name?</span>\n </div>\n <div>\n <input type=\"radio\" name=\"newsletters\" value=\"Cold Fusion\" />\n <span>name?</span>\n </div>\n <div>\n <input type=\"radio\" name=\"accept\" value=\"Evil Plans\" />\n <span>name?</span>\n </div>\n</body>\n</html>"}]}, "attributenotequal45": {"id": 45, "searchname": "attributenotequal", "name": "attributeNotEqual", "type": "selector", "category": "Selectors", "subcategory": "Attribute Filters", "return": "Array<Element(s)>", "added": "1.0", "sample": "[attribute!=value]", "desc": "Matches elements that don't have the specified attribute with a certain value.", "longdesc": "", "params": [{"optional": false, "name": "attribute", "type": "String", "desc": "An attribute name."}, {"optional": false, "name": "value", "type": "String", "desc": "An attribute value. Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like \"]\"."}], "examples": [{"code": "$(\"input[name!='newsletter']\").next().text(\" is not newsletter\");", "htmlCode": "$(\"input[name!='newsletter']\").next().text(\" is not newsletter\");", "desc": "Finds all inputs that don't have the name 'newsletter' and changes the text of the span next to it.", "css": "", "inhead": "", "html": "<div>\n <input type=\"radio\" name=\"newsletter\" value=\"Hot Fuzz\" />\n <span>name?</span>\n </div>\n <div>\n <input type=\"radio\" name=\"newsletter\" value=\"Cold Fusion\" />\n <span>name?</span>\n </div>\n <div>\n <input type=\"radio\" name=\"accept\" value=\"Evil Plans\" />\n <span>name?</span>\n </div>", "exampleId": "45iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"input[name!='newsletter']\").next().text(\" is not newsletter\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<div>\n <input type=\"radio\" name=\"newsletter\" value=\"Hot Fuzz\" />\n <span>name?</span>\n </div>\n <div>\n <input type=\"radio\" name=\"newsletter\" value=\"Cold Fusion\" />\n <span>name?</span>\n </div>\n <div>\n <input type=\"radio\" name=\"accept\" value=\"Evil Plans\" />\n <span>name?</span>\n </div>\n</body>\n</html>"}]}, "attributestartswith46": {"id": 46, "searchname": "attributestartswith", "name": "attributeStartsWith", "type": "selector", "category": "Selectors", "subcategory": "Attribute Filters", "return": "Array<Element(s)>", "added": "1.0", "sample": "[attribute^=value]", "desc": "Matches elements that have the specified attribute and it starts with a certain value.", "longdesc": "", "params": [{"optional": false, "name": "attribute", "type": "String", "desc": "An attribute name."}, {"optional": false, "name": "value", "type": "String", "desc": "An attribute value. Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like \"]\"."}], "examples": [{"code": "$(\"input[@name^='news']\").val(\"news here!\");", "htmlCode": "$(\"input[@name^='news']\").val(\"news here!\");", "desc": "Finds all inputs with an attribute name that starts with 'news' and puts text in them.", "css": "", "inhead": "", "html": "<input name=\"newsletter\" />\n <input name=\"milkman\" />\n <input name=\"newsboy\" />", "exampleId": "46iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"input[@name^='news']\").val(\"news here!\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<input name=\"newsletter\" />\n <input name=\"milkman\" />\n <input name=\"newsboy\" />\n</body>\n</html>"}]}, "attributeendswith47": {"id": 47, "searchname": "attributeendswith", "name": "attributeEndsWith", "type": "selector", "category": "Selectors", "subcategory": "Attribute Filters", "return": "Array<Element(s)>", "added": "1.0", "sample": "[attribute$=value]", "desc": "Matches elements that have the specified attribute and it ends with a certain value.", "longdesc": "", "params": [{"optional": false, "name": "attribute", "type": "String", "desc": "An attribute name."}, {"optional": false, "name": "value", "type": "String", "desc": "An attribute value. Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like \"]\"."}], "examples": [{"code": "$(\"input[name$='letter']\").val(\"a letter\");", "htmlCode": "$(\"input[name$='letter']\").val(\"a letter\");", "desc": "Finds all inputs with an attribute name that ends with 'letter' and puts text in them.", "css": "", "inhead": "", "html": "<input name=\"newsletter\" />\n <input name=\"milkman\" />\n <input name=\"jobletter\" />", "exampleId": "47iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"input[name$='letter']\").val(\"a letter\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<input name=\"newsletter\" />\n <input name=\"milkman\" />\n <input name=\"jobletter\" />\n</body>\n</html>"}]}, "attributecontains48": {"id": 48, "searchname": "attributecontains", "name": "attributeContains", "type": "selector", "category": "Selectors", "subcategory": "Attribute Filters", "return": "Array<Element(s)>", "added": "1.0", "sample": "[attribute*=value]", "desc": "Matches elements that have the specified attribute and it contains a certain value.", "longdesc": "", "params": [{"optional": false, "name": "attribute", "type": "String", "desc": "An attribute name."}, {"optional": false, "name": "value", "type": "String", "desc": "An attribute value. Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like \"]\"."}], "examples": [{"code": "$(\"input[name*='man']\").val(\"has man in it!\");", "htmlCode": "$(\"input[name*='man']\").val(\"has man in it!\");", "desc": "Finds all inputs that with a name attribute that contains 'man' and sets the value with some text.", "css": "", "inhead": "", "html": "<input name=\"man-news\" />\n <input name=\"milkman\" />\n <input name=\"letterman2\" />\n <input name=\"newmilk\" />", "exampleId": "48iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"input[name*='man']\").val(\"has man in it!\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<input name=\"man-news\" />\n <input name=\"milkman\" />\n <input name=\"letterman2\" />\n <input name=\"newmilk\" />\n</body>\n</html>"}]}, "attributemultiple49": {"id": 49, "searchname": "attributemultiple", "name": "attributeMultiple", "type": "selector", "category": "Selectors", "subcategory": "Attribute Filters", "return": "Array<Element(s)>", "added": "1.0", "sample": "[selector1][selector2][selectorN]", "desc": "Matches elements that have the specified attribute and it contains a certain value.", "longdesc": "", "params": [{"optional": false, "name": "selector1", "type": "Selector", "desc": "An attribute selector."}, {"optional": false, "name": "selector2", "type": "Selector", "desc": "Another attribute selector, reducing the selection even more"}, {"optional": true, "name": "selectorN", "type": "Selector", "desc": "As many more attribute selectors as necessary"}], "examples": [{"code": "$(\"input[id][name$='man']\").val(\"only this one\");", "htmlCode": "$(\"input[id][name$='man']\").val(\"only this one\");", "desc": "Finds all inputs that have an id attribute and whose name attribute ends with man and sets the value.", "css": "", "inhead": "", "html": "<input id=\"man-news\" name=\"man-news\" />\n <input name=\"milkman\" />\n <input id=\"letterman\" name=\"new-letterman\" />\n <input name=\"newmilk\" />", "exampleId": "49iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"input[id][name$='man']\").val(\"only this one\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<input id=\"man-news\" name=\"man-news\" />\n <input name=\"milkman\" />\n <input id=\"letterman\" name=\"new-letterman\" />\n <input name=\"newmilk\" />\n</body>\n</html>"}]}, "nthchild50": {"id": 50, "searchname": "nthchild", "name": "nthChild", "type": "selector", "category": "Selectors", "subcategory": "Child Filters", "return": "Array<Element(s)>", "added": "1.1.4", "sample": ":nth-child(index/even/odd/equation)", "desc": "Matches all elements that are the nth-child of their parent or that are the parent's even or odd children.", "longdesc": "<p>While <a href='Selectors/eq'>:eq(index)</a> matches only a single element, this matches more then one: One for each parent with index. Multiple for each parent with even, odd, or equation.</p><p>The specified index is one-indexed, in contrast to :eq() which starts at zero.</p>", "params": [{"optional": false, "name": "index", "type": "Number/String", "desc": "The index of each child to match, starting with 1 or the string even, odd, or equation ( eg. :nth-child(even), :nth-child(4n) )"}], "examples": [{"code": "$(\"ul li:nth-child(2)\").append(\"<span> - 2nd!</span>\");", "htmlCode": "$(\"ul li:nth-child(2)\").append(\"<span> - 2nd!</span>\");", "desc": "Finds the second li in each matched ul and notes it.", "css": "\n div { float:left; }\n span { color:blue; }\n ", "inhead": "", "html": "<div><ul>\n <li>John</li>\n <li>Karl</li>\n <li>Brandon</li>\n </ul></div>\n <div><ul>\n <li>Sam</li>\n </ul></div>\n <div><ul>\n <li>Glen</li>\n <li>Tane</li>\n <li>Ralph</li>\n <li>David</li>\n </ul></div>", "exampleId": "50iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"ul li:nth-child(2)\").append(\"<span> - 2nd!</span>\");\n });\n</script>\n<style>\n\n div { float:left; }\n span { color:blue; }\n \n</style>\n</head>\n<body>\n<div><ul>\n <li>John</li>\n <li>Karl</li>\n <li>Brandon</li>\n </ul></div>\n <div><ul>\n <li>Sam</li>\n </ul></div>\n <div><ul>\n <li>Glen</li>\n <li>Tane</li>\n <li>Ralph</li>\n <li>David</li>\n </ul></div>\n</body>\n</html>"}, {"code": "\n $(\"button\").click(function () {\n var str = $(this).text();\n $(\"tr\").css(\"background\", \"white\");\n $(\"tr\" + str).css(\"background\", \"#ff0000\");\n $(\"#inner\").text(str);\n });\n", "htmlCode": "\n $(\"button\").click(function () {\n var str = $(this).text();\n $(\"tr\").css(\"background\", \"white\");\n $(\"tr\" + str).css(\"background\", \"#ff0000\");\n $(\"#inner\").text(str);\n });\n", "desc": "This is a playground to see how the selector works with different strings. Notice that this is different from the :even and :odd which have no regard for parent and just filter the list of elements to every other one. The :nth-child, however, counts the index of the child to its particular parent. In any case, it's easier to see than explain so...", "css": "\n button { display:block; font-size:12px; width:100px; }\n div { float:left; margin:10px; font-size:10px; \n border:1px solid black; }\n span { color:blue; font-size:18px; }\n #inner { color:red; }\n td { width:50px; text-align:center; }\n ", "inhead": "", "html": "<div>\n <button>:nth-child(even)</button>\n <button>:nth-child(odd)</button>\n <button>:nth-child(3n)</button>\n <button>:nth-child(2)</button>\n </div>\n <div>\n <button>:nth-child(3n+1)</button>\n <button>:nth-child(3n+2)</button>\n <button>:even</button>\n <button>:odd</button>\n </div>\n <div><table>\n <tr><td>John</td></tr>\n <tr><td>Karl</td></tr>\n <tr><td>Brandon</td></tr>\n <tr><td>Benjamin</td></tr>\n </table></div>\n <div><table>\n <tr><td>Sam</td></tr>\n </table></div>\n <div><table>\n <tr><td>Glen</td></tr>\n <tr><td>Tane</td></tr>\n <tr><td>Ralph</td></tr>\n <tr><td>David</td></tr>\n <tr><td>Mike</td></tr>\n <tr><td>Dan</td></tr>\n </table></div>\n <span>\n tr<span id=\"inner\"></span>\n </span>", "exampleId": "50iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"button\").click(function () {\n var str = $(this).text();\n $(\"tr\").css(\"background\", \"white\");\n $(\"tr\" + str).css(\"background\", \"#ff0000\");\n $(\"#inner\").text(str);\n });\n\n });\n</script>\n<style>\n\n button { display:block; font-size:12px; width:100px; }\n div { float:left; margin:10px; font-size:10px; \n border:1px solid black; }\n span { color:blue; font-size:18px; }\n #inner { color:red; }\n td { width:50px; text-align:center; }\n \n</style>\n</head>\n<body>\n<div>\n <button>:nth-child(even)</button>\n <button>:nth-child(odd)</button>\n <button>:nth-child(3n)</button>\n <button>:nth-child(2)</button>\n </div>\n <div>\n <button>:nth-child(3n+1)</button>\n <button>:nth-child(3n+2)</button>\n <button>:even</button>\n <button>:odd</button>\n </div>\n <div><table>\n <tr><td>John</td></tr>\n <tr><td>Karl</td></tr>\n <tr><td>Brandon</td></tr>\n <tr><td>Benjamin</td></tr>\n </table></div>\n <div><table>\n <tr><td>Sam</td></tr>\n </table></div>\n <div><table>\n <tr><td>Glen</td></tr>\n <tr><td>Tane</td></tr>\n <tr><td>Ralph</td></tr>\n <tr><td>David</td></tr>\n <tr><td>Mike</td></tr>\n <tr><td>Dan</td></tr>\n </table></div>\n <span>\n tr<span id=\"inner\"></span>\n </span>\n</body>\n</html>"}]}, "firstchild51": {"id": 51, "searchname": "firstchild", "name": "firstChild", "type": "selector", "category": "Selectors", "subcategory": "Child Filters", "return": "Array<Element(s)>", "added": "1.1.4", "sample": ":first-child", "desc": "Matches all elements that are the first child of their parent.", "longdesc": "<p>While <a href='Selectors/first'>:first</a> matches only a single element, this matches more then one: One for each parent.</p>", "params": [], "examples": [{"code": "\n $(\"div span:first-child\")\n .css(\"text-decoration\", \"underline\")\n .hover(function () {\n $(this).addClass(\"sogreen\");\n }, function () {\n $(this).removeClass(\"sogreen\");\n });\n", "htmlCode": "\n $(\"div span:first-child\")\n .css(\"text-decoration\", \"underline\")\n .hover(function () {\n $(this).addClass(\"sogreen\");\n }, function () {\n $(this).removeClass(\"sogreen\");\n });\n", "desc": "Finds the first span in each matched div to underline and add a hover state.", "css": "\n span { color:#008; }\n span.sogreen { color:green; font-weight: bolder; }\n ", "inhead": "", "html": "<div>\n <span>John,</span>\n <span>Karl,</span>\n <span>Brandon</span>\n </div>\n <div>\n <span>Glen,</span>\n <span>Tane,</span>\n <span>Ralph</span>\n </div>", "exampleId": "51iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div span:first-child\")\n .css(\"text-decoration\", \"underline\")\n .hover(function () {\n $(this).addClass(\"sogreen\");\n }, function () {\n $(this).removeClass(\"sogreen\");\n });\n\n });\n</script>\n<style>\n\n span { color:#008; }\n span.sogreen { color:green; font-weight: bolder; }\n \n</style>\n</head>\n<body>\n<div>\n <span>John,</span>\n <span>Karl,</span>\n <span>Brandon</span>\n </div>\n <div>\n <span>Glen,</span>\n <span>Tane,</span>\n <span>Ralph</span>\n </div>\n</body>\n</html>"}]}, "lastchild52": {"id": 52, "searchname": "lastchild", "name": "lastChild", "type": "selector", "category": "Selectors", "subcategory": "Child Filters", "return": "Array<Element(s)>",
10000
"added": "1.1.4", "sample": ":last-child", "desc": "Matches all elements that are the last child of their parent.", "longdesc": "<p>While <a href='Selectors/last'>:last</a> matches only a single element, this matches more then one: One for each parent.</p>", "params": [], "examples": [{"code": "\n $(\"div span:last-child\")\n .css({color:\"red\", fontSize:\"80%\"})\n .hover(function () {\n $(this).addClass(\"solast\");\n }, function () {\n $(this).removeClass(\"solast\");\n });\n", "htmlCode": "\n $(\"div span:last-child\")\n .css({color:\"red\", fontSize:\"80%\"})\n .hover(function () {\n $(this).addClass(\"solast\");\n }, function () {\n $(this).removeClass(\"solast\");\n });\n", "desc": "Finds the last span in each matched div and adds some css plus a hover state.", "css": "\n span.solast { text-decoration:line-through; }\n ", "inhead": "", "html": "<div>\n <span>John,</span>\n <span>Karl,</span>\n <span>Brandon,</span>\n <span>Sam</span>\n </div>\n <div>\n <span>Glen,</span>\n <span>Tane,</span>\n <span>Ralph,</span>\n <span>David</span>\n </div>", "exampleId": "52iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div span:last-child\")\n .css({color:\"red\", fontSize:\"80%\"})\n .hover(function () {\n $(this).addClass(\"solast\");\n }, function () {\n $(this).removeClass(\"solast\");\n });\n\n });\n</script>\n<style>\n\n span.solast { text-decoration:line-through; }\n \n</style>\n</head>\n<body>\n<div>\n <span>John,</span>\n <span>Karl,</span>\n <span>Brandon,</span>\n <span>Sam</span>\n </div>\n <div>\n <span>Glen,</span>\n <span>Tane,</span>\n <span>Ralph,</span>\n <span>David</span>\n </div>\n</body>\n</html>"}]}, "onlychild53": {"id": 53, "searchname": "onlychild", "name": "onlyChild", "type": "selector", "category": "Selectors", "subcategory": "Child Filters", "return": "Array<Element(s)>", "added": "1.1.4", "sample": ":only-child", "desc": "Matches all elements that are the only child of their parent.", "longdesc": "<p>If the parent has other child elements, nothing is matched.</p>", "params": [], "examples": [{"code": "$(\"div button:only-child\").text(\"Alone\").css(\"border\", \"2px blue solid\");", "htmlCode": "$(\"div button:only-child\").text(\"Alone\").css(\"border\", \"2px blue solid\");", "desc": "Finds the button with no siblings in each matched div and modifies look.", "css": "\n div { width:100px; height:80px; margin:5px; float:left; background:#b9e }\n ", "inhead": "", "html": "<div>\n <button>Sibling!</button>\n <button>Sibling!</button>\n </div>\n <div>\n <button>Sibling!</button>\n </div>\n <div>\n None\n </div>\n <div> \n <button>Sibling!</button>\n <button>Sibling!</button>\n <button>Sibling!</button>\n </div>\n <div>\n <button>Sibling!</button>\n </div>", "exampleId": "53iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"div button:only-child\").text(\"Alone\").css(\"border\", \"2px blue solid\");\n });\n</script>\n<style>\n\n div { width:100px; height:80px; margin:5px; float:left; background:#b9e }\n \n</style>\n</head>\n<body>\n<div>\n <button>Sibling!</button>\n <button>Sibling!</button>\n </div>\n <div>\n <button>Sibling!</button>\n </div>\n <div>\n None\n </div>\n <div> \n <button>Sibling!</button>\n <button>Sibling!</button>\n <button>Sibling!</button>\n </div>\n <div>\n <button>Sibling!</button>\n </div>\n</body>\n</html>"}]}, "input54": {"id": 54, "searchname": "input", "name": "input", "type": "selector", "category": "Selectors", "subcategory": "Forms", "return": "Array<Element(s)>", "added": "1.0", "sample": ":input", "desc": "Matches all input, textarea, select and button elements.", "longdesc": "", "params": [], "examples": [{"code": "\n var allInputs = $(\":input\");\n var formChildren = $(\"form > *\");\n $(\"div\").text(\"Found \" + allInputs.length + \" inputs and the form has \" +\n formChildren.length + \" children.\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n", "htmlCode": "\n var allInputs = $(\":input\");\n var formChildren = $(\"form > *\");\n $(\"div\").text(\"Found \" + allInputs.length + \" inputs and the form has \" +\n formChildren.length + \" children.\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n", "desc": "Finds all input elements.", "css": "\n textarea { height:45px; }\n ", "inhead": "", "html": "<form>\n <input type=\"button\" value=\"Input Button\"/>\n <input type=\"checkbox\" />\n <input type=\"file\" />\n <input type=\"hidden\" />\n <input type=\"image\" />\n <input type=\"password\" />\n <input type=\"radio\" />\n <input type=\"reset\" />\n <input type=\"submit\" />\n <input type=\"text\" />\n <select><option>Option</option></select>\n <textarea></textarea>\n <button>Button</button>\n </form>\n <div>\n </div>", "exampleId": "54iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var allInputs = $(\":input\");\n var formChildren = $(\"form > *\");\n $(\"div\").text(\"Found \" + allInputs.length + \" inputs and the form has \" +\n formChildren.length + \" children.\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n\n });\n</script>\n<style>\n\n textarea { height:45px; }\n \n</style>\n</head>\n<body>\n<form>\n <input type=\"button\" value=\"Input Button\"/>\n <input type=\"checkbox\" />\n <input type=\"file\" />\n <input type=\"hidden\" />\n <input type=\"image\" />\n <input type=\"password\" />\n <input type=\"radio\" />\n <input type=\"reset\" />\n <input type=\"submit\" />\n <input type=\"text\" />\n <select><option>Option</option></select>\n <textarea></textarea>\n <button>Button</button>\n </form>\n <div>\n </div>\n</body>\n</html>"}]}, "text55": {"id": 55, "searchname": "text", "name": "text", "type": "selector", "category": "Selectors", "subcategory": "Forms", "return": "Array<Element(s)>", "added": "1.0", "sample": ":text", "desc": "Matches all input elements of type text.", "longdesc": "", "params": [], "examples": [{"code": "\n var input = $(\":text\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n", "htmlCode": "\n var input = $(\":text\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n", "desc": "Finds all text inputs.", "css": "\n textarea { height:45px; }\n ", "inhead": "", "html": "<form>\n <input type=\"button\" value=\"Input Button\"/>\n <input type=\"checkbox\" />\n <input type=\"file\" />\n <input type=\"hidden\" />\n <input type=\"image\" />\n <input type=\"password\" />\n <input type=\"radio\" />\n <input type=\"reset\" />\n <input type=\"submit\" />\n <input type=\"text\" />\n <select><option>Option<option/></select>\n <textarea></textarea>\n <button>Button</button>\n </form>\n <div>\n </div>", "exampleId": "55iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var input = $(\":text\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n\n });\n</script>\n<style>\n\n textarea { height:45px; }\n \n</style>\n</head>\n<body>\n<form>\n <input type=\"button\" value=\"Input Button\"/>\n <input type=\"checkbox\" />\n <input type=\"file\" />\n <input type=\"hidden\" />\n <input type=\"image\" />\n <input type=\"password\" />\n <input type=\"radio\" />\n <input type=\"reset\" />\n <input type=\"submit\" />\n <input type=\"text\" />\n <select><option>Option<option/></select>\n <textarea></textarea>\n <button>Button</button>\n </form>\n <div>\n </div>\n</body>\n</html>"}]}, "password56": {"id": 56, "searchname": "password", "name": "password", "type": "selector", "category": "Selectors", "subcategory": "Forms", "return": "Array<Element(s)>", "added": "1.0", "sample": ":password", "desc": "Matches all input elements of type password.", "longdesc": "", "params": [], "examples": [{"code": "\n var input = $(\":password\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n", "htmlCode": "\n var input = $(\":password\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n", "desc": "Finds all password inputs.", "css": "\n textarea { height:45px; }\n ", "inhead": "", "html": "<form>\n <input type=\"button\" value=\"Input Button\"/>\n <input type=\"checkbox\" />\n <input type=\"file\" />\n <input type=\"hidden\" />\n <input type=\"image\" />\n <input type=\"password\" />\n <input type=\"radio\" />\n <input type=\"reset\" />\n <input type=\"submit\" />\n <input type=\"text\" />\n <select><option>Option<option/></select>\n <textarea></textarea>\n <button>Button</button>\n </form>\n <div>\n </div>", "exampleId": "56iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var input = $(\":password\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n\n });\n</script>\n<style>\n\n textarea { height:45px; }\n \n</style>\n</head>\n<body>\n<form>\n <input type=\"button\" value=\"Input Button\"/>\n <input type=\"checkbox\" />\n <input type=\"file\" />\n <input type=\"hidden\" />\n <input type=\"image\" />\n <input type=\"password\" />\n <input type=\"radio\" />\n <input type=\"reset\" />\n <input type=\"submit\" />\n <input type=\"text\" />\n <select><option>Option<option/></select>\n <textarea></textarea>\n <button>Button</button>\n </form>\n <div>\n </div>\n</body>\n</html>"}]}, "radio57": {"id": 57, "searchname": "radio", "name": "radio", "type": "selector", "category": "Selectors", "subcategory": "Forms", "return": "Array<Element(s)>", "added": "1.0", "sample": ":radio", "desc": "Matches all input elements of type radio.", "longdesc": "", "params": [], "examples": [{"code": "\n var input = $(\":radio\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n", "htmlCode": "\n var input = $(\":radio\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n", "desc": "Finds all radio inputs.", "css": "\n textarea { height:45px; }\n ", "inhead": "", "html": "<form>\n <input type=\"button\" value=\"Input Button\"/>\n <input type=\"checkbox\" />\n <input type=\"file\" />\n <input type=\"hidden\" />\n <input type=\"image\" />\n <input type=\"password\" />\n <input type=\"radio\" name=\"asdf\" />\n <input type=\"radio\" name=\"asdf\" />\n <input type=\"reset\" />\n <input type=\"submit\" />\n <input type=\"text\" />\n <select><option>Option<option/></select>\n <textarea></textarea>\n <button>Button</button>\n </form>\n <div>\n </div>", "exampleId": "57iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var input = $(\":radio\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n\n });\n</script>\n<style>\n\n textarea { height:45px; }\n \n</style>\n</head>\n<body>\n<form>\n <input type=\"button\" value=\"Input Button\"/>\n <input type=\"checkbox\" />\n <input type=\"file\" />\n <input type=\"hidden\" />\n <input type=\"image\" />\n <input type=\"password\" />\n <input type=\"radio\" name=\"asdf\" />\n <input type=\"radio\" name=\"asdf\" />\n <input type=\"reset\" />\n <input type=\"submit\" />\n <input type=\"text\" />\n <select><option>Option<option/></select>\n <textarea></textarea>\n <button>Button</button>\n </form>\n <div>\n </div>\n</body>\n</html>"}]}, "checkbox58": {"id": 58, "searchname": "checkbox", "name": "checkbox", "type": "selector", "category": "Selectors", "subcategory": "Forms", "return": "Array<Element(s)>", "added": "1.0", "sample": ":checkbox", "desc": "Matches all input elements of type checkbox.", "longdesc": "", "params": [], "examples": [{"code": "\n var input = $(\":checkbox\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n", "htmlCode": "\n var input = $(\":checkbox\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n", "desc": "Finds all checkbox inputs.", "css": "\n textarea { height:45px; }\n ", "inhead": "", "html": "<form>\n <input type=\"button\" value=\"Input Button\"/>\n <input type=\"checkbox\" />\n <input type=\"checkbox\" />\n <input type=\"file\" />\n <input type=\"hidden\" />\n <input type=\"image\" />\n <input type=\"password\" />\n <input type=\"radio\" />\n <input type=\"reset\" />\n <input type=\"submit\" />\n <input type=\"text\" />\n <select><option>Option<option/></select>\n <textarea></textarea>\n <button>Button</button>\n </form>\n <div>\n </div>", "exampleId": "58iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var input = $(\":checkbox\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n\n });\n</script>\n<style>\n\n textarea { height:45px; }\n \n</style>\n</head>\n<body>\n<form>\n <input type=\"button\" value=\"Input Button\"/>\n <input type=\"checkbox\" />\n <input type=\"checkbox\" />\n <input type=\"file\" />\n <input type=\"hidden\" />\n <input type=\"image\" />\n <input type=\"password\" />\n <input type=\"radio\" />\n <input type=\"reset\" />\n <input type=\"submit\" />\n <input type=\"text\" />\n <select><option>Option<option/></select>\n <textarea></textarea>\n <button>Button</button>\n </form>\n <div>\n </div>\n</body>\n</html>"}]}, "submit59": {"id": 59, "searchname": "submit", "name": "submit", "type": "selector", "category": "Selectors", "subcategory": "Forms", "return": "Array<Element(s)>", "added": "1.0", "sample": ":submit", "desc": "Matches all input elements of type submit.", "longdesc": "", "params": [], "examples": [{"code": "\n var input = $(\":submit\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n", "htmlCode": "\n var input = $(\":submit\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n", "desc": "Finds all submit inputs.", "css": "\n textarea { height:45px; }\n ", "inhead": "", "html": "<form>\n <input type=\"button\" value=\"Input Button\"/>\n <input type=\"checkbox\" />\n <input type=\"file\" />\n <input type=\"hidden\" />\n <input type=\"image\" />\n <input type=\"password\" />\n <input type=\"radio\" />\n <input type=\"reset\" />\n <input type=\"submit\" />\n <input type=\"text\" />\n <select><option>Option<option/></select>\n <textarea></textarea>\n <button>Button</button>\n </form>\n <div>\n </div>", "exampleId": "59iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var input = $(\":submit\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n\n });\n</script>\n<style>\n\n textarea { height:45px; }\n \n</style>\n</head>\n<body>\n<form>\n <input type=\"button\" value=\"Input Button\"/>\n <input type=\"checkbox\" />\n <input type=\"file\" />\n <input type=\"hidden\" />\n <input type=\"image\" />\n <input type=\"password\" />\n <input type=\"radio\" />\n <input type=\"reset\" />\n <input type=\"submit\" />\n <input type=\"text\" />\n <select><option>Option<option/></select>\n <textarea></textarea>\n <button>Button</button>\n </form>\n <div>\n </div>\n</body>\n</html>"}]}, "image60": {"id": 60, "searchname": "image", "name": "image", "type": "selector", "category": "Selectors", "subcategory": "Forms", "return": "Array<Element(s)>", "added": "1.0", "sample": ":image", "desc": "Matches all input elements of type image.", "longdesc": "", "params": [], "examples": [{"code": "\n var input = $(\":image\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n", "htmlCode": "\n var input = $(\":image\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n", "desc": "Finds all image inputs.", "css": "\n textarea { height:45px; }\n ", "inhead": "", "html": "<form>\n <input type=\"button\" value=\"Input Button\"/>\n <input type=\"checkbox\" />\n <input type=\"file\" />\n <input type=\"hidden\" />\n <input type=\"image\" />\n <input type=\"password\" />\n <input type=\"radio\" />\n <input type=\"reset\" />\n <input type=\"submit\" />\n <input type=\"text\" />\n <select><option>Option<option/></select>\n <textarea></textarea>\n <button>Button</button>\n </form>\n <div>\n </div>", "exampleId": "60iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var input = $(\":image\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n\n });\n</script>\n<style>\n\n textarea { height:45px; }\n \n</style>\n</head>\n<body>\n<form>\n <input type=\"button\" value=\"Input Button\"/>\n <input type=\"checkbox\" />\n <input type=\"file\" />\n <input type=\"hidden\" />\n <input type=\"image\" />\n <input type=\"password\" />\n <input type=\"radio\" />\n <input type=\"reset\" />\n <input type=\"submit\" />\n <input type=\"text\" />\n <select><option>Option<option/></select>\n <textarea></textarea>\n <button>Button</button>\n </form>\n <div>\n </div>\n</body>\n</html>"}]}, "reset61": {"id": 61, "searchname": "reset", "name": "reset", "type": "selector", "category": "Selectors", "subcategory": "Forms", "return": "Array<Element(s)>", "added": "1.0", "sample": ":reset", "desc": "Matches all input elements of type reset.", "longdesc": "", "params": [], "examples": [{"code": "\n var input = $(\":reset\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n", "htmlCode": "\n var input = $(\":reset\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n", "desc": "Finds all reset inputs.", "css": "\n textarea { height:45px; }\n ", "inhead": "", "html": "<form>\n <input type=\"button\" value=\"Input Button\"/>\n <input type=\"checkbox\" />\n <input type=\"file\" />\n <input type=\"hidden\" />\n <input type=\"image\" />\n <input type=\"password\" />\n <input type=\"radio\" />\n <input type=\"reset\" />\n <input type=\"submit\" />\n <input type=\"text\" />\n <select><option>Option<option/></select>\n <textarea></textarea>\n <button>Button</button>\n </form>\n <div>\n </div>", "exampleId": "61iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var input = $(\":reset\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n\n });\n</script>\n<style>\n\n textarea { height:45px; }\n \n</style>\n</head>\n<body>\n<form>\n <input type=\"button\" value=\"Input Button\"/>\n <input type=\"checkbox\" />\n <input type=\"file\" />\n <input type=\"hidden\" />\n <input type=\"image\" />\n <input type=\"password\" />\n <input type=\"radio\" />\n <input type=\"reset\" />\n <input type=\"submit\" />\n <input type=\"text\" />\n <select><option>Option<option/></select>\n <textarea></textarea>\n <button>Button</button>\n </form>\n <div>\n </div>\n</body>\n</html>"}]}, "button62": {"id": 62, "searchname": "button", "name": "button", "type": "selector", "category": "Selectors", "subcategory": "Forms", "return": "Array<Element(s)>", "added": "1.0", "sample": ":button", "desc": "Matches all button elements and input elements of type button.", "longdesc": "", "params": [], "examples": [{"code": "\n var input = $(\":button\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n", "htmlCode": "\n var input = $(\":button\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n", "desc": "Finds all button inputs.", "css": "\n textarea { height:45px; }\n ", "inhead": "", "html": "<form>\n <input type=\"button\" value=\"Input Button\"/>\n <input type=\"checkbox\" />\n <input type=\"file\" />\n <input type=\"hidden\" />\n <input type=\"image\" />\n <input type=\"password\" />\n <input type=\"radio\" />\n <input type=\"reset\" />\n <input type=\"submit\" />\n <input type=\"text\" />\n <select><option>Option<option/></select>\n <textarea></textarea>\n <button>Button</button>\n </form>\n <div>\n </div>", "exampleId": "62iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var input = $(\":button\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n\n });\n</script>\n<style>\n\n textarea { height:45px; }\n \n</style>\n</head>\n<body>\n<form>\n <input type=\"button\" value=\"Input Button\"/>\n <input type=\"checkbox\" />\n <input type=\"file\" />\n <input type=\"hidden\" />\n <input type=\"image\" />\n <input type=\"password\" />\n <input type=\"radio\" />\n <input type=\"reset\" />\n <input type=\"submit\" />\n <input type=\"text\" />\n <select><option>Option<option/></select>\n <textarea></textarea>\n <button>Button</button>\n </form>\n <div>\n </div>\n</body>\n</html>"}]}, "file63": {"id": 63, "searchname": "file", "name": "file", "type": "selector", "category": "Selectors", "subcategory": "Forms", "return": "Array<Element(s)>", "added": "1.0", "sample": ":file", "desc": "Matches all input elements of type file.", "longdesc": "", "params": [], "examples": [{"code": "\n var input = $(\":file\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n", "htmlCode": "\n var input = $(\":file\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n", "desc": "Finds all&n
8000
bsp;file inputs.", "css": "\n textarea { height:45px; }\n ", "inhead": "", "html": "<form>\n <input type=\"button\" value=\"Input Button\"/>\n <input type=\"checkbox\" />\n <input type=\"file\" />\n <input type=\"hidden\" />\n <input type=\"image\" />\n <input type=\"password\" />\n <input type=\"radio\" />\n <input type=\"reset\" />\n <input type=\"submit\" />\n <input type=\"text\" />\n <select><option>Option<option/></select>\n <textarea></textarea>\n <button>Button</button>\n </form>\n <div>\n </div>", "exampleId": "63iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var input = $(\":file\").css({background:\"yellow\", border:\"3px red solid\"});\n $(\"div\").text(\"For this type jQuery found \" + input.length + \".\")\n .css(\"color\", \"red\");\n $(\"form\").submit(function () { return false; }); // so it won't submit\n\n });\n</script>\n<style>\n\n textarea { height:45px; }\n \n</style>\n</head>\n<body>\n<form>\n <input type=\"button\" value=\"Input Button\"/>\n <input type=\"checkbox\" />\n <input type=\"file\" />\n <input type=\"hidden\" />\n <input type=\"image\" />\n <input type=\"password\" />\n <input type=\"radio\" />\n <input type=\"reset\" />\n <input type=\"submit\" />\n <input type=\"text\" />\n <select><option>Option<option/></select>\n <textarea></textarea>\n <button>Button</button>\n </form>\n <div>\n </div>\n</body>\n</html>"}]}, "hidden64": {"id": 64, "searchname": "hidden", "name": "hidden", "type": "selector", "category": "Selectors", "subcategory": "Forms", "return": "Array<Element(s)>", "added": "1.0", "sample": ":hidden", "desc": "Matches all elements that are hidden, or input elements of type \"hidden\".", "longdesc": "", "params": [], "examples": [{"code": "\n // in some browsers :hidden includes head, title, script, etc... so limit to body\n $(\"span:first\").text(\"Found \" + $(\":hidden\", document.body).length + \n \" hidden elements total.\");\n $(\"div:hidden\").show(3000);\n $(\"span:last\").text(\"Found \" + $(\"input:hidden\").length + \" hidden inputs.\");\n", "htmlCode": "\n // in some browsers :hidden includes head, title, script, etc... so limit to body\n $(\"span:first\").text(\"Found \" + $(\":hidden\", document.body).length + \n \" hidden elements total.\");\n $(\"div:hidden\").show(3000);\n $(\"span:last\").text(\"Found \" + $(\"input:hidden\").length + \" hidden inputs.\");\n", "desc": "Shows all hidden divs and counts hidden inputs.", "css": "\n div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }\n span { display:block; clear:left; color:red; }\n .starthidden { display:none; }\n ", "inhead": "", "html": "<span></span>\n <div></div>\n <div style=\"display:none;\">Hider!</div>\n <div></div>\n <div class=\"starthidden\">Hider!</div>\n <div></div>\n <form>\n <input type=\"hidden\" />\n <input type=\"hidden\" />\n <input type=\"hidden\" />\n </form>\n <span>\n </span>", "exampleId": "64iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n // in some browsers :hidden includes head, title, script, etc... so limit to body\n $(\"span:first\").text(\"Found \" + $(\":hidden\", document.body).length + \n \" hidden elements total.\");\n $(\"div:hidden\").show(3000);\n $(\"span:last\").text(\"Found \" + $(\"input:hidden\").length + \" hidden inputs.\");\n\n });\n</script>\n<style>\n\n div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }\n span { display:block; clear:left; color:red; }\n .starthidden { display:none; }\n \n</style>\n</head>\n<body>\n<span></span>\n <div></div>\n <div style=\"display:none;\">Hider!</div>\n <div></div>\n <div class=\"starthidden\">Hider!</div>\n <div></div>\n <form>\n <input type=\"hidden\" />\n <input type=\"hidden\" />\n <input type=\"hidden\" />\n </form>\n <span>\n </span>\n</body>\n</html>"}]}, "enabled65": {"id": 65, "searchname": "enabled", "name": "enabled", "type": "selector", "category": "Selectors", "subcategory": "Form Filters", "return": "Array<Element(s)>", "added": "1.0", "sample": ":enabled", "desc": "Matches all elements that are enabled.", "longdesc": "", "params": [], "examples": [{"code": "$(\"input:enabled\").val(\"this is it\");", "htmlCode": "$(\"input:enabled\").val(\"this is it\");", "desc": "Finds all input elements that are enabled.", "css": "", "inhead": "", "html": "<form>\n <input name=\"email\" disabled=\"disabled\" />\n <input name=\"id\" />\n </form>", "exampleId": "65iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"input:enabled\").val(\"this is it\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<form>\n <input name=\"email\" disabled=\"disabled\" />\n <input name=\"id\" />\n </form>\n</body>\n</html>"}]}, "disabled66": {"id": 66, "searchname": "disabled", "name": "disabled", "type": "selector", "category": "Selectors", "subcategory": "Form Filters", "return": "Array<Element(s)>", "added": "1.0", "sample": ":disabled", "desc": "Matches all elements that are disabled.", "longdesc": "", "params": [], "examples": [{"code": "$(\"input:disabled\").val(\"this is it\");", "htmlCode": "$(\"input:disabled\").val(\"this is it\");", "desc": "Finds all input elements that are disabled.", "css": "", "inhead": "", "html": "<form>\n <input name=\"email\" disabled=\"disabled\" />\n <input name=\"id\" />\n </form>", "exampleId": "66iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"input:disabled\").val(\"this is it\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<form>\n <input name=\"email\" disabled=\"disabled\" />\n <input name=\"id\" />\n </form>\n</body>\n</html>"}]}, "checked67": {"id": 67, "searchname": "checked", "name": "checked", "type": "selector", "category": "Selectors", "subcategory": "Form Filters", "return": "Array<Element(s)>", "added": "1.0", "sample": ":checked", "desc": "Matches all elements that are checked.", "longdesc": "", "params": [], "examples": [{"code": "\n function countChecked() {\n var n = $(\"input:checked\").length;\n $(\"div\").text(n + (n == 1 ? \" is\" : \" are\") + \" checked!\");\n }\n countChecked();\n $(\":checkbox\").click(countChecked);\n", "htmlCode": "\n function countChecked() {\n var n = $(\"input:checked\").length;\n $(\"div\").text(n + (n == 1 ? \" is\" : \" are\") + \" checked!\");\n }\n countChecked();\n $(\":checkbox\").click(countChecked);\n", "desc": "Finds all input elements that are checked.", "css": "\n div { color:red; }\n ", "inhead": "", "html": "<form>\n <input type=\"checkbox\" name=\"newsletter\" checked=\"checked\" value=\"Hourly\" />\n <input type=\"checkbox\" name=\"newsletter\" value=\"Daily\" />\n <input type=\"checkbox\" name=\"newsletter\" value=\"Weekly\" />\n <input type=\"checkbox\" name=\"newsletter\" checked=\"checked\" value=\"Monthly\" />\n <input type=\"checkbox\" name=\"newsletter\" value=\"Yearly\" />\n </form>\n <div></div>", "exampleId": "67iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n function countChecked() {\n var n = $(\"input:checked\").length;\n $(\"div\").text(n + (n == 1 ? \" is\" : \" are\") + \" checked!\");\n }\n countChecked();\n $(\":checkbox\").click(countChecked);\n\n });\n</script>\n<style>\n\n div { color:red; }\n \n</style>\n</head>\n<body>\n<form>\n <input type=\"checkbox\" name=\"newsletter\" checked=\"checked\" value=\"Hourly\" />\n <input type=\"checkbox\" name=\"newsletter\" value=\"Daily\" />\n <input type=\"checkbox\" name=\"newsletter\" value=\"Weekly\" />\n <input type=\"checkbox\" name=\"newsletter\" checked=\"checked\" value=\"Monthly\" />\n <input type=\"checkbox\" name=\"newsletter\" value=\"Yearly\" />\n </form>\n <div></div>\n</body>\n</html>"}]}, "selected68": {"id": 68, "searchname": "selected", "name": "selected", "type": "selector", "category": "Selectors", "subcategory": "Form Filters", "return": "Array<Element(s)>", "added": "1.0", "sample": ":selected", "desc": "Matches all elements that are selected.", "longdesc": "", "params": [], "examples": [{"code": "\n $(\"select\").change(function () {\n var str = \"\";\n $(\"select option:selected\").each(function () {\n str += $(this).text() + \" \";\n });\n $(\"div\").text(str);\n })\n .trigger('change');\n", "htmlCode": "\n $(\"select\").change(function () {\n var str = \"\";\n $(\"select option:selected\").each(function () {\n str += $(this).text() + \" \";\n });\n $(\"div\").text(str);\n })\n .trigger('change');\n", "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.", "css": "\n div { color:red; }\n ", "inhead": "", "html": "<select name=\"garden\" multiple=\"multiple\">\n <option>Flowers</option>\n <option selected=\"selected\">Shrubs</option>\n <option>Trees</option>\n <option selected=\"selected\">Bushes</option>\n <option>Grass</option>\n <option>Dirt</option>\n </select>\n <div></div>", "exampleId": "68iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"select\").change(function () {\n var str = \"\";\n $(\"select option:selected\").each(function () {\n str += $(this).text() + \" \";\n });\n $(\"div\").text(str);\n })\n .trigger('change');\n\n });\n</script>\n<style>\n\n div { color:red; }\n \n</style>\n</head>\n<body>\n<select name=\"garden\" multiple=\"multiple\">\n <option>Flowers</option>\n <option selected=\"selected\">Shrubs</option>\n <option>Trees</option>\n <option selected=\"selected\">Bushes</option>\n <option>Grass</option>\n <option>Dirt</option>\n </select>\n <div></div>\n</body>\n</html>"}]}, "attr69": {"id": 69, "searchname": "attr", "name": "attr", "type": "function", "category": "Attributes", "subcategory": "Attr", "return": "Object", "added": "", "sample": "", "desc": "Access a property on the first matched element. This method makes it easy to retrieve a property value from the first matched element. If the element does not have an attribute with such a name, undefined is returned.", "longdesc": "", "params": [{"optional": false, "name": "name", "type": "String", "desc": "The name of the property to access."}], "examples": [{"code": "\n var title = $(\"em\").attr(\"title\");\n $(\"div\").text(title);\n", "htmlCode": "\n var title = $(\"em\").attr(\"title\");\n $(\"div\").text(title);\n", "desc": "Finds the title attribute of the first <em> in the page.", "css": "\n em { color:blue; font-weight;bold; }\n div { color:red; }\n ", "inhead": "", "html": "<p>\n Once there was a <em title=\"huge, gigantic\">large</em> dinosaur...\n </p>\n The title of the emphasis is:<div></div>", "exampleId": "69iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var title = $(\"em\").attr(\"title\");\n $(\"div\").text(title);\n\n });\n</script>\n<style>\n\n em { color:blue; font-weight;bold; }\n div { color:red; }\n \n</style>\n</head>\n<body>\n<p>\n Once there was a <em title=\"huge, gigantic\">large</em> dinosaur...\n </p>\n The title of the emphasis is:<div></div>\n</body>\n</html>"}]}, "attr70": {"id": 70, "searchname": "attr", "name": "attr", "type": "function", "category": "Attributes", "subcategory": "Attr", "return": "jQuery", "added": "", "sample": "", "desc": "Set a key/value object as properties to all matched elements.", "longdesc": "<p>This serves as the best way to set a large number of properties on all matched elements. Note that you must use 'className' as key if you want to set the class-Attribute. Or use .addClass( class ) or .removeClass( class ). Keep in mind this recursively calls attr( key, value ) or attr ( key, fn ), so if one of the properties you are passing is a function, the function will be evaluated and not stored as the attribute itself.</p>", "params": [{"optional": false, "name": "properties", "type": "Map", "desc": "Key/value pairs to set as object properties."}], "examples": [{"code": "\n $(\"img\").attr({ \n src: \"/images/hat.gif\",\n title: \"jQuery\",\n alt: \"jQuery Logo\"\n });\n $(\"div\").text($(\"img\").attr(\"alt\"));\n", "htmlCode": "\n $(\"img\").attr({ \n src: \"/images/hat.gif\",\n title: \"jQuery\",\n alt: \"jQuery Logo\"\n });\n $(\"div\").text($(\"img\").attr(\"alt\"));\n", "desc": "Set some attributes for all <img>s in the page.", "css": "\n img { padding:10px; }\n div { color:red; font-size:24px; }\n ", "inhead": "", "html": "<img />\n <img />\n <img />\n <div></div>", "exampleId": "70iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"
10000
></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"img\").attr({ \n src: \"/images/hat.gif\",\n title: \"jQuery\",\n alt: \"jQuery Logo\"\n });\n $(\"div\").text($(\"img\").attr(\"alt\"));\n\n });\n</script>\n<style>\n\n img { padding:10px; }\n div { color:red; font-size:24px; }\n \n</style>\n</head>\n<body>\n<img />\n <img />\n <img />\n <div></div>\n</body>\n</html>"}]}, "attr71": {"id": 71, "searchname": "attr", "name": "attr", "type": "function", "category": "Attributes", "subcategory": "Attr", "return": "jQuery", "added": "", "sample": "", "desc": "Set a single property to a value, on all matched elements.", "longdesc": "", "params": [{"optional": false, "name": "key", "type": "String", "desc": "The name of the property to set."}, {"optional": false, "name": "value", "type": "Object", "desc": "The value to set the property to."}], "examples": [{"code": "$(\"button:gt(1)\").attr(\"disabled\",\"disabled\");", "htmlCode": "$(\"button:gt(1)\").attr(\"disabled\",\"disabled\");", "desc": "Disables buttons greater than the 1st button.", "css": "\n button { margin:10px; }\n ", "inhead": "", "html": "<button>0th Button</button>\n <button>1st Button</button>\n <button>2nd Button</button>", "exampleId": "71iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"button:gt(1)\").attr(\"disabled\",\"disabled\");\n });\n</script>\n<style>\n\n button { margin:10px; }\n \n</style>\n</head>\n<body>\n<button>0th Button</button>\n <button>1st Button</button>\n <button>2nd Button</button>\n</body>\n</html>"}]}, "attr72": {"id": 72, "searchname": "attr", "name": "attr", "type": "function", "category": "Attributes", "subcategory": "Attr", "return": "jQuery", "added": "", "sample": "", "desc": "Set a single property to a computed value, on all matched elements.", "longdesc": "<p>Instead of supplying a string value as described <a href='#keyvalue'>above</a>, a function is provided that computes the value.</p>", "params": [{"optional": false, "name": "key", "type": "String", "desc": "The name of the property to set."}, {"optional": false, "name": "fn", "type": "Function", "desc": "A function returning the value to set. Scope: Current element, argument: Index of current element\n<pre>function callback(indexArray) {\n // indexArray == position in the jQuery object\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(\"div\").attr(\"id\", function (arr) {\n return \"div-id\" + arr;\n })\n .each(function () {\n $(\"span\", this).html(\"(ID = '<b>\" + this.id + \"</b>')\");\n });\n", "htmlCode": "\n $(\"div\").attr(\"id\", function (arr) {\n return \"div-id\" + arr;\n })\n .each(function () {\n $(\"span\", this).html(\"(ID = '<b>\" + this.id + \"</b>')\");\n });\n", "desc": "Sets id for divs based on the position in the page.", "css": "\n div { color:blue; }\n span { color:red; }\n b { font-weight:bolder; }\n ", "inhead": "", "html": "<div>Zero-th <span></span></div>\n <div>First <span></span></div>\n <div>Second <span></span></div>", "exampleId": "72iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div\").attr(\"id\", function (arr) {\n return \"div-id\" + arr;\n })\n .each(function () {\n $(\"span\", this).html(\"(ID = '<b>\" + this.id + \"</b>')\");\n });\n\n });\n</script>\n<style>\n\n div { color:blue; }\n span { color:red; }\n b { font-weight:bolder; }\n \n</style>\n</head>\n<body>\n<div>Zero-th <span></span></div>\n <div>First <span></span></div>\n <div>Second <span></span></div>\n</body>\n</html>"}, {"code": "\n $(\"img\").attr(\"src\", function() { \n return \"/images/\" + this.title; \n });\n", "htmlCode": "\n $(\"img\").attr(\"src\", function() { \n return \"/images/\" + this.title; \n });\n", "desc": "Sets src attribute from title attribute on the image.", "css": "", "inhead": "", "html": "<img title=\"hat.gif\"/>\n <img title=\"hat-old.gif\"/>\n <img title=\"hat2-old.gif\"/>", "exampleId": "72iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"img\").attr(\"src\", function() { \n return \"/images/\" + this.title; \n });\n\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<img title=\"hat.gif\"/>\n <img title=\"hat-old.gif\"/>\n <img title=\"hat2-old.gif\"/>\n</body>\n</html>"}]}, "removeattr73": {"id": 73, "searchname": "removeattr", "name": "removeAttr", "type": "function", "category": "Attributes", "subcategory": "Attr", "return": "jQuery", "added": "", "sample": "", "desc": "Remove an attribute from each of the matched elements.", "longdesc": "", "params": [{"optional": false, "name": "name", "type": "String", "desc": "The name of the property to remove."}], "examples": [{"code": "\n $(\"button\").click(function () {\n $(this).next().removeAttr(\"disabled\")\n .focus()\n .val(\"editable now\");\n });\n", "htmlCode": "\n $(\"button\").click(function () {\n $(this).next().removeAttr(\"disabled\")\n .focus()\n .val(\"editable now\");\n });\n", "desc": "Clicking the button enables the input next to it.", "css": "", "inhead": "", "html": "<button>Enable</button>\n <input type=\"text\" disabled=\"disabled\" value=\"can't edit this\" />", "exampleId": "73iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"button\").click(function () {\n $(this).next().removeAttr(\"disabled\")\n .focus()\n .val(\"editable now\");\n });\n\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<button>Enable</button>\n <input type=\"text\" disabled=\"disabled\" value=\"can't edit this\" />\n</body>\n</html>"}]}, "addclass74": {"id": 74, "searchname": "addclass", "name": "addClass", "type": "function", "category": "Attributes", "subcategory": "Class", "return": "jQuery", "added": "", "sample": "", "desc": "Adds the specified class(es) to each of the set of matched elements.", "longdesc": "", "params": [{"optional": false, "name": "class", "type": "String", "desc": "One or more CSS classes to add to the elements, these are separated by spaces."}], "examples": [{"code": "$(\"p:last\").addClass(\"selected\");", "htmlCode": "$(\"p:last\").addClass(\"selected\");", "desc": "Adds the class 'selected' to the matched elements.", "css": "\n p { margin: 8px; font-size:16px; }\n .selected { color:red; }\n .highlight { background:yellow; }\n ", "inhead": "", "html": "<p>Hello</p>\n <p>and</p>\n <p>Goodbye</p>", "exampleId": "74iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p:last\").addClass(\"selected\");\n });\n</script>\n<style>\n\n p { margin: 8px; font-size:16px; }\n .selected { color:red; }\n .highlight { background:yellow; }\n \n</style>\n</head>\n<body>\n<p>Hello</p>\n <p>and</p>\n <p>Goodbye</p>\n</body>\n</html>"}, {"code": "$(\"p:last\").addClass(\"selected highlight\");", "htmlCode": "$(\"p:last\").addClass(\"selected highlight\");", "desc": "Adds the classes 'selected' and 'highlight' to the matched elements.", "css": "\n p { margin: 8px; font-size:16px; }\n .selected { color:red; }\n .highlight { background:yellow; }\n ", "inhead": "", "html": "<p>Hello</p>\n <p>and</p>\n <p>Goodbye</p>", "exampleId": "74iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p:last\").addClass(\"selected highlight\");\n });\n</script>\n<style>\n\n p { margin: 8px; font-size:16px; }\n .selected { color:red; }\n .highlight { background:yellow; }\n \n</style>\n</head>\n<body>\n<p>Hello</p>\n <p>and</p>\n <p>Goodbye</p>\n</body>\n</html>"}]}, "hasclass75": {"id": 75, "searchname": "hasclass", "name": "hasClass", "type": "function", "category": "Attributes", "subcategory": "Class", "return": "Boolean", "added": "", "sample": "", "desc": "Returns true if the specified class is present on at least one of the set of matched elements.", "longdesc": "", "params": [{"optional": false, "name": "class", "type": "String", "desc": "One CSS class name to be checked for."}], "examples": [{"code": "$(\"div#result1\").append($(\"p:first\").hasClass(\"selected\").toString());\n$(\"div#result2\").append($(\"p:last\").hasClass(\"selected\").toString());\n$(\"div#result3\").append($(\"p\").hasClass(\"selected\").toString());", "htmlCode": "$(\"div#result1\").append($(\"p:first\").hasClass(\"selected\").toString());\n$(\"div#result2\").append($(\"p:last\").hasClass(\"selected\").toString());\n$(\"div#result3\").append($(\"p\").hasClass(\"selected\").toString());", "desc": "Looks for the class 'selected' on the matched elements.", "css": "\n p { margin: 8px; font-size:16px; }\n .selected { color:red; }\n .highlight { background:yellow; }\n ", "inhead": "", "html": "<p>Hello</p>\n <p class=\"selected\">Goodbye</p>\n <div id=\"result1\">First paragraph has selected class: </div>\n <div id=\"result2\">Last paragraph has selected class: </div>\n <div id=\"result3\">Some paragraph has selected class: </div>", "exampleId": "75iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"div#result1\").append($(\"p:first\").hasClass(\"selected\").toString());\n$(\"div#result2\").append($(\"p:last\").hasClass(\"selected\").toString());\n$(\"div#result3\").append($(\"p\").hasClass(\"selected\").toString());\n });\n</script>\n<style>\n\n p { margin: 8px; font-size:16px; }\n .selected { color:red; }\n .highlight { background:yellow; }\n \n</style>\n</head>\n<body>\n<p>Hello</p>\n <p class=\"selected\">Goodbye</p>\n <div id=\"result1\">First paragraph has selected class: </div>\n <div id=\"result2\">Last paragraph has selected class: </div>\n <div id=\"result3\">Some paragraph has selected class: </div>\n</body>\n</html>"}]}, "removeclass76": {"id": 76, "searchname": "removeclass", "name": "removeClass", "type": "function", "category": "Attributes", "subcategory": "Class", "return": "jQuery", "added": "", "sample": "", "desc": "Removes all or the specified class(es) from the set of matched elements.", "longdesc": "", "params": [{"optional": true, "name": "class", "type": "String", "desc": "One or more CSS classes to remove from the elements, these are separated by spaces."}], "examples": [{"code": "$(\"p:even\").removeClass(\"blue\");", "htmlCode": "$(\"p:even\").removeClass(\"blue\");", "desc": "Remove the class 'blue' from the matched elements.", "css": "\n p { margin: 4px; font-size:16px; font-weight:bolder; }\n .blue { color:blue; }\n .under { text-decoration:underline; }\n .highlight { background:yellow; }\n ", "inhead": "", "html": "<p class=\"blue under\">Hello</p>\n <p class=\"blue under highlight\">and</p>\n <p class=\"blue under\">then</p>\n <p class=\"blue under\">Goodbye</p>", "exampleId": "76iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p:even\").removeClass(\"blue\");\n });\n</script>\n<style>\n\n p { margin: 4px; font-size:16px; font-weight:bolder; }\n .blue { color:blue; }\n .under { text-decoration:underline; }\n .highlight { background:yellow; }\n \n</style>\n</head>\n<body>\n<p class=\"blue under\">Hello</p>\n <p class=\"blue under highlight\">and</p>\n <p class=\"blue under\">then</p>\n <p class=\"blue under\">Goodbye</p>\n</body>\n</html>"}, {"code": "$(\"p:odd\").removeClass(\"blue under\");", "htmlCode": "$(\"p:odd\").removeClass(\"blue under\");", "desc": "Remove the class 'blue' and 'under' from the matched elements.", "css": "\n p { margin: 4px; font-size:16px; font-weight:bolder; }\n .blue { color:blue; }\n .under { text-decoration:underline; }\n .highlight { background:yellow; }\n ", "inhead": "", "html": "<p class=\"blue under\">Hello</p>\n <p class=\"blue under highlight\">and</p>\n <p class=\"blue under\">then</p>\n <p class=\"blue under\">Goodbye</p>", "exampleId": "76iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p:odd\").removeClass(\"blue under\");\n });\n</script>\n<style>\n\n p { margin: 4px; font-size:16px; font-weight:bolder; }\n .blue { color:blue; }\n .under { text-decoration:underline; }\n .highlight { background:yellow; }\n \n</style>\n</head>\n<body>\n<p class=\"blue under\">Hello</p>\n <p class=\"blue under highlight\">and</p>\n <p class=\"blue under\">then</p>\n <p class=\"blue under\">Goodbye</p>\n</body>\n</html>"}, {"code": "$(\"p:eq(1)\").removeClass();", "htmlCode": "$(\"p:eq(1)\").removeClass();", "desc": "Remove all the classes from the matched elements.", "css": "\n p { margin: 4px; font-size:16px; font-weight:bolder; }\n .blue { color:blue; }\n .under { text-decoration:underline; }\n .highlight { background:yellow; }\n ", "inhead": "", "html": "<p class=\"blue under\">Hello</p>\n <p class=\"blue under highlight\">and</p>\n <p class=\"blue under\">then</p>\n <p class=\"blue under\">Goodbye</p>", "exampleId": "76iframeExample2", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p:eq(1)\").removeClass();\n });\n</script>\n<style>\n\n p { margin: 4px; font-size:16px; font-weight:bolder; }\n .blue { color:blue; }\n .under { text-decoration:underline; }\n .highlight { background:yellow; }\n \n</style>\n</head>\n<body>\n<p class=\"blue under\">Hello</p>\n <p class=\"blue under highlight\">and</p>\n <p class=\"blue under\">then</p>\n <p class=\"blue under\">Goodbye</p>\n</body>\n</html>"}]}, "toggleclass77": {"id": 77, "searchname": "toggleclass", "name": "toggleClass", "type": "function", "category": "Attributes", "subcategory": "Class", "return": "jQuery", "added": "", "sample": "", "desc": "Adds the specified class if it is not present, removes the specified class if it is present.", "longdesc": "", "params": [{"optional": false, "name": "class", "type": "String", "desc": "A CSS class to toggle on the elements."}], "examples": [{"code": "\n $(\"p\").click(function () {\n $(this).toggleClass(\"highlight\");\n });\n", "htmlCode": "\n $(\"p\").click(function () {\n $(this).toggleClass(\"highlight\");\n });\n", "desc": "Toggle the class 'highlight' when a paragraph is clicked.", "css": "\n p { margin: 4px; font-size:16px; font-weight:bolder; \n cursor:pointer; }\n .blue { color:blue; }\n .highlight { background:yellow; }\n ", "inhead": "", "html": "<p class=\"blue\">Click to toggle</p>\n <p class=\"blue highlight\">highlight</p>\n <p class=\"blue\">on these</p>\n <p class=\"blue\">paragraphs</p>", "exampleId": "77iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"p\").click(function () {\n $(this).toggleClass(\"highlight\");\n });\n\n });\n</script>\n<style>\n\n p { margin: 4px; font-size:16px; font-weight:bolder; \n cursor:pointer; }\n .blue { color:blue; }\n .highlight { background:yellow; }\n \n</style>\n</head>\n<body>\n<p class=\"blue\">Click to toggle</p>\n <p class=\"blue highlight\">highlight</p>\n <p class=\"blue\">on these</p>\n <p class=\"blue\">paragraphs</p>\n</body>\n</html>"}]}, "html78": {"id": 78, "searchname": "html", "name": "html", "type": "function", "category": "Attributes", "subcategory": "HTML", "return": "String", "added": "", "sample": "", "desc": "Get the html contents (innerHTML) of the first matched element. This property is not available on XML documents (although it will work for XHTML documents).", "longdesc": "", "params": [], "examples": [{"code": "\n $(\"p\").click(function () {\n var htmlStr = $(this).html();\n $(this).text(htmlStr);\n });\n", "htmlCode": "\n $(\"p\").click(function () {\n var htmlStr = $(this).html();\n $(this).text(htmlStr);\n });\n", "desc": "Click a paragraph to convert it from html to text.", "css": "\n p { margin:8px; font-size:20px; color:blue; \n cursor:pointer; }\n b { text-decoration:underline; }\n button { cursor:pointer; }\n ", "inhead": "", "html": "<p>\n <b>Click</b> to change the <span id=\"tag\">html</span>\n </p>\n <p>\n to a <span id=\"text\">text</span> node.\n </p>\n <p>\n This <button name=\"nada\">button</button> does nothing.\n </p>", "exampleId": "78iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"p\").click(function () {\n var htmlStr = $(this).html();\n $(this).text(htmlStr);\n });\n\n });\n</script>\n<style>\n\n p { margin:8px; font-size:20px; color:blue; \n cursor:pointer; }\n b { text-decoration:underline; }\n button { cursor:pointer; }\n \n</style>\n</head>\n<body>\n<p>\n <b>Click</b> to change the <span id=\"tag\">html</span>\n </p>\n <p>\n to a <span id=\"text\">text</span> node.\n </p>\n <p>\n This <button name=\"nada\">button</button> does nothing.\n </p>\n</body>\n</html>"}]}, "html79": {"id": 79, "searchname": "html", "name": "html", "type": "function", "category": "Attributes", "subcategory": "HTML", "return": "jQuery", "added": "", "sample": "", "desc": "Set the html contents of every matched element. This property is not available on XML documents (although it will work for XHTML documents).", "longdesc": "", "params": [{"optional": false, "name": "val", "type": "String", "desc": "Set the html contents to the specified value."}], "examples": [{"code": "$(\"div\").html(\"<span class='red'>Hello <b>Again</b></span>\");", "htmlCode": "$(\"div\").html(\"<span class='red'>Hello <b>Again</b></span>\");", "desc": "Add some html to each div.", "css": "\n .red { color:red; }\n ", "inhead": "", "html": "<span>Hello</span>\n <div></div>\n <div></div>\n <div></div>", "exampleId": "79iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"div\").html(\"<span class='red'>Hello <b>Again</b></span>\");\n });\n</script>\n<style>\n\n .red { color:red; }\n \n</style>\n</head>\n<body>\n<span>Hello</span>\n <div></div>\n <div></div>\n <div></div>\n</body>\n</html>"}, {"code": "\n $(\"div\").html(\"<b>Wow!</b> Such excitement...\");\n $(\"div b\").append(document.createTextNode(\"!!!\"))\n .css(\"color\", \"red\");\n", "htmlCode": "\n $(\"div\").html(\"<b>Wow!</b> Such excitement...\");\n $(\"div b\").append(document.createTextNode(\"!!!\"))\n .css(\"color\", \"red\");\n", "desc": "Add some html to each div then immediately do further manipulations to the inserted html.", "css": "\n div { color:blue; font-size:18px; }\n ", "inhead": "", "html": "<div></div>\n <div></div>\n <div></div>", "exampleId": "79iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div\").html(\"<b>Wow!</b> Such excitement...\");\n $(\"div b\").append(document.createTextNode(\"!!!\"))\n .css(\"color\", \"red\");\n\n });\n</script>\n<style>\n\n div { color:blue; font-size:18px; }\n \n</style>\n</head>\n<body>\n<div></div>\n <div></div>\n <div></div>\n</body>\n</html>"}]}, "text80": {"id": 80, "searchname": "text", "name": "text", "type": "function", "category": "Attributes", "subcategory": "Text", "return": "String", "added": "", "sample": "", "desc": "Get the combined text contents of all matched elements.", "longdesc": "<p>The result is a string that contains the combined text contents of all matched elements. This method works on both HTML and XML documents.</p>", "params": [], "examples": [{"code": "\n var str = $(\"p:first\").text();\n $(\"p:last\").html(str);\n", "htmlCode": "\n var str = $(\"p:first\").text();\n $(\"p:last\").html(str);\n", "desc": "Find the text in the first paragraph (stripping out the html), then set the html of the last paragraph to show it is just text (the red bold is gone).", "css": "\n p { color:blue; margin:8px; }\n b { color:red; }\n ", "inhead": "", "html": "<p><b>Test</b> Paragraph.</p>\n <p></p>", "exampleId": "80iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var str = $(\"p:first\").text();\n $(\"p:last\").html(str);\n\n });\n</script>\n<style>\n\n p { color:blue; margin:8px; }\n b { color:red; }\n \n</style>\n</head>\n<body>\n<p><b>Test</b> Paragraph.</p>\n <p></p>\n</body>\n</html>"}]}, "text81": {"id": 81, "searchname": "text", "name": "text", "type": "function", "category": "Attributes", "subcategory": "Text", "return": "jQuery", "added": "", "sample": "", "desc": "Set the text contents of all matched elements.", "longdesc": "<p>Similar to html(), but escapes HTML (replace \"<\" and \">\" with their HTML entities).</p>", "params": [{"optional": false, "name": "val", "type": "String", "desc": "The text value to set the contents of the element to."}], "examples": [{"code": "$(\"p\").text(\"<b>Some</b> new text.\");", "htmlCode": "$(\"p\").text(\"<b>Some</b> new text.\");", "desc": "Add text to the paragraph (notice the bold tag is escaped).", "css": "\n p { color:blue; margin:8px; }\n ", "inhead": "", "html": "<p>Test Paragraph.</p>", "exampleId": "81iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").text(\"<b>Some</b> new text.\");\n });\n</script>\n<style>\n\n p { color:blue; margin:8px; }\n \n</style>\n</head>\n<body>\n<p>Test Paragraph.</p>\n</body>\n</html>"}]}, "val82": {"id": 82, "searchname": "val", "name": "val", "type": "function", "category": "Attributes", "subcategory": "Value", "return": "String, Array", "added": "1.0", "sample": "", "desc": "Get the content of the value attribute of the first matched element.", "longdesc": "<p>In jQuery 1.2, a value is now returned for all elements, including selects. For multiple selects an array of values is returned.</p><p>For older versions of jQuery use the <a href=\"http://www.malsup.com/jquery/form/#fields\">http://www.malsup.com/jquery/form/#fields</a>.</p><p>For selects and checkboxes, see the <a href='Selectors/selected'>:selected</a> and <a href='Selectors/checked'>:checked</a> selectors.</p>", "params": [], "examples": [{"code": "\n function displayVals() {\n var singleValues = $(\"#single\").val();\n var multipleValues = $(\"#multiple\").val() || [];\n $(\"p\").html(\"<b>Single:</b> \" + \n singleValues +\n \" <b>Multiple:</b> \" + \n multipleValues.join(\", \"));\n }\n\n $(\"select\").change(displayVals);\n displayVals();\n", "htmlCode": "\n function displayVals() {\n var singleValues = $(\"#single\").val();\n var multipleValues = $(\"#multiple\").val() || [];\n $(\"p\").html(\"<b>Single:</b> \" + \n singleValues +\n \" <b>Multiple:</b> \" + \n multipleValues.join(\", \"));\n }\n\n $(\"select\").change(displayVals);\n displayVals();\n", "desc": "Get the single value from a single select and an array of values from a multiple select and display their values.", "css": "\n p { color:red; margin:4px; }\n b { color:blue; }\n ", "inhead": "", "html": "<p></p>\n <select id=\"single\">\n <option>Single</option>\n <option>Single2</option>\n </select>\n <select id=\"multiple\" multiple=\"multiple\">\n <option selected=\"selected\">Multiple</option>\n <option>Multiple2</option>\n <option selected=\"selected\">Multiple3</option>\n </select>", "exampleId": "82iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n function displayVals() {\n var singleValues = $(\"#single\").val();\n var multipleValues = $(\"#multiple\").val() || [];\n $(\"p\").html(\"<b>Single:</b> \" + \n singleValues +\n \" <b>Multiple:</b> \" + \n multipleValues.join(\", \"));\n }\n\n $(\"select\").change(displayVals);\n displayVals();\n\n });\n</script>\n<style>\n\n p { color:red; margin:4px; }\n b { color:blue; }\n \n</style>\n</head>\n<body>\n<p></p>\n <select id=\"single\">\n <option>Single</option>\n <option>Single2</option>\n </select>\n <select id=\"multiple\" multiple=\"multiple\">\n <option selected=\"selected\">Multiple</option>\n <option>Multiple2</option>\n <option selected=\"selected\">Multiple3</option>\n </select>\n</body>\n</html>"}, {"code": "\n $(\"input\").keyup(function () {\n var value = $(this).val();\n $(\"p\").text(value);\n }).keyup();\n", "htmlCode": "\n $(\"input\").keyup(function () {\n var value = $(this).val();\n $(\"p\").text(value);\n }).keyup();\n", "desc": "Find the value of an input box.", "css": "\n p { color:blue; margin:8px; }\n ", "inhead": "", "html": "<input type=\"text\" value=\"some text\"/>\n <p></p>", "exampleId": "82iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"input\").keyup(function () {\n var value = $(this).val();\n $(\"p\").text(value);\n }).keyup();\n\n });\n</script>\n<style>\n\n p { color:blue; margin:8px; }\n \n</style>\n</head>\n<body>\n<input type=\"text\" value=\"some text\"/>\n <p></p>\n</body>\n</html>"}]}, "val83": {"id": 83, "searchname": "val", "name": "val", "type": "function", "category": "Attributes", "subcategory": "Value", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Set the value attribute of every matched element.", "longdesc": "<p>In jQuery 1.2, this is also able to set the value of select elements, but selecting the appropriate options.</p>", "params": [{"optional": false, "name": "val", "type": "String", "desc": "The value to set on the matched element."}], "examples": [{"code": "\n $(\"button\").click(function () {\n var text = $(this).text();\n $(\"input\").val(text);\n });\n", "htmlCode": "\n $(\"button\").click(function () {\n var text = $(this).text();\n $(\"input\").val(text);\n });\n", "desc": "Set the value of an input box.", "css": "\n button { margin:4px; cursor:pointer; }\n input { margin:4px; color:blue; }\n ", "inhead": "", "html": "<div>\n <button>Feed</button>\n <button>the</button>\n <button>Input</button>\n </div>\n <input type=\"text\" value=\"click a button\" />", "exampleId": "83iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"button\").click(function () {\n var text = $(this).text();\n $(\"input\").val(text);\n });\n\n });\n</script>\n<style>\n\n button { margin:4px; cursor:pointer; }\n input { margin:4px; color:blue; }\n \n</style>\n</head>\n<body>\n<div>\n <button>Feed</button>\n <button>the</button>\n <button>Input</button>\n </div>\n <input type=\"text\" value=\"click a button\" />\n</body>\n</html>"}]}, "val84": {"id": 84, "searchname": "val", "name": "val", "type": "function", "category": "Attributes", "subcategory": "Value", "return": "jQuery", "added": "1.2", "sample": "", "desc": "Checks, or selects, all the radio buttons, checkboxes, and select options that match the set of values.", "longdesc": "", "params": [{"optional": false, "name": "val", "type": "Array<String>", "desc": "The set of values to check/select."}], "exam
10000
ples": [{"code": "\n $(\"#single\").val(\"Single2\");\n $(\"#multiple\").val([\"Multiple2\", \"Multiple3\"]);\n $(\"input\").val([\"check1\",\"check2\", \"radio1\" ]);\n", "htmlCode": "\n $(\"#single\").val(\"Single2\");\n $(\"#multiple\").val([\"Multiple2\", \"Multiple3\"]);\n $(\"input\").val([\"check1\",\"check2\", \"radio1\" ]);\n", "desc": "Set a single select and a multiple select .", "css": "\n body { color:blue; }\n ", "inhead": "", "html": "<select id=\"single\">\n <option>Single</option>\n <option>Single2</option>\n </select>\n <select id=\"multiple\" multiple=\"multiple\">\n <option selected=\"selected\">Multiple</option>\n <option>Multiple2</option>\n <option selected=\"selected\">Multiple3</option>\n </select><br/>\n <input type=\"checkbox\" name=\"checkboxname\" value=\"check1\"/> check1\n <input type=\"checkbox\" name=\"checkboxname\" value=\"check2\"/> check2\n <input type=\"radio\" name=\"r\" value=\"radio1\"/> radio1\n <input type=\"radio\" name=\"r\" value=\"radio2\"/> radio2", "exampleId": "84iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"#single\").val(\"Single2\");\n $(\"#multiple\").val([\"Multiple2\", \"Multiple3\"]);\n $(\"input\").val([\"check1\",\"check2\", \"radio1\" ]);\n\n });\n</script>\n<style>\n\n body { color:blue; }\n \n</style>\n</head>\n<body>\n<select id=\"single\">\n <option>Single</option>\n <option>Single2</option>\n </select>\n <select id=\"multiple\" multiple=\"multiple\">\n <option selected=\"selected\">Multiple</option>\n <option>Multiple2</option>\n <option selected=\"selected\">Multiple3</option>\n </select><br/>\n <input type=\"checkbox\" name=\"checkboxname\" value=\"check1\"/> check1\n <input type=\"checkbox\" name=\"checkboxname\" value=\"check2\"/> check2\n <input type=\"radio\" name=\"r\" value=\"radio1\"/> radio1\n <input type=\"radio\" name=\"r\" value=\"radio2\"/> radio2\n</body>\n</html>"}]}, "eq85": {"id": 85, "searchname": "eq", "name": "eq", "type": "function", "category": "Traversing", "subcategory": "Filtering", "return": "jQuery", "added": "1.1.2", "sample": "", "desc": "Reduce the set of matched elements to a single element. ", "longdesc": "<p>The position of the element in the set of matched elements starts at 0 and goes to length - 1.</p>", "params": [{"optional": false, "name": "index", "type": "Integer", "desc": "The index of the element in the jQuery object."}], "examples": [{"code": "\n $(\"div\").eq(2).addClass(\"blue\");\n", "htmlCode": "\n $(\"div\").eq(2).addClass(\"blue\");\n", "desc": "Turn the div with index 2 blue by adding an appropriate class.", "css": "\n div { width:60px; height:60px; margin:10px; float:left;\n border:2px solid blue; }\n .blue { background:blue; }\n ", "inhead": "", "html": "<div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>", "exampleId": "85iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div\").eq(2).addClass(\"blue\");\n\n });\n</script>\n<style>\n\n div { width:60px; height:60px; margin:10px; float:left;\n border:2px solid blue; }\n .blue { background:blue; }\n \n</style>\n</head>\n<body>\n<div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n</body>\n</html>"}]}, "hasclass86": {"id": 86, "searchname": "hasclass", "name": "hasClass", "type": "function", "category": "Traversing", "subcategory": "Filtering", "return": "Boolean", "added": "1.2", "sample": "", "desc": "Checks the current selection against a class and returns true, if at least one element of the selection has the given class.", "longdesc": "<p>This is an alternative to is(\".\" + class).</p>", "params": [{"optional": false, "name": "class", "type": "String", "desc": "The class to match."}], "examples": [{"code": "\n $(\"div\").click(function(){\n if ( $(this).hasClass(\"protected\") )\n $(this).animate({ left: -10 }, 75)\n .animate({ left: 10 }, 75)\n .animate({ left: -10 }, 75)\n .animate({ left: 10 }, 75)\n .animate({ left: 0 }, 75);\n });\n", "htmlCode": "\n $(\"div\").click(function(){\n if ( $(this).hasClass(\"protected\") )\n $(this).animate({ left: -10 }, 75)\n .animate({ left: 10 }, 75)\n .animate({ left: -10 }, 75)\n .animate({ left: 10 }, 75)\n .animate({ left: 0 }, 75);\n });\n", "desc": "Check to see if an element has a specific class, and if so, perform an action.", "css": "\n div { width: 80px; height: 80px; background: #abc; \n position: relative; border: 2px solid black; \n margin: 20px 0px; float: left; left:0 }\n div.protected { border-color: red; }\n span { display:block; float:left; width:20px; \n height:20px; }\n ", "inhead": "", "html": "<span></span><div class=\"protected\"></div>\n <span></span><div></div>\n <span></span><div></div>\n <span></span><div class=\"protected\"></div>", "exampleId": "86iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div\").click(function(){\n if ( $(this).hasClass(\"protected\") )\n $(this).animate({ left: -10 }, 75)\n .animate({ left: 10 }, 75)\n .animate({ left: -10 }, 75)\n .animate({ left: 10 }, 75)\n .animate({ left: 0 }, 75);\n });\n\n });\n</script>\n<style>\n\n div { width: 80px; height: 80px; background: #abc; \n position: relative; border: 2px solid black; \n margin: 20px 0px; float: left; left:0 }\n div.protected { border-color: red; }\n span { display:block; float:left; width:20px; \n height:20px; }\n \n</style>\n</head>\n<body>\n<span></span><div class=\"protected\"></div>\n <span></span><div></div>\n <span></span><div></div>\n <span></span><div class=\"protected\"></div>\n</body>\n</html>"}]}, "filter87": {"id": 87, "searchname": "filter", "name": "filter", "type": "function", "category": "Traversing", "subcategory": "Filtering", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Removes all elements from the set of matched elements that do not match the specified expression(s). ", "longdesc": "<p>This method is used to narrow down the results of a search.</p><p>Provide a comma-separated list of expressions to apply multiple filters at once.</p>", "params": [{"optional": false, "name": "expr", "type": "Expression", "desc": "An expression to pass into the filter"}], "examples": [{"code": "\n $(\"div\").css(\"background\", \"#c8ebcc\")\n .filter(\".middle\")\n .css(\"border-color\", \"red\");\n", "htmlCode": "\n $(\"div\").css(\"background\", \"#c8ebcc\")\n .filter(\".middle\")\n .css(\"border-color\", \"red\");\n", "desc": "Change the color of all divs then put a border around only some of them.", "css": "\n div { width:60px; height:60px; margin:5px; float:left; \n border:2px white solid;}\n ", "inhead": "", "html": "<div></div>\n <div class=\"middle\"></div>\n <div class=\"middle\"></div>\n <div class=\"middle\"></div>\n <div class=\"middle\"></div>\n <div></div>", "exampleId": "87iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div\").css(\"background\", \"#c8ebcc\")\n .filter(\".middle\")\n .css(\"border-color\", \"red\");\n\n });\n</script>\n<style>\n\n div { width:60px; height:60px; margin:5px; float:left; \n border:2px white solid;}\n \n</style>\n</head>\n<body>\n<div></div>\n <div class=\"middle\"></div>\n <div class=\"middle\"></div>\n <div class=\"middle\"></div>\n <div class=\"middle\"></div>\n <div></div>\n</body>\n</html>"}, {"code": "$(\"p\").filter(\".selected\")", "htmlCode": "$(\"p\").filter(\".selected\")", "desc": "Selects all paragraphs and removes those without a class \"selected\".", "css": "", "inhead": "", "html": "", "exampleId": "87iframeExample1", "runCode": ""}, {"code": "$(\"p\").filter(\".selected, :first\")", "htmlCode": "$(\"p\").filter(\".selected, :first\")", "desc": "Selects all paragraphs and removes those that aren't of class \"selected\" or the first one.", "css": "", "inhead": "", "html": "", "exampleId": "87iframeExample2", "runCode": ""}]}, "filter88": {"id": 88, "searchname": "filter", "name": "filter", "type": "function", "category": "Traversing", "subcategory": "Filtering", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Removes all elements from the set of matched elements that does not match the specified function. ", "longdesc": "<p>The function is called with a context equal to the current element (just like <a href='Core/each'>$.each</a>). If the function returns false, then the element is removed - anything else and the element is kept.</p>", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "A function to pass into the filter\n<pre>function callback(indexInJQueryObject) {\n var keepItBoolean = true;\n\n this; // dom element\n\n return keepItBoolean;\n}\n</pre>"}], "examples": [{"code": "\n $(\"div\").css(\"background\", \"#b4b0da\")\n .filter(function (index) {\n return index == 1 || $(this).attr(\"id\") == \"fourth\";\n })\n .css(\"border\", \"3px double red\");\n", "htmlCode": "\n $(\"div\").css(\"background\", \"#b4b0da\")\n .filter(function (index) {\n return index == 1 || $(this).attr(\"id\") == \"fourth\";\n })\n .css(\"border\", \"3px double red\");\n", "desc": "Change the color of all divs then put a border two specific ones.", "css": "\n div { width:60px; height:60px; margin:5px; float:left; \n border:3px white solid; }\n ", "inhead": "", "html": "<div id=\"first\"></div>\n <div id=\"second\"></div>\n <div id=\"third\"></div>\n <div id=\"fourth\"></div>\n <div id=\"fifth\"></div>\n <div id=\"sixth\"></div>", "exampleId": "88iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div\").css(\"background\", \"#b4b0da\")\n .filter(function (index) {\n return index == 1 || $(this).attr(\"id\") == \"fourth\";\n })\n .css(\"border\", \"3px double red\");\n\n });\n</script>\n<style>\n\n div { width:60px; height:60px; margin:5px; float:left; \n border:3px white solid; }\n \n</style>\n</head>\n<body>\n<div id=\"first\"></div>\n <div id=\"second\"></div>\n <div id=\"third\"></div>\n <div id=\"fourth\"></div>\n <div id=\"fifth\"></div>\n <div id=\"sixth\"></div>\n</body>\n</html>"}, {"code": " $(\"p\").filter(function(index) {\n return $(\"ol\", this).length == 0;\n });", "htmlCode": " $(\"p\").filter(function(index) {\n return $(\"ol\", this).length == 0;\n });", "desc": "Remove all elements that have a descendant ol element", "css": "", "inhead": "", "html": "", "exampleId": "88iframeExample1", "runCode": ""}]}, "is89": {"id": 89, "searchname": "is", "name": "is", "type": "function", "category": "Traversing", "subcategory": "Filtering", "return": "Boolean", "added": "1.0", "sample": "", "desc": "Checks the current selection against an expression and returns true, if at least one element of the selection fits the given expression.", "longdesc": "<p>If no element fits, or the expression is not valid, then the response will be 'false'. Note that only simple expressions are supported. Complex expressions, such as those containing hierarchy selectors (such as +, ~, and >) will always return 'true'.</p><p><a href='Traversing/filter'>filter</a> is used internally, therefore all rules that apply there apply here, as well. </p>", "params": [{"optional": false, "name": "expr", "type": "String", "desc": "The expression with which to filter"}], "examples": [{"code": "\n $(\"div\").one('click', function () {\n if ($(this).is(\":first-child\")) {\n $(\"p\").text(\"It's the first div.\");\n } else if ($(this).is(\".blue,.red\")) {\n $(\"p\").text(\"It's a blue or red div.\");\n } else if ($(this).is(\":contains('Peter')\")) {\n $(\"p\").text(\"It's Peter!\");\n } else {\n $(\"p\").html(\"It's nothing <em>special</em>.\");\n }\n $(\"p\").hide().slideDown(\"slow\");\n $(this).css({\"border-style\": \"inset\", cursor:\"default\"});\n });\n", "htmlCode": "\n $(\"div\").one('click', function () {\n if ($(this).is(\":first-child\")) {\n $(\"p\").text(\"It's the first div.\");\n } else if ($(this).is(\".blue,.red\")) {\n $(\"p\").text(\"It's a blue or red div.\");\n } else if ($(this).is(\":contains('Peter')\")) {\n $(\"p\").text(\"It's Peter!\");\n } else {\n $(\"p\").html(\"It's nothing <em>special</em>.\");\n }\n $(\"p\").hide().slideDown(\"slow\");\n $(this).css({\"border-style\": \"inset\", cursor:\"default\"});\n });\n", "desc": "Shows a few ways is() can be used inside an event handler.", "css": "\n div { width:60px; height:60px; margin:5px; float:left;\n border:4px outset; background:green; text-align:center; \n font-weight:bolder; cursor:pointer; }\n .blue { background:blue; }\n .red { background:red; }\n span { color:white; font-size:16px; }\n p { color:red; font-weight:bolder; background:yellow; \n margin:3px; clear:left; display:none; }\n ", "inhead": "", "html": "<div></div>\n <div class=\"blue\"></div>\n <div></div>\n <div class=\"red\"></div>\n <div><br/><span>Peter</span></div>\n <div class=\"blue\"></div>\n <p> </p>", "exampleId": "89iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div\").one('click', function () {\n if ($(this).is(\":first-child\")) {\n $(\"p\").text(\"It's the first div.\");\n } else if ($(this).is(\".blue,.red\")) {\n $(\"p\").text(\"It's a blue or red div.\");\n } else if ($(this).is(\":contains('Peter')\")) {\n $(\"p\").text(\"It's Peter!\");\n } else {\n $(\"p\").html(\"It's nothing <em>special</em>.\");\n }\n $(\"p\").hide().slideDown(\"slow\");\n $(this).css({\"border-style\": \"inset\", cursor:\"default\"});\n });\n\n });\n</script>\n<style>\n\n div { width:60px; height:60px; margin:5px; float:left;\n border:4px outset; background:green; text-align:center; \n font-weight:bolder; cursor:pointer; }\n .blue { background:blue; }\n .red { background:red; }\n span { color:white; font-size:16px; }\n p { color:red; font-weight:bolder; background:yellow; \n margin:3px; clear:left; display:none; }\n \n</style>\n</head>\n<body>\n<div></div>\n <div class=\"blue\"></div>\n <div></div>\n <div class=\"red\"></div>\n <div><br/><span>Peter</span></div>\n <div class=\"blue\"></div>\n <p> </p>\n</body>\n</html>"}, {"code": "\n var isFormParent = $(\"input[@type='checkbox']\").parent().is(\"form\")\n $(\"div\").text(\"isFormParent = \" + isFormParent);\n", "htmlCode": "\n var isFormParent = $(\"input[@type='checkbox']\").parent().is(\"form\")\n $(\"div\").text(\"isFormParent = \" + isFormParent);\n", "desc": "Returns true, because the parent of the input is a form element", "css": "div { color:red; }", "inhead": "", "html": "<form><input type=\"checkbox\" /></form>\n <div></div>", "exampleId": "89iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var isFormParent = $(\"input[@type='checkbox']\").parent().is(\"form\")\n $(\"div\").text(\"isFormParent = \" + isFormParent);\n\n });\n</script>\n<style>\ndiv { color:red; }\n</style>\n</head>\n<body>\n<form><input type=\"checkbox\" /></form>\n <div></div>\n</body>\n</html>"}, {"code": "\n var isFormParent = $(\"input[@type='checkbox']\").parent().is(\"form\")\n $(\"div\").text(\"isFormParent = \" + isFormParent);\n", "htmlCode": "\n var isFormParent = $(\"input[@type='checkbox']\").parent().is(\"form\")\n $(\"div\").text(\"isFormParent = \" + isFormParent);\n", "desc": "Returns false, because the parent of the input is a p element", "css": "div { color:red; }", "inhead": "", "html": "<form><p><input type=\"checkbox\" /></p></form>\n <div></div>", "exampleId": "89iframeExample2", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var isFormParent = $(\"input[@type='checkbox']\").parent().is(\"form\")\n $(\"div\").text(\"isFormParent = \" + isFormParent);\n\n });\n</script>\n<style>\ndiv { color:red; }\n</style>\n</head>\n<body>\n<form><p><input type=\"checkbox\" /></p></form>\n <div></div>\n</body>\n</html>"}]}, "map90": {"id": 90, "searchname": "map", "name": "map", "type": "function", "category": "Traversing", "subcategory": "Filtering", "return": "jQuery", "added": "1.2", "sample": "", "desc": "Translate a set of elements in the jQuery object into another set of values in an array (which may, or may not, be elements).", "longdesc": "<p>You could use this to build lists of values, attributes, css values - or even perform special, custom, selector transformations.</p><p>This is provided as a convenience method for using <a href='Utilities/jQuery.map'>$.map()</a>.</p>", "params": [{"optional": false, "name": "callback", "type": "Function", "desc": "The function to execute on each element in the set.\n<pre>function callback(index, domElement) {\n var replacement;\n\n this; // also dom element\n\n // replacement == null : delete spot\n // replacement == array : insert the elements of the array\n // else replace the spot with replacement\n return replacement;\n}\n</pre>"}], "examples": [{"code": "\n $(\"p\").append( $(\"input\").map(function(){\n return $(this).val();\n }).get().join(\", \") );\n", "htmlCode": "\n $(\"p\").append( $(\"input\").map(function(){\n return $(this).val();\n }).get().join(\", \") );\n", "desc": "Build a list of all the values within a form.", "css": "\n p { color:red; }\n ", "inhead": "", "html": "<p><b>Values: </b></p>\n <form>\n <input type=\"text\" name=\"name\" value=\"John\"/>\n <input type=\"text\" name=\"password\" value=\"password\"/>\n <input type=\"text\" name=\"url\" value=\"http://ejohn.org/\"/>\n </form>", "exampleId": "90iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"p\").append( $(\"input\").map(function(){\n return $(this).val();\n }).get().join(\", \") );\n\n });\n</script>\n<style>\n\n p { color:red; }\n \n</style>\n</head>\n<body>\n<p><b>Values: </b></p>\n <form>\n <input type=\"text\" name=\"name\" value=\"John\"/>\n <input type=\"text\" name=\"password\" value=\"password\"/>\n <input type=\"text\" name=\"url\" value=\"http://ejohn.org/\"/>\n </form>\n</body>\n</html>"}, {"code": "\n var mappedItems = $(\"li\").map(function (index) {\n var replacement = $(\"<li>\").text($(this).text()).get(0);\n if (index == 0) {\n // make the first item all caps\n $(replacement).text($(replacement).text().toUpperCase());\n } else if (index == 1 || index == 3) {\n // delete the second and fourth items\n replacement = null;\n } else if (index == 2) {\n // make two of the third item and add some text\n replacement = [replacement,$(\"<li>\").get(0)];\n $(replacement[0]).append(\"<b> - A</b>\");\n $(replacement[1]).append(\"Extra <b> - B</b>\");\n }\n\n // replacment will be an dom element, null, \n // or an array of dom elements\n return replacement;\n });\n $(\"#results\").append(mappedItems);\n", "htmlCode": "\n var mappedItems = $(\"li\").map(function (index) {\n var replacement = $(\"<li>\").text($(this).text()).get(0);\n if (index == 0) {\n // make the first item all caps\n $(replacement).text($(replacement).text().toUpperCase());\n } else if (index == 1 || index == 3) {\n // delete the second and fourth items\n replacement = null;\n } else if (index == 2) {\n // make two of the third item and add some text\n replacement = [replacement,$(\"<li>\").get(0)];\n $(replacement[0]).append(\"<b> - A</b>\");\n $(replacement[1]).append(\"Extra <b> - B</b>\");\n }\n\n // replacment will be an dom element, null, \n // or an array of dom elements\n return replacement;\n });\n $(\"#results\").append(mappedItems);\n", "desc": "A contrived example to show some functionality.", "css": "\n body { font-size:16px; }\n ul { float:left; margin:0 30px; color:blue; }\n #results { color:red; }\n ", "inhead": "", "html": "<ul>\n <li>First</li>\n <li>Second</li>\n <li>Third</li>\n <li>Fourth</li>\n <li>Fifth</li>\n </ul>\n <ul id=\"results\">\n </ul>", "exampleId": "90iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var mappedItems = $(\"li\").map(function (index) {\n var replacement = $(\"<li>\").text($(this).text()).get(0);\n if (index == 0) {\n // make the first item all caps\n $(replacement).text($(replacement).text().toUpperCase());\n } else if (index == 1 || index == 3) {\n // delete the second and fourth items\n replacement = null;\n } else if (index == 2) {\n // make two of the third item and add some text\n replacement = [replacement,$(\"<li>\").get(0)];\n $(replacement[0]).append(\"<b> - A</b>\");\n $(replacement[1]).append(\"Extra <b> - B</b>\");\n }\n\n // replacment will be an dom element, null, \n // or an array of dom elements\n return replacement;\n });\n $(\"#results\").append(mappedItems);\n\n });\n</script>\n<style>\n\n body { font-size:16px; }\n ul { float:left; margin:0 30px; color:blue; }\n #results { color:red; }\n \n</style>\n</head>\n<body>\n<ul>\n <li>First</li>\n <li>Second</li>\n <li>Third</li>\n <li>Fourth</li>\n <li>Fifth</li>\n </ul>\n <ul id=\"results\">\n </ul>\n</body>\n</html>"}]}, "not91": {"id": 91, "searchname": "not", "name": "not", "type": "function", "category": "Traversing", "subcategory": "Filtering", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Removes elements matching the specified expression from the set of matched elements.", "longdesc": "", "params": [{"optional": false, "name": "expr", "type": "String, DOMElement, Array<DOMElement>", "desc": "An expression with which to remove matching elements, an element to remove from the set or a set of elements to remove from the jQuery set of matched elements."}], "examples": [{"code": "\n $(\"div\").not(\".green, #blueone\")\n .css(\"border-color\", \"red\");\n", "htmlCode": "\n $(\"div\").not(\".green, #blueone\")\n .css(\"border-color\", \"red\");\n", "desc": "Adds a border to divs that are not green or blue.", "css": "\n div { width:60px; height:60px; margin:10px; float:left;\n background:yellow; border:2px solid white; }\n .green { background:#8f8; }\n .gray { background:#ccc; }\n #blueone { background:#99f; }\n ", "inhead": "", "html": "<div></div>\n <div id=\"blueone\"></div>\n <div></div>\n <div class=\"green\"></div>\n <div class=\"green\"></div>\n <div class=\"gray\"></div>\n <div></div>", "exampleId": "91iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div\").not(\".green, #blueone\")\n .css(\"border-color\", \"red\");\n\n });\n</script>\n<style>\n\n div { width:60px; height:60px; margin:10px; float:left;\n background:yellow; border:2px solid white; }\n .green { background:#8f8; }\n .gray { background:#ccc; }\n #blueone { background:#99f; }\n \n</style>\n</head>\n<body>\n<div></div>\n <div id=\"blueone\"></div>\n <div></div>\n <div class=\"green\"></div>\n <div class=\"green\"></div>\n <div class=\"gray\"></div>\n <div></div>\n</body>\n</html>"}, {"code": "$(\"p\").not( $(\"#selected\")[0] )", "htmlCode": "$(\"p\").not( $(\"#selected\")[0] )", "desc": "Removes the element with the ID \"selected\" from the set of all paragraphs.", "css": "", "inhead": "", "html": "", "exampleId": "91iframeExample1", "runCode": ""}, {"code": "$(\"p\").not(\"#selected\")", "htmlCode": "$(\"p\").not(\"#selected\")", "desc": "Removes the element with the ID \"selected\" from the set of all paragraphs.", "css": "", "inhead": "", "html": "", "exampleId": "91iframeExample2", "runCode": ""}, {"code": "$(\"p\").not($(\"div p.selected\"))", "htmlCode": "$(\"p\").not($(\"div p.selected\"))", "desc": "Removes all elements that match \"div p.selected\" from the total set of all paragraphs.", "css": "", "inhead": "", "html": "", "exampleId": "91iframeExample3", "runCode": ""}]}, "slice92": {"id": 92, "searchname": "slice", "name": "slice", "type": "function", "category": "Traversing", "subcategory": "Filtering", "return": "jQuery", "added": "1.1.4", "sample": "", "desc": "Selects a subset of the matched elements.", "longdesc": "<p>Behaves exactly like the built-in Array slice method. </p>", "params": [{"optional": false, "name": "start", "type": "Integer", "desc": "Where to start the subset. The first element is at zero. Can be negative to start from the end of the selection."}, {"optional": true, "name": "end", "type": "Integer", "desc": "Where to end the subset. If unspecified, ends at the end of the selection."}], "examples": [{"code": "\n function colorEm() {\n var $div = $(\"div\");\n var start = Math.floor(Math.random() *\n $div.length);\n var end = Math.floor(Math.random() *\n ($div.length - start)) +\n start + 1;\n if (end == $div.length) end = undefined;\n $div.css(\"background\", \"\");\n if (end) \n $div.slice(start, end).css(\"background\", \"yellow\"); \n else\n $div.slice(start).css(\"background\", \"yellow\");\n \n $(\"span\").text('$(\"div\").slice(' + start +\n (end ? ', ' + end : '') +\n ').css(\"background\", \"yellow\");');\n }\n\n $(\"button\").click(colorEm);\n", "htmlCode": "\n function colorEm() {\n var $div = $(\"div\");\n var start = Math.floor(Math.random() *\n $div.length);\n var end = Math.floor(Math.random() *\n ($div.length - start)) +\n start + 1;\n if (end == $div.length) end = undefined;\n $div.css(\"background\", \"\");\n if (end) \n $div.slice(start, end).css(\"background\", \"yellow\"); \n else\n $div.slice(start).css(\"background\", \"yellow\");\n \n $(\"span\").text('$(\"div\").slice(' + start +\n (end ? ', ' + end : '') +\n ').css(\"background\", \"yellow\");');\n }\n\n $(\"button\").click(colorEm);\n", "desc": "Turns divs yellow based on a random slice.", "css": "\n div { width:40px; height:40px; margin:10px; float:left;\n border:2px solid blue; }\n span { color:red; font-weight:bold; }\n button { margin:5px; }\n ", "inhead": "", "html": "<button>Turn slice yellow</button>\n <span>Click the button!</span>
10000
;\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>", "exampleId": "92iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n function colorEm() {\n var $div = $(\"div\");\n var start = Math.floor(Math.random() *\n $div.length);\n var end = Math.floor(Math.random() *\n ($div.length - start)) +\n start + 1;\n if (end == $div.length) end = undefined;\n $div.css(\"background\", \"\");\n if (end) \n $div.slice(start, end).css(\"background\", \"yellow\"); \n else\n $div.slice(start).css(\"background\", \"yellow\");\n \n $(\"span\").text('$(\"div\").slice(' + start +\n (end ? ', ' + end : '') +\n ').css(\"background\", \"yellow\");');\n }\n\n $(\"button\").click(colorEm);\n\n });\n</script>\n<style>\n\n div { width:40px; height:40px; margin:10px; float:left;\n border:2px solid blue; }\n span { color:red; font-weight:bold; }\n button { margin:5px; }\n \n</style>\n</head>\n<body>\n<button>Turn slice yellow</button>\n <span>Click the button!</span>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n</body>\n</html>"}, {"code": "$(\"p\").slice(0, 1).wrapInner(\"<b></b>\");", "htmlCode": "$(\"p\").slice(0, 1).wrapInner(\"<b></b>\");", "desc": "Selects all paragraphs, then slices the selection to include only the first element.", "css": "", "inhead": "", "html": "", "exampleId": "92iframeExample1", "runCode": ""}, {"code": "$(\"p\").slice(0, 2).wrapInner(\"<b></b>\");", "htmlCode": "$(\"p\").slice(0, 2).wrapInner(\"<b></b>\");", "desc": "Selects all paragraphs, then slices the selection to include only the first and second element.", "css": "", "inhead": "", "html": "", "exampleId": "92iframeExample2", "runCode": ""}, {"code": "$(\"p\").slice(1, 2).wrapInner(\"<b></b>\");", "htmlCode": "$(\"p\").slice(1, 2).wrapInner(\"<b></b>\");", "desc": "Selects all paragraphs, then slices the selection to include only the second element.", "css": "", "inhead": "", "html": "", "exampleId": "92iframeExample3", "runCode": ""}, {"code": "$(\"p\").slice(1).wrapInner(\"<b></b>\");", "htmlCode": "$(\"p\").slice(1).wrapInner(\"<b></b>\");", "desc": "Selects all paragraphs, then slices the selection to include only the second and third element.", "css": "", "inhead": "", "html": "", "exampleId": "92iframeExample4", "runCode": ""}, {"code": "$(\"p\").slice(-1).wrapInner(\"<b></b>\");", "htmlCode": "$(\"p\").slice(-1).wrapInner(\"<b></b>\");", "desc": "Selects all paragraphs, then slices the selection to include only the third element.", "css": "", "inhead": "", "html": "", "exampleId": "92iframeExample5", "runCode": ""}]}, "add93": {"id": 93, "searchname": "add", "name": "add", "type": "function", "category": "Traversing", "subcategory": "Finding", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Adds more elements, matched by the given expression, to the set of matched elements.", "longdesc": "", "params": [{"optional": false, "name": "expr", "type": "String, DOMElement, Array<DOMElement>", "desc": "An expression whose matched elements are added for String, a string of HTML to create on the fly for DOMElement or one or more Elements to add if an Array."}], "examples": [{"code": "\n $(\"div\").css(\"border\", \"2px solid red\")\n .add(\"p\")\n .css(\"background\", \"yellow\");\n", "htmlCode": "\n $(\"div\").css(\"border\", \"2px solid red\")\n .add(\"p\")\n .css(\"background\", \"yellow\");\n", "desc": "Finds all divs and makes a border. Then adds all paragraphs to the jQuery object to set their backgrounds yellow.", "css": "\n div { width:60px; height:60px; margin:10px; float:left; }\n p { clear:left; font-weight:bold; font-size:16px; \n color:blue; margin:0 10px; padding:2px; }\n ", "inhead": "", "html": "<div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <p>Added this... (notice no border)</p>", "exampleId": "93iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div\").css(\"border\", \"2px solid red\")\n .add(\"p\")\n .css(\"background\", \"yellow\");\n\n });\n</script>\n<style>\n\n div { width:60px; height:60px; margin:10px; float:left; }\n p { clear:left; font-weight:bold; font-size:16px; \n color:blue; margin:0 10px; padding:2px; }\n \n</style>\n</head>\n<body>\n<div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <p>Added this... (notice no border)</p>\n</body>\n</html>"}, {"code": "$(\"p\").add(\"span\").css(\"background\", \"yellow\");", "htmlCode": "$(\"p\").add(\"span\").css(\"background\", \"yellow\");", "desc": "Adds more elements, matched by the given expression, to the set of matched elements.", "css": "", "inhead": "", "html": "<p>Hello</p><span>Hello Again</span>", "exampleId": "93iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").add(\"span\").css(\"background\", \"yellow\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<p>Hello</p><span>Hello Again</span>\n</body>\n</html>"}, {"code": "$(\"p\").clone().add(\"<span>Again</span>\").appendTo(document.body);", "htmlCode": "$(\"p\").clone().add(\"<span>Again</span>\").appendTo(document.body);", "desc": "Adds more elements, created on the fly, to the set of matched elements.", "css": "", "inhead": "", "html": "<p>Hello</p>", "exampleId": "93iframeExample2", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").clone().add(\"<span>Again</span>\").appendTo(document.body);\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<p>Hello</p>\n</body>\n</html>"}, {"code": "$(\"p\").add(document.getElementById(\"a\")).css(\"background\", \"yellow\");", "htmlCode": "$(\"p\").add(document.getElementById(\"a\")).css(\"background\", \"yellow\");", "desc": "Adds one or more Elements to the set of matched elements.", "css": "", "inhead": "", "html": "<p>Hello</p><span id=\"a\">Hello Again</span>", "exampleId": "93iframeExample3", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").add(document.getElementById(\"a\")).css(\"background\", \"yellow\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<p>Hello</p><span id=\"a\">Hello Again</span>\n</body>\n</html>"}]}, "children94": {"id": 94, "searchname": "children", "name": "children", "type": "function", "category": "Traversing", "subcategory": "Finding", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Get a set of elements containing all of the unique immediate children of each of the matched set of elements.", "longdesc": "<p>This set can be filtered with an optional expression that will cause only elements matching the selector to be collected. Also note: while parents() will look at all ancestors, children() will only consider immediate child elements.</p>", "params": [{"optional": true, "name": "expr", "type": "String", "desc": "An expression to filter the child Elements with."}], "examples": [{"code": "\n $(\"#container\").click(function (e) {\n $(\"*\").removeClass(\"hilite\");\n var $kids = $(e.target).children();\n var len = $kids.addClass(\"hilite\").length;\n\n $(\"#results span:first\").text(len);\n $(\"#results span:last\").text(e.target.tagName);\n\n e.preventDefault();\n return false;\n });\n", "htmlCode": "\n $(\"#container\").click(function (e) {\n $(\"*\").removeClass(\"hilite\");\n var $kids = $(e.target).children();\n var len = $kids.addClass(\"hilite\").length;\n\n $(\"#results span:first\").text(len);\n $(\"#results span:last\").text(e.target.tagName);\n\n e.preventDefault();\n return false;\n });\n", "desc": "Find all children of the clicked element.", "css": "\n body { font-size:16px; font-weight:bolder; }\n div { width:130px; height:82px; margin:10px; float:left;\n border:1px solid blue; padding:4px; }\n #container { width:auto; height:105px; margin:0; float:none;\n border:none; }\n .hilite { border-color:red; }\n #results { display:block; color:red; }\n p { margin:10px; border:1px solid transparent; }\n span { color:blue; border:1px solid transparent; }\n input { width:100px; }\n em { border:1px solid transparent; }\n a { border:1px solid transparent; }\n b { border:1px solid transparent; }\n button { border:1px solid transparent; }\n ", "inhead": "", "html": "<div id=\"container\">\n <div>\n <p>This <span>is the <em>way</em> we</span> \n write <em>the</em> demo,</p>\n </div>\n <div>\n <a href=\"#\"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write \n the</button> demo,\n </div>\n <div>\n This <span>the way we <em>write</em> the <em>demo</em> so</span>\n <input type=\"text\" value=\"early\" /> in\n </div>\n <p>\n <span>t</span>he <span>m</span>orning.\n <span id=\"results\">Found <span>0</span> children in <span>TAG</span>.</span>\n </p>\n </div>", "exampleId": "94iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"#container\").click(function (e) {\n $(\"*\").removeClass(\"hilite\");\n var $kids = $(e.target).children();\n var len = $kids.addClass(\"hilite\").length;\n\n $(\"#results span:first\").text(len);\n $(\"#results span:last\").text(e.target.tagName);\n\n e.preventDefault();\n return false;\n });\n\n });\n</script>\n<style>\n\n body { font-size:16px; font-weight:bolder; }\n div { width:130px; height:82px; margin:10px; float:left;\n border:1px solid blue; padding:4px; }\n #container { width:auto; height:105px; margin:0; float:none;\n border:none; }\n .hilite { border-color:red; }\n #results { display:block; color:red; }\n p { margin:10px; border:1px solid transparent; }\n span { color:blue; border:1px solid transparent; }\n input { width:100px; }\n em { border:1px solid transparent; }\n a { border:1px solid transparent; }\n b { border:1px solid transparent; }\n button { border:1px solid transparent; }\n \n</style>\n</head>\n<body>\n<div id=\"container\">\n <div>\n <p>This <span>is the <em>way</em> we</span> \n write <em>the</em> demo,</p>\n </div>\n <div>\n <a href=\"#\"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write \n the</button> demo,\n </div>\n <div>\n This <span>the way we <em>write</em> the <em>demo</em> so</span>\n <input type=\"text\" value=\"early\" /> in\n </div>\n <p>\n <span>t</span>he <span>m</span>orning.\n <span id=\"results\">Found <span>0</span> children in <span>TAG</span>.</span>\n </p>\n </div>\n</body>\n</html>"}, {"code": "$(\"div\").children().css(\"border-bottom\", \"3px double red\");", "htmlCode": "$(\"div\").children().css(\"border-bottom\", \"3px double red\");", "desc": "Find all children of each div.", "css": "\n body { font-size:16px; font-weight:bolder; }\n span { color:blue; }\n p { margin:5px 0; }\n ", "inhead": "", "html": "<p>Hello (this is a paragraph)</p>\n <div><span>Hello Again (this span is a child of the a div)</span></div>\n <p>And <span>Again</span> (in another paragraph)</p>\n <div>And One Last <span>Time</span> (most text directly in a div)</div>", "exampleId": "94iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"div\").children().css(\"border-bottom\", \"3px double red\");\n });\n</script>\n<style>\n\n body { font-size:16px; font-weight:bolder; }\n span { color:blue; }\n p { margin:5px 0; }\n \n</style>\n</head>\n<body>\n<p>Hello (this is a paragraph)</p>\n <div><span>Hello Again (this span is a child of the a div)</span></div>\n <p>And <span>Again</span> (in another paragraph)</p>\n <div>And One Last <span>Time</span> (most text directly in a div)</div>\n</body>\n</html>"}, {"code": "$(\"div\").children(\".selected\").css(\"color\", \"blue\");", "htmlCode": "$(\"div\").children(\".selected\").css(\"color\", \"blue\");", "desc": "Find all children with a class \"selected\" of each div.", "css": "\n body { font-size:16px; font-weight:bolder; }\n p { margin:5px 0; }\n ", "inhead": "", "html": "<div>\n <span>Hello</span>\n <p class=\"selected\">Hello Again</p>\n <div class=\"selected\">And Again</div>\n <p>And One Last Time</p>\n </div>", "exampleId": "94iframeExample2", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"div\").children(\".selected\").css(\"color\", \"blue\");\n });\n</script>\n<style>\n\n body { font-size:16px; font-weight:bolder; }\n p { margin:5px 0; }\n \n</style>\n</head>\n<body>\n<div>\n <span>Hello</span>\n <p class=\"selected\">Hello Again</p>\n <div class=\"selected\">And Again</div>\n <p>And One Last Time</p>\n </div>\n</body>\n</html>"}]}, "contents95": {"id": 95, "searchname": "contents", "name": "contents", "type": "function", "category": "Traversing", "subcategory": "Finding", "return": "jQuery", "added": "1.2", "sample": "", "desc": "Find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe.", "longdesc": "", "params": [], "examples": [{"code": "$(\"p\").contents().not(\"[nodeType=1]\").wrap(\"<b/>\");", "htmlCode": "$(\"p\").contents().not(\"[nodeType=1]\").wrap(\"<b/>\");", "desc": "Find all the text nodes inside a paragraph and wrap them with a bold tag.", "css": "", "inhead": "", "html": "<p>Hello <a href=\"http://ejohn.org/\">John</a>, how are you doing?</p>", "exampleId": "95iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").contents().not(\"[nodeType=1]\").wrap(\"<b/>\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<p>Hello <a href=\"http://ejohn.org/\">John</a>, how are you doing?</p>\n</body>\n</html>"}, {"code": "$(\"iframe\").contents().find(\"body\").append(\"I'm in an iframe!\");", "htmlCode": "$(\"iframe\").contents().find(\"body\").append(\"I'm in an iframe!\");", "desc": "Append some new content into an empty iframe.", "css": "", "inhead": "", "html": "<iframe src=\"/index-blank.html\" width=\"300\" height=\"100\"></iframe>", "exampleId": "95iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"iframe\").contents().find(\"body\").append(\"I'm in an iframe!\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<iframe src=\"/index-blank.html\" width=\"300\" height=\"100\"></iframe>\n</body>\n</html>"}]}, "find96": {"id": 96, "searchname": "find", "name": "find", "type": "function", "category": "Traversing", "subcategory": "Finding", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Searches for all elements that match the specified <a href='Selectors'>expression</a>. This method is a good way to find additional descendant elements with which to process.", "longdesc": "<p>All searching is done using a <a href='Selectors'>jQuery expression</a>. The expression can be written using CSS 1-3 Selector syntax. </p>", "params": [{"optional": false, "name": "expr", "type": "String", "desc": "An expression to search with."}], "examples": [{"code": "$(\"p\").find(\"span\").css('color','red');", "htmlCode": "$(\"p\").find(\"span\").css('color','red');", "desc": "Starts with all paragraphs and searches for descendant span elements, same as $(\"p span\")", "css": "", "inhead": "", "html": "<p><span>Hello</span>, how are you?</p>\n <p>Me? I'm <span>good</span>.</p>", "exampleId": "96iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").find(\"span\").css('color','red');\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<p><span>Hello</span>, how are you?</p>\n <p>Me? I'm <span>good</span>.</p>\n</body>\n</html>"}, {"code": "\n var newText = $(\"p\").text().split(\" \").join(\"</span> <span>\");\n newText = \"<span>\" + newText + \"</span>\";\n\n $(\"p\").html(newText)\n .find(\"span\")\n .hover(function () { $(this).addClass(\"hilite\"); },\n function () { $(this).removeClass(\"hilite\"); })\n .end()\n .find(\":contains('t')\")\n .css({\"font-style\":\"italic\", \"font-weight\":\"bolder\"});\n", "htmlCode": "\n var newText = $(\"p\").text().split(\" \").join(\"</span> <span>\");\n newText = \"<span>\" + newText + \"</span>\";\n\n $(\"p\").html(newText)\n .find(\"span\")\n .hover(function () { $(this).addClass(\"hilite\"); },\n function () { $(this).removeClass(\"hilite\"); })\n .end()\n .find(\":contains('t')\")\n .css({\"font-style\":\"italic\", \"font-weight\":\"bolder\"});\n", "desc": "Add spans around each word then add a hover and italicize words with the letter <strong>t</strong>.", "css": "\n p { font-size:20px; width:200px; cursor:default; \n color:blue; font-weight:bold; margin:0 10px; }\n .hilite { background:yellow; }\n ", "inhead": "", "html": "<p>\n When the day is short\n find that which matters to you\n or stop believing\n </p>", "exampleId": "96iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var newText = $(\"p\").text().split(\" \").join(\"</span> <span>\");\n newText = \"<span>\" + newText + \"</span>\";\n\n $(\"p\").html(newText)\n .find(\"span\")\n .hover(function () { $(this).addClass(\"hilite\"); },\n function () { $(this).removeClass(\"hilite\"); })\n .end()\n .find(\":contains('t')\")\n .css({\"font-style\":\"italic\", \"font-weight\":\"bolder\"});\n\n });\n</script>\n<style>\n\n p { font-size:20px; width:200px; cursor:default; \n color:blue; font-weight:bold; margin:0 10px; }\n .hilite { background:yellow; }\n \n</style>\n</head>\n<body>\n<p>\n When the day is short\n find that which matters to you\n or stop believing\n </p>\n</body>\n</html>"}]}, "next97": {"id": 97, "searchname": "next", "name": "next", "type": "function", "category": "Traversing", "subcategory": "Finding", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Get a set of elements containing the unique next siblings of each of the given set of elements.", "longdesc": "<p>next only returns the very next sibling for each element, not all next siblings (see nextAll).</p><p>You may provide an optional expression to filter the returned set. </p>", "params": [{"optional": true, "name": "expr", "type": "String", "desc": "An expression with which to filter the returned set."}], "examples": [{"code": "$(\"button[disabled]\").next().text(\"this button is disabled\");", "htmlCode": "$(\"button[disabled]\").next().text(\"this button is disabled\");", "desc": "Find the very next sibling of each disabled button and change its text \"this button is disabled\".", "css": "\n span { color:blue; font-weight:bold; }\n button { width:100px; }\n ", "inhead": "", "html": "<div><button disabled=\"disabled\">First</button> - <span></span></div>\n <div><button>Second</button> - <span></span></div>\n <div><button disabled=\"disabled\">Third</button> - <span></span></div>", "exampleId": "97iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"button[disabled]\").next().text(\"this button is disabled\");\n });\n</script>\n<style>\n\n span { color:blue; font-weight:bold; }\n button { width:100px; }\n \n</style>\n</head>\n<body>\n<div><button disabled=\"disabled\">First</button> - <span></span></div>\n <div><button>Second</button> - <span></span></div>\n <div><button disabled=\"disabled\">Third</button> - <span></span></div>\n</body>\n</html>"}, {"code": "$(\"p\").next(\".selected\").css(\"background\", \"yellow\");", "htmlCode": "$(\"p\").next(\".selected\").css(\"background\", \"yellow\");", "desc": "Find the very next sibling of each paragraph that has a class \"selected\".", "css": "", "inhead": "", "html": "<p>Hello</p>\n <p class=\"selected\">Hello Again</p>\n <div><span>And Again</span></div>", "exampleId": "97iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").next(\".selected\").css(\"background\", \"yellow\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<p>Hello</p>\n <p class=\"selected\">Hello Again</p>\n <div><span>And Again</span></div>\n</body>\n</html>"}]}, "nextall98": {"id": 98, "searchname": "nextall", "name": "nextAll", "type": "function", "category": "Traversing", "subcategory": "Finding", "return": "jQuery", "added": "1.2", "sample": "", "desc": "Find all sibling elements after the current element.", "longdesc": "<p>Use an optional expression to filter the matched set. </p>", "params": [{"optional": true, "name": "expr", "type": "String", "desc": "An expression to filter the next Elements with."}], "examples": [{"code": "$(\"div:first\").nextAll().addClass(\"after\");", "htmlCode": "$(\"div:first\").nextAll().addClass(\"after\");", "desc": "Locate all the divs after the first and give them a class.", "css": "\n div { width: 80px; height: 80px; background: #abc; \n border: 2px solid black; margin: 10px; float: left; }\n div.after { border-color: red; }\n ", "inhead": "", "html": "<div></div>\n <div></div>\n <div></div>\n <div></div>", "exampleId": "98iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"div:first\").nextAll().addClass(\"after\");\n });\n</script>\n<style>\n\n div { width: 80px; height: 80px; background: #abc; \n border: 2px solid black; margin: 10px; float: left; }\n div.after { border-color: red; }\n \n</style>\n</head>\n<body>\n<div></div>\n <div></div>\n <div></div>\n <div></div>\n</body>\n</html>"}, {"code": "\n $(\":nth-child(1)\").nextAll(\"p\").addClass(\"after\");\n", "htmlCode": "\n $(\":nth-child(1)\").nextAll(\"p\").addClass(\"after\");\n", "desc": "Locate all the paragraphs after the second child in the body and give them a class.", "css": "\n div, p { width: 60px; height: 60px; background: #abc;\n border: 2px solid black; margin: 10px; float: left; }\n .after { border-color: red; }\n ", "inhead": "", "html": "<p>p</p>\n <div>div</div>\n <p>p</p>\n <p>p</p>\n <div>div</div>\n <p>p</p>\n <div>div</div>", "exampleId": "98iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\":nth-child(1)\").nextAll(\"p\").addClass(\"after\");\n\n });\n</script>\n<style>\n\n div, p { width: 60px; height: 60px; background: #abc;\n border: 2px solid black; margin: 10px; float: left; }\n .after { border-color: red; }\n \n</style>\n</head>\n<body>\n<p>p</p>\n <div>div</div>\n <p>p</p>\n <p>p</p>\n <div>div</div>\n <p>p</p>\n <div>div</div>\n</body>\n</html>"}]}, "parent99": {"id": 99, "searchname": "parent", "name": "parent", "type": "function", "category": "Traversing", "subcategory": "Finding", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Get a set of elements containing the unique parents of the matched set of elements.", "longdesc": "<p>You may use an optional expression to filter the set of parent elements that will match. </p>", "params": [{"optional": true, "name": "expr", "type": "String", "desc": "An expression to filter the parents with."}], "examples": [{"code": "\n $(\"*\", document.body).each(function () {\n var parentTag = $(this).parent().get(0).tagName;\n $(this).prepend(document.createTextNode(parentTag + \" > \"));\n });\n", "htmlCode": "\n $(\"*\", document.body).each(function () {\n var parentTag = $(this).parent().get(0).tagName;\n $(this).prepend(document.createTextNode(parentTag + \" > \"));\n });\n", "desc": "Shows the parent of each element as (parent > child). Check the View Source to see the raw html.", "css": "\n div,p { margin:10px; }\n ", "inhead": "", "html": "<div>div, \n <span>span, </span>\n <b>b </b>\n </div>\n <p>p, \n <span>span, \n <em>em </em>\n </span>\n </p>\n <div>div, \n <strong>strong, \n <span>span, </span>\n <em>em, \n <b>b, </b>\n </em>\n </strong>\n <b>b </b>\n </div>", "exampleId": "99iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"*\", document.body).each(function () {\n var parentTag = $(this).parent().get(0).tagName;\n $(this).prepend(document.createTextNode(parentTag + \" > \"));\n });\n\n });\n</script>\n<style>\n\n div,p { margin:10px; }\n \n</style>\n</head>\n<body>\n<div>div, \n <span>span, </span>\n <b>b </b>\n </div>\n <p>p, \n <span>span, \n <em>em </em>\n </span>\n </p>\n <div>div, \n <strong>strong, \n <span>span, </span>\n <em>em, \n <b>b, </b>\n </em>\n </strong>\n <b>b </b>\n </div>\n</body>\n</html>"}, {"code": "$(\"p\").parent(\".selected\").css(\"background\", \"yellow\");", "htmlCode": "$(\"p\").parent(\".selected\").css(\"background\", \"yellow\");", "desc": "Find the parent element of each paragraph with a class \"selected\".", "css": "", "inhead": "", "html": "<div><p>Hello</p></div>\n <div class=\"selected\"><p>Hello Again</p></div>\n", "exampleId": "99iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").parent(\".selected\").css(\"background\", \"yellow\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<div><p>Hello</p></div>\n <div class=\"selected\"><p>Hello Again</p></div>\n\n</body>\n</html>"}]}, "parents100": {"id": 100, "searchname": "parents", "name": "parents", "type": "function", "category": "Traversing", "subcategory": "Finding", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element).\n\nThe matched elements can be filtered with an optional expression. ", "longdesc": "", "params": [{"optional": true, "name": "expr", "type": "String", "desc": "An expression to filter the ancestors with"}], "examples": [{"code": "\n var parentEls = $(\"b\").parents()\n .map(function () { \n return this.tagName; \n })\n .get().join(\", \");\n $(\"b\").append(\"<strong>\" + parentEls + \"</strong>\");\n", "htmlCode": "\n var parentEls = $(\"b\").parents()\n .map(function () { \n return this.tagName; \n })\n .get().join(\", \");\n $(\"b\").append(\"
10000
;<strong>\" + parentEls + \"</strong>\");\n", "desc": "Find all parent elements of each span.", "css": "\n b { color:blue; }\n strong { color:red; }\n ", "inhead": "", "html": "<div>\n <p>\n <span>\n <b>My parents are: </b>\n </span>\n </p>\n </div>", "exampleId": "100iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var parentEls = $(\"b\").parents()\n .map(function () { \n return this.tagName; \n })\n .get().join(\", \");\n $(\"b\").append(\"<strong>\" + parentEls + \"</strong>\");\n\n });\n</script>\n<style>\n\n b { color:blue; }\n strong { color:red; }\n \n</style>\n</head>\n<body>\n<div>\n <p>\n <span>\n <b>My parents are: </b>\n </span>\n </p>\n </div>\n</body>\n</html>"}, {"code": "\n function showParents() {\n $(\"div\").css(\"border-color\", \"white\");\n var len = $(\"span.selected\")\n .parents(\"div\")\n .css(\"border\", \"2px red solid\")\n .length;\n $(\"b\").text(\"Unique div parents: \" + len);\n }\n $(\"span\").click(function () {\n $(this).toggleClass(\"selected\");\n showParents();\n });\n", "htmlCode": "\n function showParents() {\n $(\"div\").css(\"border-color\", \"white\");\n var len = $(\"span.selected\")\n .parents(\"div\")\n .css(\"border\", \"2px red solid\")\n .length;\n $(\"b\").text(\"Unique div parents: \" + len);\n }\n $(\"span\").click(function () {\n $(this).toggleClass(\"selected\");\n showParents();\n });\n", "desc": "Click to find all unique div parent elements of each span.", "css": "\n p, div, span {margin:2px; padding:1px; }\n div { border:2px white solid; }\n span { cursor:pointer; font-size:12px; }\n .selected { color:blue; }\n b { color:red; display:block; font-size:14px; }\n ", "inhead": "", "html": "<p>\n <div>\n <div><span>Hello</span></div>\n <span>Hello Again</span>\n </div>\n <div>\n <span>And Hello Again</span>\n </div>\n </p>\n <b>Click Hellos to toggle their parents.</b>", "exampleId": "100iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n function showParents() {\n $(\"div\").css(\"border-color\", \"white\");\n var len = $(\"span.selected\")\n .parents(\"div\")\n .css(\"border\", \"2px red solid\")\n .length;\n $(\"b\").text(\"Unique div parents: \" + len);\n }\n $(\"span\").click(function () {\n $(this).toggleClass(\"selected\");\n showParents();\n });\n\n });\n</script>\n<style>\n\n p, div, span {margin:2px; padding:1px; }\n div { border:2px white solid; }\n span { cursor:pointer; font-size:12px; }\n .selected { color:blue; }\n b { color:red; display:block; font-size:14px; }\n \n</style>\n</head>\n<body>\n<p>\n <div>\n <div><span>Hello</span></div>\n <span>Hello Again</span>\n </div>\n <div>\n <span>And Hello Again</span>\n </div>\n </p>\n <b>Click Hellos to toggle their parents.</b>\n</body>\n</html>"}]}, "prev101": {"id": 101, "searchname": "prev", "name": "prev", "type": "function", "category": "Traversing", "subcategory": "Finding", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Get a set of elements containing the unique previous siblings of each of the matched set of elements.", "longdesc": "<p>Use an optional expression to filter the matched set.</p><p>Only the immediately previous sibling is returned, not all previous siblings. </p>", "params": [{"optional": true, "name": "expr", "type": "String", "desc": "An expression to filter the previous Elements with."}], "examples": [{"code": "\n var $curr = $(\"#start\");\n $curr.css(\"background\", \"#f99\");\n $(\"button\").click(function () {\n $curr = $curr.prev();\n $(\"div\").css(\"background\", \"\");\n $curr.css(\"background\", \"#f99\");\n });\n", "htmlCode": "\n var $curr = $(\"#start\");\n $curr.css(\"background\", \"#f99\");\n $(\"button\").click(function () {\n $curr = $curr.prev();\n $(\"div\").css(\"background\", \"\");\n $curr.css(\"background\", \"#f99\");\n });\n", "desc": "Find the very previous sibling of each div.", "css": "\n div { width:40px; height:40px; margin:10px;\n float:left; border:2px blue solid; \n padding:2px; }\n span { font-size:14px; }\n p { clear:left; margin:10px; }\n ", "inhead": "", "html": "<div></div>\n <div></div>\n <div><span>has child</span></div>\n <div></div>\n <div></div>\n <div></div>\n <div id=\"start\"></div>\n <div></div>\n <p><button>Go to Prev</button></p>", "exampleId": "101iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var $curr = $(\"#start\");\n $curr.css(\"background\", \"#f99\");\n $(\"button\").click(function () {\n $curr = $curr.prev();\n $(\"div\").css(\"background\", \"\");\n $curr.css(\"background\", \"#f99\");\n });\n\n });\n</script>\n<style>\n\n div { width:40px; height:40px; margin:10px;\n float:left; border:2px blue solid; \n padding:2px; }\n span { font-size:14px; }\n p { clear:left; margin:10px; }\n \n</style>\n</head>\n<body>\n<div></div>\n <div></div>\n <div><span>has child</span></div>\n <div></div>\n <div></div>\n <div></div>\n <div id=\"start\"></div>\n <div></div>\n <p><button>Go to Prev</button></p>\n</body>\n</html>"}, {"code": "$(\"p\").prev(\".selected\").css(\"background\", \"yellow\");", "htmlCode": "$(\"p\").prev(\".selected\").css(\"background\", \"yellow\");", "desc": "Find the very previous sibling of each paragraph that has a class \"selected\".", "css": "", "inhead": "", "html": "<div><span>Hello</span></div>\n <p class=\"selected\">Hello Again</p>\n <p>And Again</p>", "exampleId": "101iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").prev(\".selected\").css(\"background\", \"yellow\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<div><span>Hello</span></div>\n <p class=\"selected\">Hello Again</p>\n <p>And Again</p>\n</body>\n</html>"}]}, "prevall102": {"id": 102, "searchname": "prevall", "name": "prevAll", "type": "function", "category": "Traversing", "subcategory": "Finding", "return": "jQuery", "added": "1.2", "sample": "", "desc": "Find all sibling elements before the current element.", "longdesc": "<p>Use an optional expression to filter the matched set. </p>", "params": [{"optional": true, "name": "expr", "type": "String", "desc": "An expression to filter the previous Elements with."}], "examples": [{"code": "$(\"div:last\").prevAll().addClass(\"before\");", "htmlCode": "$(\"div:last\").prevAll().addClass(\"before\");", "desc": "Locate all the divs before the last and give them a class.", "css": "\n div { width:70px; height:70px; background:#abc; \n border:2px solid black; margin:10px; float:left; }\n div.before { border-color: red; }\n ", "inhead": "", "html": "<div></div>\n <div></div>\n <div></div>\n <div></div>", "exampleId": "102iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"div:last\").prevAll().addClass(\"before\");\n });\n</script>\n<style>\n\n div { width:70px; height:70px; background:#abc; \n border:2px solid black; margin:10px; float:left; }\n div.before { border-color: red; }\n \n</style>\n</head>\n<body>\n<div></div>\n <div></div>\n <div></div>\n <div></div>\n</body>\n</html>"}]}, "siblings103": {"id": 103, "searchname": "siblings", "name": "siblings", "type": "function", "category": "Traversing", "subcategory": "Finding", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Get a set of elements containing all of the unique siblings of each of the matched set of elements.\n\nCan be filtered with an optional expressions. ", "longdesc": "", "params": [{"optional": true, "name": "expr", "type": "String", "desc": "An expression to filter the sibling Elements with"}], "examples": [{"code": "\n var len = $(\".hilite\").siblings()\n .css(\"color\", \"red\")\n .length;\n $(\"b\").text(len);\n", "htmlCode": "\n var len = $(\".hilite\").siblings()\n .css(\"color\", \"red\")\n .length;\n $(\"b\").text(len);\n", "desc": "Find the unique siblings of all yellow li elements in the 3 lists (including other yellow li elements if appropriate).", "css": "\n ul { float:left; margin:5px; font-size:16px; font-weight:bold; }\n p { color:blue; margin:10px 20px; font-size:16px; padding:5px; \n font-weight:bolder; }\n .hilite { background:yellow; }\n", "inhead": "", "html": "<ul>\n <li>One</li>\n <li>Two</li>\n <li class=\"hilite\">Three</li>\n <li>Four</li>\n </ul>\n <ul>\n <li>Five</li>\n <li>Six</li>\n <li>Seven</li>\n </ul>\n <ul>\n <li>Eight</li>\n <li class=\"hilite\">Nine</li>\n <li>Ten</li>\n <li class=\"hilite\">Eleven</li>\n </ul>\n <p>Unique siblings: <b></b></p>", "exampleId": "103iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var len = $(\".hilite\").siblings()\n .css(\"color\", \"red\")\n .length;\n $(\"b\").text(len);\n\n });\n</script>\n<style>\n\n ul { float:left; margin:5px; font-size:16px; font-weight:bold; }\n p { color:blue; margin:10px 20px; font-size:16px; padding:5px; \n font-weight:bolder; }\n .hilite { background:yellow; }\n\n</style>\n</head>\n<body>\n<ul>\n <li>One</li>\n <li>Two</li>\n <li class=\"hilite\">Three</li>\n <li>Four</li>\n </ul>\n <ul>\n <li>Five</li>\n <li>Six</li>\n <li>Seven</li>\n </ul>\n <ul>\n <li>Eight</li>\n <li class=\"hilite\">Nine</li>\n <li>Ten</li>\n <li class=\"hilite\">Eleven</li>\n </ul>\n <p>Unique siblings: <b></b></p>\n</body>\n</html>"}, {"code": "$(\"p\").siblings(\".selected\").css(\"background\", \"yellow\");", "htmlCode": "$(\"p\").siblings(\".selected\").css(\"background\", \"yellow\");", "desc": "Find all siblings with a class \"selected\" of each div.", "css": "", "inhead": "", "html": "<div><span>Hello</span></div>\n <p class=\"selected\">Hello Again</p>\n <p>And Again</p>", "exampleId": "103iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").siblings(\".selected\").css(\"background\", \"yellow\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<div><span>Hello</span></div>\n <p class=\"selected\">Hello Again</p>\n <p>And Again</p>\n</body>\n</html>"}]}, "andself104": {"id": 104, "searchname": "andself", "name": "andSelf", "type": "function", "category": "Traversing", "subcategory": "Chaining", "return": "jQuery", "added": "1.2", "sample": "", "desc": "Add the previous selection to the current selection.", "longdesc": "<p>Useful for traversing elements, and then adding something that was matched before the last traversion.</p>", "params": [], "examples": [{"code": "\n $(\"div\").find(\"p\").andSelf().addClass(\"border\");\n $(\"div\").find(\"p\").addClass(\"background\");\n", "htmlCode": "\n $(\"div\").find(\"p\").andSelf().addClass(\"border\");\n $(\"div\").find(\"p\").addClass(\"background\");\n", "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().", "css": "\n p, div { margin:5px; padding:5px; }\n .border { border: 2px solid red; }\n .background { background:yellow; }\n ", "inhead": "", "html": "<div>\n <p>First Paragraph</p>\n <p>Second Paragraph</p>\n </div>", "exampleId": "104iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div\").find(\"p\").andSelf().addClass(\"border\");\n $(\"div\").find(\"p\").addClass(\"background\");\n\n });\n</script>\n<style>\n\n p, div { margin:5px; padding:5px; }\n .border { border: 2px solid red; }\n .background { background:yellow; }\n \n</style>\n</head>\n<body>\n<div>\n <p>First Paragraph</p>\n <p>Second Paragraph</p>\n </div>\n</body>\n</html>"}]}, "end105": {"id": 105, "searchname": "end", "name": "end", "type": "function", "category": "Traversing", "subcategory": "Chaining", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Revert the most recent 'destructive' operation, changing the set of matched elements to its previous state (right before the destructive operation).", "longdesc": "<p>If there was no destructive operation before, an empty set is returned.</p><p>A 'destructive' operation is any operation that changes the set of matched jQuery elements, which means any Traversing function that returns a jQuery object - including <a href='Traversing/add'>add</a>, <a href='Traversing/andSelf'>andSelf</a>, <a href='Traversing/children'>children</a>, <a href='Traversing/filter'>filter</a>, <a href='Traversing/find'>find</a>, <a href='Traversing/map'>map</a>, <a href='Traversing/next'>next</a>, <a href='Traversing/nextAll'>nextAll</a>, <a href='Traversing/not'>not</a>, <a href='Traversing/parent'>parent</a>, <a href='Traversing/parents'>parents</a>, <a href='Traversing/prev'>prev</a>, <a href='Traversing/prevAll'>prevAll</a>, <a href='Traversing/siblings'>siblings</a> and <a href='Traversing/slice'>slice</a> - plus the <a href='Manipulation/clone'>clone</a> function (from Manipulation). </p>", "params": [], "examples": [{"code": "\n jQuery.fn.showTags = function (n) {\n var tags = this.map(function () { \n return this.tagName; \n })\n .get().join(\", \");\n $(\"b:eq(\" + n + \")\").text(tags);\n return this;\n };\n\n $(\"p\").showTags(0)\n .find(\"span\")\n .showTags(1)\n .css(\"background\", \"yellow\")\n .end()\n .showTags(2)\n .css(\"font-style\", \"italic\");\n", "htmlCode": "\n jQuery.fn.showTags = function (n) {\n var tags = this.map(function () { \n return this.tagName; \n })\n .get().join(\", \");\n $(\"b:eq(\" + n + \")\").text(tags);\n return this;\n };\n\n $(\"p\").showTags(0)\n .find(\"span\")\n .showTags(1)\n .css(\"background\", \"yellow\")\n .end()\n .showTags(2)\n .css(\"font-style\", \"italic\");\n", "desc": "Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.", "css": "\n p, div { margin:1px; padding:1px; font-weight:bold; \n font-size:16px; }\n div { color:blue; }\n b { color:red; }\n ", "inhead": "", "html": "<p>\n Hi there <span>how</span> are you <span>doing</span>?\n </p>\n <p>\n This <span>span</span> is one of \n several <span>spans</span> in this\n <span>sentence</span>.\n </p>\n <div>\n Tags in jQuery object initially: <b></b>\n </div>\n <div>\n Tags in jQuery object after find: <b></b>\n </div>\n <div>\n Tags in jQuery object after end: <b></b>\n </div>", "exampleId": "105iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n jQuery.fn.showTags = function (n) {\n var tags = this.map(function () { \n return this.tagName; \n })\n .get().join(\", \");\n $(\"b:eq(\" + n + \")\").text(tags);\n return this;\n };\n\n $(\"p\").showTags(0)\n .find(\"span\")\n .showTags(1)\n .css(\"background\", \"yellow\")\n .end()\n .showTags(2)\n .css(\"font-style\", \"italic\");\n\n });\n</script>\n<style>\n\n p, div { margin:1px; padding:1px; font-weight:bold; \n font-size:16px; }\n div { color:blue; }\n b { color:red; }\n \n</style>\n</head>\n<body>\n<p>\n Hi there <span>how</span> are you <span>doing</span>?\n </p>\n <p>\n This <span>span</span> is one of \n several <span>spans</span> in this\n <span>sentence</span>.\n </p>\n <div>\n Tags in jQuery object initially: <b></b>\n </div>\n <div>\n Tags in jQuery object after find: <b></b>\n </div>\n <div>\n Tags in jQuery object after end: <b></b>\n </div>\n</body>\n</html>"}, {"code": "$(\"p\").find(\"span\").end().css(\"border\", \"2px red solid\");", "htmlCode": "$(\"p\").find(\"span\").end().css(\"border\", \"2px red solid\");", "desc": "Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.", "css": "p { margin:10px; padding:10px; }", "inhead": "", "html": "<p><span>Hello</span>, how are you?</p>", "exampleId": "105iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").find(\"span\").end().css(\"border\", \"2px red solid\");\n });\n</script>\n<style>\np { margin:10px; padding:10px; }\n</style>\n</head>\n<body>\n<p><span>Hello</span>, how are you?</p>\n</body>\n</html>"}]}, "html106": {"id": 106, "searchname": "html", "name": "html", "type": "function", "category": "Attributes", "subcategory": "Changing Contents", "return": "String", "added": "", "sample": "", "desc": "Get the html contents (innerHTML) of the first matched element. This property is not available on XML documents (although it will work for XHTML documents).", "longdesc": "", "params": [], "examples": [{"code": "\n $(\"p\").click(function () {\n var htmlStr = $(this).html();\n $(this).text(htmlStr);\n });\n", "htmlCode": "\n $(\"p\").click(function () {\n var htmlStr = $(this).html();\n $(this).text(htmlStr);\n });\n", "desc": "Click a paragraph to convert it from html to text.", "css": "\n p { margin:8px; font-size:20px; color:blue; \n cursor:pointer; }\n b { text-decoration:underline; }\n button { cursor:pointer; }\n ", "inhead": "", "html": "<p>\n <b>Click</b> to change the <span id=\"tag\">html</span>\n </p>\n <p>\n to a <span id=\"text\">text</span> node.\n </p>\n <p>\n This <button name=\"nada\">button</button> does nothing.\n </p>", "exampleId": "106iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"p\").click(function () {\n var htmlStr = $(this).html();\n $(this).text(htmlStr);\n });\n\n });\n</script>\n<style>\n\n p { margin:8px; font-size:20px; color:blue; \n cursor:pointer; }\n b { text-decoration:underline; }\n button { cursor:pointer; }\n \n</style>\n</head>\n<body>\n<p>\n <b>Click</b> to change the <span id=\"tag\">html</span>\n </p>\n <p>\n to a <span id=\"text\">text</span> node.\n </p>\n <p>\n This <button name=\"nada\">button</button> does nothing.\n </p>\n</body>\n</html>"}]}, "html107": {"id": 107, "searchname": "html", "name": "html", "type": "function", "category": "Attributes", "subcategory": "Changing Contents", "return": "jQuery", "added": "", "sample": "", "desc": "Set the html contents of every matched element. This property is not available on XML documents (although it will work for XHTML documents).", "longdesc": "", "params": [{"optional": false, "name": "val", "type": "String", "desc": "Set the html contents to the specified value."}], "examples": [{"code": "$(\"div\").html(\"<span class='red'>Hello <b>Again</b></span>\");", "htmlCode": "$(\"div\").html(\"<span class='red'>Hello <b>Again</b></span>\");", "desc": "Add some html to each div.", "css": "\n .red { color:red; }\n ", "inhead": "", "html": "<span>Hello</span>\n <div></div>\n <div></div>\n <div></div>", "exampleId": "107iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"div\").html(\"<span class='red'>Hello <b>Again</b></span>\");\n });\n</script>\n<style>\n\n .red { color:red; }\n \n</style>\n</head>\n<body>\n<span>Hello</span>\n <div></div>\n <div></div>\n <div></div>\n</body>\n</html>"}, {"code": "\n $(\"div\").html(\"<b>Wow!</b> Such excitement...\");\n $(\"div b\").append(document.createTextNode(\"!!!\"))\n .css(\"color\", \"red\");\n", "htmlCode": "\n $(\"div\").html(\"<b>Wow!</b> Such excitement...\");\n $(\"div b\").append(document.createTextNode(\"!!!\"))\n .css(\"color\", \"red\");\n", "desc": "Add some html to each div then immediately do further manipulations to the inserted html.", "css": "\n div { color:blue; font-size:18px; }\n ", "inhead": "", "html": "<div></div>\n <div></div>\n <div></div>", "exampleId": "107iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div\").html(\"<b>Wow!</b> Such excitement...\");\n $(\"div b\").append(document.createTextNode(\"!!!\"))\n .css(\"color\", \"red\");\n\n });\n</script>\n<style>\n\n div { color:blue; font-size:18px; }\n \n</style>\n</head>\n<body>\n<div></div>\n <div></div>\n <div></div>\n</body>\n</html>"}]}, "text108": {"id": 108, "searchname": "text", "name": "text", "type": "function", "category": "Attributes", "subcategory": "Changing Contents", "return": "String", "added": "", "sample": "", "desc": "Get the combined text contents of all matched elements.", "longdesc": "<p>The result is a string that contains the combined text contents of all matched elements. This method works on both HTML and XML documents.</p>", "params": [], "examples": [{"code": "\n var str = $(\"p:first\").text();\n $(\"p:last\").html(str);\n", "htmlCode": "\n var str = $(\"p:first\").text();\n $(\"p:last\").html(str);\n", "desc": "Find the text in the first paragraph (stripping out the html), then set the html of the last paragraph to show it is just text (the red bold is gone).", "css": "\n p { color:blue; margin:8px; }\n b { color:red; }\n ", "inhead": "", "html": "<p><b>Test</b> Paragraph.</p>\n <p></p>", "exampleId": "108iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var str = $(\"p:first\").text();\n $(\"p:last\").html(str);\n\n });\n</script>\n<style>\n\n p { color:blue; margin:8px; }\n b { color:red; }\n \n</style>\n</head>\n<body>\n<p><b>Test</b> Paragraph.</p>\n <p></p>\n</body>\n</html>"}]}, "text109": {"id": 109, "searchname": "text", "name": "text", "type": "function", "category": "Attributes", "subcategory": "Changing Contents", "return": "jQuery", "added": "", "sample": "", "desc": "Set the text contents of all matched elements.", "longdesc": "<p>Similar to html(), but escapes HTML (replace \"<\" and \">\" with their HTML entities).</p>", "params": [{"optional": false, "name": "val", "type": "String", "desc": "The text value to set the contents of the element to."}], "examples": [{"code": "$(\"p\").text(\"<b>Some</b> new text.\");", "htmlCode": "$(\"p\").text(\"<b>Some</b> new text.\");", "desc": "Add text to the paragraph (notice the bold tag is escaped).", "css": "\n p { color:blue; margin:8px; }\n ", "inhead": "", "html": "<p>Test Paragraph.</p>", "exampleId": "109iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").text(\"<b>Some</b> new text.\");\n });\n</script>\n<style>\n\n p { color:blue; margin:8px; }\n \n</style>\n</head>\n<body>\n<p>Test Paragraph.</p>\n</body>\n</html>"}]}, "append110": {"id": 110, "searchname": "append", "name": "append", "type": "function", "category": "Manipulation", "subcategory": "Inserting Inside", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Append content to the inside of every matched element.", "longdesc": "<p>This operation is similar to doing an appendChild to all the specified elements, adding them into the document.</p>", "params": [{"optional": false, "name": "content", "type": "String, Element, jQuery", "desc": "Content to append to the target."}], "examples": [{"code": "$(\"p\").append(\"<b>Hello</b>\");", "htmlCode": "$(\"p\").append(\"<b>Hello</b>\");", "desc": "Appends some HTML to all paragraphs.", "css": "p { background:yellow; }", "inhead": "", "html": "<p>I would like to say: </p>", "exampleId": "110iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").append(\"<b>Hello</b>\");\n });\n</script>\n<style>\np { background:yellow; }\n</style>\n</head>\n<body>\n<p>I would like to say: </p>\n</body>\n</html>"}, {"code": "$(\"p\").append(document.createTextNode(\"Hello\"));", "htmlCode": "$(\"p\").append(document.createTextNode(\"Hello\"));", "desc": "Appends an Element to all paragraphs.", "css": "p { background:yellow; }", "inhead": "", "html": "<p>I would like to say: </p>", "exampleId": "110iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").append(document.createTextNode(\"Hello\"));\n });\n</script>\n<style>\np { background:yellow; }\n</style>\n</head>\n<body>\n<p>I would like to say: </p>\n</body>\n</html>"}, {"code": "$(\"p\").append( $(\"b\") );", "htmlCode": "$(\"p\").append( $(\"b\") );", "desc": "Appends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.", "css": "p { background:yellow; }", "inhead": "", "html": "<b>Hello</b><p>I would like to say: </p>", "exampleId": "110iframeExample2", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").append( $(\"b\") );\n });\n</script>\n<style>\np { background:yellow; }\n</style>\n</head>\n<body>\n<b>Hello</b><p>I would like to say: </p>\n</body>\n</html>"}]}, "appendto111": {"id": 111, "searchname": "appendto", "name": "appendTo", "type": "function", "category": "Manipulation", "subcategory": "Inserting Inside", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Append all of the matched elements to another, specified, set of elements.", "longdesc": "<p>This operation is, essentially, the reverse of doing a regular $(A).append(B), in that instead of appending B to
8000
;A, you're appending A to B.</p>", "params": [{"optional": false, "name": "content", "type": "String", "desc": "target to which the content will be appended."}], "examples": [{"code": "$(\"span\").appendTo(\"#foo\"); // check append() examples", "htmlCode": "$(\"span\").appendTo(\"#foo\"); // check append() examples", "desc": "Appends all spans to the element with the ID \"foo\"", "css": "#foo { background:yellow; }", "inhead": "", "html": "<span>I have nothing more to say... </span>\n <div id=\"foo\">FOO! </div>", "exampleId": "111iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"span\").appendTo(\"#foo\"); // check append() examples\n });\n</script>\n<style>\n#foo { background:yellow; }\n</style>\n</head>\n<body>\n<span>I have nothing more to say... </span>\n <div id=\"foo\">FOO! </div>\n</body>\n</html>"}]}, "prepend112": {"id": 112, "searchname": "prepend", "name": "prepend", "type": "function", "category": "Manipulation", "subcategory": "Inserting Inside", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Prepend content to the inside of every matched element.", "longdesc": "<p>This operation is the best way to insert elements inside, at the beginning, of all matched elements.</p>", "params": [{"optional": false, "name": "content", "type": "String, Element, jQuery", "desc": "Content to prepend to the target."}], "examples": [{"code": "$(\"p\").prepend(\"<b>Hello </b>\");", "htmlCode": "$(\"p\").prepend(\"<b>Hello </b>\");", "desc": "Prepends some HTML to all paragraphs.", "css": "p { background:yellow; }", "inhead": "", "html": "<p>there friend!</p>\n <p>amigo!</p>", "exampleId": "112iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").prepend(\"<b>Hello </b>\");\n });\n</script>\n<style>\np { background:yellow; }\n</style>\n</head>\n<body>\n<p>there friend!</p>\n <p>amigo!</p>\n</body>\n</html>"}, {"code": "$(\"p\").prepend(document.createTextNode(\"Hello \"));", "htmlCode": "$(\"p\").prepend(document.createTextNode(\"Hello \"));", "desc": "Prepends a DOM Element to all paragraphs.", "css": "p { background:yellow; }", "inhead": "", "html": "<p>is what I'd say</p>\n <p>is what I said</p>", "exampleId": "112iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").prepend(document.createTextNode(\"Hello \"));\n });\n</script>\n<style>\np { background:yellow; }\n</style>\n</head>\n<body>\n<p>is what I'd say</p>\n <p>is what I said</p>\n</body>\n</html>"}, {"code": "$(\"p\").prepend( $(\"b\") );", "htmlCode": "$(\"p\").prepend( $(\"b\") );", "desc": "Prepends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.", "css": "p { background:yellow; }", "inhead": "", "html": "<p> is what was said.</p><b>Hello</b>", "exampleId": "112iframeExample2", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").prepend( $(\"b\") );\n });\n</script>\n<style>\np { background:yellow; }\n</style>\n</head>\n<body>\n<p> is what was said.</p><b>Hello</b>\n</body>\n</html>"}]}, "prependto113": {"id": 113, "searchname": "prependto", "name": "prependTo", "type": "function", "category": "Manipulation", "subcategory": "Inserting Inside", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Prepend all of the matched elements to another, specified, set of elements.", "longdesc": "<p>This operation is, essentially, the reverse of doing a regular $(A).prepend(B), in that instead of prepending B to A, you're prepending A to B.</p>", "params": [{"optional": false, "name": "content", "type": "String", "desc": "target to which the content will be prepended."}], "examples": [{"code": "$(\"span\").prependTo(\"#foo\"); // check prepend() examples", "htmlCode": "$(\"span\").prependTo(\"#foo\"); // check prepend() examples", "desc": "Prepends all spans to the element with the ID \"foo\"", "css": "div { background:yellow; }", "inhead": "", "html": "<div id=\"foo\">FOO!</div>\n <span>I have something to say... </span>", "exampleId": "113iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"span\").prependTo(\"#foo\"); // check prepend() examples\n });\n</script>\n<style>\ndiv { background:yellow; }\n</style>\n</head>\n<body>\n<div id=\"foo\">FOO!</div>\n <span>I have something to say... </span>\n</body>\n</html>"}]}, "after114": {"id": 114, "searchname": "after", "name": "after", "type": "function", "category": "Manipulation", "subcategory": "Inserting Outside", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Insert content after each of the matched elements.", "longdesc": "", "params": [{"optional": false, "name": "content", "type": "String, Element, jQuery", "desc": "Content to insert after each target."}], "examples": [{"code": "$(\"p\").after(\"<b>Hello</b>\");", "htmlCode": "$(\"p\").after(\"<b>Hello</b>\");", "desc": "Inserts some HTML after all paragraphs.", "css": "p { background:yellow; }", "inhead": "", "html": "<p>I would like to say: </p>", "exampleId": "114iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").after(\"<b>Hello</b>\");\n });\n</script>\n<style>\np { background:yellow; }\n</style>\n</head>\n<body>\n<p>I would like to say: </p>\n</body>\n</html>"}, {"code": "$(\"p\").after( document.createTextNode(\"Hello\") );", "htmlCode": "$(\"p\").after( document.createTextNode(\"Hello\") );", "desc": "Inserts a DOM element after all paragraphs.", "css": "p { background:yellow; }", "inhead": "", "html": "<p>I would like to say: </p>", "exampleId": "114iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").after( document.createTextNode(\"Hello\") );\n });\n</script>\n<style>\np { background:yellow; }\n</style>\n</head>\n<body>\n<p>I would like to say: </p>\n</body>\n</html>"}, {"code": "$(\"p\").after( $(\"b\") );", "htmlCode": "$(\"p\").after( $(\"b\") );", "desc": "Inserts a jQuery object (similar to an Array of DOM Elements) after all paragraphs.", "css": "p { background:yellow; }", "inhead": "", "html": "<b>Hello</b>\n <p>I would like to say: </p>", "exampleId": "114iframeExample2", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").after( $(\"b\") );\n });\n</script>\n<style>\np { background:yellow; }\n</style>\n</head>\n<body>\n<b>Hello</b>\n <p>I would like to say: </p>\n</body>\n</html>"}]}, "before115": {"id": 115, "searchname": "before", "name": "before", "type": "function", "category": "Manipulation", "subcategory": "Inserting Outside", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Insert content before each of the matched elements.", "longdesc": "", "params": [{"optional": false, "name": "content", "type": "String, Element, jQuery", "desc": "Content to insert before each target."}], "examples": [{"code": "$(\"p\").before(\"<b>Hello</b>\");", "htmlCode": "$(\"p\").before(\"<b>Hello</b>\");", "desc": "Inserts some HTML before all paragraphs.", "css": "p { background:yellow; }", "inhead": "", "html": "<p> is what I said...</p>", "exampleId": "115iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").before(\"<b>Hello</b>\");\n });\n</script>\n<style>\np { background:yellow; }\n</style>\n</head>\n<body>\n<p> is what I said...</p>\n</body>\n</html>"}, {"code": "$(\"p\").before( document.createTextNode(\"Hello\") );", "htmlCode": "$(\"p\").before( document.createTextNode(\"Hello\") );", "desc": "Inserts a DOM element before all paragraphs.", "css": "p { background:yellow; }", "inhead": "", "html": "<p> is what I said...</p>", "exampleId": "115iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").before( document.createTextNode(\"Hello\") );\n });\n</script>\n<style>\np { background:yellow; }\n</style>\n</head>\n<body>\n<p> is what I said...</p>\n</body>\n</html>"}, {"code": "$(\"p\").before( $(\"b\") );", "htmlCode": "$(\"p\").before( $(\"b\") );", "desc": "Inserts a jQuery object (similar to an Array of DOM Elements) before all paragraphs.", "css": "p { background:yellow; }", "inhead": "", "html": "<p> is what I said...</p><b>Hello</b>", "exampleId": "115iframeExample2", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").before( $(\"b\") );\n });\n</script>\n<style>\np { background:yellow; }\n</style>\n</head>\n<body>\n<p> is what I said...</p><b>Hello</b>\n</body>\n</html>"}]}, "insertafter116": {"id": 116, "searchname": "insertafter", "name": "insertAfter", "type": "function", "category": "Manipulation", "subcategory": "Inserting Outside", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Insert all of the matched elements after another, specified, set of elements.", "longdesc": "<p>This operation is, essentially, the reverse of doing a regular $(A).after(B), in that instead of inserting B after A, you're inserting A after B.</p>", "params": [{"optional": false, "name": "content", "type": "String", "desc": "Content after which the selected element(s) is inserted."}], "examples": [{"code": "$(\"p\").insertAfter(\"#foo\"); // check after() examples", "htmlCode": "$(\"p\").insertAfter(\"#foo\"); // check after() examples", "desc": "Inserts all paragraphs after an element with id of \"foo\". Same as $(\"#foo\").after(\"p\")", "css": "#foo { background:yellow; }", "inhead": "", "html": "<p> is what I said... </p><div id=\"foo\">FOO!</div>", "exampleId": "116iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").insertAfter(\"#foo\"); // check after() examples\n });\n</script>\n<style>\n#foo { background:yellow; }\n</style>\n</head>\n<body>\n<p> is what I said... </p><div id=\"foo\">FOO!</div>\n</body>\n</html>"}]}, "insertbefore117": {"id": 117, "searchname": "insertbefore", "name": "insertBefore", "type": "function", "category": "Manipulation", "subcategory": "Inserting Outside", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Insert all of the matched elements before another, specified, set of elements.", "longdesc": "<p>This operation is, essentially, the reverse of doing a regular $(A).before(B), in that instead of inserting B before A, you're inserting A before B.</p>", "params": [{"optional": false, "name": "content", "type": "String", "desc": "Content after which the selected element(s) is inserted."}], "examples": [{"code": "$(\"p\").insertBefore(\"#foo\"); // check before() examples", "htmlCode": "$(\"p\").insertBefore(\"#foo\"); // check before() examples", "desc": "Inserts all paragraphs before an element with id of \"foo\". Same as $(\"#foo\").before(\"p\")", "css": "#foo { background:yellow; }", "inhead": "", "html": "<div id=\"foo\">FOO!</div><p>I would like to say: </p>", "exampleId": "117iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").insertBefore(\"#foo\"); // check before() examples\n });\n</script>\n<style>\n#foo { background:yellow; }\n</style>\n</head>\n<body>\n<div id=\"foo\">FOO!</div><p>I would like to say: </p>\n</body>\n</html>"}]}, "wrap118": {"id": 118, "searchname": "wrap", "name": "wrap", "type": "function", "category": "Manipulation", "subcategory": "Inserting Around", "return": "jQuery", "added": "", "sample": "", "desc": "Wrap each matched element with the specified HTML content.", "longdesc": "<p>This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document.</p><p>This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest ancestor element within its structure -- it is that element that will enwrap everything else.</p>", "params": [{"optional": false, "name": "html", "type": "String", "desc": "A string of HTML that will be created on the fly and wrapped around each target."}], "examples": [{"code": "$(\"p\").wrap(\"<div></div>\");", "htmlCode": "$(\"p\").wrap(\"<div></div>\");", "desc": "Wrap a new div around all of the paragraphs.", "css": "\n div { border: 2px solid blue; }\n p { background:yellow; margin:4px; }\n ", "inhead": "", "html": "<p>Hello</p>\n <p>cruel</p>\n <p>World</p>", "exampleId": "118iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").wrap(\"<div></div>\");\n });\n</script>\n<style>\n\n div { border: 2px solid blue; }\n p { background:yellow; margin:4px; }\n \n</style>\n</head>\n<body>\n<p>Hello</p>\n <p>cruel</p>\n <p>World</p>\n</body>\n</html>"}, {"code": "$(\"span\").wrap(\"<div><div><p><em><b></b></em></p></div></div>\");", "htmlCode": "$(\"span\").wrap(\"<div><div><p><em><b></b></em></p></div></div>\");", "desc": "Wraps a newly created tree of objects around the spans. Notice anything in between the spans gets left out like the <strong> (red text) in this example. Even the white space between spans is left out. Click View Source to see the original html.", "css": "\n div { border:2px blue solid; margin:2px; padding:2px; }\n p { background:yellow; margin:2px; padding:2px; }\n strong { color:red; }\n ", "inhead": "", "html": "<span>Span Text</span>\n <strong>What about me?</strong>\n <span>Another One</span>", "exampleId": "118iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n&
10000
nbsp; \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"span\").wrap(\"<div><div><p><em><b></b></em></p></div></div>\");\n });\n</script>\n<style>\n\n div { border:2px blue solid; margin:2px; padding:2px; }\n p { background:yellow; margin:2px; padding:2px; }\n strong { color:red; }\n \n</style>\n</head>\n<body>\n<span>Span Text</span>\n <strong>What about me?</strong>\n <span>Another One</span>\n</body>\n</html>"}]}, "wrap119": {"id": 119, "searchname": "wrap", "name": "wrap", "type": "function", "category": "Manipulation", "subcategory": "Inserting Around", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Wrap each matched element with the specified element.", "longdesc": "", "params": [{"optional": false, "name": "elem", "type": "Element", "desc": "A DOM element that will be wrapped around each target."}], "examples": [{"code": "$(\"p\").wrap(document.createElement(\"div\"));", "htmlCode": "$(\"p\").wrap(document.createElement(\"div\"));", "desc": "Wrap a new div around all of the paragraphs.", "css": "\n div { border: 2px solid blue; }\n p { background:yellow; margin:4px; }\n ", "inhead": "", "html": "<p>Hello</p>\n <p>cruel</p>\n <p>World</p>", "exampleId": "119iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").wrap(document.createElement(\"div\"));\n });\n</script>\n<style>\n\n div { border: 2px solid blue; }\n p { background:yellow; margin:4px; }\n \n</style>\n</head>\n<body>\n<p>Hello</p>\n <p>cruel</p>\n <p>World</p>\n</body>\n</html>"}, {"code": "$(\"p\").wrap($(\".doublediv\"));", "htmlCode": "$(\"p\").wrap($(\".doublediv\"));", "desc": "Wrap a jQuery object double depth div around all of the paragraphs. Notice it doesn't move the object but just clones it to wrap around its target.", "css": "\n div { border: 2px solid blue; margin:2px; padding:2px; }\n .doublediv { border-color:red; }\n p { background:yellow; margin:4px; font-size:14px; }\n ", "inhead": "", "html": "<p>Hello</p>\n <p>cruel</p>\n <p>World</p>\n <div class=\"doublediv\"><div></div></div>", "exampleId": "119iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").wrap($(\".doublediv\"));\n });\n</script>\n<style>\n\n div { border: 2px solid blue; margin:2px; padding:2px; }\n .doublediv { border-color:red; }\n p { background:yellow; margin:4px; font-size:14px; }\n \n</style>\n</head>\n<body>\n<p>Hello</p>\n <p>cruel</p>\n <p>World</p>\n <div class=\"doublediv\"><div></div></div>\n</body>\n</html>"}]}, "wrapall120": {"id": 120, "searchname": "wrapall", "name": "wrapAll", "type": "function", "category": "Manipulation", "subcategory": "Inserting Around", "return": "jQuery", "added": "1.2", "sample": "", "desc": "Wrap all the elements in the matched set into a single wrapper element.", "longdesc": "<p>This is different from <a href='Manipulation/wrap'>.wrap()</a> where each element in the matched set would get wrapped with an element.</p><p>This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document.</p><p>This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest ancestor element within its structure -- it is that element that will enwrap everything else.</p>", "params": [{"optional": false, "name": "html", "type": "String", "desc": "A string of HTML that will be created on the fly and wrapped around the target."}], "examples": [{"code": "$(\"p\").wrapAll(\"<div></div>\");", "htmlCode": "$(\"p\").wrapAll(\"<div></div>\");", "desc": "Wrap a new div around all of the paragraphs.", "css": "\n div { border: 2px solid blue; }\n p { background:yellow; margin:4px; }\n ", "inhead": "", "html": "<p>Hello</p>\n <p>cruel</p>\n <p>World</p>", "exampleId": "120iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").wrapAll(\"<div></div>\");\n });\n</script>\n<style>\n\n div { border: 2px solid blue; }\n p { background:yellow; margin:4px; }\n \n</style>\n</head>\n<body>\n<p>Hello</p>\n <p>cruel</p>\n <p>World</p>\n</body>\n</html>"}, {"code": "$(\"span\").wrapAll(\"<div><div><p><em><b></b></em></p></div></div>\");", "htmlCode": "$(\"span\").wrapAll(\"<div><div><p><em><b></b></em></p></div></div>\");", "desc": "Wraps a newly created tree of objects around the spans. Notice anything in between the spans gets left out like the <strong> (red text) in this example. Even the white space between spans is left out. Click View Source to see the original html.", "css": "\n div { border:2px blue solid; margin:2px; padding:2px; }\n p { background:yellow; margin:2px; padding:2px; }\n strong { color:red; }\n ", "inhead": "", "html": "<span>Span Text</span>\n <strong>What about me?</strong>\n <span>Another One</span>", "exampleId": "120iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"span\").wrapAll(\"<div><div><p><em><b></b></em></p></div></div>\");\n });\n</script>\n<style>\n\n div { border:2px blue solid; margin:2px; padding:2px; }\n p { background:yellow; margin:2px; padding:2px; }\n strong { color:red; }\n \n</style>\n</head>\n<body>\n<span>Span Text</span>\n <strong>What about me?</strong>\n <span>Another One</span>\n</body>\n</html>"}]}, "wrapall121": {"id": 121, "searchname": "wrapall", "name": "wrapAll", "type": "function", "category": "Manipulation", "subcategory": "Inserting Around", "return": "jQuery", "added": "1.2", "sample": "", "desc": "Wrap all the elements in the matched set into a single wrapper element.", "longdesc": "<p>This is different from <a href='Manipulation/wrap'>.wrap()</a> where each element in the matched set would get wrapped with an element.</p>", "params": [{"optional": false, "name": "elem", "type": "Element", "desc": "A DOM element that will be wrapped around the target."}], "examples": [{"code": "$(\"p\").wrapAll(document.createElement(\"div\"));", "htmlCode": "$(\"p\").wrapAll(document.createElement(\"div\"));", "desc": "Wrap a new div around all of the paragraphs.", "css": "\n div { border: 2px solid blue; }\n p { background:yellow; margin:4px; }\n ", "inhead": "", "html": "<p>Hello</p>\n <p>cruel</p>\n <p>World</p>", "exampleId": "121iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").wrapAll(document.createElement(\"div\"));\n });\n</script>\n<style>\n\n div { border: 2px solid blue; }\n p { background:yellow; margin:4px; }\n \n</style>\n</head>\n<body>\n<p>Hello</p>\n <p>cruel</p>\n <p>World</p>\n</body>\n</html>"}, {"code": "$(\"p\").wrapAll($(\".doublediv\"));", "htmlCode": "$(\"p\").wrapAll($(\".doublediv\"));", "desc": "Wrap a jQuery object double depth div around all of the paragraphs. Notice it doesn't move the object but just clones it to wrap around its target.", "css": "\n div { border: 2px solid blue; margin:2px; padding:2px; }\n .doublediv { border-color:red; }\n p { background:yellow; margin:4px; font-size:14px; }\n ", "inhead": "", "html": "<p>Hello</p>\n <p>cruel</p>\n <p>World</p>\n <div class=\"doublediv\"><div></div></div>", "exampleId": "121iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").wrapAll($(\".doublediv\"));\n });\n</script>\n<style>\n\n div { border: 2px solid blue; margin:2px; padding:2px; }\n .doublediv { border-color:red; }\n p { background:yellow; margin:4px; font-size:14px; }\n \n</style>\n</head>\n<body>\n<p>Hello</p>\n <p>cruel</p>\n <p>World</p>\n <div class=\"doublediv\"><div></div></div>\n</body>\n</html>"}]}, "wrapinner122": {"id": 122, "searchname": "wrapinner", "name": "wrapInner", "type": "function", "category": "Manipulation", "subcategory": "Inserting Around", "return": "jQuery", "added": "1.2", "sample": "", "desc": "Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.", "longdesc": "<p>This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document.</p><p>This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest ancestor element within its structure -- it is that element that will enwrap everything else.</p>", "params": [{"optional": false, "name": "html", "type": "String", "desc": "A string of HTML that will be created on the fly and wrapped around the target."}], "examples": [{"code": "$(\"p\").wrapInner(\"<b></b>\");", "htmlCode": "$(\"p\").wrapInner(\"<b></b>\");", "desc": "Selects all paragraphs and wraps a bold tag around each of its contents.", "css": "p { background:#bbf; }", "inhead": "", "html": "<p>Hello</p>\n <p>cruel</p>\n <p>World</p>", "exampleId": "122iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").wrapInner(\"<b></b>\");\n });\n</script>\n<style>\np { background:#bbf; }\n</style>\n</head>\n<body>\n<p>Hello</p>\n <p>cruel</p>\n <p>World</p>\n</body>\n</html>"}, {"code": "$(\"body\").wrapInner(\"<div><div><p><em><b></b></em></p></div></div>\");", "htmlCode": "$(\"body\").wrapInner(\"<div><div><p><em><b></b></em></p></div></div>\");", "desc": "Wraps a newly created tree of objects around the inside of the body.", "css": "\n div { border:2px green solid; margin:2px; padding:2px; }\n p { background:yellow; margin:2px; padding:2px; }\n ", "inhead": "", "html": "Plain old text, or is it?", "exampleId": "122iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"body\").wrapInner(\"<div><div><p><em><b></b></em></p></div></div>\");\n });\n</script>\n<style>\n\n div { border:2px green solid; margin:2px; padding:2px; }\n p { background:yellow; margin:2px; padding:2px; }\n \n</style>\n</head>\n<body>\nPlain old text, or is it?\n</body>\n</html>"}]}, "wrapinner123": {"id": 123, "searchname": "wrapinner", "name": "wrapInner", "type": "function", "category": "Manipulation", "subcategory": "Inserting Around", "return": "jQuery", "added": "1.2", "sample": "", "desc": "Wrap the inner child contents of each matched element (including text nodes) with a DOM element.", "longdesc": "", "params": [{"optional": false, "name": "elem", "type": "Element", "desc": "A DOM element that will be wrapped around the target."}], "examples": [{"code": "$(\"p\").wrapInner(document.createElement(\"b\"));", "htmlCode": "$(\"p\").wrapInner(document.createElement(\"b\"));", "desc": "Selects all paragraphs and wraps a bold tag around each of its contents.", "css": "p { background:#9f9; }", "inhead": "", "html": "<p>Hello</p>\n <p>cruel</p>\n <p>World</p>", "exampleId": "123iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").wrapInner(document.createElement(\"b\"));\n });\n</script>\n<style>\np { background:#9f9; }\n</style>\n</head>\n<body>\n<p>Hello</p>\n <p>cruel</p>\n <p>World</p>\n</body>\n</html>"}, {"code": "$(\"p\").wrapInner($(\"<span class='red'></span>\"));", "htmlCode": "$(\"p\").wrapInner($(\"<span class='red'></span>\"));", "desc": "Selects all paragraphs and wraps a jQuery object around each of its contents.", "css": "\n p { background:#9f9; }\n .red { color:red; }\n ", "inhead": "", "html": "<p>Hello</p>\n <p>cruel</p>\n <p>World</p>", "exampleId": "123iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").wrapInner($(\"<span class='red'></span>\"));\n });\n</script>\n<style>\n\n p { background:#9f9; }\n .red { color:red; }\n \n</style>\n</head>\n<body>\n<p>Hello</p>\n <p>cruel</p>\n <p>World</p>\n</body>\n</html>"}]}, "replacewith124": {"id": 124, "searchname": "replacewith", "name": "replaceWith", "type": "function", "category": "Manipulation", "subcategory": "Replacing", "return": "jQuery", "added": "1.2", "sample": "", "desc": "Replaces all matched elements with the specified HTML or DOM elements.", "longdesc": "", "params": [{"optional": false, "name": "content", "type": "String, Element, jQuery", "desc": "Content to replace the matched elements with."}], "examples": [{"code": "\n $(\"button\").click(function () {\n $(this).replaceWith(\"<div>\" + $(this).text() + \"</div>\");\n });\n", "htmlCode": "\n $(\"button\").click(function () {\n $(this).replaceWith(\"<div>\" + $(this).text() + \"</div>\");\n });\n", "desc": "On click, replace the button with a div containing the same word.", "css": "\n button { display:block; margin:3px; color:red; width:200px; }\n div { color:red; border:2px solid blue; width:200px; \n margin:3px; text-align:center; }\n ", "inhead": "", "html": "<button>First</button>\n <button>Second</button>\n <button>Third</button>", "exampleId": "124iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"button\").click(function () {\n $(this).replaceWith(\"<div>\" + $(this).text() + \"</div>\");\n });\n\n });\n</script>\n<style>\n\n button { display:block; margin:3px; color:red; width:200px; }\n div { color:red; border:2px solid blue; width:200px; \n margin:3px; text-align:center; }\n \n</style>\n</head>\n<body>\n<button>First</button>\n <button>Second</button>\n <button>Third</button>\n</body>\n</html>"}, {"code": "$(\"p\").replaceWith(\"<b>Paragraph. </b>\");", "htmlCode": "$(\"p\").replaceWith(\"<b>Paragraph. </b>\");", "desc": "Replace all the paragraphs with bold words.", "css": "", "inhead": "", "html": "<p>Hello</p>\n <p>cruel</p>\n <p>World</p>", "exampleId": "124iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").replaceWith(\"<b>Paragraph. </b>\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<p>Hello</p>\n <p>cruel</p>\n <p>World</p>\n</body>\n</html>"}, {"code": "$(\"p\").replaceWith(document.createElement(\"div\"));", "htmlCode": "$(\"p\").replaceWith(document.createElement(\"div\"));", "desc": "Replace all the paragraphs with empty div elements.", "css": "\n div { border:2px solid blue; margin:3px; }\n ", "inhead": "", "html": "<p>Hello</p>\n <p>cruel</p>\n <p>World</p>", "exampleId": "124iframeExample2", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").replaceWith(document.createElement(\"div\"));\n });\n</script>\n<style>\n\n div { border:2px solid blue; margin:3px; }\n \n</style>\n</head>\n<body>\n<p>Hello</p>\n <p>cruel</p>\n <p>World</p>\n</body>\n</html>"}, {"code": "\n $(\"p\").click(function () {\n $(this).replaceWith($(\"div\"));\n });\n", "htmlCode": "\n $(\"p\").click(function () {\n $(this).replaceWith($(\"div\"));\n });\n", "desc": "On click, replace each paragraph with a jQuery div object that is already in the DOM. Notice it doesn't clone the object but rather moves it to replace the paragraph.", "css": "\n div { border:2px solid blue; color:red; margin:3px; }\n p { border:2px solid red; color:blue; margin:3px; cursor:pointer; }\n ", "inhead": "", "html": "<p>Hello</p>\n <p>cruel</p>\n <p>World</p>\n <div>Replaced!</div>", "exampleId": "124iframeExample3", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"p\").click(function () {\n $(this).replaceWith($(\"div\"));\n });\n\n });\n</script>\n<style>\n\n div { border:2px solid blue; color:red; margin:3px; }\n p { border:2px solid red; color:blue; margin:3px; cursor:pointer; }\n \n</style>\n</head>\n<body>\n<p>Hello</p>\n <p>cruel</p>\n <p>World</p>\n <div>Replaced!</div>\n</body>\n</html>"}]}, "replaceall125": {"id": 125, "searchname": "replaceall", "name": "replaceAll", "type": "function", "category": "Manipulation", "subcategory": "Replacing", "return": "jQuery", "added": "1.2", "sample": "", "desc": "Replaces the elements matched by the specified selector with the matched elements.", "longdesc": "<p>This function is the complement to replaceWith() which does the same task with the parameters reversed.</p>", "params": [{"optional": false, "name": "selector", "type": "Selector", "desc": "The elements to find and replace the matched elements with."}], "examples": [{"code": "$(\"<b>Paragraph. </b>\").replaceAll(\"p\"); // check replaceWith() examples", "htmlCode": "$(\"<b>Paragraph. </b>\").replaceAll(\"p\"); // check replaceWith() examples", "desc": "Replace all the paragraphs with bold words.", "css": "", "inhead": "", "html": "<p>Hello</p>\n <p>cruel</p>\n <p>World</p>", "exampleId": "125iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"<b>Paragraph. </b>\").replaceAll(\"p\"); // check replaceWith() examples\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<p>Hello</p>\n <p>cruel</p>\n <p>World</p>\n</body>\n</html>"}]}, "empty126": {"id": 126, "searchname": "empty", "name": "empty", "type": "function", "category": "Manipulation", "subcategory": "Removing", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Remove all child nodes from the set of matched elements.", "longdesc": "<p>Note that this function starting with 1.2.2 will also remove all event handlers and internally cached data.</p>", "params": [], "examples": [{"code": "\n $(\"button\").click(function () {\n $(\"p\").empty();\n });\n", "htmlCode": "\n $(\"button\").click(function () {\n $(\"p\").empty();\n });\n", "desc": "Removes all child nodes (including text nodes) from all paragraphs", "css": "\n p { background:yellow; }\n ", "inhead": "", "html": "<p>\n Hello, <span>Person</span> <a href=\"javascript:;\">and person</a>\n </p>\n <button>Call empty() on above paragraph</button>", "exampleId": "126iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"button\").click(function () {\n $(\"p\").empty();\n });\n\n });\n</script>\n<style>\n\n p { background:yellow; }\n \n</style>\n</head>\n<body>\n<p>\n Hello, <span>Person</span> <a href=\"javascript:;\">and person</a>\n </p>\n <button>Call empty() on above paragraph</button>\n</body>\n</html>"}]}, "remove127": {"id": 127, "searchname": "remove", "name": "remove", "type": "function", "category": "Manipulation", "subcategory": "Removing", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Removes all matched elements from the DOM. ", "longdesc": "<p>This does NOT remove them from the jQuery object, allowing you to use the matched elements further. Note that this function starting with 1.2.2 will also remove all event handlers and internally cached data. So:</p><p><code>\n$(\"#foo\").remove().appendTo(\"#bar\");\n</code></p><p>should be written as</p><p><code>\n$(\"#foo\").appendTo(\"#bar\");\n</code></p><p>to avoid losing the event handlers.</p><p>Can be filtered with an optional expression.</p>", "params": [{"optional": true, "name": "expr", "type": "String", "desc": "A jQuery expression to filter the set of elements to be removed."}], "examples": [{"code": "\n $(\"button\").click(function () {\n $(\"p\").remove();\n });\n", "htmlCode": "\n $(\"button\").click(function () {\n $(\"p\").remove();\n });\n", "desc": "Removes all paragraphs from the DOM", "css": "p { background:yellow; margin:6px 0; }", "inhead": "", "html": "<p>Hello</p> \n how are \n <p>you?</p>\n <button>Call remove() on paragraphs", "exampleId": "127iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"button\").click(function () {\n $(\"p\").remove();\n });\n\n });\n</script>\n<style>\np { background:yellow; margin:6px 0; }\n</style>\n</head>\n<body>\n<p>Hello</p> \n how are \n <p>you?</p>\n <button>Call remove() on paragraphs\n</body>\n</html>"}, {"code": "\n $(\"button\").click(function () {\n $(\"p\").remove(\":contains('Hello')\");\n });\n\n", "htmlCode": "\n $(\"button\").click(function () {\n $(\"p\").remove(\":contains('Hello')\");\n });\n\n", "desc": "Removes all paragraphs that contain \"Hello\" from the DOM", "css": "p { background:yellow; margin:6px 0; }", "inhead": "", "html": "<p class=\"hello\">Hello</p>\n how are \n <p>you?</p>\n <button>Call remove(\":contains('Hello')\") on paragraphs", "exampleId": "127iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"button\").click(function () {\n $(\"p\").remove(\":contains('Hello')\");\n });\n\n\n });\n</script>\n<style>\np { background:yellow; margin:6px 0; }\n</style>\n</head>\n<body>\n<p class=\"hello\">Hello</p>\n how are \n <p>you?</p>\n <button>Call remove(\":contains('Hello')\") on paragraphs\n</body>\n</html>"}]}, "clone128": {"id": 128, "searchname": "clone", "name": "clone", "type": "function", "category": "Manipulation", "subcategory": "Copying", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Clone matched DOM Elements and select the clones.", "longdesc": "<p>This is useful for moving copies of the elements to another location in the DOM.</p>", "params": [], "examples": [{"code": "$(\"b\").clone().prependTo(\"p\");", "htmlCode": "$(\"b\").clone().prependTo(\"p\");", "desc": "Clones all b elements (and selects the clones) and prepends them to all paragraphs.", "css": "", "inhead": "", "html": "<b>Hello</b><p>, how are you?</p>", "exampleId": "128iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"b\").clone().prependTo(\"p\");\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<b>Hello</b><p>, how are you?</p>\n</body>\n</html>"}]}, "clone129": {"id": 129, "searchname": "clone", "name": "clone", "type": "function", "category": "Manipulation", "subcategory": "Copying", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Clone matched DOM Elements, and all their event handlers, and select the clones.", "longdesc": "<p>This is useful for moving copies of the elements, and their events, to another location in the DOM.</p>", "params": [{"optional": false, "name": "true", "type": "Boolean", "desc": "Set to true to enable cloning of event handlers."}], "examples": [{"code": "\n $(\"button\").click(function(){\n $(this).clone(true).insertAfter(this);\n });\n", "htmlCode": "\n $(\"button\").click(function(){\n $(this).clone(true).insertAfter(this);\n });\n", "desc": "Create a button that's able to clone itself - and have the clones themselves be clonable.", "css": "", "inhead": "", "html": "<button>Clone Me!</button>", "exampleId": "129iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"button\").click(function(){\n $(this).clone(true).insertAfter(this);\n });\n\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<button>Clone Me!</button>\n</body>\n</html>"}]}, "css130": {"id": 130, "searchname": "css", "name": "css", "type": "function", "category": "CSS", "subcategory": "CSS", "return": "String", "added": "1.0", "sample": "", "desc": "Return a style property on the first matched element.", "longdesc": "", "params": [{"optional": false, "name": "name", "type": "String", "desc": "The name of the property to access."}], "examples": [{"code": "\n $(\"div\").click(function () {\n var color = $(this).css(\"background-color\");\n $(\"#result\").html(\"That div is <span style='color:\" +\n color + \";'>\" + color + \"</span>.\");\n });\n", "htmlCode": "\n $(\"div\").click(function () {\n var color = $(this).css(\"background-color\");\n $(\"#result\").html(\"That div is <span style='color:\" +\n color + \";'>\" + color + \"</span>.\");\n });\n", "desc": "To access the background color of a clicked div.", "css": "\n div { width:60px; height:60px; margin:5px; float:left; }\n ", "inhead": "", "html": "<span id=\"result\"> </span>\n <div style=\"background-color:blue;\"></div>\n <div style=\"background-color:rgb(15,99,30);\"></div>\n <div style=\"background-color:#123456;\"></div>\n <div style=\"background-color:#f11;\"></div>", "exampleId": "130iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div\").click(function () {\n var color = $(this).css(\"background-color\");\n $(\"#result\").html(\"That div is <span style='color:\" +\n color + \";'>\" + color + \"</span>.\");\n });\n\n });\n</script>\n<style>\n\n div { width:60px; height:60px; margin:5px; float:left; }\n \n</style>\n</head>\n<body>\n<span id=\"result\"> </span>\n <div style=\"background-color:blue;\"></div>\n <div style=\"background-color:rgb(15,99,30);\"></div>\n <div style=\"background-color:#123456;\"></div>\n <div style=\"background-color:#f11;\"></div>\n</body>\n</html>"}]}, "css131": {"id": 131, "searchname": "css", "name": "css", "type": "function", "category": "CSS", "subcategory": "CSS", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Set a key/value object as style properties to all matched elements.", "longdesc": "<p>This is the best way to set several style properties on all matched elements.</p>", "params": [{"optional": false, "name": "properties", "type": "Map", "desc": "Key/value pairs to set as style properties."}], "examples": [{"code": "\n $(\"p\").hover(function () {\n $(this).css({ backgroundColor:\"yellow\", fontWeight:\"bolder\" });\n }, function () {\n var cssObj = {\n backgroundColor: \"#ddd\",\n fontWeight: \"\",\n color: \"rgb(0,40,244)\"\n }\n $(this).css(cssObj);\n });\n", "htmlCode": "\n $(\"p\").hover(function () {\n $(this).css({ backgroundColor:\"yellow\", fontWeight:\"bolder\" });\n }, function () {\n var cssObj = {\n backgroundColor: \"#ddd\",\n fontWeight: \"\",\n color: \"rgb(0,40,244)\"\n }\n $(this).css(cssObj);\n });\n", "desc": "To set the color of all paragraphs to red and background to blue:", "css": "\n p { color:green; }\n ", "inhead": "", "html": "<p>\n Move the mouse over a paragraph.\n </p>\n <p>\n Like this one or the one above.\n </p>", "exampleId": "131iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"p\").hover(function () {\n $(this).css({ backgroundColor:\"yellow\", fontWeight:\"bolder\" });\n }, function () {\n var cssObj = {\n backgroundColor: \"#ddd\",\n fontWeight: \"\",\n color: \"rgb(0,40,244)\"\n }\n $(this).css(cssObj);\n });\n\n });\n</script>\n<style>\n\n p { color:green; }\n \n</style>\n</head>\n<body>\n<p>\n Move the mouse over a paragraph.\n </p>\n <p>\n Like this one or the one above.\n </p>\n</body>\n</html>"}, {"code": "\n $(\"p\").hover(function () {\n $(this).css({ \"background-color\":\"yellow\", \"font-weight\":\"bolder\" });\n }, function () {\n var cssObj = {\n \"background-color\": \"#ddd\",\n \"font-weight\": \"\",\n color: \"rgb(0,40,244)\"\n }\n $(this).css(cssObj);\n });\n", "htmlCode": "\n $(\"p\").hover(function () {\n $(this).css({ \"background-color\":\"yellow\", \"font-weight\":\"bolder\" });\n }, function () {\n var cssObj = {\n
10000
\"background-color\": \"#ddd\",\n \"font-weight\": \"\",\n color: \"rgb(0,40,244)\"\n }\n $(this).css(cssObj);\n });\n", "desc": "If the property name includes a \"-\", put it between quotation marks:", "css": "\n p { color:green; }\n ", "inhead": "", "html": "<p>\n Move the mouse over a paragraph.\n </p>\n <p>\n Like this one or the one above.\n </p>", "exampleId": "131iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"p\").hover(function () {\n $(this).css({ \"background-color\":\"yellow\", \"font-weight\":\"bolder\" });\n }, function () {\n var cssObj = {\n \"background-color\": \"#ddd\",\n \"font-weight\": \"\",\n color: \"rgb(0,40,244)\"\n }\n $(this).css(cssObj);\n });\n\n });\n</script>\n<style>\n\n p { color:green; }\n \n</style>\n</head>\n<body>\n<p>\n Move the mouse over a paragraph.\n </p>\n <p>\n Like this one or the one above.\n </p>\n</body>\n</html>"}]}, "css132": {"id": 132, "searchname": "css", "name": "css", "type": "function", "category": "CSS", "subcategory": "CSS", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Set a single style property to a value on all matched elements.", "longdesc": "<p>If a number is provided, it is automatically converted into a pixel value.</p>", "params": [{"optional": false, "name": "name", "type": "String", "desc": "The name of the property to set."}, {"optional": false, "name": "value", "type": "String, Number", "desc": "The value to set the property to."}], "examples": [{"code": "\n $(\"p\").mouseover(function () {\n $(this).css(\"color\",\"red\");\n });\n", "htmlCode": "\n $(\"p\").mouseover(function () {\n $(this).css(\"color\",\"red\");\n });\n", "desc": "To change the color of any paragraph to red on mouseover event.", "css": "\n p { color:blue; width:200px; font-size:14px; }\n ", "inhead": "", "html": "<p>\n Just roll the mouse over me.\n </p>\n <p>\n Or me to see a color change.\n </p>", "exampleId": "132iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"p\").mouseover(function () {\n $(this).css(\"color\",\"red\");\n });\n\n });\n</script>\n<style>\n\n p { color:blue; width:200px; font-size:14px; }\n \n</style>\n</head>\n<body>\n<p>\n Just roll the mouse over me.\n </p>\n <p>\n Or me to see a color change.\n </p>\n</body>\n</html>"}, {"code": "\n var words = $(\"p:first\").text().split(\" \");\n var text = words.join(\"</span> <span>\");\n $(\"p:first\").html(\"<span>\" + text + \"</span>\");\n $(\"span\").click(function () {\n $(this).css(\"background-color\",\"yellow\");\n });\n", "htmlCode": "\n var words = $(\"p:first\").text().split(\" \");\n var text = words.join(\"</span> <span>\");\n $(\"p:first\").html(\"<span>\" + text + \"</span>\");\n $(\"span\").click(function () {\n $(this).css(\"background-color\",\"yellow\");\n });\n", "desc": "To highlight a clicked word in the paragraph.", "css": "\n p { color:blue; font-weight:bold; cursor:pointer; }\n ", "inhead": "", "html": "<p>\n Once upon a time there was a man\n who lived in a pizza parlor. This\n man just loved pizza and ate it all \n the time. He went on to be the\n happiest man in the world. The end.\n </p>", "exampleId": "132iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var words = $(\"p:first\").text().split(\" \");\n var text = words.join(\"</span> <span>\");\n $(\"p:first\").html(\"<span>\" + text + \"</span>\");\n $(\"span\").click(function () {\n $(this).css(\"background-color\",\"yellow\");\n });\n\n });\n</script>\n<style>\n\n p { color:blue; font-weight:bold; cursor:pointer; }\n \n</style>\n</head>\n<body>\n<p>\n Once upon a time there was a man\n who lived in a pizza parlor. This\n man just loved pizza and ate it all \n the time. He went on to be the\n happiest man in the world. The end.\n </p>\n</body>\n</html>"}]}, "offset133": {"id": 133, "searchname": "offset", "name": "offset", "type": "function", "category": "CSS", "subcategory": "Positioning", "return": "Object{top,left}", "added": "1.2", "sample": "", "desc": "Get the current offset of the first matched element relative to the viewport.", "longdesc": "<p>The returned object contains two <a href='Types#Integer'>Integer</a> properties, top and left. The method works only with visible elements. </p>", "params": [], "examples": [{"code": "var p = $(\"p:last\");\nvar offset = p.offset();\np.html( \"left: \" + offset.left + \", top: \" + offset.top );", "htmlCode": "var p = $(\"p:last\");\nvar offset = p.offset();\np.html( \"left: \" + offset.left + \", top: \" + offset.top );", "desc": "Access the offset of the second paragraph:", "css": "\n p { margin-left:10px; }\n ", "inhead": "", "html": "<p>Hello</p><p>2nd Paragraph</p>", "exampleId": "133iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\nvar p = $(\"p:last\");\nvar offset = p.offset();\np.html( \"left: \" + offset.left + \", top: \" + offset.top );\n });\n</script>\n<style>\n\n p { margin-left:10px; }\n \n</style>\n</head>\n<body>\n<p>Hello</p><p>2nd Paragraph</p>\n</body>\n</html>"}, {"code": "\n $(\"*\", document.body).click(function (e) {\n var offset = $(this).offset();\n e.stopPropagation();\n $(\"#result\").text(this.tagName + \" coords ( \" + offset.left + \", \" +\n offset.top + \" )\");\n });\n", "htmlCode": "\n $(\"*\", document.body).click(function (e) {\n var offset = $(this).offset();\n e.stopPropagation();\n $(\"#result\").text(this.tagName + \" coords ( \" + offset.left + \", \" +\n offset.top + \" )\");\n });\n", "desc": "Click to see the offset.", "css": "\n p { margin-left:10px; color:blue; width:200px; \n cursor:pointer; }\n span { color:red; cursor:pointer; }\n div.abs { width:50px; height:50px; position:absolute;\n left:220px; top:35px; background-color:green; \n cursor:pointer; }\n ", "inhead": "", "html": "<div id=\"result\">Click an element.</div>\n <p>\n This is the best way to <span>find</span> an offset.\n </p>\n <div class=\"abs\">\n </dov>\n ", "exampleId": "133iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"*\", document.body).click(function (e) {\n var offset = $(this).offset();\n e.stopPropagation();\n $(\"#result\").text(this.tagName + \" coords ( \" + offset.left + \", \" +\n offset.top + \" )\");\n });\n\n });\n</script>\n<style>\n\n p { margin-left:10px; color:blue; width:200px; \n cursor:pointer; }\n span { color:red; cursor:pointer; }\n div.abs { width:50px; height:50px; position:absolute;\n left:220px; top:35px; background-color:green; \n cursor:pointer; }\n \n</style>\n</head>\n<body>\n<div id=\"result\">Click an element.</div>\n <p>\n This is the best way to <span>find</span> an offset.\n </p>\n <div class=\"abs\">\n </dov>\n \n</body>\n</html>"}]}, "height134": {"id": 134, "searchname": "height", "name": "height", "type": "function", "category": "CSS", "subcategory": "Height and Width", "return": "Integer", "added": "1.0", "sample": "", "desc": "Get the current computed, pixel, height of the first matched element.", "longdesc": "<p>In jQuery 1.2, this method is able to find the height of the window and document.</p>", "params": [], "examples": [{"code": "\n function showHeight(ele, h) {\n $(\"div\").text(\"The height for the \" + ele + \n \" is \" + h + \"px.\");\n }\n $(\"#getp\").click(function () { \n showHeight(\"paragraph\", $(\"p\").height()); \n });\n $(\"#getd\").click(function () { \n showHeight(\"document\", $(document).height()); \n });\n $(\"#getw\").click(function () { \n showHeight(\"window\", $(window).height()); \n });\n", "htmlCode": "\n function showHeight(ele, h) {\n $(\"div\").text(\"The height for the \" + ele + \n \" is \" + h + \"px.\");\n }\n $(\"#getp\").click(function () { \n showHeight(\"paragraph\", $(\"p\").height()); \n });\n $(\"#getd\").click(function () { \n showHeight(\"document\", $(document).height()); \n });\n $(\"#getw\").click(function () { \n showHeight(\"window\", $(window).height()); \n });\n", "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.", "css": "\n body { background:yellow; }\n button { font-size:12px; margin:2px; }\n p { width:150px; border:1px red solid; }\n div { color:red; font-weight:bold; }\n ", "inhead": "", "html": "<button id=\"getp\">Get Paragraph Height</button>\n <button id=\"getd\">Get Document Height</button>\n <button id=\"getw\">Get Window Height</button>\n <div> </div>\n <p>\n Sample paragraph to test height\n </p>", "exampleId": "134iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n function showHeight(ele, h) {\n $(\"div\").text(\"The height for the \" + ele + \n \" is \" + h + \"px.\");\n }\n $(\"#getp\").click(function () { \n showHeight(\"paragraph\", $(\"p\").height()); \n });\n $(\"#getd\").click(function () { \n showHeight(\"document\", $(document).height()); \n });\n $(\"#getw\").click(function () { \n showHeight(\"window\", $(window).height()); \n });\n\n });\n</script>\n<style>\n\n body { background:yellow; }\n button { font-size:12px; margin:2px; }\n p { width:150px; border:1px red solid; }\n div { color:red; font-weight:bold; }\n \n</style>\n</head>\n<body>\n<button id=\"getp\">Get Paragraph Height</button>\n <button id=\"getd\">Get Document Height</button>\n <button id=\"getw\">Get Window Height</button>\n <div> </div>\n <p>\n Sample paragraph to test height\n </p>\n</body>\n</html>"}]}, "height135": {"id": 135, "searchname": "height", "name": "height", "type": "function", "category": "CSS", "subcategory": "Height and Width", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Set the CSS height of every matched element.", "longdesc": "<p>If no explicit unit was specified (like 'em' or '%') then \"px\" is concatenated to the value.</p>", "params": [{"optional": false, "name": "val", "type": "String, Number", "desc": "Set the CSS 'height' property to the specified value."}], "examples": [{"code": "\n $(\"div\").one('click', function () {\n $(this).height(30)\n .css({cursor:\"auto\", backgroundColor:\"green\"});\n });\n", "htmlCode": "\n $(\"div\").one('click', function () {\n $(this).height(30)\n .css({cursor:\"auto\", backgroundColor:\"green\"});\n });\n", "desc": "To set the height of each div on click to 30px plus a color change.", "css": "\n div { width:50px; height:70px; float:left; margin:5px;\n background:rgb(255,140,0); cursor:pointer; }\n ", "inhead": "", "html": "<div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>", "exampleId": "135iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div\").one('click', function () {\n $(this).height(30)\n .css({cursor:\"auto\", backgroundColor:\"green\"});\n });\n\n });\n</script>\n<style>\n\n div { width:50px; height:70px; float:left; margin:5px;\n background:rgb(255,140,0); cursor:pointer; }\n \n</style>\n</head>\n<body>\n<div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n</body>\n</html>"}]}, "width136": {"id": 136, "searchname": "width", "name": "width", "type": "function", "category": "CSS", "subcategory": "Height and Width", "return": "Integer", "added": "1.0", "sample": "", "desc": "Get the current computed, pixel, width of the first matched element.", "longdesc": "<p>In jQuery 1.2, this method is able to find the width of the window and document.</p>", "params": [], "examples": [{"code": "\n function showWidth(ele, w) {\n $(\"div\").text(\"The width for the \" + ele + \n \" is \" + w + \"px.\");\n }\n $(\"#getp\").click(function () { \n showWidth(\"paragraph\", $(\"p\").width()); \n });\n $(\"#getd\").click(function () { \n showWidth(\"document\", $(document).width()); \n });\n $(\"#getw\").click(function () { \n showWidth(\"window\", $(window).width()); \n });\n", "htmlCode": "\n function showWidth(ele, w) {\n $(\"div\").text(\"The width for the \" + ele + \n \" is \" + w + \"px.\");\n }\n $(\"#getp\").click(function () { \n showWidth(\"paragraph\", $(\"p\").width()); \n });\n $(\"#getd\").click(function () { \n showWidth(\"document\", $(document).width()); \n });\n $(\"#getw\").click(function () { \n showWidth(\"window\", $(window).width()); \n });\n", "desc": "Show various widths. Note the values are from the iframe so might be smaller than you expected. The yellow highlight shows the iframe body.", "css": "\n body { background:yellow; }\n button { font-size:12px; margin:2px; }\n p { width:150px; border:1px red solid; }\n div { color:red; font-weight:bold; }\n ", "inhead": "", "html": "<button id=\"getp\">Get Paragraph Width</button>\n <button id=\"getd\">Get Document Width</button>\n <button id=\"getw\">Get Window Width</button>\n <div> </div>\n <p>\n Sample paragraph to test width\n </p>", "exampleId": "136iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n function showWidth(ele, w) {\n $(\"div\").text(\"The width for the \" + ele + \n \" is \" + w + \"px.\");\n }\n $(\"#getp\").click(function () { \n showWidth(\"paragraph\", $(\"p\").width()); \n });\n $(\"#getd\").click(function () { \n showWidth(\"document\", $(document).width()); \n });\n $(\"#getw\").click(function () { \n showWidth(\"window\", $(window).width()); \n });\n\n });\n</script>\n<style>\n\n body { background:yellow; }\n button { font-size:12px; margin:2px; }\n p { width:150px; border:1px red solid; }\n div { color:red; font-weight:bold; }\n \n</style>\n</head>\n<body>\n<button id=\"getp\">Get Paragraph Width</button>\n <button id=\"getd\">Get Document Width</button>\n <button id=\"getw\">Get Window Width</button>\n <div> </div>\n <p>\n Sample paragraph to test width\n </p>\n</body>\n</html>"}]}, "width137": {"id": 137, "searchname": "width", "name": "width", "type": "function", "category": "CSS", "subcategory": "Height and Width", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Set the CSS width of every matched element.", "longdesc": "<p>If no explicit unit was specified (like 'em' or '%') then \"px\" is concatenated to the value.</p>", "params": [{"optional": false, "name": "val", "type": "String, Number", "desc": "Set the CSS 'width' property to the specified value."}], "examples": [{"code": "\n $(\"div\").one('click', function () {\n $(this).width(30)\n .css({cursor:\"auto\", \"background-color\":\"blue\"});\n });\n", "htmlCode": "\n $(\"div\").one('click', function () {\n $(this).width(30)\n .css({cursor:\"auto\", \"background-color\":\"blue\"});\n });\n", "desc": "To set the width of each div on click to 30px plus a color change.", "css": "\n div { width:70px; height:50px; float:left; margin:5px;\n background:red; cursor:pointer; }\n ", "inhead": "", "html": "<div></div>\n <div>d</div>\n <div>d</div>\n <div>d</div>\n <div>d</div>", "exampleId": "137iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div\").one('click', function () {\n $(this).width(30)\n .css({cursor:\"auto\", \"background-color\":\"blue\"});\n });\n\n });\n</script>\n<style>\n\n div { width:70px; height:50px; float:left; margin:5px;\n background:red; cursor:pointer; }\n \n</style>\n</head>\n<body>\n<div></div>\n <div>d</div>\n <div>d</div>\n <div>d</div>\n <div>d</div>\n</body>\n</html>"}]}, "ready138": {"id": 138, "searchname": "ready", "name": "ready", "type": "function", "category": "Events", "subcategory": "Page Load", "return": "jQuery", "added": "", "sample": "", "desc": "Binds a function to be executed whenever the DOM is ready to be traversed and manipulated.", "longdesc": "<p>This is probably the most important function included in the event module, as it can greatly improve the response times of your web applications.</p><p>In a nutshell, this is a solid replacement for using window.onload, and attaching a function to that. By using this method, your bound function will be called the instant the DOM is ready to be read and manipulated, which is when what 99.99% of all JavaScript code needs to run.</p><p>There is one argument passed to the ready event handler: A reference to the jQuery function. You can name that argument whatever you like, and can therefore stick with the $ alias without risk of naming collisions.</p><p>Please ensure you have no code in your <body> onload event handler, otherwise $(document).ready() may not fire.</p><p>You can have as many $(document).ready events on your page as you like. The functions are then executed in the order they were added.</p>", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "The function to be executed when the DOM is ready.\n<pre>function callback(jQueryReference) {\n this; // document\n}\n</pre>"}], "examples": [{"code": "$(\"p\").text(\"The DOM is now loaded and can be manipulated.\");", "htmlCode": "$(\"p\").text(\"The DOM is now loaded and can be manipulated.\");", "desc": "Display a message when the DOM is loaded.", "css": "p { color:red; }", "inhead": "", "html": "<p>\n </p>", "exampleId": "138iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").text(\"The DOM is now loaded and can be manipulated.\");\n });\n</script>\n<style>\np { color:red; }\n</style>\n</head>\n<body>\n<p>\n </p>\n</body>\n</html>"}, {"code": "$(document).ready(function(){\n // Your code here...\n});", "htmlCode": "$(document).ready(function(){\n // Your code here...\n});", "desc": "To run code when the DOM loads, write:", "css": "", "inhead": "", "html": "", "exampleId": "138iframeExample1", "runCode": ""}, {"code": "jQuery(function($) {\n // Your code using failsafe $ alias here...\n});", "htmlCode": "jQuery(function($) {\n // Your code using failsafe $ alias here...\n});", "desc": "To use both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias, write:", "css": "", "inhead": "", "html": "", "exampleId": "138iframeExample2", "runCode": ""}, {"code": "$(function() {\n // Your code here...\n});", "htmlCode": "$(function() {\n // Your code here...\n});", "desc": "Commonly written as:", "css": "", "inhead": "", "html": "", "exampleId": "138iframeExample3", "runCode": ""}]}, "bind139": {"id": 139, "searchname": "bind", "name": "bind", "type": "function", "category": "Events", "subcategory": "Event Handling", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Binds a handler to one or more events (like click) for each matched element. Can also bind custom events.", "longdesc": "<p><strong>Possible event values:</strong> <code>blur</code>, <code>focus</code>, <code>load</code>, <code>resize</code>, <code>scroll</code>, <code>unload</code>, <code>click</code>, <code>dblclick</code>, <code> mousedown</code>, <code>mouseup</code>, <code>mousemove</code>, <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code>, <code>mouseleave</code>, <code>change</code>, <code>select</code>, <code> submit</code>, <code>keydown</code>, <code>keypress</code>, <code>keyup</code>, <code>error</code></p><p>The event handler is passed an event object that you can use to prevent default behaviour. To stop both default action and event bubbling, your handler has to return false. Note that this will prevent handlers on parent elements from running but not other jQuery handlers on the same element.</p><p>In most cases, you can define your event handlers as anonymous functions (see first example). In cases where that is not possible, you can pass additional data as the second parameter (and the handler function as the third), see second example.</p>", "params": [{"optional": false, "name": "type", "type": "String", "desc": "One or more event types separated by a space"}, {"optional": true, "name": "data", "type": "Object", "desc": "Additional data passed to the event handler as event.data"}, {"optional": false, "name": "fn", "type": "Function", "desc": "A function to bind to the event on each of the set of matched elements\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(\"p\").bind(\"click\", function(e){\n var str = \"( \" + e.pageX + \", \" + e.pageY + \" )\";\n $(\"span\").text(\"Click happened! \" + str);\n });\n $(\"p\").bind(\"dblclick\", function(){\n $(\"span\").text(\"Double-click happened in \" + this.tagName);\n });\n $(\"p\").bind(\"mouseenter mouseleave\", function(e){\n $(this).toggleClass(\"over\");\n });\n", "htmlCode": "\n $(\"p\").bind(\"click\", function(e){\n var str = \"( \" + e.pageX + \", \" + e.pageY + \" )\";\n $(\"span\").text(\"Click happened! \" + str);\n });\n $(\"p\").bind(\"dblclick\", function(){\n $(\"span\").text(\"Double-click happened in \" + this.tagName);\n });\n $(\"p\").bind(\"mouseenter mouseleave\", function(e){\n $(this).toggleClass(\"over\");\n });\n", "desc": "Handle click and double-click for the paragraph. Note: the coordinates are window relative so in this case relative to the demo iframe.", "css": "\n p { background:yellow; font-weight:bold; cursor:pointer; \n padding:5px; }\n p.over { background: #ccc; }\n span { color:red; }\n ", "inhead": "", "html": "<p>Click or double click here.</p>\n <span></span>", "exampleId": "139iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"p\").bind(\"click\", function(e){\n var str = \"( \" + e.pageX + \", \" + e.pageY + \" )\";\n $(\"span\").text(\"Click happened! \" + str);\n });\n $(\"p\").bind(\"dblclick\", function(){\n $(\"span\").text(\"Double-click happened in \" + this.tagName);\n });\n $(\"p\").bind(\"mouseenter mouseleave\", function(e){\n $(this).toggleClass(\"over\");\n });\n\n });\n</script>\n<style>\n\n p { background:yellow; font-weight:bold; cursor:pointer; \n padding:5px; }\n p.over { background: #ccc; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<p>Click or double click here.</p>\n <span></span>\n</body>\n</html>"}, {"code": "$(\"p\").bind(\"click\", function(){\n alert( $(this).text() );\n});", "htmlCode": "$(\"p\").bind(\"click\", function(){\n alert( $(this).text() );\n});", "desc": "To display each paragraph's text in an alert box whenever it is clicked:", "css": "", "inhead": "", "html": "", "exampleId": "139iframeExample1", "runCode": ""}, {"code": "function handler(event) {\n alert(event.data.foo);\n}\n$(\"p\").bind(\"click\", {foo: \"bar\"}, handler)", "htmlCode": "function handler(event) {\n alert(event.data.foo);\n}\n$(\"p\").bind(\"click\", {foo: \"bar\"}, handler)", "desc": "You can pass some extra data before the event handler:", "css": "", "inhead": "", "html": "", "exampleId": "139iframeExample2", "runCode": ""}, {"code": "$(\"form\").bind(\"submit\", function() { return false; })", "htmlCode": "$(\"form\").bind(\"submit\", function() { return false; })", "desc": "To cancel a default action and prevent it from bubbling up, return false:", "css": "", "inhead": "", "html": "", "exampleId": "139iframeExample3", "runCode": ""}, {"code": "$(\"form\").bind(\"submit\", function(event){\n event.preventDefault();\n});", "htmlCode": "$(\"form\").bind(\"submit\", function(event){\n event.preventDefault();\n});", "desc": "To cancel only the default action by using the preventDefault method.", "css": "", "inhead": "", "html": "", "exampleId": "139iframeExample4", "runCode": ""}, {"code": "$(\"form\").bind(\"submit\", function(event){\n event.stopPropagation();\n});", "htmlCode": "$(\"form\").bind(\"submit\", function(event){\n event.stopPropagation();\n});", "desc": "Stop only an event from bubbling by using the stopPropagation method.", "css": "", "inhead": "", "html": "", "exampleId": "139iframeExample5", "runCode": ""}, {"code": "\n $(\"p\").bind(\"myCustomEvent\", function(e, myName, myValue){\n $(this).text(myName + \", hi there!\");\n $(\"span\").stop().css(\"opacity\", 1)\n .text(\"myName = \" + myName)\n .fadeIn(30).fadeOut(1000);\n });\n $(\"button\").click(function () {\n $(\"p\").trigger(\"myCustomEvent\", [ \"John\" ]);\n });\n", "htmlCode": "\n $(\"p\").bind(\"myCustomEvent\", function(e, myName, myValue){\n $(this).text(myName + \", hi there!\");\n $(\"span\").stop().css(\"opacity\", 1)\n .text(\"myName = \" + myName)\n .fadeIn(30).fadeOut(1000);\n });\n $(\"button\").click(function () {\n $(\"p\").trigger(\"myCustomEvent\", [ \"John\" ]);\n });\n", "desc": "Can bind custom events too.", "css": "\n p { color:red; }\n span { color:blue; }\n ", "inhead": "", "html": "<p>Has an attached custom event.</p>\n <button>Trigger custom event</button>\n <span style=\"display:none;\"></span>", "exampleId": "139iframeExample6", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"p\").bind(\"myCustomEvent\", function(e, myName, myValue){\n $(this).text(myName + \", hi there!\");\n $(\"span\").stop().css(\"opacity\", 1)\n .text(\"myName = \" + myName)\n .fadeIn(30).fadeOut(1000);\n });\n $(\"button\").click(function () {\n $(\"p\").trigger(\"myCustomEvent\", [ \"John\" ]);\n });\n\n });\n</script>\n<style>\n\n p { color:red; }\n span { color:blue; }\n \n</style>\n</head>\n<body>\n<p>Has an attached custom event.</p>\n <button>Trigger custom event</button>\n <span style=\"display:none;\"></span>\n</body>\n</html>"}]}, "one140": {"id": 140, "searchname": "one", "name": "one", "type": "function", "category": "Events", "subcategory": "Event Handling", "return": "jQuery", "added": "", "sample": "", "desc": "Binds a handler to one or more events to be executed <i>once</i> for each matched element.", "longdesc": "<p>The handler is executed only once for each element. Otherwise, the same rules as described in <a href='Events/bind'>bind</a>() apply. The event handler is passed an event object that you can use to prevent default behaviour. To stop both default action and event bubbling, your handler should return false.</p><p>In most cases, you can define your event handlers as anonymous functions (see first example). In cases where that is not possible, you can pass additional data as the second paramter (and the handler function as the third), see second example.</p>", "params": [{"optional": false, "name": "type", "type": "String", "desc": "An event type"}, {"optional": true, "name": "data", "type": "Object", "desc": "Additional data passed to the event handler as event.data"}, {"optional": false, "name": "fn", "type": "Function", "desc": "A function to bind to the specifi
10000
ed event on each of the matched elements.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n var n = 0;\n $(\"div\").one(\"click\", function(){\n var index = $(\"div\").index(this);\n $(this).css({ borderStyle:\"inset\",\n cursor:\"auto\" });\n $(\"p\").text(\"Div at index #\" + index + \" clicked.\" +\n \" That's \" + ++n + \" total clicks.\");\n });\n", "htmlCode": "\n var n = 0;\n $(\"div\").one(\"click\", function(){\n var index = $(\"div\").index(this);\n $(this).css({ borderStyle:\"inset\",\n cursor:\"auto\" });\n $(\"p\").text(\"Div at index #\" + index + \" clicked.\" +\n \" That's \" + ++n + \" total clicks.\");\n });\n", "desc": "Tie a one-time click to each div.", "css": "\n div { width:60px; height:60px; margin:5px; float:left;\n background:green; border:10px outset; \n cursor:pointer; }\n p { color:red; margin:0; clear:left; }\n ", "inhead": "", "html": "<div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <p>Click a green square...</p>", "exampleId": "140iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var n = 0;\n $(\"div\").one(\"click\", function(){\n var index = $(\"div\").index(this);\n $(this).css({ borderStyle:\"inset\",\n cursor:\"auto\" });\n $(\"p\").text(\"Div at index #\" + index + \" clicked.\" +\n \" That's \" + ++n + \" total clicks.\");\n });\n\n });\n</script>\n<style>\n\n div { width:60px; height:60px; margin:5px; float:left;\n background:green; border:10px outset; \n cursor:pointer; }\n p { color:red; margin:0; clear:left; }\n \n</style>\n</head>\n<body>\n<div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <p>Click a green square...</p>\n</body>\n</html>"}, {"code": "$(\"p\").one(\"click\", function(){\n alert( $(this).text() );\n});", "htmlCode": "$(\"p\").one(\"click\", function(){\n alert( $(this).text() );\n});", "desc": "To display the text of all paragraphs in an alert box the first time each of them is clicked:", "css": "", "inhead": "", "html": "", "exampleId": "140iframeExample1", "runCode": ""}]}, "trigger141": {"id": 141, "searchname": "trigger", "name": "trigger", "type": "function", "category": "Events", "subcategory": "Event Handling", "return": "jQuery", "added": "", "sample": "", "desc": "Trigger a type of event on every matched element.", "longdesc": "<p>This will also cause the default action of the browser with the same name (if one exists) to be executed. For example, passing 'submit' to the trigger() function will also cause the browser to submit the form. This default action can be prevented by returning false from one of the functions bound to the event.</p><p>If a native event is triggered and a suitable event object is not passed as the first element of 'data', then a fake event object is added before all supplied 'data' arguments. This element contains appropriate 'type' and 'target' fields and null-op 'preventDefault' and 'stopPropagation' methods, but none of the clientXY/pageXY/keyCode fields specific to mouse and keyboard events. A \"suitable\" event object is judged by the presence of the 'preventDefault' field.</p><p>You can also trigger custom events registered with bind.</p>", "params": [{"optional": false, "name": "type ", "type": "String", "desc": "An event type to trigger."}, {"optional": true, "name": "data ", "type": "Array", "desc": "Additional data to pass as arguments (after the event object) to the event handler."}], "examples": [{"code": "\n $(\"button:first\").click(function () {\n update($(\"span:first\"));\n });\n $(\"button:last\").click(function () {\n $(\"button:first\").trigger('click');\n\n update($(\"span:last\"));\n });\n\n function update(j) {\n var n = parseInt(j.text(), 0);\n j.text(n + 1);\n }\n", "htmlCode": "\n $(\"button:first\").click(function () {\n update($(\"span:first\"));\n });\n $(\"button:last\").click(function () {\n $(\"button:first\").trigger('click');\n\n update($(\"span:last\"));\n });\n\n function update(j) {\n var n = parseInt(j.text(), 0);\n j.text(n + 1);\n }\n", "desc": "Clicks to button #2 also trigger a click for button #1.", "css": "\n button { margin:10px; }\n div { color:blue; font-weight:bold; }\n span { color:red; }\n ", "inhead": "", "html": "<button>Button #1</button>\n <button>Button #2</button>\n <div><span>0</span> button #1 clicks.</div>\n <div><span>0</span> button #2 clicks.</div>", "exampleId": "141iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"button:first\").click(function () {\n update($(\"span:first\"));\n });\n $(\"button:last\").click(function () {\n $(\"button:first\").trigger('click');\n\n update($(\"span:last\"));\n });\n\n function update(j) {\n var n = parseInt(j.text(), 0);\n j.text(n + 1);\n }\n\n });\n</script>\n<style>\n\n button { margin:10px; }\n div { color:blue; font-weight:bold; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<button>Button #1</button>\n <button>Button #2</button>\n <div><span>0</span> button #1 clicks.</div>\n <div><span>0</span> button #2 clicks.</div>\n</body>\n</html>"}, {"code": "$(\"form:first\").trigger(\"submit\")", "htmlCode": "$(\"form:first\").trigger(\"submit\")", "desc": "To submit the first form without using the submit() function, try:", "css": "", "inhead": "", "html": "", "exampleId": "141iframeExample1", "runCode": ""}, {"code": "$(\"p\").click( function (event, a, b) {\n // when a normal click fires, a and b are undefined\n // for a trigger like below a refers too \"foo\" and b refers to \"bar\"\n} ).trigger(\"click\", [\"foo\", \"bar\"]);", "htmlCode": "$(\"p\").click( function (event, a, b) {\n // when a normal click fires, a and b are undefined\n // for a trigger like below a refers too \"foo\" and b refers to \"bar\"\n} ).trigger(\"click\", [\"foo\", \"bar\"]);", "desc": "To pass arbitrary data to an event:", "css": "", "inhead": "", "html": "", "exampleId": "141iframeExample2", "runCode": ""}, {"code": "$(\"p\").bind(\"myEvent\", function (event, message1, message2) {\n alert(message1 + ' ' + message2);\n});\n$(\"p\").trigger(\"myEvent\", [\"Hello\",\"World!\"]);", "htmlCode": "$(\"p\").bind(\"myEvent\", function (event, message1, message2) {\n alert(message1 + ' ' + message2);\n});\n$(\"p\").trigger(\"myEvent\", [\"Hello\",\"World!\"]);", "desc": "This would display a \"Hello World!\" alert box.", "css": "", "inhead": "", "html": "", "exampleId": "141iframeExample3", "runCode": ""}]}, "triggerhandler142": {"id": 142, "searchname": "triggerhandler", "name": "triggerHandler", "type": "function", "category": "Events", "subcategory": "Event Handling", "return": "jQuery", "added": "", "sample": "", "desc": "This particular method triggers all bound event handlers on an element (for a specific event type) WITHOUT executing the browsers default actions.", "longdesc": "<p>The event is only triggered on the first element within the JQuery collection. Also, if the JQuery collection is empty, this method returns 'undefined' instead of an empty JQuery collection.</p>", "params": [{"optional": false, "name": "type ", "type": "String", "desc": "An event type to trigger."}, {"optional": true, "name": "data ", "type": "Array", "desc": "Additional data to pass as arguments (after the event object) to the event handler."}], "examples": [{"code": "\n $(\"#old\").click(function(){\n $(\"input\").trigger(\"focus\");\n });\n $(\"#new\").click(function(){\n $(\"input\").triggerHandler(\"focus\");\n });\n $(\"input\").focus(function(){\n $(\"<span>Focused!</span>\").appendTo(\"body\").fadeOut(1000);\n });\n", "htmlCode": "\n $(\"#old\").click(function(){\n $(\"input\").trigger(\"focus\");\n });\n $(\"#new\").click(function(){\n $(\"input\").triggerHandler(\"focus\");\n });\n $(\"input\").focus(function(){\n $(\"<span>Focused!</span>\").appendTo(\"body\").fadeOut(1000);\n });\n", "desc": "If you called .triggerHandler() on a focus event - the browsers default focus action would not be triggered, only the event handlers bound to the focus event.", "css": "", "inhead": "", "html": "<button id=\"old\">.trigger(\"focus\")</button>\n <button id=\"new\">.triggerHandler(\"focus\")</button><br/><br/>\n <input type=\"text\" value=\"To Be Focused\"/>", "exampleId": "142iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"#old\").click(function(){\n $(\"input\").trigger(\"focus\");\n });\n $(\"#new\").click(function(){\n $(\"input\").triggerHandler(\"focus\");\n });\n $(\"input\").focus(function(){\n $(\"<span>Focused!</span>\").appendTo(\"body\").fadeOut(1000);\n });\n\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<button id=\"old\">.trigger(\"focus\")</button>\n <button id=\"new\">.triggerHandler(\"focus\")</button><br/><br/>\n <input type=\"text\" value=\"To Be Focused\"/>\n</body>\n</html>"}]}, "unbind143": {"id": 143, "searchname": "unbind", "name": "unbind", "type": "function", "category": "Events", "subcategory": "Event Handling", "return": "jQuery", "added": "", "sample": "", "desc": "This does the opposite of bind, it removes bound events from each of the matched elements.", "longdesc": "<p>Without any arguments, all bound events are removed.</p><p>You can also unbind custom events registered with bind.</p><p>If the type is provided, all bound events of that type are removed.</p><p>If the function that was passed to bind is provided as the second argument, only that specific event handler is removed.</p>", "params": [{"optional": true, "name": "type ", "type": "String", "desc": "An event type to unbind."}, {"optional": true, "name": "data ", "type": "Function", "desc": "A function to unbind from the event on each of the set of matched elements."}], "examples": [{"code": "\n function aClick() {\n $(\"div\").show().fadeOut(\"slow\");\n }\n $(\"#bind\").click(function () {\n // could use .bind('click', aClick) instead but for variety...\n $(\"#theone\").click(aClick)\n .text(\"Can Click!\");\n });\n $(\"#unbind\").click(function () {\n $(\"#theone\").unbind('click', aClick)\n .text(\"Does nothing...\");\n });\n", "htmlCode": "\n function aClick() {\n $(\"div\").show().fadeOut(\"slow\");\n }\n $(\"#bind\").click(function () {\n // could use .bind('click', aClick) instead but for variety...\n $(\"#theone\").click(aClick)\n .text(\"Can Click!\");\n });\n $(\"#unbind\").click(function () {\n $(\"#theone\").unbind('click', aClick)\n .text(\"Does nothing...\");\n });\n", "desc": "Can bind and unbind events to the colored button.", "css": "\n button { margin:5px; }\n button#theone { color:red; background:yellow; }\n ", "inhead": "", "html": "<button id=\"theone\">Does nothing...</button>\n <button id=\"bind\">Bind Click</button>\n <button id=\"unbind\">Unbind Click</button>\n <div style=\"display:none;\">Click!</div>", "exampleId": "143iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n function aClick() {\n $(\"div\").show().fadeOut(\"slow\");\n }\n $(\"#bind\").click(function () {\n // could use .bind('click', aClick) instead but for variety...\n $(\"#theone\").click(aClick)\n .text(\"Can Click!\");\n });\n $(\"#unbind\").click(function () {\n $(\"#theone\").unbind('click', aClick)\n .text(\"Does nothing...\");\n });\n\n });\n</script>\n<style>\n\n button { margin:5px; }\n button#theone { color:red; background:yellow; }\n \n</style>\n</head>\n<body>\n<button id=\"theone\">Does nothing...</button>\n <button id=\"bind\">Bind Click</button>\n <button id=\"unbind\">Unbind Click</button>\n <div style=\"display:none;\">Click!</div>\n</body>\n</html>"}, {"code": "$(\"p\").unbind()", "htmlCode": "$(\"p\").unbind()", "desc": "To unbind all events from all paragraphs, write:", "css": "", "inhead": "", "html": "", "exampleId": "143iframeExample1", "runCode": ""}, {"code": "$(\"p\").unbind( \"click\" )", "htmlCode": "$(\"p\").unbind( \"click\" )", "desc": "To unbind all click events from all paragraphs, write:", "css": "", "inhead": "", "html": "", "exampleId": "143iframeExample2", "runCode": ""}, {"code": "var foo = function () {\n // code to handle some kind of event\n};\n\n$(\"p\").bind(\"click\", foo); // ... now foo will be called when paragraphs are clicked ...\n\n$(\"p\").unbind(\"click\", foo); // ... foo will no longer be called.", "htmlCode": "var foo = function () {\n // code to handle some kind of event\n};\n\n$(\"p\").bind(\"click\", foo); // ... now foo will be called when paragraphs are clicked ...\n\n$(\"p\").unbind(\"click\", foo); // ... foo will no longer be called.", "desc": "To unbind just one previously bound handler, pass the function in as the second argument:", "css": "", "inhead": "", "html": "", "exampleId": "143iframeExample3", "runCode": ""}]}, "hover144": {"id": 144, "searchname": "hover", "name": "hover", "type": "function", "category": "Events", "subcategory": "Interaction Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Simulates hovering (moving the mouse on, and off, an object). This is a custom method which provides an 'in' to a frequent task.", "longdesc": "<p>Whenever the mouse cursor is moved over a matched element, the first specified function is fired. Whenever the mouse moves off of the element, the second specified function fires. Additionally, checks are in place to see if the mouse is still within the specified element itself (for example, an image inside of a div), and if it is, it will continue to 'hover', and not move out (a common error in using a mouseout event handler).</p>", "params": [{"optional": false, "name": "over", "type": "Function", "desc": "The function to fire when the mouse is moved over a matched element.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}, {"optional": false, "name": "out", "type": "Function", "desc": "The function to fire when the mouse is moved off of a matched element.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(\"li\").hover(\n function () {\n $(this).append($(\"<span> ***</span>\"));\n }, \n function () {\n $(this).find(\"span:last\").remove();\n }\n );\n", "htmlCode": "\n $(\"li\").hover(\n function () {\n $(this).append($(\"<span> ***</span>\"));\n }, \n function () {\n $(this).find(\"span:last\").remove();\n }\n );\n", "desc": "To add a special style to table cells that are being hovered over, try:", "css": "\n ul { margin-left:20px; color:blue; }\n li { cursor:default; }\n span { color:red; }\n ", "inhead": "", "html": "<ul>\n <li>Milk</li>\n <li>Bread</li>\n <li>Chips</li>\n <li>Socks</li>\n </ul>", "exampleId": "144iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"li\").hover(\n function () {\n $(this).append($(\"<span> ***</span>\"));\n }, \n function () {\n $(this).find(\"span:last\").remove();\n }\n );\n\n });\n</script>\n<style>\n\n ul { margin-left:20px; color:blue; }\n li { cursor:default; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<ul>\n <li>Milk</li>\n <li>Bread</li>\n <li>Chips</li>\n <li>Socks</li>\n </ul>\n</body>\n</html>"}, {"code": "$(\"td\").hover(\n function () {\n $(this).addClass(\"hover\");\n },\n function () {\n $(this).removeClass(\"hover\");\n }\n);", "htmlCode": "$(\"td\").hover(\n function () {\n $(this).addClass(\"hover\");\n },\n function () {\n $(this).removeClass(\"hover\");\n }\n);", "desc": "To add a special style to table cells that are being hovered over, try:", "css": "", "inhead": "", "html": "", "exampleId": "144iframeExample1", "runCode": ""}]}, "toggle145": {"id": 145, "searchname": "toggle", "name": "toggle", "type": "function", "category": "Events", "subcategory": "Interaction Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Toggle between two function calls every other click.", "longdesc": "<p>Whenever a matched element is clicked, the first specified function is fired, when clicked again, the second is fired. All subsequent clicks continue to rotate through the two functions.</p><p>Use unbind(\"click\") to remove.</p>", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "The function to execute on every even click.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}, {"optional": false, "name": "fn1", "type": "Function", "desc": "The function to execute on every odd click.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(\"li\").toggle(\n function () {\n $(this).css(\"list-style-type\", \"disc\")\n .css(\"color\", \"blue\");\n },\n function () {\n $(this).css({\"list-style-type\":\"\", \"color\":\"\"});\n }\n );\n", "htmlCode": "\n $(\"li\").toggle(\n function () {\n $(this).css(\"list-style-type\", \"disc\")\n .css(\"color\", \"blue\");\n },\n function () {\n $(this).css({\"list-style-type\":\"\", \"color\":\"\"});\n }\n );\n", "desc": "Click to toggle highlight on the list item.", "css": "\n ul { margin:10px; list-style:inside circle; font-weight:bold; }\n li { cursor:pointer; }\n ", "inhead": "", "html": "<ul>\n <li>Go to the store</li>\n <li>Pick up dinner</li>\n <li>Debug crash</li>\n <li>Take a jog</li>\n </ul>", "exampleId": "145iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"li\").toggle(\n function () {\n $(this).css(\"list-style-type\", \"disc\")\n .css(\"color\", \"blue\");\n },\n function () {\n $(this).css({\"list-style-type\":\"\", \"color\":\"\"});\n }\n );\n\n });\n</script>\n<style>\n\n ul { margin:10px; list-style:inside circle; font-weight:bold; }\n li { cursor:pointer; }\n \n</style>\n</head>\n<body>\n<ul>\n <li>Go to the store</li>\n <li>Pick up dinner</li>\n <li>Debug crash</li>\n <li>Take a jog</li>\n </ul>\n</body>\n</html>"}, {"code": "$(\"td\").toggle(\n function () {\n $(this).addClass(\"selected\");\n },\n function () {\n $(this).removeClass(\"selected\");\n }\n);", "htmlCode": "$(\"td\").toggle(\n function () {\n $(this).addClass(\"selected\");\n },\n function () {\n $(this).removeClass(\"selected\");\n }\n);", "desc": "To toggle a style on table cells:", "css": "", "inhead": "", "html": "", "exampleId": "145iframeExample1", "runCode": ""}]}, "blur146": {"id": 146, "searchname": "blur", "name": "blur", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Triggers the blur event of each matched element.", "longdesc": "<p>This causes all of the functions that have been bound to that blur event to be executed, and calls the browser's default blur action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the blur event. The blur event usually fires when an element loses focus either via the pointing device or by tabbing navigation</p>", "params": [], "examples": [{"code": "$(\"p\").blur();", "htmlCode": "$(\"p\").blur();", "desc": "To triggers the blur event on all paragraphs:", "css": "", "inhead": "", "html": "", "exampleId": "146iframeExample0", "runCode": ""}]}, "blur147": {"id": 147, "searchname": "blur", "name": "blur", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Bind a function to the blur event of each matched element.", "longdesc": "<p>The blur event fires when an element loses focus either via the pointing device or by tabbing navigation.</p>", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "A function to bind to the blur event on each of the matched elements.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "$(\"p\").blur( function () { alert(\"Hello World!\"); } );", "htmlCode": "$(\"p\").blur( function () { alert(\"Hello World!\"); } );", "desc": "To pop up an alert saying \"Hello World!\" every time any paragraph's blur event triggers:", "css": "", "inhead": "", "html": "", "exampleId": "147iframeExample0", "runCode": ""}]}, "change148": {"id": 148, "searchname": "change", "name": "change", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Triggers the change event of each matched element.", "longdesc": "<p>This causes all of the functions that have been bound to that change event to be executed, and calls the browser's default change action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the change event. The change event usually fires when a control loses the input focus and its value has been modified since gaining focus.</p>", "params": [], "examples": []}, "change149": {"id": 149, "searchname": "change", "name": "change", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Binds a function to the change event of each matched element.", "longdesc": "<p>The change event fires when a control loses the input focus and its value has been modified since gaining focus.</p>", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "A function to bind to the change event on each of the matched elements.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(\"select\").change(function () {\n var str = \"\";\n $(\"select option:selected\").each(function () {\n str += $(this).text() + \" \";\n });\n $(\"div\").text(str);\n })\n .change();\n", "htmlCode": "\n $(\"select\").change(function () {\n var str = \"\";\n $(\"select option:selected\").each(function () {\n str += $(this).text() + \" \";\n });\n $(\"div\").text(str);\n })\n .change();\n", "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.", "css": "\n div { color:red; }\n ", "inhead": "", "html": "<select name=\"sweets\" multiple=\"multiple\">\n <option>Chocolate</option>\n <option selected=\"selected\">Candy</option>\n <option>Taffy</option>\n <option selected=\"selected\">Caramel</option>\n <option>Fudge</option>\n <option>Cookie</option>\n </select>\n <div></div>", "exampleId": "149iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"select\").change(function () {\n var str = \"\";\n $(\"select option:selected\").each(function () {\n str += $(this).text() + \" \";\n });\n $(\"div\").text(str);\n })\n .change();\n\n });\n</script>\n<style>\n\n div { color:red; }\n \n</style>\n</head>\n<body>\n<select name=\"sweets\" multiple=\"multiple\">\n <option>Chocolate</option>\n <option selected=\"selected\">Candy</option>\n <option>Taffy</option>\n <option selected=\"selected\">Caramel</option>\n <option>Fudge</option>\n <option>Cookie</option>\n </select>\n <div></div>\n</body>\n</html>"}, {"code": "$(\"input[@type='text']\").change( function() {\n // check input for validity here\n});", "htmlCode": "$(\"input[@type='text']\").change( function() {\n // check input for validity here\n});", "desc": "To add a validity test to all text input elements:", "css": "", "inhead": "", "html": "", "exampleId": "149iframeExample1", "runCode": ""}]}, "click150": {"id": 150, "searchname": "click", "name": "click", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Triggers the click event of each matched element.", "longdesc": "<p>Causes all of the functions that have been bound to that click event to be executed.</p>", "params": [], "examples": [{"code": "$(\"p\").click();", "htmlCode": "$(\"p\").click();", "desc": "To trigger the click event on all of the paragraphs on the page:", "css": "", "inhead": "", "html": "", "exampleId": "150iframeExample0", "runCode": ""}]}, "click151": {"id": 151, "searchname": "click", "name": "click", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Binds a function to the click event of each matched element.", "longdesc": "<p>The click event fires when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location. The sequence of these events is:<ul><li>mousedown</li><li>mouseup</li><li>click</li></ul></p>", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "A function to bind to the click event on each of the matched elements.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(\"p\").click(function () { \n $(this).slideUp(); \n });\n $(\"p\").hover(function () {\n $(this).addClass(\"hilite\");\n }, function () {\n $(this).removeClass(\"hilite\");\n });\n", "htmlCode": "\n $(\"p\").click(function () { \n $(this).slideUp(); \n });\n $(\"p\").hover(function () {\n $(this).addClass(\"hilite\");\n }, function () {\n $(this).removeClass(\"hilite\");\n });\n", "desc": "To hide paragraphs on a page when they are clicked:", "css": "\n p { color:red; margin:5px; cursor:pointer; }\n p.hilite { background:yellow; }\n ", "inhead": "", "html": "<p>First Paragraph</p>\n <p>Second Paragraph</p>\n <p>Yet one more Paragraph</p>", "exampleId": "151iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"p\").click(function () { \n $(this).slideUp(); \n });\n $(\"p\").hover(function () {\n $(this).addClass(\"hilite\");\n }, function () {\n $(this).removeClass(\"hilite\");\n });\n\n });\n</script>\n<style>\n\n p { color:red; margin:5px; cursor:pointer; }\n p.hilite { background:yellow; }\n \n</style>\n</head>\n<body>\n<p>First Paragraph</p>\n <p>Second Paragraph</p>\n <p>Yet one more Paragraph</p>\n</body>\n</html>"}]}, "dblclick152": {"id": 152, "searchname": "dblclick", "name": "dblclick", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Triggers the dblclick event of each matched element.", "longdesc": "<p>This causes all of the functions that have been bound to that dblclick event to be executed, and calls the browser's default dblclick action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the dblclick event. The dblclick event usually fires when the pointing device button is double clicked over an element.</p>", "params": [], "examples": []}, "dblclick153": {"id": 153, "searchname": "dblclick", "name": "dblclick", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Binds a function to the dblclick event of each matched element.", "longdesc": "<p>The dblclick event fires when the pointin
10000
g device button is double clicked over an element</p>", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "The function to bind to the dblclick event on each of the matched elements.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "$(\"p\").dblclick( function () { alert(\"Hello World!\"); });", "htmlCode": "$(\"p\").dblclick( function () { alert(\"Hello World!\"); });", "desc": "To bind a \"Hello World!\" alert box the dblclick event on every paragraph on the page:", "css": "", "inhead": "", "html": "", "exampleId": "153iframeExample0", "runCode": ""}, {"code": "\n var divdbl = $(\"div:first\");\n divdbl.dblclick(function () { \n divdbl.toggleClass('dbl'); \n });\n\n", "htmlCode": "\n var divdbl = $(\"div:first\");\n divdbl.dblclick(function () { \n divdbl.toggleClass('dbl'); \n });\n\n", "desc": "Double click to toggle background color.", "css": "\n div { background:blue;\n color:white;\n height:100px;\n width:150px;\n }\n div.dbl { background:yellow;color:black; }\n ", "inhead": "", "html": "<div></div><span>Double click the block</span>", "exampleId": "153iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var divdbl = $(\"div:first\");\n divdbl.dblclick(function () { \n divdbl.toggleClass('dbl'); \n });\n\n\n });\n</script>\n<style>\n\n div { background:blue;\n color:white;\n height:100px;\n width:150px;\n }\n div.dbl { background:yellow;color:black; }\n \n</style>\n</head>\n<body>\n<div></div><span>Double click the block</span>\n</body>\n</html>"}]}, "error154": {"id": 154, "searchname": "error", "name": "error", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Triggers the error event of each matched element.", "longdesc": "<p>This causes all of the functions that have been bound to that error event to be executed, and calls the browser's default error action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the error event. The error event usually fires when an element loses focus either via the pointing device or by tabbing navigation.</p>", "params": [], "examples": []}, "error155": {"id": 155, "searchname": "error", "name": "error", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Binds a function to the error event of each matched element.", "longdesc": "<p>There is no public standard for the error event. In most browsers, the window object's error event is triggered when a JavaScript error occurs on the page. An image object's error event is triggered when it is set an invalid src attribute - either a non-existent file, or one with corrupt image data.</p><p>If the event is thrown by the window object, the event handler will be passed three parameters: <ol><li>A message describing the event (\"varName is not defined\", \"missing operator in expression\", etc.),</li><li>the full URL of the document containing the error, and</li><li>the line number on which the error occured.</li></ol></p>\n<p>If the event handler returns true, it signifies that the event was handled, and the browser raises no errors.</p><p>For more information, see: <ul><li><a href=\"http://msdn2.microsoft.com/en-us/library/ms536930.aspx\">http://msdn2.microsoft.com/en-us/library/ms536930.aspx</a></li><li>[http://developer.mozilla.org/en/docs/DOM:window.onerror Gecko DOM Reference - onerror Event]</li><li>[http://developer.mozilla.org/en/docs/DOM:event Gecko DOM Reference - Event object]</li><li>[http://en.wikipedia.org/wiki/DOM_Events Wikipedia: DOM Events]</ul></p>", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "An event handler function to bind to the error event.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "$(window).error(function(msg, url, line){\n jQuery.post(\"js_error_log.php\", { msg: msg, url: url, line: line });\n});", "htmlCode": "$(window).error(function(msg, url, line){\n jQuery.post(\"js_error_log.php\", { msg: msg, url: url, line: line });\n});", "desc": "To keep a server-side log of JavaScript errors, you might want to:", "css": "", "inhead": "", "html": "", "exampleId": "155iframeExample0", "runCode": ""}, {"code": "$(window).error(function(){\n return true;\n});", "htmlCode": "$(window).error(function(){\n return true;\n});", "desc": "To hide JavaScript errors from the user, you can try:", "css": "", "inhead": "", "html": "", "exampleId": "155iframeExample1", "runCode": ""}, {"code": "$(\"img\").error(function(){\n $(this).hide();\n});", "htmlCode": "$(\"img\").error(function(){\n $(this).hide();\n});", "desc": "To hide the \"broken image\" icons for your IE users, you can try:", "css": "", "inhead": "", "html": "", "exampleId": "155iframeExample2", "runCode": ""}]}, "focus156": {"id": 156, "searchname": "focus", "name": "focus", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Triggers the focus event of each matched element. ", "longdesc": "<p>This causes all of the functions that have been bound to the focus event to be executed. Note that this does not execute the focus method of the underlying elements.</p>", "params": [], "examples": [{"code": "$(document).ready(function(){\n $(\"#login\").focus();\n});", "htmlCode": "$(document).ready(function(){\n $(\"#login\").focus();\n});", "desc": "To focus on a login input box with id 'login' on page startup, try:", "css": "", "inhead": "", "html": "", "exampleId": "156iframeExample0", "runCode": ""}]}, "focus157": {"id": 157, "searchname": "focus", "name": "focus", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Binds a function to the focus event of each matched element.", "longdesc": "<p>The focus event fires when an element receives focus either via the pointing device or by tab navigation.</p>", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "A function to bind to the focus event on each of the matched elements.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(\"input\").focus(function () {\n $(this).next(\"span\").css('display','inline').fadeOut(1000);\n });\n", "htmlCode": "\n $(\"input\").focus(function () {\n $(this).next(\"span\").css('display','inline').fadeOut(1000);\n });\n", "desc": "Fire focus.", "css": "span {display:none;}", "inhead": "", "html": "<p><input type=\"text\" /> <span>focus fire</span></p>\n<p><input type=\"password\" /> <span>focus fire</span></p>", "exampleId": "157iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"input\").focus(function () {\n $(this).next(\"span\").css('display','inline').fadeOut(1000);\n });\n\n });\n</script>\n<style>\nspan {display:none;}\n</style>\n</head>\n<body>\n<p><input type=\"text\" /> <span>focus fire</span></p>\n<p><input type=\"password\" /> <span>focus fire</span></p>\n</body>\n</html>"}, {"code": "$(\"input[@type=text]\").focus(function(){\n $(this).blur();\n});", "htmlCode": "$(\"input[@type=text]\").focus(function(){\n $(this).blur();\n});", "desc": "To stop people from writing in text input boxes, try:", "css": "", "inhead": "", "html": "", "exampleId": "157iframeExample1", "runCode": ""}]}, "keydown158": {"id": 158, "searchname": "keydown", "name": "keydown", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Triggers the keydown event of each matched element.", "longdesc": "<p>This causes all of the functions that have been bound to the keydown event to be executed, and calls the browser's default keydown action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the keydown event. The keydown event usually fires when a key on the keyboard is pressed.</p>", "params": [], "examples": []}, "keydown159": {"id": 159, "searchname": "keydown", "name": "keydown", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Bind a function to the keydown event of each matched element.", "longdesc": "<p>The keydown event fires when a key on the keyboard is pressed.</p>", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "A function to bind to the keydown event on each of the matched elements.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "$(window).keydown(function(event){\n switch (event.keyCode) {\n // ...\n // different keys do different things\n // Different browsers provide different codes\n // see here for details: http://unixpapa.com/js/key.html \n // ...\n }\n});", "htmlCode": "$(window).keydown(function(event){\n switch (event.keyCode) {\n // ...\n // different keys do different things\n // Different browsers provide different codes\n // see here for details: http://unixpapa.com/js/key.html \n // ...\n }\n});", "desc": "To perform actions in response to keyboard presses on a page, try:", "css": "", "inhead": "", "html": "", "exampleId": "159iframeExample0", "runCode": ""}]}, "keypress160": {"id": 160, "searchname": "keypress", "name": "keypress", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Triggers the keypress event of each matched element.", "longdesc": "<p>This causes all of the functions that have been bound to the keypress event to be executed, and calls the browser's default keypress action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the keypress event. The keypress event usually fires when a key on the keyboard is pressed.\n</p>", "params": [], "examples": []}, "keypress161": {"id": 161, "searchname": "keypress", "name": "keypress", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Binds a function to the keypress event of each matched element.", "longdesc": "<p>The keypress event fires when a key on the keyboard is \"clicked\". A keypress is defined as a keydown and keyup on the same key. The sequence of these events is: <ul><li>keydown</li><li>keyup</li><li>keypress</li></ul></p>", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "A function to bind to the keypress event on each of the matched elements.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(\"input\").keypress(function (e) {\n if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)\n || (97 <= e.which && e.which <= 97 + 25)) {\n var c = String.fromCharCode(e.which);\n $(\"p\").append($(\"<span/>\"))\n .children(\":last\")\n .append(document.createTextNode(c));\n } else if (e.which == 8) {\n // backspace in IE only be on keydown\n $(\"p\").children(\":last\").remove();\n }\n $(\"div\").text(e.which);\n });\n", "htmlCode": "\n $(\"input\").keypress(function (e) {\n if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)\n || (97 <= e.which && e.which <= 97 + 25)) {\n var c = String.fromCharCode(e.which);\n $(\"p\").append($(\"<span/>\"))\n .children(\":last\")\n .append(document.createTextNode(c));\n } else if (e.which == 8) {\n // backspace in IE only be on keydown\n $(\"p\").children(\":last\").remove();\n }\n $(\"div\").text(e.which);\n });\n", "desc": "Show spaces and letters when typed.", "css": "\n input { margin:10px; }\n p { color:blue; margin:10px; font-size:18px; }\n p.hilite { background:yellow; }\n div { color:red; }\n ", "inhead": "", "html": "<input type=\"text\" />\n <p>Add text - </p>\n <div></div>", "exampleId": "161iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"input\").keypress(function (e) {\n if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)\n || (97 <= e.which && e.which <= 97 + 25)) {\n var c = String.fromCharCode(e.which);\n $(\"p\").append($(\"<span/>\"))\n .children(\":last\")\n .append(document.createTextNode(c));\n } else if (e.which == 8) {\n // backspace in IE only be on keydown\n $(\"p\").children(\":last\").remove();\n }\n $(\"div\").text(e.which);\n });\n\n });\n</script>\n<style>\n\n input { margin:10px; }\n p { color:blue; margin:10px; font-size:18px; }\n p.hilite { background:yellow; }\n div { color:red; }\n \n</style>\n</head>\n<body>\n<input type=\"text\" />\n <p>Add text - </p>\n <div></div>\n</body>\n</html>"}]}, "keyup162": {"id": 162, "searchname": "keyup", "name": "keyup", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Triggers the keyup event of each matched element.", "longdesc": "<p>This causes all of the functions that have been bound to the keyup event to be executed, and calls the browser's default keyup action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the keyup event. The keyup event usually fires when a key on the keyboard is released.</p>", "params": [], "examples": []}, "keyup163": {"id": 163, "searchname": "keyup", "name": "keyup", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Bind a function to the keyup event of each matched element.", "longdesc": "<p>The keyup event fires when a key on the keyboard is released.</p>", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "A function to bind to the keyup event on each of the matched elements.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "$(document).keyup(function(event){\n if (event.keyCode == 27) {\n alert('escaped!');\n }\n});", "htmlCode": "$(document).keyup(function(event){\n if (event.keyCode == 27) {\n alert('escaped!');\n }\n});", "desc": "To perform an action when the escape key has been released:", "css": "", "inhead": "", "html": "", "exampleId": "163iframeExample0", "runCode": ""}]}, "load164": {"id": 164, "searchname": "load", "name": "load", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Binds a function to the load event of each matched element.", "longdesc": "<p>When bound to the window element, the event fires when the user agent finishes loading all content within a document, including window, frames, objects and images. For elements, it fires when the target element and all of its content has finished loading. Note: load will work only if you set it before the element has completely loaded, if you set it after that nothing will happen. This doesn't happen in $(document).ready(), which jQuery handles it to work as expected, also when setting it after the DOM has loaded.\n </p>", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "A function to bind to the load event on each of the matched elements.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(window).load(function () {\n // run code\n });\n", "htmlCode": "\n $(window).load(function () {\n // run code\n });\n", "desc": "Run a function when the page is fully loaded including graphics.", "css": "", "inhead": "", "html": "", "exampleId": "164iframeExample0", "runCode": ""}]}, "mousedown165": {"id": 165, "searchname": "mousedown", "name": "mousedown", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Binds a function to the mousedown event of each matched element.", "longdesc": "<p>The mousedown event fires when the pointing device button is pressed over an element.</p>", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "A function to bind to the mousedown event on each of the matched elements.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(\"p\").mouseup(function(){\n $(this).append('<span style=\"color:#F00;\">Mouse up.</span>');\n }).mousedown(function(){\n $(this).append('<span style=\"color:#00F;\">Mouse down.</span>');\n });\n", "htmlCode": "\n $(\"p\").mouseup(function(){\n $(this).append('<span style=\"color:#F00;\">Mouse up.</span>');\n }).mousedown(function(){\n $(this).append('<span style=\"color:#00F;\">Mouse down.</span>');\n });\n", "desc": "Show texts when mouseup and mousedown event triggering.", "css": "", "inhead": "", "html": "<p>Press mouse and release here.</p>\n", "exampleId": "165iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"p\").mouseup(function(){\n $(this).append('<span style=\"color:#F00;\">Mouse up.</span>');\n }).mousedown(function(){\n $(this).append('<span style=\"color:#00F;\">Mouse down.</span>');\n });\n\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<p>Press mouse and release here.</p>\n\n</body>\n</html>"}]}, "mousemove166": {"id": 166, "searchname": "mousemove", "name": "mousemove", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Bind a function to the mousemove event of each matched element.", "longdesc": "<p>The mousemove event fires when the pointing device is moved while it is over an element. The event handler is passed one variable - the event object. Its .clientX and .clientY properties represent the coordinates of the mouse.</p>", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "A function to bind to the mousmove event on each of the matched elements.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(\"div\").mousemove(function(e){\n var pageCoords = \"( \" + e.pageX + \", \" + e.pageY + \" )\";\n var clientCoords = \"( \" + e.clientX + \", \" + e.clientY + \" )\";\n $(\"span:first\").text(\"( e.pageX, e.pageY ) - \" + pageCoords);\n $(\"span:last\").text(\"( e.clientX, e.clientY ) - \" + clientCoords);\n });\n", "htmlCode": "\n $(\"div\").mousemove(function(e){\n var pageCoords = \"( \" + e.pageX + \", \" + e.pageY + \" )\";\n var clientCoords = \"( \" + e.clientX + \", \" + e.clientY + \" )\";\n $(\"span:first\").text(\"( e.pageX, e.pageY ) - \" + pageCoords);\n $(\"span:last\").text(\"( e.clientX, e.clientY ) - \" + clientCoords);\n });\n", "desc": "Show the mouse coordinates when the mouse is moved over the yellow div. Coordinates are relative to the window which in this case is the iframe.", "css": "\n div { width:250px; height:170px; margin;10px; margin-right:50px;\n background:yellow; border:2px groove; float:right; }\n p { margin:0; margin-left:10px; color:red; width:250px;\n height:120px; padding-top:70px;\n float:left; font-size:14px; }\n span { display:block; }\n ", "inhead": "", "html": "<p> \n Try scrolling too.\n <span>Move the mouse over the div.</span>\n <span> </span>\n </p>\n <div></div>", "exampleId": "166iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div\").mousemove(function(e){\n var pageCoords = \"( \" + e.pageX + \", \" + e.pageY + \" )\";\n var clientCoords = \"( \" + e.clientX + \", \" + e.clientY + \" )\";\n $(\"span:first\").text(\"( e.pageX, e.pageY ) - \" + pageCoords);\n $(\"span:last\").text(\"( e.clientX, e.clientY ) - \" + clientCoords);\n });\n\n });\n</script>\n<style>\n\n div { width:250px; height:170px; margin;10px; margin-right:50px;\n background:yellow; border:2px groove; float:right; }\n p { margin:0; margin-left:10px; color:red; width:250px;\n height:120px; padding-top:70px;\n float:left; font-size:14px; }\n span { display:block; }\n \n</style>\n</head>\n<body>\n<p> \n Try scrolling too.\n <span>Move the mouse over the div.</span>\n <span> </span>\n </p>\n <div></div>\n</body>\n</html>"}]}, "mouseout167": {"id": 167, "searchname": "mouseout", "name": "mouseout", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Bind a function to the mouseout event of each matched element.", "longdesc": "<p>The mouseout event fires when the pointing device is moved away from an element.</p>", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "A function to bind to the mouseout event on each of the matched elements.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n var i = 0;\n $(\"div.overout\").mouseout(function(){\n $(\"p:first\",this).text(\"mouse out\");\n $(\"p:last\",this).text(++i);\n }).mouseover(function(){\n $(\"p:first\",this).text(\"mouse over\");\n });\n\n var n = 0;\n $(\"div.enterleave\").bind(\"mouseenter\",function(){\n $(\"p:first\",this).text(\"mouse enter\");\n }).bind(\"mouseleave\",function(){\n $(\"p:first\",this).text(\"mouse leave\");\n $(\"p:last\",this).text(++n);\n });\n", "htmlCode": "\n var i = 0;\n $(\"div.overout\").mouseout(function(){\n $(\"p:first\",this).text(\"mouse out\");\n $(\"p:last\",this).text(++i);\n }).mouseover(function(){\n $(\"p:first\",this).text(\"mouse over\");\n });\n\n var n = 0;\n $(\"div.enterleave\").bind(\"mouseenter\",function(){\n $(\"p:first\",this).text(\"mouse enter\");\n }).bind(\"mouseleave\",function(){\n $(\"p:first\",this).text(\"mouse leave\");\n $(\"p:last\",this).text(++n);\n });\n", "desc": "Show texts when mouseover and mouseout event triggering.\n<strong>Mouseout</strong> fires when pointer move into or out from child element, while <strong>mouseleave</strong> doesn't.", "css": "\ndiv.out {\nwidth:40%;\nheight:120px;\nmargin:0 15px;\nbackground-color:#D6EDFC;\nfloat:left;\n}\ndiv.in {\nwidth:60%;\nheight:60%;\nbackground-color:#FFCC00;\nmargin:10px auto;\n}\np {\nline-height:1em;\nmargin:0;\npadding:0;\n}\n", "inhead": "", "html": "\n<div class=\"out overout\"><p>move your mouse</p><div class=\"in overout\"><p>move your mouse</p><p>0</p></div><p>0</p></div>\n<div class=\"out enterleave\"><p>move your mouse</p><div class=\"in enterleave\"><p>move your mouse</p><p>0</p></div><p>0</p></div>\n", "exampleId": "167iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var i = 0;\n $(\"div.overout\").mouseout(function(){\n $(\"p:first\",this).text(\"mouse out\");\n $(\"p:last\",this).text(++i);\n }).mouseover(function(){\n $(\"p:first\",this).text(\"mouse over\");\n });\n\n var n = 0;\n $(\"div.enterleave\").bind(\"mouseenter\",function(){\n $(\"p:first\",this).text(\"mouse enter\");\n }).bind(\"mouseleave\",function(){\n $(\"p:first\",this).text(\"mouse leave\");\n $(\"p:last\",this).text(++n);\n });\n\n });\n</script>\n<style>\n\ndiv.out {\nwidth:40%;\nheight:120px;\nmargin:0 15px;\nbackground-color:#D6EDFC;\nfloat:left;\n}\ndiv.in {\nwidth:60%;\nheight:60%;\nbackground-color:#FFCC00;\nmargin:10px auto;\n}\np {\nline-height:1em;\nmargin:0;\npadding:0;\n}\n\n</style>\n</head>\n<body>\n\n<div class=\"out overout\"><p>move your mouse</p><div class=\"in overout\"><p>move your mouse</p><p>0</p></div><p>0</p></div>\n<div class=\"out enterleave\"><p>move your mouse</p><div class=\"in enterleave\"><p>move your mouse</p><p>0</p></div><p>0</p></div>\n\n</body>\n</html>"}]}, "mouseover168": {"id": 168, "searchname": "mouseover", "name": "mouseover", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Bind a function to the mouseover event of each matched element.", "longdesc": "<p>The mouseover event fires when the pointing device is moved onto an element.</p>", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "A function to bind to the mouseover event on each of the matched elements.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n var i = 0;\n $(\"div.overout\").mouseover(function(){\n $(\"p:first\",this).text(\"mouse over\");\n $(\"p:last\",this).text(++i);\n }).mouseout(function(){\n $(\"p:first\",this).text(\"mouse out\");\n });\n\n var n = 0;\n $(\"div.enterleave\").bind(\"mouseenter\",function(){\n $(\"p:first\",this).text(\"mouse enter\");\n $(\"p:last\",this).text(++n);\n }).bind(\"mouseleave\",function(){\n $(\"p:first\",this).text(\"mouse leave\");\n });\n", "htmlCode": "\n var i = 0;\n $(\"div.overout\").mouseover(function(){\n $(\"p:first\",this).text(\"mouse over\");\n $(\"p:last\",this).text(++i);\n }).mouseout(function(){\n $(\"p:first\",this).text(\"mouse out\");\n });\n\n var n = 0;\n $(\"div.enterleave\").bind(\"mouseenter\",function(){\n $(\"p:first\",this).text(\"mouse enter\");\n $(\"p:last\",this).text(++n);\n }).bind(\"mouseleave\",function(){\n $(\"p:first\",this).text(\"mouse leave\");\n });\n", "desc": "Show texts when mouseover and mouseout event triggering.\n<strong>Mouseover</strong> fires when the pointer moves into or out from child element, while <strong>mouseenter</strong> does't.", "css": "\ndiv.out {\nwidth:40%;\nheight:120px;\nmargin:0 15px;\nbackground-color:#D6EDFC;\nfloat:left;\n}\ndiv.in {\nwidth:60%;\nheight:60%;\nbackground-color:#FFCC00;\nmargin:10px auto;\n}\np {\nline-height:1em;\nmargin:0;\npadding:0;\n}\n", "inhead": "", "html": "\n<div class=\"out overout\"><p>move your mouse</p><div class=\"in overout\"><p>move your mouse</p><p>0</p></div><p>0</p></div>\n<div class=\"out enterleave\"><p>move your mouse</p><div class=\"in enterleave\"><p>move your mouse</p><p>0</p></div><p>0</p></div>\n", "exampleId": "168iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var i = 0;\n $(\"div.overout\").mouseover(function(){\n $(\"p:first\",this).text(\"mouse over\");\n $(\"p:last\",this).text(++i);\n }).mouseout(function(){\n $(\"p:first\",this).text(\"mouse out\");\n });\n\n var n = 0;\n $(\"div.enterleave\").bind(\"mouseenter\",function(){\n $(\"p:first\",this).text(\"mouse enter\");\n $(\"p:last\",this).text(++n);\n }).bind(\"mouseleave\",function(){\n $(\"p:first\",this).text(\"mouse leave\");\n });\n\n });\n</script>\n<style>\n\ndiv.out {\nwidth:40%;\nheight:120px;\nmargin:0 15px;\nbackground-color:#D6EDFC;\nfloat:left;\n}\ndiv.in {\nwidth:60%;\nheight:60%;\nbackground-color:#FFCC00;\nmargin:10px auto;\n}\np {\nline-height:1em;\nmargin:0;\npadding:0;\n}\n\n</style>\n</head>\n<body>\n\n<div class=\"out overout\"><p>move your mouse</p><div class=\"in overout\"><p>move your mouse</p><p>0</p></div><p>0</p></div>\n<div class=\"out enterleave\"><p>move your mouse</p><div class=\"in enterleave\"><p>move your mouse</p><p>0</p></div><p>0</p></div>\n\n</body>\n</html>"}]}, "mouseup169": {"id": 169, "searchname": "mouseup", "name": "mouseup", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Bind a function to the mouseup event of each matched element.", "longdesc": "<p>The mouseup event fires when the pointing device button is released over an element.</p>", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "A function to bind to the mouseup event on each of the matched elements.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(\"p\").mouseup(function(){\n $(this).append('<span style=\"color:#F00;\">Mouse up.</span>');\n }).mousedown(function(){\n $(this).append('<span style=\"color:#00F;\">Mouse down.</span>');\n });\n", "htmlCode": "\n $(\"p\").mouseup(function(){\n $(this).append('<span style=\"color:#F00;\">Mouse up.</span>');\n }).mousedown(function(){\n $(this).append('<span style=\"color:#00F;\">Mouse down.</span>');\n });\n", "desc": "Show texts when mouseup and mousedown event triggering.", "css": "", "inhead": "", "html": "<p>Press mouse and release here.</p>\n", "exampleId": "169iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"p\").mouseup(function(){\n $(this).append('<span style=\"color:#F00;\">Mouse up.</span>');\n }).mousedown(function(){\n $(this).append('<span style=\"color:#00F;\">Mouse down.</span>');\n });\n\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<p>Press mouse and release here.</p>\n\n</body>\n</html>"}]}, "resize170": {"id": 170, "searchname": "resize", "name": "resize", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery",&nbs
10000
p;"added": "", "sample": "", "desc": "Bind a function to the resize event of each matched element.", "longdesc": "<p>The resize event fires when a document view is resized</p>", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "A function to bind to the resize event on each of the matched elements.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "$(window).resize(function(){\n alert(\"Stop it!\");\n});", "htmlCode": "$(window).resize(function(){\n alert(\"Stop it!\");\n});", "desc": "To make resizing the web page window a pain in the neck, try:", "css": "", "inhead": "", "html": "", "exampleId": "170iframeExample0", "runCode": ""}]}, "scroll171": {"id": 171, "searchname": "scroll", "name": "scroll", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Bind a function to the scroll event of each matched element.", "longdesc": "<p>The scroll event fires when a document view is scrolled.</p>", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "A function to bind to the scroll event on each of the matched elements.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(\"p\").clone().appendTo(document.body);\n $(\"p\").clone().appendTo(document.body);\n $(\"p\").clone().appendTo(document.body);\n $(window).scroll(function () { \n $(\"span\").css(\"display\", \"inline\").fadeOut(\"slow\"); \n });\n", "htmlCode": "\n $(\"p\").clone().appendTo(document.body);\n $(\"p\").clone().appendTo(document.body);\n $(\"p\").clone().appendTo(document.body);\n $(window).scroll(function () { \n $(\"span\").css(\"display\", \"inline\").fadeOut(\"slow\"); \n });\n", "desc": "To do something when your page is scrolled:", "css": "\n div { color:blue; }\n p { color:green; }\n span { color:red; display:none; }\n ", "inhead": "", "html": "<div>Try scrolling the iframe.</div>\n <p>Paragraph - <span>Scroll happened!</span></p>", "exampleId": "171iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"p\").clone().appendTo(document.body);\n $(\"p\").clone().appendTo(document.body);\n $(\"p\").clone().appendTo(document.body);\n $(window).scroll(function () { \n $(\"span\").css(\"display\", \"inline\").fadeOut(\"slow\"); \n });\n\n });\n</script>\n<style>\n\n div { color:blue; }\n p { color:green; }\n span { color:red; display:none; }\n \n</style>\n</head>\n<body>\n<div>Try scrolling the iframe.</div>\n <p>Paragraph - <span>Scroll happened!</span></p>\n</body>\n</html>"}]}, "select172": {"id": 172, "searchname": "select", "name": "select", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Trigger the select event of each matched element.", "longdesc": "<p>This causes all of the functions that have been bound to that select event to be executed, and calls the browser's default select action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the select event.</p><p>\nNote: Do not confuse the \"select\" event with the \"change\" event, which is the one triggered when an html \"select\" element is having its selected option modified by the user.</p>", "params": [], "examples": [{"code": "$(\"input\").select();", "htmlCode": "$(\"input\").select();", "desc": "To trigger the select event on all input elements, try:", "css": "", "inhead": "", "html": "", "exampleId": "172iframeExample0", "runCode": ""}]}, "select173": {"id": 173, "searchname": "select", "name": "select", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Bind a function to the select event of each matched element.", "longdesc": "<p>The select event fires when a user selects some text in a text field, including input and textarea.</p>", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "A function to bind to the select event on each of the matched elements.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(document).select( function () { \n $(\"div\").text(\"Something was selected\").show().fadeOut(1000); \n });\n", "htmlCode": "\n $(document).select( function () { \n $(\"div\").text(\"Something was selected\").show().fadeOut(1000); \n });\n", "desc": "To do something when text in input boxes is selected:", "css": "\n p { color:blue; }\n div { color:red; }\n ", "inhead": "", "html": "<p>\n Click and drag the mouse to select text in the inputs.\n </p>\n <input type=\"text\" value=\"Some text\" />\n <input type=\"text\" value=\"to test on\" />\n <div></div>", "exampleId": "173iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(document).select( function () { \n $(\"div\").text(\"Something was selected\").show().fadeOut(1000); \n });\n\n });\n</script>\n<style>\n\n p { color:blue; }\n div { color:red; }\n \n</style>\n</head>\n<body>\n<p>\n Click and drag the mouse to select text in the inputs.\n </p>\n <input type=\"text\" value=\"Some text\" />\n <input type=\"text\" value=\"to test on\" />\n <div></div>\n</body>\n</html>"}]}, "submit174": {"id": 174, "searchname": "submit", "name": "submit", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Trigger the submit event of each matched element.", "longdesc": "<p>This causes all of the functions that have been bound to that submit event to be executed, and calls the browser's default submit action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the submit event.</p>", "params": [], "examples": [{"code": "$(\"form:first\").submit();", "htmlCode": "$(\"form:first\").submit();", "desc": "To trigger the submit event on the first form on the page, try:", "css": "", "inhead": "", "html": "", "exampleId": "174iframeExample0", "runCode": ""}]}, "submit175": {"id": 175, "searchname": "submit", "name": "submit", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Bind a function to the submit event of each matched element.", "longdesc": "<p>The select event fires when a form is submitted</p>", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "A function to bind to the submit event on each of the matched elements.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(\"form\").submit(function() {\n if ($(\"input:first\").val() == \"correct\") {\n $(\"span\").text(\"Validated...\").show();\n return true;\n }\n $(\"span\").text(\"Not valid!\").show().fadeOut(1000);\n return false;\n });\n", "htmlCode": "\n $(\"form\").submit(function() {\n if ($(\"input:first\").val() == \"correct\") {\n $(\"span\").text(\"Validated...\").show();\n return true;\n }\n $(\"span\").text(\"Not valid!\").show().fadeOut(1000);\n return false;\n });\n", "desc": "If you'd like to prevent forms from being submitted unless a flag variable is set, try:", "css": "\n p { margin:0; color:blue; }\n div,p { margin-left:10px; }\n span { color:red; }\n ", "inhead": "", "html": "<p>Type 'correct' to validate.</p>\n <form action=\"javascript:alert('success!');\">\n <div>\n <input type=\"text\" />\n <input type=\"submit\" />\n </div>\n </form>\n <span></span>", "exampleId": "175iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"form\").submit(function() {\n if ($(\"input:first\").val() == \"correct\") {\n $(\"span\").text(\"Validated...\").show();\n return true;\n }\n $(\"span\").text(\"Not valid!\").show().fadeOut(1000);\n return false;\n });\n\n });\n</script>\n<style>\n\n p { margin:0; color:blue; }\n div,p { margin-left:10px; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<p>Type 'correct' to validate.</p>\n <form action=\"javascript:alert('success!');\">\n <div>\n <input type=\"text\" />\n <input type=\"submit\" />\n </div>\n </form>\n <span></span>\n</body>\n</html>"}, {"code": "$(\"form\").submit( function () {\n return this.some_flag_variable;\n} );", "htmlCode": "$(\"form\").submit( function () {\n return this.some_flag_variable;\n} );", "desc": "If you'd like to prevent forms from being submitted unless a flag variable is set, try:", "css": "", "inhead": "", "html": "", "exampleId": "175iframeExample1", "runCode": ""}]}, "unload176": {"id": 176, "searchname": "unload", "name": "unload", "type": "function", "category": "Events", "subcategory": "Event Helpers", "return": "jQuery", "added": "", "sample": "", "desc": "Binds a function to the unload event of each matched element.", "longdesc": "", "params": [{"optional": false, "name": "fn", "type": "Function", "desc": "function to bind to the unload event on each of the matched elements.\n<pre>function callback(eventObject) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "$(window).unload( function () { alert(\"Bye now!\"); } );", "htmlCode": "$(window).unload( function () { alert(\"Bye now!\"); } );", "desc": "To display an alert when a page is unloaded:", "css": "", "inhead": "", "html": "", "exampleId": "176iframeExample0", "runCode": ""}]}, "show177": {"id": 177, "searchname": "show", "name": "show", "type": "function", "category": "Effects", "subcategory": "Basics", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Displays each of the set of matched elements if they are hidden.", "longdesc": "<p>Same as <a href='Effects/show#speedcallback'>show( speed, [callback] )</a> without animations. Doesn't change anything if the selected elements are all visible. It doesn't matter if the element is hidden via a hide() call, or via a display:none in a stylesheet.</p>", "params": [], "examples": [{"code": "$(\"p\").show()", "htmlCode": "$(\"p\").show()", "desc": "Shows all paragraphs.", "css": "", "inhead": "", "html": "<p style=\"display:none\">Hello</p>", "exampleId": "177iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"p\").show()\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<p style=\"display:none\">Hello</p>\n</body>\n</html>"}]}, "show178": {"id": 178, "searchname": "show", "name": "show", "type": "function", "category": "Effects", "subcategory": "Basics", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Show all matched elements using a graceful animation and firing an optional callback after completion.", "longdesc": "<p>The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed.</p>", "params": [{"optional": false, "name": "speed", "type": "String, Number ", "desc": "A string representing one of the three predefined speeds (\"slow\", \"normal\", or \"fast\") or the number of milliseconds to run the animation (e.g. 1000)."}, {"optional": true, "name": "callback", "type": "Function", "desc": "A function to be executed whenever the animation completes, executes once for each element animated against.\n<pre>function callback() {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(\"button\").click(function () {\n $(\"p\").show(\"slow\");\n });\n", "htmlCode": "\n $(\"button\").click(function () {\n $(\"p\").show(\"slow\");\n });\n", "desc": "Animates all hidden paragraphs to show slowly, completing the animation within 600 milliseconds.", "css": "\n p { background:yellow; }\n ", "inhead": "", "html": "<button>Show it</button>\n <p style=\"display: none\">Hello</p>", "exampleId": "178iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"button\").click(function () {\n $(\"p\").show(\"slow\");\n });\n\n });\n</script>\n<style>\n\n p { background:yellow; }\n \n</style>\n</head>\n<body>\n<button>Show it</button>\n <p style=\"display: none\">Hello</p>\n</body>\n</html>"}, {"code": "\n $(\"#showr\").click(function () {\n $(\"div:eq(0)\").show(\"fast\", function () {\n // use callee so don't have to name the function\n $(this).next().show(\"fast\", arguments.callee); \n });\n });\n $(\"#hidr\").click(function () {\n $(\"div\").hide(2000);\n });\n", "htmlCode": "\n $(\"#showr\").click(function () {\n $(\"div:eq(0)\").show(\"fast\", function () {\n // use callee so don't have to name the function\n $(this).next().show(\"fast\", arguments.callee); \n });\n });\n $(\"#hidr\").click(function () {\n $(\"div\").hide(2000);\n });\n", "desc": "Animates all hidden divs to show fastly in order, completing each animation within 200 milliseconds. Once each animation is done, it starts the next one.", "css": "\n div { background:#def3ca; margin:3px; width:80px; \n display:none; float:left; text-align:center; }\n ", "inhead": "", "html": "<button id=\"showr\">Show</button>\n <button id=\"hidr\">Hide</button>\n <div>Hello,</div>\n <div>how</div>\n <div>are</div>\n <div>you?</div>", "exampleId": "178iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"#showr\").click(function () {\n $(\"div:eq(0)\").show(\"fast\", function () {\n // use callee so don't have to name the function\n $(this).next().show(\"fast\", arguments.callee); \n });\n });\n $(\"#hidr\").click(function () {\n $(\"div\").hide(2000);\n });\n\n });\n</script>\n<style>\n\n div { background:#def3ca; margin:3px; width:80px; \n display:none; float:left; text-align:center; }\n \n</style>\n</head>\n<body>\n<button id=\"showr\">Show</button>\n <button id=\"hidr\">Hide</button>\n <div>Hello,</div>\n <div>how</div>\n <div>are</div>\n <div>you?</div>\n</body>\n</html>"}, {"code": "\n function doIt() {\n $(\"span,div\").show(\"normal\");\n }\n $(\"button\").click(doIt); // can pass in function name\n $(\"form\").submit(function () {\n if ($(\"input\").val() == \"yes\") {\n $(\"p\").show(4000, function () {\n $(this).text(\"Ok, DONE! (now showing)\");\n });\n }\n $(\"span,div\").hide(\"normal\");\n return false; // to stop the submit\n });\n", "htmlCode": "\n function doIt() {\n $(\"span,div\").show(\"normal\");\n }\n $(\"button\").click(doIt); // can pass in function name\n $(\"form\").submit(function () {\n if ($(\"input\").val() == \"yes\") {\n $(\"p\").show(4000, function () {\n $(this).text(\"Ok, DONE! (now showing)\");\n });\n }\n $(\"span,div\").hide(\"normal\");\n return false; // to stop the submit\n });\n", "desc": "Animates all span and input elements to show normally. Once the animation is done, it changes the text.", "css": "\n span { display:none; }\n div { display:none; }\n p { font-weight:bold; background-color:#fcd; }\n ", "inhead": "", "html": "<button>Do it!</button>\n <span>Are you sure? (type 'yes' if you are) </span>\n <div>\n <form>\n <input type=\"text\" />\n </form>\n </div>\n <p style=\"display:none;\">I'm hidden...</p>", "exampleId": "178iframeExample2", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n function doIt() {\n $(\"span,div\").show(\"normal\");\n }\n $(\"button\").click(doIt); // can pass in function name\n $(\"form\").submit(function () {\n if ($(\"input\").val() == \"yes\") {\n $(\"p\").show(4000, function () {\n $(this).text(\"Ok, DONE! (now showing)\");\n });\n }\n $(\"span,div\").hide(\"normal\");\n return false; // to stop the submit\n });\n\n });\n</script>\n<style>\n\n span { display:none; }\n div { display:none; }\n p { font-weight:bold; background-color:#fcd; }\n \n</style>\n</head>\n<body>\n<button>Do it!</button>\n <span>Are you sure? (type 'yes' if you are) </span>\n <div>\n <form>\n <input type=\"text\" />\n </form>\n </div>\n <p style=\"display:none;\">I'm hidden...</p>\n</body>\n</html>"}]}, "hide179": {"id": 179, "searchname": "hide", "name": "hide", "type": "function", "category": "Effects", "subcategory": "Basics", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Hides each of the set of matched elements if they are shown.", "longdesc": "<p>Same as <a href='Effects/hide#speedcallback'>hide( speed, [callback] )</a> without animations. Doesn't change anything if the selected elements are all hidden.</p>", "params": [], "examples": [{"code": "\n $(\"p\").hide();\n $(\"a\").click(function () {\n $(this).hide();\n return false;\n });\n", "htmlCode": "\n $(\"p\").hide();\n $(\"a\").click(function () {\n $(this).hide();\n return false;\n });\n", "desc": "Hides all paragraphs then the link on click.", "css": "", "inhead": "", "html": "<p>Hello</p>\n <a href=\"#\">Click to hide me too</a>\n <p>Here is another paragraph</p>", "exampleId": "179iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"p\").hide();\n $(\"a\").click(function () {\n $(this).hide();\n return false;\n });\n\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<p>Hello</p>\n <a href=\"#\">Click to hide me too</a>\n <p>Here is another paragraph</p>\n</body>\n</html>"}]}, "hide180": {"id": 180, "searchname": "hide", "name": "hide", "type": "function", "category": "Effects", "subcategory": "Basics", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Hide all matched elements using a graceful animation and firing an optional callback after completion.", "longdesc": "<p>The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed.</p>", "params": [{"optional": false, "name": "speed", "type": "String, Number ", "desc": "A string representing one of the three predefined speeds (\"slow\", \"normal\", or \"fast\") or the number of milliseconds to run the animation (e.g. 1000)."}, {"optional": true, "name": "callback", "type": "Function", "desc": "A function to be executed whenever the animation completes, executes once for each element animated against.\n<pre>function callback() {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(\"button\").click(function () {\n $(\"p\").hide(\"slow\");\n }); \n", "htmlCode": "\n $(\"button\").click(function () {\n $(\"p\").hide(\"slow\");\n }); \n", "desc": "Animates all shown paragraphs to hide slowly, completing the animation within 600 milliseconds.", "css": "\n p { background:#dad; font-weight:bold; }\n ", "inhead": "", "html": "<button>Hide 'em</button>\n <p>Hiya</p>\n <p>Such interesting text, eh?</p>", "exampleId": "180iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"button\").click(function () {\n $(\"p\").hide(\"slow\");\n }); \n\n });\n</script>\n<style>\n\n p { background:#dad; font-weight:bold; }\n \n</style>\n</head>\n<body>\n<button>Hide 'em</button>\n <p>Hiya</p>\n <p>Such interesting text, eh?</p>\n</body>\n</html>"}, {"code": "\n $(\"#hidr\").click(function () {\n $(\"span:last-child\").hide(\"fast\", function () {\n // use callee so don't have to name the function\n $(this).prev().hide(\"fast\", arguments.callee); \n });\n });\n $(\"#showr\").click(function () {\n $(\"span\").show(2000);\n });\n", "htmlCode": "\n $(\"#hidr\").click(function () {\n $(\"span:last-child\").hide(\"fast\", function () {\n // use callee so don't have to name the function\n $(this).prev().hide(\"fast\", arguments.callee); \n });\n });\n $(\"#showr\").click(function () {\n $(\"span\").show(2000);\n });\n", "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.", "css": "\n span { background:#def3ca; padding:3px; float:left; }\n ", "inhead": "", "html": "<button id=\"hidr\">Hide</button>\n <button id=\"showr\">Show</button>\n <div>\n <span>Once</span> <span>upon</span> <span>a</span> \n <span>time</span> <span>there</span> <span>were</span> \n <span>three</span> <span>programmers...</span>\n </div>", "exampleId": "180iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"#hidr\").click(function () {\n $(\"span:last-child\").hide(\"fast\", function () {\n // use callee so don't have to name the function\n $(this).prev().hide(\"fast\", arguments.callee); \n });\n });\n $(\"#showr\").click(function () {\n $(\"span\").show(2000);\n });\n\n });\n</script>\n<style>\n\n span { background:#def3ca; padding:3px; float:left; }\n \n</style>\n</head>\n<body>\n<button id=\"hidr\">Hide</button>\n <button id=\"showr\">Show</button>\n <div>\n <span>Once</span> <span>upon</span> <span>a</span> \n <span>time</span> <span>there</span> <span>were</span> \n <span>three</span> <span>programmers...</span>\n </div>\n</body>\n</html>"}, {"code": "\n for (var i = 0; i < 5; i++) {\n $(\"<div>\").appendTo(document.body);\n }\n $(\"div\").click(function () {\n $(this).hide(2000, function () {\n $(this).remove();\n });\n });\n", "htmlCode": "\n for (var i = 0; i < 5; i++) {\n $(\"<div>\").appendTo(document.body);\n }\n $(\"div\").click(function () {\n $(this).hide(2000, function () {\n $(this).remove();\n });\n });\n", "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.", "css": "\n div { background:#ece0fb; width:30px; \n height:40px; margin:2px; float:left; }\n ", "inhead": "", "html": "<div></div>", "exampleId": "180iframeExample2", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n for (var i = 0; i < 5; i++) {\n $(\"<div>\").appendTo(document.body);\n }\n $(\"div\").click(function () {\n $(this).hide(2000, function () {\n $(this).remove();\n });\n });\n\n });\n</script>\n<style>\n\n div { background:#ece0fb; width:30px; \n height:40px; margin:2px; float:left; }\n \n</style>\n</head>\n<body>\n<div></div>\n</body>\n</html>"}]}, "toggle181": {"id": 181, "searchname": "toggle", "name": "toggle", "type": "function", "category": "Effects", "subcategory": "Basics", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Toggles displaying each of the set of matched elements.", "longdesc": "<p>If they are shown, toggle makes them hidden. If they are hidden, toggle makes them shown.</p>", "params": [], "examples": [{"code": "\n $(\"button\").click(function () {\n $(\"p\").toggle();\n });\n", "htmlCode": "\n $(\"button\").click(function () {\n $(\"p\").toggle();\n });\n", "desc": "Toggles all paragraphs.", "css": "", "inhead": "", "html": "<button>Toggle</button>\n <p>Hello</p>\n <p style=\"display: none\">Good Bye</p>", "exampleId": "181iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"button\").click(function () {\n $(\"p\").toggle();\n });\n\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<button>Toggle</button>\n <p>Hello</p>\n <p style=\"display: none\">Good Bye</p>\n</body>\n</html>"}]}, "slidedown182": {"id": 182, "searchname": "slidedown", "name": "slideDown", "type": "function", "category": "Effects", "subcategory": "Sliding", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Reveal all matched elements by adjusting their height and firing an optional callback after completion.", "longdesc": "<p>Only the height is adjusted for this animation, causing all matched elements to be revealed in a \"sliding\" manner.</p>", "params": [{"optional": false, "name": "speed", "type": "String, Number ", "desc": "A string representing one of the three predefined speeds (\"slow\", \"normal\", or \"fast\") or the number of milliseconds to run the animation (e.g. 1000)."}, {"optional": true, "name": "callback", "type": "Function", "desc": "A function to be executed whenever the animation completes, executes once for each element animated against.\n<pre>function callback() {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(document.body).click(function () {\n if ($(\"div:first\").is(\":hidden\")) {\n $(\"div\").slideDown(\"slow\");\n } else {\n $(\"div\").hide();\n }\n });\n", "htmlCode": "\n $(document.body).click(function () {\n if ($(\"div:first\").is(\":hidden\")) {\n $(\"div\").slideDown(\"slow\");\n } else {\n $(\"div\").hide();\n }\n });\n", "desc": "Animates all divs to slide down and show themselves over 600 milliseconds.", "css": "\n div { background:#de9a44; margin:3px; width:80px; \n height:40px; display:none; float:left; }\n ", "inhead": "", "html": "Click me!\n <div></div>\n <div></div>\n <div></div>", "exampleId": "182iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(document.body).click(function () {\n if ($(\"div:first\").is(\":hidden\")) {\n $(\"div\").slideDown(\"slow\");\n } else {\n $(\"div\").hide();\n }\n });\n\n });\n</script>\n<style>\n\n div { background:#de9a44; margin:3px; width:80px; \n height:40px; display:none; float:left; }\n \n</style>\n</head>\n<body>\nClick me!\n <div></div>\n <div></div>\n <div></div>\n</body>\n</html>"}, {"code": "\n $(\"div\").click(function () {\n $(this).css({ borderStyle:\"inset\", cursor:\"wait\" });\n $(\"input\").slideDown(1000,function(){\n $(this).css(\"border\", \"2px red inset\")\n .filter(\".middle\")\n .css(\"background\", \"yellow\")\n .focus();\n $(\"div\").css(\"visibility\", \"hidden\");\n });\n });\n", "htmlCode": "\n $(\"div\").click(function () {\n $(this).css({ borderStyle:\"inset\", cursor:\"wait\" });\n $(\"input\").slideDown(1000,function(){\n $(this).css(\"border\", \"2px red inset\")\n .filter(\".middle\")\n .css(\"background\", \"yellow\")\n .focus();\n $(\"div\").css(\"visibility\", \"hidden\");\n });\n });\n", "desc": "Animates all inputs to slide down, completing the animation within 1000 milliseconds. Once the animation is done, the input look is changed especially if it is the middle input which gets the focus.", "css": "\n div { background:#cfd; margin:3px; width:50px; \n text-align:center; float:left; cursor:pointer;\n border:2px outset black; font-weight:bolder; }\n input { display:none; width:120px; float:left; \n margin:10px; }\n ", "inhead": "", "html": "<div>Push!</div>\n <input type=\"text\" />\n <input type=\"text\" class=\"middle\" />\n <input type=\"text\" />", "exampleId": "182iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div\").click(function () {\n $(this).css({ borderStyle:\"inset\", cursor:\&quo
8000
t;wait\" });\n $(\"input\").slideDown(1000,function(){\n $(this).css(\"border\", \"2px red inset\")\n .filter(\".middle\")\n .css(\"background\", \"yellow\")\n .focus();\n $(\"div\").css(\"visibility\", \"hidden\");\n });\n });\n\n });\n</script>\n<style>\n\n div { background:#cfd; margin:3px; width:50px; \n text-align:center; float:left; cursor:pointer;\n border:2px outset black; font-weight:bolder; }\n input { display:none; width:120px; float:left; \n margin:10px; }\n \n</style>\n</head>\n<body>\n<div>Push!</div>\n <input type=\"text\" />\n <input type=\"text\" class=\"middle\" />\n <input type=\"text\" />\n</body>\n</html>"}]}, "slideup183": {"id": 183, "searchname": "slideup", "name": "slideUp", "type": "function", "category": "Effects", "subcategory": "Sliding", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Hide all matched elements by adjusting their height and firing an optional callback after completion.", "longdesc": "<p>Only the height is adjusted for this animation, causing all matched elements to be hidden in a \"sliding\" manner.</p>", "params": [{"optional": false, "name": "speed", "type": "String, Number ", "desc": "A string representing one of the three predefined speeds (\"slow\", \"normal\", or \"fast\") or the number of milliseconds to run the animation (e.g. 1000)."}, {"optional": true, "name": "callback", "type": "Function", "desc": "A function to be executed whenever the animation completes, executes once for each element animated against.\n<pre>function callback() {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(document.body).click(function () {\n if ($(\"div:first\").is(\":hidden\")) {\n $(\"div\").show(\"slow\");\n } else {\n $(\"div\").slideUp();\n }\n });\n", "htmlCode": "\n $(document.body).click(function () {\n if ($(\"div:first\").is(\":hidden\")) {\n $(\"div\").show(\"slow\");\n } else {\n $(\"div\").slideUp();\n }\n });\n", "desc": "Animates all divs to slide up, completing the animation within 400 milliseconds.", "css": "\n div { background:#3d9a44; margin:3px; width:80px; \n height:40px; float:left; }\n ", "inhead": "", "html": "Click me!\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>", "exampleId": "183iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(document.body).click(function () {\n if ($(\"div:first\").is(\":hidden\")) {\n $(\"div\").show(\"slow\");\n } else {\n $(\"div\").slideUp();\n }\n });\n\n });\n</script>\n<style>\n\n div { background:#3d9a44; margin:3px; width:80px; \n height:40px; float:left; }\n \n</style>\n</head>\n<body>\nClick me!\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n</body>\n</html>"}, {"code": "\n $(\"button\").click(function () {\n $(this).parent().slideUp(\"slow\", function () {\n $(\"#msg\").text($(\"button\", this).text() + \" has completed.\");\n });\n });\n", "htmlCode": "\n $(\"button\").click(function () {\n $(this).parent().slideUp(\"slow\", function () {\n $(\"#msg\").text($(\"button\", this).text() + \" has completed.\");\n });\n });\n", "desc": "Animates all paragraph to slide up, completing the animation within 200 milliseconds. Once the animation is done, it displays an alert.", "css": "\n div { margin:2px; }\n ", "inhead": "", "html": "<div>\n <button>Hide One</button>\n <input type=\"text\" value=\"One\" />\n </div>\n <div>\n <button>Hide Two</button>\n <input type=\"text\" value=\"Two\" />\n </div>\n <div>\n <button>Hide Three</button>\n <input type=\"text\" value=\"Three\" />\n </div>\n <div id=\"msg\"></div>", "exampleId": "183iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"button\").click(function () {\n $(this).parent().slideUp(\"slow\", function () {\n $(\"#msg\").text($(\"button\", this).text() + \" has completed.\");\n });\n });\n\n });\n</script>\n<style>\n\n div { margin:2px; }\n \n</style>\n</head>\n<body>\n<div>\n <button>Hide One</button>\n <input type=\"text\" value=\"One\" />\n </div>\n <div>\n <button>Hide Two</button>\n <input type=\"text\" value=\"Two\" />\n </div>\n <div>\n <button>Hide Three</button>\n <input type=\"text\" value=\"Three\" />\n </div>\n <div id=\"msg\"></div>\n</body>\n</html>"}]}, "slidetoggle184": {"id": 184, "searchname": "slidetoggle", "name": "slideToggle", "type": "function", "category": "Effects", "subcategory": "Sliding", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion.", "longdesc": "<p>Only the height is adjusted for this animation, causing all matched elements to be hidden or shown in a \"sliding\" manner.</p>", "params": [{"optional": false, "name": "speed", "type": "String, Number ", "desc": "A string representing one of the three predefined speeds (\"slow\", \"normal\", or \"fast\") or the number of milliseconds to run the animation (e.g. 1000)."}, {"optional": true, "name": "callback", "type": "Function", "desc": "A function to be executed whenever the animation completes, executes once for each element animated against.\n<pre>function callback() {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(\"button\").click(function () {\n $(\"p\").slideToggle(\"slow\");\n });\n", "htmlCode": "\n $(\"button\").click(function () {\n $(\"p\").slideToggle(\"slow\");\n });\n", "desc": "Animates all paragraphs to slide up or down, completing the animation within 600 milliseconds.", "css": "\n p { width:400px; }\n ", "inhead": "", "html": "<button>Toggle</button>\n <p>\n This is the paragraph to end all paragraphs. You\n should feel <em>lucky</em> to have seen such a paragraph in\n your life. Congratulations!\n </p>", "exampleId": "184iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"button\").click(function () {\n $(\"p\").slideToggle(\"slow\");\n });\n\n });\n</script>\n<style>\n\n p { width:400px; }\n \n</style>\n</head>\n<body>\n<button>Toggle</button>\n <p>\n This is the paragraph to end all paragraphs. You\n should feel <em>lucky</em> to have seen such a paragraph in\n your life. Congratulations!\n </p>\n</body>\n</html>"}, {"code": "\n $(\"button\").click(function () {\n $(\"div:not(.still)\").slideToggle(\"slow\", function () {\n var n = parseInt($(\"span\").text(), 10);\n $(\"span\").text(n + 1);\n });\n });\n", "htmlCode": "\n $(\"button\").click(function () {\n $(\"div:not(.still)\").slideToggle(\"slow\", function () {\n var n = parseInt($(\"span\").text(), 10);\n $(\"span\").text(n + 1);\n });\n });\n", "desc": "Animates divs between dividers with a toggle that makes some appear and some disappear.", "css": "\n div { background:#b977d1; margin:3px; width:60px; \n height:60px; float:left; }\n div.still { background:#345; width:5px; }\n div.hider { display:none; }\n span { color:red; }\n ", "inhead": "", "html": "<button>Toggle</button> There have been <span>0</span> toggled divs.\n <div></div><div class=\"still\"></div>\n <div style=\"display:none;\"></div><div class=\"still\"></div>\n <div></div><div class=\"still\"></div>\n <div class=\"hider\"></div><div class=\"still\"></div>\n <div class=\"hider\"></div><div class=\"still\"></div>\n <div></div>", "exampleId": "184iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"button\").click(function () {\n $(\"div:not(.still)\").slideToggle(\"slow\", function () {\n var n = parseInt($(\"span\").text(), 10);\n $(\"span\").text(n + 1);\n });\n });\n\n });\n</script>\n<style>\n\n div { background:#b977d1; margin:3px; width:60px; \n height:60px; float:left; }\n div.still { background:#345; width:5px; }\n div.hider { display:none; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<button>Toggle</button> There have been <span>0</span> toggled divs.\n <div></div><div class=\"still\"></div>\n <div style=\"display:none;\"></div><div class=\"still\"></div>\n <div></div><div class=\"still\"></div>\n <div class=\"hider\"></div><div class=\"still\"></div>\n <div class=\"hider\"></div><div class=\"still\"></div>\n <div></div>\n</body>\n</html>"}]}, "fadein185": {"id": 185, "searchname": "fadein", "name": "fadeIn", "type": "function", "category": "Effects", "subcategory": "Fading", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Fade in all matched elements by adjusting their opacity and firing an optional callback after completion.", "longdesc": "<p>Only the opacity is adjusted for this animation, meaning that all of the matched elements should already have some form of height and width associated with them.</p>", "params": [{"optional": false, "name": "speed", "type": "String, Number ", "desc": "A string representing one of the three predefined speeds (\"slow\", \"normal\", or \"fast\") or the number of milliseconds to run the animation (e.g. 1000)."}, {"optional": true, "name": "callback", "type": "Function", "desc": "A function to be executed whenever the animation completes, executes once for each element animated against.\n<pre>function callback() {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(document.body).click(function () {\n $(\"div:hidden:first\").fadeIn(\"slow\");\n });\n", "htmlCode": "\n $(document.body).click(function () {\n $(\"div:hidden:first\").fadeIn(\"slow\");\n });\n", "desc": "Animates hidden divs to fade in one by one, completing each animation within 600 milliseconds.", "css": "\n span { color:red; cursor:pointer; }\n div { margin:3px; width:80px; display:none;\n height:80px; float:left; }\n div#one { background:#f00; }\n div#two { background:#0f0; }\n div#three { background:#00f; }\n ", "inhead": "", "html": "<span>Click here...</span>\n <div id=\"one\"></div>\n <div id=\"two\"></div>\n <div id=\"three\"></div>", "exampleId": "185iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(document.body).click(function () {\n $(\"div:hidden:first\").fadeIn(\"slow\");\n });\n\n });\n</script>\n<style>\n\n span { color:red; cursor:pointer; }\n div { margin:3px; width:80px; display:none;\n height:80px; float:left; }\n div#one { background:#f00; }\n div#two { background:#0f0; }\n div#three { background:#00f; }\n \n</style>\n</head>\n<body>\n<span>Click here...</span>\n <div id=\"one\"></div>\n <div id=\"two\"></div>\n <div id=\"three\"></div>\n</body>\n</html>"}, {"code": "\n $(\"a\").click(function () {\n $(\"div\").fadeIn(3000, function () {\n $(\"span\").fadeIn(100);\n });\n return false;\n }); \n", "htmlCode": "\n $(\"a\").click(function () {\n $(\"div\").fadeIn(3000, function () {\n $(\"span\").fadeIn(100);\n });\n return false;\n }); \n", "desc": "Fades a red block in over the text. Once the animation is done, it quickly fades in more text on top.", "css": "\n p { position:relative; width:400px; height:90px; }\n div { position:absolute; width:400px; height:65px; \n font-size:36px; text-align:center; \n color:yellow; background:red;\n padding-top:25px; \n top:0; left:0; display:none; }\n span { display:none; }\n ", "inhead": "", "html": "<p>\n Let it be known that the party of the first part\n and the party of the second part are henceforth\n and hereto directed to assess the allegations\n for factual correctness... (<a href=\"#\">click!</a>)\n <div><span>CENSORED!</span></div>\n </p>", "exampleId": "185iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"a\").click(function () {\n $(\"div\").fadeIn(3000, function () {\n $(\"span\").fadeIn(100);\n });\n return false;\n }); \n\n });\n</script>\n<style>\n\n p { position:relative; width:400px; height:90px; }\n div { position:absolute; width:400px; height:65px; \n font-size:36px; text-align:center; \n color:yellow; background:red;\n padding-top:25px; \n top:0; left:0; display:none; }\n span { display:none; }\n \n</style>\n</head>\n<body>\n<p>\n Let it be known that the party of the first part\n and the party of the second part are henceforth\n and hereto directed to assess the allegations\n for factual correctness... (<a href=\"#\">click!</a>)\n <div><span>CENSORED!</span></div>\n </p>\n</body>\n</html>"}]}, "fadeout186": {"id": 186, "searchname": "fadeout", "name": "fadeOut", "type": "function", "category": "Effects", "subcategory": "Fading", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Fade out all matched elements by adjusting their opacity and firing an optional callback after completion.", "longdesc": "<p>Only the opacity is adjusted for this animation, meaning that all of the matched elements should already have some form of height and width associated with them.</p>", "params": [{"optional": false, "name": "speed", "type": "String, Number ", "desc": "A string representing one of the three predefined speeds (\"slow\", \"normal\", or \"fast\") or the number of milliseconds to run the animation (e.g. 1000)."}, {"optional": true, "name": "callback", "type": "Function", "desc": "A function to be executed whenever the animation completes, executes once for each element animated against.\n<pre>function callback() {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(\"p\").click(function () {\n $(\"p\").fadeOut(\"slow\");\n });\n", "htmlCode": "\n $(\"p\").click(function () {\n $(\"p\").fadeOut(\"slow\");\n });\n", "desc": "Animates all paragraphs to fade out, completin
10000
g the animation within 600 milliseconds.", "css": "\n p { font-size:150%; cursor:pointer; }\n ", "inhead": "", "html": "<p>\n If you click on this paragraph\n you'll see it just fade away.\n </p>", "exampleId": "186iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"p\").click(function () {\n $(\"p\").fadeOut(\"slow\");\n });\n\n });\n</script>\n<style>\n\n p { font-size:150%; cursor:pointer; }\n \n</style>\n</head>\n<body>\n<p>\n If you click on this paragraph\n you'll see it just fade away.\n </p>\n</body>\n</html>"}, {"code": "\n $(\"span\").click(function () {\n $(this).fadeOut(1000, function () {\n $(\"div\").text(\"'\" + $(this).text() + \"' has faded!\");\n $(this).remove();\n });\n });\n $(\"span\").hover(function () {\n $(this).addClass(\"hilite\");\n }, function () {\n $(this).removeClass(\"hilite\");\n });\n", "htmlCode": "\n $(\"span\").click(function () {\n $(this).fadeOut(1000, function () {\n $(\"div\").text(\"'\" + $(this).text() + \"' has faded!\");\n $(this).remove();\n });\n });\n $(\"span\").hover(function () {\n $(this).addClass(\"hilite\");\n }, function () {\n $(this).removeClass(\"hilite\");\n });\n", "desc": "Fades out spans in one section that you click on.", "css": "\n span { cursor:pointer; }\n span.hilite { background:yellow; }\n div { display:inline; color:red; }\n ", "inhead": "", "html": "<h3>Find the modifiers - <div></div></h3>\n <p>\n If you <span>really</span> want to go outside\n <span>in the cold</span> then make sure to wear\n your <span>warm</span> jacket given to you by\n your <span>favorite</span> teacher.\n </p>", "exampleId": "186iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"span\").click(function () {\n $(this).fadeOut(1000, function () {\n $(\"div\").text(\"'\" + $(this).text() + \"' has faded!\");\n $(this).remove();\n });\n });\n $(\"span\").hover(function () {\n $(this).addClass(\"hilite\");\n }, function () {\n $(this).removeClass(\"hilite\");\n });\n\n });\n</script>\n<style>\n\n span { cursor:pointer; }\n span.hilite { background:yellow; }\n div { display:inline; color:red; }\n \n</style>\n</head>\n<body>\n<h3>Find the modifiers - <div></div></h3>\n <p>\n If you <span>really</span> want to go outside\n <span>in the cold</span> then make sure to wear\n your <span>warm</span> jacket given to you by\n your <span>favorite</span> teacher.\n </p>\n</body>\n</html>"}]}, "fadeto187": {"id": 187, "searchname": "fadeto", "name": "fadeTo", "type": "function", "category": "Effects", "subcategory": "Fading", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.", "longdesc": "<p>Only the opacity is adjusted for this animation, meaning that all of the matched elements should already have some form of height and width associated with them.</p>", "params": [{"optional": false, "name": "speed", "type": "String, Number ", "desc": "A string representing one of the three predefined speeds (\"slow\", \"normal\", or \"fast\") or the number of milliseconds to run the animation (e.g. 1000)."}, {"optional": false, "name": "opacity", "type": "Number ", "desc": "The opacity to fade to (a number from 0 to 1)."}, {"optional": true, "name": "callback", "type": "Function", "desc": "A function to be executed whenever the animation completes, executed once for each element animated against.\n<pre>function callback() {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "\n $(\"p:first\").click(function () {\n $(this).fadeTo(\"slow\", 0.33);\n });\n", "htmlCode": "\n $(\"p:first\").click(function () {\n $(this).fadeTo(\"slow\", 0.33);\n });\n", "desc": "Animates first paragraph to fade to an opacity of 0.33 (33%, about one third visible), completing the animation within 600 milliseconds.", "css": "", "inhead": "", "html": "<p>\n Click this paragraph to see it fade.\n </p>\n <p>\n Compare to this one that won't fade.\n </p>", "exampleId": "187iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"p:first\").click(function () {\n $(this).fadeTo(\"slow\", 0.33);\n });\n\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<p>\n Click this paragraph to see it fade.\n </p>\n <p>\n Compare to this one that won't fade.\n </p>\n</body>\n</html>"}, {"code": "\n $(\"div\").click(function () {\n $(this).fadeTo(\"fast\", Math.random());\n });\n", "htmlCode": "\n $(\"div\").click(function () {\n $(this).fadeTo(\"fast\", Math.random());\n });\n", "desc": "Fade div to a random opacity on each click, completing the animation within 200 milliseconds.", "css": "\n p { width:80px; margin:0; padding:5px; }\n div { width:40px; height:40px; position:absolute; }\n div#one { top:0; left:0; background:#f00; }\n div#two { top:20px; left:20px; background:#0f0; }\n div#three { top:40px; left:40px; background:#00f; }\n ", "inhead": "", "html": "<p>And this is the library that John built...</p>\n <div id=\"one\"></div>\n <div id=\"two\"></div>\n <div id=\"three\"></div>", "exampleId": "187iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"div\").click(function () {\n $(this).fadeTo(\"fast\", Math.random());\n });\n\n });\n</script>\n<style>\n\n p { width:80px; margin:0; padding:5px; }\n div { width:40px; height:40px; position:absolute; }\n div#one { top:0; left:0; background:#f00; }\n div#two { top:20px; left:20px; background:#0f0; }\n div#three { top:40px; left:40px; background:#00f; }\n \n</style>\n</head>\n<body>\n<p>And this is the library that John built...</p>\n <div id=\"one\"></div>\n <div id=\"two\"></div>\n <div id=\"three\"></div>\n</body>\n</html>"}, {"code": "\n var getPos = function (n) {\n return (Math.floor(n) * 90) + \"px\";\n };\n $(\"p\").each(function (n) {\n var r = Math.floor(Math.random() * 3);\n var tmp = $(this).text();\n $(this).text($(\"p:eq(\" + r + \")\").text());\n $(\"p:eq(\" + r + \")\").text(tmp);\n $(this).css(\"left\", getPos(n));\n });\n $(\"div\").each(function (n) {\n $(this).css(\"left\", getPos(n));\n })\n .css(\"cursor\", \"pointer\")\n .click(function () {\n $(this).fadeTo(250, 0.25, function () {\n $(this).css(\"cursor\", \"\")\n .prev().css({\"font-weight\": \"bolder\",\n \"font-style\": \"italic\"});\n });\n });\n", "htmlCode": "\n var getPos = function (n) {\n return (Math.floor(n) * 90) + \"px\";\n };\n $(\"p\").each(function (n) {\n var r = Math.floor(Math.random() * 3);\n var tmp = $(this).text();\n $(this).text($(\"p:eq(\" + r + \")\").text());\n $(\"p:eq(\" + r + \")\").text(tmp);\n $(this).css(\"left\", getPos(n));\n });\n $(\"div\").each(function (n) {\n $(this).css(\"left\", getPos(n));\n })\n .css(\"cursor\", \"pointer\")\n .click(function () {\n $(this).fadeTo(250, 0.25, function () {\n $(this).css(\"cursor\", \"\")\n .prev().css({\"font-weight\": \"bolder\",\n \"font-style\": \"italic\"});\n });\n });\n", "desc": "Find the right answer! The fade will take 250 milliseconds and change various styles when it completes.", "css": "\n div, p { width:80px; height:40px; top:0; margin:0; \n position:absolute; padding-top:8px; }\n p { background:#fcc; text-align:center; }\n div { background:blue; }\n ", "inhead": "", "html": "<p>Wrong</p>\n <div></div>\n <p>Wrong</p>\n <div></div>\n <p>Right!</p>\n <div></div>", "exampleId": "187iframeExample2", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var getPos = function (n) {\n return (Math.floor(n) * 90) + \"px\";\n };\n $(\"p\").each(function (n) {\n var r = Math.floor(Math.random() * 3);\n var tmp = $(this).text();\n $(this).text($(\"p:eq(\" + r + \")\").text());\n $(\"p:eq(\" + r + \")\").text(tmp);\n $(this).css(\"left\", getPos(n));\n });\n $(\"div\").each(function (n) {\n $(this).css(\"left\", getPos(n));\n })\n .css(\"cursor\", \"pointer\")\n .click(function () {\n $(this).fadeTo(250, 0.25, function () {\n $(this).css(\"cursor\", \"\")\n .prev().css({\"font-weight\": \"bolder\",\n \"font-style\": \"italic\"});\n });\n });\n\n });\n</script>\n<style>\n\n div, p { width:80px; height:40px; top:0; margin:0; \n position:absolute; padding-top:8px; }\n p { background:#fcc; text-align:center; }\n div { background:blue; }\n \n</style>\n</head>\n<body>\n<p>Wrong</p>\n <div></div>\n <p>Wrong</p>\n <div></div>\n <p>Right!</p>\n <div></div>\n</body>\n</html>"}]}, "animate188": {"id": 188, "searchname": "animate", "name": "animate", "type": "function", "category": "Effects", "subcategory": "Custom", "return": "jQuery", "added": "1.0", "sample": "", "desc": "A function for making your own, custom animations...", "longdesc": "<p>The key aspect of this function is the object of style properties that will be animated, and to what end. Each key within the object represents a style property that will also be animated (for example: \"height\", \"top\", or \"opacity\").</p><p>Note that properties should be specified using camel case eg. marginLeft instead of margin-left.</p><p>The value associated with the key represents to what end the property will be animated. If a number is provided as the value, then the style property will be transitioned from its current state to that new number. Otherwise if the string \"hide\", \"show\", or \"toggle\" is provided, a default animation will be constructed for that property. Only properties that take numeric values are supported (e.g. backgroundColor is not supported by animate()).</p><p>As of jQuery 1.2 you can now animate properties by em and % (where applicable). Additionally, in jQuery 1.2, you can now do relative animations - specifying a \"<em>+=</em>\" or \"<em>-=</em>\" in front of the property value to move the element positively, or negatively, relative to the current position.</p>", "params": [{"optional": false, "name": "params", "type": "Options", "desc": "A set of style attributes that you wish to animate, and to what end."}, {"optional": true, "name": "duration", "type": "String, Number ", "desc": "A string representing one of the three predefined speeds (\"slow\", \"normal\", or \"fast\") or the number of milliseconds to run the animation (e.g. 1000)."}, {"optional": true, "name": "easing", "type": "String ", "desc": "The name of the easing effect that you want to use (Plugin Required). There are two built-in values, \"linear\" and \"swing\"."}, {"optional": true, "name": "callback", "type": "Function", "desc": "A function to be executed whenever the animation completes, executes once for each element animated against."}], "options": [], "examples": [{"code": "\n // Using multiple unit types within one animation.\n $(\"#go\").click(function(){\n $(\"#block\").animate({ \n width: \"70%\",\n opacity: 0.4,\n marginLeft: \"0.6in\",\n fontSize: \"3em\", \n borderWidth: \"10px\"\n }, 1500 );\n });\n", "htmlCode": "\n // Using multiple unit types within one animation.\n $(\"#go\").click(function(){\n $(\"#block\").animate({ \n width: \"70%\",\n opacity: 0.4,\n marginLeft: \"0.6in\",\n fontSize: \"3em\", \n borderWidth: \"10px\"\n }, 1500 );\n });\n", "desc": "Click the button to animate the div with a number of different properties.", "css": "\n div { \n background-color:#bca; \n width:100px; \n border:1px solid green;\n }\n ", "inhead": "", "html": "<button id=\"go\">» Run</button>\n <div id=\"block\">Hello!</div>", "exampleId": "188iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n // Using multiple unit types within one animation.\n $(\"#go\").click(function(){\n $(\"#block\").animate({ \n width: \"70%\",\n opacity: 0.4,\n marginLeft: \"0.6in\",\n fontSize: \"3em\", \n borderWidth: \"10px\"\n }, 1500 );\n });\n\n });\n</script>\n<style>\n\n div { \n background-color:#bca; \n width:100px; \n border:1px solid green;\n }\n \n</style>\n</head>\n<body>\n<button id=\"go\">» Run</button>\n <div id=\"block\">Hello!</div>\n</body>\n</html>"}, {"code": "\n $(\"#right\").click(function(){\n $(\".block\").animate({\"left\": \"+=50px\"}, \"slow\");\n });\n\n $(\"#left\").click(function(){\n $(\".block\").animate({\"left\": \"-=50px\"}, \"slow\");\n });\n", "htmlCode": "\n $(\"#right\").click(function(){\n $(\".block\").animate({\"left\": \"+=50px\"}, \"slow\");\n });\n\n $(\"#left\").click(function(){\n $(\".block\").animate({\"left\": \"-=50px\"}, \"slow\");\n });\n", "desc": "Shows a div animate with a relative move. Click several times on the buttons to see the relative animations queued up.", "css": "\n div { \n position:absolute; \n background-color:#abc; \n left:50px;\n width:90px; \n height:90px;\n margin:5px; \n }\n ", "inhead": "", "html": "<button id=\"left\">«</button> <button id=\"right\">»</button>\n<div class=\"block\"></div>\n", "exampleId": "188iframeExample1", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"#right\").click(function(){\n $(\".block\").animate({\"left\": \"+=50px\"}, \"slow\");\n });\n\n $(\"#left\").click(function(){\n $(\".block\").animate({\"left\": \"-=50px\"}, \"slow\");\n });\n\n });\n</script>\n<style>\n\n div { \n position:absolute; \n background-color:#abc; \n left:50px;\n width:90px; \n height:90px;\n margin:5px; \n }\n \n</style>\n</head>\n<body>\n<button id=\"left\">«</button> <button id=\"right\">»</button>\n<div class=\"block\"></div>\n\n</body>\n</html>"}, {"code": "$(\"p\").animate({\n \"height\": \"toggle\", \"opacity\": \"toggle\"\n }, \"slow\");", "htmlCode": "$(\"p\").animate({\n \"height\": \"toggle\", \"opacity\": \"toggle\"\n }, \"slow\");", "desc": "Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.", "css": "", "inhead": "", "html": "", "exampleId": "188iframeExample2", "runCode": ""}, {"code": "$(\"p\").animate({\n \"left\": \"50\", \"opacity\": 1\n }, 500);\n", "htmlCode": "$(\"p\").animate({\n \"left\": \"50\", \"opacity\": 1\n }, 500);\n", "desc": "Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds.", "css": "", "inhead": "", "html": "", "exampleId": "188iframeExample3", "runCode": ""}, {"code": "$(\"p\").animate({\n \"opacity\": \"show\"\n }, \"slow\", \"easein\");", "htmlCode": "$(\"p\").animate({\n \"opacity\": \"show\"\n }, \"slow\", \"easein\");", "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.", "css": "", "inhead": "", "html": "", "exampleId": "188iframeExample4", "runCode": ""}]}, "animate189": {"id": 189, "searchname": "animate", "name": "animate", "type": "function", "category": "Effects", "subcategory": "Custom", "return": "jQuery", "added": "1.0", "sample": "", "desc": "A function for making your own, custom animations.", "longdesc": "<p>The key aspect of this function is the object of style properties that will be animated, and to what end. Each key within the object represents a style property that will also be animated (for example: \"height\", \"top\", or \"opacity\").</p><p>Note that properties should be specified using camel case eg. marginLeft instead of margin-left.</p><p>The value associated with the key represents to what end the property will be animated. If a number is provided as the value, then the style property will be transitioned from its current state to that new number. Otherwise if the string \"hide\", \"show\", or \"toggle\" is provided, a default animation will be constructed for that property. </p>", "params": [{"optional": false, "name": "params", "type": "Options", "desc": "A set of style attributes that you wish to animate, and to what end."}, {"optional": false, "name": "options", "type": "Options ", "desc": "A set of options with which to configure the animation."}], "options": [{"name": "duration", "default": "\"normal\"", "type": "String, Number", "desc": "A string representing one of the three predefined speeds (\"slow\", \"normal\", or \"fast\") or the number of milliseconds to run the animation (e.g. 1000)."}, {"name": "easing", "default": "\"swing\"", "type": "String", "desc": "The name of the easing effect that you want to use (Plugin Required). There are two built-in values, \"linear\" and \"swing\"."}, {"name": "complete", "default": "", "type": "Function", "desc": "A function to be executed whenever the animation completes, executes once for each element animated against."}, {"name": "step", "default": "", "type": "Callback", "desc": ""}, {"name": "queue", "default": "true", "type": "Boolean", "desc": "Setting this to false will make the animation skip the queue and will begin running immediately. (Added in jQuery 1.2)"}], "examples": [{"code": "\n $(\"#go1\").click(function(){\n $(\"#block1\").animate( { width:\"90%\" }, { queue:false, duration:3000 } )\n .animate( { fontSize:\"24px\" }, 1500 )\n .animate( { borderRightWidth:\"15px\" }, 1500);\n });\n\n $(\"#go2\").click(function(){\n $(\"#block2\").animate( { width:\"90%\"}, 1000 )\n .animate( { fontSize:\"24px\" } , 1000 )\n .animate( { borderLeftWidth:\"15px\" }, 1000);\n });\n\n $(\"#go3\").click(function(){\n $(\"#go1\").add(\"#go2\").click();\n });\n\n $(\"#go4\").click(function(){\n $(\"div\").css({width:\"\", fontSize:\"\", borderWidth:\"\"});\n });\n", "htmlCode": "\n $(\"#go1\").click(function(){\n $(\"#block1\").animate( { width:\"90%\" }, { queue:false, duration:3000 } )\n .animate( { fontSize:\"24px\" }, 1500 )\n .animate( { borderRightWidth:\"15px\" }, 1500);\n });\n\n $(\"#go2\").click(function(){\n $(\"#block2\").animate( { width:\"90%\"}, 1000 )\n .animate( { fontSize:\"24px\" } , 1000 )\n .animate( { borderLeftWidth:\"15px\" }, 1000);\n });\n\n $(\"#go3\").click(function(){\n $(\"#go1\").add(\"#go2\").click();\n });\n\n $(\"#go4\").click(function(){\n $(\"div\").css({width:\"\", fontSize:\"\", borderWidth:\"\"});\n });\n", "desc": "The first button shows how an unqueued animation works. It expands the div out to 90% width <strong>while</strong> the font-size is increasing. Once the font-size change is complete, the border animation will begin.\n\nThe second button starts a traditional chained animation, where each animation will start once the previous animation on the element has completed.", "css": "div { \n background-color:#bca; \n width:200px;\n height:1.1em;\n text-align:center;\n border:2px solid green;\n margin:3px;\n font-size:14px;\n }\n button {\n font-size:14px;\n }\n ", "inhead": "", "html": "<button id=\"go1\">» Animate Block1</button>\n <button id=\"go2\">» Animate Block2</button>\n <button id=\"go3\">» Animate Both</button>\n <button id=\"go4\">» Reset</button>\n <div id=\"block1\">Block1</div>\n <div id=\"block2\">Block2</div>", "exampleId": "189iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"#go1\").click(function(){\n $(\"#block1\").animate( { width:\"90%\" }, { queue:false, duration:3000 } )\n .animate( { fontSize:\"24px\" }, 1500 )\n .animate( { borderRightWidth:\"15px\" }, 1500);\n });\n\n $(\"#go2\").click(function(){\n $(\"#block2\").animate( { width:\"90%\"}, 1000 )\n .animate( { fontSize:\"24px\" } , 1000 )\n .animate( { borderLeftWidth:\"15px\" }, 1000);\n });\n\n $(\"#go3\").click(function(){\n $(\"#go1\").add(\"#go2\").click();\n });\n\n $(\"#go4\").click(function(){\n $(\"div\").css({width:\"\", fontSize:\"\", borderWidth:\"\"});\n });\n\n });\n</script>\n<style>\ndiv { \n background-color:#bca; \n width:200px;\n height:1.1em;\n text-align:center;\n border:2px solid green;\n margin:3px;\n font-size:14px;\n }\n button {\n font-size:14px;\n }\n \n</style>\n</head>\n<body>\n<button id=\"go1\">» Animate Block1</button>\n <button id=\"go2\">» Animate Block2</button>\n <button id=\"go3\">» Animate Both</button>\n <button id=\"go4\">» Reset</button>\n <div id=\"block1\">Block1</div>\n <div id=\"block2\">Block2</div>\n</body>\n</html>"}, {"code": "$(\"p\").animate({\n \"height\": \"toggle\", \"opacity\": \"toggle\"\n }, { duration: \"slow\" });", "htmlCode": "$(\"p\").animate({\n \"height\": \"toggle\", \"opacity\": \"toggle\"\n }, { duration: \"slow\" });", "desc": "Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.", "css": "", "inhead": "", "html": "", "exampleId": "189iframeExample1", "runCode": ""}, {"code": "$(\"p\").animate({\n left: \"50px\", opacity: 1\n }, { duration: 500, queue: false });", "htmlCode": "$(\"p\").animate({\n left: \"50px\", opacity: 1\n }, { duration: 500, queue: false });", "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 <em>outside</em> the queue, meaning it will automatically start without waiting for its turn.", "css": "", "inhead": "", "html": "", "exampleId": "189iframeExample2", "runCode": ""}, {"code": "$(\"p\").animate({\n \"opacity\": \"show\"\n }, { \"duration\": \"slow\", \"easing\": \"easein\" });", "htmlCode": "$(\"p\").animate({\n \"opacity\": \"show\"\n }, { \"duration\": \"slow\", \"easing\": \"easein\" });", "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.", "css": "", "inhead": "", "html": "", "exampleId": "189iframeExample3", "runCode": ""}]}, "stop190": {"id": 190, "searchname": "stop", "name": "stop", "type": "function", "category": "Effects", "subcategory": "Custom", "return": "jQuery", "added": "1.2", "sample": "", "desc": "Stops all the currently running animations on all the specified elements. ", "longdesc": "<p>If any animations are queued to run, then they will begin immediately.</p>", "params": [], "examples": [{"code": "\n // Start animation\n $(\"#go\").click(function(){\n $(\".block\").animate({left: '+=100px'}, 2000);\n });\n\n // Stop animation when button is clicked\n $(\"#stop\").click(function(){\n $(\".block\").stop();\n });\n\n // Start animation in the opposite direction\n $(\"#back\").click(function(){\n $(\".block\").animate({left: '-=100px'}, 2000);\n });\n", "htmlCode": "\n // Start animation\n $(\"#go\").click(function(){\n $(\".block\").animate({left: '+=100px'}, 2000);\n });\n\n // Stop animation when button is clicked\n $(\"#stop\").click(function(){\n $(\".block\").stop();\n });\n\n // Start animation in the opposite direction\n $(\"#back\").click(function(){\n $(\".block\").animate({left: '-=100px'}, 2000);\n });\n", "desc": "Click the Go button once to start the animation, then click the STOP button to stop it where it's currently positioned. Another option is to click several buttons to queue them up and see that stop just kills the currently playing one.", "css": "div { \n position: absolute; \n background-color: #abc;\n left: 0px;\n top:30px;\n width: 60px; \n height: 60px;\n margin: 5px; \n }\n ", "inhead": "", "html": "<button id=\"go\">Go</button> \n <button id=\"stop\">STOP!</button>\n <button id=\"back\">Back</button>\n <div class=\"block\"></div>", "exampleId": "190iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n // Start animation\n $(\"#go\").click(function(){\n $(\".block\").animate({left: '+=100px'}, 2000);\n });\n\n // Stop animation when button is clicked\n $(\"#stop\").click(function(){\n $(\".block\").stop();\n });\n\n // Start animation in the opposite direction\n $(\"#back\").click(function(){\n $(\".block\").animate({left: '-=100px'}, 2000);\n });\n\n });\n</script>\n<style>\ndiv { \n position: absolute; \n background-color: #abc;\n left: 0px;\n top:30px;\n width: 60px; \n height: 60px;\n margin: 5px; \n }\n \n</style>\n</head>\n<body>\n<button id=\"go\">Go</button> \n <button id=\"stop\">STOP!</button>\n <button id=\"back\">Back</button>\n <div class=\"block\"></div>\n</body>\n</html>"}]}, "queue191": {"id": 191, "searchname": "queue", "name": "queue", "type": "function", "category": "Effects", "subcategory": "Custom", "return": "Array<Function>", "added": "1.2", "sample": "", "desc": "Returns a reference to the first element's queue (which is an array of functions).", "longdesc": "", "params": [], "examples": [{"code": "\n $(\"#show\").click(function () {\n var n = $(\"div\").queue(\"fx\");\n $(\"span\").text(\"Queue length is: \" + n.length);\n });\n function runIt() {\n $(\"div\").show(\"slow\");\n $(\"div\").animate({left:'+=200'},2000);\n $(\"div\").slideToggle(1000);\n $(\"div\").slideToggle(\"fast\");\n $(\"div\").animate({left:'-=200'},1500);\n $(\"div\").hide(\"slow\");\n $(\"div\").show(1200);\n $(\"div\").slideUp(\"normal\", runIt);\n }\n runIt();\n", "htmlCode": "\n $(\"#show\").click(function () {\n var n = $(\"div\").queue(\"fx\");\n $(\"span\").text(\"Queue length is: \" + n.length);\n });\n function runIt() {\n $(\"div\").show(\"slow\");\n $(\"div\").animate({left:'+=200'},2000);\n $(\"div\").slideToggle(1000);\n $(\"div\").slideToggle(\"fast\");\n $(\"div\").animate({left:'-=200'},1500);\n $(\"div\").hide(\"slow\");\n $(\"div\").show(1200);\n $(\"div\").slideUp(\"normal\", runIt);\n }\n runIt();\n", "desc": "Show the length of the queue.", "css": "\n div { margin:3px; width:40px; height:40px;\n position:absolute; left:0px; top:30px; \n background:green; display:none; }\n div.newcolor { background:blue; }\n span { color:red; }\n ", "inhead": "", "html": "<button id=\"show\">Show Length of Queue</button>\n <span></span>\n <div></div>", "exampleId": "191iframeExample0&qu
10000
ot;, "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"#show\").click(function () {\n var n = $(\"div\").queue(\"fx\");\n $(\"span\").text(\"Queue length is: \" + n.length);\n });\n function runIt() {\n $(\"div\").show(\"slow\");\n $(\"div\").animate({left:'+=200'},2000);\n $(\"div\").slideToggle(1000);\n $(\"div\").slideToggle(\"fast\");\n $(\"div\").animate({left:'-=200'},1500);\n $(\"div\").hide(\"slow\");\n $(\"div\").show(1200);\n $(\"div\").slideUp(\"normal\", runIt);\n }\n runIt();\n\n });\n</script>\n<style>\n\n div { margin:3px; width:40px; height:40px;\n position:absolute; left:0px; top:30px; \n background:green; display:none; }\n div.newcolor { background:blue; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<button id=\"show\">Show Length of Queue</button>\n <span></span>\n <div></div>\n</body>\n</html>"}]}, "queue192": {"id": 192, "searchname": "queue", "name": "queue", "type": "function", "category": "Effects", "subcategory": "Custom", "return": "jQuery", "added": "1.2", "sample": "", "desc": "Adds a new function, to be executed, onto the end of the queue of all matched elements.", "longdesc": "", "params": [{"optional": false, "name": "callback", "type": "Function", "desc": "The function to add to the queue.\n<pre>function callback() {\n this; // dom element\n // to continue the queue you must call\n jQuery(this).dequeue();\n}\n</pre>"}], "examples": [{"code": "\n $(document.body).click(function () {\n $(\"div\").show(\"slow\");\n $(\"div\").animate({left:'+=200'},2000);\n $(\"div\").queue(function () {\n $(this).addClass(\"newcolor\");\n $(this).dequeue();\n });\n $(\"div\").animate({left:'-=200'},500);\n $(\"div\").queue(function () {\n $(this).removeClass(\"newcolor\");\n $(this).dequeue();\n });\n $(\"div\").slideUp();\n });\n", "htmlCode": "\n $(document.body).click(function () {\n $(\"div\").show(\"slow\");\n $(\"div\").animate({left:'+=200'},2000);\n $(\"div\").queue(function () {\n $(this).addClass(\"newcolor\");\n $(this).dequeue();\n });\n $(\"div\").animate({left:'-=200'},500);\n $(\"div\").queue(function () {\n $(this).removeClass(\"newcolor\");\n $(this).dequeue();\n });\n $(\"div\").slideUp();\n });\n", "desc": "Queue a custom function.", "css": "\n div { margin:3px; width:40px; height:40px;\n position:absolute; left:0px; top:30px; \n background:green; display:none; }\n div.newcolor { background:blue; }\n ", "inhead": "", "html": "Click here...\n <div></div>", "exampleId": "192iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(document.body).click(function () {\n $(\"div\").show(\"slow\");\n $(\"div\").animate({left:'+=200'},2000);\n $(\"div\").queue(function () {\n $(this).addClass(\"newcolor\");\n $(this).dequeue();\n });\n $(\"div\").animate({left:'-=200'},500);\n $(\"div\").queue(function () {\n $(this).removeClass(\"newcolor\");\n $(this).dequeue();\n });\n $(\"div\").slideUp();\n });\n\n });\n</script>\n<style>\n\n div { margin:3px; width:40px; height:40px;\n position:absolute; left:0px; top:30px; \n background:green; display:none; }\n div.newcolor { background:blue; }\n \n</style>\n</head>\n<body>\nClick here...\n <div></div>\n</body>\n</html>"}]}, "queue193": {"id": 193, "searchname": "queue", "name": "queue", "type": "function", "category": "Effects", "subcategory": "Custom", "return": "jQuery", "added": "1.2", "sample": "", "desc": "Replaces the queue of all matched element with this new queue (the array of functions).", "longdesc": "", "params": [{"optional": false, "name": "queue", "type": "Array<Function>", "desc": "The queue to replace all the queues with. The functions have the same parameters and this value as queue(callback)."}], "examples": [{"code": "\n $(\"#start\").click(function () {\n $(\"div\").show(\"slow\");\n $(\"div\").animate({left:'+=200'},5000);\n $(\"div\").queue(function () {\n $(this).addClass(\"newcolor\");\n $(this).dequeue();\n });\n $(\"div\").animate({left:'-=200'},1500);\n $(\"div\").queue(function () {\n $(this).removeClass(\"newcolor\");\n $(this).dequeue();\n });\n $(\"div\").slideUp();\n });\n $(\"#stop\").click(function () {\n $(\"div\").queue(\"fx\", []);\n $(\"div\").stop();\n });\n", "htmlCode": "\n $(\"#start\").click(function () {\n $(\"div\").show(\"slow\");\n $(\"div\").animate({left:'+=200'},5000);\n $(\"div\").queue(function () {\n $(this).addClass(\"newcolor\");\n $(this).dequeue();\n });\n $(\"div\").animate({left:'-=200'},1500);\n $(\"div\").queue(function () {\n $(this).removeClass(\"newcolor\");\n $(this).dequeue();\n });\n $(\"div\").slideUp();\n });\n $(\"#stop\").click(function () {\n $(\"div\").queue(\"fx\", []);\n $(\"div\").stop();\n });\n", "desc": "Set a queue array to delete the queue.", "css": "\n div { margin:3px; width:40px; height:40px;\n position:absolute; left:0px; top:30px; \n background:green; display:none; }\n div.newcolor { background:blue; }\n ", "inhead": "", "html": "<button id=\"start\">Start</button>\n <button id=\"stop\">Stop</button>\n <div></div>", "exampleId": "193iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"#start\").click(function () {\n $(\"div\").show(\"slow\");\n $(\"div\").animate({left:'+=200'},5000);\n $(\"div\").queue(function () {\n $(this).addClass(\"newcolor\");\n $(this).dequeue();\n });\n $(\"div\").animate({left:'-=200'},1500);\n $(\"div\").queue(function () {\n $(this).removeClass(\"newcolor\");\n $(this).dequeue();\n });\n $(\"div\").slideUp();\n });\n $(\"#stop\").click(function () {\n $(\"div\").queue(\"fx\", []);\n $(\"div\").stop();\n });\n\n });\n</script>\n<style>\n\n div { margin:3px; width:40px; height:40px;\n position:absolute; left:0px; top:30px; \n background:green; display:none; }\n div.newcolor { background:blue; }\n \n</style>\n</head>\n<body>\n<button id=\"start\">Start</button>\n <button id=\"stop\">Stop</button>\n <div></div>\n</body>\n</html>"}]}, "dequeue194": {"id": 194, "searchname": "dequeue", "name": "dequeue", "type": "function", "category": "Effects", "subcategory": "Custom", "return": "jQuery", "added": "1.2", "sample": "", "desc": "Removes a queued function from the front of the queue and executes it.", "longdesc": "", "params": [], "examples": [{"code": "\n $(\"button\").click(function () {\n $(\"div\").animate({left:'+=200px'}, 2000);\n $(\"div\").animate({top:'0px'}, 600);\n $(\"div\").queue(function () {\n $(this).toggleClass(\"red\");\n $(this).dequeue();\n });\n $(\"div\").animate({left:'10px', top:'30px'}, 700);\n });\n", "htmlCode": "\n $(\"button\").click(function () {\n $(\"div\").animate({left:'+=200px'}, 2000);\n $(\"div\").animate({top:'0px'}, 600);\n $(\"div\").queue(function () {\n $(this).toggleClass(\"red\");\n $(this).dequeue();\n });\n $(\"div\").animate({left:'10px', top:'30px'}, 700);\n });\n", "desc": "Use dequeue to end a custom queue function which allows the queue to keep going.", "css": "\n div { margin:3px; width:50px; position:absolute;\n height:50px; left:10px; top:30px; \n background-color:yellow; }\n div.red { background-color:red; }\n ", "inhead": "", "html": "<button>Start</button>\n <div></div>", "exampleId": "194iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"button\").click(function () {\n $(\"div\").animate({left:'+=200px'}, 2000);\n $(\"div\").animate({top:'0px'}, 600);\n $(\"div\").queue(function () {\n $(this).toggleClass(\"red\");\n $(this).dequeue();\n });\n $(\"div\").animate({left:'10px', top:'30px'}, 700);\n });\n\n });\n</script>\n<style>\n\n div { margin:3px; width:50px; position:absolute;\n height:50px; left:10px; top:30px; \n background-color:yellow; }\n div.red { background-color:red; }\n \n</style>\n</head>\n<body>\n<button>Start</button>\n <div></div>\n</body>\n</html>"}]}, "ajax195": {"id": 195, "searchname": "ajax", "name": "$.ajax", "type": "function", "category": "Ajax", "subcategory": "Ajax Requests", "return": "XMLHttpRequest", "added": "1.0", "sample": "", "desc": "Load a remote page using an HTTP request.", "longdesc": "<p>This is jQuery's low-level AJAX implementation. See $.get, $.post etc. for higher-level abstractions that are often easier to understand and use, but don't offer as much functionality (such as error callbacks).</p><p>$.ajax() returns the XMLHttpRequest that it creates. In most cases you won't need that object to manipulate directly, but it is available if you need to abort the request manually.</p><p>$.ajax() takes one argument, an object of key/value pairs, that are used to initialize and handle the request. See below for a full list of the key/values that can be used.</p><p><strong>Note:</strong> If you specify the dataType option described below, make sure\nthe server sends the correct MIME type in the response (eg. xml as \"text/xml\").\nSending the wrong MIME type can lead to unexpected problems in your script.\nSee <a href='Specifying_the_Data_Type_for_AJAX_Requests'>Specifying the Data Type for AJAX Requests</a> for more information.</p><p><strong>Note:</strong> All remote (not on the same domain) POST requests are converted to GET when 'script' is the dataType (because it loads script using a DOM script tag).</p><p>As of jQuery 1.2, you can load JSON data located on another domain if you specify a <a href=\"http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/\">JSONP</a> callback, which can be done like so: \"myurl?callback=?\". jQuery automatically replaces the ? with the correct method name to call, calling your specified callback. Or, if you set the dataType to \"jsonp\" a callback will be automatically added to your Ajax request.</p>", "params": [{"optional": false, "name": "options", "type": "Options", "desc": "A set of key/value pairs that configure the Ajax request. All options are optional. A default can be set for any option with <a href='Ajax/jQuery.ajaxSetup'>$.ajaxSetup</a>()."}], "options": [{"name": "async", "default": "true", "type": "Boolean", "desc": "By default, all requests are sent asynchronous (e.g. this is set to true by default). If you need synchronous requests, set this option to false. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active."}, {"name": "beforeSend", "default": "", "type": "Function", "desc": "A pre-callback to modify the XMLHttpRequest object before it is sent. Use this to set custom headers etc. The XMLHttpRequest is passed as the only argument. This is an <a href='Ajax_Events'>Ajax Event</a>.\n<pre>function (XMLHttpRequest) {\n this; // the options for this ajax request\n}\n</pre>"}, {"name": "cache", "default": "true, false for dataType \"script\"", "type": "Boolean", "desc": "Added in jQuery 1.2, if set to false it will force the pages that you request to not be cached by the browser."}, {"name": "complete", "default": "", "type": "Function", "desc": "A function to be called when the request finishes (after success and error callbacks are executed). The function gets passed two arguments: The XMLHttpRequest object and a string describing the type of success of the request. This is an <a href='Ajax_Events'>Ajax Event</a>.\n<pre>function (XMLHttpRequest, textStatus) {\n this; // the options for this ajax request\n}\n</pre>"}, {"name": "contentType", "default": "\"application/x-www-form-urlencoded\"", "type": "String", "desc": "When sending data to the server, use this content-type. Default is \"application/x-www-form-urlencoded\", which is fine for most cases."}, {"name": "data", "default": "", "type": "Object, String", "desc": "Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key i.e. {foo:[\"bar1\", \"bar2\"]} becomes '&foo=bar1&foo=bar2'."}, {"name": "dataType", "default": "Intelligent Guess (xml or html)", "type": "String", "desc": "The type of data that you're expecting back from the server. If none is specified, jQuery will intelligently pass either responseXML or responseText to your success callback, based on the MIME type of the response. The available types (and the result passed as the first argument to your success callback) are:<ul><li>\"xml\": Returns a XML document that can be processed via jQuery.</li><li>\"html\": Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.</li><li>\"script\": Evaluates the response as JavaScript and returns it as plain text. Disables caching unless option \"cache\" is used. <strong>Note:</strong> This will turn POSTs into GETs for remote-domain requests.</li><li>\"json\": Evaluates the response as JSON and returns a JavaScript Object.</li><li>\"jsonp\": Loads in a JSON block using <a href=\"http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/\">JSONP</a>. Will add an extra \"?callback=?\" to the end of your URL to specify the callback. (Added in jQuery 1.2)</li><li>\"text\": A plain text string.</li></ul>"}, {"name": "error", "default": "", "type": "Function", "desc": "A function to be called if the request fails. The function gets passed three arguments: The XMLHttpRequest object, a string describing the type of error that occurred and an optional exception object, if one occurred. This is an <a href='Ajax_Events'>Ajax Event</a>.\n<pre>function (XMLHttpRequest, textStatus, errorThrown) {\n // typically only one of textStatus or errorThrown \n // will have info\n this; // the options for this ajax request\n}\n</pre>"}, {"name": "global", "default": "true", "type": "Boolean", "desc": "Whether to trigger global AJAX event handlers for this request. The default is true. Set to false to prevent the global handlers like ajaxStart or ajaxStop from being triggered. This can be used to control various <a href='Ajax_Events'>Ajax Events</a>."}, {"name": "ifModified", "default": "false", "type": "Boolean", "desc": "Allow the request to be successful only if the response has changed since the last request. This is done by checking the Last-Modified header. Default value is false, ignoring the header."}, {"name": "jsonp", "default": "", "type": "String", "desc": "Override the callback function name in a jsonp request. This value will be used instead of 'callback' in the 'callback=?' part of the query string in the url for a GET or the data for a POST. So {jsonp:'onJsonPLoad'} would result in 'onJsonPLoad=?' passed to the server."}, {"name": "password", "default": "", "type": "String", "desc": "A password to be used in response to an HTTP access authentication request."}, {"name": "processData", "default": "true", "type": "Boolean", "desc": "By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type \"application/x-www-form-urlencoded\". If you want to send DOMDocuments, or other non-processed data, set this option to false."}, {"name": "success", "default": "", "type": "Function", "desc": "A function to be called if the request succeeds. The function gets passed two arguments: The data returned from the server, formatted according to the 'dataType' parameter, and a string describing the status. This is an <a href='Ajax_Events'>Ajax Event</a>.\n<pre>function (data, textStatus) {\n // data could be xmlDoc, jsonObj, html, text, etc...\n this; // the options for this ajax request\n}\n</pre>"}, {"name": "timeout", "default": "", "type": "Number", "desc": "Set a local timeout in ms for the request. This will override the global timeout, if one is set via <a href='Ajax/jQuery.ajaxSetup'>$.ajaxSetup</a>. For example, you could use this property to give a single request a longer timeout than all other requests that you've set to time out in one second. See <a href='Ajax/jQuery.ajaxSetup'>$.ajaxSetup</a>() for global timeouts."}, {"name": "type", "default": "\"GET\"", "type": "String", "desc": "The type of request to make (\"POST\" or \"GET\"), default is \"GET\". Note: Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers."}, {"name": "url", "default": "The current page", "type": "String", "desc": "The URL to request."}, {"name": "username", "default": "", "type": "String", "desc": "A username to be used in response to an HTTP access authentication request."}], "examples": [{"code": " $.ajax({\n type: \"GET\",\n url: \"test.js\",\n dataType: \"script\"\n });", "htmlCode": " $.ajax({\n type: \"GET\",\n url: \"test.js\",\n dataType: \"script\"\n });", "desc": "Load and execute a JavaScript file.", "css": "", "inhead": "", "html": "", "exampleId": "195iframeExample0", "runCode": ""}, {"code": " $.ajax({\n type: \"POST\",\n url: \"some.php\",\n data: \"name=John&location=Boston\",\n success: function(msg){\n alert( \"Data Saved: \" + msg );\n }\n });", "htmlCode": " $.ajax({\n type: \"POST\",\n url: \"some.php\",\n data: \"name=John&location=Boston\",\n success: function(msg){\n alert( \"Data Saved: \" + msg );\n }\n });", "desc": "Save some data to the server and notify the user once its complete.", "css": "", "inhead": "", "html": "", "exampleId": "195iframeExample1", "runCode": ""}, {"code": "$.ajax({\n url: \"test.html\",\n cache: false,\n success: function(html){\n $(\"#results\").append(html);\n }\n});", "htmlCode": "$.ajax({\n url: \"test.html\",\n cache: false,\n success: function(html){\n $(\"#results\").append(html);\n }\n});", "desc": "Retrieve the latest version of an HTML page.", "css": "", "inhead": "", "html": "", "exampleId": "195iframeExample2", "runCode": ""}, {"code": " var html = $.ajax({\n url: \"some.php\",\n async: false\n }).responseText;", "htmlCode": " var html = $.ajax({\n url: \"some.php\",\n async: false\n }).responseText;", "desc": "Loads data synchronously. Blocks the browser while the requests is active.\nIt is better to block user interaction by other means when synchronization is\nnecessary.", "css": "", "inhead": "", "html": "", "exampleId": "195iframeExample3", "runCode": ""}, {"code": " var xmlDocument = [create xml document];\n $.ajax({\n url: \"page.php\",\n processData: false,\n data: xmlDocument,\n success: handleResponse\n });", "htmlCode": " var xmlDocument = [create xml document];\n $.ajax({\n url: \"page.php\",\n processData: false,\n data: xmlDocument,\n success: handleResponse\n });", "desc": "Sends an xml document as data to the server. By setting the processData\noption to false, the automatic conversion of data to strings is prevented.", "css": "", "inhead": "", "html": "", "exampleId": "195iframeExample4", "runCode": ""}]}, "load196": {"id": 196, "searchname": "load", "name": "load", "type": "function", "category": "Ajax", "subcategory": "Ajax Requests", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Load HTML from a remote file and inject it into the DOM.", "longdesc": "<p>A GET request will be performed by default - but if you pass in any extra parameters then a POST will occur.</p><p>In jQuery 1.2 you can now specify a jQuery selector in the URL. Doing so will filter the incoming HTML document, only injecting the elements that match the selector. The syntax looks something like \"url #some > selector\". See the examples for more information.</p>", "params": [{"optional": false, "name": "url", "type": "String", "desc": "The URL of the HTML page to load."}, {"optional": true, "name": "data", "type": "Map", "desc": "Key/value pairs that will be sent to the server."}, {"optional": false, "name": "callback", "type": "Callback", "desc": "The function called when the ajax request is complete (not necessarily success).\n<pre>function (responseText, textStatus, XMLHttpRequest) {\n this; // dom element\n}\n</pre>"}], "examples": [{"code": "$(\"#links\").load(\"/Main_Page #p-Getting-Started li\");", "htmlCode": "$(\"#links\").load(\"/Main_Page #p-Getting-Started li\");", "desc": "Load a piece of the documentation sidebar navigation into a custom unordered list.", "css": "body{ font-size: 11px; font-family: Arial; }", "inhead": "", "html": "<b>jQuery Links:</b>\n<ul id=\"links\"></ul>", "exampleId": "196iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$(\"#links\").load(\"/Main_Page #p-Getting-Started li\");\n });\n</script>\n<style>\nbody{ font-size: 11px; font-family: Arial; }\n</style>\n</head>\n<body>\n<b>jQuery Links:</b>\n<ul id=\"links\"></ul>\n</body>\n</html>"}, {"code": "$(\"#feeds\").load(\"feeds.html\");", "htmlCode": "$(\"#feeds\").load(\"feeds.html\");", "desc": "Load the feeds.html file into the div with the ID of feeds.", "css": "", "inhead": "", "html": "", "exampleId": "196iframeExample1", "runCode": ""}, {"code": " $(\"#feeds\").load(\"feeds.php\", {limit: 25}, function(){\n alert(\"The last 25 entries in the feed have been loaded\");\n });", "htmlCode": " $(\"#feeds\").load(\"feeds.php\", {limit: 25}, function(){\n alert(\"The last 25 entries in the feed have been loaded\");\n });", "desc": "Same as above, but will POST the additional parameters to the server and a callback that is executed when the server is finished responding.", "css": "", "inhead": "", "html": "", "exampleId": "196iframeExample2", "runCode": ""}]}, "get197": {"id": 197, "searchname": "get", "name": "$.get", "type": "function", "category": "Ajax", "subcategory": "Ajax Requests", "return": "XMLHttpRequest", "added": "1.0", "sample": "", "desc": "Load a remote page using an HTTP GET request.", "longdesc": "<p>This is an easy way to send a simple GET request to a server without having to use the more complex $.ajax function. It allows a single callback function to be specified that will be executed when the request is complete (and only if the response has a successful response code). If you need to have both error and success callbacks, you may want to use $.ajax.</p>", "params": [{"optional": false, "name": "url", "type": "String", "desc": "The URL of the page to load."}, {"optional": true, "name": "data", "type": "Map", "desc": "Key/value pairs that will be sent to the server."}, {"optional": true, "name": "callback", "type": "Function", "desc": "A function to be executed whenever the data is loaded successfully.\n<pre>function (data, textStatus) {\n // data could be xmlDoc, jsonObj, html, text, etc...\n this; // the options for this ajax request\n}\n</pre>"}], "examples": [{"code": " $.get(\"test.php\");", "htmlCode": " $.get(\"test.php\");", "desc": "Request the test.php page, but ignore the return results.", "css": "", "inhead": "", "html": "", "exampleId": "197iframeExample0", "runCode": ""}, {"code": " $.get(\"test.php\", { name: \"John\", time: \"2pm\" } );", "htmlCode": " $.get(\"test.php\", { name: \"John\", time: \"2pm\" } );", "desc": "Request the test.php page and send some additional data along (while still ignoring the return results).", "css": "", "inhead": "", "html": "", "exampleId": "197iframeExample1", "runCode": ""}, {"code": " $.get(\"test.php\", function(data){\n alert(\"Data Loaded: \" + data);\n });", "htmlCode": " $.get(\"test.php\", function(data){\n alert(\"Data Loaded: \" + data);\n });", "desc": "Alert out the results from requesting test.php (HTML or XML, depending on what was returned).", "css": "", "inhead": "", "html": "", "exampleId": "197iframeExample2", "runCode": ""}, {"code": " $.get(\"test.cgi\", { name: \"John\", time: \"2pm\" },\n function(data){\n alert(\"Data Loaded: \" + data);\n });", "htmlCode": " $.get(\"test.cgi\", { name: \"John\", time: \"2pm\" },\n function(data){\n alert(\"Data Loaded: \" + data);\n });", "desc": "Alert out the results from requesting test.cgi with an additional payload of data (HTML or XML, depending on what was returned).", "css": "", "inhead": "", "html": "", "exampleId": "197iframeExample3", "runCode": ""}]}, "getjson198": {"id": 198, "searchname": "getjson", "name": "$.getJSON", "type": "function", "category": "Ajax", "subcategory": "Ajax Requests", "return": "XMLHttpRequest", "added": "1.0", "sample": "", "desc": "Load JSON data using an HTTP GET request.", "longdesc": "<p>As of jQuery 1.2, you can load JSON data located on another domain if you specify a <a href=\"http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/\">JSONP</a> callback, which can be done like so: \"myurl?callback=?\". jQuery automatically replaces the ? with the correct method name to call, calling your specified callback.</p><p>\nNote: Keep in mind, that lines after this function will be executed before callback.</p>", "params": [{"optional": false, "name": "url", "type": "String", "desc": "The URL of the page to load."}, {"optional": true, "name": "data", "type": "Map", "desc": "Key/value pairs that will be sent to the server."}, {"optional": true, "name": "callback", "type": "Function", "desc": "A function to be executed whenever the data is loaded successfully.\n<pre>function (data, textStatus) {\n // data will be a jsonObj\n this; // the options for this ajax request\n}\n</pre>"}], "examples": [{"code": "$.getJSON(\"http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?\",\n function(data){\n $.each(data.items, function(i,item){\n $(\"<img/>\").attr(\"src\", item.media.m).appendTo(\"#images\");\n if ( i == 3 ) return false;\n });\n });", "htmlCode": "$.getJSON(\"http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?\",\n function(data){\n $.each(data.items, function(i,item){\n $(\"<img/>\").attr(\"src\", item.media.m).appendTo(\"#images\");\n if ( i == 3 ) return false;\n });\n });", "desc": "Loads the four most recent cat pictures from the Flickr JSONP API.", "css": "img{ height: 100px; float: left; }", "inhead": "", "html": "<div id=\"images\"></div>", "exampleId": "198iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$.getJSON(\"http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?\",\n function(data){\n $.each(data.items, function(i,item){\n $(\"<img/>\").attr(\"src\", item.media.m).appendTo(\"#images\");\n if ( i == 3 ) return false;\n });\n });\n });\n</script>\n<style>\nimg{ height: 100px; float: left; }\n</style>\n</head>\n<body>\n<div id=\"images\"></div>\n</body>\n</html>"}, {"code": " $.getJSON(\"test.js\", function(json){\n alert(\"JSON Data: \" + json.users[3].name);\n });", "htmlCode": " $.getJSON(\"test.js\", function(json){\n alert(\"JSON Data: \" + json.users[3].name);\n });", "desc": "Load the JSON data from test.js and access a name from the returned JSON data.", "css": "", "inhead": "", "html": "", "exampleId": "198iframeExample1", "runCode": ""}, {"code": " $.getJSON(\"test.js\", { name: \"John\", time: \"2pm\" }, function(json){\n alert(\"JSON Data: \" + json.users[3].name);\n });", "htmlCode": " $.getJSON(\"test.js\", { name: \"John\", time: \"2pm\" }, function(json){\n alert(\"JSON Data: \" + json.users[3].name);\n });", "desc": "Load the JSON data from test.js, passing along additional data, and access a name from the returned JSON data.", "css": "", "inhead": "", "html": "", "exampleId": "198iframeExample2", "runCode": ""}, {"code": "\nvar id=$(\"#id\").attr(\"value\");\n $.getJSON(\"pages.php\",{id:id},dates);\nfunction dates(datos)\n{\n\t\n $(\"#list\").html(\"Name:\"+datos[1].name+\"<br>\"+\"Last Name:\"+datos[1].lastname+\"<br>\"+\"Address:\"+datos[1].address);\n}\n", "htmlCode": "\nvar id=$(\"#id\").attr(\"value\");\n $.getJSON(\"pages.php\",{id:id},dates);\nfunction dates(datos)\n{\n\t\n $(\"#list\").html(\"Name:\"+datos[1].name+\"<br>\"+\"Last Name:\"+datos[1].lastname+\"<br>\"+\"Address:\"+datos[1].address);\n}\n", "desc": "List the result of a consultation of pages.php in HTML as an array. By Manuel Gonzalez.", "css": "", "inhead": "", "html": "", "exampleId": "198iframeExample3", "runCode": ""}]}, "getscript199": {"id": 199, "searchname": "getscript", "name": "$.getScript", "type": "function", "category": "Ajax", "subcategory": "Ajax Requests", "return": "XMLHttpRequest", "added": "1.0", "sample": "", "desc": "Loads, and executes, a local JavaScript file using an HTTP GET request.", "longdesc": "<p>Before jQuery 1.2, getScript was only able to load scripts from the same domain as the original page. As of 1.2, you can now load JavaScript files from any domain.</p><p>Warning: Safari 2 and older is unable to evaluate scripts in a global context synchronously. If you load functions via getScript, make sure to call them after a delay.</p>", "params": [{"optional": false, "name": "url", "type": "String", "desc": "The URL of the page to load."}, {"optional": true, "name": "callback", "type": "Function", "desc": "A function to be executed whenever the data is loaded successfully.\n<pre>function (data, textStatus) {\n // data should be javascript\n this; // the options for this ajax request\n}\n</pre>"}], "examples": [{"code": "$.getScript(\"http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js\", function(){\n $(\"#go\").click(function(){\n
10000
; $(\".block\").animate( { backgroundColor: 'pink' }, 1000)\n .animate( { backgroundColor: 'blue' }, 1000);\n });\n});", "htmlCode": "$.getScript(\"http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js\", function(){\n $(\"#go\").click(function(){\n $(\".block\").animate( { backgroundColor: 'pink' }, 1000)\n .animate( { backgroundColor: 'blue' }, 1000);\n });\n});", "desc": "We load the new <a href=\"http://jquery.com/plugins/project/color\">http://jquery.com/plugins/project/color</a> dynamically and bind some color animations to occur once the new functionality is loaded.", "css": ".block { \n background-color: blue; \n width: 150px; \n height: 70px;\n margin: 10px; \n}", "inhead": "", "html": "<button id=\"go\">» Run</button>\n<div class=\"block\"></div>\n", "exampleId": "199iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n$.getScript(\"http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js\", function(){\n $(\"#go\").click(function(){\n $(\".block\").animate( { backgroundColor: 'pink' }, 1000)\n .animate( { backgroundColor: 'blue' }, 1000);\n });\n});\n });\n</script>\n<style>\n.block { \n background-color: blue; \n width: 150px; \n height: 70px;\n margin: 10px; \n}\n</style>\n</head>\n<body>\n<button id=\"go\">» Run</button>\n<div class=\"block\"></div>\n\n</body>\n</html>"}, {"code": " $.getScript(\"test.js\");", "htmlCode": " $.getScript(\"test.js\");", "desc": "Load the test.js JavaScript file and execute it.", "css": "", "inhead": "", "html": "", "exampleId": "199iframeExample1", "runCode": ""}, {"code": " $.getScript(\"test.js\", function(){\n alert(\"Script loaded and executed.\");\n });", "htmlCode": " $.getScript(\"test.js\", function(){\n alert(\"Script loaded and executed.\");\n });", "desc": "Load the test.js JavaScript file and execute it, displaying an alert message when the execution is complete.", "css": "", "inhead": "", "html": "", "exampleId": "199iframeExample2", "runCode": ""}]}, "post200": {"id": 200, "searchname": "post", "name": "$.post", "type": "function", "category": "Ajax", "subcategory": "Ajax Requests", "return": "XMLHttpRequest", "added": "1.0", "sample": "", "desc": "Load a remote page using an HTTP POST request.", "longdesc": "<p>This is an easy way to send a simple POST request to a server without having to use the more complex $.ajax function. It allows a single callback function to be specified that will be executed when the request is complete (and only if the response has a successful response code).\nThe returned data format can be specified by the fourth paramater.\nIf you need to have both error and success callbacks, you may want to use $.ajax. $.post is a (simplified) wrapper function for $.ajax.</p>", "params": [{"optional": false, "name": "url", "type": "String", "desc": "The URL of the page to load."}, {"optional": true, "name": "data", "type": "Map", "desc": "Key/value pairs that will be sent to the server."}, {"optional": true, "name": "callback", "type": "Function", "desc": "A function to be executed whenever the data is loaded successfully.\n<pre>function (data, textStatus) {\n // data could be xmlDoc, jsonObj, html, text, etc...\n this; // the options for this ajax request\n}\n</pre>"}, {"optional": true, "name": "type", "type": "String", "desc": "Type of data to be returned to callback function (JSON, XML, etc.)\n<pre>$.postJSON = function(url, data, callback) {\n\t$.post(url, data, callback, \"json\");\n};\n</pre>"}], "examples": [{"code": " $.post(\"test.php\");", "htmlCode": " $.post(\"test.php\");", "desc": "Request the test.php page, but ignore the return results.", "css": "", "inhead": "", "html": "", "exampleId": "200iframeExample0", "runCode": ""}, {"code": " $.post(\"test.php\", { name: \"John\", time: \"2pm\" } );", "htmlCode": " $.post(\"test.php\", { name: \"John\", time: \"2pm\" } );", "desc": "Request the test.php page and send some additional data along (while still ignoring the return results).", "css": "", "inhead": "", "html": "", "exampleId": "200iframeExample1", "runCode": ""}, {"code": " $.post(\"test.php\", function(data){\n alert(\"Data Loaded: \" + data);\n });", "htmlCode": " $.post(\"test.php\", function(data){\n alert(\"Data Loaded: \" + data);\n });", "desc": "Alert out the results from requesting test.php (HTML or XML, depending on what was returned).", "css": "", "inhead": "", "html": "", "exampleId": "200iframeExample2", "runCode": ""}, {"code": " $.post(\"test.cgi\", { name: \"John\", time: \"2pm\" },\n function(data){\n alert(\"Data Loaded: \" + data);\n });", "htmlCode": " $.post(\"test.cgi\", { name: \"John\", time: \"2pm\" },\n function(data){\n alert(\"Data Loaded: \" + data);\n });", "desc": "Alert out the results from requesting test.php with an additional payload of data (HTML or XML, depending on what was returned).", "css": "", "inhead": "", "html": "", "exampleId": "200iframeExample3", "runCode": ""}, {"code": " $.post(\"test.php\", { name: \"John\", time: \"2pm\" },\n function(data){\n process(data);\n }, \"xml\");", "htmlCode": " $.post(\"test.php\", { name: \"John\", time: \"2pm\" },\n function(data){\n process(data);\n }, \"xml\");", "desc": "Gets the test.php page content, store it in a XMLHttpResponse object and applies the process() JavaScript function.", "css": "", "inhead": "", "html": "", "exampleId": "200iframeExample4", "runCode": ""}, {"code": " $.post(\"test.php\", { func: \"getNameAndTime\" },\n function(data){\n alert(data.name); // John\n console.log(data.time); // 2pm\n }, \"json\");", "htmlCode": " $.post(\"test.php\", { func: \"getNameAndTime\" },\n function(data){\n alert(data.name); // John\n console.log(data.time); // 2pm\n }, \"json\");", "desc": "Gets the test.php page contents which has been returned in json format (<?php echo json_encode(array(\"name\"=>\"John\",\"time\"=>\"2pm\")); ?>)\n", "css": "", "inhead": "", "html": "", "exampleId": "200iframeExample5", "runCode": ""}]}, "ajaxcomplete201": {"id": 201, "searchname": "ajaxcomplete", "name": "ajaxComplete", "type": "function", "category": "Ajax", "subcategory": "Ajax Events", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Attach a function to be executed whenever an AJAX request completes. This is an <a href='Ajax_Events'>Ajax Event</a>.", "longdesc": "<p>The XMLHttpRequest and settings used for that request are passed as arguments to the callback.</p>", "params": [{"optional": false, "name": "callback", "type": "Function", "desc": "The function to execute.\n<pre>function (event, XMLHttpRequest, ajaxOptions) {\n this; // dom element listening\n}\n</pre>"}], "examples": [{"code": " $(\"#msg\").ajaxComplete(function(request, settings){\n $(this).append(\"<li>Request Complete.</li>\");\n });", "htmlCode": " $(\"#msg\").ajaxComplete(function(request, settings){\n $(this).append(\"<li>Request Complete.</li>\");\n });", "desc": "Show a message when an AJAX request completes.", "css": "", "inhead": "", "html": "", "exampleId": "201iframeExample0", "runCode": ""}]}, "ajaxerror202": {"id": 202, "searchname": "ajaxerror", "name": "ajaxError", "type": "function", "category": "Ajax", "subcategory": "Ajax Events", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Attach a function to be executed whenever an AJAX request fails. This is an <a href='Ajax_Events'>Ajax Event</a>.", "longdesc": "<p>The XMLHttpRequest and settings used for that request are passed as arguments to the callback. A third argument, an exception object, is passed if an exception occured while processing the request.</p>", "params": [{"optional": false, "name": "callback", "type": "Function", "desc": "The function to execute.\n<pre>function (event, XMLHttpRequest, ajaxOptions, thrownError) {\n // thrownError only passed if an error was caught\n this; // dom element listening\n}\n</pre>"}], "examples": [{"code": " $(\"#msg\").ajaxError(function(event, request, settings){\n $(this).append(\"<li>Error requesting page \" + settings.url + \"</li>\");\n });", "htmlCode": " $(\"#msg\").ajaxError(function(event, request, settings){\n $(this).append(\"<li>Error requesting page \" + settings.url + \"</li>\");\n });", "desc": "Show a message when an AJAX request fails.", "css": "", "inhead": "", "html": "", "exampleId": "202iframeExample0", "runCode": ""}]}, "ajaxsend203": {"id": 203, "searchname": "ajaxsend", "name": "ajaxSend", "type": "function", "category": "Ajax", "subcategory": "Ajax Events", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Attach a function to be executed before an AJAX request is sent. This is an <a href='Ajax_Events'>Ajax Event</a>.", "longdesc": "<p>The XMLHttpRequest and settings used for that request are passed as arguments to the callback.</p>", "params": [{"optional": false, "name": "callback", "type": "Function", "desc": "The function to execute.\n<pre>function (event, XMLHttpRequest, ajaxOptions) {\n this; // dom element listening\n}\n</pre>"}], "examples": [{"code": " $(\"#msg\").ajaxSend(function(evt, request, settings){\n $(this).append(\"<li>Starting request at \" + settings.url + \"</li>\");\n });", "htmlCode": " $(\"#msg\").ajaxSend(function(evt, request, settings){\n $(this).append(\"<li>Starting request at \" + settings.url + \"</li>\");\n });", "desc": "Show a message before an AJAX request is sent.", "css": "", "inhead": "", "html": "", "exampleId": "203iframeExample0", "runCode": ""}]}, "ajaxstart204": {"id": 204, "searchname": "ajaxstart", "name": "ajaxStart", "type": "function", "category": "Ajax", "subcategory": "Ajax Events", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Attach a function to be executed whenever an AJAX request begins and there is none already active. This is an <a href='Ajax_Events'>Ajax Event</a>.", "longdesc": "", "params": [{"optional": false, "name": "callback", "type": "Function", "desc": "The function to execute.\n<pre>function () {\n this; // dom element listening\n}\n</pre>"}], "examples": [{"code": " $(\"#loading\").ajaxStart(function(){\n $(this).show();\n });", "htmlCode": " $(\"#loading\").ajaxStart(function(){\n $(this).show();\n });", "desc": "Show a loading message whenever an AJAX request starts (and none is already active).", "css": "", "inhead": "", "html": "", "exampleId": "204iframeExample0", "runCode": ""}]}, "ajaxstop205": {"id": 205, "searchname": "ajaxstop", "name": "ajaxStop", "type": "function", "category": "Ajax", "subcategory": "Ajax Events", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Attach a function to be executed whenever all AJAX requests have ended. This is an <a href='Ajax_Events'>Ajax Event</a>.", "longdesc": "", "params": [{"optional": false, "name": "callback", "type": "Function", "desc": "The function to execute.\n<pre>function () {\n this; // dom element listening\n}\n</pre>"}], "examples": [{"code": " $(\"#loading\").ajaxStop(function(){\n $(this).hide();\n });", "htmlCode": " $(\"#loading\").ajaxStop(function(){\n $(this).hide();\n });", "desc": "Hide a loading message after all the AJAX requests have stopped.", "css": "", "inhead": "", "html": "", "exampleId": "205iframeExample0", "runCode": ""}]}, "ajaxsuccess206": {"id": 206, "searchname": "ajaxsuccess", "name": "ajaxSuccess", "type": "function", "category": "Ajax", "subcategory": "Ajax Events", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Attach a function to be executed whenever an AJAX request completes successfully. This is an <a href='Ajax_Events'>Ajax Event</a>.", "longdesc": "<p>The event object, XMLHttpRequest, and settings used for that request are passed as arguments to the callback.</p>", "params": [{"optional": false, "name": "callback", "type": "Function", "desc": "The function to execute.\n<pre>function (event, XMLHttpRequest, ajaxOptions) {\n this; // dom element listening\n}\n</pre>"}], "examples": [{"code": " $(\"#msg\").ajaxSuccess(function(evt, request, settings){\n $(this).append(\"<li>Successful Request!</li>\");\n });", "htmlCode": " $(\"#msg\").ajaxSuccess(function(evt, request, settings){\n $(this).append(\"<li>Successful Request!</li>\");\n });", "desc": "Show a message when an AJAX request completes successfully.", "css": "", "inhead": "", "html": "", "exampleId": "206iframeExample0", "runCode": ""}]}, "ajaxsetup207": {"id": 207, "searchname": "ajaxsetup", "name": "$.ajaxSetup", "type": "function", "category": "Ajax", "subcategory": "Misc", "return": "", "added": "1.1", "sample": "", "desc": "Setup global settings for AJAX requests.", "longdesc": "<p>See <a href='Ajax/jQuery.ajax'>$.ajax</a> for a description of all available options.</p>", "params": [{"optional": false, "name": "options", "type": "Options", "desc": "A set of key/value pairs that configure the default Ajax request. All options are optional."}], "options": [], "examples": [{"code": " $.ajaxSetup({\n url: \"/xmlhttp/\",\n global: false,\n type: \"POST\"\n });\n $.ajax({ data: myData });", "htmlCode": " $.ajaxSetup({\n url: \"/xmlhttp/\",\n global: false,\n type: \"POST\"\n });\n $.ajax({ data: myData });", "desc": "Sets the defaults for AJAX requests to the url \"/xmlhttp/\", disables global handlers and uses POST instead of GET. The following AJAX requests then sends some data without having to set anything else.", "css": "", "inhead": "", "html": "", "exampleId": "207iframeExample0", "runCode": ""}]}, "serialize208": {"id": 208, "searchname": "serialize", "name": "serialize", "type": "function", "category": "Ajax", "subcategory": "Misc", "return": "jQuery", "added": "1.0", "sample": "", "desc": "Serializes a set of input elements into a string of data. This will serialize all given elements.", "longdesc": "<p>As of jQuery 1.2 the serialize method correctly serializes forms. For older versions of jQuery, the <a href=\"http://www.malsup.com/jquery/form/\">http://www.malsup.com/jquery/form/</a> fieldSerialize method should be used.</p>", "params": [], "examples": [{"code": "\n function showValues() {\n var str = $(\"form\").serialize();\n $(\"#results\").text(str);\n }\n\n $(\":checkbox, :radio\").click(showValues);\n $(\"select\").change(showValues);\n showValues();\n", "htmlCode": "\n function showValues() {\n var str = $(\"form\").serialize();\n $(\"#results\").text(str);\n }\n\n $(\":checkbox, :radio\").click(showValues);\n $(\"select\").change(showValues);\n showValues();\n", "desc": "Serialize a form to a query string, that could be sent to a server in an Ajax request.", "css": "\n body, select { font-size:12px; }\n form { margin:5px; }\n p { color:red; margin:5px; font-size:14px; }\n b { color:blue; }\n ", "inhead": "", "html": "<form>\n <select name=\"single\">\n <option>Single</option>\n <option>Single2</option>\n </select>\n <select name=\"multiple\" multiple=\"multiple\">\n <option selected=\"selected\">Multiple</option>\n <option>Multiple2</option>\n <option selected=\"selected\">Multiple3</option>\n </select><br/>\n <input type=\"checkbox\" name=\"check\" value=\"check1\"/> check1\n <input type=\"checkbox\" name=\"check\" value=\"check2\" checked=\"checked\"/> check2\n <input type=\"radio\" name=\"radio\" value=\"radio1\" checked=\"checked\"/> radio1\n <input type=\"radio\" name=\"radio\" value=\"radio2\"/> radio2\n </form>\n <p><tt id=\"results\"></tt></p>", "exampleId": "208iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n function showValues() {\n var str = $(\"form\").serialize();\n $(\"#results\").text(str);\n }\n\n $(\":checkbox, :radio\").click(showValues);\n $(\"select\").change(showValues);\n showValues();\n\n });\n</script>\n<style>\n\n body, select { font-size:12px; }\n form { margin:5px; }\n p { color:red; margin:5px; font-size:14px; }\n b { color:blue; }\n \n</style>\n</head>\n<body>\n<form>\n <select name=\"single\">\n <option>Single</option>\n <option>Single2</option>\n </select>\n <select name=\"multiple\" multiple=\"multiple\">\n <option selected=\"selected\">Multiple</option>\n <option>Multiple2</option>\n <option selected=\"selected\">Multiple3</option>\n </select><br/>\n <input type=\"checkbox\" name=\"check\" value=\"check1\"/> check1\n <input type=\"checkbox\" name=\"check\" value=\"check2\" checked=\"checked\"/> check2\n <input type=\"radio\" name=\"radio\" value=\"radio1\" checked=\"checked\"/> radio1\n <input type=\"radio\" name=\"radio\" value=\"radio2\"/> radio2\n </form>\n <p><tt id=\"results\"></tt></p>\n</body>\n</html>"}]}, "serializearray209": {"id": 209, "searchname": "serializearray", "name": "serializeArray", "type": "function", "category": "Ajax", "subcategory": "Misc", "return": "jQuery", "added": "1.2", "sample": "", "desc": "Serializes all forms and form elements (like the <a href='Ajax/serialize'>.serialize()</a> method) but returns a JSON data structure for you to work with.", "longdesc": "", "params": [], "examples": [{"code": "\n function showValues() {\n var fields = $(\":input\").serializeArray();\n $(\"#results\").empty();\n jQuery.each(fields, function(i, field){\n $(\"#results\").append(field.value + \" \");\n });\n }\n\n $(\":checkbox, :radio\").click(showValues);\n $(\"select\").change(showValues);\n showValues();\n", "htmlCode": "\n function showValues() {\n var fields = $(\":input\").serializeArray();\n $(\"#results\").empty();\n jQuery.each(fields, function(i, field){\n $(\"#results\").append(field.value + \" \");\n });\n }\n\n $(\":checkbox, :radio\").click(showValues);\n $(\"select\").change(showValues);\n showValues();\n", "desc": "Get the values from a form, iterate through them, and append them to a results display.", "css": "\n body, select { font-size:14px; }\n form { margin:5px; }\n p { color:red; margin:5px; }\n b { color:blue; }\n ", "inhead": "", "html": "<p><b>Results:</b> <span id=\"results\"></span></p>\n <form>\n <select name=\"single\">\n <option>Single</option>\n <option>Single2</option>\n </select>\n <select name=\"multiple\" multiple=\"multiple\">\n <option selected=\"selected\">Multiple</option>\n <option>Multiple2</option>\n <option selected=\"selected\">Multiple3</option>\n </select><br/>\n <input type=\"checkbox\" name=\"check\" value=\"check1\"/> check1\n <input type=\"checkbox\" name=\"check\" value=\"check2\" checked=\"checked\"/> check2\n <input type=\"radio\" name=\"radio\" value=\"radio1\" checked=\"checked\"/> radio1\n <input type=\"radio\" name=\"radio\" value=\"radio2\"/> radio2\n </form>", "exampleId": "209iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n function showValues() {\n var fields = $(\":input\").serializeArray();\n $(\"#results\").empty();\n jQuery.each(fields, function(i, field){\n $(\"#results\").append(field.value + \" \");\n });\n }\n\n $(\":checkbox, :radio\").click(showValues);\n $(\"select\").change(showValues);\n showValues();\n\n });\n</script>\n<style>\n\n body, select { font-size:14px; }\n form { margin:5px; }\n p { color:red; margin:5px; }\n b { color:blue; }\n \n</style>\n</head>\n<body>\n<p><b>Results:</b> <span id=\"results\"></span></p>\n <form>\n <select name=\"single\">\n <option>Single</option>\n <option>Single2</option>\n </select>\n <select name=\"multiple\" multiple=\"multiple\">\n <option selected=\"selected\">Multiple</option>\n <option>Multiple2</option>\n <option selected=\"selected\">Multiple3</option>\n </select><br/>\n <input type=\"checkbox\" name=\"check\" value=\"check1\"/> check1\n <input type=\"checkbox\" name=\"check\" value=\"check2\" checked=\"checked\"/> check2\n <input type=\"radio\" name=\"radio\" value=\"radio1\" checked=\"checked\"/> radio1\n <input type=\"radio\" name=\"radio\" value=\"radio2\"/> radio2\n </form>\n</body>\n</html>"}]}, "browser210": {"id": 210, "searchname": "browser", "name": "$.browser", "type": "property", "category": "Utilities", "subcategory": "User Agent", "return": "Map", "added": "1.0", "sample": "", "desc": "Contains flags for the useragent, read from navigator.userAgent.", "longdesc": "<p>Available flags are:<ul><li> safari</li><li> opera</li><li> msie</li><li> mozilla</li></ul></p><p>This property is available before the DOM is ready, therefore you can use it to add ready events only for certain browsers.</p><p>There are situations where object detection is not reliable enough, in such cases it makes sense to use browser detection.</p><p>A combination of browser and object detection yields quite reliable results. </p>", "params": [], "examples": [{"code": "\n jQuery.each(jQuery.browser, function(i, val) {\n $(\"<div>\" + i + \" : <span>\" + val + \"</span>\")\n .appendTo(document.body);\n });\n", "htmlCode": "\n jQuery.each(jQuery.browser, function(i, val) {\n $(\"<div>\" + i + \" : <span>\" + val + \"</span>\")\n .appendTo(document.body);\n });\n", "desc": "Show the browser info.", "css": "\n p { color:green; font-weight:bolder; margin:3px 0 0 10px; }\n div { color:blue; margin-left:20px; font-size:14px; }\n span { color:red; }\n ", "inhead": "", "html": "<p>Browser info:</p>", "exampleId": "210iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n jQuery.each(jQuery.browser, function(i, val) {\n $(\"<div>\" + i + \" : <span>\" + val + \"</span>\")\n .appendTo(document.body);\n });\n\n });\n</script>\n<style>\n\n p { color:green; font-weight:bolder; margin:3px 0 0 10px; }\n div { color:blue; margin-left:20px; font-size:14px; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<p>Browser info:</p>\n</body>\n</html>"}, {"code": "$.browser.msie", "htmlCode": "$.browser.msie", "desc": "Returns true if the current useragent is some version of Microsoft's Internet Explorer", "css": "", "inhead": "", "html": "", "exampleId": "210iframeExample1", "runCode": ""}, {"code": "if ($.browser.safari) {\n alert(\"this is safari!\");\n }", "htmlCode": "if ($.browser.safari) {\n alert(\"this is safari!\");\n }", "desc": "Alerts \"this is safari!\" only for safari browsers", "css": "", "inhead": "", "html": "", "exampleId": "210iframeExample2", "runCode": ""}]}, "browser.version211": {"id": 211, "searchname": "browser.version", "name": "$.browser.version", "type": "property", "category": "Utilities", "subcategory": "User Agent", "return": "String", "added": "1.1.3", "sample": "", "desc": "The version number of the rendering engine for the user's browser.", "longdesc": "<p>Here are some typical results:<ul><li> Internet Explorer: 6.0, 7.0</li><li> Mozilla/Firefox/Flock/Camino: 1.7.12, 1.8.1.3</li><li> Opera: 9.20</li><li> Safari/Webkit: 312.8, 418.9</li></ul></p>", "params": [], "examples": [{"code": "\n\n $(\"p\").html(\"The browser version is: <span>\" +\n jQuery.browser.version + \"</span>\");\n", "htmlCode": "\n\n $(\"p\").html(\"The browser version is: <span>\" +\n jQuery.browser.version + \"</span>\");\n", "desc": "Returns the browser version.", "css": "\n p { color:blue; margin:20px; }\n span { color:red; }\n ", "inhead": "", "html": "<p>\n </p>", "exampleId": "211iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n\n $(\"p\").html(\"The browser version is: <span>\" +\n jQuery.browser.version + \"</span>\");\n\n });\n</script>\n<style>\n\n p { color:blue; margin:20px; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<p>\n </p>\n</body>\n</html>"}, {"code": "if ( $.browser.msie )\n alert( $.browser.version );\n}", "htmlCode": "if ( $.browser.msie )\n alert( $.browser.version );\n}", "desc": "Alerts the version of IE that is being used", "css": "", "inhead": "", "html": "", "exampleId": "211iframeExample1", "runCode": ""}, {"code": "\nif (jQuery.browser.msie) {\n alert(parseInt(jQuery.browser.version));\n}\n", "htmlCode": "\nif (jQuery.browser.msie) {\n alert(parseInt(jQuery.browser.version));\n}\n", "desc": "Often you only care about the \"major number,\" the whole number. This can be accomplished with JavaScript's built-in parseInt() function:", "css": "", "inhead": "", "html": "", "exampleId": "211iframeExample2", "runCode": ""}]}, "boxmodel212": {"id": 212, "searchname": "boxmodel", "name": "$.boxModel", "type": "property", "category": "Utilities", "subcategory": "User Agent", "return": "Boolean", "added": "1.0", "sample": "", "desc": "States if the current page, in the user's browser, is being rendered using the [http://www.w3.org/TR/REC-CSS2/box.html W3C CSS Box Model].", "longdesc": "", "params": [], "examples": [{"code": "\n\n $(\"p\").html(\"The box model for this iframe is: <span>\" +\n jQuery.boxModel + \"</span>\");\n", "htmlCode": "\n\n $(\"p\").html(\"The box model for this iframe is: <span>\" +\n jQuery.boxModel + \"</span>\");\n", "desc": "Returns the box model for the iframe.", "css": "\n p { color:blue; margin:20px; }\n span { color:red; }\n ", "inhead": "", "html": "<p>\n </p>", "exampleId": "212iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n\n $(\"p\").html(\"The box model for this iframe is: <span>\" +\n jQuery.boxModel + \"</span>\");\n\n });\n</script>\n<style>\n\n p { color:blue; margin:20px; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<p>\n </p>\n</body>\n</html>"}, {"code": "$.boxModel", "htmlCode": "$.boxModel", "desc": "Returns false if the page is in QuirksMode in Internet Explorer", "css": "", "inhead": "", "html": "", "exampleId": "212iframeExample1", "runCode": ""}]}, "each213": {"id": 213, "searchname": "each", "name": "$.each", "type": "function", "category": "Utilities", "subcategory": "Array and Object operations", "return": "Object", "added": "1.0", "sample": "", "desc": "A generic iterator function, which can be used to seamlessly iterate over both objects and arrays.", "longdesc": "<p>This function is not the same as $().each() - which is used to iterate, exclusively, over a jQuery object. This function can be used to iterate over anything.</p><p>The callback has two arguments:the key (objects) or index (arrays) as the first, and the value as the second.</p><p>If you wish to break the each() loop at a particular iteration you can do so by making your function return false. Other return values are ignored.</p>", "params": [{"optional": false, "name": "object", "type": "Object", "desc": "The object or array to iterate over."}, {"optional": false, "name": "callback", "type": "Function", "desc": "The function that will be executed on every object.\n<pre>function callback(indexInArray, valueOfElement) {\n var booleanKeepGoing;\n\n this; // == valueOfElement\n\n return booleanKeepGoing; // optional, unless false \n // and want to stop looping\n}\n</pre>"}], "examples": [{"code": "\n var arr = [ \"one\", \"two\", \"three\", \"four\", \"five\" ];\n var obj = { one:1, two:2, three:3, four:4, five:5 };\n\n jQuery.each(arr, function() {\n $(\"#\" + this).text(\"My id is \" + this + \".\");\n return (this != \"four\"); // will stop running to skip \"five\"\n });\n\n jQuery.each(obj, function(i, val) {\n $(\"#\" + i).append(document.createTextNode(\" - \" + val));\n });\n", "htmlCode": "\n var arr = [ \"one\", \"two\", \"three\", \"four\", \"five\" ];\n var obj = { one:1, two:2, three:3, four:4, five:5 };\n\n jQuery.each(arr, function() {\n $(\"#\" + this).text(\"My id is \" + this + \".\");\n return (this != \"four\"); // will stop running to skip \"five\"\n });\n\n jQuery.each(obj, function(i, val) {\n $(\"#\" + i).append(document.createTextNode(\" - \" + val));\n });\n", "desc": "Iterates through the array displaying each number as both a word and numeral", "css": "\n div { color:blue; }\n div#five { color:red; }\n ", "inhead": "", "html": "<div id=\"one\"></div>\n <div id=\"two\"></div>\n <div id=\"three\"></div>\n <div id=\"four\"></div>\n <div id=\"five\"></div>", "exampleId": "213iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var arr = [ \"one\", \"two\", \"three\", \"four\", \"five\" ];\n var obj = { one:1, two:2, three:3, four:4, five:5 };\n\n jQuery.each(arr, function() {\n $(\"#\" + this).text(\"My id is \" + this + \".\");\n return (this != \"four\"); // will stop running to skip \"five\"\n });\n\n jQuery.each(obj, function(i, val) {\n $(\"#\" + i).append(document.createTextNode(\" - \" + val));\n });\n\n });\n</script>\n<style>\n\n div { color:blue; }\n div#five { color:red; }\n \n</style>\n</head>\n<body>\n<div id=\"one\"></div>\n <div id=\"two\"></div>\n <div id=\"three\"></div>\n <div id=\"four\"></div>\n <div id=\"five\"></div>\n</body>\n</html>"}, {"code": " $.each( [0,1,2], function(i, n){\n alert( \"Item #\" + i + \": \" + n );\n });", "htmlCo
8000
de": " $.each( [0,1,2], function(i, n){\n alert( \"Item #\" + i + \": \" + n );\n });", "desc": "Iterates over items in an array, accessing both the current item and its index.", "css": "", "inhead": "", "html": "", "exampleId": "213iframeExample1", "runCode": ""}, {"code": "$.each( { name: \"John\", lang: \"JS\" }, function(i, n){\n alert( \"Name: \" + i + \", Value: \" + n );\n });", "htmlCode": "$.each( { name: \"John\", lang: \"JS\" }, function(i, n){\n alert( \"Name: \" + i + \", Value: \" + n );\n });", "desc": "Iterates over the properties in an object, accessing both the current item and its key.", "css": "", "inhead": "", "html": "", "exampleId": "213iframeExample2", "runCode": ""}]}, "extend214": {"id": 214, "searchname": "extend", "name": "$.extend", "type": "function", "category": "Utilities", "subcategory": "Array and Object operations", "return": "Object", "added": "1.0", "sample": "", "desc": "Extend one object with one or more others, returning the original, modified, object.", "longdesc": "<p>If no target is specified, the JQuery namespace itself is extended. This can be useful for plugin authors wishing to add new methods to JQuery.</p><p>If a boolean false is specified as the first argument, JQuery performs a deep copy, recursively copying any objects it finds. Otherwise, the copy will share structure with the original object(s).</p><p>Undefined properties are not copied. However, properties inherited from the object's prototype <em>will</em> be copied over.</p>", "params": [{"optional": false, "name": "target", "type": "Object", "desc": "The object to extend."}, {"optional": false, "name": "object1", "type": "Object", "desc": "The object that will be merged into the first."}, {"optional": true, "name": "objectN", "type": "Object", "desc": "More objects to merge into the first."}], "examples": [{"code": "var settings = { validate: false, limit: 5, name: \"foo\" };\nvar options = { validate: true, name: \"bar\" };\njQuery.extend(settings, options);", "htmlCode": "var settings = { validate: false, limit: 5, name: \"foo\" };\nvar options = { validate: true, name: \"bar\" };\njQuery.extend(settings, options);", "desc": "Merge settings and options, modifying settings.", "css": "", "inhead": "", "html": "", "exampleId": "214iframeExample0", "runCode": ""}, {"code": "var empty = {}\nvar defaults = { validate: false, limit: 5, name: \"foo\" };\nvar options = { validate: true, name: \"bar\" };\nvar settings = $.extend(empty, defaults, options);", "htmlCode": "var empty = {}\nvar defaults = { validate: false, limit: 5, name: \"foo\" };\nvar options = { validate: true, name: \"bar\" };\nvar settings = $.extend(empty, defaults, options);", "desc": "Merge defaults and options, without modifying the defaults.", "css": "", "inhead": "", "html": "", "exampleId": "214iframeExample1", "runCode": ""}]}, "grep215": {"id": 215, "searchname": "grep", "name": "$.grep", "type": "function", "category": "Utilities", "subcategory": "Array and Object operations", "return": "Array", "added": "1.0", "sample": "", "desc": "Filter items out of an array, by using a filter function.", "longdesc": "<p>The specified function will be passed two arguments: The current array item and the filter function. The function must return 'true' to keep the item in the array, false to remove it.</p>", "params": [{"optional": false, "name": "array", "type": "Array", "desc": "The Array to find items in."}, {"optional": false, "name": "callback", "type": "Function", "desc": "The function to process each item against. The first argument to the function is the list item, and the second argument is the list index. The function should return a Boolean value. The \"lambda-form\" function feature was removed in jQuery 1.2.3 to help compatibility with other frameworks.\n<pre>function callback(elementOfArray, indexInArray) {\n var shouldKeepIt;\n\n this; // unmapped\n\n return shouldKeepIt;\n}\n</pre>"}, {"optional": true, "name": "invert", "type": "Boolean", "desc": "If \"invert\" is false, or not provided, then the function returns an array consisting of all elements for which \"callback\" returns true. If \"invert\" is true, then the function returns an array consisting of all elements for which \"callback\" returns false."}], "examples": [{"code": "\n var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];\n $(\"div\").text(arr.join(\", \"));\n\n arr = jQuery.grep(arr, function(n, i){\n return (n != 5 && i > 4);\n });\n $(\"p\").text(arr.join(\", \"));\n\n arr = jQuery.grep(arr, function (a) { return a != 9; });\n $(\"span\").text(arr.join(\", \"));\n", "htmlCode": "\n var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];\n $(\"div\").text(arr.join(\", \"));\n\n arr = jQuery.grep(arr, function(n, i){\n return (n != 5 && i > 4);\n });\n $(\"p\").text(arr.join(\", \"));\n\n arr = jQuery.grep(arr, function (a) { return a != 9; });\n $(\"span\").text(arr.join(\", \"));\n", "desc": "Filters the original array of numbers leaving that are not 5 and have an index greater than 3. Then it removes all 9s while inverting it.", "css": "\n div { color:blue; }\n p { color:green; margin:0; }\n span { color:red; }\n ", "inhead": "", "html": "<div></div>\n <p></p>\n <span></span>\n ", "exampleId": "215iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];\n $(\"div\").text(arr.join(\", \"));\n\n arr = jQuery.grep(arr, function(n, i){\n return (n != 5 && i > 4);\n });\n $(\"p\").text(arr.join(\", \"));\n\n arr = jQuery.grep(arr, function (a) { return a != 9; });\n $(\"span\").text(arr.join(\", \"));\n\n });\n</script>\n<style>\n\n div { color:blue; }\n p { color:green; margin:0; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<div></div>\n <p></p>\n <span></span>\n \n</body>\n</html>"}, {"code": "$.grep( [0,1,2], function(n,i){\n return n > 0;\n });", "htmlCode": "$.grep( [0,1,2], function(n,i){\n return n > 0;\n });", "desc": "Filter an array of numbers to include only numbers bigger then zero.", "css": "", "inhead": "", "html": "", "exampleId": "215iframeExample1", "runCode": ""}]}, "makearray216": {"id": 216, "searchname": "makearray", "name": "$.makeArray", "type": "function", "category": "Utilities", "subcategory": "Array and Object operations", "return": "Array", "added": "1.2", "sample": "", "desc": "Turns an array-like object into a true array.", "longdesc": "<p>Array-like objects have a length property and its properties are numbered from 0 to length - 1. Typically it will be unnecessary to use this function if you are using jQuery which uses this function internally.</p>", "params": [{"optional": false, "name": "obj", "type": "Object", "desc": "Array-like object to turn in to an actual Array."}], "examples": [{"code": "\n var arr = jQuery.makeArray(document.getElementsByTagName(\"div\"));\n arr.reverse(); // use an Array method on list of dom elements\n $(arr).appendTo(document.body);\n", "htmlCode": "\n var arr = jQuery.makeArray(document.getElementsByTagName(\"div\"));\n arr.reverse(); // use an Array method on list of dom elements\n $(arr).appendTo(document.body);\n", "desc": "Turn a collection of HTMLElements into an Array of them.", "css": "\n div { color:red; }\n ", "inhead": "", "html": "<div>First</div>\n <div>Second</div> \n <div>Third</div>\n <div>Fourth</div>", "exampleId": "216iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var arr = jQuery.makeArray(document.getElementsByTagName(\"div\"));\n arr.reverse(); // use an Array method on list of dom elements\n $(arr).appendTo(document.body);\n\n });\n</script>\n<style>\n\n div { color:red; }\n \n</style>\n</head>\n<body>\n<div>First</div>\n <div>Second</div> \n <div>Third</div>\n <div>Fourth</div>\n</body>\n</html>"}]}, "map217": {"id": 217, "searchname": "map", "name": "$.map", "type": "function", "category": "Utilities", "subcategory": "Array and Object operations", "return": "Array", "added": "1.0", "sample": "", "desc": "Translate all items in an array to another array of items.", "longdesc": "<p>The translation function that is provided to this method is called for each item in the array and is passed two arguments: The item to be translated, and its index within the array.</p><p>The function can then return the translated value, 'null' (to remove the item), or an array of values - which will be flattened into the full array. </p>", "params": [{"optional": false, "name": "array", "type": "Array", "desc": "The Array to translate."}, {"optional": false, "name": "callback", "type": "Function", "desc": "The function to process each item against. The argument to the function is the list item. The function can return any value. The \"lambda-form\" function represented as a string no longer works. It was removed in version 1.2.3 to increase compatibility with Adobe AIR. \n<pre>function callback(elementOfArray, indexInArray) {\n var replacementValue;\n\n this; // unmapped\n\n return replacementValue;\n}\n</pre>"}], "examples": [{"code": "\n var arr = [ \"a\", \"b\", \"c\", \"d\", \"e\" ]\n $(\"div\").text(arr.join(\", \"));\n\n arr = jQuery.map(arr, function(n, i){\n return (n.toUpperCase() + i);\n });\n $(\"p\").text(arr.join(\", \"));\n\n arr = jQuery.map(arr, function (a) { return a + a; });\n $(\"span\").text(arr.join(\", \"));\n", "htmlCode": "\n var arr = [ \"a\", \"b\", \"c\", \"d\", \"e\" ]\n $(\"div\").text(arr.join(\", \"));\n\n arr = jQuery.map(arr, function(n, i){\n return (n.toUpperCase() + i);\n });\n $(\"p\").text(arr.join(\", \"));\n\n arr = jQuery.map(arr, function (a) { return a + a; });\n $(\"span\").text(arr.join(\", \"));\n", "desc": "A couple examples of using .map()", "css": "\n div { color:blue; }\n p { color:green; margin:0; }\n span { color:red; }\n ", "inhead": "", "html": "<div></div>\n <p></p>\n <span></span>\n ", "exampleId": "217iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var arr = [ \"a\", \"b\", \"c\", \"d\", \"e\" ]\n $(\"div\").text(arr.join(\", \"));\n\n arr = jQuery.map(arr, function(n, i){\n return (n.toUpperCase() + i);\n });\n $(\"p\").text(arr.join(\", \"));\n\n arr = jQuery.map(arr, function (a) { return a + a; });\n $(\"span\").text(arr.join(\", \"));\n\n });\n</script>\n<style>\n\n div { color:blue; }\n p { color:green; margin:0; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<div></div>\n <p></p>\n <span></span>\n \n</body>\n</html>"}, {"code": "$.map( [0,1,2], function(n){\n return n + 4;\n });", "htmlCode": "$.map( [0,1,2], function(n){\n return n + 4;\n });", "desc": "Maps the original array to a new one and adds 4 to each value.", "css": "", "inhead": "", "html": "", "exampleId": "217iframeExample1", "runCode": ""}, {"code": "$.map( [0,1,2], function(n){\n return n > 0 ? n + 1 : null;\n });", "htmlCode": "$.map( [0,1,2], function(n){\n return n > 0 ? n + 1 : null;\n });", "desc": "Maps the original array to a new one and adds 1 to each value if it is bigger then zero, otherwise it's removed.", "css": "", "inhead": "", "html": "", "exampleId": "217iframeExample2", "runCode": ""}, {"code": "$.map( [0,1,2], function(n){\n return [ n, n + 1 ];\n });", "htmlCode": "$.map( [0,1,2], function(n){\n return [ n, n + 1 ];\n });", "desc": "Maps the original array to a new one, each element is added with it's original value and the value plus one.", "css": "", "inhead": "", "html": "", "exampleId": "217iframeExample3", "runCode": ""}, {"code": "$.map( [0,1,2,3], function (a) { return a * a; } );", "htmlCode": "$.map( [0,1,2,3], function (a) { return a * a; } );", "desc": "Maps the original array to a new one, each element is squared.", "css": "", "inhead": "", "html": "", "exampleId": "217iframeExample4", "runCode": ""}]}, "inarray218": {"id": 218, "searchname": "inarray", "name": "$.inArray", "type": "function", "category": "Utilities", "subcategory": "Array and Object operations", "return": "Number", "added": "1.2", "sample": "", "desc": "Determine the index of the first parameter in the Array (-1 if not found).", "longdesc": "", "params": [{"optional": false, "name": "value", "type": "Any", "desc": "Value to see if it exists in the array."}, {"optional": false, "name": "array", "type": "Array", "desc": "Array to look through for the value."}], "examples": [{"code": "\n var arr = [ 4, \"Pete\", 8, \"John\" ];\n\n $(\"span:eq(0)\").text(jQuery.inArray(\"John\", arr));\n $(\"span:eq(1)\").text(jQuery.inArray(4, arr));\n $(\"span:eq(2)\").text(jQuery.inArray(\"David\", arr));\n", "htmlCode": "\n var arr = [ 4, \"Pete\", 8, \"John\" ];\n\n $(\"span:eq(0)\").text(jQuery.inArray(\"John\", arr));\n $(\"span:eq(1)\").text(jQuery.inArray(4, arr));\n $(\"span:eq(2)\").text(jQuery.inArray(\"David\", arr));\n", "desc": "", "css": "\n div { color:blue; }\n span { color:red; }\n ", "inhead": "", "html": "<div>\"John\" found at <span></span></div>\n <div>4 found at <span></span></div>\n <div>\"David\" found at <span></span></div>", "exampleId": "218iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var arr = [ 4, \"Pete\", 8, \"John\" ];\n\n $(\"span:eq(0)\").text(jQuery.inArray(\"John\", arr));\n $(\"span:eq(1)\").text(jQuery.inArray(4, arr));\n $(\"span:eq(2)\").text(jQuery.inArray(\"David\", arr));\n\n });\n</script>\n<style>\n\n div { color:blue; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<div>\"John\" found at <span></span></div>\n <div>4 found at <span></span></div>\n <div>\"David\" found at <span></span></div>\n</body>\n</html>"}]}, "unique219": {"id": 219, "searchname": "unique", "name": "$.unique", "type": "function", "category": "Utilities", "subcategory": "Array and Object operations", "return": "Array", "added": "1.1.3", "sample": "", "desc": "Remove all duplicate elements from an array of elements.", "longdesc": "", "params": [{"optional": false, "name": "array", "type": "Array", "desc": "The Array to translate."}], "examples": [{"code": "\n var divs = $(\"div\").get();\n\n // add 3 elements of class dup too (they are divs)\n divs&nb
10000
sp;= divs.concat($(\".dup\").get());\n $(\"div:eq(1)\").text(\"Pre-unique there are \" + divs.length + \" elements.\");\n\n divs = jQuery.unique(divs);\n $(\"div:eq(2)\").text(\"Post-unique there are \" + divs.length + \" elements.\")\n .css(\"color\", \"red\");\n", "htmlCode": "\n var divs = $(\"div\").get();\n\n // add 3 elements of class dup too (they are divs)\n divs = divs.concat($(\".dup\").get());\n $(\"div:eq(1)\").text(\"Pre-unique there are \" + divs.length + \" elements.\");\n\n divs = jQuery.unique(divs);\n $(\"div:eq(2)\").text(\"Post-unique there are \" + divs.length + \" elements.\")\n .css(\"color\", \"red\");\n", "desc": "Removes any duplicate elements from the array of divs.", "css": "\n div { color:blue; }\n ", "inhead": "", "html": "<div>There are 6 divs in this document.</div>\n <div></div>\n <div class=\"dup\"></div>\n <div class=\"dup\"></div>\n <div class=\"dup\"></div>\n <div></div>", "exampleId": "219iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var divs = $(\"div\").get();\n\n // add 3 elements of class dup too (they are divs)\n divs = divs.concat($(\".dup\").get());\n $(\"div:eq(1)\").text(\"Pre-unique there are \" + divs.length + \" elements.\");\n\n divs = jQuery.unique(divs);\n $(\"div:eq(2)\").text(\"Post-unique there are \" + divs.length + \" elements.\")\n .css(\"color\", \"red\");\n\n });\n</script>\n<style>\n\n div { color:blue; }\n \n</style>\n</head>\n<body>\n<div>There are 6 divs in this document.</div>\n <div></div>\n <div class=\"dup\"></div>\n <div class=\"dup\"></div>\n <div class=\"dup\"></div>\n <div></div>\n</body>\n</html>"}, {"code": "$.unique(document.getElementsByTagName(\"div\"));", "htmlCode": "$.unique(document.getElementsByTagName(\"div\"));", "desc": "Removes any duplicate elements from the array of divs.", "css": "", "inhead": "", "html": "", "exampleId": "219iframeExample1", "runCode": ""}]}, "isfunction220": {"id": 220, "searchname": "isfunction", "name": "$.isFunction", "type": "function", "category": "Utilities", "subcategory": "Test operations", "return": "boolean", "added": "1.2", "sample": "", "desc": "Determine if the parameter passed is a function.", "longdesc": "", "params": [{"optional": false, "name": "obj", "type": "Object", "desc": "Object to test whether or not it is a function."}], "examples": [{"code": "\n function stub() {\n }\n var objs = [\n function () {},\n { x:15, y:20 },\n null,\n stub,\n \"function\"\n ];\n\n jQuery.each(objs, function (i) {\n var isFunc = jQuery.isFunction(objs[i]);\n $(\"span:eq( \" + i + \")\").text(isFunc);\n });\n", "htmlCode": "\n function stub() {\n }\n var objs = [\n function () {},\n { x:15, y:20 },\n null,\n stub,\n \"function\"\n ];\n\n jQuery.each(objs, function (i) {\n var isFunc = jQuery.isFunction(objs[i]);\n $(\"span:eq( \" + i + \")\").text(isFunc);\n });\n", "desc": "Test a few parameter examples.", "css": "\n div { color:blue; margin:2px; font-size:14px; }\n span { color:red; }\n ", "inhead": "", "html": "\n <div>jQuery.isFunction(objs[0]) = <span></span></div>\n <div>jQuery.isFunction(objs[1]) = <span></span></div>\n <div>jQuery.isFunction(objs[2]) = <span></span></div>\n <div>jQuery.isFunction(objs[3]) = <span></span></div>\n <div>jQuery.isFunction(objs[4]) = <span></span></div>\n ", "exampleId": "220iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n function stub() {\n }\n var objs = [\n function () {},\n { x:15, y:20 },\n null,\n stub,\n \"function\"\n ];\n\n jQuery.each(objs, function (i) {\n var isFunc = jQuery.isFunction(objs[i]);\n $(\"span:eq( \" + i + \")\").text(isFunc);\n });\n\n });\n</script>\n<style>\n\n div { color:blue; margin:2px; font-size:14px; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n\n <div>jQuery.isFunction(objs[0]) = <span></span></div>\n <div>jQuery.isFunction(objs[1]) = <span></span></div>\n <div>jQuery.isFunction(objs[2]) = <span></span></div>\n <div>jQuery.isFunction(objs[3]) = <span></span></div>\n <div>jQuery.isFunction(objs[4]) = <span></span></div>\n \n</body>\n</html>"}, {"code": "$.isFunction(function(){});", "htmlCode": "$.isFunction(function(){});", "desc": "Finds out if the parameter is a funcion.", "css": "", "inhead": "", "html": "", "exampleId": "220iframeExample1", "runCode": ""}]}, "trim221": {"id": 221, "searchname": "trim", "name": "$.trim", "type": "function", "category": "Utilities", "subcategory": "String operations", "return": "String", "added": "1.0", "sample": "", "desc": "Remove the whitespace from the beginning and end of a string.", "longdesc": "<p>Uses a regular expression to remove whitespace from the given string.</p>", "params": [{"optional": false, "name": "str", "type": "String", "desc": "The string to trim."}], "examples": [{"code": "\n $(\"button\").click(function () {\n var str = \" lots of spaces before and after \";\n alert(\"'\" + str + \"'\");\n\n str = jQuery.trim(str);\n alert(\"'\" + str + \"' - no longer\");\n });\n", "htmlCode": "\n $(\"button\").click(function () {\n var str = \" lots of spaces before and after \";\n alert(\"'\" + str + \"'\");\n\n str = jQuery.trim(str);\n alert(\"'\" + str + \"' - no longer\");\n });\n", "desc": "Removes the two whitespaces at the start and at the end of the string.", "css": "", "inhead": "", "html": "<button>Show Trim Example</button>", "exampleId": "221iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"button\").click(function () {\n var str = \" lots of spaces before and after \";\n alert(\"'\" + str + \"'\");\n\n str = jQuery.trim(str);\n alert(\"'\" + str + \"' - no longer\");\n });\n\n });\n</script>\n<style>\n\n</style>\n</head>\n<body>\n<button>Show Trim Example</button>\n</body>\n</html>"}, {"code": " $.trim(\" hello, how are you? \");", "htmlCode": " $.trim(\" hello, how are you? \");", "desc": "Removes the two whitespaces at the start and at the end of the string.", "css": "", "inhead": "", "html": "", "exampleId": "221iframeExample1", "runCode": ""}]}, "data222": {"id": 222, "searchname": "data", "name": "$.data", "type": "function", "category": "Internals", "subcategory": "Data Cache", "return": "Number", "added": "1.2", "sample": "", "desc": "Returns a unique ID for the element.", "longdesc": "<p>Typically this function will only be used internally. It is called automatically when necessary when using the other data() functionality.</p>", "params": [{"optional": false, "name": "elem", "type": "Element", "desc": "DOM element of interest."}], "examples": [{"code": "\n $(document.body).click(function(e) {\n var id = jQuery.data(e.target);\n $(\"span\").text(id);\n });\n", "htmlCode": "\n $(document.body).click(function(e) {\n var id = jQuery.data(e.target);\n $(\"span\").text(id);\n });\n", "desc": "Get the store id of an element. It is assigned on the data() function call if one hasn't been assigned yet.", "css": "\n div { margin:5px; background:yellow; }\n p { margin:5px; color:blue; }\n span { color:red; }\n ", "inhead": "", "html": "<div>A div</div>\n <div>Another</div>\n <p>The id of this div is <span>?</span></p>", "exampleId": "222iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(document.body).click(function(e) {\n var id = jQuery.data(e.target);\n $(\"span\").text(id);\n });\n\n });\n</script>\n<style>\n\n div { margin:5px; background:yellow; }\n p { margin:5px; color:blue; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<div>A div</div>\n <div>Another</div>\n <p>The id of this div is <span>?</span></p>\n</body>\n</html>"}]}, "data223": {"id": 223, "searchname": "data", "name": "$.data", "type": "function", "category": "Internals", "subcategory": "Data Cache", "return": "Any", "added": "1.2", "sample": "", "desc": "Returns value at named data store for the element.", "longdesc": "", "params": [{"optional": false, "name": "elem", "type": "Element", "desc": "DOM element of interest."}, {"optional": false, "name": "name", "type": "String", "desc": "Name of the data stored."}], "examples": [{"code": "\n $(\"button\").click(function(e) {\n var adiv = $(\"div\").get(0);\n var value;\n\n switch ($(\"button\").index(this)) {\n case 0 :\n value = jQuery.data(adiv, \"blah\");\n break;\n case 1 :\n jQuery.data(adiv, \"blah\", \"hello\");\n value = \"Stored!\";\n break;\n case 2 :\n jQuery.data(adiv, \"blah\", 86);\n value = \"Stored!\";\n break;\n case 3 :\n jQuery.removeData(adiv);\n value = \"Removed!\";\n break;\n }\n\n $(\"span\").text(\"\" + value);\n });\n", "htmlCode": "\n $(\"button\").click(function(e) {\n var adiv = $(\"div\").get(0);\n var value;\n\n switch ($(\"button\").index(this)) {\n case 0 :\n value = jQuery.data(adiv, \"blah\");\n break;\n case 1 :\n jQuery.data(adiv, \"blah\", \"hello\");\n value = \"Stored!\";\n break;\n case 2 :\n jQuery.data(adiv, \"blah\", 86);\n value = \"Stored!\";\n break;\n case 3 :\n jQuery.removeData(adiv);\n value = \"Removed!\";\n break;\n }\n\n $(\"span\").text(\"\" + value);\n });\n", "desc": "Get the data named \"blah\" stored at for an element.", "css": "\n div { margin:5px; background:yellow; }\n button { margin:5px; font-size:14px; }\n p { margin:5px; color:blue; }\n span { color:red; }\n ", "inhead": "", "html": "<div>A div</div>\n <button>Get \"blah\" from the div</button>\n <button>Set \"blah\" to \"hello\"</button>\n <button>Set \"blah\" to 86</button>\n <button>Remove \"blah\" from the div</button>\n <p>The \"blah\" value of this div is <span>?</span></p>", "exampleId": "223iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n $(\"button\").click(function(e) {\n var adiv = $(\"div\").get(0);\n var value;\n\n switch ($(\"button\").index(this)) {\n case 0 :\n value = jQuery.data(adiv, \"blah\");\n break;\n case 1 :\n jQuery.data(adiv, \"blah\", \"hello\");\n value = \"Stored!\";\n break;\n case 2 :\n jQuery.data(adiv, \"blah\", 86);\n value = \"Stored!\";\n break;\n case 3 :\n jQuery.removeData(adiv);\n value = \"Removed!\";\n break;\n }\n\n $(\"span\").text(\"\" + value);\n });\n\n });\n</script>\n<style>\n\n div { margin:5px; background:yellow; }\n button { margin:5px; font-size:14px; }\n p { margin:5px; color:blue; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<div>A div</div>\n <button>Get \"blah\" from the div</button>\n <button>Set \"blah\" to \"hello\"</button>\n <button>Set \"blah\" to 86</button>\n <button>Remove \"blah\" from the div</button>\n <p>The \"blah\" value of this div is <span>?</span></p>\n</body>\n</html>"}]}, "data224": {"id": 224, "searchname": "data", "name": "$.data", "type": "function", "category": "Internals", "subcategory": "Data Cache", "return": "Any", "added": "1.2", "sample": "", "desc": "Stores the value in the named spot and also returns the value.", "longdesc": "<p>This function can be useful for attaching data to elements without having to create a new expando. It also isn't limited to a string. The value can be any format.</p><p>To avoid conflicts in plugins, it is usually effective to store one object using the plugin name and put all the necessary information in that object.</p><p><code>\n var obj = jQuery.data($(\"#target\").get(0), \"pluginname\", {});\n obj[...] = ...\n</code></p>", "params": [{"optional": false, "name": "elem", "type": "Element", "desc": "DOM element of interest."}, {"optional": false, "name": "name", "type": "String", "desc": "Name of the data to store."}, {"optional": false, "name": "value", "type": "Any", "desc": "Value to be stored."}], "examples": [{"code": "\n var adiv = $(\"div\").get(0);\n jQuery.data(adiv, \"test\", { first: 16, last: \"pizza!\" });\n $(\"span:first\").text(jQuery.data(adiv, \"test\").first);\n $(\"span:last\").text(jQuery.data(adiv, \"test\").last);\n", "htmlCode": "\n var adiv = $(\"div\").get(0);\n jQuery.data(adiv, \"test\", { first: 16, last: \"pizza!\" });\n $(\"span:first\").text(jQuery.data(adiv, \"test\").first);\n $(\"span:last\").text(jQuery.data(adiv, \"test\").last);\n", "desc": "Store then retrieve a value from the div element.", "css": "\n div { color:blue; }\n span { color:red; }\n ", "inhead": "", "html": "<div>\n The values stored were \n <span></span>\n and\n <span></span>\n </div>", "exampleId": "224iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var adiv = $(\"div\").get(0);\n jQuery.data(adiv, \"test\", { first: 16, last: \"pizza!\" });\n $(\"span:first\").text(jQuery.data(adiv, \"test\").first);\n $(\"span:last\").text(jQuery.data(adiv, \"test\").last);\n\n });\n</script>\n<style>\n\n div { color:blue; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<div>\n The values stored were \n <span></span>\n and\n <span></span>\n </div>\n</body>\n</html>"}]}, "removedata225": {"id": 225, "searchname": "removedata", "name": "$.removeData", "type": "function", "category": "Internals", "subcategory": "Data Cache", "return": "", "added": "1.2", "sample": "", "desc": "Remove the expando attribute that allows data storage on an element.", "longdesc": "<p>This is the complement function to jQuery.data(elem) which is called as necessary by jQuery.data(elem, name, value).</p>", "params": [{"optional": false, "name": "elem", "type": "Element", "desc": "Element to delete the data store from."}], "examples": [{"code": "\n var adiv = $(\"div\").get(0);\n\n $(\"span:eq(0)\").text(\"\" + jQuery.data(adiv, \"test1\"));\n jQuery.data(adiv, \"test1\", \"VALUE-1\");\n jQuery.data(adiv, \"test2\", \"VALUE-2\");\n $(\"span:eq(1)\").text(\"\" + jQuery.data(adiv, \"test1\"));\n jQuery.removeData(adiv);\n $(\"span:eq(2)\").text(\"\" + jQuery.data(adiv, \"test1\"));\n $(\"span:eq(3)\").text(\"\" + jQuery.data(adiv, \"test2\"));\n", "htmlCode": "\n var adiv = $(\"div\").get(0);\n\n $(\"span:eq(0)\").text(\"\" + jQuery.data(adiv, \"test1\"));\n jQuery.data(adiv, \"test1\", \"VALUE-1\");\n jQuery.data(adiv, \"test2\", \"VALUE-2\");\n $(\"span:eq(1)\").text(\"\" + jQuery.data(adiv, \"test1\"));\n jQuery.removeData(adiv);\n $(\"span:eq(2)\").text(\"\" + jQuery.data(adiv, \"test1\"));\n $(\"span:eq(3)\").text(\"\" + jQuery.data(adiv, \"test2\"));\n", "desc": "Set a data store then remove it.", "css": "\n div { margin:2px; color:blue; }\n span { color:red; }\n ", "inhead": "", "html": "<div>value1 before creation: <span></span></div>\n <div>value1 after creation: <span></span></div>\n <div>value1 after removal: <span></span></div>\n <div>value2 after removal: <span></span></div>", "exampleId": "225iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var adiv = $(\"div\").get(0);\n\n $(\"span:eq(0)\").text(\"\" + jQuery.data(adiv, \"test1\"));\n jQuery.data(adiv, \"test1\", \"VALUE-1\");\n jQuery.data(adiv, \"test2\", \"VALUE-2\");\n $(\"span:eq(1)\").text(\"\" + jQuery.data(adiv, \"test1\"));\n jQuery.removeData(adiv);\n $(\"span:eq(2)\").text(\"\" + jQuery.data(adiv, \"test1\"));\n $(\"span:eq(3)\").text(\"\" + jQuery.data(adiv, \"test2\"));\n\n });\n</script>\n<style>\n\n div { margin:2px; color:blue; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<div>value1 before creation: <span></span></div>\n <div>value1 after creation: <span></span></div>\n <div>value1 after removal: <span></span></div>\n <div>value2 after removal: <span></span></div>\n</body>\n</html>"}]}, "removedata226": {"id": 226, "searchname": "removedata", "name": "$.removeData", "type": "function", "category": "Internals", "subcategory": "Data Cache", "return": "", "added": "1.2", "sample": "", "desc": "Removes just this one named data store.", "longdesc": "<p>This is the complement function to jQuery.data(elem, name, value).</p>", "params": [{"optional": false, "name": "elem", "type": "Element", "desc": "Element to delete the named data store property from."}, {"optional": false, "name": "name", "type": "String", "desc": "The name of the data store property to remove."}], "examples": [{"code": "\n var adiv = $(\"div\").get(0);\n\n $(\"span:eq(0)\").text(\"\" + jQuery.data(adiv, \"test1\"));\n jQuery.data(adiv, \"test1\", \"VALUE-1\");\n jQuery.data(adiv, \"test2\", \"VALUE-2\");\n $(\"span:eq(1)\").text(\"\" + jQuery.data(adiv, \"test1\"));\n jQuery.removeData(adiv, \"test1\");\n $(\"span:eq(2)\").text(\"\" + jQuery.data(adiv, \"test1\"));\n $(\"span:eq(3)\").text(\"\" + jQuery.data(adiv, \"test2\"));\n", "htmlCode": "\n var adiv = $(\"div\").get(0);\n\n $(\"span:eq(0)\").text(\"\" + jQuery.data(adiv, \"test1\"));\n jQuery.data(adiv, \"test1\", \"VALUE-1\");\n jQuery.data(adiv, \"test2\", \"VALUE-2\");\n $(\"span:eq(1)\").text(\"\" + jQuery.data(adiv, \"test1\"));\n jQuery.removeData(adiv, \"test1\");\n $(\"span:eq(2)\").text(\"\" + jQuery.data(adiv, \"test1\"));\n $(\"span:eq(3)\").text(\"\" + jQuery.data(adiv, \"test2\"));\n", "desc": "Set a data store for 2 names then remove one of them.", "css": "\n div { margin:2px; color:blue; }\n span { color:red; }\n ", "inhead": "", "html": "<div>value1 before creation: <span></span></div>\n <div>value1 after creation: <span></span></div>\n <div>value1 after removal: <span></span></div>\n <div>value2 after removal: <span></span></div>", "exampleId": "226iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var adiv = $(\"div\").get(0);\n\n $(\"span:eq(0)\").text(\"\" + jQuery.data(adiv, \"test1\"));\n jQuery.data(adiv, \"test1\", \"VALUE-1\");\n jQuery.data(adiv, \"test2\", \"VALUE-2\");\n $(\"span:eq(1)\").text(\"\" + jQuery.data(adiv, \"test1\"));\n jQuery.removeData(adiv, \"test1\");\n $(\"span:eq(2)\").text(\"\" + jQuery.data(adiv, \"test1\"));\n $(\"span:eq(3)\").text(\"\" + jQuery.data(adiv, \"test2\"));\n\n });\n</script>\n<style>\n\n div { margin:2px; color:blue; }\n span { color:red; }\n \n</style>\n</head>\n<body>\n<div>value1 before creation: <span></span></div>\n <div>value1 after creation: <span></span></div>\n <div>value1 after removal: <span></span></div>\n <div>value2 after removal: <span></span></div>\n</body>\n</html>"}]}, "param227": {"id": 227, "searchname": "param", "name": "$.param", "type": "function", "category": "Internals", "subcategory": "Ajax", "return": "String", "added": "1.2", "sample": "", "desc": "Serializes an array of form elements or an object (core of <a href='Ajax/serialize'>.serialize()</a> method).", "longdesc": "", "params": [{"optional": false, "name": "obj", "type": "Array<Elements>, jQuery, Object", "desc": "An Array or jQuery object is serialized by name/value pairs. An object by key/value pairs."}], "examples": [{"code": "\n var params = { width:1680, height:1050 };\n var str = jQuery.param(params);\n $(\"#results\").text(str);\n", "htmlCode": "\n var params = { width:1680, height:1050 };\n var str = jQuery.param(params);\n $(\"#results\").text(str);\n", "desc": "Serialize a key/value object.", "css": "div { color:red; }", "inhead": "", "html": "<div id=\"results\"></div>", "exampleId": "227iframeExample0", "runCode": "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<base href=\"http://docs.jquery.com\" />\n<script src=\"http://code.jquery.com/jquery-latest.js\"></script>\n\n<script>\n$(document).ready(function(){\n\n var params = { width:1680, height:1050 };\n var str = jQuery.param(params);\n $(\"#results\").text(str);\n\n });\n</script>\n<style>\ndiv { color:red; }\n</style>\n</head>\n<body>\n<div id=\"results\"></div>\n</body>\n</html>"}]}}, "searchNames": ["jquery1", "jquery2", "jquery3", "jquery4", "each5", "eq6", "get7", "get8", "index9", "length10", "data11", "data12", "removedata13", "fn.extend14", "extend15", "noconflict16", "noconflict17", "id18", "element19", "class20", "all21", "multiple22", "descendant23", "child24", "next25", "siblings26", "first27", "last28", "not29", "even30", "odd31", "eq32", "gt33", "lt34", "header35", "animated36", "contains37", "empty38", "has39", "parent40", "hidden41", "visible42", "attributehas43", "attributeequals44", "attributenotequal45", "attributestartswith46", "attributeendswith47", "attributecontains48", "attributemultiple49", "nthchild50", "firstchild51", "lastchild52", "onlychild53", "input54", "text55", "password56", "radio57", "checkbox58", "submit59", "image60", "reset61", "button62", "file63", "hidden64", "enabled65", "disabled66", "checked67", "selected68", "attr69", "attr70", "attr71", "attr72", "removeattr73", "addclass74", "hasclass75", "removeclass76", "toggleclass77", "html78", "html79", "text80", "text81", "val82", "val83", "val84", "eq85", "hasclass86", "filter87", "filter88", "is89", "map90", "not91", "slice92", "add93", "children94", "contents95", "find96", "next97", "nextall98", "parent99", "parents100", "prev101", "prevall102", "siblings103", "andself104", "end105", "html106", "html107", "text108", "text109", "append110", "appendto111", "prepend112", "prependto113", "after114", "before115", "insertafter116", "insertbefore117", "wrap118", "wrap119", "wrapall120", "wrapall121", "wrapinner122", "wrapinner123", "replacewith124", "replaceall125", "empty126", "remove127", "clone128", "clone129", "css130", "css131", "css132", "offset133", "height134", "height135", "width136", "width137", "ready138", "bind139", "one140", "trigger141", "triggerhandler142", "unbind143", "hover144", "toggle145", "blur146", "blur147", "change148", "change149", "click150", "click151", "dblclick152", "dblclick153", "error154", "error155", "focus156", "focus157", "keydown158", "keydown159", "keypress160", "keypress161", "keyup162", "keyup163", "load164", "mousedown165", "mousemove166", "mouseout167", "mouseover168", "mouseup169", "resize170", "scroll171", "select172", "select173", "submit174", "submit175", "unload176", "show177", "show178", "hide179", "hide180", "toggle181", "slidedown182", "slideup183", "slidetoggle184", "fadein185", "fadeout186", "fadeto187", "animate188", "animate189", "stop190", "queue191", "queue192", "queue193", "dequeue194", "ajax195", "load196", "get197", "getjson198", "getscript199", "post200", "ajaxcomplete201", "ajaxerror202", "ajaxsend203", "ajaxstart204", "ajaxstop205", "ajaxsuccess206", "ajaxsetup207", "serialize208", "serializearray209", "browser210", "browser.version211", "boxmodel212", "each213", "extend214", "grep215", "makearray216", "map217", "inarray218", "unique219", "isfunction220", "trim221", "data222", "data223", "data224", "removedata225", "removedata226", "param227"], "categories": [{"name": "Core", "subcategories": ["$(...) The jQuery Function", "jQuery Object Accessors", "Data Cache", "Plugins", "Interoperability"]}, {"name": "Selectors", "subcategories": ["Basics", "Hierarchy", "Basic Filters", "Content Filters", "Visibility Filters", "Attribute Filters", "Child Filters", "Forms", "Form Filters"]}, {"name": "Attributes", "subcategories": ["Attr", "Class", "HTML", "Text", "Value"]}, {"name": "Traversing", "subcategories": ["Filtering", "Finding", "Chaining"]}, {"name": "Manipulation", "subcategories": ["Changing Contents", "Inserting Inside", "Inserting Outside", "Inserting Around", "Replacing", "Removing", "Copying"]}, {"name": "CSS", "subcategories": ["CSS", "Positioning", "Height and Width"]}, {"name": "Events", "subcategories": ["Page Load", "Event Handling", "Interaction Helpers", "Event Helpers"]}, {"name": "Effects", "subcategories": ["Basics", "Sliding", "Fading", "Custom"]}, {"name": "Ajax", "subcategories": ["Ajax Requests", "Ajax Events", "Misc"]}, {"name": "Utilities", "subcategories": ["User Agent", "Array and Object operations", "Test operations", "String operations"]}, {"name": "Internals", "subcategories": ["Data Cache", "Ajax"]}]});
0
\ No newline at end of file
