mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-18 15:00:23 +00:00
104 lines
No EOL
3.6 KiB
HTML
104 lines
No EOL
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
|
<div data-role="page">
|
|
<div data-role="header">
|
|
<h1>Multiple Selector (“selector1, selector2, selectorN”)</h1>
|
|
<div class="entry-meta">Categories:
|
|
<span class="category"><a href="http://api.jquery.com/category/selectors/" title="View all posts in Selectors">Selectors</a> > <a href="http://api.jquery.com/category/selectors/basic-css-selectors/" title="View all posts in Basic">Basic</a></span>
|
|
|
|
</div>
|
|
</div>
|
|
<div data-role="content" class=" ui-body ui-body-c" id="multiple1">
|
|
<h2 class="jq-clearfix roundTop section-title">
|
|
<span class="name">multiple</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('selector1, selector2, selectorN')</h4>
|
|
<ul class="signatures"><li><dl class="arguments">
|
|
<dt>selector1</dt>
|
|
<dd>Any valid selector.</dd>
|
|
<dt>selector2</dt>
|
|
<dd>Another valid selector.</dd>
|
|
<dt>selectorN</dt>
|
|
<dd>As many more valid selectors as you like.</dd>
|
|
</dl></li></ul>
|
|
<p class="desc"><strong>Description: </strong>Selects the combined results of all the specified selectors.</p>
|
|
<div class="longdesc"><p>You can specify any number of selectors to combine into a single result. This multiple expression combinator is an efficient way to select disparate elements. The order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order. An alternative to this combinator is the .<a href="/add">add()</a> method.</p></div>
|
|
<h3>Examples:</h3>
|
|
<div id="entry-examples" class="entry-examples">
|
|
<div id="example-0">
|
|
<h4>Example: <span class="desc">Finds the elements that match any of these three selectors.</span>
|
|
</h4>
|
|
<pre><code class="example demo-code"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
|
|
div,span,p {
|
|
width: 126px;
|
|
height: 60px;
|
|
float:left;
|
|
padding: 3px;
|
|
margin: 2px;
|
|
background-color: #EEEEEE;
|
|
font-size:14px;
|
|
}
|
|
</style>
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
</head>
|
|
<body>
|
|
<div>div</div>
|
|
|
|
<p class="myClass">p class="myClass"</p>
|
|
<p class="notMyClass">p class="notMyClass"</p>
|
|
<span>span</span>
|
|
<script>$("div,span,p.myClass").css("border","3px solid red");</script>
|
|
</body>
|
|
</html></code></pre>
|
|
<h4>Demo:</h4>
|
|
<div class="demo code-demo"></div>
|
|
</div>
|
|
<div id="example-1">
|
|
<h4>Example: <span class="desc">Show the order in the jQuery object.</span>
|
|
</h4>
|
|
<pre><code class="example demo-code"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
b { color:red; font-size:16px; display:block; clear:left; }
|
|
div,span,p { width: 40px; height: 40px; float:left;
|
|
margin: 10px; background-color: blue;
|
|
padding:3px; color:white;
|
|
}
|
|
</style>
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
</head>
|
|
<body>
|
|
<span>span</span>
|
|
|
|
<p>p</p>
|
|
<p>p</p>
|
|
<div>div</div>
|
|
<span>span</span>
|
|
|
|
<p>p</p>
|
|
<div>div</div>
|
|
<b></b>
|
|
<script>
|
|
var list = $("div,p,span").map(function () {
|
|
return this.tagName;
|
|
}).get().join(", ");
|
|
$("b").append(document.createTextNode(list));
|
|
</script>
|
|
</body>
|
|
</html></code></pre>
|
|
<h4>Demo:</h4>
|
|
<div class="demo code-demo"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body></html> |