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)
Size | sQuery | Cash | Zepto 1.2.0 | jQuery Slim 3.6.1 |
---|---|---|---|---|
Unminified | 13 KB | 36.5 KB | 58.7 KB | 238 KB |
Minified | 9.5 KB | 16 KB | 26 KB | 74 KB |
Minified & Gzipped | 2.9 KB | 6 KB | 9.8 KB | 24.8 KB |
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>
<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/[email protected]/squery.min.js"></script>
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>
<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>
<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>
<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>
If you encounter a module import error with TypeScript, you probably need a .d.ts file. Create a file named "sq.d.ts" in the project directory with the following code:
// ↓ Change the file path depends on your sQuery file location
declare module "https://cdn.jsdelivr.net/gh/exis9/squery@latest/sq.min.js" {
export const sQuery: any, sq: any, _SQ: any;
}
also if you have tsconfig.json, you probably should change "noImplicitThis" to false to kill the "this implicity" error.
// search noImplicitThis in tsconfig.json and change it to false
"noImplicitThis": false,
// search "module" in tsconfig.json and change it to ES6 (If you encounter the "Uncaught ReferenceError: exports is not defined" error)
"module": "ES6",
<script>
import {sq} from './sq.js';
sq(()=>{
sq('body').css('background', 'skyblue')
})
</script>
See sQuery Official Site All sQuery methods and installation tutorials!