Educational

Author: Saim Khalid

  •  DOM Traversing

    —

    by

    Saim Khalid
    in

    jQuery is a very powerful tool which provides a variety of DOM traversal methods to help us select elements in an HTML or XML document randomly as well as in sequential method. Elements in the DOM are organized into a tree-like data structure that can be traversed to navigate, locate the content within an HTML…

  • Callback Functions

    —

    by

    Saim Khalid
    in

    A jQuery Callback Function is a function that will be executed only after the current effect gets completed. This tutorial will explain you what are jQuery Callback Functions and why to use them. Following is a simple syntax of any jQuery effect method: $(selector).effectName(speed, callback); If we go in a little more detail then a jQuery callback function will…

  • Chaining

    —

    by

    Saim Khalid
    in

    Before we discuss about jQuery Chaining of Methods, Consider a situation when you want to perform the following actions on an HTML element: Following is the jQuery program to perform the above mentioned actions: <!doctype html><html><head><title>The jQuery Example</title><script src=”https://www.tutorialspoint.com/jquery/jquery-3.6.0.js”></script><script>$(document).ready(function(){$(“button”).click(function(){$(“p”).css(“color”,”#fb7c7c”);$(“p”).fadeOut(1000);$(“p”).fadeIn(1000);});});</script><style> button{width:100px;cursor:pointer;}</style></head><body><p>Click the below button to see the result:</p><button>Click Me</button></body></html> jQuery Method Chaining jQuery method chaining allows us to…

  • Animation

    —

    by

    Saim Khalid
    in

    Let’s learn how to use jQuery animate() method to create custom animations on a web pages or any other jQuery (Javascript) Application. jQuery animate() Method The jQuery animate() method is used to create custom animations by changing the CSS numerical properties of a DOM element, for example, width, height, margin, padding, opacity, top, left, etc. Following is a simple…

  • Effects

    —

    by

    Saim Khalid
    in

    jQuery effects add an X factor to your website interactivity. jQuery provides a trivially simple interface for doing various kind of amazing effects like show, hide, fade-in, fade-out, slide-up, slide-down, toggle etc. jQuery methods allow us to quickly apply commonly used effects with a minimum configuration. This tutorial covers all the important jQuery methods to…

  • CSS Properties

    —

    by

    Saim Khalid
    in

    jQuery provides css() method to manipulate CSS properties of the matched elements. JQuery css() method does not modify the content of the jQuery object but they are used to get and set CSS properties on DOM elements. jQuery – Get CSS Properties jQuery css() method can be used to get the value of a CSS property associated with the first matched…

  • Dimensions

    —

    by

    Saim Khalid
    in

    jQuery provides various methods to get and set the CSS dimensions for the various properties. Following diagram explains how various dimensions (width, height, innerWidth, innerHeight, outerWidth, outerHeight) can be depicted for any HTML element: jQuery Dimension Methods Following are the methods to manipulate CSS dimensions for the various properties of the HTML elements. jQuery width()…

  • CSS Classes

    —

    by

    Saim Khalid
    in

    jQuery provides three methods addClass(), removeClass() and toggleClass() to manipulate CSS classes of the elements. We have divided our CSS manipulation discussion into two parts. This chapter will discuss about manipulating CSS classes and the next chapter will discuss about manipulating CSS properties. jQuery – Adding CSS Classes jQuery provides addClass() method to add a CSS class to the matched HTML element(s).…

  • Replace Elements

    —

    by

    Saim Khalid
    in

    jQuery provides replaceWith() method to replace existing HTML content with a new content in a given HTML document. jQuery replaceWith() Method The jQuery replaceWith() method removes the content from the DOM and inserts a new content in it’s place. Following is the syntax of the replaceWith() method: $(selector).replaceWith(newContent); The replaceWith() method removes all data and event handlers associated with the removed…

  • Remove Elements

    —

    by

    Saim Khalid
    in

    jQuery provides remove() and empty() methods to remove existing HTML elements from an HTML document. jQuery remove() Method The jQuery remove() method removes the selected element(s) and it’s child elements from the document. Following is the syntax of the remove() method: $(selector).remove(); You should use remove() method when you want to remove the element itself, as well as everything inside it. Synopsis Consider the following…