JQuery

Client-side development – jQuery

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Is jquery a library or framework?

The very definition of library and framework in JavaScript is quite inseparable.

By definition, a library is one which helps you write code faster and probably better without affecting your coding style or adding effects.

On the other hand, a framework which helps you write large portion of HTML or actions with small amount of coding. It largely affects your coding pattern.

Now consider jQuery, it can be library as it's mostly assist your coding without affecting. Or it can be framework as it allows you to write small set of codes to achieve likes of animations, UI toggles, etc.

Advanced features in jQuery

Bind/Unbind

§  In the Events module, there are two functions, called bind () and unbind (), that appear on the surface to duplicate the efforts of all the other event methods. After all, if you can simply attach a click () method to a page element.

§  you need to call bind("click") on it instead? It's just a waste of keystrokes. Well, it turns out that these functions come in handy in certain situations, and when used correctly they can drastically increase the performance of your application.

§  Well, it turns out that these functions come in handy in certain situations, and when used correctly they can drastically increase the performance of your application.

§  These functions do give you the ability to attach events to certain page elements, just like the numerous event methods in the module, but they also allow you to remove these events from the page elements.

   

     Live/Die

§  Two of the great new additions to the 1.3 version of jQuery are the live () and die () functions. Their role in a well-designed Web application can best be seen through an example. Imagine attaching a double-click to every cell in a table.

 There's only one problem with this design. Yes, it attaches the double-click event to every row in the table with a class of messageRow. But what if you add new rows to the table? For example, those rows might appear when you have an additional that gets loaded into the page using Ajax without a page reload.

§  This presents a problem, because the code, as written, won't work.

§  The event you created was bound to all the existing tr.messageRow elements that were present when the page loaded.

§  It's not bound to any new tr.messageRows you create during the page's lifetime. People who write code like this would be disappointed to discover that their code didn't work.

§  Beginner jQuery programmers may even spend a few hours of headache-inducing debugging trying to figure out why their code isn't working, before stumbling upon this fact in the jQuery documentation.

Namespace

§  Perhaps one of the most confusing aspects of working with this type of design, and with jQuery itself, is to properly understand the namespace in which the code is working.

§  That's why this example is so good, because it presents this problem in a very visible way.

§  Writing jQuery code when you know every ID and class on the page can be very straightforward and easy. That's what it was designed for after all. 

Benefits of using jQuery

§  Search Engine Optimized – While search engines are getting better at being able to read content within some Flash, everything within jQuery is setup as text. This means it is completely readable to all the search engines, exposing all your keyword rich content.

§  Save Time – Five lines of jQuery are equivalent to 25 lines of conventional JavaScript code. This means smaller files and faster loading web pages.

§  Plug-ins – There are an abundance of plug-ins on the web that make creating special effects simple and fast for web developers.

§  Help? – With an abundance of plug-ins comes with an abundance of help. There is a large helpful support community on the web to help you quickly remedy any bug issues.

§  That was easy! – jQuery has easy implementation for web developers in comparison to other applications.

§  Cross Browser Friendly – jQuery is currently the most popular JavaScript library and works in all browsers.

§  FREE! – free, open source software.

§  Mobile Devices – jQuery is supported by any mobile device whose web browser supports JavaScript. A lot of mobile devices like iPads and iPhones don’t run Flash at all.

§  Wow Factor – Web developers use jQuery to make web pages more exciting, interactive, cleaner, and more user friendly. Make your users go WOW!

The Pros and Cons of jQuery

JQuery is the biggest open-source, CSS3 compliant, cross-browser, JavaScript library available. What makes jQuery stand out is its simplicity and ability create Flash-like animations that are viewable on iOS, which doesn’t work with Flash. The popularity of jQuery is growing quickly, so we think it’s important you know the pros and cons of using it.

Pros

The biggest upside to jQuery is its simplicity. It takes only a little bit of programming knowledge to create crowd pleasing animations. It is also incredibly flexible because jQuery allows users to add plug-ins. If you don’t know how to do it in CSS, jQuery can help you.

It is also a very fast solution to your problems. While there may be “better” solutions, jQuery and its development team work to make sure you can implement jQuery quickly and effectively, which saves money. Those in the open Source software community support jQuery because it has great technical support, interacts well with other types of code, supports plug-ins and makes basic animation as easy as can be.

Open source software means quick growth and the freedom of developers to provide the best service possible without corporate red tape.

Cons

Open source software does have some problems however. There is no set standard amongest providers, which means if you or the developer do not have the money, time or ability to fix issues, you may never find a solution if you have a problem. Also, frequent updates mean community members are also unlikely to provide solutions.

There are also many versions of jQuery available right now and some are less compatible than others.

