What does “^=” (caret-equals) mean inside a jQuery selector?

I found on codeply an example having the following line:

$('[id^=carousel-selector-]').click( function(){

I think it is related to the line in html:

<li>
   <a id="carousel-selector-0" class="selected">

But what exactly does '[id^=carousel-selector-]' mean?

It is the attribute starts with selector.

It will select all the elemets whose id starts with carousel-selector-

Consider the html,

<a id="carousel-selector-0" class="selected">one</a>
<a id="carousel-selector-1" class="selected">one</a>
<a id="carousel-selector-2" class="selected">one</a>
<a id="testcarousel-selector-2" class="selected">one</a>

Then $('[id^=carousel-selector-]'). will return first 3 anchor elements, as its id starts with carousel-selector-

1. ^ is starts with selector
2. $ is ends with selector
3. * is contains selector