Top 50 JQuery Interview Questions and Answers (2021 Update)
Test if jQuery is loaded.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
</head>
<body>
<button>click</button><br><br>
<label></label>
<script type="text/javascript">
$("button").click(function(){
$("label").text("hello");
})
</script>
</body>
</html>
Using jQuery find all textareas, and makes a border. Then adds all paragraphs to the jQuery object to set their borders red.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
</head>
<body>
<textarea></textarea>
<p>hello world</p>
<textarea></textarea>
<p>caroline</p>
<br>
<button>set</button>
<script type="text/javascript">
$("button").click(function()
{
$("textarea,p").css("border","2px solid blue");
})
</script>
</body>
</html>
Set the background color red of the submit button using jQuery
<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
</head>
<body>
<input type="submit" name=""><br><br>
<label></label>
<script type="text/javascript">
$("input").click(function(){
$("input").css("background","red");
})
</script>
</body>
</html>
Create a paragraph element with some text and append it to the end of the document body using jQuery.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
</head>
<body>
<p>dummy text in cdsjldcjb hsdn ashvc</p>
<button>add paragrapah</button>
<script type="text/javascript">
$("button").click(function(){
$("p").append("<br>append text");
})
</script>
</body>
</html>
Blink text using jQuery.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p>hello world</p>
<script type="text/javascript">
$("p").css("font-size","25px");
function blink()
{
$("p").fadeIn("slow");
$("p").fadeOut("slow");
}
setInterval(blink);
</script>
</body>
</html>
Limit character input in the textarea including count.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<from>
<textarea></textarea>
</from><br>
count <label></label>
<script type="text/javascript">
$("textarea").keyup(function()
{
var value= $("textarea").val();
var count=value.length;
$("label").text(count);
})
</script>
</body>
</html>
Change button text using jQuery.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
</head>
<body>
<button>current text</button>
<script type="text/javascript">
$("button").click(function(){
$("button").text("text changed");
})
</script>
</body>
</html>
Set background-image using jQuery CSS property.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
</head>
<body>
<button>add bg image</button>
<script type="text/javascript">
$("button").click(function(){
$("body").css("background","url('3559621.jpg')")
})
</script>
</body>
</html>
How to get the selected value and currently selected text of a dropdown box using jQuery?
<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
</head>
<body>
<from>
<select>
<option value="miracle">miracle</option>
<option value="caroline">caroline</option>
</select>
</from><br>
<label></label>
<script type="text/javascript">
$("select").change(function(){
var a=$("select").val();
$("label").text(a);
})
</script>
</body>
</html>
Disable a link using jQuery.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
</head>
<body>
<a href="https://vikramsomai.github.io/">vikram somai</a>
<button>disbale link</button>
<script type="text/javascript">
$("button").click(function()
{
$("a").removeAttr("href");
})
</script>
</body>
</html>
Set value in input text using jQuery.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
</head>
<body>
<input type="text" name=""><br><br>
<button>set</button>
<script type="text/javascript">
$("button").click(function(){
$("input").val("vikram somai");
})
</script>
</body>
</html>
Set a value in a span using jQuery.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
</head>
<body>
<span></span><br><br>
<button>set</button>
<script type="text/javascript">
$("button").click(function(){
$("span").text("vikram somai");
})
</script>
</body>
</html>
Set href attribute at runtime using jquery.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<a>click me</a>
<script type="text/javascript">
$("a").click(function()
{
$("a").attr("href","https://www.google.com");
})
</script>
</body>
</html>
Remove disabled attribute using jQuery.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="text" name=""value="caroline"disabled>
<button>enable</button>
<script type="text/javascript">
$("button").click(function()
{
$("input").removeAttr("disabled");
})
</script>
</body>
</html>
Access HTML form data(Name,age,Mobile Number) using jQuery. (display in one alert box like Name,age,mobile number)
<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
</head>
<body>
<from>
name<input type="text"id="name"><br>
age:<input type="number" name=""id="age"><br>
mobile no:<input type="number" name="" id="mobile"><br>
<input type="submit" name="">
</from><br>
<label></label>
<script type="text/javascript">
$("input[type='submit']").click(function(){
var name=$("#name").val();
var age=$("#age").val();
var mobile=$("#mobile").val();
alert(name+age+mobile);
})
</script>
</body>
</html>
Handle button click event using JQuery.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
</head>
<body>
<button>click</button>
<p></p>
<script type="text/javascript">
$("button").click(function()
{
$("p").text("hellow wof");
})
</script>
</body>
</html>
Hide all headings on a page when they are clicked.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>hello world</h1>
<h1>carsf</h1>
<script type="text/javascript">
$("h1").click(function()
{
$("h1").hide();
})
</script>
</body>
</html>
Double click on paragraph to toggle background color.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
</head>
<body>
<p>dummy text in cdsjldcjb hsdn ashvc</p>
<script type="text/javascript">
$("p").dblclick(function(){
$("p").css("background","red");
})
</script>
</body>
</html>
Change the background color of the <div> element of the following code on clicking the button.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
</head>
<body>
<div style="height: 400px;width:400px">
</div>
<button>set color in div</button>
<script type="text/javascript">
$("button").click(function(){
$("div").css("background","red");
})
</script>
</body>
</html>
Attach a function to the focus event. The focus event occurs (display a message regarding the text field) when the <input> field gets focus.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
</head>
<body>
<from>
name<input type="text"id="name"><br>
</from><br>
<label></label>
<script type="text/javascript">
$("input[type='text']").focus(function()
{
$("input[type='text']").val("enter the name");
});
</script>
</body>
</html>
Post a Comment
If you have any doubts, Please let me know
Thanks!