jQuery "by attribute" selector

Question

I have a very simple example jsfiddle:

HTML:

<input type="text"/>
<input type="text" value="aaa"/>

JS:

$("input:first").val("aaa");
alert($("input[value='aaa']").length);​

Why Chrome and IE returns different results? Why jQuery in Chrome not recognize the "value" when it was set using jQuery?
How I can solve it? I need that Chrome will return exactly the same result as IE.

EDIT: I unaccepted my answer, because after thinking about it little bit, I still not understand some things (maybe I am wrong regarding several parts):

1) As I know, the text displayed in textbox by browser, should always be in "value" attribute, because if I submit the form, the "values" displayed in textboxes and other input fields are submitted to server (if they are not disabled).

2) So if displayed text in textbox should be stored in "value" in order to be submitted, then it's natural for me if $("input[type='text']").val("aaa") would assign the text "aaa" to "value" attribute, because it may be submitted later. If so, why $("input[value='aaa']") not pick it up?

3) Some other thing....when I not use "val" method of jQuery, and instead type the text directly to textbox, then it not goes to "value" attribute to? I made another example, where I not use "val" to assign text to textbox. I type it directly in textbox, and then $("input[value='aaa']") not pick it up again.

It's very very strange for me...i understand the difference between the properties and attributes, but due to nature of HTML forms, I not understand why "val" not assigns the value to attribute, and when typing in directly, it not goes to "value" attribute to.

Updated jsfiddle

BTW: In http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/ i found the following:

Neither .attr() nor .prop() should be used for getting/setting value. Use the .val() method instead (although using .attr(“value”, “somevalue”) will continue to work, as it did before 1.6).

They say that "val" should set the attribute...or my English not allows me to understand it right?

Please explain me :)

Answer 1

Since the question is very long, this answer also will be a bit longer: The first thing: As I figured out with this fiddle , the behaviour of the attributes selector input[anyAttribute] is kind of inconsistent: While input[value] only matches real attributes, input[maxlength] matches properties as well (Tested in recent FF, recent Chrome, IE 9).

To understand the differences between attributes and properties, read: http://blog.jquery.com/2011/05/12/jquery-1-6-1-released

That means: To get all elements with a specific value after something was typed in, you usually cannot use input[value='anything']. Since jQuery.val() also uses the .value property under the hook, this is also the case when using jQuery. Another fiddle to demonstrate that. (A click on status can be used to get information after something was typed in).

Another point you mentioned is that it is recommended only to use .val() to set the value of an element. This is totally true, because it handles the most bugs and different implementations. So .attr('value') or .prop('value') can cause some problems with seldom situations.

That some IE actually matches input[value='aaa'] for the .value property could be a bug (or a feature) in the IE .querySelectorAll implementation or a bug (or feature) of Sizzle, the jquery selector engine to workaround the missing attribute selector. To check that, just run the selector fiddle in the version of IE you have, and if you get some exceptions with .querySelectorAll, it is sizzle which causes the problems, otherwise IE. I do not have older versions of IE than 9 installed (since Windows 7 upgrades the version of IE), so it would be nice if someone could check that.

Last thing: If you really need all input fields which have a specific value, use jQuery.filter with a filter function to check for the correct .val

Answer 2

I think it is because .val sets the property on the input. Then using the [value="aaa"] is looking at the attributes of the input, which hadn't actually changed. If you change how you use jQuery to set the value of the input to:

$("input:first").attr("value", "aaa");

And then check the length, you'll get the results you're expecting.

Fiddle: http://jsfiddle.net/gromer/ZnbpE/

Difference between properties and attributes: http://blog.jquery.com/2011/05/12/jquery-1-6-1-released