JavaScript Tutorial/jQuery/Event click

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

30. Add event to container

<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) {
              
              alert(e.target.tagName);
              e.preventDefault();
              return false;
            });
        });
    </script>
  </head>
  <body>
    <body>
    <div id="container">
        <div>
          <p>a<span>b<em>c</em>d</span>e<em>f</em>g</p>
        </div>
    </div>
  </body>
</html>


30. Add your own action to anchor

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
   $(document).ready(function(){
     $(".article .thebody").hide();
     $("#container .article ul").prepend("<li class="my"><a href="" title="title">link</a></li>");
     $(".actions li.my a").click(function(event){
       $(this).parents("ul").prev(".thebody").toggle();
       
       event.preventDefault();
     });
   });
    </script>
  </head>
  <body>
 <div id="container">
   <div class="article">
     <p class="summary">Summary 01</p>
     <p class="thebody">Lorem ipsum....</p>
     
     <ul class="actions">
     </ul> 
     
   </div>
 </div>

  </body>
</html>


30. Anchor click event

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
 $(document).ready(function(){
   $("a").click(function(event){
     alert("Thanks for visiting!");
   });
 });

    </script>
  </head>
  <body>
    <a href="http://wbex.ru/">wbex.ru</a>
  </body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/Event_click&oldid=9615»