Introduction
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.
It is
simply a framework/library, which can hide the complexity of the pure JS
·
Cross-browser compatible
·
Backward compatible
The
purpose of jQuery is to make it much easier to use JavaScript on your website.
Features provided by jQuery
jQuery
takes a lot of common tasks that require many lines of JavaScript code to
accomplish, and wraps them into methods that you can call with a single line of
code.jQuery also simplifies a lot of the complicated things from JavaScript,
like AJAX calls and DOM manipulation.
The jQuery
library contains many features:
·
Reveal GUI elements
·
Change content (based on users’ actions)
·
Change CSS
·
Delta-Communication (Ajax)
·
HTML/DOM manipulation
·
CSS manipulation
·
HTML event methods
·
Effects and animations
·
Utilities such as feature detection
·
Deferred and Promise objects to control
asynchronous processing
·
JSON parsing
·
Extensibility through plug-ins
·
Cross-browser support
DOM
manipulation − The jQuery made it easy to select DOM elements, negotiate them
and modifying their content by using cross-browser open source selector engine
called Sizzle.
Event
handling − The jQuery offers an elegant way to capture a wide variety of
events, such as a user clicking on a link, without the need to clutter the HTML
code itself with event handlers.
AJAX
Support − The jQuery helps you a lot to develop a responsive and
featurerich site using AJAX technology.
Animations − The
jQuery comes with plenty of built-in animation effects which you can use in
your websites.
Lightweight − The
jQuery is very lightweight library - about 19KB in size (Minified and gzipped).
Cross
Browser Support − The jQuery has cross-browser support, and works well in IE
6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+
Latest
Technology − The jQuery supports CSS3 selectors and basic XPath syntax.
The advantages and disadvantages of using jQuery in
different project scales
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.
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.
·
jQuery is flexible and fast for web development
·
It comes with an MIT license and is Open
Source
·
Bugs are resolved quickly
·
Excellent integration with AJAX
·
It has an excellent support community
·
It has Plugins
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.
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. We are
rendering nested view inside a single view/page based on menu items click in
the parent view. 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.
we use the
concept of Fragment URLs for identification purpose. We will use the concept of
hash-based URLs which contain the character of sequences preceded by # at the
end of actual URL of page/View. We can append different character sequences
preceded by # For each different nested view inside a single view which is set
conditionally. The benefit of using this technique is that these are stored in
the browser history and with this, if we click on back & forward buttons,
the page is not refreshed and only the characters sequences changes, that we
can handle partial view updates on the Page on browser events.
The selectors and their use in jQuery
jQuery
selectors allow you to select and manipulate HTML element(s).
jQuery
selectors are used to "find" (or select) HTML elements based on their
name, id, classes, types, attributes, values of attributes and much more. It's
based on the existing CSS Selectors, and in addition, it has some own custom
selectors.
All
selectors in jQuery start with the dollar sign and parentheses: $().
jQuery can
use CSS selectors
Additionally,
provides advanced selectors to access elements faster and efficiently.
The
element Selector
The jQuery
element selector selects elements based on the element name.
You can
select all <p> elements on a page like this:
$("p")
The #id Selector
The jQuery
#id selector uses the id attribute of an HTML tag to find the specific element.
An id
should be unique within a page, so you should use the #id selector when you
want to find a single, unique element.
To find an
element with a specific id, write a hash character, followed by the id of the
HTML element:
$("#test")
The .class
Selector
The jQuery
.class selector finds elements with a specific class.
To find
elements with a specific class, write a period character, followed by the name
of the class:
$(".test")
More
Examples of jQuery Selectors
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 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.
jQuery
provides API to traverse through the DOM. These DOM navigating APIs are faster
than advanced CSS like selectors.
The jQuery
Object
When
creating new elements (or selecting existing ones), jQuery returns the elements
in a collection. Many developers new to jQuery assume that this collection is
an array. It has a zero-indexed sequence of DOM elements, some familiar array
functions, and a. length property, after all. The jQuery object is more
complicated than that.
DOM and
DOM Elements
The
Document Object Model (DOM for short) is a representation of an HTML document.
It may contain any number of DOM elements. At a high level, a DOM element can
be thought of as a "piece" of a web page. It may contain text and/or
other DOM elements. DOM elements are described by a type, such as <div>,
<a>, or <p>, and any number of attributes such as src, href, class
and so on. For a more thorough description, refer to the official DOM
specification from the W3C.
Elements
have properties like any JavaScript object. Among these properties are
attributes like. tagName and methods like .appendChild(). These properties are
the only way to interact with the web page via JavaScript.
The jQuery
Object
It turns
out that working directly with DOM elements can be awkward. The jQuery object
defines many methods to smooth out the experience for developers. Some benefits
of the jQuery Object include:
Compatibility
–
The implementation of element methods varies across browser vendors and
versions.
Convenience
–
There are also a lot of common DOM manipulation use cases that are awkward to
accomplish with pure DOM methods. For instance, inserting an element stored in new
Element after the target element requires a rather verbose DOM method:
Getting
Elements Into the jQuery Object
When the
jQuery function is invoked with a CSS selector, it will return a jQuery object
wrapping any element(s) that match this selector.
Purpose of
DOM
The DOM
defines a standard for accessing documents: "The W3C Document Object Model
(DOM) is a platform and language-neutral interface that allows programs and
scripts to dynamically access and update the content, structure, and style of a
document."
DOM
Element Methods
.get()
Retrieve
the DOM elements matched by the jQuery object.
.index()
Search for
a given element from among the matched elements.
Also in:
Deprecated > Deprecated 1.8 | Removed
.size()
Return the
number of elements in the jQuery object.
.toArray()
Retrieve
all the elements contained in the jQuery set, as an array.
Advanced features provided by jQuery and explain their
use towards improving the user experience
Form Manipulations
Forms are always an integral part of a website. It is so common
that you can find them on almost every blog. This makes it essential for
developers to focus on forms and refine them for the best user experience
possible.
1. jQuery Login Form
As a web developer, you can either use a plugin or build a sliding
panel from scratch.
2. Hide Some Useful Info with Spoiler Revealer
You can improve how users reveal information thanks to the spoiler
revealer technique. You can find a tutorial on the subject here. It is elegant
and provides a sense of exploration for the end user.
3. Form Submission Without Page Refresh
When a form is submitted, the page refreshes in order to send the
info to the server. However, you can make it look swift by using jQuery to do
form submissions without a page refresh. CodeTuts has a clear tutorial on the
topic.
Navigation Menus
Navigations also plays a crucial role in user experience. They
dicated how a user navigates through the website and a good navigation menu
determines how the user feels about the website.
4. jQuery Plugin for Smooth Navigation
You can use a lot of jQuery plugins to ensure smooth navigation.
There are many plugins out there and that’s why we recommend reading the list
of 20 jQuery plugins which will let you improve the user experience. If you
fancy not using a plugin, you can also check out the tutorials on how to create
different types of menus using jQuery. The choice of which navigation menu
technique depends on you.
You can also create simple jQuery tabs which can come handy during
navigation. The tabs should be responsive and offer smooth navigation. You can
follow the detailed tutorial on Web Designer Hut to learn more.
Content Manipulation
You can also manipulate content using jQuery. By doing so, you can
customize the content according to your choice and customize it for the best
user experience possible.
5. Text Size Slider
User experience is also about providing users an option to change
things which, in return, gives them more control. Therefore, you may want to
give your readers the ability to change the text size slider. You can implement
it either by using a plugin or by manually coding it.
6. jQuery Pagination
Pagination provides the necessary pages to the website and it
helps readers to easily digest the content better.
7. Content Slider
With a content slider, you can manipulate content in a cool
format. Want to slow down the slider or change how the slider animates? If you
do, you can customize the slider with jQuery. You can also create a fully
custom slider if you want.
You can create a simple content slider with the help of CSS3 and
jQuery. Moreover, you can use check out the content slider plugins available
online.
Animation Effects
Animations also play a crucial role in improving user experience.
There are tons of jQuery animation libraries that you can utilize to make the
website pop, not only in terms of looks but also user experience.
8. Smooth Content Scrolling
Adding small bits of customization to scrolling can add value to
your website. Make scrolling not only fun but a seamless experience. You can
also opt to put all the posts on a single page and offer unlimited scrolling.
Many websites do that, including the Forbes website. The flow is what you need.
Scrolling can also open interactivity options that might be missing from the
vanilla website.
You can use plugins to achieve the desired result. There are many
different types of animations and functionalities that you can achieve with
these plugins. Check out the comprehensive article by CSS Author on the jQuery
scrolling plugin which contains 75+ plugins. You can also check out a detailed
tutorial on them and get a better understanding of implementing custom jQuery
scrolling.
9. jQuery Fading Menu
You can also improve the menu by adding fading animation to it.
This animation will make the menu react to user input, thus improving
interactivity and user experience. It will also entice visitors to click and
reduce bounce rate.
Image Manipulation
If you are running an image-heavy website, you may want to add
image manipulation features to it. Clearly, there are plenty of ways you can
add functionality.
10. Image Cropping and Zoom
Our last jQuery technique that can further improve user experience
is image cropping and zoom. You can use Cropper, a jQuery image cropping plugin
to add functionality to the website. You can also use jQuery zoom by Jack Moore
to get the desired results.
References:
No comments:
Post a Comment