Introduction
हेलो दोस्तों आज हम इस post में jquery के इस्तेमाल करके image के src attribute की value को get और set करेंगे! jquery का इस्तेमाल करके साथ मे example बी देखेंगे!.
jQuery Get Image src
jQuery में image src को get और chnage करने के लिए attr() method का इस्तेमाल किया है!.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Get Image src attribute with Jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h1>Get Image</h1>
<button class="get_img">Get Image</button>
<img class="img" src="https://www.rjtechyg.in/wp-content/uploads/2021/09/image.jpg"/>
</div>
</body>
</html>
Jquery script for get image src attribute
<script>
$(document).ready(function(){
$('button.get_img').click(function(){
var img = $('.img').attr('src');
console.log( img );
});
});
</script>
jQuery Set image src
jQuery में image src को set करने के लिए attr() method का इस्तेमाल किया है!.
jQuery script
<script>
$(document).ready(function(){
$('button.get_img').click(function(){
var img = $('.img').attr('src','image.jpg');
console.log( img );
});
});
</script>
एक image को दूसरी image के साथ replace example
इस example में हम एक image को दूसरी image के साथ replace करेंगे jquery का इस्तेमाल करके!.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Password Hide & Show</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('button.btn_img').click(function(){
var set_image = $('img.get_img').attr('src');
var img = $('img.set_img').attr('src',set_image);
console.log( img );
});
});
</script>
</head>
<body>
<div class="container">
<h1>Get and set Image</h1>
<button class="btn_img">Get Image</button>
<img class="set_img" src="images_two.jpg" width="100px" />
<img class="get_img" src="images_one.jpg" width="100px" />
</div>
</body>
</html>
Image replace jQuery script
<script>
$(document).ready(function(){
$('button.btn_img').click(function(){
var set_image = $('img.get_img').attr('src');
var img = $('img.set_img').attr('src',set_image);
console.log( img );
});
});
jQuery full source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Password Hide & Show</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('button.get_img').click(function(){
var img = $('.img').attr('src');
console.log( img );
});
});
</script>
</head>
<body>
<div class="container">
<h1>Get Image</h1>
<button class="get_img">Get Image</button>
<img class="img" src="https://www.rjtechyg.in/wp-content/uploads/2021/09/Insert-data-into-mysql-database-using-ajax-in-php-in-hindi.jpg" data-img=""/>
</div>
</body>
</html>
