jQuery thực sự mạnh mẽ thật đúng với slogan "write less, do more", nó là một thư viện JavaScript rất giễ ràng sử dụng nó giúp các nhà thiết kế và phát triển web thêm các các phần tử có sự tương tác và có tính năng động về phía người dùng. Nếu trước kia bạn viết JavaScript mà không sử dụng thư viện thì sẽ rất dài vì bạn phải tự xây dựng thêm các hàm để chọn rồi sử lý phần tử bây giờ mọi thứ trở nên đơn giản và ngắn gọn như bạn viết CSS vậy. Bài viết này sẽ giới thiệu về các biểu thức chọn trong jQuery theo dạng CSS selector.

Element

Để chọn theo tên thẻ sử dụng cú pháp $('tên thẻ')

ID: #myid

Chọn theo tên id của phần tử sử dụng cú pháp $('tên id')

Class: .myclass

Chọn theo tên class của phần tử sử dụng cú pháp $('.tên class'). Có một điều nên chú ý rằng trong cấu trúc hồ sơ của bạn thì class thường được dùng cho nhiều phần tử nên kết quả biểu thức chọn này thường trả về một mảng phần tử.

Descendant: E F

Chọn theo con cháu ví dụ chọn phần tử img là hậu duệ của phần tử a sẽ có cú pháp $('a img')

Child: E > F

Chọn theo thẻ con trực tiếp cú pháp $('tên thẻ > tên thẻ'). Phương pháp chon theo CSS này được hổ trợ trên hầu hết các trình duyệt hiện đại và không hổ trợ trên trình duyệt IE từ phiên bản 6 về trước

Adjacent Sibling: E + F

Chọn những thẻ có cùng phần tử cha và nằm kế nhau tức chúng là anh em của nhau, cú pháp $('tên thẻ + tên thẻ')

General Sibling: E ~ F

Chọn những phần tử F cùng cấp với phần tử E, cú pháp $('tên thẻ ~ tên thẻ')

Multiple Elements: E,F,G

Chọn nhiều phần tử cùng lúc, cú pháp $('tên thẻ, tên thẻ,...')

Nth Child (:nth-child(n))

Chọn phần tử con theo thứ tự chỉ mục n, ở đây nth-child(n) sẽ đánh số từ 1 và đánh chỉ mục với tất cả các thẻ con, trong khi đó nth(n) sẽ đánh số từ 0 và chỉ đánh chỉ mục theo phần tử bạn chọn. Ngoài ra bạn có thể thay n bằng từ khóa even để chọn những phần tử con chẵn hoặc odd để chọn những phần tử con lẻ.

First Child (:first-child)

Chọn phần tử con đầu tiên, cú pháp $('tên thẻ:first-child')

Last Child (:last-child)

Chọn phần tử con cuối cùng, cú pháp $('tên thẻ:last-child')

Only Child :only-child

Chọn tất cả những phần tử chỉ là con, cú pháp $('tên thẻ:only-child')

Not :not(s)

Chọn theo dạng phủ định. Ví dụ

• $('li:not(.myclass)') Chọn những phần tử li nào không có class tên myclass
• $('li:not(:last-child)') Chọn những phần tử  li nào không phải là phần tử con cuối cùng

Empty :empty

Chọn những phần tử nào rỗng tức là nó không có con cháu, cú pháp $('phần tử:empty') hoặc $(':empty')

Universal: *

Dấu * sử dụng trong thẻ chọn đại diện cho tất cả các phần tử

Trong những bài viết tiếp theo sẽ giới thiệu về những phương pháp chọn phần tử tiếp theo.

Tham khảo (jQuery Reference Guide and docs.jquery.com)

Bài viết này sẽ giới thiệu cách chọn phần tử theo thuộc tính và giựa theo các tùy chọn về vị trí của phần tử.

Attribute Selectors

Has Attribute: [foo]

Chọn các phần tử có thuộc tính là foo

Attribute Value Equals: [foo=bar]

Chọn các phần tử có thuộc tính foo với giá trị bằng bar

Attribute Value Does Not Equal: [foo!=bar]

Chọn các phần tử không có thuộc tính foo với giá trị bằng bar

