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
} ) ;

您不需要 jQuery 在 JavaScript 中建立事件偵聽器。操作方法如下：

 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' ) ;

純 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 有一組對 Ajax 有用的方法，包括get()如下：

 $ . 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 有兩個專用方法可以執行此操作：

 // 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 為何如此受歡迎。淡入淡出一個元素只需要一行程式碼：

 $ ( 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>' ;