JavaScript DHTML/jQuery/Selector children

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

Finds all children of the element with id "main"

   <source lang="html4strict">
 

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
               
          $("#main > *").css("border", "3px solid red");
               
       });
   </script>
 </head>
 <body>
   <body>
     
asdf
       <button>Child</button>
       A Span
     
   </body>

</html>


 </source>
   
  


Finds all p elements that are children of a div element

   <source lang="html4strict">
 

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
          $("div > p").css("border", "1px solid gray");   
       });
   </script>
 </head>
 <body>
   <body>

asdf

   </body>

</html>


 </source>
   
  


Is it the first child

   <source lang="html4strict">
     

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
          $("div").one("click", function () {
             if ($(this).is(":first-child")) {
               $("p").text("It"s the first div.");
             }else{
               $("p").text("It"s NOT the first div.");
             }
             $("p").hide().slideDown("slow");
             
          });
       });
   </script>
    <style>
    div { border:2px white solid;}
 </style>
 </head>
 <body>
   <body>
     Press each to see the text.
asdf
asdf
asdf
asdf
asdf
asdf

 </body>

</html>




 </source>
   
  


Matches all child elements specified by child of elements specified by parent

   <source lang="html4strict">
     

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
 $(document).ready(function(){
   
    $("#main > *").css("border", "1px solid red");
 });
   </script>
 </head>
 <body>
     
         <button>Child</button>
         <form>
           <button>grand child</button>
         </form>
     
 </body>

</html>




 </source>
   
  


nthChild(index)

   <source lang="html4strict">
 

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
               $("ul li:nth-child(2)").append(" - 2nd!");
       });
   </script>
 </head>
 <body>
   <body>
  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
   </body>

</html>


 </source>
   
  


onlyChild(): If the parent has other child elements, nothing is matched.

   <source lang="html4strict">
 

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
            $("div ul:only-child").text("only has ul").css("border", "2px blue solid");
       });
   </script>
 </head>
 <body>
   <body>
  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
   </body>

</html>


 </source>
   
  


Select n-th child

   <source lang="html4strict">
     

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
       $("ul li:nth-child(2)").append("*");
   });
   </script>
 </head>
 <body>
  • A
  • B
  • C
 </body>

</html>




 </source>