Skip to content

Instantly share code, notes, and snippets.

@joyrexus
Last active December 14, 2015 20:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joyrexus/5147753 to your computer and use it in GitHub Desktop.
Save joyrexus/5147753 to your computer and use it in GitHub Desktop.
Simple jquery replacment for simple selections.

Simple Selections

Selecting (without jquery)

Return first element matching css selector pattern (on a node).

$ = (p, node) ->
  node ?= document
  node.querySelector p

Return all matching elements.

$$ = (p, node) ->
  node ?= document
  node.querySelectorAll p

Return array of all matches.

$$ = (p, node) ->
  node ?= document
  selection = node.querySelectorAll p
  Array::slice.call selection

Use this just like you would jquery.

$("div")
$("#id")
$(".class")
$$('#container li')
$$("#large:nth-child(even)")

Get element attributes

$("#id").getAttribute 'data-fruit'
$('input').getAttribute 'name'

Modifying elements

$('#box').classList.add 'wrap'
$('#box').classList.remove 'wrap'
$('#box').classList.toggle 'wrap'

Animate a modal dialog into or out of view

notice = $("#notice")
notice.classList.add "modal-visible"
notice.classList.remove "modal-visible"
notice.classList.toggle "modal-visible"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment