sQuery

sQuery Official Site

This is a Very Small ES6+ Native Speed jQuery for Svelte, Vue3, React, SolidJS, and WEB.

Are you fed up with the modern js frameworks?

But you don't want to go back to jQuery, right?

Well, sQuery is great especially for people like you! It works great with Svelte, SolidJS, Vue.js and all other modern JavaScript frameworks.

sQuery just offers 3 things you want. Speed(native es6 JavaScript), Small(9.5kb), and Simple(as jQuery)!

TypeScript is also supported! (You can just use sq.t.ds)

sQuery's 'S' is for Simple, Small, Speed, and Svelte

Installation

sQuery Official Site Just download the latest sQuery.zip and set squery.min.js somewhere in your directory.

<script src="squery.min.js"></script>
<script>
  sq(function(){
    sq('body').css('background', 'skyblue')
    sq('body').append('<h1>Hello sQuery!</h1>')
  })
</script>

CDN

CommonJS (Easy)

<script src="https://cdn.jsdelivr.net/gh/exis9/squery@latest/squery.min.js"></script>

You can also specify the version number instead of latest!

<script src="https://cdn.jsdelivr.net/gh/exis9/squery@1.01/squery.min.js"></script>

Module Style (The new ES6 JavaScript import style)

https://cdn.jsdelivr.net/gh/exis9/squery@latest/sq.js
https://cdn.jsdelivr.net/gh/exis9/squery@latest/sq.min.js

↑To React users, I personally recommend the non-minified version since React can't recognize the minified syntax well. (React will minify in the end so it doesn't really matter, though)

<script type="module">
  import {sq} from 'https://cdn.jsdelivr.net/gh/exis9/squery@latest/sq.js';
  sq('body').html('hello!')
</script>

CommonJS (Easy)

<script src="https://cdn.jsdelivr.net/gh/exis9/squery@latest/squery.min.js"></script>
<script>
  // ↓This is the same to $(function(){ or $(document).ready(){ where in jQuery
  sq(()=>{
    sq('body').css('background', 'skyblue')
  })
</script>

jQuery-like style

<script src="https://cdn.jsdelivr.net/gh/exis9/squery@latest/squery.min.js"></script>
<script>
  // you can also define $ and use it just like jQuery! (var $ = sq is also fine!)
  var $ = sQuery
  
  // ↓The typical jQuery style is also supported!
  $(function(){
    $('body').css('background', 'skyblue')
  })
</script>

Module

<script type="module">
  // ↓sq is like $ wherein jQuery
  import {sq} from './sq.js';
  
  sq(()=>{
    sq('body').css('background', 'skyblue')
  })
</script>

<script type="module">
  // you can also use $ easily just like jQuery! (import {sQuery as $} is also fine!)
  import {sq as $} from './sq.js';
  
  // ↓The typical jQuery style is also supported!
  $(function(){
    $('body').css('background', 'skyblue')
  })
</script>

Svelte/Vue.js/React/Angular

<script>
  import {sq} from './sq.js';
  sq(()=>{
    sq('body').css('background', 'skyblue')
  })
</script>

More Documentation?

See sQuery Official Site All sQuery methods and installation tutorials!