Extra parentheses in the syntax for a Panel

Extra parentheses in the syntax for a Panel

Hi, I'm currently making my way through a jQuery text book and unfamiliar with some of the code. Specifically, I'm seeking to understand why $panel is assigned  $($link.attr('href')) instead of just $link.attr('href'). What is the $()for? Also, when I log the value in the Firefox Console, it holds the value as  div#tab-1.tab-panel.active when I only expected  #tab-1. 

Thanks. 

  1. HTML:
  2. <ul class="tab-list">
  3.       <li class="active"><a class="tab-control" href="#tab-1"><h3>Desc</h3></a></li>
  4.       ..... etc 
  5. </ul>      
  7.         <div class="tab-panel active" id="tab-1"><p> content</p></div>
  8.      ..... etc

  10. JS:
  11. $('.tab-list').each(function(){            // Finds list of tabs   
  12.   var $this = $(this),                         // gets <ul> list from HTML         
  13.       $tab = $this.find('li.active'),           // gets active list item 
  14.       $link = $tab.find('a'),                     // gets link from active tab
  15.       $panel = $($link.attr('href')); 
  16. ....