2. JS

jquery - 일반 자바스크립트 비교, 대처하는 코드

자르르 2014. 2. 4. 10:17

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()

IE10+

el.classList.add('show')
el.classList.remove('hide')

.show {
  transition: opacity 400ms;
}
.hide {
  opacity: 0;
}

Hide

JQUERY

$(el).hide()

IE8+

el.style.display = 'none'

Show

JQUERY

$(el).show()

IE8+

el.style.display = ''

ELEMENTS

Add Class

JQUERY

$(el).addClass(className)

IE10+

el.classList.add(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.contains(child)

Contains Selector

JQUERY

$(el).find(selector).length

IE8+

el.querySelector(selector) !== null

Each

JQUERY

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

})

IE9+

var elements = document.querySelectorAll(selector)
Array.prototype.forEach.call(elements, function(el, i){

})

Empty

JQUERY

$(el).empty()

IE8+

el.innerHTML = '';

Filter

JQUERY

$(selector).filter(filterFn)

IE9+

Array.prototype.filter.call(document.querySelectorAll(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)

IE9+

getComputedStyle(el)[ruleName]

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()

IE9+

el.textContent

Has Class

JQUERY

$(el).hasClass(className)

IE10+

el.classList.contains(className)

Matches

JQUERY

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

IE8+

el === otherEl

Matches Selector

JQUERY

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

IE9+

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

matches(el, '.my-class')

Next

JQUERY

IE9+

el.nextElementSibling

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

IE9+

el.prevElementSibling

Remove

JQUERY

$(el).remove()

IE8+

el.parentNode.removeChild(el)

Remove Class

JQUERY

$(el).removeClass(className)

IE10+

el.classList.remove(className)

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)

IE9+

el.textContent = string

Siblings

JQUERY

$(el).siblings()

IE9+

Array.prototype.filter.call(el.parentNode.children, function(child){
    return child !== el
})

Toggle Class

JQUERY

$(el).toggleClass(className)

IE10+

el.classList.toggle(className)

EVENTS

Off

JQUERY

$(el).off(eventName, eventHandler)

IE9+

el.removeEventListener(eventName, eventHandler)

On

JQUERY

$(el).on(eventName, eventHandler)

IE9+

el.addEventListener(eventName, eventHandler)

Ready

JQUERY

$(document).ready(function(){

})

IE9+

document.addEventListener('DOMContentLoaded', function(){

})

Trigger Custom

JQUERY

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

IE9+

if (window.CustomEvent) {
  var event = new CustomEvent('my-event', {detail: {some: 'data'}})
} else {
  var event = document.createEvent('CustomEvent')
  event.initCustomEvent('my-event', true, true, {some: 'data'})
}

el.dispatchEvent(event)

Trigger Native

JQUERY

$(el).trigger('change')

IE9+

// For a full list of event types: https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent
event = document.createEvent('HTMLEvents')
event.initEvent('change', true, false)
el.dispatchEvent(event)

UTILS

Array Each

JQUERY

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

})

IE9+

array.forEach(function(item, i){

})

Bind

JQUERY

$.proxy(fn, context)

IE9+

fn.bind(context)

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)

IE9+

array.indexOf(item)

Is Array

JQUERY

$.isArray(arr)

IE9+

Array.isArray(arr)

Map

JQUERY

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

})

IE9+

array.map(function(value, index){

})

Now

JQUERY

$.now()

IE9+

Date.now()

Parse Html

JQUERY

$.parseHTML(htmlString)

IE9+

var parseHTML = function(str) {
  var tmp = document.implementation.createHTMLDocument()
  tmp.body.innerHTML = str
  return tmp.body.children
}

parseHTML(htmlString)

Parse Json

JQUERY

$.parseJSON(string)

IE8+

JSON.parse(string)

Trim

JQUERY

$.trim(string)

IE9+

string.trim()