JavaScript Tutorial/jQuery/text
Содержание
- 1 30. Assign text value to DIV
- 2 30. Change text to uppercase
- 3 30. Get HTML and Text from a p tag
- 4 30. Get text from tag
- 5 30. Output HTML as text
- 6 30. Replace Span Text Value
- 7 30. Set text and html
- 8 30. Set text for tag
- 9 30. text is similar to html(), but escapes HTML (replace "<" and ">" with their HTML entities).
- 10 30. text() returns a string that contains the combined text contents of all matched elements
30. Assign text value to DIV
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var input = $("form input:text");
$("div").text("For this type jQuery found " + input.length + ".");
});
</script>
</head>
<body>
<form>
<input type="text" />
</form>
<div></div>
</body>
</html>
30. Change text to uppercase
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var mappedItems = $("li").map(function (index) {
var data = $("<li>").text($(this).text()).get(0);
$(data).text($(data).text().toUpperCase());
return data;
});
$("#results").append(mappedItems);
});
</script>
</head>
<body>
<body>
<ul>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
<ul id="results">
</ul>
</body>
</html>
30. Get HTML and Text from a p tag
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
alert(
"HTML: " + $("p").html() + "\n" +
"Text: " + $("p").text()
)
}
);
</script>
</head>
<body>
<p>
asdf. <i>asdf</i>
</p>
</body>
</html>
30. Get text from tag
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div[id]").one("click", function(){
var idString = $(this).text() + " = " + $(this).attr("id");
$(this).text(idString);
});
});
</script>
</head>
<body>
Click to see.
<div>div</div>
<div id="hey">div</div>
</body>
</html>
30. Output HTML as text
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").text("<b>bold</b>bold.");
});
</script>
</head>
<body>
<body>
<p>asdf</p>
<DIV></DIV>
</body>
</html>
30. Replace Span Text Value
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#container").click(function (e) {
var $ch = $(e.target).children();
$("#results span:first").text($ch.length);
e.preventDefault();
return false;
});
});
</script>
</head>
<body>
<body>
<div id="container">
<div>
<p>This <span>is the <em>way</em> we</span>
write <em>the</em> demo,</p>
</div>
</div>
<span id="results">Found <span>0</span> children in <span>TAG</span>.</span>
</body>
</html>
30. Set text and html
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$("p#tmpQuote-1").text("asdf. <i>asdf</i>");
$("p#tmpQuote-2").html("asdf. <i>asdf</i>");
}
);
</script>
<style type="text/css">
p.tmpQuote {
background: lightblue;
}
p#tmpQuote-2 {
background: lightgreen;
}
</style>
</head>
<body>
<p>
asdf. <i>asdf</i>
</p>
<p class="tmpQuote" id="tmpQuote-1">
</p>
<p class="tmpQuote" id="tmpQuote-2">
</p>
</body>
</html>
30. Set text for tag
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div[id]").one("click", function(){
var idString = $(this).text() + " = " + $(this).attr("id");
$(this).text(idString);
});
});
</script>
</head>
<body>
Click to see.
<div>div</div>
<div id="hey">div</div>
</body>
</html>
30. text is similar to html(), but escapes HTML (replace "<" and ">" with their HTML entities).
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").text("<b>Some</b> new text.");
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
<p class="selected highlight">Hello first</p>
<p class="">Hello</p>
</body>
</html>
30. text() returns a string that contains the combined text contents of all matched elements
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var str = $("p:first").text();
$("p:last").html(str);
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
<p class="selected highlight">Hello first</p>
<p class="">Hello</p>
</body>
</html>