未経験のwebサイト制作の勉強

未経験からwebサイト制作の勉強をし、現在制作会社で働いております。

クリックイベントの際にa要素の動きに制限を掛ける

jQuery

a要素にjQuery等でクリックイベントを指定する際、気を付けなければいけないのが、本来a要素が持っている動作とのバッティングです。
まずはa要素が本来持っている動作を再確認しましょう。

HTML の <a> 要素 (アンカー要素) は、別のウェブページ、ファイル、
同一ページ内の場所、電子メールアドレス、
または他の URL へのハイパーリンクを作成します。

とあるように本来、a要素の役割はhref属性内に記述されている場所へのリンク（移動）です。
では普段演習で記述しているような

<a href="#">テキストリンク</a>

こういった場合の「"#"」とはhtml内のどこに当たるでしょうか。

クリックイベントにreturn falseを指定する

こういったようにa要素にjQueryなどでクリックイベントを指定する場合にはバッティングしないように、a要素本来のハイパーリンク機能を無効にする必要があります。
その場合、クリックイベント内にreturn falseを指定します。

$(function(){
 $('a').on('click',function(){
  $('#box').addClass('click');
  return false;
 });
});

ここで注意が必要なのが、「return false」の場所です。
下記のようにaddClassメソッドの前に記述してしまうと、addClassメソッドも無効になってしまうので、「return false」の場所には注意しましょう。

$(function(){
 $('a').on('click',function(){
    return false;
   $('#box').addClass('click');
 });
});

要素を変数に代入する

変数を使用する事でコードの省略化、コードの簡素化に繋がる、という考え方はJavaScriptもjQueryも勿論一緒です。
変数というのはプログラムの最も基本的な部分であり、最も重要な部分であるので、しっかりと覚えましょう。

<script>
$(function(){
 $('#btn').on('click',function(){
  $(#box).addClass('click');
  return false;
 });
});
</script>
</head>

<body>
<p><a href="#box" id="btn">ボタン</a></p>
<div id="box">box</div>
</body>

以上の記述を「id=box」を変数に代入する形に変更してみましょう。