Jquery val() vs this.value for dropdowns

Question

The below code uses this.value to get the value of a forms dropdowns. I have only generally seen .val() used. Is the below way acceptable cross-browser (especially older verions of IE)? Thanks!

    $(':input', '#all').each(function() {
       alert(this.value);                 
    });

Answer 1

Yes, it's acceptable, is more readable, and is less expensive (faster) than calling $(this).val().

Simply put, $(this) refers to a jQuery object, whilst this refers to a DOM element.

The FAQ here touches upon it briefly (under 'Know Your DOM Properties and Functions')

You should use plain "this" when the native DOM APIs suffice, and $(this) when you need the help of jQuery.

I'd also suggest reading the following:

$(this) vs this in jQuery

jQuery: What's the difference between '$(this)' and 'this'?

When to use Vanilla JavaScript vs. jQuery?

utilizing-the-awesome-power-of-jquery-to-access-properties-of-an-element

this demystified