[程式][JQuery] 元件選取器(Selectors)，基本概念(Part 1)。 @ 四處流浪的阿基。I am Vagrant Walker

JQuery 第一件事情就是如何選取元件，如果無法選取元件，那跟本就什麼都做不了。

在過去選取元素，都試要透過很長的指令去選取。原來的方法document.getElementById("ID")，但是在JQuery簡化了所有程式。

對於舊的方法有興趣的，我在這提供一個國外網址，有詳盡的資料可以參考，這邊我只針對JQuery。

這個網址當中還有很多寶貴的資料可以參考。可以把他記錄下來。

http://www.w3schools.com/jsref/dom_obj_document.asp

現在來談談JQuery吧！

在上一篇文章，[程式][JQuery] 基本介紹JQuery，讓你在開始之前，對這神兵利器先有個概念! 有寫到。

JQuery是Do more.write less.

如果你要在HTML中使用 JQuery讀取某一個DOM元素的時候。可以使用JQuery()或是$()，我是偏好用後者。

程式表達方式。$("標籤的名稱")。下面就程式範例就以a 超連結為例子，最後.lenght顯示總共有幾個。

    </head>
    <body>
        <a href="#">linkA</a><BR/>
        <a href="#">linkB</a><BR/>
        <a href="#">linkC</a><BR/>
        <a href="#">linkD</a><BR/>
        <a href="#">linkE</a><BR/>
        <a href="#">linkF</a><BR/>
        <script type="text/javascript" >
            alert("<a> tag 總共有"+$('a').length);
        </script>
    </body>
</html>

顯示的結果：

但是在DOM元素中選取特定的元素的時候，可以搭配上 id 或是class的方式。這邊先說id吧。在下面程試範例中，我在第三個元素取名id="tag3"，在JQuery中，就要加上#符號。所以你會看到的是$("#tag3")，最下面我再把tag3的東西顯示出來，會是linkC

    </head>
    <body>
        <a href="#">linkA</a><BR/>
        <a href="#">linkB</a><BR/>
        <a href="#" id="tag3">linkC</a><BR/>
        <a href="#">linkD</a><BR/>
        <a href="#">linkE</a><BR/>
        <a href="#">linkF</a><BR/>
        <script type="text/javascript" >
            alert($("#tag3").html());

</script>
</body>
</html>

顯示的結果：

接下來我要說的是class，這個取名方式對於一般用PHP 或是HTML的朋友可能不熟悉，如果你有再用CSS排版的話應該就會比較了解，如果你想透過class方是選去元素就是在元素前面加個.，像下面的範例，我在第四個A元素定意名稱class=tag4，那我在JQuery的用法就是$('.tag4')，一樣我會把它顯示出來。

    </head>
    <body>
        <a href="#">linkA</a><BR/>
        <a href="#">linkB</a><BR/>
        <a href="#">linkC</a><BR/>
        <a href="#"class="tag4">linkD</a><BR/>
        <a href="#">linkE</a><BR/>
        <a href="#">linkF</a><BR/>
        <script type="text/javascript" >
            alert($(".tag4").html());

</script>
</body>
</html>

顯示的結果：