jQuery

 ➤Explain the features provided by jQuery?


- jQuery is a write less and do more javascript library.

- It helps us to make the use of javascript much easier.

- It simplifies the complicated things from javascript like the AJAX calls and the DOM manipulation.
Features of jQuery are :


1. Effects and animations.
2. Ajax.
3. Extensibility.
4. DOM element selections functions.
5. Events.
6. CSS manipulation.
7. Utilities - such as browser version and the each function.
8. JavaScript Plugins.
9. DOM traversal and modification









 ➤Discuss the advantages and disadvantages of using jQuery in different project scales.

The advantages of jQuery

The main advantage of jQuery is that it is much easier than its competitors. You can add plugins easily, translating this into a substantial saving of time and effort. In fact, one of the main reasons why Resig and his team created jQuery was to buy time (in the web development world, time matters a lot).

The open source license of jQuery allows the library to always have constant and fast support, constantly publishing updates. The jQuery community is active and extremely hardworking.

Another advantage of jQuery over its competitors such as Flash and pure CSS is its excellent integration with AJAX.

The disadvantages of jQuery

One of the main disadvantages of jQuery is the large number of published versions in the short time. It does not matter if you are running the latest version of jQuery, you will have to host the library yourself (and update it constantly), or download the library from Google (attractive, but can bring incompatibility problems with the code).

In addition to the problem of the versions, other disadvantages that we can mention:

-jQuery is easy to install and learn, initially. But it’s not that easy if we compare it with CSS

-If jQuery is improperly implemented as a Framework, the development environment can get out of control.The advantages of jQuery

The main advantage of jQuery is that it is much easier than its competitors. You can add plugins easily, translating this into a substantial saving of time and effort. In fact, one of the main reasons why Resig and his team created jQuery was to buy time (in the web development world, time matters a lot).

The open source license of jQuery allows the library to always have constant and fast support, constantly publishing updates. The jQuery community is active and extremely hardworking.

Another advantage of jQuery over its competitors such as Flash and pure CSS is its excellent integration with AJAX.

The disadvantages of jQuery

One of the main disadvantages of jQuery is the large number of published versions in the short time. It does not matter if you are running the latest version of jQuery, you will have to host the library yourself (and update it constantly), or download the library from Google (attractive, but can bring incompatibility problems with the code).

In addition to the problem of the versions, other disadvantages that we can mention:

-jQuery is easy to install and learn, initially. But it’s not that easy if we compare it with CSS

-If jQuery is improperly implemented as a Framework, the development environment can get out of control.

 ➤Explain how the jQuery handles the issues related to partial page loads to the browser. 

If you must run scripts on a partial view, as is the case when dynamically created content is returned when calling partial views from an AJAX call, you should find that the problem described in the question actually only happens on the initial parent page load. If this is the case, you can work around the problem by NOT loading the partial on the primary view. Instead, you can load the partial view using JQuery AFTER the initial page load.

 ➤Discuss the selectors and their use in jQuery.  

The jQuery library harnesses the power of Cascading Style Sheets (CSS) selectors to let us quickly and easily access elements or groups of elements in the Document Object Model (DOM).

A jQuery Selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria. Simply you can say, selectors are used to select one or more HTML elements using jQuery. Once an element is selected then we can perform various operations on that selected element.

The $() factory function

jQuery selectors start with the dollar sign and parentheses − $(). The factory function $() makes use of following three building blocks while selecting elements in a given document −

Sr.No.	Selector & Description
1	Tag Name Represents a tag name available in the DOM. For example $('p')selects all paragraphs <p> in the document.
2	Tag ID Represents a tag available with the given ID in the DOM. For example $('#some-id') selects the single element in the document that has an ID of some-id.
3	Tag Class Represents a tag available with the given class in the DOM. For example $('.some-class') selects all elements in the document that have a class of some-class.

All the above items can be used either on their own or in combination with other selectors. All the jQuery selectors are based on the same principle except some tweaking.

NOTE − The factory function $() is a synonym of jQuery() function. So in case you are using any other JavaScript library where $ sign is conflicting with some thing else then you can replace $ sign by jQuery name and you can use function jQuery() instead of $().

Example

Following is a simple example which makes use of Tag Selector. This would select all the elements with a tag name p.

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>
 
   <body>
      <div>
         <p class = "myclass">This is a paragraph.</p>
         <p id = "myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

This will produce following result −

How to Use Selectors?

The selectors are very useful and would be required at every step while using jQuery. They get the exact element that you want from your HTML document.

Following table lists down few basic selectors and explains them with examples.

Sr.No.	Selector & Description
1	Name Selects all elements which match with the given element Name.
2	#ID Selects a single element which matches with the given ID.
3	.Class Selects all elements which match with the given Class.
4	Universal (*) Selects all elements available in a DOM.
5	Multiple Elements E, F, G Selects the combined results of all the specified selectors E, F or G.

Selectors Examples

Similar to above syntax and examples, following examples would give you understanding on using different type of other useful selectors −

Here, you have different type of other useful selectors −

You can use all the above selectors with any HTML/XML element in generic way. For example if selector $("li:first") works for <li> element then $("p:first") would also work for <p> element.

 ➤Compare and contrast the use of CSS advanced selectors in jQuery and jQuery’s DOM traversal API, indicating the pros and cons of them.

CSS advanced selectors in jQuery

Advanced Selectors in CSS. Selectors are used for selecting the HTML elements in the attributes. Some different types of selectors are given below: Adjacent Sibling Selector: It selects all the elements that are adjacent siblings of specified elements.

jQuery’s DOM traversal API

Once you've made an initial selection with jQuery, you can traverse deeper into what was just selected. Traversing can be broken down into three basic parts: parents, children, and siblings. jQuery has an abundance of easy-to-use methods for all these parts. Notice that each of these methods can optionally be passed string selectors, and some can also take another jQuery object in order to filter your selection down.

 ➤Explain the importance of DOM objects and DOM processing in jQuery.  

The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. In the DOM specification, the term "document" is used in the broad sense - increasingly, XML is being used as a way of representing many different kinds of information that may be stored in diverse systems, and much of this would traditionally be seen as data rather than as documents. Nevertheless, XML presents this data as documents, and the DOM may be used to manage this data.

With the Document Object Model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content. Anything found in an HTML or XML document can be accessed, changed, deleted, or added using the Document Object Model, with a few exceptions - in particular, the DOM interfaces for the internal subset and external subset have not yet been specified.

➤Discuss the benefits of using jQuery event handling over HTML event attributes, providing a list of events supported by jQuery

The event handling function can receive an event object. This object can be used to determine the nature of the event, and to prevent the event’s default behavior.

Mouse Events

click

dblclick

mouseenter

mouseleave 

Keyboard Events

keypress

keydown

keyup

Form Events

submit

change

focus

blur

Document/Window Events

load

resize

scroll

unload