JavaScript DHTML/jQuery/text

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

Assign text value to DIV

   <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 input = $("form input:text");
       $("div").text("For this type jQuery found " + input.length + ".");
       
       
   });
   </script>
 </head>
 <body>
    <form>
     <input type="text" />
   </form>
 </body>

</html>



 </source>
   
  


Change text to uppercase

   <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 mappedItems = $("li").map(function (index) {
var data = $("
  • ").text($(this).text()).get(0); $(data).text($(data).text().toUpperCase()); return data; }); $("#results").append(mappedItems); }); </script> </head> <body> <body>
    • asdf
    • asdf
    • asdf
     </body>
    

    </html>



     </source>
       
      
    


    Get text from 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(){
             $("div[id]").one("click", function(){
                 var idString = $(this).text() + " = " + $(this).attr("id");
                 $(this).text(idString);
             });
       });
       </script>
     </head>
     <body>
         Click to see.
    
    div
    div
     </body>
    

    </html>



     </source>
       
      
    


    Output HTML as 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").text("boldbold.");
    
           });
       </script>
     </head>
     <body>
       <body>
    

    asdf

     </body>
    

    </html>



     </source>
       
      
    


    Replace Span 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(){
              $("#container").click(function (e) {
                 var $ch = $(e.target).children();
                 
                 $("#results span:first").text($ch.length);
                 
                 e.preventDefault();
                 return false;
               });
           });
       </script>
     </head>
     <body>
       <body>
    

    This is the way we write the demo,

       Found 0 children in TAG.
     </body>
    

    </html>



     </source>
       
      
    


    Set text for 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(){
             $("div[id]").one("click", function(){
                 var idString = $(this).text() + " = " + $(this).attr("id");
                 $(this).text(idString);
             });
       });
       </script>
     </head>
     <body>
         Click to see.
    
    div
    div
     </body>
    

    </html>



     </source>
       
      
    


    text is similar to html(), but escapes HTML (replace "<" and ">" with their HTML entities).

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


    text() returns a string that contains the combined text contents of all matched elements

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