Below is the code where I obtain my input element with jQuery:

var txt = $(tableRow).find('input:text');
if (txt.value == null) {
  //TO DO code
}

and here's how I do it with pure JavaScript

var txt = document.getElementById('txtAge');
if (txt.value == null) {
  //TO DO code
}

With the first way the value of the txt is undefined. But with the second way the value is what's inside the input element. Now more interesting is, on the bottom-right pane of the Mozilla Firebug if I scroll down to the "value" of the txt I can see it there, both ways.

I know I can simply say $(txt).val(), but I also want to understand why I can't access the value of an element if it's been selected by jQuery. Isn't jQuery just a library of JavaScript functions?

Below is the code where I obtain my input element with jQuery:

var txt = $(tableRow).find('input:text');
if (txt.value == null) {
  //TO DO code
}

and here's how I do it with pure JavaScript

var txt = document.getElementById('txtAge');
if (txt.value == null) {
  //TO DO code
}

With the first way the value of the txt is undefined. But with the second way the value is what's inside the input element. Now more interesting is, on the bottom-right pane of the Mozilla Firebug if I scroll down to the "value" of the txt I can see it there, both ways.

I know I can simply say $(txt).val(), but I also want to understand why I can't access the value of an element if it's been selected by jQuery. Isn't jQuery just a library of JavaScript functions?

• javascript
• jquery

• 2 .value is not a property of a jQuery object it's a property of DOM elements. jQuery is some kind of a wrapper around the DOM API, but it does not map the DOM API 1:1. – Felix Kling Commented Nov 26, 2012 at 8:39
• @FelixKling rasdif ht – Martin Commented Mar 8, 2016 at 18:31

4 Answers 4

.value is not part of the jquery api. You should use .val() instead:

var txt = $(tableRow).find('input:text');
if (txt.val() == "") {
  //TO DO code
}

A dom object and a jquery dom object are not exactly the same. In fact, you can open the Developer tools (in webkit) or Firebug (Firefox) to check what are they in the inside. Jquery holds more information (actually, it contains an instance of the dom that it's representing). So, if you wanted to use .value, you need to call the "generic" dom object from the jquery object, and then use .value.

jQuery selects DOM elements using various native and non-native techniques and places them all in it’s own array-like instance that also wraps them in their own API. jQuery doesn’t "extend" native DOM properties or methods, so you will need to target the DOM node to do that.

Think of it like this:

var node = document.getElementById('txtAge'); // the DOM node
var txt = $('#txtAge'); // the same node wrapped in a jQuery object/API

Since jQuery object holds an array-like collection of DOM nodes, so you can access the first element by doing:

txt[0] // same as node

But it’s generally remended that you use the .get() method:

txt.get(0)

Another more jQuery-way to do what you want is to iterate through a jQuery collection using .each():

$(tableRow).find('input:text').each(function() {
    // "this" in the each callback is the DOM node
    if ( this.value == null ) {
        // Do something
    }
});

.find() will return an arry-like object. If you're sure that there's one, and one only, element matching your query, you could do

var txt = $(tableRow).find('input:text')[0].value;

That's not very jQuery-like, so to speak, more like a mismatch of both jQuery and DOM methods, but it'll get what you want. Also, since you show, as a DOM example, var txt = document.getElementById('txtAge');, this could be rewritten in jQuery as

var txt = $('#txtAge')[0];

var x = $(tableRow).find('input:text');

It's an jquery object .

`x.value` 

There is no property value in jquery object . So it returns undefined.

x.val() is a method you can use for get the value of an element.