JavaScript Tutorial/jQuery/html

Материал из Web эксперт
Перейти к: навигация, поиск

Assign HTML 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(){
           $("div").html("Hello Again");
       });
   </script>
 </head>
 <body>
   <body>
     
 </body>

</html></source>


Get HTML code

   <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 htmlStr = $("P").html();
               $("DIV").text(htmlStr);
       });
   </script>
 </head>
 <body>
   <body>

A

 </body>

</html></source>


Get HTML string and assign to text node

   <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()+"asdf";
                 $(this).text(htmlStr);
             });
       });
   </script>
 </head>
 <body>
   <body>

asdf

 </body>

</html></source>


Hide show paragraph

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <style type="text/css">
       .changeP { font-weight: bold; color:red;}
   </style>
   <script type="text/javascript">
  $(document).ready(function(){
    $(".article .thebody").hide();
    $("#container .article ul")
.prepend("
  • <a href="" title="Read the article">Read Body</a>
  • ");
        $(".actions li.readbody a").click(function(event){
          $(this).parents("ul").prev(".thebody").toggle();
          
          event.preventDefault();
        });
          
      });
       </script>
     </head>
     <body>
    

    Summary 01

    Lorem ipsum....

     </body>
    

    </html></source>


    Hide slow

       <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).hide("slow");
                     return true;
                   });
    


           });
       </script>
     </head>
     <body>
       <body>
    

    Hello

       </body>
    

    </html></source>


    Hide tag slowly

       <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">
       $("a").click(function(event){
          event.preventDefault();
          $(this).hide("slow");
       });
       </script>
     </head>
     <body>
       <a href="http://wbex.ru/">wbex.ru</a>
     </body>
    

    </html></source>


    html() get html contents (innerHTML) of matched 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").click(function () {
                 var htmlStr = $(this).html();
                 alert(htmlStr);
               });
       
           });
       </script>
       <style>
         .selected { color:red; }
         .highlight { background:yellow; }
       </style>    
     </head>
     <body>
       <body>
    

    Hello

       </body>
    

    </html></source>


    html(val) sets html contents of every matched 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").click(function () {
                 var htmlStr = $(this).html("Hello Again");
                 
               });
       
           });
       </script>
       <style>
         .selected { color:red; }
         .highlight { background:yellow; }
       </style>    
     </head>
     <body>
       <body>
    

    Hello

       </body>
    

    </html></source>


    Set constructed 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(){
                 var words = $("b:first").text().split(" ");
                 var text = words.join("</span> ");
                 $("b:first").html("" + text + "");
    
           });
       </script>
        <style>
        span{color:red}
        </style>
     </head>
     <body>
       <body>
         
          Hello asdf asdf
       </body>
    

    </html></source>