Học jquery từ cơ bản đến nâng cao p5 Selecting Elements

Jquery selector
Hầu hết các khái niệm trong jquery là “chọn thành phần (elements) nào đó và làm gì với nó.” jQuery hỗ trợ hầu hết CSS3 selectors.

Chọn một thành phần (Elements) qua ID
$( “#myId” );

Chọn một thành phần (Elements) qua CLASS
$( “.myClass” );

Chọn một thành phần (Elements) qua Attribute
$( “input[name='first_name']“ );

Chọn một thành phần (Elements) qua Compound CSS
$( “#contents ul.people li” );

Chọn một thành phần (Elements) qua Pseudo-Selectors
$( "a.external:first" );
$( "tr: odd" );
$( "#myForm :input" );
$( "divisible" );
$( "div:gt(2)" );
$( "div:animated" );
Chú ý: khi sử dụng isible và :hidden pseudo-selectors, Jquery kiểm tra xem thành phần đó có thực sự visibility hay không nó chính là thuộc tính CSS visibility hoặc display . Jquery sẽ tìm kiếm xem độ rộng và độ cao của thành phần trong trang có lớn hơn 0 hày không?.

Mặc dù vậy thì, thì jquery lại không kiếm tra được thẻ <tr> . Trong trường hợp này <tr> Jquery chekc thuộc tính display , và kiểm tra xem thuộc tính display có phải là none hay không?

Chọn Selectors
Chọn selectors là cách để bạn cải thiện hiệu xuất xử lý của javascript. Như ví dụ sau một bộ chọn #myTable thead tr th.special là không cần thiết trong khi chỉ cần bộ chọn #myTable th.special là sẽ đạt được mục đích của bạn rồi.

Lưu ý khi chọn thành phần
Các thẻ như div hay p hay ul li sẽ là những thẻ chứa những thẻ con trong nó vì thế hãy lưu ý khi làm việc với những thẻ này.

ví dụ dưới đây là một lỗi trong việc sử dụng của các bạn:

// Doesn't work!
if ( $( "div.foo" ) ) {
...
}
Nó sẽ không làm việc đúng theo ý bạn muốn. Khi một selector được sử dụng trong $(), nó sẽ trả về một object (đối tượng), và đối tượng (object) luôn nhận giá trị là true. Vậy việc mà bạn kiểm tra xem câu lệnh chọn của bạn vừa rồi dù không có thành phần nào thoả mãn thì câu lệnh vẫn thực hiện vì nó vẫn trả về một đối tượng mang giá trị true.

Vậy cách tốt nhất ở đây để kiếm tra xem có những thành phần nào phù hợp với bộ chọn là hãy dùng thuộc tính .length , nó sẽ giúp bạn có bao nhiêu thành phần được chọn như ví dụ dưới đây:

if ( $( "div.foo" ).length ) {
...
}
Lưu thành phần được chọn
Jquery sẽ không tự động cache thành phần được chọn cho bạn vì thế để có thể sử dụng nó nhiều lần mà không phải viết đi viết lại câu lệnh để chọn thì hãy lưu nó vào một biến.

var divs = $( “div” );

Bạn có thể gọi các phương thức jquery thông qua biến như lúc ban đầu không có gì thay đổi.

Lọc tiếp thành phần được chọn
Một số thành phần (thẻ) được chọn có chứa thêm các thẻ con khác. Jquery có thêm những phương thức giúp chúng ta lọc sâu hơn thành phần được chọn.

$( “div.foo” ).has( “p” );
$( "h1" ).not( ".bar" );
$( "ul li" ).filter( ".current" );
$( "ul li" ).first();
$( "ul li" ).eq( 5 );
Chọn thành phần form
jQuery cung cấp cho chúng ta pseudo-selectors giúp bạn có thể tìm các thành phần trong form. Nhìn thì có vẻ nó hơi đặc biệt nhưng nó lại rất tốt cho việc phân biệt các thành phần trên form và các thành phần khác trên trang.

:checked

$( “form :checked” );

:checked là pseudo-selector làm việc khi sử dụng nó với checkboxes, radio buttons và selects.

: Disabled

Sử dụng : Disabled pseudo-selector với mọi thẻ <input> có thuộc tính disabled :

$( “form : Disabled” );

:enabled là pseudo-selector nó là ngược lại của disabled

$( “form :enabled” );

:input

Sử dụng :input để chọn tất cả thành phần <input>, <textarea>, <select>, và <button>

$( “form :input” );

: selected

Sử dụng : selected như là pseudo-selector chọn những thành phần có thuộc tính selected trong <option>:

$( “form : selected” );

Chọn theo loại
Jquery cung cấp thêm pseudo-selector cho phép chúng ta lựa chọn theo từng loại trong form.

: password
:reset
:radio
:text
: submit
:checkbox
:button
:image
:file

Tham khảo thêm tại: vnfit.com/hoc-jquery-tu-co-ban-den-nang-cao-p5-selecting-elements/