These free mini-courses will give you a strong foundation in web development. Track your progress and access advanced courses on HTML/CSS, Ruby and JavaScript for free inside our student portal.
Scroll down...
You can't really understand your tools until you've had a chance to look at them up close and personal. In this assignment, you'll build many of jQuery's core functions on your own to get a solid understanding of how it works under the hood.
You've worked with constructors before but let's do a quick warm up to clarify that they really aren't all that magical.
Foo
which returns a simple Foo
instance containing a sample property and method when you call it with the new
keyword.Bar
which returns a simple anonymous object which is otherwise the same as the one you created using Foo
above but doesn't need to be called using new
.Verify:
var foo = new Foo();
foo instanceof Object
//=> true
foo instanceof Foo
//=> true
var bar = Bar();
bar instanceof Object
//=> true
bar instanceof Bar
//=> false
Now comes the fun part... you can actually set up your constructor to return an instance regardless of whether it is invoked with the new
keyword or not. Create a constructor function Baz
that returns an instance of Baz
when invoked with and without the new
keyword.
Verify that:
var baz = new Baz();
baz instanceof Baz
//=> true
baz = Baz();
baz instanceof Baz
//=> true
Note: this SO post should be helpful.
Let's do a quick warmup to verify that you understand how to define functions which take other functions. In this case, build a SimpleObject
constructor which makes an object that contains a collection inside of it and also a method called each
which allows you to iterate over that collection using a passed-in function:
myObj = new SimpleObject();
myObj.collection = [1,"foo",3];
myObj.each( function( el, index ) {
console.log( "Item " + index + " is " + el);
})
// Item 0 is 1
// Item 1 is foo
// Item 2 is 3
Now let's add a method to the SimpleObject
function itself. Let's create a method each
that takes two parameters. The first is a collection
, and the second is a callback function that passes the element and index as arguments. This should result in the following being possible:
var collection = ['foo', 'bar', 'fiz', 'baz'];
SimpleObject.each(collection, function(el, index) {
console.log( "Item " + index + " is " + el);
});
Remember JavaScript functions are objects too, so creating properties on them is as simple as:
var Foo = function() {};
Foo.myProperty = 'Property on a function!';
Foo.myMethod = function() {
console.log(Foo.myProperty);
console.log('Method on a function!');
};
Build each of the following jQuery functions on your own using the native JavaScript DOM methods and properties. It will be a scavenger hunt through these methods and properties to find the correct ones to use for each case.
jQuery()
function (Docs), which takes a string representing a CSS selector and returns a collection of elements (or the single element) that match it. Add the following functionality: Note: assume only single selectors and not chained or nested ones like ".some-class someElement"
jQuery(".some-class")
jQuery("#some-id")
jQuery("div")
Make your jQuery()
function return a jQuery object which contains your collection and any methods you want to run on it (see the warm up again for a hint on how). Read this description of jQuery's object). You will add properties and methods to this object shortly.
You'll need to implement a few simple array-like methods and properties on this object which treat it almost like an array but which really operate on the collection contained inside it, for instance length
:
var myQuery = jQuery(".some-class")
myQuery.length
//=> 5
Allow indexing into this collection inside your object by using a new method called idx()
which approximates the functionality of standard array indexing using brackets ([]
) but returns the raw DOM object:
var myQuery = jQuery(".some-class")
myQuery.idx(0)
//=> <div class="some-class">Text here</div>
Allow your jQuery()
function to take a DOM node as an input instead of a string. Passing a single DOM node to your jQuery object should result in its collection being an array with a single element. That element should be the passed DOM node.
// Assume there's a `<div id="some-id"></div>`
// somewhere in the DOM for this example
var someDiv = document.getElementById("some-id")
var myQuery = jQuery(someDiv)
myQuery.length
//=> 1
myQuery.idx(0)
//=> <div id="some-id"></div>
Alias your jQuery()
function as $()
.
Now it's time to allow users to get and set the properties of a particular element or collection of elements by writing the methods below on your jQuery object. You will first need to build in jQuery's "implicit iteration" functionality so the methods get run on the whole collection.
Many of these are both a getter (no arguments) and a setter (with arguments). The "getter" typically works on the first (or only) element in the collection while the "setter" usually works on the whole collection of elements. Note that many of these methods should return a jQuery object so they can be chained together.
Don't use querySelector
for any of this
hasClass()
(Docs)addClass()
(Docs)removeClass()
(Docs)toggleClass()
(Docs)val()
(Docs) Getter & Settercss()
(Docs) Getter & Setterheight()
(Docs) Getter & Setterwidth()
(Docs) Getter & Setterattr()
(Docs) Getter & Setterhtml()
(Docs) Getter & SetterjQuery("div .some-class .some-other-class")
. You may use the new querySelector method for this.