jQuery Interview Questions

Beginners To Experts

The site is under development.

Questions

<!-- HTML -->
<button id="hideBtn">Hide Text</button>
<p id="text">This is a sample paragraph.</p>

<!-- jQuery -->
<script>
// Wait until the DOM is fully loaded
$(document).ready(function() {
  // When the button with ID 'hideBtn' is clicked
  $('#hideBtn').click(function() {
    // Hide the paragraph with ID 'text'
    $('#text').hide();
  });
});
</script>
      

<!-- HTML -->
<div id="box">Click me to toggle class</div>

<!-- CSS -->
<style>
.highlight {
  background-color: yellow;
}
</style>

<!-- jQuery -->
<script>
// Wait until DOM is loaded
$(document).ready(function() {
  // When the div with ID 'box' is clicked
  $('#box').click(function() {
    // Toggle the class 'highlight' on the element
    $(this).toggleClass('highlight');
  });
});
</script>
      

<!-- HTML -->
<button id="fadeBtn">Fade In</button>
<div id="hiddenBox" style="display:none;">Hello, I'm now visible!</div>

<!-- jQuery -->
<script>
// Wait for document ready
$(document).ready(function() {
  // On clicking the button with ID 'fadeBtn'
  $('#fadeBtn').click(function() {
    // Use fadeIn method to show the div smoothly
    $('#hiddenBox').fadeIn();
  });
});
</script>
      

<!-- HTML -->
<button id="hideBtn">Hide Text</button>
<p id="text">This is a sample paragraph.</p>

<!-- jQuery -->
<script>
// Wait until the DOM is fully loaded
$(document).ready(function() {
  // When the button with ID 'hideBtn' is clicked
  $('#hideBtn').click(function() {
    // Hide the paragraph with ID 'text'
    $('#text').hide();
  });
});
</script>
      

<!-- HTML -->
<div id="box">Click me to toggle class</div>

<!-- CSS -->
<style>
.highlight {
  background-color: yellow;
}
</style>

<!-- jQuery -->
<script>
// Wait until DOM is loaded
$(document).ready(function() {
  // When the div with ID 'box' is clicked
  $('#box').click(function() {
    // Toggle the class 'highlight' on the element
    $(this).toggleClass('highlight');
  });
});
</script>
      

<!-- HTML -->
<button id="fadeBtn">Fade In</button>
<div id="hiddenBox" style="display:none;">Hello, I'm now visible!</div>

<!-- jQuery -->
<script>
// Wait for document ready
$(document).ready(function() {
  // On clicking the button with ID 'fadeBtn'
  $('#fadeBtn').click(function() {
    // Use fadeIn method to show the div smoothly
    $('#hiddenBox').fadeIn();
  });
});
</script>
      

<!-- HTML -->
<input type="checkbox" id="checkMe"> Accept terms
<button id="checkBtn">Check Status</button>

<!-- jQuery -->
<script>
$(document).ready(function() {
  // When 'checkBtn' is clicked
  $('#checkBtn').click(function() {
    // Check if the checkbox with ID 'checkMe' is checked
    if($('#checkMe').is(':checked')) {
      alert('Checkbox is checked');
    } else {
      alert('Checkbox is not checked');
    }
  });
});
</script>
      

<!-- HTML -->
<input type="text" id="username" placeholder="Enter your name">
<button id="getName">Get Name</button>

<!-- jQuery -->
<script>
$(document).ready(function() {
  // When 'getName' button is clicked
  $('#getName').click(function() {
    // Get value from input with ID 'username'
    var name = $('#username').val();
    alert('Entered name: ' + name);
  });
});
</script>