What is jquery?
It is just simple java script library which makes easy to access html and manipulate html tags and content, jquery uses AJAX (Asynchrounous Java Script and XML) which is used to submit form data from front end to server.
Jquery CDN(Content delivery Network)
Make sure your file has jquery link, use this jquery link.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Note
If file does not contain jquery library link, jquery code will not run without it.
Run jquery code after document loaded successfully
$(document).ready(function(){
})
Shorter method
$(function(){
})
Jquey Selectors
How to select html elements usign jqueryjquery uses $ to access html elements using jquery
Select simple html element
$("element_name")
Select element using id attribute
$("#id_name")
Select element using class attribute
$(".class_name")
Set & Get values
| .text() | To set or get only text from html simple tags |
| .html() | To set or get text with html from html simple tags |
| .val() | To set or get value from input fields |
Events
| click | Element clicked |
| dblclick | Element double clicked |
| change | When element change |
| keyup | When key press and leaving |
| keydown | When key pressed |
| mouseenter | When element getting focus |
| mouseleave | When element lossing focus |
| hover | When mouse hover element |
| focus | When input field getting focus |
| blur() | When input field lossing focus |
Add new contents
| append | Add new content after a content |
| prepend | Add new content before a content |
| before | Add new content before selected element |
| after | Add new content after selected content |
Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.data{
width:200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="data"></div>
<button type="button" class="append">Append</button>
<button type="button" class="prepend">Prepend</button>
<button type="button" class="before">Before</button>
<button type="button" class="after">After</button>
</body>
</html>
<script type="text/javascript">
$(function(){
let data=$(".data");
$(document).on("click",".append", function(){
data.append("New data appended <br>");
})
$(document).on("click",".prepend", function(){
data.prepend("New data prepended <br>");
})
$(document).on("click",".before", function(){
data.before("New data added before element<br>");
})
$(document).on("click",".after", function(){
data.after("New data added after element <br>");
})
})
</script>
Apply style on element using css() method
Apply css with single property
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>Welcome to capscom technology</h1>
</body>
</html>
<script type="text/javascript">
$(function(){
$("h1").css("color", "green");
})
</script>
Apply css with multiple property
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>Welcome to capscom technology</h1>
</body>
</html>
<script type="text/javascript">
$(function(){
$("h1").css({"color" : "white", "background-color" : "blue"});
})
</script>
Get value from form input fields
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p class="result"></p>
<form>
<p>
<label for="name">Name</label>
<input type="text" class="name">
</p>
<p>
<label for="gender">Gender</label>
<input type="radio" class="gender" value="Male">Male
<input type="radio" class="gender" value="Female">Female
</p>
<p>
<label for="hobby">Hobby</label>
<input type="checkbox" class="hobby" value="Reading">Reading
<input type="checkbox" class="hobby" value="Singing">Singing
</p>
<p>
<button type="button" class="btn">Register</button>
</p>
</form>
</body>
</html>
<script>
$(function(){
$(document).on("click",".btn", function(){
var name, gender, hobby;
name="";
gender="";
hobby="";
name=$(".name").val();
gender=$(".gender:checked").val();
$.each($(".hobby:checked"), function(index, item){
hobby+=item.value;
})
$(".result").html(`
Name: ${name} <br>
Gender: ${gender} <br>
Hobby: ${hobby}
`);
})
})
</script>
Send request to PHP server using Jquery AJAX
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" class="btn">Send Request</button>
</body>
</html>
<script type="text/javascript">
$(document).on("click",".btn",function(){
$.ajax({
url:"server.php",
method:"post",
datatype:"text",
data:{
},
beforeSend:function(){
console.log("Sending data");
},
success:function(data){
console.log(data);
}
})
});
</script>