jQuery Tutorial: Introduction for Beginners

jquery tutorial

jQuery Tutorial – jQuery is a simplified JavaScript Library. It’s designed to simplify HTML DOM tree traversal and manipulation. (event handling, CSS animation, and Ajax). It is free and open-source software (under the MIT License). jQuery was created by John Resig in 2006. According to BuiltWith (2018), jQuery was used on 22.4% of all websites (and 73% of the top websites, such as google.com, baidu.com, ebay.com, microsoft.com). In this tutorial, you will learn the basic syntax of jQuery and how to use it on the web.

Website: https://jquery.com/
Repository: github.com/jquery/jquery

What is JavaSctipt?

Javascript is a Programming Language for Web Development. It’s a client-side scripting language. it first appeared in 1995. There are similarities between Java and JavaScript, including name, syntax, and libraries.

Read more

jQuery Tutorial – Adding jQuery to Web Page

Using jQuery CDN

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <h1>Hello World!</h1>
    <p id="content">Content here</p>
</body>
</html>

Download the jQuery library and host jQuery yourself

<head>
<script src="jquery-3.4.1.min.js"></script>
</head>

Download: https://jquery.com/download/

jQuery Tutorial – Selector

The element Selector

you can select <p> elements on an HTML like this.

$("p")

The id Selector

you can select the elements with a specific id on an HTML like this.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p id="test">Content here</p>
</body>
</html>
$("#test")

The .class Selector

you can find elements with a specific class on an HTML like this.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p class="test">Content here</p>
</body>
</html>
$(".test")

More Selectors

$("*")          //Selects all elements
$(this)         //Select the current HTML element
$("[alt]")	//Selects all elements with an ALT attribute
$("tr:even")	//Selects all even <tr> elements (or odd)

More details: https://www.w3schools.com/jquery/trysel.asp

jQuery Tutorial – Event Methods

Mouse Events – click, dblclik, mouseenter, mouseleave
Form Events – submit, change, focus, blur
Document Events – load, resize, scroll, unload
Keyboard Events – keypress, keydown, keyup

$("p").click();

$("p").click(function(){
  // jQuery methods
});

$(document).ready(function(){
  // jQuery methods
});
// Using this document event we can execute a function when the document (page) is fully loaded

example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <h1>Hello World!</h1>
    <p id="test">Content here</p>
</body>

    <script>
        $("#test").click(function(){
            alert("You clickd it!!");
        });
    </script>

</html>

jQuery Tutorial – Effects

Hide and Show

//$(selector).hide(speed,callback);
//$(selector).show(speed,callback);

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

example 1

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>
    <h1>jQuery - Show and Hide</h1>

    <button id="show">Show text</button>
    <button id="hide">Hide text</button>

    <p>Hello World!!</p>
</body>

    <script>
        $("#hide").click(function(){
            $("p").hide();
        });

        $("#show").click(function(){
            $("p").show();
        });
    </script>

</html>
 jQuery Show and Hide

example 2

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>
    <h1>jQuery - Show and Hide</h1>

    <button id="toggle">Show/Hide text</button>
        <br/><br/>
    <p>Hello World!!</p>
</body>

    <script>
        $("#toggle").click(function(){
            $("p").toggle(2000);
        });
    </script>

</html>
jQuery show and hide - toggle

Fade

//$(selector).fadeIn(speed,callback);
//$(selector).fadeOut(speed,callback);
//$(selector).fadeToggle(speed,callback);
//$(selector).fadeTo(speed,opacity,callback);

$("#fadeIn").click(function(){
  $("p").fadeIn();
});

$("#fadeOut").click(function(){
  $("p").fadeOut("fast");
});

$("#fadeToggle").click(function(){
  $("p").fadeOut(1000);
});

$("#fadeTo").click(function(){
  $("p").fadeTo("slow", 0.5);
});

example 1

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>
    <h1>jQuery - Show and Hide</h1>

    <button id="toggle">Show/Hide text</button>
        <br/><br/>
    <p>Hello World!!</p>
</body>

    <script>
        $("#toggle").click(function(){
            $("p").fadeToggle("slow");
        });
    </script>

</html>

example 2

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>
    <h1>jQuery - fadeTo</h1>

    <button id="hide">Button1</button>
    <button id="show">Button2</button>
        <br/><br/>
    <img src="img.png" height="25%" width="25%"></img> <!-- /img.png -->
</body>

    <script>
        $("#hide").click(function(){
            $("img").fadeTo("slow", 0.5);
        });

        $("#show").click(function(){
            $("img").fadeTo("slow", 1);
        });
    </script>

</html>

Animation

$(selector).animate({params},speed,callback);

example 1

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>
    <h1>jQuery - Animation</h1>
        <br/><br/>
    <img src="img.png" height="100px" width="100px" style="cursor: zoom-in"></img> <!-- /img.png -->
</body>

    <script>
        $("img").mouseenter(function(){
          $("img").animate({
            height: '300px',
            width: '300px',
            opacity: '1',
            cursor: 'zoom-in'
          }, "slow");
        }); 

        $("img").mouseleave(function(){
          $("img").animate({
            height: '100px',
            width: '100px',
            opacity: '0.5'
          }, "slow");
        });
    </script>

</html>
jquery animation

Callback Function

//With callback function
$("#btn").click(function(){
  $("p").hide("slow", function(){
    alert("Done!");
  });
});

//Without callback function
$("#btn").click(function(){
  $("p").hide(1000);
  alert("The paragraph is now hidden");
});

Stop Animations

$(selector).stop(stopAll,goToEnd);

$("#ani").stop();

Chaining

$("img").slideUp(1000).slideDown(1000);

example 1

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>
    <h1>jQuery - Animation</h1>
        <br/><br/>
    <img src="img.png" height="100px" width="100px"></img> <!-- /img.png -->
</body>

    <script>
      function forever() {
        $("img").slideUp(1000).slideDown(1000);
          forever();
      }
      
      forever();
    </script>

</html>

jQuery Tutorial – HTML

Set Content & Set Attributes

//Set Content
$("#msg1").text("Hello world!");
$("#msg2").html("<h1>Hello world!</h1>");
$("#msg3").val("CtechF");

//Set Attributes
$("img").attr("src", "img.png");

example 1

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>
    <h1>jQuery - Set Content/Set Attributes</h1>
      <br/>
    <div id="msg"></div>
    
    <p>Name: <input type="text" id="input" value="George Racel"></p>

    <img src="noimg.png" height="100px" width="100px"></img>

      <br/><br/>

    <button id="btn1">Set Text</button>
    <button id="btn2">Set HTML</button>
    <button id="btn3">Set Value</button>
    <button id="btn4">Set Attribute</button>

</body>

    <script>
      $("#btn1").click(function(){
        $("#msg").text("Hello world!");
      });

      $("#btn2").click(function(){
        $("#msg").html("<h1>Hello world!</h1>");
      });

      $("#btn3").click(function(){
        $("#input").val("CtechF");
      });

      $("#btn4").click(function(){
        //Set Attributes
        $("img").attr({
          "src" : "img.png",
          "alt" : "CtechF Logo"
        });
      });
    </script>

</html>
jquery set content and attribute

Get Content & Get Attributes

//GetContent
val1 = $("#text").text();
val2 = $("#text2").html();
val3 = $("#input").val();

//Get Attributes
val4 = $("img").attr("src");

example 1

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>
    <h1 id="head">jQuery - GET Content/GET Attributes</h1>
      <br/>
      
    <div id="msg"></div>
    <p>Name: <input type="text" id="input1" value="George Racel"></p>

    <img src="img.png" height="100px" width="100px"></img>
    <p id="linktxt">Link: </p>

    <p id="html">HTML: </p>

      <br/><br/>

</body>

    <script>
      $("#input1").keyup(function(){
        val = $("#input1").val();
        $("#msg").html(val);
      });

        val1 = $("img").attr("src");
        $("#linktxt").text("Link: " + val1);

        val2 = $("#head").html();
        $("#html").html("HTML: " + val2);
    </script>

</html>
jquery get content and attributes

Add Elements

append() – Add content at the end.
prepend() – Add content at the beginning.
after() – Add content after the selected elements
before() – Add content before the selected elements

$("p").append("Text");

$("img").after("Text");

Remove Elements

remove() – Removes the selected element and its child elements
empty() – Remove the child elements

$("#txt").remove();
$("#txt").empty();

//removes all img elements with front and source class
$("img").remove(".front, .source");

jQuery Tutorial – CSS

Get and Set Classes – add/remove/toggle

addClass() – Add classes to the selected elements
removeClass() – Remove classes from the selected elements
toggleClass() – Toggles (adding/removing) classes from the selected elements
css() – Set style attributes

p {
    font-size: x-large;
  }

  .light {
    background-color: white;
    color: black;
  }

  .dark {
    background-color: black;
    color: white;
  }
$("#dark").click(function(){
   $("body").removeClass("light");
   $("body").addClass("dark");
});

$("#light").click(function(){
   $("body").removeClass("dark");
   $("body").addClass("light");
});

