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

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

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

30. Assign text value to DIV

<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>
     <div></div>
  </body>
</html>


30. Change text to uppercase

<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 = $("<li>").text($(this).text()).get(0);
              $(data).text($(data).text().toUpperCase());
              return data;
           });
           $("#results").append(mappedItems);
        });
    </script>
  </head>
  <body>
    <body>
      <ul>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
      </ul>
      <ul id="results">
      </ul>
  </body>
</html>


30. Get HTML and Text from a p tag

<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>
    <p>
      asdf. <i>asdf</i>
    </p>
  </body>
</html>


30. Get text from tag

<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</div>
      <div id="hey">div</div>
  </body>
</html>


30. Output HTML as text

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("p").text("<b>bold</b>bold.");

        });
    </script>
  </head>
  <body>
    <body>
      <p>asdf</p>
      <DIV></DIV>
  </body>
</html>


30. Replace Span Text Value

<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>
    <div id="container">
        <div>
          <p>This <span>is the <em>way</em> we</span> 
          write <em>the</em> demo,</p>
        </div>
        
    </div>
    <span id="results">Found <span>0</span> children in <span>TAG</span>.</span>
  </body>
</html>


30. Set text and html

<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. <i>asdf</i>");
    $("p#tmpQuote-2").html("asdf. <i>asdf</i>");
  }
);
    </script>
    <style type="text/css">
p.tmpQuote {
    background: lightblue;
}
p#tmpQuote-2 {
    background: lightgreen;
}
    </style>
  </head>
  <body>
    <p>
      asdf. <i>asdf</i>
    </p>
    <p class="tmpQuote" id="tmpQuote-1">
    </p>
    <p class="tmpQuote" id="tmpQuote-2">
    </p>
  </body>
</html>


30. Set text for tag

<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</div>
      <div id="hey">div</div>
  </body>
</html>


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

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("p").text("<b>Some</b> new text.");
        });
    </script>
    <style>
      .selected { color:red; }
      .highlight { background:yellow; }
    </style>    
  </head>
  <body>
    <body>
      <p class="selected highlight">Hello first</p>
      <p class="">Hello</p>
    </body>
</html>


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

<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>
      <p class="selected highlight">Hello first</p>
      <p class="">Hello</p>
    </body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/text&oldid=9579»