Scribd
Upload
5 views

JQuery Examples

Uploaded by

vinothchintam12
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

JQuery Examples

Uploaded by

vinothchintam12
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Ex:1 Linking JQuery

<!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>

Ex-2 :- Linking JQuery Library with basic JQuery Example

<!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>

Ex 3:- JQuery standard syntax


<!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>

Ex:4 JQuery shortend Syntax

<!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>

Ex:5 Change text color of the elements using jQuery

<!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>

Ex:6 Change text contents of the elements on button click using jQuery

<!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 Selectors

Ex 1:-Selecting an element by ID in jQuery

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery Select Element by ID</title>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>

$(document).ready(function(){

// Highlight element with id mark

$("#mark").css("background", "yellow");
});

</script>

</head>

<body>

<p id="mark">This is a paragraph.</p>

<p>This is another paragraph.</p>

<p>This is one more paragraph.</p>

<p><strong>Note:</strong> The value of the id attribute must be unique in an HTML document.</p>

</body>

</html>

Ex 2:-Selecting elements by class name in jQuery

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery Select Element by Class</title>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>

$(document).ready(function(){

// Highlight elements with class mark

$(".mark").css("background", "yellow");

});

</script>

</head>

<body>

<p class="mark">This is a paragraph.</p>

<p class="mark">This is another paragraph.</p>

<p>This is one more paragraph.</p>

</body>

</html>
Ex 3:- Selecting elements by element name in jQuery

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery Select Element by Name</title>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>

$(document).ready(function(){

// Highlight paragraph elements

$("p").css("background", "yellow");

});

</script>

</head>

<body>

<h1>This is heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<div>This is another block of text.</div>

</body>

</html>

Ex4:- Selecting elements by attribute in jQuery

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery Select Element by Attribute</title>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>

$(document).ready(function(){

// Highlight paragraph elements

$('input[type="text"]').css("background", "yellow");
});

</script>

</head>

<body>

<form>

<label>Name: <input type="text"></label>

<label>Password: <input type="password"></label>

<input type="submit" value="Sign In">

</form>

</body>

</html>

Ex 5:- Selecting elements by compound CSS selector in jQuery

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery Select Element by Compound Selector</title>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>

$(document).ready(function(){

// Highlight only paragraph elements with class mark

$("p.mark").css("background", "yellow");

// Highlight only span elements inside the element with ID mark

$("#mark span").css("background", "yellow");

// Highlight li elements inside the ul elements

$("ul li").css("background", "yellow");

// Highlight li elements only inside the ul element with id mark

$("ul#mark li").css("background", "red");


// Highlight li elements inside all the ul element with class mark

$("ul.mark li").css("background", "green");

// Highlight all anchor elements with target blank

$('a[target="_blank"]').css("background", "yellow");

});

</script>

</head>

<body>

<p>This is a paragraph.</p>

<p class="mark">This is another paragraph.</p>

<p>This is one more paragraph.</p>

<ul>

<li>List item one</li>

<li>List item two</li>

<li>List item three</li>

</ul>

<ul id="mark">

<li>List item one</li>

<li>List <span>item two</span></li>

<li>List item three</li>

</ul>

<ul class="mark">

<li>List item one</li>

<li>List item two</li>

<li>List item three</li>

</ul>

<p>Go to <a href="https://www.abc.com/" target="_blank">Home page</a></p>

</body>

</html>
Ex-6 Selecting elements by jQuery custom selector

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery Custom Selector</title>

<style>

/* Some custom style */

*{

padding: 5px;

</style>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>

$(document).ready(function(){

// Highlight table rows appearing at odd places

$("tr:odd").css("background", "yellow");

// Highlight table rows appearing at even places

$("tr:even").css("background", "orange");

// Highlight first paragraph element

$("p:first").css("background", "red");

// Highlight last paragraph element

$("p:last").css("background", "green");

// Highlight all input elements with type text inside a form

$("form :text").css("background", "purple");

// Highlight all input elements with type password inside a form

$("form :password").css("background", "blue");


// Highlight all input elements with type submit inside a form

$("form :submit").css("background", "violet");

});

</script>

</head>

<body>

<table border="1">

<thead>

<tr>

<th>No.</th>

<th>Name</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>John Carter</td>

<td>johncarter@mail.com</td>

</tr>

<tr>

<td>2</td>

<td>Peter Parker</td>

<td>peterparker@mail.com</td>

</tr>

<tr>

<td>3</td>

<td>John Rambo</td>

<td>johnrambo@mail.com</td>

</tr>

</tbody>

</table>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<p>This is one more paragraph.</p>

<form>

<label>Name: <input type="text"></label>

<label>Password: <input type="password"></label>

<input type="submit" value="Sign In">

</form>

</body>

</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy