Пишем JavaScript код без jQuery

AJAX

JSON

JQUERY

$.getJSON('/my/url', function(data) {

})

IE8+

request = new XMLHttpRequest
request.open('GET', '/my/url', true)
request.send()

request.onload = function() {
  data = JSON.parse(this.response)
}

Post

JQUERY

$.ajax({
  type: 'POST',
  url: '/my/url',
  data: data
})

IE8+

request = new XMLHttpRequest
request.open('POST', '/my/url', true)
request.send(data)

Request

JQUERY

$.ajax({
  type: 'GET',
  url: '/my/url',
  success: function(resp) {

  },
  error: function() {

  }
})

IE8+

request = new XMLHttpRequest
request.open('GET', '/my/url', true)
request.send()

request.onload = function() {
  resp = this.response
}

request.onerror = function() {

}

EFFECTS

Fade In

JQUERY

$(el).fadeIn()

IE8+

function fadeIn(el) {
  var opacity = 0

  el.style.opacity = 0
  el.style.filter = ''

  var last = +new Date
  var tick = function() {
    opacity += (new Date - last) / 400
    el.style.opacity = opacity
    el.style.filter = 'alpha(opacity=' + (100 * opacity)|0 + ')'

    last = +new Date

    if (opacity < 1)
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
  }

  tick()
}

fadeIn(el)

Hide

JQUERY

$(el).hide()

IE8+

el.style.display = 'none'

Show

JQUERY

$(el).show()

IE8+

el.style.display = ''

ELEMENTS

Add Class

JQUERY

$(el).addClass(className)

IE8+

if (el.classList)
  el.classList.add(className)
else
  el.className += ' ' + className

After

JQUERY

$(el).after(htmlString)

IE8+

el.insertAdjacentHTML('afterend', htmlString)

Append

JQUERY

$(parent).append(el)

IE8+

parent.appendChild(el)

Before

JQUERY

$(el).before(htmlString)

IE8+

el.insertAdjacentHTML('beforebegin', htmlString)

Children

JQUERY

$(el).children()

IE8+

el.children

Clone

JQUERY

$(el).clone()

IE8+

el.cloneNode(true)

Contains

JQUERY

$.contains(el, child)

IE8+

el !== child && el.contains(child)

Contains Selector

JQUERY

$(el).find(selector).length

IE8+

el.querySelector(selector) !== null

Each

JQUERY

$(selector).each(function(i, el){

})

IE8+

function forEachElement(selector, fn) {
  var elements = document.querySelectorAll(selector)
  for (var i = 0; i < elements.length; i++)
    fn(elements[i], i)
}

forEachElement(selector, function(el, i){

})

Empty

JQUERY

$(el).empty()

IE8+

el.innerHTML = '';

Filter

JQUERY

$(selector).filter(filterFn)
IE8+

function filter(selector, filterFn) {
  var elements = document.querySelectorAll(selector)
  var out = []
  for (var i = elements.length; i--;) {
    if (filterFn(elements[i]))
      out.unshift(elements[i])
  }
  return out
}

filter(selector, filterFn)

Finding Children

JQUERY

$(el).find(selector)

IE8+

el.querySelectorAll(selector)

Finding Elements

JQUERY

$('.my #awesome selector')

IE8+

document.querySelectorAll('.my #awesome selector')

Get Style

JQUERY

$(el).css(ruleName)

IE8+

// Varies based on the properties being retrieved, some can be retrieved from el.currentStyle
// https://github.com/jonathantneal/Polyfills-for-IE8/blob/master/getComputedStyle.js

Getting Attributes

JQUERY

$(el).attr('tabindex')

IE8+

el.getAttribute('tabindex')

Getting Html

JQUERY

$(el).html()

IE8+

el.innerHTML

Getting Outer Html

JQUERY

$('<div>').append($(el).clone()).html()

IE8+

el.outerHTML

Getting Text

JQUERY

$(el).text()

IE8+

el.textContent || el.innerText

Has Class

JQUERY

$(el).hasClass(className)

IE8+

if (el.classList)
  el.classList.contains(className)
else
  new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className)

Matches

JQUERY

$(el).is($(otherEl))

IE8+

el === otherEl

Matches Selector

JQUERY

$(el).is('.my-class')

IE8+

