what is the difference between jquery selectors and js selectors?

Simple question for a noob. Is there a difference between these to variables?

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

Also, am I able to run normal js stu开发者_C百科ff on object2? For example, if #myElement is a <textarea> can I do:

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

or, must I do:

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

or, is there yet a better way?

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

You get a DOM element object from this call. Thus, you use the value property to give it a value.

object1.value = "text";

var object2 = $('#myElement');

You get a jQuery object from this call. Inside the jQuery object is a DOM object. Think of the jQuery object as a wrapper for the DOM object. Diagrammatically it looks something like this (simplified):

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

Since object2 is a jQuery object, you use the val() function to give it a value. You cannot use the value property because it's not the same as a DOM object.

object2.val("text");

Like the other answers say, you can access the underlying DOM object using array dereferencing (object2[0]) or the get() function, then giving it a value using value.

The first is a DOM element, the second is a jQuery object with a reference to the same DOM element.

This won't work: object2.value = "fill in with this text"; since the jQuery object doesn't have a .value property, but this will:

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

To get the raw DOM element from $('#myElement'), use [0] or .get(0) like this:

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

A jQuery selector $('#myElement') returns a jQuery object.

However, you can get the DOM element out of the jQuery object by doing $('#myElement')[0].

So, you can do $(object2).val('fill in with this text') or $(object2)[0].value = 'fill in with this text'

object2 is now a jQuery object, so cannot be treated as a standard element. You could, however, get it by referencing object2[0] which gives you the first element in the jQuery object.

So you could either use object2[0].value = "fill in with this text"; or you could just use the jquery .val() way. But also note that you don't need to do

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

as this would also suffice:

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

since object2 is already a jQuery object.

Lastly a note: jQuery(object1) (where object1 is already a DOM element) would give you a jQuery object the same as had you $('myElement') but the jQuery selector may in some cases be faster or optimized over the document selector that is native to the browser. It won't always be faster, but in some cases it may be.

.getElementById (as noted below) should be equivalently fast on the selection, but then there's the overhead of having it in a jQuery object so it'll be, by nature, slower than the default selector. Just depends on what you're trying to accomplish, natch.

$('idelement').val() will return the element's value as well as document.getElementById('idelement').value. This is my first post on this platform I am trying to format it much as possible.

This is the output from my chrome devtool $('idelement') and document.getElementById('idelement') are very much different as they output different data structure to retrieved values using jquery it is much to use $('idelement').val() not $('idelement').value in case u are using javascript use document.getElementById('idelement').value not document.getElementById('idelement').val()

Hope this will help u guys

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"