Table of contents

M4Q

The m4q is a small library for DOM manipulation and animation and send/receive ajax requests.

About

The repository of m4q you can be found here.

Begin from 4.3.0 Metro 4 no longer depends on jquery. Now Metro 4 contains self own small library M4Q (10kb in gzip) for DOM manipulation. M4Q is not based on jquery code. M4Q library is built into Metro 4.

M4Q is not a complete jquery equivalent and there are differences.

Population

Main object has name m4q. m4q may capture and relinquish $ with methods m4q.global() and m4q.noConflict(). Automatic capture $ if it free.

Further in the documentation $ will be used to specify the reference to the m4q object.

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
Loops
  • $.each()
  • $(...).each()
Ajax
  • $.ajax({...})
  • $.get(url, data, options)
  • $.post(url, data, options)
  • $.put(url, data, options)
  • $.patch(url, data, options)
  • $.delete(url, data, options)
  • $.json(url, data, options)
  • $(...).load(url, data, options)
Visibility and effects
  • $(...).toggle()
  • $(...).hide()
  • $(...).show()
  • $(...).visible()
  • $(...).fadeIn( )
  • $(...).fadeOut( )
  • $(...).slideIn( )
  • $(...).slideOut ()
Animation
  • $.animate(...)
  • $(...).animate(...)
Contains functions
  • $(...).index()
  • $(...).get()
  • $(...).eq()
  • $(...).contains()
  • $(...).is()
  • $(...).find()
  • $(...).children()
  • $(...).parent()
  • $(...).closest()
  • $(...).siblings()
  • $(...).prev()
  • $(...).next()
  • $(...).filter()
  • $(...).last()
  • $(...).first()
  • $(...).ind()
  • $(...).even()
  • $(...).odd()
Attributes
  • $(...).attr()
  • $(...).attr(name)
  • $(...).attr(name, value)
  • $(...).attr({...})
  • $(...).removeAttr(name)
  • $(...).toggleAttr(name, value)
  • $(...).id(value)
  • $(...).prop()
  • $.meta(...)
  • $.doctype()
  • $.html()
Html, text and value
  • $(...).html()
  • $(...).html(value)
  • $(...).text()
  • $(...).text(value)
  • $(...).innerText()
  • $(...).innerText(value)
  • $(...).outerHTML()
  • $(...).empty()
  • $(...).val( )
  • $(...).val( value )
Css and classes
  • $(...).style()
  • $(...).style(name)
  • $(...).css(name)
  • $(...).css(name, value)
  • $(...).css({...})
  • $(...).addClass()
  • $(...).removeClass()
  • $(...).toggleClass()
  • $(...).hasClass()
  • $(...).clearClasses()
Position and size
  • $(...).height( )
  • $(...).height( val )
  • $(...).width( )
  • $(...).width( val )
  • $(...).outerHeight( )
  • $(...).outerHeight( val )
  • $(...).outerWidth( )
  • $(...).outerWidth( val )
  • $(...).offset( )
  • $(...).position( excludeMargin )
Manipulations
  • $(...).append( )
  • $(...).appendTo( )
  • $(...).prepend( )
  • $(...).prependTo( )
  • $(...).insertAfter( )
  • $(...).insertBefore( )
  • $(...).after( )
  • $(...).before( )
Data
  • $.hasData(el)
  • $.data(el, name, data)
  • $.removeData(el, name)
  • $(...).data()
  • $(...).data(key)
  • $(...).data(key, value)
  • $(...).removeData(key)
Events
  • $(...).on( )
  • $(...).one( )
  • $(...).off( )
  • $(...).fire( )
  • $(...).trigger( )
  • $(...).ready( )
  • $(...).blur( )
  • $(...).focus( )
  • $(...).resize( )
  • $(...).scroll( )
  • $(...).click( )
  • $(...).dblclick( )
  • $(...).mousedown( )
  • $(...).mouseup( )
  • $(...).mousemove( )
  • $(...).mouseover( )
  • $(...).mouseout( )
  • $(...).mouseenter( )
  • $(...).mouseleave( )
  • $(...).change( )
  • $(...).select( )
  • $(...).submit( )
  • $(...).keydown( )
  • $(...).keypress( )
  • $(...).keyup( )
  • $(...).contextmenu( )
Utils
  • $.merge(...)
  • $.type( ... )
  • $.camelCase( ... )
  • $.isPlainObject( ... )
  • $.isEmptyObject( ... )
  • $.isArrayLike( ... )
  • $.isSelector( ... )
  • $.isVisible( ... )
  • $.not( ... )
  • $.parseUnit( ... )
  • $.proxy( fn, context )
  • $.remove( selector )
  • $.sleep( ms )
  • $.fn.items( )
  • $.fn.clone( )
  • $.fn.merge(...)
  • $.setTimeout( ... )
  • $.clearTimeout( ... )
  • $.setInterval( ... )
  • $.clearInterval( ... )
  • Promise( ... )
  • setImmediate( ... )
  • clearImmediate( ... )