Attribute Value Begins: [@foo^=bar]

Chọn các phần tử có thuộc tính foo với giá trị bắt đầu bằng bar

Attribute Value Ends: [@foo$=bar]

Chọn các phần tử có thuộc tính foo với giá trị cuối bằng bar

Attribute Value Contains: [@foo*=bar]

Chọn các phần tử có thuộc tính foo với giá trị có chứa chuỗi bằng bar

Custom Selectors

Even Element (:even)

Chọn các phần tử chẵn, bạn cũng có thể sử dụng :nth-child(even) với chức năng tương tự

Odd Element (:odd)

Chọn các phần tử lẻ, bạn cũng có thể sử dụng :nth-child(odd) với chức năng tương tự

Nth Element (:eq(n), :nth(n))

Chọn phần tử theo thứ tự chỉ mục, phần tử đầu tiên bắt đầu với chỉ mục bằng 0, cách thức chọn này là khác với nth-child(n)

Greater Than :gt(n)

Chọn các phần tử có chỉ mục lớn hơn n, phần tử đầu tiên bắt đầu với chỉ mục bằng 0

Less Than : lt(n)

Chọn các phần tử có chỉ mục nhỏ hơn n, phần tử đầu tiên bắt đầu với chỉ mục bằng 0

First :first

Chọn phần tử đầu tiên, điều này là tương đương với nth(0), eq(0), còn nếu chọn theo phần tử con thì nó tương đương với nth-child(1)

Last :last

Chọn phần tử cuối cùng

Contains :contains(text)

Chọn các phần tử có chứa nội dung text

Visible :visible

Chọn các phần tử đang được hiển thị

Hidden :hidden

Chọn các phần tử đang được ẩn

Ở trên là những cách thức để bạn chọn phần tử trong jQuery, các bài viết thuộc seri jQuery basic chỉ mang hình thức giới thiệu dành cho những ai mới làm quen với jQuery, hoặc cũng là một bài ôn lại cho những ai đã hiểu về nó.

Tham khảo (jQuery Reference Guide and docs.jquery.com)

DOM cho chúng ta một số event để tương tác với người dùng trên DOM, nay chúng ta có nhiều lựa chọn hơn khi dùng jQuery, khá nhiều phương thức được viết trong jQuery để thực hiện cho một vài sự kiện người dùng trên DOM hoặc một số sự kiện tự định nghĩa, qua nhiều phiên bản tiến lên có một số phương thức trong jQuery đã được thay thế nhưng vẫn giữ lại hoặc đã bỏ đi, một vài liệt kê sau sẽ sơ lược lại những gì jQuery đã viết để có cách nhìn rõ ràng và tổng quát hơn về các phương thức sự kiện cũng như có mối liên hệ tới các sự kiện trong DOM.

bind()/on()/delegate()/one()

• bind( eventType [, eventData ], handler )
• on( events [, selector ] [, data ], handler )
• delegate( selector, eventType, eventData, handler )
• one( events [, selector ] [, data ], handler )

từ phiên bản 1.7 thì jQuery đưa vào on() lúc này bind(), delegate() và on() đều như nhau vì thực tế chỉ là bind() và delegate() gọi on(), nhưng on() có thể gắn một hành động cho một hoặc nhiều sự kiện tới những phần tử được chọn, bind() thì không có thêm tham số selector (trong jQuery bind() gọi on() với tham số selector là null). Các sự kiện được liệt kê trong chuỗi bằng khoảng trắng để cùng thực hiện một hành động hoặc có thể chuyển vào dạng object để viết hành động cho từng sự kiện. Trong code jQuery phương thức one() cũng gọi on() nhưng với tham số cuối bằng 1 điều này để one() thực hiện hành động cho sự kiện chỉ lần đầu tiên điều này cũng tương đương với việc ta gọi off() trong khi thực hiện một hành động cho sự kiện bằng gọi on(). Tóm lại mục đích chung của tất cả các phương thức trên thì cũng tương tự như addEventListener() của DOM (từ IE8 về trước thì là attachEvent)

unbind()/off()/undelegate()

unbind() và undelegate() đều gọi off(), mục đích thì cũng tương tự như removeEvenListener() của DOM (từ IE8 về trước thì là detachEvent)

