JavaScript Tutorial/jQuery/text — различия между версиями

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

Текущая версия на 11:25, 26 мая 2010

30. Assign text value to DIV

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

</html></source>


30. Change text to uppercase

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


    30. Get HTML and Text from a p 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() {
      alert(
        "HTML: " + $("p").html() + "\n" +
        "Text: " + $("p").text()
      )
     }
    

    );

       </script>
     </head>
     <body>
    

    asdf. asdf

     </body>
    

    </html></source>


    30. Get text from 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(){
             $("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>


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

    asdf

     </body>
    

    </html></source>


    30. Replace Span 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(){
              $("#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>


    30. Set text and html

       <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#tmpQuote-1").text("asdf. asdf");
       $("p#tmpQuote-2").html("asdf. asdf");
     }
    

    );

       </script>
       <style type="text/css">
    

    p.tmpQuote {

       background: lightblue;
    

    } p#tmpQuote-2 {

       background: lightgreen;
    

    }

       </style>
     </head>
     <body>
    

    asdf. asdf

     </body>
    

    </html></source>


    30. Set text for 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(){
             $("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>


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

       <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. text() returns a string that contains the combined text contents of all matched elements

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