JavaScript DHTML/jQuery/Selector relation — различия между версиями

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

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

descendant(ancestor, descendant): Finds all input descendants of forms.

  
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                
           $("form input").css("border", "2px solid blue");
                
        });
    </script>
  </head>
  <body>
    <body>
        <form>
            <input name="name" />
            <input name="newsletter" />
        </form>
    </body>
</html>



has(selector) matches the specified selector.

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

    </body>
</html>



Match parents

      
<html>
  <head>
    <style>
      .test{ border: 1px solid red; }
    </style>
  
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
         
         $("p:parent").addClass("test");
    });
    </script>

  </head>
  <body>
      <div><p>paragraph in div</p></div>
      <div>div</div>

  </body>
</html>



next(prev, next): Finds all inputs that are next to a label.

  
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                
           $("label + input").css("color", "blue").val("Labeled!")
                
        });
    </script>
  </head>
  <body>
    <body>
       <form>
        <label>Name:</label>
    
        <input name="name" />
        <fieldset>
          <label>Age:</label>
          <input name="age" />
        </fieldset>
      </form>
    </body>
</html>



parent() matches all elements that are parents

  
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               
            $("td:parent").fadeTo(1500, 0.3);
        });
    </script>
  </head>
  <body>
    <body>
       <table border="1">
        <tr><td>Value 1</td><td></td></tr>
    
        <tr><td>Value 2</td><td></td></tr>
       </table>
    </body>
</html>



prev + next

      
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
  $(document).ready(function(){
     $("label + input").css("color", "red").val("value")
  });
    </script>
  </head>
  <body>
      <form>
        <label>Name:</label>
        <input name="name" />
        <fieldset>
          <label>Address:</label>
          <input name="newsletter" />
        </fieldset>
      </form>
      <input name="none" />
  </body>
</html>



prev ~ siblings

      
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
  $(document).ready(function(){
     $("label ~ input").css("color", "red").val("value")
  });
    </script>
  </head>
  <body>
      <form>
        <label>Name:</label>
        <input name="name" />
        <fieldset>
          <label>Address:</label>
          <p>p</p>
          <input name="newsletter" />
        </fieldset>
      </form>
      <input name="none" />
  </body>
</html>



Remove all elements that have a descendant ol element

  

 $("p").filter(function(index) {
   return $("ol", this).length == 0;
 });



Select if DIV has another tag

      
<html>
  <head>
    <style>
      .test{ border: 1px solid red; }
    </style>
  
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
         $("div:has(p)").addClass("test");
    });
    </script>

  </head>
  <body>
      <div><p>paragraph in div</p></div>
      <div>div</div>

  </body>
</html>



Select inside body tag

      

<html>
  <head>
    <style>
      .test{ border: 1px solid red; }
    </style>
  
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
           $("span:first").text($(":hidden", document.body).length + " hidden elements.");
    });
    </script>

  </head>
  <body>
      <span></span>
        <div></div>
        <div style="display:none;">Hider!</div>
        <div></div>
        <div></div>
        <form>
            <input type="hidden" />
            <input type="hidden" />
            <input type="hidden" />
        </form>
        <span></span>
  </body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/jQuery/Selector_relation&oldid=2893»