A light-weight jQuery-like DOM library
A light-weight jQuery-like library, Pick, with chained methods and event handlers.
Minified file size: ~5Kb
Gzipped file size: ~1.4Kb
Selecting element(s)
$(selector)
class
or id
or an HTML tag name$('#side, .n1, span')
Valid Selectors
$('.main')
$('#search')
$(document.querySelector('.main'))
, $(document.querySelectorAll('span'))
, and so on$($(document.querySelector('span')))
$(<A-NodeList>)
Converts a NodeList to an arrayMethods: Properties & Values
.val()
: Gets the value of the first matched element.val(<value>)
: Sets the value of all matched elements
.attr('<attribute>')
: Gets the standard attributes (like id
) of first matched element
.attr('<attribute>', <value>)
: Sets the standard attributes (like id
) of all the matched elements
.prop('<name>')
: Gets the non-standard properties of first matched element
.prop('<name>', <value>)
: Sets the non-standard properties of all the matched element
.data('<name>')
: Gets the data attribute (mentioned in data-*
) of the first matched element
.data('<name>', <value>)
: Sets the data attribute (mentioned in data-*
) of all matched elements
.text()
: Gets the text of the first matched element
.text(<value>)
: Sets the text of all the matched elements
.html()
: Gets the HTML of the first matched element
.html(<value>)
: Sets the HTML of all the matched elementsAll the set methods return the Pick object itself and hence, can be chained.
Methods: Class related
.addClass('<space-separated-class-names>')
: Adds the listed class names to all the selected elements.removeClass('<space-separated-class-names>')
: Removes the listed class names from all the selected elements.hasClass('<class-name>')
: Returns true if the first matched element has the specified classExcept for .hasClass()
, the remaining two methods return the Pick object and can be chained
Methods: DOM Traversal: Only on first matching element
.parent()
: Returns the parent element of first matched element as a Pick object.closest(<selector>)
: Returns the closest ancestor, matching the selector, of the first matched element as a Pick object, else empty array []
.find(<selector>)
: Returns the Pick object containing all the child elements that matching the selector, w.r.t the first matched element, else empty Pick object with 0
DOM elements.nextElement()
: Returns the next element of the first matched element.prevElement()
: Returns the previous element of the first matched elementMethods: DOM Insertions & Manipulations
.append(<String/Node/Pick>)
: Appends element to all matched elements.prepend(String/Node/Pick)
: Prepends element to all matched elements.after(String/Node/Pick)
: Inserts element after each matched element.before(String/Node/Pick)
: Inserts element before each matched element.remove()
: Removes each matched element from the DOMreplace(String/Node/Pick)
: Replaces each matched element with element passed as argumentAll these methods can be chained
Methods: Iterating through
.each(<callback>)
: Runs a callback on each of the matched elements. <callback>
is a function that receives reference to each DOM element as first argument .first()
: Returns the first element as a single element array (i.e as a Pick object, not DOM).last()
: Returns the last element as a single element array (i.e as a Pick object, not DOM).get(<index>)
Returns index
th element as a single element array (i.e as a Pick object, not DOM)Methods: Event Listeners
.on(event, [target], [handler])
: Initializes an event on the matched elements, or on the target
of each element if it is specified, while passing the handler
callback to be run on trigger of that event.off(event, [handler])
: Removes an event listener from all matched elements. If handler
callback is specified, it removes only those events from all matched elements that were initialized with this callback .once(event, [target], [handler])
: Similar to .on()
but the event handler can be triggered only once. After the first trigger, the event and handler is removed automatically.trigger(event)
: Triggers an event on all the matched elementsAll these methods can be chained
Methods: AJAX functionality with a promise
$.ajax(url, method, options)
: Performs an XHR Request. Built using fetch
API of JavaScript. The url
is any valid URL, method
is one of the HTTP methods (get
, post
, put
, etc). options
is an object that can contain additional information like headers
, body
, credentials
, etc.