live(), die()

đã được remove từ phiên bản 1.9

blur()/focusout(), focus()/focusin()

blur() được giới thiệu trước và sau đó jQuery đã giới thiệu thêm focusout() đây là 2 phương thức ngắn gọn của on(), hai phương thức này tương tự nhau vì thực tế là blur() gọi focusout(), mục đích giống như phương thức onblur() và onfocusout() của DOM. Sự khác nhau của 2 phương thức này ở chỗ focusout() sẽ có thể ảnh hưởng lên các phần tử con của nó còn blur() phải là chính nó. Trong jQuery thì focusout() có thể làm việc được trên cả firefox còn onfocusout() của DOM hiện tại thì không (ví dụ http://jsfiddle.net/tuG33/1/). Cách hiểu về focus() và focusin() cũng tương tự.

load(), unload(), resize(), scroll(), submit(), change(), select(), click(), dblclick(), keydown(), keyup(), keypress()

Một phương thức ngắn gọn của on(), mục đích giống như onload(), onunload(), onresize(), onscroll(), onsubmit(), onchange(), onselect(), onclick(), ondblclick(), onkeydown(), onkeyup(), onkeypress() của DOM. Cần phải nói thêm về sự khác nhau giữa keydown/keyup với keypress là keydown/keyup thực hiện gán hành động cho sự kiện với các phím(key) trên bàn phím lúc này chúng ta có keycode còn keypress cũng gán hành động cho sự kiện với các phím nhưng lúc này là charcode nghĩa là ký tự được nhập vào nên nó sẽ không làm việc với các phím không nhập ký tự như shift, alt hay ctrl..., ví dụ phím "a" có keycode là 65 còn charcode là 97

hover() / mouseenter(), mouseleave() / mouseover(), mouseout()

• hover( handlerIn, handlerOut )

Một phương thức ngắn gọn của on(). Đây đều là những sự kiện về mouse khi rê con trỏ lên và rời khỏi một phần tử nhưng sự khác nhau là mouseover() và mouseout() ảnh hưởng lên cả phần tử con của nó còn 2 cái kia thì chỉ chính nó. Những sự kiện này cũng tương tự như các sự kiện onmouseenter(), onmouseleave(), onmouseover(), onmouseout() của DOM. Sự kiện hover() là phương thức gọn để thực hiện 2 sự kiện là mouseenter() và mouseleave(), các phương thức sự kiện khác như mousemove(), mouseup(), mousedown() thì mục đích cũng tương tự như các sự kiện của DOM

error()

Dùng để thực hiện một hành động nào đó khi hình ảnh hoặc một phần tử nào đó tải không đúng, hiện phương thức này đã được phản đối từ phiên bản 1.8, phương thức này cũng gần tương tự như onerror() của DOM

jQuery là một framework mạnh mà bạn nào làm thiết kế website cũng nên tìm hiểu. Sau đây xin giới thiệu với các bạn 10 hướng dẫn làm form kiểm tra thông tin rất hay và đẹp với jQuery.

Các bạn click vào hình mô tả để đến với bài viết hướng dẫn nhé   Khác...

Để tạo thêm một rule trong jQuery Validation plugin, ta làm từng bước như sau:
(Ví dụ sau xây dựng rule kiểm tra tag html)
Xây dựng hàm kiểm tra dữ liệu, hàm nhận vào hai đối số và trả về giá trị bool.

function validateScript(value, element){

        var reg = new RegExp("[]+\s*?[>]");
        if( reg.test(value) ){
            //The input data contains words or phrases which are not allowed.;
            return false;
       }
       return true;
}

Đặt tên (rule name) cho hàm, tên này sẽ được sử dụng khi user gọi validate, tham số thứ 3 là thông báo lỗi khi hàm kiểm tra dữ liệu bên trên trả về giá trị false.

jQuery.validator.addMethod("scriptbadword", validateScriptOrBadWord, "The data contains invalid words.");

Gọi hàm thực thi

jQuery(function (){
       jQuery.noConflict();
       jQuery('#formid').validate({
            rules : {
                ContactName : "required scriptbadword",
                LastName : "required scriptbadword"
            }
       });
});