mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-18 23:10:24 +00:00
f9f236fb8b
In starting markup, pages should now be identified with the attribute data-role="page". This allows us to then add ui-page programatically, hiding all non-active pages, and apply ui-page-active to one page at a time to show it. mobile.js is updated to find pages by this attribute now, instead of ui-page class. fixes issue 32
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 class="ui-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 class="ui-content 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> |