function $(id) return document.getelementbyid(id)という文

JavaScriptの関数の名前に$が使えるので、DOMを利用してイベントを使うときfunciton $()と関数を定義することができるので、function $(id) { retrun document.getElementById(id)}と関数を定義すると毎回getElementByIdを書かずにDOMオブジェクトを取得することができます。

ここで、サンプルとして下のHTMLでは、ボタンとテキストを表示します。

<button id="btn">ボタン</button>
<div id="show"><p>Hello! JavaScript</p></div>

下のJavaScriptでは、この$()関数、一見したところjQueryと勘違いしてしまいますが、DOMオブジェクトを利用したプログラムで、ボタンをクリックするとテキスト表示が変更され、オブジェクト取得に毎回getElementByIdを書かずに$()関数を定義して取得しています。

onload = function() {
  $('btn').onclick = function() {
    $('show').innerHTML = '<p>こんにちは！</p>';
  }
}
function $(id) { return document.getElementById(id) };

ここで、jQueryを一緒に使う場合、通常$()関数を使いますが、DOMオブジェクトを取得するために$()関数を定義しているのでjQueryを$()で使うとエラーになります。そこで、下のコードのようにjQuery()と書くと使えます。

onload = function() {
  $('btn').onclick = function() {
    $('show').innerHTML = '<p>こんにちは！</p>';
  }

  jQuery('#btn').on('click', function() {
    alert('Hello');
  });
}
function $(id) { return document.getElementById(id) };