JavaScript DHTML/jQuery/Paragraph
Содержание
- 1 Access the offset of the second paragraph:
- 2 Add some html to paragraph.
- 3 Add text to the paragraph (notice the bold tag is escaped).
- 4 Add two classes to a paragraph
- 5 Animates all hidden paragraphs to show slowly
- 6 Animates all paragraphs to slide up or down, completing the animation within 600 milliseconds.
- 7 Append text node to
- 8 Click a paragraph to convert it from html to text.
- 9 Clones all b elements (and selects the clones) and prepends them to all paragraphs.
- 10 Find all the text nodes inside a paragraph and wrap them with a bold tag.
- 11 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 Inserts all paragraphs before an element
- 13 Locate all the paragraphs after the second child in the body and give them a class.
- 14 Paragraph click event
- 15 Paragraph slide in and out
- 16 Header 2
- 17 Remove paragraph with fade and animation
- 18 Header 2
- 19 Removes all child nodes (including text nodes) from all paragraphs
- 20 Removes all paragraphs from the DOM
- 21 Replace all the paragraphs with bold words.
- 22 Replace all the paragraphs with empty div elements.
- 23 Selects all paragraphs and removes those that aren"t of class "selected" or the first one.
- 24 Selects all paragraphs and removes those without a class "selected".
- 25 Selects all paragraphs, then slices the selection to include only the first element.
- 26 Set HTML for paragraph
- 27 Set paragraph text value
- 28 Starts with all paragraphs and searches for descendant span elements, same as $("p span")
- 29 To change the color of any paragraph to red on mouseover event.
- 30 To display the text of all paragraphs in an alert box the first time each of them is clicked:
- 31 Toggles all paragraphs.
- 32 To hide paragraphs on a page when they are clicked:
- 33 To highlight a clicked word in the paragraph.
- 34 To set the color of all paragraphs to red and background to blue:
- 35 To unbind all events from all paragraphs
- 36 Wrap a new div around all of the paragraphs.
Access the offset of the second paragraph:
<source lang="html4strict">
<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>
Hello
2nd Paragraph
</body>
</html>
</source>
Add some html to paragraph.
<source lang="html4strict">
<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("Hello Again");
});
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
Hello
</body>
</html>
</source>
Add text to the paragraph (notice the bold tag is escaped).
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").text("Some new text."); }); </script> <style> .selected { color:red; } .highlight { background:yellow; } </style> </head> <body> <body>
Hello first
Hello
</body>
</html>
</source>
Add two classes to a paragraph
<source lang="html4strict">
<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>
A
B
C
</body>
</html>
</source>
<source lang="html4strict">
<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>
</body>
</html>
</source>
Animates all paragraphs to slide up or down, completing the animation within 600 milliseconds.
<source lang="html4strict">
<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>
This is the paragraph.
</body>
</html>
</source>
Append text node to
<source lang="html4strict">
<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>
asdf
asdf
asdf
asdf
</body>
</html>
</source>
Click a paragraph to convert it from html to text.
<source lang="html4strict">
<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>
Hello
</body>
</html>
</source>
Clones all b elements (and selects the clones) and prepends them to all paragraphs.
<source lang="html4strict">
<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>Hello
, how are you?
</body>
</html>
</source>
Find all the text nodes inside a paragraph and wrap them with a bold tag.
<source lang="html4strict">
<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>
Hello <a href="http://wbex.ru/">wbex</a>asdf
</body>
</html>
</source>
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).
<source lang="html4strict">
<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>
Hello first
Hello
</body>
</html>
</source>
Inserts all paragraphs before an element
<source lang="html4strict">
<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> asdf
asdf:
</body>
</html>
</source>
Locate all the paragraphs after the second child in the body and give them a class.
<source lang="html4strict">
<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
p
</body>
</html>
</source>
Paragraph click event
<source lang="html4strict">
<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>
A
</body>
</html>
</source>
Paragraph slide in and out
<source lang="html4strict">
<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" />
Header 2
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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate 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 feugait nulla facilisi. 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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate 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 feugait nulla facilisi.
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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <p class="fifthparagraph">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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate 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 feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</body>
</html>
</source>
Remove paragraph with fade and animation
<source lang="html4strict">
<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" />
Header 2
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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate 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 feugait nulla facilisi. 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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate 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 feugait nulla facilisi.
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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <p class="fifthparagraph">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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate 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 feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</body>
</html>
</source>
Removes all child nodes (including text nodes) from all paragraphs
<source lang="html4strict">
<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>
World
</body>
</html>
</source>
Removes all paragraphs from the DOM
<source lang="html4strict">
<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>
asdf
asdf
asdf
<button>remove paragraphs</button> </body>
</html>
</source>
Replace all the paragraphs with bold words.
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("Paragraph. ").replaceAll("span"); }); </script>
</head>
<body>
<body>
Span Text
</body>
</html>
</source>
Replace all the paragraphs with empty div elements.
<source lang="html4strict">
$("p").replaceWith(document.createElement("div"));
</source>
Selects all paragraphs and removes those that aren"t of class "selected" or the first one.
<source lang="html4strict">
$("p").filter(".selected, :first")
</source>
Selects all paragraphs and removes those without a class "selected".
<source lang="html4strict">
$("p").filter(".selected")
</source>
Selects all paragraphs, then slices the selection to include only the first element.
<source lang="html4strict">
<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(""); }); </script> </head> <body> <body>
</body>
</html>
</source>
Set HTML for paragraph
<source lang="html4strict">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").html("Hello Again");
});
</script>
</head>
<body>
<body>
asdf
</body>
</html>
</source>
Set paragraph text value
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").text("Some new text."); }); </script> </head> <body> <body>
asdf
asdf
asdf
asdf
</body>
</html>
</source>
Starts with all paragraphs and searches for descendant span elements, same as $("p span")
<source lang="html4strict">
<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>
bad or good.
</body>
</html>
</source>
To change the color of any paragraph to red on mouseover event.
<source lang="html4strict">
<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>
asdf
</body>
</html>
</source>
To display the text of all paragraphs in an alert box the first time each of them is clicked:
<source lang="html4strict">
$("p").one("click", function(){
alert( $(this).text() );
});
</source>
Toggles all paragraphs.
<source lang="html4strict">
<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>
Hello
</body>
</html>
</source>
To hide paragraphs on a page when they are clicked:
<source lang="html4strict">
<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>
First
Second
3
</body>
</html>
</source>
To highlight a clicked word in the paragraph.
<source lang="html4strict">
<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").click(function () { $(this).css("background-color","yellow"); }); }); </script> </head> <body> <body>
a b c
</body>
</html>
</source>
To set the color of all paragraphs to red and background to blue:
<source lang="html4strict">
<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>
Move the mouse over me.
</body>
</html>
</source>
To unbind all events from all paragraphs
<source lang="html4strict">
$("p").unbind()
</source>
Wrap a new div around all of the paragraphs.
<source lang="html4strict">
<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>
World
World
</body>
</html>
</source>