层次选择器[selector_2.html]

浏览数：23 / 时间：2015年06月09日

层次选择器[selector_2.html]
$("form input")：祖先后代
$("form>input"):父亲>直接小孩
$("form+input")：兄弟的第一个，只包括form元素下面
$("form~input")：所有兄弟，只包括form元素下面的

 1 <html>
 2   <head>
 3     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 4     <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
 5   </head>
 6   <body>
 7     <input type="radio" value="f"/>
 8     <form>
 9         <input type="text" value="a"/>        
10         <table>
11             <tr>
12                 <td>
13                     <input type="checkbox" value="b"/>
14                 </td>
15             </tr>            
16         </table>
17     </form>
18     <input type="radio" value="c"/>
19     <input type="radio" value="d"/>
20     <input type="radio" value="e"/>
21     <script type="text/javascript">
22     
23     /*1)找到表单form内部所有的input元素的个数
24         var $input = $("form input");
25         var size = $input.size();
26         alert(size);
27     */     
28     alert($("form input").val())
29     
30       /*2)找到表单form内部所有的子级input元素个数
31           var $input = $("form>input");
32           var size = $input.size();
33           alert(size);
34           */ 
35       //  alert($("form>input").val())
36           
37           
38       /*3)找到表单form同级第一个input元素的value属性值
39           var $input = $("form+input");
40           var value = $input.val();
41           alert(value);
42           */
43         
44           alert($("form+input").val())        //c
45       //4)找到所有与表单form同级的input元素个数
46        /*  var $input = $("form~input");
47          var size = $input.size();
48          alert(size);
49       */
50       alert($("form~input").size())
51     </script>
52   </body>
53 </html>