[jQuery] Re: What is the more correct/efficient selector?
"1: it forces jQuery to select all the select's on the page, and then
"somehow" to get to the one where event "onchange" was fired from"
And the other method does what differently?
The bottom line, the selector $("select") is bad/makes-little-sense no
matter *what* is inside...
on the other hand, inside the event
$(this).val()
is shorter/less-coding/better-than-reasons-already-posted-above than
$("select option:selected").val() <-- which makes less sense since
that will get the *first* 's value no matter what
or
$("option:selected", this).val()
On Oct 13, 8:50 pm, DBJDBJ wrote:
> $("select").change(function() {
> alert( $(this).val() );
> });
>
> Is not so good for a few reasons:
>
> 1: it forces jQuery to select all the select's on the page, and then
> "somehow" to get to the one where event "onchange" was fired from.
> 2: it uses the slowest form of dom selection , namely by tag name
> ...
> etc
>
> Please get into the habit of *always* using the 'context' argument.
> when initally calling $().
> And have dom node as a context argument.
> (http://brandonaaron.net/blog/2009/06/24/understanding-the-context-in-...
> )
> Which in turn is forcing you to use (a lot ) more 'containers' in
> order to balance the dom tree in your pages.
>
> So, imagine there is a form on your page which contains one or more
> select's:
>
> $("#mySelect25", $("myForm")[0] ).change(function() {
> alert( $(this).val() );
> });
>
> Would be the preffered way ... Or just a 'container' div that
> contains our select :
>
> $("#mySelect25", $("myDIV")[0] ).change(function() {
> alert( $(this).val() );
> });
>
> In real life situations you might have (for example a toolbar with
> buttons etc inside it. So:
>
> $tbar = $("myToolbarDiv", document.body ) ;
>
> $tbar.find("button:first").click ( function () {} ) ;
> $tbar.find("button:last").click(function () { } ) ;
> $tbar.find("#mySelect25").change(function() {
> alert( $(this).val() );
> });
>
> Your (real) pages will inevitably grow and the usage of context and
> container elements and id's in selectors will speed up things
> noticeably.
>
> PS: find() is actually the fastest way to select, it is a straight
> Sizzle call. But it needs a container *arround* what are we looking
> for: $("#container").find("whatever is inside")
>
> --DBJ
[jQuery] Re: What is the more correct/efficient selector?
$("select").change(function() {
alert( $(this).val() );
});
Is not so good for a few reasons:
1: it forces jQuery to select all the select's on the page, and then
"somehow" to get to the one where event "onchange" was fired from.
2: it uses the slowest form of dom selection , namely by tag name
...
etc
Please get into the habit of *always* using the 'context' argument.
when initally calling $().
And have dom node as a context argument. (
http://brandonaaron.net/blog/2009/06/24/understanding-the-context-in-jquery
)
Which in turn is forcing you to use (a lot ) more 'containers' in
order to balance the dom tree in your pages.
So, imagine there is a form on your page which contains one or more
select's:
$("#mySelect25", $("myForm")[0] ).change(function() {
alert( $(this).val() );
});
Would be the preffered way ... Or just a 'container' div that
contains our select :
$("#mySelect25", $("myDIV")[0] ).change(function() {
alert( $(this).val() );
});
In real life situations you might have (for example a toolbar with
buttons etc inside it. So:
$tbar = $("myToolbarDiv", document.body ) ;
$tbar.find("button:first").click ( function () {} ) ;
$tbar.find("button:last").click(function () { } ) ;
$tbar.find("#mySelect25").change(function() {
alert( $(this).val() );
});
Your (real) pages will inevitably grow and the usage of context and
container elements and id's in selectors will speed up things
noticeably.
PS: find() is actually the fastest way to select, it is a straight
Sizzle call. But it needs a container *arround* what are we looking
for: $("#container").find("whatever is inside")
--DBJ
[jQuery] Re: What is the more correct/efficient selector?
both ways are correct.
but
$("select").change(function() {
alert( $(this).val() );
});
looks better.
.val() is function built to take advantage over .attr('value');
its always good achieve same result by with less typing.
As jQuery itsef says .. "Write Less Do More". :)
Ninad
On Oct 13, 3:05 pm, James wrote:
> val() was built to have several advantages over attr("value") for form
> fields.
> For example, if your select element was one that allows you to select
> multiple options, using:
> attr("value")
> (or just the basic 'value' attribute for that matter)
> it will only get the first selected value. You'd have to manually loop
> through the options to get the selected options. It was meant to work
> almost exactly like the JS core 'value' attribute.
> But if you use:
> val()
> you would get an array of all the selected values. It's built for you
> already in jQuery.
>
> If you only have a select element that allows one selection, then it
> probably doesn't matter much. Either one should work correctly in
> most, if not all, browsers.
>
> On Oct 13, 11:24 am, Evgeny Bobovik wrote:
>
> > Why not?? I think that this method is most correctly from all:)
> > Gk___
>
> > 2009/10/13 MorningZ :
>
> > > why not just use
>
> > > $("select").change(function() {
> > > alert( $(this).val() );
> > > });
>
> > > On Oct 13, 11:06 am, Evgeny Bobovik wrote:
> > >> fist and second methods are correct? but this:
> > >> $("select").change(function() {
>
> > >> alert($(this).attr("value"));
>
> > >> });
> > >> method will worked correctly in all browsers!
> > >> Gk___
>
> > >> 2009/10/13 Mike :
>
> > >> > $("select").change(function() {
>
> > >> > alert($(this).attr("value"));
>
> > >> > });
[jQuery] Re: What is the more correct/efficient selector?
val() was built to have several advantages over attr("value") for form
fields.
For example, if your select element was one that allows you to select
multiple options, using:
attr("value")
(or just the basic 'value' attribute for that matter)
it will only get the first selected value. You'd have to manually loop
through the options to get the selected options. It was meant to work
almost exactly like the JS core 'value' attribute.
But if you use:
val()
you would get an array of all the selected values. It's built for you
already in jQuery.
If you only have a select element that allows one selection, then it
probably doesn't matter much. Either one should work correctly in
most, if not all, browsers.
On Oct 13, 11:24 am, Evgeny Bobovik wrote:
> Why not?? I think that this method is most correctly from all:)
> Gk___
>
> 2009/10/13 MorningZ :
>
>
>
> > why not just use
>
> > $("select").change(function() {
> > alert( $(this).val() );
> > });
>
> > On Oct 13, 11:06 am, Evgeny Bobovik wrote:
> >> fist and second methods are correct? but this:
> >> $("select").change(function() {
>
> >> alert($(this).attr("value"));
>
> >> });
> >> method will worked correctly in all browsers!
> >> Gk___
>
> >> 2009/10/13 Mike :
>
> >> > $("select").change(function() {
>
> >> > alert($(this).attr("value"));
>
> >> > });
>
>
[jQuery] Re: What is the more correct/efficient selector?
Why not?? I think that this method is most correctly from all:)
Gk___
2009/10/13 MorningZ :
>
> why not just use
>
> $("select").change(function() {
> alert( $(this).val() );
> });
>
>
>
> On Oct 13, 11:06 am, Evgeny Bobovik wrote:
>> fist and second methods are correct? but this:
>> $("select").change(function() {
>>
>> alert($(this).attr("value"));
>>
>> });
>> method will worked correctly in all browsers!
>> Gk___
>>
>> 2009/10/13 Mike :
>>
>>
>>
>> > $("select").change(function() {
>>
>> > alert($(this).attr("value"));
>>
>> > });
[jQuery] Re: What is the more correct/efficient selector?
why not just use
$("select").change(function() {
alert( $(this).val() );
});
On Oct 13, 11:06 am, Evgeny Bobovik wrote:
> fist and second methods are correct? but this:
> $("select").change(function() {
>
> alert($(this).attr("value"));
>
> });
> method will worked correctly in all browsers!
> Gk___
>
> 2009/10/13 Mike :
>
>
>
> > $("select").change(function() {
>
> > alert($(this).attr("value"));
>
> > });
[jQuery] Re: What is the more correct/efficient selector?
fist and second methods are correct? but this:
$("select").change(function() {
alert($(this).attr("value"));
});
method will worked correctly in all browsers!
Gk___
2009/10/13 Mike :
>
> $("select").change(function() {
>
> alert($(this).attr("value"));
>
>
> });
>
>
[jQuery] Re: What is the more correct/efficient selector?
$("select").change(function() {
alert($(this).attr("value"));
});
On Tue, Oct 13, 2009 at 4:00 PM, Mike wrote:
>
> $("select").change(function() {
>
>alert($("select option:selected").val());
>
>
>});
>
>
>
> OR
>
> $("select").change(function() {
>
>alert($(this).attr("value"));
>
>
>});
>
>
> I am specifically looking at the selector used in the alert. From my
> testing the result in the same correct values to be displayed.
[jQuery] Re: What is the more correct/efficient selector?
use the second one, avoid problems from having multiple selects on the page.
Mike wrote:
$("select").change(function() {
alert($("select option:selected").val());
});
OR
$("select").change(function() {
alert($(this).attr("value"));
});
I am specifically looking at the selector used in the alert. From my
testing the result in the same correct values to be displayed.
