jQuery

Cross platform javascript Library

What is jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It simplifies things like HTML document traversal and manipulation, event handling, animation, and AJAX interactions for rapid web development.

Originally created by John Resig in 2006, jQuery quickly gained popularity due to its ease of use and cross-browser compatibility. It abstracts many common tasks into simple methods, allowing developers to write shorter and more readable code compared to raw JavaScript.

Overall, jQuery has been a foundational tool in web development for many years, although its usage has declined somewhat in recent years with the advent of modern JavaScript frameworks like React, Angular, and Vue.js, which offer more comprehensive solutions for building complex web applications.

jquery

jquery

 

jQuery Statments

Starts with a $ or the jQuery keyword. Return an jquery object of an array(0 based). Now we can apply jquery functions to it! It also has the array properties tied to it! When indexing these it will return a regular element (un-wrapping)
$("#page-title").css({border : "2px red solid"});
or
$("#page-title").css({border : "2px red solid"});

jQuery Selectors

Id Selector
$("#main-caption").css({border : "1px green solid"});
Class Selector
$(".container-main").css({border : "3px pink solid"});

Class Selector
$(".container-main").css({border : "3px pink solid"});

jQuery Filters

Used in combination with selector, it’s a kind of refined selector. More specific, like css pseudo-classes The start with :
$("header nav li:first").css({border : "3px pink solid"});
$("header nav li:last").css({border : "3px yellow solid"});
$("header nav li:even").css({border: "3px solid rgb(255, 255, 0)"});
$("header nav li:odd").css({border: "3px solid rgb(125, 125, 0)"});
$("section:not('#contact')").css({border: "3px solid rgb(125, 125, 125)"});
Less than
$('#social-nav li:lt(3)").css({border : "3px pink solid"});
Greater than
$('#social-nav li:gt(2)").css({border : "3px cyan solid"});
Attribute filters
$("div[class]").css({border : "3px cyan solid"});
Attribute filters with specific value
$("img[alt=quote]").css({border : "3px cyan solid"});

Traversing the DOM

Next
$("#contact-methods").next().css({border : "3px cyan solid"});
Previous
$("#social-nav").prev().css({border : "3px cyan solid"});
Parent
$(".banner-title").parent().css({border : "3px cyan solid"});
Children
$("#social-nav).children().css({border : "3px cyan solid"});
Find
$("#contact").find(".facebook").css({border : "3px cyan solid"});
Closest
$("#social-nav").closest(".wrapper").css({border : "3px cyan solid"});

Chaining

Multiply functions/methods on a set of jquery objects in one line of code
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

Adding Content

Is done with functions
append() – adds content to bottom of the element
prepend() – adds content to top of element
before() – adds content before element
after() – adds content after element
html() – changes the whole html of the element
text() – changes the text of an element

Wrap and unwrap Elements

Is done with functions
wrap() – wraps all matched elements individually
unwrap() – unwraps all matched elements
wrapAll() – wraps all elements combined with 1 single element

Removing content

Is done with functions
empty() – empties the inner HTML of an element
remove() – removes the element completely

Changing Attributes

Is done with functions
removeAttr() – removes an attribut completely
attr() – can read or set any attribute
Removes the attribute
$("#contact img").removeAttr("alt");
Read the attribute
$("#contact img").attr("alt");
Write to attribute
$("#contact img").attr("alt", "bild-karta");

CSS

Is done with functions
css()
Read the value from property position
$('#yourElement').css('left');
$('h2').css('color');
And write to property
$('#yourElement').css('property', 'value');
$('h2').css('color', 'rgb(255, 0, 0)');
$('h2').css('color', 'red');

Working with classes

Is done with functions
removeClass() – removes a class from the matched element(s)
addClass() – adds a class to the matched element(s)
toggleClass – toggles the class on and off on their matched elements(s)

Event binding

Is done with functions
on() – binds an event to matched element(s)
off() – unbinds an event from matched element(s)
Button click (arrow function, normal function, anonymous function…
$('#btnOk').on("click", callback_fn_name);
Remove(unbind) click event, after this call can’t click on button
$('#btnOk').off("click");

Event handlers

Simplify the process of binding event handler to elements
$('#btn').click(callback_function_here);
$('#btn').dblclick(callback_function_here);

Event Object

When event is fired there is always an event object that is passed to the callback function (automatically) that contain info about the event. You can name the object to anything, but common names a e,evt, event, pEvent and so on
$('#btnOk').on("click", function(evt){
console.log("The event type is: "+ evt.type);
});

Document Ready vs Window Load

In jQuery, $(document).ready() and $(window).load() are two different methods used to execute code when certain conditions are met during the loading process of a web page.

  1. $(document).ready(): This method is used to execute code when the DOM (Document Object Model) is fully loaded and ready to be manipulated, even if all external resources like images or stylesheets may not have finished loading.
    javascript
  • $(document).ready(function() {
    // Code to execute when the DOM is ready
    });
    OR
    $((function() {
    // Code to execute when the DOM is ready
    });

    This method is often preferred because it allows the page to be interactive as soon as possible without waiting for all external resources to load. It’s suitable for DOM manipulation and initialization tasks.

  • $(window).load(): This method is used to execute code when the entire page, including all external resources like images and stylesheets, has finished loading.
    javascript
  1. $(window).load(function() {
    // Code to execute when the entire page is loaded
    });

    This method waits for all resources, including images and stylesheets, to be fully loaded before executing the specified code. It’s useful when you need to work with the dimensions of elements that may depend on the loading of external resources, or when you want to ensure that everything on the page is loaded before running certain scripts.

In summary, $(document).ready() fires when the DOM is ready, while $(window).load() fires when the entire page, including external resources, is fully loaded. Generally, $(document).ready() is more commonly used for initializing scripts and DOM manipulation, while $(window).load() is used for tasks that depend on the complete loading of all resources.

P.S This 2 code snippet are very common when binding the script tag in the header of the html file, because it ensures that proper binding.

Hide and show elements

Function
hide() – hides the element
show() – shows the element
toogle() – toogle between visible and invisible

Termomonlogy and Concept

Alter DOM element

Here are some of the primary functions:

  1. .html() and .text() Methods:
    • The .html() method is used to get or set the HTML content of an element.
    • The .text() method is used to get or set the text content of an element, stripping any HTML.
    javascript

  • // Get the HTML content of an element
    var htmlContent = $('#myElement').html();    // Set the HTML content of an element
    $(‘#myElement’).html(‘<p>New HTML content</p>’);// Get the text content of an element
    var textContent = $(‘#myElement’).text();

    // Set the text content of an element
    $(‘#myElement’).text(‘New text content’);

  • .val() Method:
    • The .val() method is used to get or set the value of form elements like input, select, and textarea.
    javascript
  • // Get the value of an input field
    var inputValue = $('#myInput').val();    // Set the value of an input field
    $(‘#myInput’).val(‘New value’);
  • .attr() and .prop() Methods:
    • The .attr() method is used to get or set the value of an attribute on an element.
    • The .prop() method gets the property value for only the first element in the set of matched elements.
    javascript

  • // Get the value of an attribute
    var hrefValue = $('#myLink').attr('href');    // Set the value of an attribute
    $(‘#myLink’).attr(‘href’, ‘https://example.com’);// Get the value of a property
    var isChecked = $(‘#myCheckbox’).prop(‘checked’);

    // Set the value of a property
    $(‘#myCheckbox’).prop(‘checked’, true);

  • .css() Method:
    • The .css() method is used to get or set the value of CSS properties for elements.
    javascript
  1. // Get the value of a CSS property
    var backgroundColor = $('#myElement').css('background-color');    // Set the value of a CSS property
    $(‘#myElement’).css(‘color’, ‘red’);

Extract values from the DOM to jquesy

HTML file

<div class="wrapper-contact-information">
        <div class="form-group">
            <label>First Name:<input type="text" name="form-first_name" placeholder="First Name" maxlength="100"></label>
        </div>
        <div class="form-group">
            <label for="last_name">Last Name:</label>
            <input type="text" id="last_name" name="form-last_name" placeholder="Last Name" >
        </div>
        <div class="form-group">
            <input type="radio" id="radio-male" name="gender"value="male" checked />
            <label for="radio-male">MALE</label>
        </div>
        <div class="form-group">
            <input type="radio" id="radio-female" name="gender" value="female" />
            <label for="radio-female">FEMALE</label>
        </div>

        <div class="form-group">
            <label>Phone Number:<input type="tel" name="form-phone_number" placeholder="Phone Number" maxlength="30"></label>
        </div>

        <div class="form-group">
            <label>Email:<input type="email" name="form-email" placeholder="Email" maxlength="200"></label>
        </div>

        <!-- Ugly way of doing it -->
        <div class="form-group">
            <label><input type="checkbox" name="form-customerservice" value="generalnews">Of course I want  Newsletter<br></label>
        </div>
        <div class="form-group">
            <label><input type="checkbox" name="form-customerservice" value="generalmedlem">Become a  member, free of charge<br></label>
        </div>
        <div class="form-group">
            <label><input type="checkbox" name="form-customerservice" value="generaldeals">Send irresistible offers, SAVE $$$<br></label>
        </div>
        <!-- Preferred way -->
        <div>
            <input type="checkbox" id="isresidentsweden" name="swedenresident" checked />
            <label for="isresidentsweden">Resident of Sweden</label>
        </div>
        <div>
            <input type="checkbox" id="isownerofcar" name="proudcarowner" />
            <label for="horns">Owner of a car</label>
        </div>
    </div>

 

javascript file

$(document).ready(function() {
    //alert(‘1. DOM Loaded and ready’);   //Always before window.load
    //Is OK when a static page is present
    //if ($(‘#buttonlogogreen’).length > 0) {         // Is this component present
        $(‘#buttonlogogreen’).click(function() {    // Add an action listerner
            //console.log(“The green button was clicked”);
            //if ($(‘#logo’).length > 0) {
                $(‘#logo’).css({“border-color”: “green”, “border-width”:”3px”, “border-style”:”solid”});
            //}
        });
    //}
    //This check is very important when dynamic pages are generated
    if($(‘#buttonlogoyellow’).length>0){
        $(‘#buttonlogoyellow’).click(function(){
            //console.log(“The yellow was clicked”);
            if ($(‘#logo’).length > 0) {
                $(‘#logo’).css({“border-color”: “yellow”, “border-width”:”3px”, “border-style”:”solid”});
            }
        });
    }
    if ($(‘#buttonlogopink’).length > 0) {
        $(‘#buttonlogopink’).click(function() {
            //console.log(“Pink button clicked”);
        if ($(“#logo”).length > 0){
            $(‘#logo’).css({border: “3px solid pink”});
        }
        });
    }
    if ($(‘#button-extract-info’).length > 0) {       //Component present
        $(‘#button-extract-info’).click(function() {    //What to do after clicking
            console.log(“Form button clicked”);
            const firstName = $(‘label:contains(“First Name”) input[name=”form-first_name”]’).val();        //Without id
            console.log(“The name is: ” + firstName);
            const lastName = $(‘#last_name’).val();             //With id
            //Vanilla JavaScript                            //document.getElementById(‘last_name’).value;
            console.log(“The lastnmame is: ” + lastName);
            const pickedGender = $(‘input[name=”gender”]:checked’).val();   //    “male” or “female”        [based on value attribut for radiobutton]
            //Ugly
            var isGeneralNewsChecked = $(‘input[name=”form-customerservice”][value=”generalnews”]’).prop(‘checked’);
            // Resident of Sweden checkbox
            var isResidentOfSwedenChecked = $(‘#isresidentsweden’).prop(‘checked’);             //Utilizes the id attribute
            var isResidentCheckedAlt = $(‘input[name=”swedenresident”]:checked’).length > 0;    //Utilizes the name attribute
            console.log(“Resident of Sweden is checked: ” + isResidentOfSwedenChecked);
            // Owner of a car checkbox
            var isOwnerOfCarChecked = $(‘#isownerofcar’).prop(‘checked’);
            var isCarOwnerCheckedAlt = $(‘input[name=”proudcarowner”]:checked’).length > 0;
            console.log(“Owner of a car is checked: ” + isOwnerOfCarChecked);
        });
    }
});