2010-09-16 17:13:38 +00:00
<!DOCTYPE html>
2010-11-02 01:46:29 +00:00
< html lang = 'en' > < head >
2011-02-18 20:00:18 +00:00
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, minimum-scale=1, maximum-scale=1" > < meta http-equiv = 'content-type' content = 'text/html; charset=UTF-8' / > < / head > < body >
2010-09-16 17:13:38 +00:00
< div class = "ui-page" >
2010-09-21 14:58:54 +00:00
< div data-role = "header" >
2010-09-16 17:13:38 +00:00
< h1 > All Selector (“*”)< / h1 >
< div class = "entry-meta" > Categories:
< span class = "category" > < a href = "http://api.jquery.com/category/selectors/" title = "View all posts in Selectors" > Selectors< / a > > < a href = "http://api.jquery.com/category/selectors/basic-css-selectors/" title = "View all posts in Basic" > Basic< / a > < / span >
< / div >
< / div >
2010-10-12 19:50:28 +00:00
< div data-role = "content" data-theme = "c" id = "all1" >
2010-09-16 17:13:38 +00:00
< h2 class = "jq-clearfix roundTop section-title" >
< span class = "name" > all< / span > selector< / h2 >
< div class = " entry-details" >
< h4 class = "name" >
< span class = "versionAdded" > version added: < a href = "/version/1.0/" > 1.0< / a > < / span > jQuery('*')< / h4 >
< p class = "desc" > < strong > Description: < / strong > Selects all elements.< / p >
< div class = "longdesc" > < p > Caution: The all, or universal, selector is extremely slow, except when used by itself.< / p > < / div >
< h3 > Examples:< / h3 >
< div id = "entry-examples" class = "entry-examples" >
< div id = "example-0" >
< h4 > Example: < span class = "desc" > Finds every element (including head, body, etc) in the document.< / span >
< / h4 >
< pre > < code class = "example demo-code" > < !DOCTYPE html>
< html>
< head>
< style>
h3 { margin: 0; }
div,span,p {
width: 80px;
height: 40px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
< /style>
< script src="http://code.jquery.com/jquery-latest.js"> < /script>
< /head>
< body>
< div> DIV< /div>
< span> SPAN< /span>
< p> P < button> Button< /button> < /p>
< script> var elementCount = $("*").css("border","3px solid red").length;
$("body").prepend("< h3> " + elementCount + " elements found< /h3> ");< /script>
< /body>
< /html> < / code > < / pre >
< h4 > Demo:< / h4 >
< div class = "demo code-demo" > < / div >
< / div >
< div id = "example-1" >
< h4 > Example: < span class = "desc" > A common way to select all elements is to find within document.body so elements like head, script, etc are left out.< / span >
< / h4 >
< pre > < code class = "example demo-code" > < !DOCTYPE html>
< html>
< head>
< style>
h3 { margin: 0; }
div,span,p {
width: 80px;
height: 40px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
#test {
width: auto; height: auto; background-color: transparent;
}
< /style>
< script src="http://code.jquery.com/jquery-latest.js"> < /script>
< /head>
< body>
< div id="test">
< div> DIV< /div>
< span> SPAN< /span>
< p> P < button> Button< /button> < /p>
< /div>
< script>
var elementCount = $("#test").find("*").css("border","3px solid red").length;
$("body").prepend("< h3> " + elementCount + " elements found< /h3> ");< /script>
< /body>
< /html> < / code > < / pre >
< h4 > Demo:< / h4 >
< div class = "demo code-demo" > < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / body > < / html >
