jquery-mobile/experiments/api-viewer/docs/header-selector/index.html

46 lines
No EOL
1.6 KiB
HTML

<!DOCTYPE html>
<html lang='en'><head>
<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>
<div data-role="page">
<div data-role="header">
<h1>:header Selector</h1>
</div>
<div data-role="content" data-theme="c" id="header1">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">header</span> selector</h2>
<div class=" entry-details">
<h4 class="name">
<span class="versionAdded">version added: <a href="/version/1.2/">1.2</a></span>jQuery(':header')</h4>
<p class="desc"><strong>Description: </strong>Selects all elements that are headers, like h1, h2, h3 and so on.</p>
<h3>Example:</h3>
<div id="entry-examples" class="entry-examples"><div id="example-0">
<h4><span class="desc">Adds a background and text color to all the headers on the page.</span></h4>
<pre><code class="example demo-code">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
body { font-size: 10px; font-family: Arial; }
h1, h2 { margin: 3px 0; }
&lt;/style&gt;
&lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Header 1&lt;/h1&gt;
&lt;p&gt;Contents 1&lt;/p&gt;
&lt;h2&gt;Header 2&lt;/h2&gt;
&lt;p&gt;Contents 2&lt;/p&gt;
&lt;script&gt;$(":header").css({ background:'#CCC', color:'blue' });&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></div>
</div>
</div>
</div>
</body></html>