javascript without jquery

jQuery を使用しない JavaScript

CatsWhoCode の投稿からのヒントと実践例。

目次

1. ドキュメントの準備が完了したかどうかをリッスンする
2. イベントリスナーの追加
3. 要素の選択
4. Ajaxの使用
5. クラスの追加と削除
6. フェードイン
7. 要素の非表示と表示
8. DOM の操作

ドキュメントの準備が完了したかどうかをリッスンする

ドキュメントが「準備完了」するまで、ページを安全に操作することはできません。そのため、私たち開発者は、すべての JS コードを jQuery $(document).ready()関数内にラップする習慣を持っています。

 $ ( document ) . ready ( function ( ) {
  console . log ( 'ready!' ) ;
} ) ;

純粋な JavaScript を使用して、同じ結果を簡単に実現できます。

 document . addEventListener ( 'DOMContentLoaded' , function ( ) {
  console . log ( 'ready!' ) ;
} ) ;

イベントリスナーの追加

イベント リスナーは JavaScript 開発の非常に重要な部分です。 jQuery には、これらを非常に簡単に処理する方法があります。

 $ ( someElement ) . on ( 'click' , function ( ) {
  // TODO event handler logic
} ) ;

JavaScript でイベント リスナーを作成するのに jQuery は必要ありません。その方法は次のとおりです。

 someElement . addEventListener ( 'click' , function ( ) {
  // TODO event handler logic
} ) ;

要素の選択

jQuery を使用すると、ID、クラス名、タグ名などを使用して要素を選択することが非常に簡単になります。

 // By ID
$ ( '#myElement' ) ;

// By Class name
$ ( '.myElement' ) ;

// By tag name
$ ( 'div' ) ;

// Children
$ ( '#myParent' ) . children ( ) ;

// Complex selecting
$ ( 'article#first p.summary' ) ;

Pure JavaScript には、要素を選択するためのさまざまな方法があります。以下のすべての方法は、すべての最新のブラウザーと IE8 以降で機能します。

 // By ID
document . querySelector ( '#myElement' ) ;

// By Class name
document . querySelectorAll ( '.myElement' ) ;

// By tag name
document . querySelectorAll ( 'div' ) ;

// Children
document . querySelectorAll ( 'myParent' ) . childNodes ;

// Complex selecting
document . querySelectorAll ( 'article#first p.summary' ) ;

Ajaxの使用

ご存知のとおり、Ajax は非同期 Web アプリケーションの作成を可能にする一連のテクノロジーです。 jQuery には、次に示すget()など、Ajax に役立つ一連のメソッドがあります。

 $ . get ( 'ajax/test.html' , function ( data ) {
  $ ( '.result' ) . html ( data ) ;
  alert ( 'Load was performed.' ) ;
} ) ;

jQuery を使用すると Ajax 開発が簡単かつ迅速になりますが、Ajax を使用するためのフレームワークが必要ないことは確かです。

 var request = new XMLHttpRequest ( ) ;
request . open ( 'GET' , 'ajax/test.html' , true ) ;

request . onload = function ( e ) {
  if ( request . readyState === 4 ) {

    // Check if the get was successful.

    if ( request . status === 200 ) {
      console . log ( request . responseText ) ;
    } else {
      console . error ( request . statusText ) ;
    }
  }
} ;

クラスの追加と削除

要素のクラスを追加または削除する必要がある場合、jQuery にはそれを行うための 2 つの専用メソッドがあります。

 // Adding a class
$ ( '#foo' ) . addClass ( 'bold' ) ;

// Removing a class
$ ( '#foo' ) . removeClass ( 'bold' ) ;

jQuery を使用しない場合、要素にクラスを追加するのは非常に簡単です。クラスを削除するには、 replace()メソッドを使用する必要があります。

 // Adding a class
document . getElementById ( 'foo' ) . className += 'bold' ;

// Removing a class
document . getElementById ( 'foo' ) . className = document . getElementById ( 'foo' ) . className . replace ( / ^bold$ / , '' ) ;

フェードイン

jQuery がなぜこれほど人気が​​あるのか​​を示す実際的な例を次に示します。要素のフェードアウトには 1 行のコードのみが必要です。

 $ ( el ) . fadeIn ( ) ;

まったく同じ効果を純粋な JavaScript でも実現できますが、コードは非常に長く、より複雑になります。

 function fadeIn ( el ) {
  el . style . opacity = 0 ;

  var last = + new Date ( ) ;
  var tick = function ( ) {
    el . style . opacity = + el . style . opacity + ( new Date ( ) - last ) / 400 ;
    last = + new Date ( ) ;

    if ( + el . style . opacity < 1 ) {
      ( window . requestAnimationFrame && requestAnimationFrame ( tick ) ) || setTimeout ( tick , 16 ) ;
    }
  } ;

  tick ( ) ;
}

fadeIn ( el ) ;

要素の非表示と表示

要素の非表示と表示は非常に一般的なタスクです。 jQuery は、要素の表示を変更するためのhide()とshow()メソッドを提供します。

 // Hiding element
$ ( el ) . hide ( ) ;

// Showing element
$ ( el ) . show ( ) ;

純粋な JavaScript では、要素の表示または非表示はそれほど複雑ではありません。

 // Hiding element
el . style . display = 'none' ;

// Showing element
el . style . display = 'block' ;

DOM の操作

jQuery を使用した DOM の操作は非常に簡単です。 <p>要素を#containerに追加したいとします。

 $ ( '#container' ) . append ( '<p>more content</p>' ) ;

純粋な JavaScript でこれを行うことも、それほど大したことではありません。

 document . getElementById ( 'container' ) . innerHTML += '<p>more content</p>' ;