What is JQuery
JQuery is a new type of JavaScript library. It is not a huge, bloated framework promising the best in AJAX – nor is it just a set of needlessly complex enhancements – jQuery is designed to change the way that you write JavaScript.
JQuery is a JavaScript library that takes this motto to heart: Writing JavaScript code should be fun. JQuery achieves this goal by taking common, repetitive, tasks, stripping out all the unnecessary markup, and leaving them short, smart and understandable.
JQuery is an amazing JavaScript library that makes it easy to create wonderful web effects in just a few lines of code. As the website says:”
JQuery is a JavaScript library that takes this motto to heart: Writing JavaScript code should be fun. JQuery achieves this goal by taking common, repetitive, tasks, stripping out the entire unnecessary markup, and leaving them short, smart and understandable.”
Maybe you are thinking… “Why I would need another JavaScript library”? Just give a try and you will see how simple and powerful it is even if you have already used Moo.fx, Scriptaculous, TW-SACK or Prototype.
Why I should use JQuery?
Simple. In just one glance at the source code of a page using JQuery you’ll see how easy it is to use, how much it accomplishes in so few lines of code, and how graceful it is.
My mind was opened one day when I stumbled across some code written with JQuery. I was flipping through the RSS feeds and reading my daily dose of web design blogs when I came across an example of JavaScript loveliness that used JQuery. Truth be told, the code on that site had some browser related bugs… but the concept was something I hadn’t seen before.
What about the code?
The code looked almost simple. Like nothing I had seen before. It made sense. I started reading through the documentation and was amazed to see how much could be done with so little extra code.
When you can use JQuery?
You should use JQuery when you need:
- A small library that gives you powerful control over the Document Object Model
- With very little effort or work on your part
Or
- Quick access to AJAX
- Without a lot of bloat (overhead – wasted code)
- And some basic animation effects to spice things up
- jQuery supports CSS 1-3 and basic XPath.
- jQuery is about 19kb in size.
- jQuery works in Firefox 3.0+, Internet Explorer 7+, Safari 3.1+, and Opera 8.5+.
- jQuery and Prototype can be used together!
- jQuery owns a strong and very flexible mechanism for adding in methods and functionality, bundled as plugins
But…
If you need super fancy effects for animation, drag and drop, and super smooth animation then you’ll probably want to use Prototype and one of the many great library created to enhance the effects.
What does minify mean?
Minify, in computer programming languages, is the process of removing all unnecessary characters from source code, without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments and sometimes block delimiters; which are used to add readability to the code, but are not required for it to execute.
Minified source code is especially useful for interpreted languages deployed and transmitted on the Internet (such as JavaScript), because it reduces the amount of data that needs to be transferred. Minified source code may also be used as a kind of obfuscation.
Minify Example:
1: <target name=”minifyJs”>
2: <foreach item=”Line” in=”JavaScripts.txt” property=”jsFilename”>
3: <echo message=”Minifying JavaScript file: ${jsFilename}” />
4: <exec basedir=”.”
5: program=”jsmin.exe”
6: commandline=”${jsFilename} tempJS_min.js”
7: workingdir=”.”
8: failonerror=”true” />
9: <move file=”tempJS_min.js” tofile=”${jsFilename}” overwrite=”true” />
10: </foreach>
11: </target>
The $(document).ready() function has a ton of advantages over other ways of getting events to work. First of all, you don’t have to put any “behavioral” markup in the HTML. You can separate all of your javascript/jQuery into a separate file where it’s easier to maintain and where it can stay out of the way of the content. I never did like seeing all those “javascript:void()” messages in the status bar when I would hover over a link. That’s what happens when you attach the event directly inside an <a href> tag.
On some pages that use traditional javascript, you’ll see an “onload” attribute in the <body> tag. The problem with this is that it’s limited to only one function. Oh yeah, and it adds “behavioral” markup to the content again. Jeremy Keith’s excellent book, DOM Scripting, showed me how to create an addLoadEvent function to a separate javascript file that allows for multiple functions to be loaded inside it. But it requires a fair amount of code for something that should be rather straightforward. Also, it triggers those events when the window loads, which leads me to another advantage of $(document).ready().
With $(document).ready(), you can get your events to load or fire or whatever you want them to do before the window loads. Everything that you stick inside its brackets is ready to go at the earliest possible moment — as soon as the DOM is registered by the browser, which allows for some nice hiding and showing effects and other stuff immediately when the user first sees the page elements.
Chainability
Basically, what chainability means is that you can perform some method on an object and then immediately follow that result with a dot and a new method acting on what was returned. This leads to the nice possibility of writing short, concise and easy-to-understand code like this:
$(“container”).elmsByClass(“mandatory”).addEvent(“blur”, validateInput);
The code above finds all the elements with the CSS class “mandatory” amongst the children of an element named “container”. It then loops through all of the returned elements and applies an onblur event to them to call a function named validateInput.
As you can see from this, fairly complex operations will be one-liners in the code, helping you to focus on other tasks. There’s no limit to how much chaining you can do. However, my recommendation to get legible code enables an easy overview, use chaining, but moderately. If you do it in ten consecutive steps it might look cool, but it’s not that much fun trying to maintain or debug it later.
Explain the following code and its connection with AJAX:
This is jQuery’s low-level AJAX implementation. See $.get, $.post etc. for higher-level abstractions that are often easier to understand and use, but don’t offer as much functionality (such as error callbacks).
$.ajax() returns the XMLHttpRequest that it creates. In most cases you won’t need that object to manipulate directly, but it is available if you need to abort the request manually.
$.ajax() takes one argument, an object of key/value pairs, that are used to initialize and handle the request. See below for a full list of the key/values that can be used.
Example:
Retrieve the latest version of an HTML page.
$.ajax({
url: “test.html”,
cache: false,
success: function(html){
$(“#results”).append(html);
}
});
