Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi vnfit.com, 27/2/15.

?

Bài viết có hữu ích với bạn

  1. Rất tốt với tôi

  2. Được

  3. Tạm được

Được phép chọn nhiều kết quả khi vote.
Kết quả chỉ hiện ra sau khi bạn ấn bình chọn.

Lượt xem: 3,698

  1. vnfit.com Banned

    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" );
    $( "div:visible" );
    $( "div:gt(2)" );
    $( "div:animated" );
    Chú ý: khi sử dụng :visible 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/

    ...
    Phạm Hữu Dư thích bài viết này
Từ khóa:

Ủng hộ diễn đàn