jquery function val() is not equivalent to "$(this).value="?

Question

When I try to set a text input to blank (when clicked) using $(this).value="", this does not work. I have to use $(this).val('').

Why? What is the difference? What is the mechanism behind the val function in jQuery?

$(document).ready(function() {
    $('#user_name').focus(function(){
        $(this).val('');
    });
});
// error code: not working...
$(document).ready(function() {
    $('#user_name').focus(function(){
        $(this).value='';
    });
});

Answer 1

You want:

this.value = ''; // straight JS, no jQuery

or

$(this).val(''); // jQuery

With $(this).value = '' you're assigning an empty string as the value property of the jQuery object that wraps this -- not the value of this itself.