ページを開いてメソッドを呼び出した後 $(function() {}); Uncaught ReferenceError: ブラウザコンソールで $ が定義されていません。

原因

function() {});の実行は持ち出しjsファイルを使用するためですが、ブラウザはまず$(function() {});を実行してページを読み込み、次にjsファイルを読み込むため、$(function() {});の後に使用するjsファイルがないのです。

回避策としては

$(function() {});メソッドで使用するjsファイルをページ上部に置いて、最初に読み込ませる。

html,css,jsの読み込み順は、ページを参照しています。

html,css,jsの読み込み順の参考例