JavaScript Tutorial/jQuery/Selector relation

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

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

   <source lang="javascript">

<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></source>


has(selector) matches the specified selector.

   <source lang="javascript">

<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>
First
asdf
asdf
   </body>

</html></source>


Match parents

   <source lang="javascript">

<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>

paragraph in div

div
 </body>

</html></source>


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

   <source lang="javascript">

<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></source>


parent() matches all elements that are parents

   <source lang="javascript">

<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>
Value 1
Value 2
   </body>

</html></source>


prev + next

   <source lang="javascript">

<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></source>


prev ~ siblings

   <source lang="javascript">

<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

         <input name="newsletter" />
       </fieldset>
     </form>
     <input name="none" />
 </body>

</html></source>


Remove all elements that have a descendant ol element

   <source lang="javascript">

$("p").filter(function(index) {

  return $("ol", this).length == 0;
});</source>
   
  

Select if DIV has another tag

   <source lang="javascript">

<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>

paragraph in div

div
 </body>

</html></source>


Select inside body tag

   <source lang="javascript">

<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>
     
Hider!
       <form>
           <input type="hidden" />
           <input type="hidden" />
           <input type="hidden" />
       </form>
       
 </body>

</html></source>