JavaScript Tutorial/jQuery/this

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

30. this pointer

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        var str = $(this).text();
        alert(str)

    });
    </script>
  </head>
  <body>
      <table>
            <tr><td>A</td></tr>
            <tr><td>B</td></tr>
            <tr><td>C</td></tr>
            <tr><td>D</td></tr>
      </table>
  
  </body>
</html>


30. Use jQuery object instead of the regular DOM element, use the $(this) function

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                $("span").click(function () {
                   $("li").each(function(){
                      $(this).toggleClass("example");
                   });
                });
        });
    </script>
<style>
 .example { font-style:italic; }
  
</style>    
  </head>
  <body>
    <body>
       To do list: <span>(click here to change)</span>
          <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
          </ul>

    </body>
</html>


30. Use this to reference document

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

        });
    </script>
    <style>
      div { border:2px green solid;}
    </style>
  </head>
  <body>
    <body>
       <p>Hello</p>
    </body>
</html>