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