2009-02-17 11 views
12

No estoy seguro de cuándo puedo usar las propiedades DOM y cuándo puedo usar los métodos Jquery en un objeto Jquery. Por ejemplo, utilizo un selectorMétodos de JQuery y propiedades DOM

var $elemSel = $('#myDiv').find('[id *= \'select\']') 

En este punto, $ elemSel es un objeto jQuery que entiendo que ser una envoltura alrededor de la matriz de elementos DOM. Pude obtener una referencia a los elementos DOM iterando a través del objeto/matriz $ elemSel (¿Correcto?)

1. ¿Hay alguna manera de convertir este $ elemSel en una matriz regular no JQuery de elementos DOM? ? 2. ¿Puedo combinar propiedades DOM y métodos jQuery al mismo tiempo (algo así)

$elemSel.children('td').nodeName 

(nombreNodo está relacionada DOM, los niños se relaciona jQuery)

EDIT: ¿Qué pasa con esto?

$elemSel.get(0).is(':checked') 

EDIT 2:

Gracias por las respuestas. Ahora entiendo que puedo usar get (0) para obtener un elemento DOM. Preguntas adicionales:

  1. ¿Cómo convertiría un elemento DOM a un objeto JQuery?

  2. Si asigno "this" a una variable, ¿esa es la nueva var DOM o JQuery? Si es JQuery, ¿cómo puedo convertir esto a un elemento DOM? (Como no puedo usar get (0))

    var $ elemTd = $ (this);

  3. Cuando hago una tarea como la de arriba, he visto algunas muestras de código que no incluyen el signo $ para el nombre de la variable. ¿Por qué?

  4. Y en cuanto a mi pregunta original, ¿puedo combinar las propiedades DOM y las funciones JQuery al mismo tiempo en un objeto JQuery?

    $ elemSel.children ('td'). NombreNodo

Respuesta

24

Tendrá que .get (0) el resultado para obtener el objeto DOM-listo.

var myBox = $("div#myBox"); 
alert(myBox.get(0).id); // "myBox" 

Lea "Peeling Away the jQuery Wrapper and Finding an Array" por Cody Lindley


Re: Editar:.is() no es un javascript método nativo. Cuando ejecuta .get(0), ya no está trabajando fuera del objeto jQuery, por lo tanto, no puede esperar ejecutar métodos jQuery desde él.

Si desea ejecutar .is() en un resultado específico, utilice el :eq(index) selector, o la .eq(index) method:

$("div:eq(1)").is(":checked"); // gets second div 
$("div").eq(1).is(":checked"); // gets second div 

Re: Edición # 2

Bob, que realmente debería crear nuevas preguntas , en lugar de preguntar más y más aquí.

la conversión de un elemento DOM a objeto jquery se hace pasando en un selector:

var myBox = document.createElement("div"); 
var myBoxJQ = $(myBox); 

Assinging This a una variable. Depende de cuando lo haces. Si con "this" te refieres a un objeto jQuery, entonces this será un objeto jQuery. Puede convertirlo siguiendo this con .get(0).

Cuando this hace referencia a un objeto jQuery, no necesita envolverlo en $(). Esto es redundante.

Y, por último, $elemSel.children('td').nodeName se puede hacer así: $elemSel.children('td')[0].nodeName o $elemSel.children('td').get(0).nodeName, donde el 0 es el índice de qué elemento de acceso.

+0

Gracias por la explicación. Entonces, si quiero trabajar con los elementos individuales del objeto Jquery y quiero ejecutar métodos Jquery en ellos, ¿tengo que usar "cada uno"? ¿Hay alguna otra manera? –

+0

El objeto jQuery es una matriz. Entonces puede tratar cada instancia de un objeto jQuery como una matriz. Acceda al primer elemento de esa matriz para ejecutar sus métodos nativos de JavaScript en él. – Sampson

+0

puedo solicitarle que eche un vistazo a una pregunta de jquery sobre un tema diferente aquí: http://stackoverflow.com/questions/13137404/jquery-find-div-class-name-at-a-certain-position-while -scrollar? –

1

Dado que puede haber más de una coincidencia en los selectores de jQuery, debe obtener los elementos de la "matriz".

Puede utilizar el método get para devolver un solo elemento DOM o una matriz o elementos DOM.

por ejemplo:

var elims = $("div").get(); 
for(var i in elims) 
    alert(elims[i].nodeName); 

Editar:

$elemSel.get(0).is(':checked') no funcionará debido a que está recibiendo el objeto DOM y luego tratar de utilizar las funciones de jQuery en él. Si desea obtener un solo elemento jQuery, use eq.

$elemSel.eq(0).is(':checked'); 
0

Con el fin de llamar al método DOM nativa puede utilizar conseguir (índice). O si desea utilizar el método de Objeto jQuery, debe envolver un elemento DOM nativo con jQuery, que convertirá el elemento DOM en un Objeto jQuery, por lo que todos los métodos estarán disponibles. http://www.linxinshan.com/?p=339

Cuestiones relacionadas