JQuery weird syntax

Question

Soy nuevo en JQuery y trato de usarlo para construir HTML de forma dinámica en función de los resultados de una consulta para objetos JSON. De todos modos en el sitio de la API de JQuery (http://api.jquery.com/jQuery.getJSON/) Encontré este ejemplo en el que no entiendo la sintaxis y no puedo encontrar ninguna explicación de por qué esta sintaxis es legal o cómo usarlo

$.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'); 
}); 

¿Alguien me puede remitir a la documentación que explica la sintaxis con el comentario anterior?

Answer 1

Consulte la documentación jQuery here. En concreto, la sección titulada:

Creación de nuevos elementos

Esta sección contiene detalles sobre el uso de la sobrecarga jQuery(html, props), añadió en la versión 1.4. Esta es la sobrecarga utilizada en su ejemplo. Se necesita un argumento de cadena html que se utiliza para crear un nuevo elemento DOM y luego agrega los atributos contenidos en el argumento del objeto props.

Answer 2

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

Esto simplemente crea un nuevo elemento UL con una clase de 'mi-nueva-lista' y el contenido de los elementos. Se va a crear una estructura como:

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

Esto es simplemente corta la mano para:

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

Documentación: http://api.jquery.com/jQuery/#jQuery2

Answer 3

Eso significa que estás añadiendo un elemento <ul> con la clase a la my-new-list cuerpo. Los <li> artículos que has construido en la matriz items se añaden a la <ul>, por lo que va a terminar con algo como:

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

Answer 4

Mira la documentación de jQuery ($). Específicamente, mira la parte referente a la sobrecarga jQuery(html, props):

html: Una cadena que define una sola, independiente, elemento HTML (por ejemplo, o).

accesorios: Un mapa de atributos, eventos y métodos para llamar al elemento recién creado.

Más abajo hay más información:

Como de jQuery 1.4, el segundo argumento de jQuery() puede aceptar un mapa que consiste en un superconjunto de las propiedades que se pueden pasar a la método .attr() Además, se puede pasar cualquier tipo de evento y se puede llamar al siguiendo los métodos jQuery: val, css, html, texto, datos, ancho, alto o desplazamiento. El nombre "clase" debe citarse en el mapa ya que es una palabra reservada de JavaScript, y "className" no se puede usar ya que no es el nombre de atributo correcto.

Answer 5

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

En jQuery, además de la búsqueda de elementos DOM, también puede crearlas.

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

Esto hace un nuevo <ul> elementos y lo devuelve como un objeto jQuery.

El objeto pasado como el segundo parámetro establece sus atributos.Por lo tanto hacer esto:

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

Este <ul> está entonces adjunta al body.

Answer 6

La parte que no comprende es un uso completamente diferente de la función $. En la mayoría de los casos utiliza $ function como selector que devuelve un conjunto de elementos jquery (nodos dom envueltos como objetos jquery) sobre los que puede realizar algún tipo de operación.

En este caso, en su lugar está utilizando la función $ para construir nodos DOM (en realidad, objetos jquery) y luego esos objetos sobre los que puede realizar funciones, como appendTo en el ejemplo mostrado.

es prácticamente equavalent a escribir algo así como

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

document.body.appendChild(node); 

Answer 7

$('<ul/>') 

crea un nuevo UL elemento no unido a la DOM

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

Conjuntos DOM variables para ese elemento utilizando un valor de clave par. Entonces ahora tiene un elemento UL con una clase de mi-nueva-lista.

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

Esto está tomando la matriz de LI elementos creados por encima de unir los elementos juntos en una cadena (sin delimitador en este caso, .join('-') habría puesto un guión entre cada elemento LI) y asignar a la html interior de el UL.

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

Por último, pero no menos importante, se añade la UL elemento recién creado con este niño LI elementos al elemento BODY por lo que es visible en la página.