JavaScript Tutorial/jQuery/Paragraph
Версия от 18:52, 25 мая 2010; (обсуждение)
Содержание
- 1 30. Access the offset of the second paragraph:
- 2 30. Add some html to paragraph.
- 3 30. Add text to the paragraph (notice the bold tag is escaped).
- 4 30. Add two classes to a paragraph
- 5 30. Animates all hidden paragraphs to show slowly
- 6 30. Animates all paragraphs to slide up or down, completing the animation within 600 milliseconds.
- 7 30. Append text node to
- 8 30. Click a paragraph to convert it from html to text.
- 9 30. Clones all b elements (and selects the clones) and prepends them to all paragraphs.
- 10 30. Find all the text nodes inside a paragraph and wrap them with a bold tag.
- 11 30. 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).
- 12 30. Inserts all paragraphs before an element
- 13 30. Locate all the paragraphs after the second child in the body and give them a class.
- 14 30. Paragraph click event
- 15 30. Paragraph slide in and out
- 16 30. Remove paragraph with fade and animation
- 17 30. Removes all child nodes (including text nodes) from all paragraphs
- 18 30. Removes all paragraphs from the DOM
- 19 30. Replace all the paragraphs with bold words.
- 20 30. Replace all the paragraphs with empty div elements.
- 21 30. Selects all paragraphs and removes not "selected" or the first one.
- 22 30. Selects all paragraphs and removes those without a class "selected".
- 23 30. Selects all paragraphs, then slices the selection to include only the first element.
- 24 30. Set HTML for paragraph
- 25 30. Set paragraph text value
- 26 30. Starts with all paragraphs and searches for descendant span elements, same as $("p span")
- 27 30. To change the color of any paragraph to red on mouseover event.
- 28 30. To display the text of all paragraphs in an alert box the first time each of them is clicked:
- 29 30. Toggles all paragraphs.
- 30 30. To hide paragraphs on a page when they are clicked:
- 31 30. To highlight a clicked word in the paragraph.
- 32 30. To set the color of all paragraphs to red and background to blue:
- 33 30. To unbind all events from all paragraphs
- 34 30. Wrap a new div around all of the paragraphs.
30. Access the offset of the second paragraph:
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
});
</script>
</head>
<body>
<body>
<p>Hello</p><p>2nd Paragraph</p>
</body>
</html>
30. Add some html to paragraph.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function () {
var htmlStr = $(this).html("<span class="red">Hello <b>Again</b></span>");
});
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
<p class="selected highlight">Hello</p>
</body>
</html>
30. Add text to the paragraph (notice the bold tag is escaped).
<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. Add two classes to a paragraph
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p:last").addClass("selected highlight");
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
<p>A</p>
<p>B</p>
<p>C</p>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$("p").show("slow");
});
});
</script>
</head>
<body>
<body>
<button>Show it</button>
<p style="display:none">Hello</p>
</body>
</html>
30. Animates all paragraphs to slide up or down, completing the animation within 600 milliseconds.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$("p").slideToggle("slow");
});
});
</script>
</head>
<body>
<body>
<button>Toggle</button>
<p>
This is the paragraph.
</p>
</body>
</html>
30. Append text node to
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").append(document.createTextNode("Hello"));
});
</script>
</head>
<body>
<body>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
</body>
</html>
30. Click a paragraph to convert it from html to text.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function () {
var htmlStr = $(this).html();
alert(htmlStr);
});
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
<p class="selected highlight">Hello</p>
</body>
</html>
30. Clones all b elements (and selects the clones) and prepends them to all paragraphs.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("b").clone().prependTo("p");
});
</script>
</head>
<body>
<body>
<b>Hello</b><p>, how are you?</p>
</body>
</html>
30. Find all the text nodes inside a paragraph and wrap them with a bold tag.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").contents().not("[nodeType=1]").wrap("<b/>");
});
</script>
</head>
<body>
<body>
<p>Hello <a href="http://wbex.ru/">wbex</a>asdf</p>
</body>
</html>
30. 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).
<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>
30. Inserts all paragraphs before an element
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").insertBefore( $("b") );
});
</script>
</head>
<body>
<body>
<b>asdf</b>
<p>asdf: </p>
</body>
</html>
30. Locate all the paragraphs after the second child in the body and give them a class.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":nth-child(1)").nextAll("p").css("color","red");
});
</script>
</head>
<body>
<body>
<p>p</p>
<div>div</div>
<p>p</p>
<p>p</p>
<div>div</div>
<p>p</p>
<div>div</div>
</body>
</html>
30. Paragraph click event
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function () {
$(this).toggleClass("blue");
});
});
</script>
</head>
<style>
.blue { color:blue; }
</style>
<body>
<body>
<p class=blue>A</p>
</body>
</html>
30. Paragraph slide in and out
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<style type="text/css">
a.test { font-weight: bold; color:red;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("input.buttonA").click(function(){ $("div.contentToChange").find("p.firstparagraph:hidden").slideDown("slow"); });
$("input.buttonB").click(function(){ $("div.contentToChange").find("p.firstparagraph:visible").slideUp("slow"); });
});
</script>
</head>
<body>
<input type="button" value="Slide In" class="buttonA" />
<input type="button" value="Slide Out" class="buttonB" />
<div style="background:#eee;" class="contentToChange">
<h2>Header 2</h2>
<p class="firstparagraph">Lorem ipsum <em>dolor</em> sit amet, consectetuer <em>adipiscing</em> elit, sed diam nonummy nibh euismod <em>tincidunt</em> ut laoreet dolore magna aliquam erat <strong>volutpat</strong>. Ut wisi enim ad minim <em>veniam</em>, quis nostrud exerci <strong>tation</strong> ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p class="secondparagraph">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse <strong>molestie</strong> consequat, vel illum <strong>dolore</strong> eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer <strong>adipiscing</strong> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p class="thirdparagraph">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea <em>commodo</em> consequat. Duis autem vel eum iriure dolor in hendrerit in <em>vulputate</em> velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te <strong>feugait</strong> nulla facilisi.</p>
<p class="fourthparagraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, <strong>quis</strong> nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<p class="fifthparagraph">Lorem ipsum <em>dolor</em> sit amet, consectetuer <em>adipiscing</em> elit, sed diam nonummy nibh euismod <em>tincidunt</em> ut laoreet dolore magna aliquam erat <strong>volutpat</strong>. Ut wisi enim ad minim <em>veniam</em>, quis nostrud exerci <strong>tation</strong> ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p class="sixthparagraph">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse <strong>molestie</strong> consequat, vel illum <strong>dolore</strong> eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer <strong>adipiscing</strong> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</body>
</html>
30. Remove paragraph with fade and animation
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<style type="text/css">
a.test { font-weight: bold; color:red;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("input.buttonA").click(function(){ $("div.contentToChange").find("p.thirdparagraph").hide("slow"); });
});
</script>
</head>
<body>
<input type="button" value="Hide" class="buttonA" />
<div style="background:#eee;" class="contentToChange">
<h2>Header 2</h2>
<p class="firstparagraph">Lorem ipsum <em>dolor</em> sit amet, consectetuer <em>adipiscing</em> elit, sed diam nonummy nibh euismod <em>tincidunt</em> ut laoreet dolore magna aliquam erat <strong>volutpat</strong>. Ut wisi enim ad minim <em>veniam</em>, quis nostrud exerci <strong>tation</strong> ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p class="secondparagraph">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse <strong>molestie</strong> consequat, vel illum <strong>dolore</strong> eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer <strong>adipiscing</strong> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p class="thirdparagraph">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea <em>commodo</em> consequat. Duis autem vel eum iriure dolor in hendrerit in <em>vulputate</em> velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te <strong>feugait</strong> nulla facilisi.</p>
<p class="fourthparagraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, <strong>quis</strong> nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<p class="fifthparagraph">Lorem ipsum <em>dolor</em> sit amet, consectetuer <em>adipiscing</em> elit, sed diam nonummy nibh euismod <em>tincidunt</em> ut laoreet dolore magna aliquam erat <strong>volutpat</strong>. Ut wisi enim ad minim <em>veniam</em>, quis nostrud exerci <strong>tation</strong> ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p class="sixthparagraph">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse <strong>molestie</strong> consequat, vel illum <strong>dolore</strong> eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer <strong>adipiscing</strong> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</body>
</html>
30. Removes all child nodes (including text nodes) from all paragraphs
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function () {
$(this).empty();
});
});
</script>
</head>
<body>
<body>
<p>World</p>
<div>Replaced!</div>
</body>
</html>
30. Removes all paragraphs from the DOM
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$("p").remove();
});
});
</script>
</head>
<body>
<body>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<button>remove paragraphs</button>
</body>
</html>
30. Replace all the paragraphs with bold words.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("<b>Paragraph. </b>").replaceAll("span");
});
</script>
</head>
<body>
<body>
<span>Span Text</span>
</body>
</html>
30. Replace all the paragraphs with empty div elements.
$("p").replaceWith(document.createElement("div"));
30. Selects all paragraphs and removes not "selected" or the first one.
$("p").filter(".selected, :first")
30. Selects all paragraphs and removes those without a class "selected".
$("p").filter(".selected")
30. Selects all paragraphs, then slices the selection to include only the first element.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").slice(0, 1).wrapInner("<b></b>");
});
</script>
</head>
<body>
<body>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
</body>
</html>
30. Set HTML for paragraph
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").html("<span class="red">Hello <b>Again</b></span>");
});
</script>
</head>
<body>
<body>
<p>asdf</p>
</body>
</html>
30. Set paragraph text value
<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>
</head>
<body>
<body>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
</body>
</html>
30. Starts with all paragraphs and searches for descendant span elements, same as $("p span")
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").find("span").css("color","red");
});
</script>
</head>
<body>
<body>
<p>bad or <span>good</span>.</p>
</body>
</html>
30. To change the color of any paragraph to red on mouseover event.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseover(function () {
$(this).css("color","red");
});
});
</script>
</head>
<body>
<body>
<p>asdf</p>
</body>
</html>
30. To display the text of all paragraphs in an alert box the first time each of them is clicked:
$("p").one("click", function(){
alert( $(this).text() );
});
30. Toggles all paragraphs.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$("p").toggle();
});
});
</script>
</head>
<body>
<body>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
</body>
</html>
30. To hide paragraphs on a page when they are clicked:
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function () {
$(this).slideUp();
});
$("p").hover(function () {
$(this).addClass("hilite");
}, function () {
$(this).removeClass("hilite");
});
});
</script>
</head>
<body>
<body>
<p>First</p>
<p>Second</p>
<p>3</p>
</body>
</html>
30. To highlight a clicked word in the paragraph.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var words = $("p:first").text().split(" ");
var text = words.join("</div> <div>");
$("p:first").html("<div>" + text + "</div>");
$("div").click(function () {
$(this).css("background-color","yellow");
});
});
</script>
</head>
<body>
<body>
<p>a b c</p>
</body>
</html>
30. To set the color of all paragraphs to red and background to blue:
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").hover(function () {
$(this).css({ backgroundColor:"yellow", fontWeight:"bolder" });
}, function () {
var cssObj = {
backgroundColor: "#ddd",
color: "rgb(0,40,244)"
}
$(this).css(cssObj);
});
});
</script>
</head>
<body>
<body>
<p>Move the mouse over me.</p>
</body>
</html>
30. To unbind all events from all paragraphs
$("p").unbind()
30. Wrap a new div around all of the paragraphs.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").wrapAll($(".doublediv"));
});
</script>
<style>
.doublediv { color:red; }
</style>
</head>
<body>
<body>
<p>World</p>
<p>World</p>
<div class="doublediv">asdf<div>
</body>
</html>