Also, jQuery’s lightweight interface may lead to problems in the future. Not being able to actually code can lead to many problems in implementation. Not knowing how to program means not knowing how to fix issues that arrive with jQuery and it doesn’t pick up the slack for you. While jQuery is seemingly easy and impressive, making it actually work can be much more troublesome. To make jQuery work, you have to keep up with community developments and realistically understand your skill level.

JQuery is slower than CSS in many cases. Its simplicity is its curse, as it is not meant for client-side interactions. If you misuse jQuery, you get code that multiplies and multiplies until it is unmanageable, which means a few simple lines of code can quickly make maintaining your site a nightmare. The community is working to fix this issue but for now it is a very real problem.

DOM

§  The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.

§  A Web page is a document. This document can be either displayed in the browser window or as the HTML source. But it is the same document in both cases.

§  The Document Object Model (DOM) represents that same document so it can be manipulated. The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

§  The DOM is not a programming language, but without it, the JavaScript language wouldn't have any model or notion of web pages, HTML documents, XML documents, and their component parts (e.g. elements). Every element in a document—the document as a whole, the head, tables within the document, table headers, text within the table cells—is part of the document object model for that document, so they can all be accessed and manipulated using the DOM and a scripting language like JavaScript.

§  In the beginning, JavaScript and the DOM were tightly intertwined, but eventually, they evolved into separate entities. The page content is stored in the DOM and may be accessed and manipulated via JavaScript, so that we may write this approximative equation:

API (HTML or XML page) = DOM + JS (scripting language)

§  The DOM was designed to be independent of any programming language, making the structural representation of the document available from a single, consistent API.

§  The modern DOM is built using multiple APIs that work together. The core DOM defines the objects that fundamentally describe a document and the objects within it.

§  This is expanded upon as needed by other APIs that add new features and capabilities to the DOM. For example, the HTML DOM API adds support for representing HTML documents to the core DOM.

§  When you create a script–whether it's inline in a <script> element or included in the web page by means of a script loading instruction–you can immediately begin using the API for the document or window elements to manipulate the document itself or to get at the children of that document, which are the various elements in the web page.

§  Your DOM programming may be something as simple as the following, which displays an alert message by using the alert () function from the window object, or it may use more sophisticated DOM methods to create new content.

§  This following JavaScript will display an alert when the document is loaded.

§  Many objects borrow from several different interfaces. The table object, for example, implements a specialized HTMLTableElement interface, which includes such methods as createCaption and insertRow. But since it's also an HTML element, table implements the Element interface described in the DOM Element Reference chapter.

§  And finally, since an HTML element is also, as far as the DOM is concerned, a node in the tree of nodes that make up the object model for an HTML or XML page, the table object also implements the more basic Node interface, from which Element derives.

§  In some cases, the samples are complete HTML pages, with the DOM access in a <script> element, the interface (e.g, buttons) necessary to fire up the script in a form, and the HTML elements upon which the DOM operates listed as well.

§   When this is the case, you can cut and paste the example into a new HTML document, save it, and run the example from the browser.

§  There are some cases, however, when the examples are more concise. To run examples that only demonstrate the basic relationship of the interface to the HTML elements, you may want to set up a test page in which interfaces can be easily accessed from scripts.

§  The following very simple web page provides a <script> element in the header in which you can place functions that test the interface, a few HTML elements with attributes that you can retrieve, set, or otherwise manipulate, and the web user interface necessary to call those functions from the browser.

  

   CSS advanced selectors

§  The .css() method is a convenient way to get a computed style property from the first matched element, especially in light of the different ways browsers access most of those properties (the getComputedStyle() method in standards-based browsers versus the currentStyle and runtimeStyle properties in Internet Explorer prior to version 9) and the different terms browsers use for certain properties.

§  For example, Internet Explorer's DOM implementation refers to the float property as styleFloat, while W3C standards-compliant browsers refer to it as cssFloat. For consistency, you can simply use "float", and jQuery will translate it to the correct value for each browser.

§  Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties.

§  For example, jQuery understands and returns the correct value for both .css ( "background-color" ) and .css( "backgroundColor" ). This means mixed case has a special meaning, .css ( "WiDtH" ) won't do the same as .css( "width" ), for example.

§  Note that the computed style of an element may not be the same as the value specified for that element in a style sheet. For example, computed styles of dimensions are almost always pixels, but they can be specified as em, ex, px or % in a style sheet.

§   Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).

§  Retrieval of shorthand CSS properties (e.g., margin, background, border), although functional with some browsers, is not guaranteed. For example, if you want to retrieve the rendered border-width, use: $( elem ).css( "borderTopWidth" ),  $( elem ).css( "borderBottomWidth" ), and so on.