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

val() method is primarily used to get the values of form elements such as input , select and textarea . When called on an empty collection, it returns undefined . When the first element in the collection is a select-multiple (i.e., a select element with the multiple attribute set)