@kidonng/pq v0.1.0

pq - DOM with sugar

This is a experimental project. Use at your own risk.

pq is a Proxy-based alternative to jQuery. It makes use of modern JavaScript feature and DOM API to retain simplicity and usability.

Example

Live demo

<p>Apple</p>
<p class="quadcolor-logo">Microsoft</p>
<p class="quadcolor-logo">Google</p>
<p>Facebook</p>

<script>
$('p') // [p, p, p, p]

$('p').filter(function(element) { // You can access native JavaScript method
  if (element.classList.has('quadcolor-logo')) { // And native properties, of course
    return element
  }
}) // [p, p]

$('.quadcolor-logo').removeClass('quadcolor-logo').addClass('tech-company') // Extra methods provided by pq, chainable ⛓️
$('.tech-company').length === 2 // true
// Elements on steroids!
$('.tech-company')[0].next().text() === 'Google' // true
</script>

Motivation

Native DOM methods are good, but they are not good enough. What if we combine native methods and jQuery methods all together?

pq wraps a Proxy around elements and arrays, enabling you to access both native methods/properties and extra methods provided by pq, and original elements and arrays remain untouched.

API

pq's API is mostly compatible with jQuery, though only a few are implemented for the moment.

*pq only

• html, css, text, val
• hide, show, toggle
• clone, empty
• is, prev, next, find, siblings
• addClass, removeClass, toggleClass, hasClass, replaceClass*, class *
• attr, removeAttr
• data, removeData
• on, off, click
• load, pq.getJSON, pq.getScript, pq.getText*