TOC

This article is currently in the process of being translated into Vietnamese (~36% done).

Selectors:

Using elements, ID's and classes

The #id selector

Một loại selector rất phổ biến dựa trên ID như chúng ta thấy trong ví dụ "Hello, world". Chúng ta dùng thuộc tính ID của thẻ HTML để chọn. ID nên là duy nhất, bạn nên dùng selector khi bạn muốn chọn một element. Để chọn một element với ID nhất định thì cần dùng ký hiệu # và theo sau là ID như sau:

$("#divTest")

An example of it in use:

<div id="divTest"></div>
<script type="text/javascript">
$(function()
{
	$("#divTest").text("Test");
});
</script>

Giờ chỉ có một element được chọn ra trong câu trên trả về list có nghĩa nó có hơn một element nếu trong query có nhiều hơn 1 element. Ví dụ khi dùng một hay nhiều class thì có thể trả về nhiều element.

The .class selector

Elements with a specific class can be matched by writing a . character followed by the name of the class. Here is an example:

<ul>
	<li class="bold">Test 1</li>
	<li>Test 2</li>
	<li class="bold">Test 3</li>
</ul>
<script type="text/javascript">
$(function()
{
	$(".bold").css("font-weight", "bold");
});
</script>

The element selector

You can also match elements based on their tag names. For instance, you can match all links on a page like this:

$("a")

Or all div tags like this:

$("div")

If you use a multi-element selector, like the class selector we used in the previous example, and we know that we're looking for elements of a specific type, it's good practice to specify the element type before the selector. Not only is it more precise, it's also faster for jQuery to process, resulting in more responsive sites. Here is a re-written version of the previous example, where we use this method:

$("span.bold").css("font-weight", "bold");

This will match all span elements with "bold" as the class. Of course, it can be used with ID's and pretty much all of the other selectors as well.

Selectors can do much more for you though. Read on for more cool examples.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!