Landing : Athabascau University

Unit 6 - Using Libraries - JQuery

Using Libraries

JQuery

This unit has taken me more than 10 hours to complete. That's because I needed to learn JQuery and test what I have learned as I go along the tutorial from www.w3shools.com/jquery and www.jquery.com.

The first JQuery I've tried was to convert my three JavaScript files addarganoil.js, addexfoliatingsoap.js addlavaclay.js into one file. This task was possible to achieve using JavaScript but with JQuery was easier as there is less code to write. The problem I faced was to call a custom function from a JQuery function. What I found out is I needed to add my custom function to the JQuery library and that is possible by adding the function as follow:

$.fn.myFunctionName = function(argumentList) {

     // code here

});

and then to call this function within another function you can do the following:

$.fn.functionName(argumentList);

Using this method you can also extend the JQuery method to make your own functions and they would be called like any other JQuery function.

I had a problem using JQuery to manipulate a div that moves upwards when the user clicks on the add button. This div indicates that the item has been added. When I use Jquery the behavior is unpredictable and the animation is slow. But, when I use pure JavaScript the animation works like a charm. So, I decided to leave that section that deals with the animation controlled by JavaScript.

The second use of Jquery was to assign a CSS class to my main navigation links depending on the current page the user is on. I needed to know which page the user is on so I used the window object to retrieve the location variable that holds the pathname of the page. Then from that pathname, I retrieve the href of the page. Finally, I compare the href of the page with the navigation links and if they match I assign the desired class to that that link can have a different background indicating which page the user is on. This task was trivial other than finding a way to retrieve the href.

My last use of JQuery was to rewrite the mycart.js file with JQuery. And I did this so that I can practice more and hoping that I would learn more from it. I found out that it is easier to work with JQuery than JavaScript but never forget that learning JavaScript first helped me a lot. The code is less in terms of line counts when writing it in JQuery.

With Jquery we can chain together actions or methods, and run multiple jQuery methods on the same element within a single statement. For example:

$("#myDiv").css("color""red")
  .slideUp(2000)
  .slideDown(2000);

this example chains together the css(), slide(), and slideDown() methods.

Using jQuery was not hard for me it actually made coding much easier.

Visit my my website by clicking this link.

This is my zipped version of my website:  unit6-jquery.zip

The files where I've used JQuery.  additem.js currentpagemenu.js mycartjquery.js

Comments

These comments are moderated. Your comment will not be visible unless accepted by the content owner.

Only simple HTML formatting is allowed and any hyperlinks will be stripped away. If you need to include a URL then please simply type it so that users can copy and paste it if needed.

(Required)

(Required)


Group members: this is the place for your learning diary. Use this to post your zipped-up site at least once each unit, and your reflections as often as you wish (at least once per unit). Please write your reflections directly in the post, not as attached files. Where you do need to attach documents, such as for unit 1 designs, use PDF, PNG or JPG formats. You can attach files using the 'Embed content' link in the editor.

QUICK COURSE LINKS:  Add blog post - Read latest group postsFAQs: Course process : Site design : HTML : CSS : JavaScript : JQuery : AJAX : Misc