为何使用jQuery无法调用.css()和.addClass()等样式修改方法？

我尝试用jQuery修改元素CSS样式，能正常访问目标元素，.show()、.hide()这类基础特效方法也能正常运行，但.css()和.addClass()方法完全不生效。

相关代码： #

JavaScript代码

$(document).ready(() => {
  const $newQuote = $('#new-quote');
  const $quoteBox = $('#quote-box');

  $newQuote.on('click', () => {
    $('#quote-box').css('color', 'purple');
  })
})

HTML代码

<div id="quote-box">
    <div class="quote-text">
      <span id="text">???</span>
    </div>
    <div class="buttons">
      <button class="button" id="new-quote">New quote</button>
    </div>
  </div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>

上述代码无法生效，但以下使用.hide()的jQuery代码能正常运行：

$(document).ready(() => {
  const $newQuote = $('#new-quote');
  const $quoteBox = $('#quote-box');

  $newQuote.on('click', () => {
    $quoteBox.hide();
  })
})

请问为什么.css()或.addClass()方法无法生效？

内容的提问来源于stack exchange，提问作者Aarroonn