Tute_10

Is jQuery a framework or a library? Discuss.

jQuery is a framework/library, which can hide the complexity of the pure JS 

        •Cross-browser compatible 

•Backward compatible

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.

➤a library is one which helps you write code faster and prabably better without affecting your coding stye or adding effects.

➤a framework which helps you write large portion of HTML or actions with small amount of coding. It largely affects your coding pattern.

➤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.

Explain the features provided by jQuery?

➯Offers many advanced features 

➮Reveal GUI elements 

➮Change content (based on users’ actions) 
➮Change CSS 

➮Delta-Communication (Ajax)

Explain the features of 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.

Other 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.

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

Suppose when we want to load different views conditionally inside a single view. In other words, we are rendering nested view inside a single view/page based on menu items click in the parent view. In this case, if I click on the back button or forward button of the browser, it will not work as usual when we navigate from one page to another in web application and the way it saves the navigation history of different pages.

So for the case, when we are on the same page, but we are setting the nested view dynamically based on condition, we need some identifying criteria for each different nested view in the same page/View.

Discuss the selectors and their use in jQuery. 


➧jQuery can use CSS selectors 
➧Additionally, provides advanced selectors to access elements faster and efficiently

jQuery Selector

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.

➧Descendent selector
      A descendant of an element could be a child, grandchild, great-grandchild, and so on, of that element.

jQuery descender selector (X Y) is used to select all elements matched by “Y” that are child, grandchild, great-grandchild, great-great-grandchild..(any levels deep) of a “X” element.

For example,

• $(‘#container div’) – selects all elements matched by <div> that are descendants of an element that has an id of container.
• $(‘form input’) – selects all elements matched by <input> that are descendants of an element matched by <form>

The most common child selector is the descendant selector, which matches every element that follows an identified ancestor. The descendant element does not have to come directly after the ancestor element inside the document tree, such as a parent-child relationship, but may fall anywhere within the ancestor element. Descendant selectors are created by spacing apart elements within a selector, creating a new level of hierarchy for each element list.

➧Child selector

Description: Selects all direct child elements specified by "child" of elements specified by "parent".

The child combinator (E > F) can be thought of as a more specific form of the descendant combinator (E F) in that it selects only first-level descendants.

Child selectors provide a way to select elements that fall within one another, thus making them children of their parent element. These selections can be made two different ways, using either descendant or direct child selectors.

➧Pseudo classes

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus

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

Descendant Selector

The descendant selector works down the HTML structure in order of what has been written and selects any elements which are a child, descended from the parent element

Child Selector

A child selector selects the immediate child of the parent selector and a ‘greater than’ sign > is used between parent and child, so this will select multiple child elements if they exist.

Attribute Selector

The attribute selector can select a HTML element based on an attribute assigned to it and more extensively selected by adding in the value of the attribute. The attribute is selected by surrounding the attribute name in [brackets] superceding the HTML element or by adding in the value by preceding it with an equals sign ‘=’ and surrounding it in “double quotes”

Structural Pseudo Class Selector

The structural pseudo selector allows you to select elements based on their structural position in the HTML markup

Pseudo Element Selector

The pseudo element selector makes selections based on element position, it has slightly different syntax using a double colon :: between element and selector, the double colon is the official CSS3 syntax, however it is not supported by IE8, you can actually use a single colon : which is from CSS2 syntax and is supported by IE8, so decide to use which one based on your thoughts around IE8. 


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

The Document Object Model currently consists of two parts, DOM Core and DOM HTML. The DOM Core represents the functionality used for XML documents, and also serves as the basis for DOM HTML.

The Document Object Model (DOM) is a cross-platform and language-independent application programming interface that treats an XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed



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

The 3 main benifits of jQuery are:

➤its light weight when compared to other javascript frameworks.
➤it has a wide range of plugins available for various specific needs.
➤it is easier for a designer to learn jQuery as it uses familiar CSS syntax. jQuery is Javascript for Designers.

EVENT HANDLING


Event handlers can be set on elements, to be triggered by different events.

jQuery events

Explain how to declare jQuery event handlers outside the $(document).ready() function, indicating the need for that, and the related issues and solutions for them. 

➤jQuery makes it straightforward to set up event-driven responses on page elements. These events are often triggered by the end user's interaction with the page, such as when text is entered into a form element or the mouse pointer is moved. In some cases, such as the page load and unload events, the browser itself will trigger the event.

➤A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).on( "load", function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

Identify a list of advanced features provided by jQuery and explain their use towards improving the user experience. 

➦Object refers to the current object within the scope.Inside event handlers, refers to the element the event has triggered on.

Data attributes

is a characteristic of data that sets it apart from other data, such as location, length, or type. The term attribute is sometimes used synonymously with “data element” or “property.”

Refactoring with DOM objects

It’s something that is heavily talked about in the Ruby world, but seems to be a bit less so in the JS world. In this post what I’ve done is write some of my own (crappy) JavaScript for some simple JS tabs, using bad habits and code smells.

Target on specific elements with generic names

Filters

Description: Reduce the set of matched elements to those that match the selector or pass the function's test

CSS manipulation

Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

Animation

Description: Perform a custom animation of a set of CSS properties.