首页 > 代码库 > 层次选择器[selector_2.html]

层次选择器[selector_2.html]

2024-07-09 14:37:11   222人阅读

层次选择器[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 = http://www.mamicode.com/$input.val();>41           alert(value);42           */43         44           alert($("form+input").val())        //c45       //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>

 


联系
我们