JavaScriptとjQueryの書き方を比較してみた

Pocket

ここ最近、脱jQuery化が加速していますね。

Bootstrapも5からはjQueryが削除されました。

個人的にはそれぞれのメリットを上手く生かして共存させていければと思っていますが、今後はjQueryを使わないプロジェクトが増えてくることは間違いないでしょう。

今回はjQueryとJavaScriptの書き方の違いをYou don’t need jQueryを参考にまとめてみました。

 

セレクターを指定し要素を取得

jQuery
$(’div’)
JavaScript
document.querySelectorAll('div')

クラスを指定して要素を取得する方法

クラス指定で取得する場合の書き方の比較です

jQuery
$(’.class-name’)
JavaScript
document.getElementsByClassName('class-name')

IDを指定して要素を取得する方法

jQuery
$('#id')
JavaScript
document.getElementById('id');

どちらの記法でもよく使います。
最近はブログもJavaScriptのみのサンプルも増えてきたのでどちらも覚えたほうがいいですね。

属性を指定して要素を取得する方法 

jQuery
$('input[type=checkbox]');
JavaScript
$('input[type=checkbox]');

 

最初の要素の値を確認する場合

jQuery
$('input[type=checkbox]').eq(0).val();
JavaScript
document.querySelectorAll('input[type=checkbox]')[0].value;

子要素を取得する方法

jQuery
$('#id').find('p');
javaScript
let id=document.getElementById('id'); 
id.querySelectorAll('p');

最初の要素を取得する場合

jQuery
$('#id').find('p').eq(0)
JavaScript
id.querySelector('p')

 

兄弟要素を取得する方法

 

jQuery
$el.siblings();
javaScript
Array.prototype.filter.call(el.parentNode.children, function(child) { 
  return child !== el; 
});

JavaScriptで書くと少し面倒ですね

直前の兄弟要素を取得する方法

jQuery
$('#id').prev()
JavaScript
document.getElementById("id").previousElementSibling

同じ階層の直前の要素を取得できます

DOMにアクセスできる準備が出来たら実行する

jQuery
$(function(){ ... }); 
JavaScript
document.addEventListener("DOMContentLoaded", function(){ ... });

jQueryの場合、以下のような書き方もできます。 動作は全て同じです。

jQuery(document).ready(function() { .. }); 
jQuery(function(){ .. });

直後の兄弟要素を取得する方法

jQuery
$('#id').next();
JavaScript
document.getElementById("id"). nextElementSibling

同じ階層の直後の要素を取得します

inputなどフォーム要素のvalue値を取得する方法

jQuery
$('#id').val();
JavaScript
document.querySelector('#id').value;

要素にidが付いてたら document.getElementById('id').value でも取得できます

jQuery要素の順番を取得

jQuery
$(e.currentTarget).index('.radio'); 
JavaScript
Array.prototype.indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);

clickイベントなどで、radioボタンの何番目が押されたか調べたい場合などに使えます。

iframe内の要素を参照する

jQuery
$iframe.contents();
JavaScript
iframe.contentDocument; 
// IE7以下の場合 iframe.contentWindow.document;

jQueryは $iframe.contents().find(‘div’) javascriptは iframe.contentDocument.querySelectorAll(‘div’) などで参照できます。

body要素を取得する方法

jQuery
$('body');
JavaScript
document.body; or document.getElementsByTagName('body');

document.querySelector('html body') でも取得できます

属性値を取得する方法

jQuery
$('#link').attr('href');
JavaScript
document.getElementById('link').getAttribute('href');

jQueryとJavaScriptの違い

属性値を要素に設定する方法

jQuery
$('#id').attr('src', 'test.jpg');
JavaScript
document.getElementById('id').setAttribute('src','test.jpg')

属性値の取得、設定はJavaScriptも直感的で覚えやすいですよね。 取得:getAttribute 設定:setAttribute

要素のスタイルを取得する方法

jQuery
$('#id').css('color');
JavaScript
var elem = document.getElementById("id"); 
window.getComputedStyle(elem).color; 

jQueryシンプル

data属性の取得・設定

jQuery
$('#id').data('name');     //取得 
$('#id').data('name','yamada'); //設定
JavaScript
let elem=document.getElementById('id'); 
elem.dataset.name     //取得 
elem.dataset.name='yamada'; //設定

IEで使う場合はgetAttribute、setAttributeを使いましょう。

クラスを追加する方法

jQuery
$('#id').addClass('class');
JavaScript
let el=document.getElementById('id'); 
el.classList.add('class');

複数追加する場合は以下

//jQuery
$('#id').addClass('class1 class2'); 
//JavaScript
 el.classList.add('class1','class2');

クラスを削除する方法

jQuery
$('#id').removeClass('class');
JavaScript
let el=document.getElementById('id'); 
el.classList.remove('class');

複数削除する場合は以下

//jQuery
 $('#id').removeClass('class1 class2');
 
 //JavaScript
 el.classList.remove('class1','class2');

クラスが存在するかチェックする

jQuery
$('id').hasClass('class');
JavaScript
let el=document.getElementById('id'); 
el.classList.contains('class');

複数のクラスの存在を確認する場合

jQuery
 $('#id').hasClass('cls1 cls2');  //true
  $('#id').hasClass('cls2 cls1');  //false 

※順番が違うとfalseになります

JavaScript
el.matches('.cls1.cls2') 

※順不同でもチェック可能

指定したクラスが要素に無ければ追加、あれば削除

jQuery
$('#id').toggleClass('class');
JavaScript
let el=document.getElementById('id');
 el.classList.toggle('class');

クリックイベントなどでクラスを動的に切り替えるときに使えます。addやremoveメソッドを判定して呼び出す必要がないので便利ですね。

ウィンドウの幅・高さを取得

jQuery
$(window).width(); $(window).height();
JavaScript
window.document.documentElement.clientWidth; 
window.document.documentElement.clientHeight;

スクロールバーを含める場合 window.innerWidth; window.innerHeight; で取得できます

親要素からの相対位置を取得

jQuery
const pos=$('#id').position(); //Object{top: 10, left: 20}
JavaScript
const el = document.getElementById('id'); 
const pos={ top: el.offsetTop, left: el.offsetLeft }; //Object{top: 10, left: 20}

ドキュメント上の相対位置を取得する場合は 「offset」 を使用します。 要素が非表示の場合、位置を取得できないので注意して下さい。

DOM要素の削除方法

jQuery
$("#id").remove();
JavaScript
const id = document.getElementById('id');
id.parentNode.removeChild(id);

jQueryは $(‘#id’).detach(); でも削除できます。この場合、イベント、ハンドラなどは保持されます。

 

以上となります。他にもあるので随時追加していきます。

この記事で使用している画像は以下より文字やカラーを編集できます。

コード比較用テンプレート

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です