jqueryはpure jsに使えない？

Question

document.getElementById('hoge').hide() 

Uncaught TypeError: document.getElementById('hoge').hide() is not a function

getElementByIdの方が高速なのでこれをjqueryメソッドで処理しようとしたところ、エラーメッセージが出ました。
この具体的な理由がわからないでいます。
jqueryは通常のjsと組み合わせて使うことはできないのでしょうか？

Answer 1

hide() メソッドは jQuery オブジェクトが持つ機能です。
一方、document.getElementById() メソッドが返すのは、 Element オブジェクトで、 jQuery を読み込んだからと言ってこの Element オブジェクトの機能が拡張されるわけではありません。

以下のように、 jQuery(/* Element */) 関数を適用することで、 Element オブジェクトを jQuery オブジェクトに変換できます。

const el = document.getElementById('hoge')
  // el.style.display = 'none'; と直接操作することもできる。
const $el = jQuery(el) // $(el) でもOK
$el.hide() // $el は jQuery オブジェクトになっているので、hide() メソッドが利用できる

Answer 2

「組み合わせて使うこと」自体は出来ますが、jQueryメソッドはjQueryオブジェクトに有るメソッドなので、そういう使い方は出来ません。

Answer 3

jqueryはpure jsに使えない？

文法的に間違っているから動かないだけで、できます。
jQueryはJavaScriptのライブラリなので、結局はJavaScriptが動いています。
つまり、「jQueryが返すのと同じオブジェクトを返すようにPure JSで書く」ときちんと動作します。

ただ、記法はなるべく統一したほうがコードが読みやすくなります。

Answer 4

どうしてもというならこう

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
HTMLElement.prototype.hide=function(){
  $(this).hide();
};
window.addEventListener('DOMContentLoaded', function(e){
  document.getElementById('hoge').hide() 
});
</script>
<div id="hoge">hoge</div>
<div id="fuga">fuga</div>

しかしこんなことをする意味があるのかは疑問

Answer 5

<div id="left"></div>
<div id="right"></div>

const kyosei = function(id){
  const kintama = document.getElementById(id);
  return {
   show:function(){     kintama.style.display='block';   },
   hide:function(){     kintama.style.display='none';   }
 }
}

kyosei('left').hide();
kyosei('right').hide();

jqueryで実行しているshowは↑に書いたようなもんなのでしょう。