Can I attach several commands to the same jQuery selector

in simple words:

Is this:

$('#password').html('Weak').css({'background-color' 开发者_C百科: '#FF0000' , 'color' : '#FFFFFF'});

equals to this?

$('#password').css({'background-color' : '#FF0000' , 'color' : '#FFFFFF'});
$('#password').html('Weak')

They work the same for me - but I just wanted to be sure that they are truly the same...

---

Almost.

$('#password').html('Weak').css({'background-color' : '#FF0000' , 'color' : '#FFFFFF'});

Builds a jQuery object for the selector #password once.

$('#password').css({'background-color' : '#FF0000' , 'color' : '#FFFFFF'});
$('#password').html('Weak')

Builds a jQuery object for the selector #password twice.

Does it matter much this time? Not really: #something is heavily optimized in jQuery to quickly use document.getElementById to match the correct element.

However, if you have

$('input[value^=your_complex_selector],div div div,img[src$=.jpg]')

and you keep calling it again and again without caching it... you can see where we are going.

You can get the performance advantage of chaining, without the loss of readability, by assigning the jQuery object to a variable:

var password = $('#password');
password.css({'background-color' : '#FF0000' , 'color' : '#FFFFFF'});
password.html('Weak');

---

Yes it is always better to chain the jquery commands. That will save jquery to fetch the element everytime.

$('#password').html('Weak').css({'background-color' : '#FF0000' , 'color' : '#FFFFFF'});

is better than even though they do the same function.

$('#password').css({'background-color' : '#FF0000' , 'color' : '#FFFFFF'});
$('#password').html('Weak')

---

Well it's usually the same thing, but some methods affect the set of selected elements, so it's not necessarily the same. In your particular case, yes, it's exactly the same.

It's more efficient to use a "chain" because the DOM only has to be searched once. When the lookup is by "id" as in your example, that's not a huge savings, but it's something.

---

answer is almost yes, they are equal, but first query will work faster.

Second query search the document twice for the #password element

---

Yes, this is called chaining and is preferred to doing the second example because in the second example you are having the find the DOM element again instead of using the one already in use in the first example

---

Yes, the result is the same, but with your first approach you only have to find that element once, and jQuery will create only one jQuery object, thus saving memory.

It's called chaining. One of the great feature of libraries such as jQuery.

You can optimize your calls by assigning a jQuery object to a variable, so you don't have to call the jquery function multiple times, saving memory and speed.

var $password = $('#password');

$password.css({

  'background-color': '#FF0000',
  'color': '#FFFFFF'

});

$password.html('Weak');