DOM ?? ?? ??? ???? ?? ?? ??, ?? ??, ?? ??, ?? ?? ?? ?????. ??? DOM ?? ?? ??? ??? ???? ??? ?? ?? ? ????. ? ??? ???? ??? ???? ? ??? ?? ?????. ? ?? ??? ?? ???? HTML ??? ?????.

<form class="form" action="#" method="post">
    <div class="form-item">
      <label for="name">Name:</label>
      <input name="name" type="text" class="form-text" id="name" />
  </div>
  <div class="form-item">
      <label for="lastname">LastName:</label>
        <input name="lastname" type="text" class="form-text" id="lastname" />
    </div>
    <div class="form-item">
      <label for="password">Password:</label>
        <input name="password" type="text" class="form-text" id="password" />
    </div>
  <fieldset>
      <div class="form-item">
      <label>Newsletter:</label>
      <input name="newsletter" type="text" class="text-form" id="newsletter"/>
    </div>  
 </fieldset>
 <div class="form-item">
     <input type="submit" value="submit" class="form-submit" id="submit" />
     <input type="reset" value="reset" calss="form-submit" id="reset" />
 </div>
</form>

? HTML ??? ?? ?? BODY? DOM ?? ?? ?????? ???????.

? ?? ??????? ??? ???? ? ? ???? ? ?? ?? ??? ??? ?????. ????? ??? ??? ???? ???? ?? ??? ?? ??? ?? ?????. :

1. ??? ??? - ?? ??(?? ??):

???:

$("ancestor  descendant") //其中ancestor是指任何有效的元素，descendant是ancestor的后代元素

??:

?? ??? ?? ??? ?? ?????. Return value : collection elements ??? ?? ?? ?? ???.

<script type="text/javascript">   $(document).ready(function(){
       $('form input ').css('border','1px solid red');
   });</script>

?? ?? ??? ??? ??? ??

2. ??? ??? - ?? ?? ???(?? > ??):

???:

$("parent > child")  //parent是指任何有效的元素，child是parent元素的子元素

??:

?? ?? ???? ?? ?? ??? ?????. ?? ?? ??? $("ancestorDescendant")?? ??? ????. ??? ?? ??? ??? ? ?? ??, ??? ?? ?? ? ?? ??? ?? ?? ?? ??? ??? ? ????.

??? ??

<script type="text/javascript">    $(document).ready(function(){
       $('form > div ').css('border','1px solid red');
    });</script>

?? ??? ?? ?? div? ??? ?? ??

?? ??? div? ??? ?? ????? CSS ??? ???: 1px ?? ???? ?????. ??? ??? div? ?? ????? CSS ??? ??? ??? ???? ????. .

3. ??? ??? - ?? ?? ???(?? + ??):

???:

$("prev  +  next")  //其中prev是任何有效果選擇器，而next是prev元素相鄰的下一個元素（也就是緊接著pre的元素）

??:

?? ?? ?? ?? ?? ?? ??

?? ?:

Collection ??

Instance:

<script type="text/javascript">   $(document).ready(function(){
      $('fieldset + div ').css('border','1px solid red');
   });</script>

Function:

fieldset ?? ??? ?? div ?? ??? ??? ??? ?????.

??:

DOM ??? ?? ??? ?? ?????. ? fieldset?? "form-item"??? 4?? div? ??? ?? ??? fieldset ?? ?? ?? ???? ??? ???? ????? fieldset ?? ? ? ?? div? Firebug ? ???? ? ? ????.

4. ??? ??? - ?? ???(prev ~ siblings):

Selector:

$("prev ~  siblings")  //prev是指任何有效果的元素選擇器，而siblings是指prev元素后面的所有兄弟元素

??:

prev ?? ?? ? ?? ??? ?? ?????.

?? ?:

Collection ??

Instance:

<script type="text/javascript">   $(document).ready(function(){
      $('div ~ div ').css('border','1px solid red');
   });</script>

Function:

form div ?? ?? ?? div ?? ??? ??? ??? ?????.

??:

?? DOM ??? ???? div ?? 3?? div? 4?? fieldset ?? ??? ?? div ~ div? ???? ???? ? ?? div ??? ??? ??? ? ????. ?? div ??? ?? ??? ??? ?????. ????? Firebug?? ?? ?? ??? ???????.

???? jQuery? ?? 4?? ?? ???? ??? ???? ?? ?????. ??? ??? ??? ?? ?? ???? ????? ???? ? ?? ??? ??????. ?? ??? ?? ??? ?? ? ??? ???? jQuery? $("prev"? ??? ? ????. + next") ???? ???? nextAll() ???? ???? $("prev ~ siblings") ???? ?????. ?, ?? ???

<script type="text/javascript">   $(document).ready(function(){
      $('fieldset + div ').css('border','1px solid red');
   });</script>

? next() ???? ??? ? ????:

<script type="text/javascript">   $(document).ready(function(){
      $('fieldset').next('div').css('border','1px solid red');
   });</script>

???

<script type="text/javascript">   $(document).ready(function(){
      $('div ~ div ').css('border','1px solid red');
   });</script>

? nextAll() ???? ??? ? ????:

<script type="text/javascript">   $(document).ready(function(){
      $('div').nextAll().css('border','1px solid red');
   });</script>