JavaScript Tutorial/jQuery/click

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

Add click listener to links in unordered list

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
var tmpExample = {
  ready : function() {
    $("ul#myStyle li a").click(
      function($e) {
        $e.preventDefault();
        window.open(this.href, "FavoriteLink", "");
      }
    );
  }
};
$(document).ready(tmpExample.ready);
    </script>
    <style type="text/css">
ul {
    list-stlye: none;
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
    </style>
  </head>
  <body>
    <ul id="myStyle">
        <li><a href="http://www.wbex.ru">wbex</a></li>
        <li><a href="http://www.apple.ru">Apple</a></li>
        <li><a href="http://www.jquery.ru">jQuery</a></li>
    </ul>
  </body>
</html>


Find all children of the clicked element.

<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 $kids = $(e.target).children();
                  alert($kids.length);
            
           
                  e.preventDefault();
                  return false;
                });
                    
        });
    </script>
  </head>
  <body>
    <body>
        <div id="container">
        <div>
          asdf
        </div>
        </div>
          
    </body>
</html>


Stop click event

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
var tmpExample = {
  ready : function() {
    $("ul#myStyle li a").click(
      function($e) {
        $e.preventDefault();
        window.open(this.href, "FavoriteLink", "");
      }
    );
  }
};
$(document).ready(tmpExample.ready);
    </script>
    <style type="text/css">
ul {
    list-stlye: none;
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
    </style>
  </head>
  <body>
    <ul id="myStyle">
        <li><a href="http://www.wbex.ru">wbex</a></li>
        <li><a href="http://www.apple.ru">Apple</a></li>
        <li><a href="http://www.jquery.ru">jQuery</a></li>
    </ul>
  </body>
</html>


To trigger the click event on all of the paragraphs on the page:

$("p").click();