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>
trowa
My Blog 