Jquery cơ bản-Selectors

Bài viết trước mình đã giới thiệu sơ qua một chút về cú pháp trong Jquery. Hôm nay mình xin tiếp tục với phần cơ bản về Selectors trong Jquery. Jquery selector cho phép bạn truy cập và thao tác với một hoặc một nhóm các thành phần HTML. Mỗi khi sử dụng Jquery thì việc dùng selectors để truy cập thành phần HTML là bắt buộc và bạn có thể truy cập vào những thành phần này bằng tên thẻ hoặc tên các thuộc tính. Các selectors trong Jquery đều bắt đầu bằng dấu dollar và cặp ngoặc tròn:  $(). 
Đây là bảng các selector hay dùng trong jquery:

Selector	Example	Phần tử được select
Selector cho các phần tử trang
*	$("*")	Lấy tất cả các thành phần
#id	$("#intro")	Lấy tất cả các phần tử có id là intro
.class	$(".about")	Lấy tất cả các phần tử có class là about
element	$("p")	Lấy tất cả các thẻ p
.class.class	$(".intro.about")	Lấy tất cả các thành phần có 2 class là intro và about
Selector theo vị trí đặc biệt
:first	$("p:first")	Lấy thẻ p đầu tiên
:last	$(p:last)	Lấy thẻ p cuối cùng
:even	$("ul li:even")	Lấy tất cả các phần tử li chẵn
:odd	$("ul li:odd")	Lấy tất cả phần tử li lẻ
Selector cho các phần tử tại vị trí xác định
:eq(index)	$("ul li:eq(4)")	Lấy phần tử li ở vị trí thứ 5(index được đánh từ 0)
:gt(no)	$("ul li:gt(4)")	Lấy tất cả phần tử li có index lớn hơn 4
:lt(no)	$("ul li:lt(4)")	Lấy tất cả các phần tử li có index nhỏ hơn 4
:not(selector)	$("input:not(:empty)")	Lấy tất cả các phần tử input mà không rỗng
Selector cho phần tử theo nội dung và đặc điểm hiển thị
:contains(text)	$("p:contains("webzoomz")")	Lấy tất cả các thẻ p có chứa chữ webzoomz
:empty	$("p:empty")	Lấy tất cả các thẻ p rỗng không có nội dung
:hidden	$("p:hidden")	Lấy tất cả các thẻ p bị hidden
:visible	$("p:visible")	Lấy tất cả các thẻ p đang được visible
Selector theo thuộc tính
[attribute]	$("[href]")	Lấy tất cả các phần tử có thuộc tính href
[attribute=value]	$("[src='index.html']")	Lấy tất cả các phần tử có thuộc tính src='index.html'
[attribute!=value]	$("[src!='index.html']")	Lấy tất cả các phần tử không có thuộc tính src='index.html'
[attribute$=value]	$("[src$='.png']")	Lấy tất cả các phần tử có thuộc tính src có giá trị kết thúc là .png
[attribute^=value]	$("[src^='http://']")	Lấy tất cả các phần tử có thuộc tính src bắt đầu với http://
Selector cho các phần tử form
:input	$(":input")	Lấy tất cả các thẻ input
:text	$(":text")	Lấy tất cả các phần tử input có type=text
:password	$(":password")	Lấy tất cả các phần tử input có type=password
:radio	$(":radio")	Lấy tất cả các phần tử input có type=radio
:checkbox	$(":checkbox")	Lấy tất cả các phần tử input có type=checkbox
:submit	$(":submit")	Lấy tất cả các phần tử input có type=submit
:reset	$(":reset")	Lấy tất cả các phần tử input có type=reset
:button	$(":button")	Lấy tất cả các phần tử input có type=button
:image	$(":image")	Lấy tất cả các phần tử input có type=image
:file	$(":file")	Lấy tất cả các phần tử input có type=file
Selector cho trạng thái
:enable	$(":enable")	Lấy tất cả các phần tử input có trạng thái enable
:disable	$(":disable")	Lấy tất cả các phần tử input có trạng thái disable
:selected	$(":selected")	Lấy tất cả các phần tử input được select
:checked	$(":checked")	Lấy tất cả các phần tử input được checked
Các selectors khác
:header	$(":header")	Lấy tất cả các thẻ header: h1,h2,h3...

Đây là một ví dụ đơn giản mà mình đã làm để demo cho bài này:
Đầu tiên chúng ta có 1 bảng gồm nhiều dòng:

<table>
        <tr>
            <td>Selector</td>
            <td>Example</td>
            <td>Phần tử được select</td>
        </tr>
        <tr>
            <td colspan="3">Selector cho các phần tử trang</td>
        </tr>
        <tr>
            <td>*</td>
            <td>$("*")</td>
            <td>Lấy tất cả các thành phần</td>
        </tr>
        <tr>
            <td>#id</td>
            <td>$("#intro")</td>
            <td>Lấy tất cả các phần tử có id là intro</td>
        </tr>
    ...
</table>

 Sau đó chúng ta sẽ dùng 1 số selector đơn giản để tạo style cho bảng này. Đầu tiên chúng ta sẽ có các style:

<style type="text/css">
        .odd
        {
            background-color: #FF8900;
            color: White;
        }
        .even
        {
            background-color: #fff;
            color: #FF5900;
        }
        .caption
        {
            background-color: #FB5B04;
            color: White;
            font-weight: bold;
        }
        .title
        {
            background-color: #FB5B04;
            color: #fff;
            font-size: 18px;
            font-weight: bolder;
        }
    </style>

 Và đây là code jquery để gán style cho bảng thông qua các selector:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("tr:first").addClass("title");
            $("tr:odd").addClass("odd");
            $("tr:even").addClass("even");
            $("[colspan='3']").addClass("caption");
        });
    </script>

 Chúng ta hãy cùng phân tích 1 chút. Mình sẽ gán class title cho dòng tr đầu tiên, các tr chẵn thì mình gán class even còn các tr lẻ thì mình gán class odd. Và phần tử tr nào có colspan=3 thì mình gán class caption. Và kết quả chính là bảng các selector bên trên(màu mè không được đẹp do mình hơi thiểu thẩm mỹ các bạn thông cảm ^_^). Hy vọng bài viết sẽ giúp các bạn hiểu hơn về các selectors trong jquery