Welcome to WiJ.com

In partnership with Yoobee ACG School of Design this website was created to teach a basic understanding of jQuery and jQuery plugins by showing examples and providing external links so you can continue your learning experience.
This site is best viewed on desktop or tablet.

Scroll to continue through the site.

What exactly is jQuery?

jQuery is a JavaScript Library used to simplify JavaScript to HTML interactions. jQuery is designed to simplify a ton of tasks by writing less code. jQuery make things like animating, event handling, and DOM manipulation easier than JavaScript. For more info on what jQuery can do visit Here

How do I install jQuery?

The first thing we need is access to jQuery, there are two ways to do this. The first is to download it from the site and plug it in the way you would a Javascript file. The second method is to use a CDN which gets the information from a server instead of having to have all the info on your site. Some of the jQuery being used on the site is being accessed by
a CDN. 


This is an example of a jQuery CDN

<script 
    src="https://code.jquery.com/jquery-3.1.1.slim.min.js">
</script>

How do I use jQuery?

jQuery has a long list of functions, methods and attributes all of which I cannot explain on this small site however I can explain the most commonly used piece of jQuery, the inbuilt select tool. It's pretty simple in comparison to how you select some HTML in JavaScript, what you do to select something is "$('This is what I am selecting')". After the selector you place in a method 

                                    
I'm selecting the paragraph and setting the text 
color to white

$(".text-content").css("color","white");

In this example i'm appending (inserting) some text
into this example.

$(".snip").append(<p>This is being appended.</p>);

jQuery Plugins

A jQuery plugin is JavaScript code written which uses jQuery methods that can be used in conjunction with jQuery to do all kinds of things. For example this website is built on a plugin which allows people to easily create fullpage slideshow websites or applications.

jQuery plugin examples

jQuery plugins come in all shapes and sizes, each plugin is unique and useful in some way or another. This plugin generates random colors except with certain properties like a specific Hue or a certain brightness.

Sweet Alerts!

This example shows off a useful little plugin called Sweet Alert, it makes basic alerts look sweet. 

                                    
This is the setup to the basic sweet alert example.

$('#sweetalert').click(function () {
        swal({
            title: "Sweet Alert Example",
            text: "This is an example of Sweet Alert,
            a plugin which creates sweet looking alerts!",
            type: "success",
            showCancelButton: true,
            confirmButtonText: "Sweet!",
            cancelButtonText: "Rad!",
            closeOnConfirm: false,
            closeOnCancel: false
        },
                function (isConfirm) {
                    if (isConfirm) {
                        swal("Sweet!", "You chose Sweet,
                        that's rad!", "success");
                    } else {
                        swal("Rad!", "You chose Rad,
                        Sweet!", "success");
                    }
                });
    });

The possibilities of jQuery and jQuery plugins are limitless

jQuery and jQuery plugins have so many options, this plugin makes planets on your page. Whilst making this site I found so many different types of plugins.

Plugins

FullPage.js: This plugin creates the layout of the page.
FitText: This plugin makes the Headers fit to the frame no matter the size.
Planetarium: This plugin creates the spinning earth.
Sweet Alert: This plugin creates sweet alerts.
Random Color: This plugin creates random colors.
Jumble: This plugin allows you to make a element change color in a random sequence.
Secret Nav: This plugin creates a hidden nav that can only be shown when a certain element is clicked.