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
136 lines
No EOL
6.2 KiB
HTML
136 lines
No EOL
6.2 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>.text()</h1>
|
|
|
|
</div>
|
|
|
|
|
|
<div data-role="content" data-theme="c" id="text1">
|
|
<h2 class="jq-clearfix roundTop section-title">
|
|
<span class="name">.text()</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#String">String</a></span>
|
|
</h2>
|
|
<div class=" entry-details">
|
|
<p class="desc"><strong>Description: </strong>Get the combined text contents of each element in the set of matched elements, including their descendants.</p>
|
|
<ul class="signatures"><li class="signature" id="text"><h4 class="name">
|
|
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.text()</h4></li></ul>
|
|
<div class="longdesc">
|
|
<p>Unlike the <code>.html()</code> method, <code>.text()</code> can be used in both XML and HTML documents. The result of the <code>.text()</code> method is a string containing the combined text of all matched elements. (Due to variations in the HTML parsers in different browsers, the text returned may vary in newlines and other white space.) Consider the following HTML:</p>
|
|
<pre><div class="demo-container">
|
|
<div class="demo-box">Demonstration Box</div>
|
|
<ul>
|
|
<li>list item 1</li>
|
|
<li>list <strong>item</strong> 2</li>
|
|
</ul>
|
|
</div>
|
|
</pre>
|
|
<p>The code <code>$('div.demo-container').text()</code> would produce the following result:</p>
|
|
<p>
|
|
<code>Demonstration Box list item 1 list item 2</code>
|
|
</p>
|
|
<p>The <code>.text()</code> method cannot be used on input elements. For input field text, use the <a href="/val">.val()</a> method.</p>
|
|
<p>As of jQuery 1.4, the <code>.text()</code> method returns the value of text and CDATA nodes as well as element nodes.</p>
|
|
</div>
|
|
<h3>Example:</h3>
|
|
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
|
<h4><span class="desc">Find the text in the first paragraph (stripping out the html), then set the html of the last paragraph to show it is just text (the red bold is gone).</span></h4>
|
|
<pre><code class="example demo-code"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
p { color:blue; margin:8px; }
|
|
b { color:red; }
|
|
</style>
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
</head>
|
|
<body>
|
|
<p><b>Test</b> Paragraph.</p>
|
|
|
|
<p></p>
|
|
<script>
|
|
var str = $("p:first").text();
|
|
$("p:last").html(str);
|
|
</script>
|
|
</body>
|
|
</html></code></pre>
|
|
<h4>Demo:</h4>
|
|
<div class="demo code-demo"></div>
|
|
</div></div>
|
|
</div>
|
|
</div>
|
|
<div data-role="content" data-theme="c" id="text2">
|
|
<h2 class="jq-clearfix roundTop section-title">
|
|
<span class="name">.text( textString )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
|
</h2>
|
|
<div class=" entry-details">
|
|
<p class="desc"><strong>Description: </strong>Set the content of each element in the set of matched elements to the specified text.</p>
|
|
<ul class="signatures">
|
|
<li class="signature" id="text-textString">
|
|
<h4 class="name">
|
|
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.text( textString )</h4>
|
|
<p class="arguement"><strong>textString</strong>A string of text to set as the content of each matched element.</p>
|
|
</li>
|
|
<li class="signature" id="text-functionindex, text">
|
|
<h4 class="name">
|
|
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.text( function(index, text) )</h4>
|
|
<p class="arguement"><strong>function(index, text)</strong>A function returning the text content to set. Receives the index position of the element in the set and the old text value as arguments.</p>
|
|
</li>
|
|
</ul>
|
|
<div class="longdesc">
|
|
<p>Unlike the <code>.html()</code> method, <code>.text()</code> can be used in both XML and HTML documents. </p>
|
|
<p>We need to be aware that this method escapes the string provided as necessary so that it will render correctly in HTML. To do so, it calls the DOM method <code>.createTextNode()</code>, which replaces special characters with their HTML entity equivalents (such as <code>&lt;</code> for <code><</code>). Consider the following HTML:</p>
|
|
<pre><div class="demo-container">
|
|
<div class="demo-box">Demonstration Box</div>
|
|
<ul>
|
|
<li>list item 1</li>
|
|
<li>list <strong>item</strong> 2</li>
|
|
</ul>
|
|
</div>
|
|
</pre>
|
|
<p>The code <code>$('div.demo-container').text('<p>This is a test.</p>');</code> will produce the following DOM output:</p>
|
|
<pre><div class="demo-container">
|
|
&lt;p&gt;This is a test.&lt;/p&gt;
|
|
</div></pre>
|
|
<p>It will appear on a rendered page as though the tags were exposed, like this:</p>
|
|
<pre><p>This is a test</p></pre>
|
|
<p>The <code>.text()</code> method cannot be used on input elements. For input field text, use the <a href="/val">.val()</a> method.</p>
|
|
<p>As of jQuery 1.4, the <code>.text()</code> method allows us to set the text content by passing in a function.</p>
|
|
<pre>$('ul li').text(function(index) {
|
|
return 'item number ' + (index + 1);
|
|
});</pre>
|
|
<p>Given an unordered list with three <code><li></code> elements, this example will produce the following DOM output:</p>
|
|
<pre><ul>
|
|
<li>item number 1</li>
|
|
<li>item number 2</li>
|
|
<li>item number 3</li>
|
|
</ul>
|
|
</pre>
|
|
</div>
|
|
<h3>Example:</h3>
|
|
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
|
<h4><span class="desc">Add text to the paragraph (notice the bold tag is escaped).</span></h4>
|
|
<pre><code class="example demo-code"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
|
|
p { color:blue; margin:8px; }
|
|
</style>
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
</head>
|
|
<body>
|
|
<p>Test Paragraph.</p>
|
|
<script>$("p").text("<b>Some</b> new text.");</script>
|
|
</body>
|
|
</html></code></pre>
|
|
<h4>Demo:</h4>
|
|
<div class="demo code-demo"></div>
|
|
</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</body></html> |