The purpose of jQuery is to make it much easier to use JavaScript on your website.

What You Should Already Know

Before you start studying jQuery, you should have a basic knowledge of:

HTML
CSS
JavaScript

What is jQuery?

jQuery is a lightweight, "write less, do more", JavaScript library.

The purpose of jQuery is to make it much easier to use JavaScript on your website.

jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

The jQuery library contains the following features:

HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities

how does jquery chaining work?

I am not asking what is the appropriate syntax for chaining, I know it could be something like:

$('myDiv').removeClass('off').addClass('on');

However I'm really curious to understand the inner working of it, as far as I know chaining is one of the advantages against other famous frameworks but this us to much abstraction for a novice programer like me, I'm sure there is someone out there that can provide me with a explanation that allows me to understand how chaining works.

Thanks!

If you have an object with certain methods, if each method returns an object with methods, you can simply call a method from the object returned.

var obj = {   // every method returns obj---------v
    first: function() { alert('first');   return obj; },
    second: function() { alert('second'); return obj; },
    third: function() { alert('third');   return obj; }
}

obj.first().second().third();

Create a folder in desktop: jquery
Inside jquery, create folder assets
Inside assets, create css and js folder
Inside js, create libs folder
Now open code.jquery.com/jquery.min.js and copy contents
Now inside libs create new file and paste the contents and save it as jquery.min.js
Close it. And inside jquery folder (outer folder) create index.html

Let us first check whether jquery works or not.
index.html:

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="assets/js/libs/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
alert("jquery works");
});
</script>
</body>
</html>

Hurray!! It works.

There is another way too:
$(document).on('ready',function(){
alert("jquery works");
});

Another way:

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="assets/js/libs/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
alert("jquery still works");

});
</script>
</body>
</html>

Still works...........

Or,
Instead of $ you can use jQuery.

jQuery(document).on('ready',function(){
alert("jquery works");
});
____________

Now for hello jquery in HTML, let's write this code in app.html

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="assets/js/libs/jquery.min.js"></script>
</head>
<body>
<div id="result"></div>
<script>
jQuery(document).on('ready',function(){

jQuery("#result").html("<h1>Hello jQuery </h1>");
});
</script>
</body>
</html>

jQuery will select Object result jQuery("#result") with and show html output.
Now to make the output in red color, use CSS as shown below.
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="assets/js/libs/jquery.min.js"></script>
</head>
<body>
<div id="result"></div>
<script>
jQuery(document).on('ready',function(){

jQuery("#result").html("<h1>Hello jQuery </h1>").css("color","red");
});
</script>
</body>
</html>

