jQuery +と:not()の使い方

Question

こちらの動画を参考にjQueryでタブパネルを作っています。
https://www.youtube.com/watch?v=Bpi5OZTsevg&t=18s

①下記のjQueryコードの中で、$('ul.panel li:not('+selected_panel+')').hide();という文がありますが、この+は何と何をくっつけているのでしょうか？
$('ul.panel li:not('selected_panel')').hide();では何故だめなのでしょうか？

②また、notは:not(div)とか:not(.クラス名)というふうに使うと思うのですが、:not('+selected_panel+'))←なぜこのようにクォーテーションで囲んでいるのでしょうか？

<ul class="tab">
  <li><a href="#one" class="selected">タブ1</a></li>
  <li><a href="#two">タブ2</a></li>
  <li><a href="#three">タブ3</a></li>
</ul>
<ul class="panel">
  <li id="one">文1</li>
  <li id="two">文2</li>
  <li id="three">文3</li>
</ul>

var selected_panel = $('ul.tab li a.selected').attr('href');
$('ul.panel li:not('+selected_panel+')').hide();

Answer 1

この+は何と何をくっつけているのでしょうか？

'ul.panel li:not('と、selected_panel（という変数の中身）と')'をつないでいます。selected_panelという変化する値をセレクタに入れるために、文字列連結で1つの文字列としているのです。

:not('+selected_panel+'))←なぜこのようにクォーテーションで囲んでいるのでしょうか？

いえ、selected_panelは引用符の外側です。文字列中にselected_panelと書いても書いたとおりの文字列としてしか認識されないので、いったん文字列から抜ける必要があります。

Answer 2

1
selected_panelは変数だから、文字列連結をしている

何故だめなのでしょうか？

変数と「そういう文字列」では意味が変わる。

2
分解すれば明白

$(
 'ul.panel
    li:not(
       '+selected_panel+'
          )'
)

$()の中に
セレクタとして'ul.panel li:not('+selected_panel+')'がある。

更にli:not()の中に'+selected_panel+'がある。

セレクタは文字列で指定するのでクォーテーションで囲う。
変数展開のために+で文字列連結する。