Lectures List
capscom technology computer course almora

Jquery complete tutorial with examples

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 jquery

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

 

Author/Written by: Mr Hemant Singh (Founder)
Terms & Conditions CAPSCOM TECHNOLOGY Pvt. Ltd. का बेहतर रूप से संचालन करने के लिए यहॉ कुछ नियमें और शर्ते लागू है अगर आप कैप्सकॉम टैक्नोलॉजी में पढ़ रहे है तो यह आप पर लागू होता है।