jQuery 1.3.2 Selectors Demo

日期：
Selectors:Hierarchy
  1. ancestor descendant
    選出所有ancestor之下的descendant元素，不論descendant位於ancestor之下幾層。
    類似xpath語法：//ancestor//descendant
  2. parent > child
    選出parent的子元素。
    類似xpath語法：//parent/child
  3. prev + next
    選出prev元素接著next元素的所有next元素。
    類似的xpath語法：//prev/next
  4. prev ~ siblings
    選出prev的所有siblings
    類似的xpath語法：//prev/siblings/following-sibling::*


<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>jQuery 測試</title>
<script mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="msg_div">
default text</div>
<form name="f1">
<span>
<input name="text1" type="text" value="this is f1 text1 value" />

<input name="text2" type="text" value="this is f1 text2 value" />

</span>
<input id="btn1" type="button" value="Demo parent child" />

<input id="btn2" type="button" value="Demo parent &gt; child" />

<input id="btn3" type="button" value="Demo prev + next" />

<input id="btn4" type="button" value="Demo prev ~ siblings" />

</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>

留言

張貼留言