Tìm kiếm và loại bỏ element.

jQuery cung cấp các công cụ mạnh mẽ cho việc tìm kiếm các element, và sau đó làm việc với những element này để đạt được kết quả mong muốn.

Trong phần này, chúng ta cùng nhìn lại một số (nhưng không phải tất cả) các methods traversal và manipulal. Trước khi làm điều đó hãy xem xét một chút về HTML:

<ul>
    <li>
        <span>
            <i>Foo</i>
        </span>
    </li>
    <li>Bar</li>
</ul>

Traversal

jQuery cho phép chúng ta "traverse" - hoặc di chuyển qua - các HTML elements trên trang của chúng ta. Đầu tiên, chúng ta tạo một selection khởi đầu, sau đó traverse các DOM có liên quan đến selection đó. Khi traverse DOM, chúng ta đang thay đổi selection ban đầu của mình, trong một số trường hợp, chúng ta thay thế selection ban đầu với một selection mới, trong khi ở các trường hợp khác, chúng ta thêm hoặc bớt từ selection ban đầu.

Filtering selections

Bạn có thể lọc một selection hiện tại chỉ để include các elements phù hợp với một tiêu chí nhất định. Ví dụ, bạn có thể lọc một selection bằng những cách sau:

  var listItems = $( 'li' );

  // Lọc những element có class là special
  var special = listItems.filter( '.special' );

  // Lọc những element không có class special
  var notSpecial = listItems.not( '.special' );

  // Lọc những element có chứa thẻ span
  var hasSpans = listItems.has( 'span' );

Điều quan trọng bạn cần lưu ý rằng .not() không phải là tương phản của .is(). Method .is ()trả về một boolean, trong khi method .not() trả về một đối tượng jQuery mới.

Tìm các elements liên quan đến một selection

Một selection ban đầu có thể coi như là "home base" cho việc tạo các selections bổ sung; Ví dụ, bạn hiện có một selection chứa list item cá nhân, sau đó bạn cần làm việc với các siblings của nó hoặc các unordered list chứa item. Bạn có thể tạo một selection mới liên quan đến selection hiện tại một cách dễ dàng:

  // Lấy thẻ li đầu tiên trên trang
  var listItem = $( 'li' ).first(); // also: .last()

  // Lấy các thẻ cùng cấp với nó tính từ nó
  var siblings = listItem.siblings();

  // Lấy thằng tiếp theo sau nó
  var nextSibling = listItem.next(); // also: .prev()

  // Lấy thằng cha của nó
  var list = listItem.parent();

  // Lấy thằng con của nó
  var listItems = list.children();

  // Lấy tất cả các thẻ li con của nó
  var allListItems = list.find( 'li' );

  // Lấy tất cả các cấp trên của nó (ông, bà, tổ tiên...) mà có class là module
  var modules = listItem.parents( '.module' );

  // Lấy các cấp trên gần nhất có class module
  var module = listItem.closest( '.module' );

Bạn cũng có thể thêm vào selection hiện tại bằng cách sử dụng method .add(). Bạn cũng có thể truyền cho nó một selector, một mảng các elements, một chuỗi HTML hay một đối tượng jQuery.

  var list = $( '#my-unordered-list' );

  // do some stuff with the list, and then ...

  var listAndListItems = list.add( '#my-unordered-list li' );

Quay lại selection ban đầu

Khi sử dụng một trong các methods traversal để tìm các elements liên quan đến selection ban đầu, jQuery lưu trữ một tham chiếu tới selection ban đầu của bạn trong trường hợp bạn muốn sử dụng lại nó. Ví dụ, hãy xem xét trường hợp bạn chọn một unordered list, tạo một vài thay đổi với các list items, và muốn làm việc với unordered list. Bạn có thể sử dụng method .end() của jQuerry để quay lại làm việc với selection ban đầu của mình

  $( '#my-unordered-list' )
     .find('li')

     // now we're working with the list items
     .addClass('special')

     .end()

     // now we're back to working with the list
     .addClass('super-special');

Method end() làm cho việc thay đổi một câu lệnh đơn trở nên dễ dàng hơn rất nhiều. Bài tập này chỉ thực hiện đối với một phần code để làm nó rõ ràng hơn, mặc dù vậy nó giống như việc bạn xem JAV liên tục mà không có thời gian nghỉ ngơi. Vì lẽ đó, bạn nên sử dụng nó một cách tiết kiệm. Thường xuyên sử dụng, nó sẽ làm code của bạn khó đọc, duy trì và debug.

