Cú pháp kỳ lạ JQuery

Question

Tôi mới sử dụng JQuery và cố gắng sử dụng nó để tự động xây dựng HTML dựa trên kết quả truy vấn đối tượng JSON. Anyways trên trang web API JQuery (http://api.jquery.com/jQuery.getJSON/) Tôi tìm thấy ví dụ này, nơi tôi không hiểu cú pháp và tôi dường như không thể tìm thấy bất kỳ giải thích về lý do tại sao cú pháp này là hợp pháp hoặc cách sử dụng nó.

$.getJSON('ajax/test.json', function(data) { 
    var items = []; 

    $.each(data, function(key, val) { 
    items.push('<li id="' + key + '">' + val + '</li>'); 
    }); 

    // *** THIS IS THE PART THAT IS WEIRD *** 
    $('<ul/>', { 
    'class': 'my-new-list', 
    html: items.join('') 
    }).appendTo('body'); 
}); 

Ai đó có thể giới thiệu tôi đến tài liệu giải thích cú pháp với nhận xét ở trên nó?

Answer 1

Xem tài liệu jQuery here. Cụ thể phần tựa đề:

Tạo mới Elements

Phần này bao gồm chi tiết về việc sử dụng các jQuery(html, props) quá tải, bổ sung trong phiên bản 1.4. Đây là quá tải được sử dụng trong ví dụ của bạn. Phải mất một đối số chuỗi html được sử dụng để tạo phần tử DOM mới và sau đó thêm các thuộc tính có trong đối số đối tượng props.

Answer 2

$('<ul/>', { 
    'class': 'my-new-list', 
    html: items.join('') 
}).appendTo('body'); 

Điều này chỉ đơn giản là tạo thành phần UL mới với một lớp 'danh sách mới của tôi' và nội dung của các mục. Nó sẽ tạo ra một cấu trúc như:

<ul class='my-new-list'> 
<li id="key1">val1</li><li id="key2">val2</li><li id="key3">val3</li> 
</ul> 

Đây là tay chỉ đơn giản là viết tắt của:

$('<ul></ul>').attr('class', 'my-new-list').attr('html', items.join('')).appendTo('body'); 

Tài liệu: http://api.jquery.com/jQuery/#jQuery2

Answer 3

Điều đó có nghĩa bạn đang phụ thêm một yếu tố <ul> với lớp my-new-list đến thân hình. Các <li> mục bạn đã xây dựng trong mảng items này sau đó được bổ sung vào <ul>, vì vậy bạn sẽ kết thúc với một cái gì đó như:

<ul class="my-new-list"> 
    <li id="key1">val1</li><li id="key2">val2</li>... 
</ul> 

Answer 4

Kiểm tra các tài liệu cho jQuery ($). Cụ thể, nhìn vào phần đối phó với tình trạng quá tải jQuery(html, props):

html: Một chuỗi xác định một duy nhất, độc lập, phần tử HTML (ví dụ hay).

đạo cụ: Bản đồ thuộc tính, sự kiện và phương thức để gọi trên phần tử mới được tạo.

Tiếp tục xuống có thêm thông tin:

Tính đến jQuery 1.4, đối số thứ hai để jQuery() có thể chấp nhận một bản đồ bao gồm một superset của các thuộc tính có thể được truyền cho .attr() phương pháp. Hơn nữa, bất kỳ loại sự kiện nào cũng có thể được chuyển vào và các phương thức jQuery sau đây có thể được gọi là: val, css, html, văn bản, dữ liệu, chiều rộng, chiều cao hoặc độ lệch. Tên "lớp" phải được trích dẫn trong bản đồ vì đây là từ dành riêng cho JavaScript và "className" không thể được sử dụng vì đó không phải là tên thuộc tính chính xác.

Answer 5

$('<ul/>', { 
    'class': 'my-new-list', 
    html: items.join('') 
    }).appendTo('body'); 

Trong jQuery, bên cạnh việc tìm kiếm phần tử DOM, bạn cũng có thể tạo ra chúng.

$('<ul/>') // or $('<ul></ul>') 

Điều này tạo thành một phần tử mới <ul> và trả về nó làm đối tượng jQuery.

Đối tượng được truyền khi thông số thứ 2 đặt thuộc tính của nó.Do đó, hãy thực hiện việc này:

<ul class="my-new-list"><li id="one">O Hai</li></ul> 

này sau đó được nối thêm body.

Answer 6

Phần bạn không hiểu là cách sử dụng hoàn toàn chức năng $. Trong hầu hết các trường hợp, bạn sử dụng hàm $ làm công cụ chọn trả về một tập các phần tử jquery (các nút dom được bao bọc như các đối tượng jquery) mà bạn có thể thực hiện một số thao tác trên. Trong trường hợp này, bạn thay vì sử dụng hàm $ để tạo các nút DOM (trên thực tế, các đối tượng jquery) và sau đó là các đối tượng mà bạn có thể thực hiện các hàm, chẳng hạn như appendTo trong ví dụ được hiển thị.

Đó là khá nhiều equavalent để viết một cái gì đó giống như

var node = document.createElement("ul"); 
node.setAttribute("class", "my-new-list"); 
node.innerHTML = items.join(''); 

document.body.appendChild(node); 

Answer 7

$('<ul/>') 

Tạo ra một UL yếu tố mới không gắn liền với DOM

$('<ul/>', {'class':'my-new-list'}) 

Sets Dom biến cho các phần tử rằng việc sử dụng một giá trị quan trọng đôi. Vì vậy, bây giờ bạn có một phần tử UL với một lớp danh sách mới của tôi.

$('<ul/>', {'class':'my-new-list', 'html': items.join('')}) 

này đang tiến hành các mảng LI yếu tố tạo ở trên tham gia các yếu tố với nhau trong một chuỗi (không có dấu phân cách trong trường hợp này, .join('-') sẽ đặt một gạch nối giữa mỗi phần tử LI) và gán cho html bên trong của số UL.

$('<ul/>', {'class':'my-new-list', 'html': items.join('')}).appendTo('body'); 

Cuối cùng nhưng không kém, nó gắn thêm mới được tạo ra UL phần tử với đứa trẻ này LI yếu tố để các yếu tố BODY làm cho nó hiển thị trên trang.