JQuery Architecture

The JQuery Architecture is explained here. JQuery is a java script library with API. This helps to manipulate DOM or HTML by using CSS syntax, event handling, animation, and ajax interactions.

 

JQuery Architecture
JQuery Architecture

 

 

JQuery find the matched elements and returns the object similar to an array. When .addClass on the jQuery object the jQuery library simply add .map’s the function across the array of elements. Thai is jQuery act as an object which can be used to store as array of elements and some of functions. The jQuery sore are a group of functions designed to create, edit or delete the array of elements. For the purpose of editing we use the basic components like .css and .attr.

Components of jQuery

1) Plug-in API: – JQuery uses the plug-in code to extend the functionality. JQuery plug-ins is the plug-ins sub-domain of the jQuery Project website.

2) Miscellaneous methods: – JQuery miscellaneous methods are given below.

1) data(): -Attaches data to, or gets data from, selected elements

2) each(): -Run a function for each element matched by the jQuery selector

3) get(): -Get the DOM elements matched by the selector

4) index(): -Search for a given element from among the matched elements

5) $.noConflict(): -Release jQuery’s control of the $ variable

6) $.param(): -Creates a serialized representation of an array or object (can be used as URL query string for AJAX requests)

7) removeData(): -Removes a previously-stored piece of data

8) size(): -Return the number of DOM elements matched by the jQuery selector

9) toArray(): -Retrieve all the DOM elements contained in the jQuery set, as an array

3) Ajax methods: – Ajax is s type of feature that exchange data with a server and update parts of a web page without reloading the whole page.

4) Effect methods: – This method easily adds animation effect.

5) Event methods: – Event methods trigger, or bind a function to an event for all matching elements.

6) Selector expressions: –

 

1) CSS selectors: – CSS stands for Cascading Style Sheets and it is simple mechanism for adding style to web documents.

Eg: – fonts, colors, spacing etc.

JQuery uses the css() method for CSS manipulation. To perform various task the css() uses three different syntaxes. They are,

1) css(name):- This method return CSS property value.

2) css(name,value):- This method to set CSS property and value.

3) css({properties}) – This uses to set multiple CSS properties and values.

2) XPath selectors: – XPath selectors are modeled after the file system’s directory-tree navigation.

3) Attribute selectors: – Attribute selectors begin with @ symbol.

4) Form selector: – Commonly used form selectors are,

1):input: – Selects all form elements (input, select, textarea, button).

2):text: – Selects all text fields (type = “text”)

3):password: – Selects all password fields (type = “password”)

4):radio: – Selects all radio fields (type = “radio”)

5):checkbox: -Selects all checkbox fields (type = “checkbox”)

6):submit: – Selects all submit buttons (type = “submit”)

7):image: – Selects all form images (type = “image”)

8):reset: – Selects all reset buttons (type = “reset”)

9):button: – Selects all other buttons (type = “button”)

10):file: – Selects all <input type = “file”>

5) Custom selector helps to select all the even and odd values.

Syntax: –

: even: -All elements with an even index
: odd: -All elements with an odd index

Eg: –

$(‘li:even’): -It selects all elements matched by <li> that have an even index value.
$(‘tr:odd’) selects all elements matched by <tr> that have an odd index value.

7) DOM traversal methods: – DOM traversal methods help to select elements in a document randomly as well as in sequential method.

8) DOM manipulation methods: – Fro handling DOM manipulation jQuery uses .attr(), .html() and .val methods and it act as getters used for retrieving information from DOM elements.

Improving jQuery performance

– For improving jQuery performance we follow the below rules.

1) Latest Version: –Get the latest version of jQuery. JQuery is in active development so there will be more advances operations that will come up with each release.

2) Context: –Passing a context to the jQuery function uses to improve the query performance. This will reduce the number of DOM elements that are traversed. For accomplishing this we need to pass the jQuery function a second parameter which refers to a single DOM element. This element is then used as the starting point for the DOM querying and as a result there will be some performance benefits which the app may get. Passing anything other than a DOM reference still requires a search of the entire document actually may hinder performance.

3) Selector Performance: –For the design decision we use selectors. The performance may be directly impacted by the selectors you use. The selector performance is dependent upon the following points

1) Complexity of the selector expression

2) Type of selector

3) Size and Complexity of the DOM that is being evaluated

Important points – JQuery

1.) Prefer ID selector whenever possible.

2.) The simple the selector the better the performance

3.) If you have to use class name, always try to use it with other selector as well.

Eg: -Use $(‘div.menu’) rather than $(‘.menu’) or something similar based on your requirement.

4.) Simple DOM is traversed faster the context becomes much more important.

5.) Cache elements if they are used frequent: -Never duplicate the DOM queries for the same element/elements. Cache the result set and use it. This is more important when you are dealing with loops. Store the wrapped set in a local variable outside the loop. This mechanism avoid querying during each iteration.

6.) Keep DOM changes to minimum: -This concept is important when dealing with loops. Avoid updating elements in the loop. It creates a string representation of the element in the loop and updates the DOM outside the loop.

Eg: –

// This code is slow
var list = $(‘div’);
for (i = 1; i <= 1000; i++) {
list.append(‘Menu ‘ + i ); // interacts with the DOM 1000 times
}
// This code is a bit faster
var list2 = $(‘div’);
var items = ‘‘;
for (i = 1; i <= 100; i++) {
items += ‘Menu ‘ + i ; // string concatenation
}
list2.html(items); // Use DOM only once.

NOTE: string concatenation is slow but in this case it will be faster compared to DOM manipulation. Also there are various optimized string library that performs efficient concatenation. 6) Use multiple selectors wherever possible: – Eg: –

Prefer
$(‘#p1, #p2’).hide();
Rather than
$(‘#p1’).hide();
$(‘#p2’).hide();

7.) Leverage chaining: – Use jQuery chaining when it makes sense. It increases the performance of the code and avoids needless repetition.

Advantages of JQuery

1) JQuery plugins can be extended through plugins.

2) Anyone can add functionality to manipulating web pages.

3) Provide tools from .ajax to .animate to .tabs to .newsticker etc.

4) Rich Selectors.