Một giải pháp tốt hơn có thể như sau

  var list = $( '#my-unordered-list' );
  var listItems = list.find('li');

  listItems.addClass( 'special' );
  list.addClass( 'super-special' );

jQuery cũng cung cấp method .addBack() nếu bạn muốn thêm selection ban đầu của mình vào selection hiện tại. Ví dụ:

  $( 'li.special' )

    .siblings()

      // now we're working with the siblings of the original selection
      .removeClass( 'important' )

    .addBack()

    // now we're working with the original li's AND their siblings
    .addClass( 'urgent' );

Cũng giống như method end() có thể dẫn đến khó khăn khi làm việc với code, method .addBack() - đôi lúc hữu ích - có thể làm cho code trở nên phức tạp. Một giải pháp tốt hơn là sử dụng method .add() để kết hợp hai selection ban đầu thay vì:

  var specialListItems = $( 'li.special' );
  var otherListItems = specialListItems.siblings();

  otherListItems.removeClass( 'important' );
  specialListItems.add( otherListItems ).addClass( 'urgent' );

Có một số methods traversal chúng tôi không đề cập ở đây; bạn có thể tham khảo thêm về tất cả các methods traversal trong tài liệu traversing.

Manipulation

Các method manipulation của jQuery cho phép bạn thay đổi DOM bằng cách sử dụng cú pháp thân thiện hơn nhiều so với cái được cung cấp bởi các methods native DOM manipulation. Các methods manipulation trả về đối tượng jQuery ở nơi chúng được gọi, nghĩa là bạn có thể ghép chuỗi chúng hoặc kết hợp chúng với các methods jQuery khác giống như cách chúng ta đã thảo luận ở trên.

Thay đổi các elements

Có vô số cách để thay đổi các elements sử dụng jQuery. Ở đây, chúng ta sẽ xem xét một số cách thông dụng

Thêm và bỏ các classes

Thuộc tính class trên một element có thể được sử dụng để xác định các CSS rules, và nó cũng có thể trở thành một cách hữu ích để xác định các jQuerry selections. Ví dụ, một element có thể có class hidden, với CSS rule tương ứng mà làm cho các elements với class đó có display của chúng được thiết lập thành none. Sử dụng jQuery, chúng ta có thể thêm hay bỏ các classes làm ảnh hưởng đến việc hiển thị các elements

  $( 'li' ).addClass( 'hidden' );
  $( 'li' ).eq( 1 ).removeClass( 'hidden' );

Nếu bạn muốn thêm hay bỏ một class một cách liên tục, jQuery cung cấp các methods .toggleClass(). Code sau thêm class hidden nếu không có nó và bỏ đi nếu nó có mặt.

$( 'li' ).eq( 1 ).toggleClass( 'hidden' );

Thay đổi style

Bất cứ khi nào, bạn nên sử dụng các classes được kết hợp với các CSS rules có ảnh hưởng đến sự trình bày của các elements, và sử dụng jQuery chỉ để thêm hay bỏ các classes như trên. Trong phần này, chúng ta sẽ xem cách thay đổi style của một element một cách trực tiếp, nhưng CSS rules được kết hợp với các classes luôn được ưa dùng hơn nếu chúng có thể đạt được hiệu quả mong muốn.

Khi bạn không thể thực hiện được mục tiêu của mình qua việc thêm và bỏ các classes, jQuery cung cấp method .css() cho phép bạn thiết lập style của các elements một cách trực tiếp. Nó thường được yêu cầu khi bạn muốn thiết lập các giá trị tại thời điểm hiện tại - ví dụ, thông tin về vị trí. Method .css() không nên sử dụng để thiết lập các styles đơn giản, chẳng hạn như display:none - trong hầu hết các trường hợp, sẽ thích hợp hơn nếu sử dụng thông qua các classes và CSS.

Ví dụ, hãy xem xét trường hợp bạn muốn style cho một element dựa vào độ rộng parent element của nó; có thể sẽ khó khăn để biết độ rộng của parent element trong một layout linh hoạt. Trong trường hợp này, chúng ta có thể nhờ đến method .css() để styling.

  var list = $( '#my-unordered-list' );
  var width = Math.floor( list.width() * 0.1 );

  list.find('li').each(function( index, elem ) {
    var padding = width * index;
    $( elem ).css( 'padding-left', padding + 'px' );
  });

Nếu bạn cần thiết lập nhiều thuộc tính cùng một lúc, bạn có thể truyền một đối tượng vào method .css(). Lưu ý rằng bạn sẽ cần viết các thuộc tính có dấu gạch ngang trong dấu ngoặc đơn hoặc ngoặc kép.

  $( 'li' ).eq( 1 ).css({
    'font-size': '20px',
    'padding-left': '20px'
  });

