jQueryでのfindの扱いで"."（ドット）が付くときと付かない時の違いは何でしょうか。

ProgateでjQueryを学んでおります。

アコーディオンを実装しておりますが、以下script.jsにてfind('.answer')のときとfind('span')のときがあり、ドットをつけるときとつけない時の違いがわかりません。
勘所だとタグの場合は必要なくanswerがclassではなくIDなら#answerになるのかなと思ってますがいかがでしょうか。
また、上記のとおりだとしても、script2.jsだとfindとaddClassでドットがついたりつかなかったりしていて、こちらは上記とは別の考え方が必要そうですが、どのように理解したらよろしいでしょうか。

HTML

<div class="faq-wrapper">
    <div class="container">
      <div class="heading">
        <h2>FAQ</h2>
      </div>
      <div class="faq">
        <ul id="faq-list">
          <li class="faq-list-item">
            <h3 class="question">Progateの公式キャラクターはなんですか？</h3>
            <span>+</span>
            <div class="answer">
              <p>にんじゃわんこといいます。忍者の格好をしたわんこです。ネコではありません。</p>
            </div>
          </li>
          <li class="faq-list-item">
            <h3 class="question">にんじゃわんこはオスですか？それともメスですか？</h3>
            <span>+</span>
            <div class="answer">
              <p>にんじゃわんこはオスです。</p>
            </div>
          </li>
          <li class="faq-list-item">
            <h3 class="question">にんじゃわんこは何歳ですか？</h3>
            <span>+</span>
            <div class="answer">
              <p>にんじゃわんこは14歳です。</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

script.js

//アコーディオン
  $('.faq-list-item').click(function(){
    var $answer = $(this).find('.answer');
    
    if($answer.hasClass('open')){
      $answer.removeClass('open');
      $answer.slideUp();
      $(this).find('span').text('+');
    }
    else{
      $answer.addClass('open');
      $answer.slideDown();
      $(this).find('span').text('-');
    }
  });

script2.js

//アコーディオン
  $('.lesson').hover(
    function() {
      $(this).find('.text-contents').addClass('text-active');
    },
    function() {
      $(this).find('.text-contents').removeClass('text-active');
    }
  );

行動規範の内容に同意します

回答3件

セレクタのルールを理解してください

javascript
1<style>
2#hoge{color:red}
3.fuga{color:blue}
4div{background-Color:yellow}
5</style>
6
7<script>
8window.addEventListener('DOMContentLoaded', function(e){
9  console.log(document.querySelectorAll('#hoge').length);
10  console.log(document.querySelectorAll('.fuga').length);
11  console.log(document.querySelectorAll('div').length);
12});
13</script>
14
15
16<div id="hoge">hoge</div>
17<div class="fuga">fuga</div>
18<div class="fuga">fuga</div>
19<div class="fuga">fuga</div>
20<div class="fuga">fuga</div>