Selectors:Hierarchy
- ancestor descendant
選出所有ancestor之下的descendant元素，不論descendant位於ancestor之下幾層。
類似xpath語法：//ancestor//descendant - parent > child
選出parent的子元素。
類似xpath語法：//parent/child - prev + next
選出prev元素接著next元素的所有next元素。
類似的xpath語法：//prev/next - prev ~ siblings
選出prev的所有siblings
類似的xpath語法：//prev/siblings/following-sibling::*
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery 測試</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script></head><body><div id="msg_div">default text</div><form name="f1"><span><input type="text" name="text1" value="this is f1 text1 value" /><br /><input type="text" name="text2" value="this is f1 text2 value" /><br /></span><input type="button" value="Demo parent child" id="btn1" /><br /><input type="button" value="Demo parent > child" id="btn2" /><br /><input type="button" value="Demo prev + next" id="btn3" /><br /><input type="button" value="Demo prev ~ siblings" id="btn4" /><br /></form><script type="text/javascript"><!--$(document).ready(function(){ var ck='blue'; $('#btn1').click(function(){ $('#msg_div').text($.trim($('form[name=f1] input[name=text1]').val())); }); $('#btn2').click(function(){ $('#msg_div').text($.trim($('form[name=f1] > span > input[name=text2]').val())); }); $('#btn3').click(function(){ if(ck=='blue'){ $('span+input').css("color", "yellow"); ck='yellow'; } else{ $('span+input').css("color", "blue"); ck='blue'; } }); $('#btn4').click(function(){ $('span ~ input[id=btn1]').css('color','green'); });});// --></script></body></html>
