mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-18 06:50:23 +00:00
b11a45f615
Inset listviews have no margin now, and regular listviews have -15px margins. Also, collapsibles now have no padding. Updated HTML to remove ui-body classes for content divs, to match these changes. Fixes #161
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" data-theme="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> |