gQuery.md

gQuery

A gSchool version of jQuery

• Create a gQuery.js file to your boxes lab application and add the following code to that file:

(function() {


  window.gQuery = gQuery;
  window.$ = window.gQuery;
})();

You will be Writing all your code for gQuery inside the IIFE.

Define a gQueryCtor constructor that has selector and elements properties.

Next define a gQuery function that takes a single param. gQuery has been set on the window for you, and the $ shorthand also made available.

(function() {


  window.gQuery = gQuery;
  window.$ = window.gQuery;
})();

Your gQuery function should be able to handle 3 different types of inputs:

• strings
• HTML elements
• Node Lists

Regardless of which type of input is passed in, the gQuery function should return a gQuery instance that has selector and element properties. typeof and instanceof will be helpful when creating your case statements to check for the above inputs.

i.e.

When a string is passed to gQuery it should instantiate a new instance and return an gQuery object like the one below.

gQueryCtor {selector: "div", elements: NodeList[21]}

Since you wont be using a selector when passing in HTML elements or node lists, the selector's value should simply be an empty string.

---

gQuery Methods

Once you have a functioning constructor and gQuery function create two methods. One should be called css and the other html. Define these methods on the prototype of your gQueryCtor.

.css

Your css method should accept two parameters, property and value.

If the css method is called with only the property parameter, then it should return the value of the property for the selected element. If there is a collection of elements than is should return the value of the property for the first element in the collection.

i.e.

$('div').css('color');

=> "rgb(0, 0, 0)"

If the css method is called with both parameters, then it should set the passed in value for that property on all the elements.

.html

Your html method will take one parameter, htmlString. When called with an argument your method should insert that string into all the elements selected.

i.e.

<div id='secretBox'></di>

$('#secretBox').html('meow')

=>

When html is called with no argument it should return the content of the element it was called on (or first element in the collection).

<div id='secretBox'>stuff and stuff</di>

$('#secretBox').html()

=> "stuff and stuff"

---

Bonus

• Implement the .arr() method.
• Implement a jQuery method of your choice.