jQuery ±éÀú - children() ·½·¨
ʵÀý
ÕÒµ½ÀàÃûΪ "selected" µÄËùÓÐ div µÄ×ÓÔªËØ£¬²¢½«ÆäÉèÖÃΪÀ¶É«£º
$("div").children(".selected")
.css("color", "blue");
¶¨ÒåºÍÓ÷¨
children() ·½·¨·µ»Ø·µ»Ø±»Ñ¡ÔªËصÄËùÓÐÖ±½Ó×ÓÔªËØ¡£
Óï·¨
.children(selector)
²ÎÊý | ÃèÊö |
---|---|
selector | ×Ö·û´®Öµ£¬°üº¬Æ¥ÅäÔªËØµÄÑ¡ÔñÆ÷±í´ïʽ¡£ |
Ïêϸ˵Ã÷
Èç¹û¸ø¶¨±íʾ DOM ÔªËØ¼¯ºÏµÄ jQuery ¶ÔÏó£¬.children() ·½·¨ÔÊÐíÎÒÃǼìË÷ DOM Ê÷ÖеÄÕâÐ©ÔªËØ£¬²¢ÓÃÆ¥ÅäÔªËØ¹¹ÔìÐ嵀 jQuery ¶ÔÏó¡£.find() ºÍ .children() ·½·¨ÀàËÆ£¬²»¹ýºóÕßÖ»ÑØ×Å DOM Ê÷ÏòϱéÀúµ¥Ò»²ã¼¶¡£
Çë×¢Ò⣬Óë´ó¶àÊý jQuery ·½·¨Ò»Ñù£¬.children() ²»·µ»ØÎı¾½Úµã£»Èç¹ûÐèÒª»ñµÃ°üº¬Îı¾ºÍ×¢ÊͽڵãÔÚÄÚµÄËùÓÐ×ӽڵ㣬ÇëʹÓà .contents()¡£
¸Ã·½·¨½ÓÊÜÒ»¸öÑ¡ÔñÆ÷±í´ïʽ×÷Ϊ¿ÉÑ¡²ÎÊý£¬ÓëÎÒÃÇ´«µÝµ½ $() µÄ²ÎÊýµÄÀàÐÍÊÇÏàͬµÄ¡£Èç¹ûÓ¦ÓøÃÑ¡ÔñÆ÷£¬½«²âÊÔÔªËØÊÇ·ñÆ¥Åä¸Ã±í´ïʽ£¬ÒÔ´ËɸѡÕâÐ©ÔªËØ¡£
Çë˼¿¼Õâ¸ö´øÓлù´¡µÄǶÌ×ÁбíµÄÒ³Ãæ£º
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
Èç¹ûÎÒÃÇ´Ó level-2 ÁÐ±í¿ªÊ¼£¬ÎÒÃÇ¿ÉÒÔÕÒµ½ËüµÄ×ÓÔªËØ£º
$('ul.level-2').children().css('background-color', 'red');
ÕâÐдúÂëµÄ½á¹ûÊÇ£¬ÏîÄ¿ A, B, C µÃµ½ºìÉ«±³¾°¡£ÓÉÓÚÎÒÃÇûÓÐÓ¦ÓÃÑ¡ÔñÆ÷±í´ïʽ£¬·µ»ØµÄ jQuery ¶ÔÏó°üº¬ÁËËùÓÐ×ÓÔªËØ¡£Èç¹ûÓ¦ÓÃÒ»¸öÑ¡ÔñÆ÷µÄ»°£¬ÄÇôֻ»á°üÀ¨Æ¥ÅäµÄÏîÄ¿¡£