javascript without jquery

JavaScript без jQuery

Советы и практические примеры из поста 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 упрощает выбор элементов по идентификатору, имени класса, имени тега и т. д.:

 // 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 — это набор технологий, позволяющих создавать асинхронные веб-приложения. 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

Управлять DOM с помощью jQuery очень просто. Допустим, вы хотите добавить элемент <p> к #container :

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

Сделать это на чистом JavaScript тоже не составит большого труда:

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