Now let's create style here with an object called "box" to make a border and add object box as below:

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="assets/js/libs/jquery.min.js"></script>
<style>
.box{
border: 2px solid green;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
jQuery(document).on('ready',function(){

jQuery("#result").html("<h1>Hello jQuery </h1>").css("color","red").addClass("box");
});
</script>
</body>
</html>

This will create a box outside the text. This is really easy with jQuery. To show output with JavaScript, we have to write a long lines of code.

Now let's see another example. Let's say I need two textbox and put "hello" inside two textbox. For that, create a form with two div i.e. two object and set it as type="text" as follows and apply jQuery.

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="assets/js/libs/jquery.min.js"></script>
<style>
.box{
border: 2px solid green;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div id="result"></div>
<form>
<div class="row">
<input type="text">
</div>
<div class="row">
<input type="text">
</div>
</form>
<script>
jQuery(document).on('ready',function(){

jQuery(".row").find("input").val("hello");
});
</script>
</body>
</html>

This will find input in row object and put value in the object. We don't even need to know id of the input.
Let's say there are other div with class "row" but we need only hello in form tag. So here is what you need to modify:

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="assets/js/libs/jquery.min.js"></script>
<style>
.box{
border: 2px solid green;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div id="result"></div>
<form>
<div class="row">
<input type="text">
</div>
<div class="row">
<input type="text">
</div>
</form>
<div class="row">
<input type="text">
</div>
<script>
jQuery(document).on('ready',function(){

jQuery("form .row").find("input").val("hello");
});
</script>
</body>
</html>

The output will be three box but only two box inside form will have text hello.

Now let's say I want to append "Error" text after two text box inside form tag.

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="assets/js/libs/jquery.min.js"></script>
<style>
.box{
border: 2px solid green;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div id="result"></div>
<form>
<div class="row">
<input type="text">
</div>
<div class="row">
<input type="text">
</div>
</form>
<div class="row">
<input type="text">
</div>
<script>
jQuery(document).on('ready',function(){

var obj=jQuery("form .row");
obj.find("input").val('50');
obj.append("<label class='red'>Error</label>");
});
</script>
</body>
</html>

Now,

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="assets/js/libs/jquery.min.js"></script>
<style>
#box{
border: 2px solid green;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div id="box" style="display:none"></div>
<script>
jQuery(document).on('ready',function(){

});
</script>
</body>
</html>

Because of display:none, the box is not displayed. But if we write .show(), the box will be shown.

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="assets/js/libs/jquery.min.js"></script>
<style>
#box{
border: 2px solid green;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div id="box" style="display:none"></div>
<script>
jQuery(document).on('ready',function(){
jQuery("#box").show();

});
</script>
</body>
</html>

This one is for slideDown of box:

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="assets/js/libs/jquery.min.js"></script>
<style>
#box{
border: 2px solid green;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div id="box" style="display:none"></div>
<script>
jQuery(document).on('ready',function(){
jQuery("#box").slideDown();

});
</script>
</body>
</html>

Following is the code for slideDown time of 5 seconds.

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="assets/js/libs/jquery.min.js"></script>
<style>
#box{
border: 2px solid green;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div id="box" style="display:none"></div>
<script>
jQuery(document).on('ready',function(){
jQuery("#box").slideDown(5000);

});
</script>
</body>
</html>

This will alert finish after slideDown in completed.

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="assets/js/libs/jquery.min.js"></script>
<style>
#box{
border: 2px solid green;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div id="box" style="display:none"></div>
<script>
jQuery(document).on('ready',function(){
jQuery("#box").slideDown(5000,function(){
alert("finish");
});

});
</script>
</body>
</html>

Even we can use current object - box to show some html content:

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="assets/js/libs/jquery.min.js"></script>
<style>
#box{
border: 2px solid green;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div id="box" style="display:none"></div>
<script>
jQuery(document).on('ready',function(){
jQuery("#box").slideDown(5000,function(){
$(this).html("<h1>Work Complete</h1>");
});

});
</script>
</body>
</html>

Ok. Now I need a link or close button, that needs to be displayed afetr slide down is completed. It should not be displayed until work is completed. so by default it should be style="display:none".
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="assets/js/libs/jquery.min.js"></script>
<style>
#box{
border: 2px solid green;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<a href="javascript:void(0)" id="link" style="display:none">Close</a>
<div id="box" style="display:none"></div>
<script>
jQuery(document).on('ready',function(){
jQuery("#box").slideDown(3000,function(){
$(this).html("<h1>Work Complete</h1>");
$("#link").show();

});

});
</script>
</body>
</html>

Now:

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="assets/js/libs/jquery.min.js"></script>
<style>
#box{
border: 2px solid green;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<a href="javascript:void(0)" id="link" style="display:none">Close</a>
<div id="box" style="display:none"></div>
<script>
jQuery(document).on('ready',function(){
jQuery("#box").slideDown(3000,function(){
$(this).html("<h1>Work Complete</h1>");
$("#link").show();

});
$("#link").on("click",function(){
$("#box").slideUp();

});

});
</script>
</body>
</html>

When the link is clicked the box will slide up.

Now let's say I need a link called open when I click it it should display slideup.

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="assets/js/libs/jquery.min.js"></script>
<style>
#box{
border: 2px solid green;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<a href="javascript:void(0)" id="link">Open</a>
<div id="box" style="display:none"></div>
<script>
jQuery(document).on('ready',function(){

$("#link").on("click",function(){
var $this=$(this);
if($this.html().toLowerCase()=="open"){
jQuery("#box").slideDown('auto',function(){
$(this).html("<h1>Work Complete</h1>");
$this.html("Close");
});
}else{
$("#box").slideUp();
$this.html("Open");

}

});
});
</script>
</body>
</html>

This will toggle box up and down.

----------------
To create two box and append some message to text box:

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="assets/js/libs/jquery.min.js"></script>
</head>
<body>
<form>
<div class = "row">
<input type="text" />
</div>
<div class = "row">
<input type="text" />
</div>
</form>
<script>
jQuery(document).on('ready',function(){

var obj = $("form .row");
obj.find("input").val('50');
obj.append("<label> Error</label>")
});
</script>
</body>
</html>
-----------------------

Student Management System
Use this link to download bootstrap 3.3 version. Only this link will work for glyphicon. Don't use latest version.

https://getbootstrap.com/docs/3.3/getting-started/

Create a folder jquery.
Inside jquery, create a folder assets.
Inside assets: create js folder
Inside js create create lib folder
Paste all bootstrap library and jquery.min file inside libs folder
Inside assets folder, paste css and fonts folder.
Inside assets create index.htm

index.html:
<meta charset="UTF-8">
<!DOCTYPE html>
<html>
<head>
<title>Application</title>

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<script src="assets/js/libs/jquery.min.js"></script>
<script src="assets/js/libs/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class = "page-title">
<h1>Student Management System</h1>
</div>
<table id = "student-table" class="table table-bordered table-hover table-striped">
<tr>
<th><input type="checkbox" id="check-all"></th>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Contact No</th>
<th>Status</th>
<th>Action</th>
</tr>
<tr>
<td><input type="checkbox" class="select-all"></td>
<td>1</td>
<td>Mandip Shrestha</td>
<td>mandip@gmail.com</td>
<td>2994899</td>
<td>True</td>
<td>
<a href="" class="btn btn-success btn-sm">
<span class="glyphicon glyphicon-pencil"></span>
</a>
<a href="" class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-trash"></span>
</a>
</td>
</tr>
</table>
</div>

</body>
</html>

Now let's say I need to select all the checkbox when the first check box is checked.

<meta charset="UTF-8">
<!DOCTYPE html>
<html>
<head>
<title>Application</title>

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<script src="assets/js/libs/jquery.min.js"></script>
<script src="assets/js/libs/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class = "page-title">
<h1>Student Management System</h1>
</div>
<table id = "student-table" class="table table-bordered table-hover table-striped">
<tr>
<th><input type="checkbox" id="check-all"></th>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Contact No</th>
<th>Status</th>
<th>Action</th>
</tr>
<tr>
<td><input type="checkbox" class="select-all"></td>
<td>1</td>
<td>Mandip Shrestha</td>
<td>mandip@gmail.com</td>
<td>2994899</td>
<td>True</td>
<td>
<a href="" class="btn btn-success btn-sm">
<span class="glyphicon glyphicon-pencil"></span>
</a>
<a href="" class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-trash"></span>
</a>
</td>
</tr>
</table>
</div>

<script>
$(document).on("ready",function(){
$("#check-all").on("click",function(){
var $this=$(this);
$(".select-all").prop("checked",$this.is(":checked"));
});
});
</script>

</body>
</html>

Search This Blog

Java Technology

jquery 2018

What You Should Already Know

What is jQuery?

how does jquery chaining work?

Comments

Post a Comment

Popular posts from this blog

Jersey JAX RS Jar

Tomcat Installation Steps for Windows & add tomcat to eclipse

REST API