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 UI no longer depends on jquery. Now Metro UI 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 UI.

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