matches = function(el, selector) {
  var _matches = (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector)

  if (_matches) {
    return _matches.call(el, selector)
  } else {
    var nodes = el.parentNode.querySelectorAll(selector)
    for (var i = nodes.length; i--;) {
      if (nodes[i] === el)
        return true
    }
    return false
}

matches(el, '.my-class')

Next

JQUERY

$(el).next()

IE8+

// nextSibling can include text nodes
function nextElementSibling(el) {
  do { el = el.nextSibling } while ( el && el.nodeType !== 1 )
  return el
}

el.nextElementSibling || nextElementSibling(el)

Offset

JQUERY

$(el).offset()

IE8+

{left: el.offsetLeft, top: el.offsetTop}

Offset Parent

JQUERY

$(el).offsetParent()

IE8+

el.offsetParent || el

Parent

JQUERY

$(el).parent()

IE8+

el.parentNode

Prepend

JQUERY

$(parent).prepend(el)

IE8+

parent.insertBefore(el, parent.firstChild)

Prev

JQUERY

$(el).prev()

IE8+

// prevSibling can include text nodes
function prevElementSibling(el) {
  do { el = el.prevSibling } while ( el && el.nodeType !== 1 )
  return el
}

el.prevElementSibling || prevElementSibling(el)

Remove Class

JQUERY

$(el).removeClass(className)

IE8+

if (el.classList)
  el.classList.remove(className)
else
  el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ')

Remove

JQUERY

$(el).remove()

IE8+

el.parentNode.removeChild(el)

Replacing From Html

JQUERY

$(el).replaceWith(string)

IE8+

el.outerHTML = string

Set Style

JQUERY

$(el).css('border-width', '20px')

IE8+

// Use a class if possible
el.style.borderWidth = '20px'

Setting Attributes

JQUERY

$(el).attr('tabindex', 3)

IE8+

el.setAttribute('tabindex', 3)

Setting Html

JQUERY

$(el).html(string)

IE8+

el.innerHTML = string

Setting Text

JQUERY

$(el).text(string)

IE8+

if (el.textContent !== undefined)
  el.textContent = string
else
  el.innerText = string

Siblings

JQUERY

$(el).siblings()

IE8+

var siblings = Array.prototype.slice.call(el.parentNode.children)

for (var i = siblings.length; i--;) {
  if (siblings[i] === el) {
    siblings.splice(i, 1)
    break
  }
}

Toggle Class

JQUERY

$(el).toggleClass(className)

IE8+

if (el.classList) {
    el.classList.toggle(className)
} else {
    var classes = el.className.split(' ')
    var existingIndex = -1
    for (var i = classes.length; i--;) {
      if (classes[i] === className)
        existingIndex = i
    }

    if (existingIndex >= 0)
      classes.splice(existingIndex, 1)
    else
      classes.push(className)

    el.className = classes.join(' ')
}

EVENTS

Off

JQUERY

$(el).off(eventName, eventHandler)

IE8+

function removeEventListener(el, eventName, handler) {
  if (el.removeEventListener)
    el.removeEventListener(eventName, handler)
  else
    el.detachEvent('on' + eventName, handler)
}

removeEventListener(el, eventName, handler)

On

JQUERY

$(el).on(eventName, eventHandler)

IE8+

function addEventListener(el, eventName, handler) {
  if (el.addEventListener)
    el.addEventListener(eventName, handler)
  else
    el.attachEvent('on' + eventName, handler)
}

addEventListener(el, eventName, handler)

Ready

JQUERY

$(document).ready(function(){

})

IE8+

function ready(fn) {
  if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fn)
  } else {
    document.attachEvent('onreadystatechange', function(){
      if (document.readyState === 'interactive')
        fn()
    })
  }
}

Trigger Custom

JQUERY

$(el).trigger('my-event', {some: 'data'})

IE8+

// Custom events are not natively supported, so you have to hijack a random
// event.
//
// Just use jQuery.

Trigger Native

JQUERY

$(el).trigger('change')

IE8+

if (document.createEvent) {
  event = document.createEvent('HTMLEvents')
  event.initEvent('change', true, false)
  el.dispatchEvent(event)
} else {
  el.fireEvent('onchange')
}

UTILS

Array Each

JQUERY

$.each(array, function(i, item){

})

IE8+

function forEach(array, fn) {
  for (i = 0; i < array.length; i++)
    fn(array[i], i)
}

forEach(array, function(item, i){

})

Bind

JQUERY

$.proxy(fn, context)

IE8+

function(){
  return fn.apply(context, arguments)
}

Deep Extend

JQUERY

$.extend(true, {}, objA, objB)

IE8+

deepExtend = function(out) {
  out = out || {}

  for (var i = 1; i < arguments.length; i++) {
    var obj = arguments[i]

    if (!obj)
      continue

    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (typeof obj[key] === 'object')
          deepExtend(out[key], obj[key])
        else
          out[key] = obj[key]
      }
    }
  }

  return out
}

deepExtend({}, objA, objB)

Extend

JQUERY

$.extend({}, objA, objB)

IE8+

extend = function(out) {
  out = out || {}

  for (var i = 1; i < arguments.length; i++) {
    if (!arguments[i])
      continue

    for (key in arguments[i]) {
      if (arguments[i].hasOwnProperty(key))
        out[key] = arguments[i][key]
    }
  }

  return out
}

extend({}, objA, objB)

Index Of

JQUERY

$.inArray(item, array)

IE8+

function indexOf(array, item) {
  for (var i = 0; i < array.length; i++) {
    if (array[i] === item)
      return i
  }
  return -1
}

indexOf(array, item)

Is Array

JQUERY

$.isArray(arr)

IE8+

isArray = Array.isArray || function(arr) {
  return Object.prototype.toString.call(arr) == '[object Array]'
}

isArray(arr)

Map

JQUERY

$.map(array, function(value, index){

})

IE8+

function map(arr, fn) {
  var results = []
  for (var i = 0; i < arr.length; i++)
    results.push(fn(arr[i], i))
  return results
}

map(array, function(value, index){

})

Now

JQUERY

$.now()

IE8+

new Date().getTime()

Parse Html

JQUERY

$.parseHTML(htmlString)

IE8+

var parseHTML = function(str) {
  var el = document.createElement('div')
  el.innerHTML = str
  return el.children
}

parseHTML(htmlString)

Parse Json

JQUERY

$.parseJSON(string)

IE8+

JSON.parse(string)

Trim

JQUERY

$.trim(string)

IE8+

string.replace(/^\s+|\s+$/g, '')