看過[程式][JQuery] 元件選取器(Selectors)，基本概念。這個篇之後，我想大部分的基本的運用其實就很足夠。
但是越寫越多，遇到的狀況也越來越多，發現光是那些基本的概念跟本無法滿足，所以我在這把我所知道的概念，寫成第二篇。
這篇主要說明的是有層次性的選取。
先給一個HTML做為這篇的基本。你也可以直接下載我的範例檔：下載
|
<body> |
上一篇以經說過了Element的選取方式，這裡在複習一下。在script中加入下面這一段。擋你按下"第0個測試"，會跳出一個對話視窗，顯示test。
他的公式 $("標籤的名稱").要他做的事情 。像下面的語法$("form").attr("id")，就是去抓 標籤為form的id值。
| <script> $(document).ready( function() { $('#A').click(function(){ alert( $("form").attr("id") ) ; }) }) </script> |
顯示的結果：
在來，當我要抓取<form></form>裡面的第一個input。要怎麼寫呢？
$("form > input").attr("value");
他的公式 $(" 父標籤 > 子標籤").要他做的事情，簡單說 > 符號就是指你要去抓取他第一個符合條件的子標籤。
| <script> $(document).ready( function() { $("#B").click(function(){ alert( $("from > input ").attr("value") ) ; }) }) </script> |
顯示的結果：
第三個如果是要顯示input(我是第3個input)的值，因為他是在<form></form>之外，那又該怎麼寫呢？
$("form + input").attr("value");
把原來的 > 符號 改成 +，用這個例子來解釋就是，他要去抓在<from></form>之後第一個不歸屬任何組件的input。
| <script> $(document).ready( function() { $("#C").click(function(){ alert( $("from + input ").attr("value") ) ; }) }) </script> |
顯示的結果： 
相關文章：
[程式][JQuery] 元件選取器(Selectors)，基本概念(Part 1)。
[程式][JQuery] 元件選取器(Selectors)，基本概念(Part2)。
留言列表
