Client-side development 1 – jQuery

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.

jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and Web applications.

Features provided by jQuery

Advantages and disadvantages of using jQuery in different project scales.

The biggest advantage to jQuery is ubiquity. It had a profound effect on JavaScript development and echoes of its use can be found all over the internet. Many people continue to learn it (and rightfully so) before they advance to frameworks and many other tools implement some features from it.

It's biggest disadvantage would be sheer size. jQuery was made to make a lot of the things we do with JavaScript easier. The problem is we wanted it to do more. While it's still an excellent tool, it's now much larger than it needs to be for most uses because it still needs to cater to edge cases.

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

jQuery load() Method

The jQuery load() method is a simple, but powerful AJAX method.The load() method loads data from a server and puts the returned data into the selected element.

Syntax:

$(selector).load(URL,data,callback);

The required URL parameter specifies the URL you wish to load.

The optional data parameter specifies a set of query string key/value pairs to send along with the request. The optional callback parameter is the name of a function to be executed after the load() method is completed. Here is the content of our example file: "demo_test.txt":

<h2>jQuery and AJAX are FUN!!!</h2>

<p id="p1">This is some text in a paragraph. </p>

Selectors and their use in jQuery.

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.

jQuery selectors are used to select html elements based on their id, class, element type, attributes, and many more. jQuery selectors select HTML elements to manipulate them.

Use of CSS advanced selectors in jQuery and jQuery’s DOM traversal API.

Why Use Advanced Selectors?

In some more advanced web applications, you need more control than just referencing several element types or one with a specific ID. You can have several classes and subclasses and referencing one of them might not be enough to properly work with your elements.

Remember that a web page can contain hundreds of elements, so you might not even know the elements' names. For instance, you could have a page with a list of orders for a customer. If the customer has a hundred orders, you could have a hundred elements on the page. The IDs and names on the page could be created dynamically.

To compensate for this complexity, jQuery and CSS have advanced selectors that let you choose elements based on location in the page or by descendants or even by adjacent siblings. You wouldn't know the IDs, classes or names of these elements, but you're still able to query them based on HTML location. In the example of a list of orders for a customer, this would benefit you when you don't know the IDs for each order element. Instead, you can reference them based on the container that holds them or their location to another element.

Advanced Selectors used in jQuery

There are numerous selectors that you can use both in CSS and in jQuery. With jQuery, you can use advanced selectors that help you reference various elements in an HTML page and then apply properties and call methods as needed. In this article, we'll show you how to use more advanced selectors to format and manipulate HTML elements using 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.

What is Traversing?

jQuery traversing, which means "move through", are used to "find" (or select) HTML elements based on their relation to other elements. Start with one selection and move through that selection until you reach the elements you desire.

The image below illustrates an HTML page as a tree (DOM tree). With jQuery traversing, you can easily move up (ancestors), down (descendants) and sideways (siblings) in the tree, starting from the selected (current) element. This movement is called traversing - or moving through - the DOM tree.

Illustration explained:

The <div> element is the parent of <ul>, and an ancestor of everything inside of it

The <ul> element is the parent of both <li> elements, and a child of <div>

The left <li> element is the parent of <span>, child of <ul> and a descendant of <div>

The <span> element is a child of the left <li> and a descendant of <ul> and <div>

The two <li> elements are siblings (they share the same parent)

The right <li> element is the parent of <b>, child of <ul> and a descendant of <div>

The <b> element is a child of the right <li> and a descendant of <ul> and <div>

Traverse the DOM With jQuery

In web development and specifically with using the awesome jQuery library, traversing the information returned from a document is a very common task. jQuery makes this much easier for you with some great methods of the jQuery Object. There are a lot of ways to make your way around, but it makes sense to focus on the ones that are most used, and will be most useful to you. Even today, jQuery is still relevant.

jQuery provides a variety of methods that allow us to traverse the DOM.

The largest category of traversal methods are tree-traversal.

Importance of DOM objects and DOM processing in jQuery

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

Why DOM is so useful?

Data preserves in memory

You can go forwards and backwards in the tree structure.

You can make changes directly to the tree (in any document) in memory.

Benefits of using jQuery event handling over HTML event attributes

Providing a list of events supported by jQuery.

Mouse Events

scroll, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, load, resize, scroll, unload, error,

Example Usage

(function($)

{

          $(document).ready(function()

          {

                    $('#id).bind('click', function(e)

                    {

                              //mouse event fired (element clicked)

                    });

          });

         

})(jQuery);

Keyboard Events

keydown, keypress, keyup

Example Usage

(function($)

{

          $(document).ready(function()

          {

                    $(document).bind('keypress', function(e)

                    {

                              //keyboard event fired

                    });

          });

         

})(jQuery);

Browser Events

load, resize, scroll, unload, error

Example Usage

(function($)

{

          $(document).ready(function()

          {

                    //browser event fired (document object model loaded)

          });

         

})(jQuery);

DOM Element Events

blur, focus, focusin, focusout, change, select, submit

Example Usage

(function($)

{

          $(document).ready(function()

          {

                    $('#id).bind('blur', function(e)

                    {

                              //dom event fired (input focus)

                    });

          });

         

})(jQuery);

jQuery: When to use $(document).ready() and when $(window).load()

$(document).ready()

Before trigging any jQuery to traverse and manipulate a page it is best to wait until the DOM is finished loading. Fortunately jQuery has a ready event, .ready(), which can be called when the HTML document is ready to be altered. By placing all of our other custom written jQuery inside of this function we can guarantee that it will not be executed until the page has loaded and the DOM is ready.

The document ready event fired when the HTML document is loaded and the DOM is ready, even if all the graphics haven’t loaded yet. If you want to hook up your events for certain elements before the window loads, then $(document).ready is the right place.

Code:

$(document).ready(function() {

    // document is loaded and DOM is ready

    alert("document is ready");

});

$(window).load()

The window load event fired a bit later, when the complete page is fully loaded, including all frames, objects and images. Therefore functions which concern images or other page contents should be placed in the load event for the window or the content tag itself.

Code:

$(window).load(function() {

    // page is fully loaded, including all frames, objects and images

    alert("window is loaded");

});

jQuery Techniques for a Better 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. Check out the tutorial by Jake Rocheleau to learn more about how to create sliding elements within the login form.

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. This is why 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.

Tutorial: https://www.script-tutorials.com/text-animation-jquery-ui-slider/

Plugin: https://www.jqueryscript.net/tags.php?/font%20size/

6. jQuery Pagination

Pagination provides the necessary pages to the website and it helps readers to easily digest the content better.

Plugins: https://jqueryhouse.com/jquery-pagination-plugins/

Tutorial: https://codepen.io/SitePoint/pen/WprNwa

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

Conclusion

This leads us to the end of the ten best jQuery techniques for better user experience. These techniques will surely help you get a better grasp of the overall user experience. Also, the choice of using a plugin or manually implementing is all about your preference. So, which aspect of user experience are you going to focus on? Comment below and let us know. We are listening.