Welcome to SQuery.

SQuery is a simple Javscript Library to ease the transition from JQuery to Vanilla JS.

SQuery is only 4kb in size. 90kb smaller then JQuery

JQuery:


var jQueryElement = $("#mytargetElement");

SQuery:


var sQueryElement = $.find("#mytargetElement");

Why ditch JQuery?

So JQuery is great... It's simple and easy to use. But if you're anything like me you probably only use 10% of it (if that). Upon checking out the articles and videos below I decided Vanilla Javascript was the way to go:

As an overview of the above:

JQuery is often unecessary bloat (90kb larger then SQuery)
JQuery isn't needed to fix browser inconsistancies (they are now pretty easy to work around)
JQuery is about 90% slower then standard Javascript at finding elements

So in short large performance gains are the main reason to ditch JQuery.

But a bunch of the stuff I use is dependant on JQuery...

Bootstrap

Not So! Check out : thednp.github.io/bootstrap.native

Ratchet/push.js

Nope! Looking at the souce you will find ratchet is written in Vanilla Javascript.

slick.js/owl carousel/other sliders

True... But you can use the one from bootstrap.native or Lory.

JQuery Validation

For ASP Developer's JQuery validation is often at the core of MVC projects. I have yet to find a swap out alternative but intend to tackle this shortly.

Usage

Depandancies: None
CDN : None

Loading SQuery on it's own in a script tag is not recomended. Instead SQuery should be bundled with all the other javascript magic you come up with to form a single awesome Javascript file of joy.

IMPORTANT WARNING: SQuery will not play nicely with JQuery in it's default set up, due to the use of $ in both libraries. If you want or need to use JQuery it's best to avoid SQuery.

Functions

SQuery is a lightweight framework for you to build upon. If you cant find something you want then you will need to include an additional library such as the Bootstrap.Native library. Or alternitivly create the addtional functionality from scratch. Links to where you can find recources to help you extend SQuery using Vanilla Javascript can be found in the Extending SQuery section.

Finding Elements

$.find (selector)

Finds the first matching element with provided selector.

A selector can be any valid CSS selector. Below are some simple examples.

Example: Find by id

Finds the fisrt matching element with provided id.


var sQueryElement = $.find("#mytargetElement");

Example: Find by class

Finds the fisrt matching element with provided class.


var sQueryElement = $.find(".mytargetElement");

Example: Find by data-attribute

Finds the fisrt matching element with provided data-attribute.


var sQueryElement = $.find("[data-test]");

$.findAll (selector, function(element, count))

Finds all matching elements with provided selector.

Example

Find all elements with the class ".className" and log the element in the console.


$.findAll(".className", function (el, i) {
console.log(el);
});

Class Manipulations

These are adapted from Appolo.js by Todd Motto

$.hasClass (element, class)

Check if element has a class.

Example

elementHasClass returns true if "mytargetElement" has the class ".test".

elementHasClass false if "mytargetElement" does not have the class ".test".


var elementHasClass = $.hasclass("#mytargetElement", ".test");

$.addClass (element, class)

Add a class to an element.

Example

Adds class ".test" to element with id "example"


$.addClass("#example", ".test");

$.removeClass(element, class)

Removes a class from an element.

Example

Removes class ".test" from element with id "example"


$.removeClass("#example", ".test");

$.toggleClass (element, class)

Removes a class from an element if it exists and adds it if not.

Example

Add class ".test" to element with id "example" if it doesnt exist/remove it if it exists.


$.toggleClass("#example", ".test");

Events

$.on (element, event, function)

Bind a function to an event.

Example

When element with id "example" is clicked, log "clicked button" to the console.


$.on("#example", "click", function(e){
    e.preventDefault();
    console.log("clicked button");
    });

$.documentReady (function)

A function that fires when the DOM is fully loaded..

Adapted from youmightnotneedjquery.com/#ready

Example


$.documentReady(function(){
    //Putting functions inside here is good plan.
    });

Attribute Finding/Setting

$.attr (element, get, set)

Find or set an attribute value of an element

Example: Finding a value

Find a link with the id "example". Find the elements href value and save to a variable named "href"


var href = $.attr("#example", "href");

Example: Setting a value

Find a link with the id "example". Find the elements href value and change value to "http://treefishuk.github.io/SQuery"


$.attr("#example", "href", "http://treefishuk.github.io/SQuery");

$.data (element, get, set)

Find or set a HTML5 data attribute of an element

Example: Finding a value

Find a link with the id "example". Find the elements data-test value and save to a variable named "test"


var test = $.data("#example", "test");

Example: Setting a value

Find a link with the id "example". Find the elements data-test value and change value to "newShinny"


$.data("#example", "test", "newShinny");

Hide/Show

$.hide (element)

Adds a class of "hidden" to an element. To animate the effect use css animations. I recomend Daniel Eden's : Animate.css

Example

Hide element with id "example".


$.hide("#example");

$.show (element)

Removes a class of "hidden" from an element. To animate the effect use css animations. I recomend Daniel Eden's : Animate.css

Example

Show element with id "example".


$.show("#example");

Inserting/Ammending/Removing Content

$.html (element, content)

Replace the inner HTML of an element.

Example

Find a div with the id "example" and add in some new content.


$.html("#example", "<h1>New Heading</h1><p>New paragraph</p>");

$.before (element, content)

Add new content before opening tag of targeted element.

Example

Find a div with the id "example" and new div before it.


$.before("#example", "<div id='newDiv'></div>");

$.after (element, content)

Add new content after closing tag of targeted element.

Example

Find a div with the id "example" and new div after it.


$.after("#example", "<div id='newDiv'></div>");

$.prepend (element, content)

Add new content after opening tag of targeted element.

Example

Find a div with the id "example" and new content inside it before any other content.


$.prepend("#example", "<div id='newDiv'></div>");

$.append (element, content)

Add new content before closing tag of targeted element.

Example

Find a div with the id "example" and new content inside it after any other content.


$.append("#example", "<div id='newDiv'></div>");

$.remove (element)

Removes element from the page.

Example

Find a div with the id "example" remove it.


$.remove("#example");

AJAX

$.ajax ({options})

Ajax functions have been bundled into one helper.

Example: GET

Get response and log in console.


$.ajax({
    url: "http://treefishuk.github.io/SQuery/gettest",
    type: "GET",
    success: function (results) {
        console.log(results);
    }
});

Example: JSON

Return JSON and log response to console.


$.ajax({
    url: "http://date.jsontest.com",
    type: "JSON",
    success: function (results) {
        console.log(results);
    }
});

Example: POST

Send form data to url on button click.

Serialize function is a modified version of form-serialize.


$.on("#submitBtn", "click", function(e){
    
    e.preventDefault();
    var formData = $.serialize("#myForm");
        $.ajax({
            url: "test.aspx",
            type: "POST",
            data: formData,
            success: function (results) {
                console.log(results);
            }
        });
});

Extending SQuery

Extending

Extending SQuery is easy:


$.myNewFunction = function() {
//Do something awesome here
});

Resources

These sites really helpful for vanilla Javascript functinality: