JavaScript Tutorial/jQuery/children

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

Append SPAN one after another

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $("input").keypress(function (e) {
               var c = String.fromCharCode(e.which);
               $("p").append($("<span/>")).children(":last").append(document.createTextNode(c));
               $("div").text(e.which);
           });
       });
   </script>
 </head>
 <body>
   <body>
    <input type="text" />

Add text -

   </body>

</html></source>


Attaches a change event to the select that gets the text for each selected option

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
               
           $("select").change(function () {
                 var str = "";
                 $("select option:selected").each(function () {
                       str += $(this).text() + " ";
                     });
                 $("div").text(str);
               })
               .change();


       });
   </script>
 </head>
 <body>
   <body>
       <select name="sweets" multiple="multiple">
           <option>A</option>
           <option selected="selected">B</option>
           <option>C</option>
           <option selected="selected">D</option>
           <option>E</option>
           <option>F</option>
         </select>
   </body>

</html></source>


children(expr): filter with an optional expression

   <source lang="javascript">

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

</html></source>


Children from DIV

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $("div").children().css("border", "3px double red");
       });
   </script>
 </head>
 <body>
   <body>
spandiv
 </body>

</html></source>


Get target children length

   <source lang="javascript">

<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 $ch = $(e.target).children();
             alert($ch.length);
             e.preventDefault();
             return false;
           });
       });
   </script>
 </head>
 <body>
   <body>

This is the way we write the demo,

 </body>

</html></source>