m4q - DOM manipulation helper
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build fix css() reset property when empty value Jan 20, 2019
src fix css() reset property when empty value Jan 20, 2019
test fix stop animation Jan 19, 2019
.gitignore upd readme Dec 24, 2018
Gruntfile.js fix css() reset property when empty value Jan 20, 2019
LICENSE add grunt, readme, license Dec 24, 2018
README.md fix prev, next, add prevAll, nextAll Jan 14, 2019
TODO.md upd todo Dec 24, 2018
package-lock.json fix offset Jan 11, 2019
package.json fix offset Jan 11, 2019

README.md

m4q - DOM manipulation helper

The m4q is a small library for DOM manipulation. This helper designed for Metro 4 project to replace jQuery. m4q is not a complete jQuery equivalent and there are differences.

Version 0.1.0 - alpha

Status

develop Status dependencies Status devDependencies Status full size gzip full gzip min License: MIT

Features (already implemented)

Population

  • m4q - main

To add aliases $ and $m for m4q you can use method m4q.global() If window.$ and/or window.$M is undefined, m4q use its.

  • $M() - shorten alias
  • $() - short alias

To relinquish m4q's control of the $ and $M variables, you can use method m4q.noConflict([removeAll]).

Constructor

  • $( "div" ) - select by tag name
  • $( ".div" ) - select by class name
  • $( "#div" ) - select by id
  • $( "<div>" ) - create by tag name
  • $( "<div>", context ) - create in context
  • $( "<div>any_text_or_html</div>" ) - create by html
  • $( "<div>...</div><div>...</div>" ) - create by tags
  • $( "<div>", {...} ) - create by tag with attributes as object
  • $( $(...) ) - create by m4q as argument
  • $( jQuery(...) ) - import from jQuery
  • $( function(){} ) - Create document.ready function

Loop

  • $.each()
  • $(...).each()

Visibility

  • $(...).hide() - hide elements (used dispaly)
  • $(...).show() - show element (used dispaly)
  • $(...).visible(true|false) - set elements visible or invisible (used visibility)

Animation

  • $.animate(...)
  • $(...).animate(...)
Easing functions
  • $.easing.linear
  • $.easing.easyIn
  • $.easing.easyOut
  • $.easing.easyInOut
  • $.easing.easyInQuad
  • $.easing.easyOutQuad
  • $.easing.easyInOutQuad
  • $.easing.easyInCubic
  • $.easing.easyOutCubic
  • $.easing.easyInOutCubic
  • $.easing.easyInQuart
  • $.easing.easyOutQuart
  • $.easing.easyInOutQuart
  • $.easing.easyInQuint
  • $.easing.easyOutQuint
  • $.easing.easyInOutQuint
  • $.easing.easyInElastic
  • $.easing.easyOutElastic
  • $.easing.easyInOutElastic
  • $.easing.easyInSin
  • $.easing.easyOutSin
  • $.easing.easyInOutSin

Effects

  • $(...).fadeIn( )
  • $(...).fadeOut( )
  • $(...).slideIn( )
  • $(...).slideOut ()

Finding

  • $(...).get(index)
  • $(...).contains(selector)
  • $(...).is(selector)
  • $(...).find(selector)
  • $(...).children(selector)
  • $(...).parent(selector)
  • $(...).closest(selector)
  • $(...).siblings(selector)
  • $(...).prev(selector)
  • $(...).next(selector)
  • $(...).filter(selector)
  • $(...).last()
  • $(...).first()
  • $(...).ind()
  • $(...).even()
  • $(...).odd()

Html and text

  • $(...).html() - get innerHTML
  • $(...).html(value) - set innerHTML
  • $(...).text() - get textContent
  • $(...).text(value) - set textContent
  • $(...).innerText() - get innerText
  • $(...).innerText(value) - set innerText
  • $(...).outerHTML() - get outerHTML
  • $(...).empty() - clear innerHTML

CSS and classes

  • $(...).style()
  • $(...).style(name)
  • $(...).css(name)
  • $(...).css(name, value)
  • $(...).css({...})
  • $(...).addClass(...)
  • $(...).removeClass(...)
  • $(...).toggleClass(...)
  • $(...).containsClass(...)
  • $(...).hasClass(...)
  • $(...).clearClasses()

Attributes

  • $(...).attr() - get all attributes
  • $(...).attr(name) - get attribute by name
  • $(...).attr(name, value) - set attribute by name
  • $(...).attr({...}) - set attributes
  • $(...).removeAttr(name) - remove attribute
  • $(...).toggleAttr(name, value) - remove attribute if exists, else set attribute

Manipulation

  • $(...).append( )
  • $(...).appendTo( )
  • $(...).prepend( )
  • $(...).prependTo( )
  • $(...).insertAfter( )
  • $(...).insertBefore( )
  • $(...).after( )
  • $(...).before( )

Events

  • $(...).on( )
  • $(...).one( )
  • $(...).off( )
  • $(...).trigger( )
  • $(...).ready( )
Event aliases
  • $(...).blur(selector, handler)
  • $(...).focus(selector, handler)
  • $(...).resize(selector, handler)
  • $(...).scroll(selector, handler)
  • $(...).click(selector, handler)
  • $(...).dblclick(selector, handler)
  • $(...).mousedown(selector, handler)
  • $(...).mouseup(selector, handler)
  • $(...).mousemove(selector, handler)
  • $(...).mouseover(selector, handler)
  • $(...).mouseout(selector, handler)
  • $(...).mouseenter(selector, handler)
  • $(...).mouseleave(selector, handler)
  • $(...).change(selector, handler)
  • $(...).select(selector, handler)
  • $(...).submit(selector, handler)
  • $(...).keydown(selector, handler)
  • $(...).keypress(selector, handler)
  • $(...).keyup(selector, handler)
  • $(...).contextmenu(selector, handler)
  • $(...).load(selector, handler)

Ajax

  • $.ajax({...})
  • $.get(url, data, success, error, dataType) - alias for $.ajax for GET method
  • $.post(url, data, success, error, dataType) - alias for $.ajax for POST method
  • $.put(url, data, success, error, dataType) - alias for $.ajax for PUT method
  • $.patch(url, data, success, error, dataType) - alias for $.ajax for PATCH method
  • $.delete(url, data, success, error, dataType) - alias for $.ajax for DELETE method
  • $.json(url, data, success, error, dataType) - alias for $.ajax for DELETE method

Data

  • $.hasData(el)
  • $.data(el, name, data)
  • $.removeData(el, name)
  • $(...).data()
  • $(...).data(key)
  • $(...).data(key, value)
  • $(...).removeData(key)

Value

  • $(...).val( )
  • $(...).val( value )

Proximity

  • $.proxy( fn, context )

Position end size

  • $(...).height( )
  • $(...).height( val )
  • $(...).width( )
  • $(...).width( val )
  • $(...).outerHeight( )
  • $(...).outerHeight( val )
  • $(...).outerWidth( )
  • $(...).outerWidth( val )
  • $(...).offset( )
  • $(...).position( excludeMargin )