Complete example 1 – add and remove

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<style>
  p {
    font-size: x-large;
  }

  .light {
    background-color: white;
    color: black;
  }

  .dark {
    background-color: black;
    color: white;
  }
</style>
</head>
<body>
    <h1 id="head">jQuery - CSS</h1>
      
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur saepe libero dicta officia cum consequatur cumque minima provident quos similique ex, asperiores blanditiis laborum veritatis id ab reiciendis sed! Quasi!
        Temporibus, libero voluptas deleniti in maiores, tenetur soluta illo error natus aliquam quis dolorem non sit. Sapiente possimus deleniti aliquam illo quas impedit tempora quia cupiditate in. Mollitia, animi exercitationem?
        Excepturi, maxime doloremque! Vero ea consequatur fugiat eligendi est sapiente veniam excepturi! Tempora illo repellat perspiciatis hic minus qui facere ipsa porro ab, beatae itaque voluptates quam repudiandae voluptatibus sit.
        
      <br/><br/>

      <button id="light">Light Theme</button>
      <button id="dark">Dark Theme</button>

</body>

  <script>
      $("#dark").click(function(){
        $("body").removeClass("light");
        $("body").addClass("dark");
      });

      $("#light").click(function(){
        $("body").removeClass("dark");
        $("body").addClass("light");
      });
  </script>

</html>
jquery add and remove css

Complete example 1 – toggle

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<style>
  p {
    font-size: x-large;
  }

  body {
    background-color: white;
    color: black;
  }

  .dark {
    background-color: black;
    color: white;
  }
</style>
</head>
<body>
    <h1 id="head">jQuery - CSS</h1>
      
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur saepe libero dicta officia cum consequatur cumque minima provident quos similique ex, asperiores blanditiis laborum veritatis id ab reiciendis sed! Quasi!
        Temporibus, libero voluptas deleniti in maiores, tenetur soluta illo error natus aliquam quis dolorem non sit. Sapiente possimus deleniti aliquam illo quas impedit tempora quia cupiditate in. Mollitia, animi exercitationem?
        Excepturi, maxime doloremque! Vero ea consequatur fugiat eligendi est sapiente veniam excepturi! Tempora illo repellat perspiciatis hic minus qui facere ipsa porro ab, beatae itaque voluptates quam repudiandae voluptatibus sit.
        
      <br/><br/>

      <button id="dark">Change Theme</button>

</body>

  <script>
      $("#dark").click(function(){
        $("body").toggleClass("dark");
      });
  </script>

</html>
jquery - toggle

Get and Set Classes – css

//Get a CSS Property
css("Property Name");

//Set a CSS Property
css("Property Name","value");

//Set Multiple CSS Properties
css({"Property Name":"value","Property Name":"value",...});

example 1

val = $("#text").css("font-size");

$("p").css({
  "background-color": "black",
  "color" : "white"
});

Sources : 
https://pixabay.com/ (images)

Hello Friends,

Hope this post (jQuery Tutorial: Introduction for Beginners) will help you to learn something, If you enjoy my work then please share my posts with your friends and anyone who might be interested in programming and web developing. Please don’t forget to subscribe to my mailing list.

If you had any problem with this post, please do mention it in the comment section.

Like CtechF Facebook fan page: https://www.facebook.com/ctechf

What is HTML?

HTML (HyperText Markup Language) is developed by Tim Berners-Lee. An HTML document which can be displayed through a web browser is called a web page. HTML is not a computer language it’s a markup language.

For more information: HTML Tutorial: Introduction for beginners (Basic)

What is PHP?

PHP: Hypertext Preprocessor is a general-purpose server-side script language. it designed for web development. It designed by Rasmus Lerdorf in 1994 and first released in 1995. PHP is free to download and use. It can contain text, HTML, JavaScript, CSS and PHP code. it runs on Windows, Linux, Mac OS and etc… PHP can do many things such as generate dynamic web pages, manage data in your database, control user access, etc… PHP 7 is much faster than the previous versions. In this tutorial. You will learn to install and run PHP on Windows pc.

For more information
PHP 7 Tutorial: Introduction for Beginners (Basic)
PHP7 Tutorial | Part 2 – GET, POST and Cookies
PHP7 Tutorial | Part 3 – MySQL and PHP

What is SQL?

SQL (Structured Query Language) is a standard language for storing, managing and retrieving data in databases. SQL was developed at IBM by Donald Chamberlin and Raymond Boyce. and first released in 1991. SQL became a standard of the ANSI (American National Standards Institute) in 1986.

For more information: SQL Tutorial: Introduction for beginners (Basic)

Liked it? Take a second to support CtechF on Patreon!

Leave a Reply

27 Shares
Share
Tweet
Share
Pin
Share