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 cơ bản nâng cao p8 Jquery object

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

Lượt xem: 3,359

  1. vnfit.com Banned

    Trong bài trước các bạn đã cùng mình tìm hiểu “Thao tác các thành phần” phần tiếp theo này là một phần quan trọng chúng ta sẽ cùng nhau tìm hiểu về đối tượng trọng jquery hay “object jquery”.

    jQuery Object
    Khi bạn tạo các thành phần (elements) mới (Hoặc chọn nó có sẵn), jQuery trả về các thành phần (elements) trong một tập hợp. Nhiều người chưa có kinh nghiệm cho rằng mặc định jquery sẽ trả về một tập hợp trong một mảng. Thực sự thì là jQuery object và nó khá là phức tạp.

    Hiểu về DOM và DOM Elements
    DOM (Document Object Model) thực chất nó chính là HTML document. Nó có thể chứa nhiều DOM elements khác nhau. Sâu hơn bạn có thể hiểu là DOM element có thể chỉ là một phần của trang web. Nó có thể chứa text hoặc một DOM elements khác. DOM elements có thể là <div>, <a>, hoặc <p>, cũng có thể là src, href, class và hơn thế nữa. Bạn có thể tham khảo thêm tại đây: the official DOM specification from the W3C.

    Sâu hơn về jQuery Object
    jQuery object định nghĩa nhiều phương thức giúp bạn có thể thao tác dễ dàng trên DOM và tương thích với mọi trình duyệt và phiên bản khác nhau. Một vài thuận lợi nêu ra dưới đây của jQuery Object:

    Tương thích – Khả năng tương thích của jquery có thể làm việc tốt trên mọi trình duyệt và phiên bản khác nhau. Ví dụ dưới đây chúng ta sẽ thêm <tr> vào trong thành phần target ví dụ này sẽ cho chúng ta thấy điểm thuận lợi này:

    var target = document.getElementById( "target" );

    target.innerHTML = "<td>Hello <b>World</b>!</td>";
    Mã javascript bên trên làm việc trong khá ổn, nhưng nó sẽ lỗi khi gặp phiên bản thấp của IE. Trong trường hợp này, chúng ta sẽ giải quyết nó bằng cách bao quanh target trong một jQuery object và nó sẽ chạy ngon lành trên cả phiên bản thấp của IE:
    // Setting the inner HTML with jQuery.

    // Setting the inner HTML with jQuery.

    var target = document.getElementById( "target" );

    $( target ).html( "<td>Hello <b>World</b>!</td>" );
    Tính tiện lợi – Hãy cùng xem ví dụ dưới đây để thấy được tính tiện lợi của jquery object:

    // Inserting a new element after another with the native DOM API.

    var target = document.getElementById( "target" );

    var newElement = document.createElement( "div" );

    target.parentNode.insertBefore( newElement, target.nextSibling );

    với đoạn mã dưới đây dùng jquery object nhìn sẽ đơn giản hơn:
    // Inserting a new element after another with jQuery.

    var target = document.getElementById( "target" );

    var newElement = document.createElement( "div" );

    $( target ).after( newElement );
    Getting thành phần trong jQuery Object
    Khi sử dụng phương thức jquery lựa chọn thành phần nó sẽ trả về một đối tượng ( object) jQuery gồm tất cả các thành phần phù hợp với câu lệnh lựa chọn đó. Cùng xem ví dụ dưới đây:

    // Selecting all <h1> tags.

    var headings = $( "h1" );
    headings bây giờ là một jQuery object chứa tất cả các thẻ <h1> trong trang web. Bạn có thể kiểm tra điều này bằng cách sử dụng thuộc tính .length của headings để kiểm tra:
    // Viewing the number of <h1> tags on the page.

    var headings = $( "h1" );

    alert( headings.length );
    Nếu trong trang của bạn có nhiều hơn một thẻ <h1> , thì giá trị trả về sẽ lớn hơn 1. Nếu trang của bạn không tồn tại thẻ <h1> nào, thì thuộc tính .length sẽ có giá trị là 0. Sử dụng thuộc tính .length là cách thường dùng để kiểm tra xem có tồn tại các thẻ phù hợp với câu lệnh lựa chọn hay không.

    Nếu bạn chỉ muốn chọn thẻ H1 đầu tiên của trang web. Dưới đây là một cách khá là đơn giản để bạn thực hiện đều đó bằng cách sử dụng.eq() function:
    // Selecting only the first <h1> element on the page (in a jQuery object)

    var headings = $( "h1" );

    var firstHeading = headings.eq( 0 );
    Hoặc bạn có thể dùng cách sau:
    // Selecting only the first <h1> element on the page.

    var firstHeadingElem = $( "h1" ).get( 0 );
    jquery object cũng tương tự như một mảng nên bạn có thể dùng kiểu như mảng để lấy thành phần đầu tiên như ví dụ dưới đây:
    // Selecting only the first <h1> element on the page (alternate approach).

    var firstHeadingElem = $( "h1" )[ 0 ];

    Có lẽ bài viết trên cũng chưa hết về jquery object nhưng cũng phần nào giúp các bạn hiểu về nó. Chân thành cảm ơn nếu thấy hay thì chia sẻ nó đến nhiều bạn khác nhé.
    Nguồn: http://vnfit.com/hoc-jquery-co-ban-nang-cao-p8-jquery-object/

    ...
    Phạm Hữu Dư thích bài viết này

Ủng hộ diễn đàn