JavaScript Tutorial/jQuery/Selector even odd index — различия между версиями

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

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

eq(index) matches a single element by its index.

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                
            $("td:eq(2)").css("color", "red");
                
        });
    </script>
  </head>
  <body>
    <body>
    <table border="1">
        <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
        <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
        <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
    </table>
    </body>
</html>


even() matches even elements, zero-indexed.

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                
            $("tr:even").css("background-color", "red");
                
        });
    </script>
  </head>
  <body>
    <body>
    <table border="1">
        <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
        <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
        <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
    </table>
    </body>
</html>


Even number tags

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("p:even").removeClass("blue");
        });
    </script>
  </head>
   <style>
      .blue { color:blue; }
  </style>
  <body>
    <body>
      <p class=blue>A</p>
      <p class=blue>A</p>
      <p class=blue>A</p>
  </body>
</html>


gt(index) matches all elements with an index above the given one.

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                
            $("tr:gt(1)").css("background-color", "red");
                
        });
    </script>
  </head>
  <body>
    <body>
    <table border="1">
        <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
        <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
        <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
    </table>
    </body>
</html>


lt(index) matches all elements with an index below the given one.

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("td:lt(2)").css("color", "red");
        });
    </script>
  </head>
  <body>
    <body>
    <table>
        <tr><td>First</td></tr>
        <tr><td>Middle</td></tr>
        <tr><td>Last</td></tr>
    </table>

    </body>
</html>


Matches all elements with an index above the given one

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
  $(document).ready(function(){
      $("td:gt(1)").css("color", "red");

      

  });
    </script>
  </head>
  <body>
   <table border="1">
    <tr><td>Row</td></tr>
    <tr><td>Row</td></tr>
    <tr><td>Row</td></tr>
    <tr><td>Row</td></tr>
  </table>

  </body>
</html>


Matches all elements with an index below the given one

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
  $(document).ready(function(){
      $("td:lt(1)").css("color", "red");

      

  });
    </script>
  </head>
  <body>
   <table border="1">
    <tr><td>Row</td></tr>
    <tr><td>Row</td></tr>
    <tr><td>Row</td></tr>
    <tr><td>Row</td></tr>
  </table>

  </body>
</html>


Matches a single element by its index

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
  $(document).ready(function(){
      $("td:eq(2)").css("color", "red");

      

  });
    </script>
  </head>
  <body>
   <table border="1">
    <tr><td>Row</td></tr>
    <tr><td>Row</td></tr>
    <tr><td>Row</td></tr>
    <tr><td>Row</td></tr>
  </table>

  </body>
</html>


Matches even elements, zero-indexed

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
  $(document).ready(function(){
      $("tr:even").css("color", "red");

      

  });
    </script>
  </head>
  <body>
   <table border="1">
    <tr><td>Row</td></tr>
    <tr><td>Row</td></tr>
    <tr><td>Row</td></tr>
    <tr><td>Row</td></tr>
  </table>

  </body>
</html>


Matches odd elements, zero-indexed.htm

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
  $(document).ready(function(){
      $("tr:odd").css("color", "red");

      

  });
    </script>
  </head>
  <body>
   <table border="1">
    <tr><td>Row</td></tr>
    <tr><td>Row</td></tr>
    <tr><td>Row</td></tr>
    <tr><td>Row</td></tr>
  </table>

  </body>
</html>


odd() matches odd elements, zero-indexed.

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               
               
               $("tr:odd").css("background-color", "#bbbbff");
        });
    </script>
  </head>
  <body>
    <body>
    <table>
        <tr><td>First</td></tr>
        <tr><td>Middle</td></tr>
        <tr><td>Last</td></tr>
    </table>

    </body>
</html>


Odd number paragraph

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("p:odd").removeClass("blue");
        });
    </script>
  </head>
   <style>
      .blue { color:blue; }
  </style>
  <body>
    <body>
      <p class=blue>A</p>
      <p class=blue>A</p>
      <p class=blue>A</p>
  </body>
</html>


Positional selectors supported by jQuery: selecting elements based on their position in the DOM

Selector                   Description
:first                     The first match of the page. 
:last                      The last match of the page. 
:first-child               The first child element. 
:last-child                The last child element. 
:only-child                Returns all elements that have no siblings.
:nth-child(n)              The nth child element. 
:nth-child(even|odd)       Even or odd children. 
:nth-child(Xn+Y)           The nth child element.
:even and :odd             Even and odd matching elements page-wide.
:eq(n)                     The nth matching element.
:gt(n)                     Matching elements after (and excluding) the nth matching element.
:lt(n)                     Matching elements before (and excluding) the nth matching element.
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/Selector_even_odd_index&oldid=9667»