Thay đổi các form values

jQuery cung cấp method val() để thay đổi giá trị của các form elements như select hay input

Đối với các elements text input, bạn có thể thiết lập nội dung của chúng bằng cách truyền một chuỗi vào method .val():

$( 'input[type="text"]' ).val( 'new value' );

Đối với element select, bạn có thể thiết lập việc lựa chọn các option sử dụng .val()

$( 'select' ).val( '2' );

Đối với các elements checkbox input, bạn cần thiết lập thuộc tính checked trên element sử dụng method .prop()

$( 'input[type="checkbox"]' ).prop( 'checked', 'checked' );

Method .prop() đã được giới thiệu trong jQuery 1.6; các phiên bản trước của jQuery sử dụng method .attr() cho mục đích này. Nó vẫn hoạt động trong các phiên bản sau này của jQuery, nhưng trong trường hợp của thuộc tính checked, nó chỉ gọi method .prop(). Nếu bạn đang sử dụng phiên bản jQuery 1.6 trở xuống, bạn nên sử dụng method .prop() để thiết lập thuộc tính checked và các thuộc tính DOM elements khác.

Thay đổi các thuộc tính khác

Bạn có thể sử dụng method .attr() của jQuery để thay đổi các thuộc tính khác của các elements. Ví dụ, bạn có thể sử dụng nó để thiết lập thuộc tính title mới cho một link:

$( 'a' ).attr( 'title', 'Click me!' );

Khi thiết lập một thuộc tính, bạn có thể truyền vào một function như là đối số thứ hai. Cũng giống như các methods setter khác, function này nhận hai đối số: chỉ số của element nó đang hoạt động, và giá trị ban đầu của thuộc tính. Function này sẽ trả về giá trị mới cho thuộc tính

  $( 'a' ).attr( 'href', function(index, value) {
    return value + '?special=true';
  });

Bạn cũng có thể bỏ hoàn toàn các thuộc tính bằng cách sử dụng .removeAttr()

Lấy thông tin từ các elements

Trong bài trưóc, chúng ta đã thảo luận về khái niệm "setter" và "getter". Tất cả các methods được sử dụng để thay đổi các elements cũng có thể được sử dụng để lấy thông tin từ các elements đó. Ví dụ, method .val() có thể được sử dụng cho cả setter và getter

  var input = $( 'input[type="text"]' );
  input.val( 'new value' );
  input.val(); // returns 'new value'

Tương tự như vậy, method .css() có thể được sử dụng để lấy giá trị của các thuộc tính CSS riêng chỉ bằng cách truyền vào thuộc tính tên, không cần giá trị

var listItemColor = $( 'li' ).css( 'color' );

Khi các methods manipulation được sử dụng như getters, method chỉ hoạt động trên element đầu tiên trong selection, với một ngoại lệ đáng chú ý: method .text(). Trong trường hợp của method .text(), text của tất cả các elements được chọn sẽ được trả về nếu không có đối số nào được truyền cho method

Đặt các elements trong document

Cho dù bạn chọn một element hoặc tạo một element mới, bạn có thể lấy selection của mình và đặt nó vào document. Thông thường có hai cách để làm điều này: gọi một method trên (các) element bạn muốn đặt, hoặc gọi một method trên element liên quan nơi mà bạn muốn đặt nó.

Ví dụ, hãy xem xét trường hợp bạn muốn chuyển list item đầu tiên đưa đến cuối list. Có một số cách để làm được điều này.

Bạn có thể gắn thêm item vào list bằng cách gọi .appendTo() trên list item

  var listItem = $( '#my-unordered-list li' ).first();
  listItem.appendTo( '#my-unordered-list' );

Bạn có thể gắn thêm item vào list bằng cách gọi .append() trên list

  var listItem = $( '#my-unordered-list li' ).first();
  $( '#my-unordered-list' ).append( listItem );

Bạn có thể thêm một list item vào sau list item cuối cùng bằng cách gọi .insertAfter() trên list item bạn muốn di chuyển

  var listItems = $( '#my-unordered-list li' );
  listItems.first().insertAfter( listItems.last() );

Bạn cũng có thể thêm một list item vào sau list item cuối cùng bằng cách gọi .after() trên list item cuối cùng

  var listItems = $( '#my-unordered-list li' );
  listItems.last().after( listItems.first() );

Có rất nhiều methods khác cho việc đặt các elements - bạn có thể đặt chúng xung quanh, bên trong, bên ngoài các elements khác, tùy thuộc vào nhu cầu cụ thể của bạn.

Cách hiệu quả nhất để đặt một element phụ thuộc vào các elements mà bạn đã từng truy cập. Trong ví dụ trên, bạn có thể chọn việc gắn thêm list item vào unordered list nếu bạn đã chọn unordered list cho một số mục đích khác hoặc nếu bạn đã có một selection có chứa tất cả các list item, sau đó đặt list item đầu tiên liên quan đến list item cuối cùng có thể là con đường dễ dàng nhất.

Khi chọn cách đặt một element, bạn nên xem xét không chỉ là cách dễ dàng nhất mà còn phải là cách dễ bảo trì nhất.

Sao chép các elements

Bạn có thể tạo một bản copy của một element hoặc một tập hợp các elements sử dụng method .clone() của jQuery. Nó sẽ tạo một bản copy của các elements, nhưng lưu ý rằng bản copy chỉ nằm trong bộ nhớ - bạn cần phải đặt nó trong document của mình. Bạn có thể thao tác trên các bản copy đó trước khi đặt chúng vào document

  var clones = $( 'li' ).clone();

  clones.html(function( index, oldHtml ) {
    return oldHtml + '!!!';
  });

  $( '#my-unordered-list' ).append( clones );

Lưu ý: jQuery sẽ không cấm bạn tạo một bản copy của một element với một ID, nhưng nên đảm bảo rằng bạn thay đổi hoặc loại bỏ thuộc tính id của các bản copy của element trước khi chèn nó vào document vì một document không bao giờ có nhiều hơn một element có id giống nhau.

Loại bỏ các elements

Có ba cách để loại bỏ các elements khỏi document: .remove(), .detach() và .replaceWith(). Mỗi method phục vụ một mục đích cụ thể.

Method .remove() nên được sử dụng để loại bỏ các elements một cách vĩnh viễn, và nó cũng sẽ unbind bất cứ event handlers nào gắn với các elements được loại bỏ.

Method .remove() trả về một tham chiếu cho các elements bị loại bỏ, nhưng nếu bạn re-add các elements đó, sẽ không còn event nào liên kết với chúng nữa.

  $( '#my-unordered-list li' ).click(function() {
    alert( $( this ).text() );
  });

  var removedListItem = $( '#my-unordered-list li' ).first().remove();

  removedListItem.appendTo( '#my-unordered-list' );
  removedListItem.trigger( 'click' ); // no alert!

Method .detach() hữu ích cho việc loại bỏ tạm thời các elements; Ví dụ, nếu bạn muốn thực hiện nhiều sự thay đổi trong cấu trúc của trang sử dụng jQuery, hiệu quả sẽ cao hơn khi bạn sử dụng .detach() để loại bỏ các elements bị ảnh hưởng, thực hiện những thay đổi của bạn, sau đó re-attach element sử dụng một trong các methods trên. Các elements bị loại bỏ bằng .detach() sẽ giữ lại event handlers của chúng; bạn có thể re-add chúng vào document với .appendTo() hoặc một method nào khác.

  $( '#my-unordered-list li' ).click(function() {
    alert( $( this ).text() );
  });

  var detachedListItem = $( '#my-unordered-list li' ).first().detach();

  // do something complicated with the list item

  detachedListItem.appendTo( '#my-unordered-list' );
  detachedListItem.trigger( 'click' ); // alert!

Cuối cùng, method .replaceWith() thay thế một hoặc nhiều elements với các element hoặc HTML được truyền vào một đối số cho .replaceWith(). Các elements bị thay thế được trả về, nhưng cũng giống như với .remove(), tất cả các event handlers bị unbound khỏi các elements đó

  $( '#my-unordered-list li' ).click(function() {
    alert( $( this ).text() );
  });

  var replacedListItem = $( '#my-unordered-list li' ).first()
    .replaceWith( '<li>new!</li>' );

  replacedListItem.appendTo( '#my-unordered-list' );

  replacedListItem.trigger( 'click' ); // no alert!

Kết luận

Trong phần này, chúng ta đã xem xét những cách khác nhau để traversing một document, di chuyển, đặt các elements mới trong document và thực hiện các thay đổi trên element đó. Trong phần tiếp theo, chúng ta sẽ tìm hiểu cách để listen các event khi user tương tác trên trang của chúng ta

Editor: Justin Luong

Translator: Trần Tuấn Dũng

Sưu tầm từ: http://fsd14.com/post/81-jquery-co-ban-phan-2-tim-kiem-va-loai-bo-element