Hello Crunchify folks. As per request from few users, I’m writing simple jQuery program for all of you.
This is the simplest jQuery code which you could start with.
Let’s get started on Simple jQuery Examples with Code and Demos.
Step-1:
- Create file crunchify-jquery.html
- Put below code into it
Just check it out result.
<html lang="">
<head>
<title>Simplest jQuery Hello World Example by Crunchify.com</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.crunchifycom {
color: #ff0000;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$("#crunchify").html("Hey. Congratulation. This is simplest jQuery World by Example... This line is getting printed after loading page and document ready jQuery function...");
});
function loop() {
$(".crunchify-com").each(function () {
var current = $(this).children(".crunchifycom").removeClass("crunchifycom");
var i = current.next().length ? current.index() : 0;
current.siblings(":eq(" + i + ")").addClass("crunchifycom");
});
}
setInterval(loop, 1000);
</script>
Welcome to Crunchify.com Tutorials... This line is coming from HTML code...
<p></p>
<div id="crunchify"></div>
<p></p>
Now let's checkout this simple changing color tricks.
<p></p>
<div class="crunchify-com">
<div class="crunchifycom">Crunchify.com</div>
<div>Crunchify.com</div>
<div>Crunchy Sharing fastest Social Sharing Plugin.</div>
</div>
</body>
</html>
Step-2:
Just double click on crunchify-jquery.html file and it will open new browser window.
Check it out this result:
Let me know if you face any issue running this code.