jQuery beginners'’ guide

Query is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.

Introduction

  1. jQuery is a JavaScript library
  2. jQuery is easy to learn
  3. jQuery simplifies JavaScript
  4. jQuery makes JavaScript easy to use in our website
  5. jQuery is Client scripting

jQuery library contains

  1. HTML/DOM manipulation
  2. CSS manipulation
  3. HTML event methods
  4. Effects and animations
  5. AJAX
  6. Utilities

Adding jQuery to our website

  1. We can download jQuery library from https://jquery.com/
  2. We can include jQuery from CDN
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

jQuery Syntax

  1. jQuery allows us to select (query) HTML elements and perform actions on them.
  2. Basic syntax is: $(selector).action()
  3. The $ sign is used to define and access jQuery
  4. The (selector) to query/find HTML elements
  5. The jQuery action() is to be performed on the element/elements
  6. Example:
  7. $(‘div’).hide() -> hides all the <div> elements
  8. $(‘.head’).hide() -> hides all the elements with classname “head”
  9. $(‘#head’).hide() -> hides the element with id “head”
  10. We should always write our jQuery code inside of the document ready event which prevents any jQuery code from being executed before the document is loaded
  11. With jQuery we can chain multiple actions/methods together
$(selector).action1().action2()…..

jQuery HTML DOM manipulation

  1. text() -> sets/returns the text content of the selected element
  2. html() -> sets/returns the content of the selected element
  3. val() -> sets/returns the value the form fields
  4. attr() -> sets/returns the attributes value
  5. append() -> inserts content at the end of the selected element
  6. prepend() -> inserts content at the begninng of the selected element
  7. after() -> inserts content after the selected element
  8. before() -> inserts content before the selected element
  9. remove() -> removes the selected element
  10. empty() -> removes the child elements of the selected element
  11. addClass() -> adds one or more CSS classes to the selected element
  12. removeClass() -> removes one or more CSS classes from the selected element
  13. toggleClass() -> toggles between adding and removing classes from the selected element
  14. css() -> sets or returs the style attribute of the selected element
  15. Dimension methods :-
  16. width()
  17. height()
  18. innerWidth()
  19. innerHeight()
  20. outerWidth()
  21. outerHeight()

jQuery HTML DOM traversing

  1. parent() -> returns the direct parent of the selected element
  2. parents() -> returns all the ancestors of the selected element
  3. parentsUntil() -> returns all the ancestors of the selected element till provided argument
  4. children() -> returns all the direct children of the selected element
  5. find() -> returns all the descendant elements of the selected element
  6. siblings() -> returns all the siblings of the selected element
  7. next() -> returns the next sibling of the selected element
  8. nextAll() -> returns all next siblings of the selected element
  9. nextUntil() -> returns all the next siblings of the selected element until provided argument
  10. prev() -> returns the previous sibling of the selected element
  11. prevAll() -> returns all previous siblings of the selected element
  12. prevUntil() -> returns all the previous siblings of the selected element until provided argument
  13. first() -> returns the first element of the selected element
  14. last() -> returns the last element of the selected element
  15. eq() -> returns the element with a specific index number of the selected element
  16. filter() -> returns the filtered element of the selected element
  17. not() -> returns all the element that does not match the selected element

jQuery noConflict method

noConflict() method releases the hold on $ shortcut identifier and allows other scripts/frameworks to use it.

Example

let shortcutname = $.noConflict()
  1. This creates a new shortcut identifier for the jQuery and if variable not provided by default it is set as jQuery.
  2. If we want to use the $ shortcut identifier in the block of ready method then we’ll pass $ as the parameter to the ready method.
let shortcutname = $.noConflict()
shortcutname(document).ready(function($){
// write your code here});

A Simple example of using a few animations and AJAX using jQuery in our webpage

script.js file

$(document).ready(function(){$("#intro-show").click(function(){$('#intro').show('slow');});$('#intro-hide').click(function(){$('#intro').hide('slow');});$('#intro-fade-in').click(function(){$('#intro').fadeIn(2000);});$('#intro-fade-out').click(function(){$('#intro').fadeOut(1000);});$('#intro-slide-down').click(function(){$('#intro').slideDown(1000);});$('#intro-slide-up').click(function(){$('#intro').slideUp(1000);});$('#intro-animate').click(function(){let div = $('#intro');div.show();div.animate({height: '50%',opacity: '0.4'},1000);div.animate({width: '50%',opacity: '0.8'},1000);div.animate({height: '100%',opacity: '0.4'},1000);div.animate({width: '100%',opacity: '0.8'},1000, function () {div.hide();});});$('#load-data').click(function () {$('.data').load('style.css',function(responseTxt,statusTxt,xhr){// resposeTxt -> contains the resulting data if call is successful// statusTxt -> contains the status of the call// xhr -> contains the XMLHttpRequest objectif(statusTxt == 'error'){alert('Data not loaded since ' + xhr.status + xhr.statusTxt);}});});});

style.css file

*{margin: 0;padding: 0;}.container{display: flex;flex-direction: row;flex-wrap: wrap;margin: 5px;padding: 5px;}.intro-show{margin: 5px;cursor: pointer;color: #8bc34a;border: 1px solid black;border-radius: 3px;padding: 5px;}.intro-show:hover{background-color: #8bc34a;color: white;border: 1px solid #8bc34a;border-radius: 3px;}.intro-hide{margin: 5px;cursor: pointer;color: #ff3b00;border: 1px solid black;border-radius: 3px;padding: 5px;}.intro-hide:hover{background-color: #ff3b00;color: white;border: 1px solid #ff3b00;border-radius: 3px;}.intro{display: none;border: 1px solid black;border-radius: 3px;margin: 5px;padding: 10px;font-family: system-ui;font-weight: 400;font-style: oblique;font-size: 20px;}

index.html file

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery</title><link rel="stylesheet" href="style.css"></head><body><div class="container"><div class="intro-show" id="intro-show">Click me to show instructions</div><div class="intro-hide" id="intro-hide">Click me to hide instructions</div><div class="intro-show" id="intro-fade-in">Click me to Fade In instructions</div><div class="intro-hide" id="intro-fade-out">Click me to Fade Out instructions</div><div class="intro-show" id="intro-slide-down">Click me to Slide down instructions</div><div class="intro-hide" id="intro-slide-up">Click me to Slide up instructions</div><div class="intro-show" id="intro-animate">Click me to animate box</div><div class="intro-show" id="load-data">Click me to load data using jQuery and AJAX</div></div><div class="intro" id="intro">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque suscipit, natus dolore, dicta fugiat sequi maiores illo tenetur omnis facere nostrum at nobis eligendi esse. Eveniet ab iste dolores nobis ipsa accusantium, iusto voluptatum! Delectus facere temporibus, cumque nostrum vero recusandae quas quod perspiciatis optio molestiae odio voluptates consectetur sapiente quos ex quis ratione expedita voluptas suscipit assumenda consequatur dicta! Doloribus adipisci ratione, facilis iure cumque porro atque eligendi illum! Laudantium sapiente necessitatibus magni architecto, suscipit obcaecati rerum porro quod quaerat culpa error eveniet quae. Fugit impedit amet debitis quam, voluptatem nihil. Vitae explicabo, dolorum distinctio aspernatur deleniti cumque nulla cupiditate accusantium adipisci laboriosam asperiores necessitatibus provident ab quis illum earum fugiat non magni consectetur, quidem autem sit reiciendis. Consectetur labore culpa deserunt eaque corrupti maxime eveniet. Rerum optio accusantium placeat ea unde, nostrum inventore, sunt, magni iusto assumenda deserunt nulla. Reiciendis nisi quasi alias quam blanditiis, nostrum nobis at.</div><div class="data"></div></body><script src="jquery-3.6.0.js"></script><script src="script.js"></script></html>

Machine Learning Engineer | Software Developer | Data Scientist