JavaScript Tutorial/jQuery/Paragraph

Материал из Web эксперт
Версия от 11:25, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Содержание

30. Access the offset of the second paragraph:

   <source lang="javascript">

<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>


30. Add some html to paragraph.

   <source lang="javascript">

<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>


30. Add text to the paragraph (notice the bold tag is escaped).

   <source lang="javascript">

<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>


30. Add two classes to a paragraph

   <source lang="javascript">

<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>


30. Animates all hidden paragraphs to show slowly

   <source lang="javascript">

<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>

Hello

   </body>

</html></source>


30. Animates all paragraphs to slide up or down, completing the animation within 600 milliseconds.

   <source lang="javascript">

<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>


30. Append text node to

   <source lang="javascript">

<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>


30. Click a paragraph to convert it from html to text.

   <source lang="javascript">

<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>


30. Clones all b elements (and selects the clones) and prepends them to all paragraphs.

   <source lang="javascript">

<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>


30. Find all the text nodes inside a paragraph and wrap them with a bold tag.

   <source lang="javascript">

<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>


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).

   <source lang="javascript">

<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>


30. Inserts all paragraphs before an element

   <source lang="javascript">

<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>


30. Locate all the paragraphs after the second child in the body and give them a class.

   <source lang="javascript">

<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

div

p

p

div

p

div
   </body>

</html></source>


30. Paragraph click event

   <source lang="javascript">

<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>


30. Paragraph slide in and out

   <source lang="javascript">

<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>


30. Remove paragraph with fade and animation

   <source lang="javascript">

<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>


30. Removes all child nodes (including text nodes) from all paragraphs

   <source lang="javascript">

<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

Replaced!
   </body>

</html></source>


30. Removes all paragraphs from the DOM

   <source lang="javascript">

<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>


30. Replace all the paragraphs with bold words.

   <source lang="javascript">

<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>


30. Replace all the paragraphs with empty div elements.

   <source lang="javascript">

$("p").replaceWith(document.createElement("div"));</source>


30. Selects all paragraphs and removes not "selected" or the first one.

   <source lang="javascript">

$("p").filter(".selected, :first")</source>


30. Selects all paragraphs and removes those without a class "selected".

   <source lang="javascript">

$("p").filter(".selected")</source>


30. Selects all paragraphs, then slices the selection to include only the first element.

   <source lang="javascript">

<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>
asdf
asdf
asdf
asdf
   </body>

</html></source>


30. Set HTML for paragraph

   <source lang="javascript">

<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>


30. Set paragraph text value

   <source lang="javascript">

<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>


30. Starts with all paragraphs and searches for descendant span elements, same as $("p span")

   <source lang="javascript">

<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>


30. To change the color of any paragraph to red on mouseover event.

   <source lang="javascript">

<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>


30. To display the text of all paragraphs in an alert box the first time each of them is clicked:

   <source lang="javascript">

$("p").one("click", function(){

 alert( $(this).text() );

});</source>


30. Toggles all paragraphs.

   <source lang="javascript">

<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

Good Bye

   </body>

</html></source>


30. To hide paragraphs on a page when they are clicked:

   <source lang="javascript">

<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>


30. To highlight a clicked word in the paragraph.

   <source lang="javascript">

<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>
"); $("p:first").html("
" + text + "
");
           $("div").click(function () {
             $(this).css("background-color","yellow");
           });
       });
   </script>
 </head>
 <body>
   <body>

a b c

   </body>

</html></source>


30. To set the color of all paragraphs to red and background to blue:

   <source lang="javascript">

<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>


30. To unbind all events from all paragraphs

   <source lang="javascript">

$("p").unbind()</source>


30. Wrap a new div around all of the paragraphs.

   <source lang="javascript">

<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

asdf
   </body>
</html></source>