¿cuál es la diferencia entre los selectores jquery y js selectores?

Question

Pregunta simple para un novato. ¿Hay alguna diferencia entre estas variables?

var object1 = document.getElementById('myElement'); 
var object2 = $('#myElement'); 

Además, ¿puedo ejecutar normal js stuff en object2? Por ejemplo, si se #myElement un <textarea> puedo hacer:

object2.value = "fill in with this text"; 

o, debo hacer:

$(object2).val('fill in with this text'); 

O, hay todavía una mejor manera?

Answer 1

var object1 = document.getElementById('myElement'); 

Obtiene un objeto elemento DOM de esta llamada. Por lo tanto, utiliza la propiedad value para darle un valor.

object1.value = "text"; 

---

var object2 = $('#myElement'); 

Usted recibe un objeto jQuery de la presente convocatoria. Dentro del objeto jQuery hay un objeto DOM. Piense en el objeto jQuery como un contenedor para el objeto DOM. Esquemáticamente se ve algo como esto (simplificado):

jQuery ------------------+ 
|      | 
| Array ---------------+ | 
| |     | | 
| | HTMLElement------+ | | 
| | |    | | | 
| | | DOM properties | | | 
| | | DOM element | | | 
| | |  methods | | | 
| | |    | | | 
| | +----------------+ | | 
| | there may be zero, | | 
| | one or more such | | 
| | objects inside  | | 
| +--------------------+ | 
| jQuery properties  | 
| jQuery methods   | 
|      | 
+------------------------+ 

Desde object2 es un objeto jQuery, se utiliza la función val() para darle un valor. No puede usar la propiedad value porque no es lo mismo que un objeto DOM.

object2.val("text"); 

Al igual que las otras respuestas decir, que puede el acceso al objeto DOM subyacente usando gama eliminación de referencias (object2[0]) o la función get(), a continuación, lo que le da un valor utilizando value.

Answer 2

objeto2 ahora es un objeto jQuery, por lo que no se puede tratar como un elemento estándar. Sin embargo, puede obtenerlo haciendo referencia al object2[0] que le proporciona el primer elemento en el objeto jQuery.

Así que puede usar object2[0].value = "fill in with this text"; o simplemente puede usar el modo jquery .val(). Sino que también tenga en cuenta que no es necesario hacer

$(object2).val('fill in with this text'); 

ya que esto sería suficiente también:

object2.val('fill in with this text'); 

desde objeto2 ya es un objeto jQuery.

---

Por último una nota: jQuery(object1) (donde objeto1 es ya un elemento DOM) le daría un jQuery objetar el mismo que tenías $('myElement') pero el selector de jQuery en algunos casos puede ser más rápido o más optimizado sobre el documento selector que es nativo del navegador. No siempre será más rápido, pero en algunos casos puede ser.

.getElementById (como se indica a continuación) debe ser igual de rápido en la selección, pero luego está la sobrecarga de tenerlo en un objeto jQuery, por lo que será, por naturaleza, más lento que el selector predeterminado. Solo depende de lo que estás tratando de lograr, naturalmente.

Answer 3

El primero es un elemento DOM, el segundo es un objeto jQuery con una referencia al mismo elemento DOM.

Esto no funcionará: object2.value = "fill in with this text"; ya que el objeto jQuery no tiene una propiedad .value, pero esto:

object1.value = "fill in with this text"; 

Para obtener el elemento DOM en bruto de $('#myElement'), utilice [0] o .get(0) como esto:

$('#myElement')[0].value = "fill in with this text"; 

Answer 4

Un selector jQuery $('#myElement') devuelve un objeto jQuery.

Sin embargo, usted puede obtener el elemento DOM fuera del objeto jQuery haciendo $('#myElement')[0].

Por lo tanto, se puede hacer $(object2).val('fill in with this text') o $(object2)[0].value = 'fill in with this text'

Answer 5

$('idelement').val() devolverá el valor del elemento , así como document.getElementById('idelement').value. Esta es mi primera publicación en esta plataforma Estoy tratando de formatearlo tanto como sea posible.

Ésta es la salida de mi devtool cromo $('idelement') y document.getElementById('idelement') son muy diferentes, ya que salida diferente estructura de datos para valores recuperados usando jQuery es mucho para utilizar $('idelement').val() no $('idelement').value en caso de que u está utilizando Javascript a utilizar document.getElementById('idelement').value no document.getElementById('idelement').val()

la esperanza que esto ayudará a los chicos u

document.getElementById('compond_amount_txt') 
<input type=​"text" class=​"form-control" name=​"compond_amount_txt" id=​ 
"compond_amount_txt" value=​"10000" aria-describedby=​"basic-addon2">​ 

$('#compond_amount_txt') 
w.fn.init [input#compond_amount_txt.form-control]0: 
input#compond_amount_txt.form-controllength: 1__proto__: Object(0) 

$('#compond_amount_txt').value 
undefined 

$('#compond_amount_txt').val() 
"10000" 

document.getElementById('compond_amount_txt').val() 
VM4296:1 Uncaught TypeError: document.getElementById(...).val is not a 
function 
at <anonymous>:1:47 
(anonymous) @ VM4296:1 

document.getElementById('compond_amount_txt').value 
"10000"