Skip to content

Instantly share code, notes, and snippets.

@zkwsk
Created July 23, 2017 15:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zkwsk/d01c0844f30f101804714e18f2e0188f to your computer and use it in GitHub Desktop.
Save zkwsk/d01c0844f30f101804714e18f2e0188f to your computer and use it in GitHub Desktop.
Homework exercise - make your own implementation of jQuery.

Most modern javascript practices recommend avoiding jQuery, as there is a lot of overhead involved in loading jQuery. We have been teaching jQuery as an easy way to get started with manipulating the DOM and performing AJAX requests, but the purpose of this exercise is to learn to not rely on jQuery and at the same time learn how to build a library.

So at the end of this exercise you should have a library that you could drop in instead of jQuery.

First, have a look at this website which shows how to re-implement a lot of jQuery functions (http://youmightnotneedjquery.com). You are free to steal these implementations or to create your own, but it is suggested that you try not to steal anything you don't understand. For help you are always welcome to post on Slack, but try also to use sites like stackoverflow.com to get help from the outside community. It's generally much more efficient.

Second, have a look at the jQuery documentation for the functions below. Learn how each function works and try to do your own implementation in vanilla javascript (i.e. without relying on other libraries).

Make sure that you wrap up your library in an IIFE and expose the needed functions. You can call your library '$' so you can call it in the same way as jQuery or you can give it a fancy name of your own choice.

Please implement at least the following 10 jQuery functions. If you want to implement more, please do.

Ajax (only the get request) http://api.jquery.com/jQuery.ajax/

Fade In http://api.jquery.com/fadeIn/

Hide http://api.jquery.com/hide/

Show http://api.jquery.com/show/

Add class http://api.jquery.com/addclass/

Remove class http://api.jquery.com/removeclass/

Append http://api.jquery.com/append/

Before http://api.jquery.com/before/

Filter http://api.jquery.com/filter/

Find Children http://api.jquery.com/find/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment