jQuery Basic

Post by **C0D3D** »

Including jQuery in HTML document

Example 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My First jQuery Application</title>
    <link rel="stylesheet" type="text/css" href="/examples/css/style.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

Display "Hello World" message using jQuery

Example 2

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Document Ready Demo</title>
    <link rel="stylesheet" type="text/css" href="/examples/css/style.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").text("Hello World!");
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
</body>
</html>

Standard syntax of jQuery

Example 3

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Syntax</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script>
		$(document).ready(function(){
			// Some code to be executed...
			alert("Hello World!");
		});
	</script>
</head>
<body>
	<!--Contents will be inserted here-->
</body>
</html>

Shorthand syntax of jQuery

Example 4

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Shorthand Syntax</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script>
		$(function(){
			// Some code to be executed...
			alert("Hello World!");
		});
	</script>
</head>
<body>
	<!--Contents will be inserted here-->
</body>
</html>

Change text color of the elements using jQuery

Example 5

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example of Simple jQuery Powered Web Page</title>
    <link rel="stylesheet" type="text/css" href="/examples/css/style.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("h1").css("color", "#0088ff");
        });
    </script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

Change text contents of the elements on button click using jQuery

Example 6

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Set Text Contents of the Elements</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $(".btn-one").click(function(){
        $("p").text("This is demo text.");
    });
    $(".btn-two").click(function(){
        $("p:first").text("This is another demo text.");
    });
    $(".btn-three").click(function(){
        $("p.empty").text("This is one more demo text.");
    });
});
</script>
</head>
<body>
    <button type="button" class="btn-one">Set All Paragraph's Text</button>
    <button type="button" class="btn-two">Set First Paragraph's Text</button>
    <button type="button" class="btn-three">Set Empty Paragraph's Text</button>
    <p>This is a test paragraph.</p>
    <p>This is another test paragraph.</p>
    <p class="empty"></p>
</body>
</html>

jQuery Basic

jQuery Basic

Who is online