vquery

vQuery is a simple, light-weight, vanilla JS wrapper for jQuery-like syntax.

Install Using NPM

npm install --save vquery

import v from 'vquery'

v(selector, element, or string).method(props);

Install Using The Browser

Download it from the repository, or you can use a CDN.

• JSDelivr
• cdnjs

<script src="v.min.js"></script>

API

The methods below work like they do with jQuery, except they are just wrappers around document.querySelectorAll, and the associated vanilla JS dom manipulation functions.

Like jQuery and many other similar libraries, most of the methods can be chained.

Below are a few methods available. For the complete API documentation, visit the vQuery website.

Node retrieval

• .nodes (Alias: .ns)

v('.class-thing').nodes

->  [
    <div class="class-thing">One</div>, 
    <div class="class-thing">Two</div>, 
    <div class="class-thing"><span id="three">Three</span></div>
    ]

• .node (Alias: .n)

v('.class-thing').node;

-> <div class="class-thing">One</div>

• .nonElement (Alias: .ne)

v('This string is not an element').nonElement;
-> "This string is not an element"

• .get(index)

v('.class-thing').get(1).n;

-> <div class="class-thing">Two</div>

• .find(CSS selector|Element)

v('.class-thing').get(2).find('#three').node

-> <span id="three">Three</span>

• .length

v('.class-thing').length
-> 2

• .click(function)

v('body > div.pre-render').click(myCleverClickEvent);

• .children(CSS selector)

• Returns an array of child nodes, or filters child nodes if a CSS selector parameter is passed to it.

• .allChildren(CSS selector)

• Like .children(), it returns an array of child nodes, but instead of returning just the first level of children, it deeply recurses every child node and returns an array of every element under the selected node at all levels of children.

• .attr(object|string|Key, Value)

• Pass an object of camel cased attribute keys, or a key/value pair of strings to set attribute(s). Calling the method without a parameter will return an object of the selected element's attributes.

• .css(object)

• Pass an object of camel cased style keys, or pass no parameter to return the computed style of the selected element.

• .ajax(POST|GET, URL, options.data|options.chain)

  • AJAX request method returning a Promise. Set options.chain to true to pass the data through vQuery's context.

v().ajax('GET', 'https://myawesome.net/api/request/').then((data)=>{
  // Do something with the data.
}).catch((err)=>{
  // Do something with the error.
});
v().ajax('GET', 'https://myawesome.net/api/request/', {chain: true}).then((data)=>{
  console.log(data.nodes);
-> {...}
  console.log(data.type());
-> 'object'
}).catch((err)=>{
  // Do something with the error.
});

• .mixin(object)
  • This method allows you to pass vQuery's returned result to another library. The mixin should be at the end of the method chain.
  • Example using Lodash:

v([]).mixin({_:_}).isArray();
-> true

• Example using jQuery:

v(':header').mixin({$:$})

-> [<h3 id=​"install-using-npm">​Install Using NPM​</h3>​, <h3 id=​"install-using-the-browser">​Install Using The Browser​</h3>​, <h3 id=​"experiment-with-vquery-now">​Experiment with vQuery Now​</h3>​, <h3 id=​"breaking-changes-in-4-3-0">​Breaking changes in 4.3.0​</h3>​,...]