Jquery Interview Questions | Page 3


Question 21:

What is wrong with the following selector code in JQuery if we want to select div with id="firstDiv.a" ?

"$('#firstDiv.a').text('Undefined Error');"

jQuery uses CSS syntax for selecting elements, due to this reason some characters are interpreted as CSS notation.

For example, ID attributes, may also use periods and colons, in addition to letters, numbers, hyphens, and underscores. The colon (":") and period (".") are problematic within the context of a jQuery selector because they indicate a pseudo-class and class, respectively.

This can be solved using "escape" character i.e by placing two backslashes in front of them or place given method as shown below:

$( "#firstDiv\\.a" )

Method that should be placed in script tag

function jq( myid ) {

return "#" + myid.replace( /(:|\.|\[|\]|,)/g, "\\$1" );

}

Syntax

$( jq( "firstDiv.a" ))
Question 22:

Write a code snippet to select all <div> elements which are in all pages except first div element.

You can use not() method to exclude any in jQuery.

For example: In this example we have selected all the div elements.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $("div").not(":eq(0)").hide();
});
</script>
</head>
<body>
	<div>First</div>
	<div>Second</div>
	<div>Third</div>
	<p>
		<div>1</div>
		<div>2</div>
	</p>
</body>
</html>
Question 23:

How to check/uncheck radio buttons in Jquery?

You can use prop('checked',true) to check the radio button and prop('checked',false) to uncheck the radio button value.

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
 $("#jquery-demo-check-radio-button").click(function(){
    if($("#jquery-demo-radio-button").prop("checked")){
      $("#jquery-demo-radio-button").prop("checked",false); 
    }else{
      $("#jquery-demo-radio-button").prop("checked",true); 
    }
 }); 
});  
</script>  
</head>  
<body>  
<input type="radio" id="jquery-demo-radio-button"/> <button id="jquery-demo-check-radio-button">Chick me to check/uncheck Below Radio Button</button>

</body>  
</html>

Demo

Question 24:

What does $("div.parent") will select?

The above selector will select all the div elements with parent class.

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("div.parent").parents().css({"color": "red"});
});
</script>
</head>

<body >
  <div class="parent"> This is first division. </div>
  <div class="parent"> This is second division. </div>
</body>
</html>

Demo

In this demo we have two div elements with "parent" class and it is selected using $("div.parent") and changed the font of color is red.

This is first division.
This is second division.
Question 25:

How we can check whether the element is empty in Jquery?

To check whether any element is empty or not in jQuery, you can use either of the two given ways

Example:

<div id="emptyDiv"></div>

Method 1

You can use .is() method as

var isElementEmpty = $("#emptyDiv").is(":empty"); //returns true if selected element is empty

Method 2

You can use .length method to check if the element is empty or not.

var isElementEmpty = $("#emptyDiv:empty").length; //returns 0 if the selected element is empty

Question 26:

How to check data type of any variable in jQuery?

To check data type of any variable in Jquery you can use $.type(variable) method.

For example

<script>
var intData = 10;
var stringData = "Modern Pathshala";
var booleanData = false;
$(document).ready(function(){
    alert($.type(intData));
    alert($.type(stringData));
    alert($.type(booleanData));
});
</script>
Question 27:

Describe 5 most commonly used events in jQuery.

List of the most commonly used events, which jQuery uses to handle is

  • hover() - The hover function is used to bind mouseenter and mouseleave event on any element.
  • toggle() - The toggle() function is used to bind two or more handlers to the matched elements, to be executed on alternate clicks.
  • focus() - The focus() function attaches an event handler function to a form field, which is executed when the form field gets focus
  • blur() - The blur() function attaches an event handler function to a form field, which is executed when the form field loses focus
  • click() - The click() function attaches an event handler function to an HTML element, which is executed when the user clicks the HTML element.
Question 28:

Why event.PreventDefault is used?

The event.preventDefault() method is used to  stop any element from behaving its default behaviour. For example:- If you click any link it will open the url but if you want to prevent the default behaviour or want to add some custom behaviour you can use event.preventDefault() as shown below.

$(document).ready(function() {
  $("a").click(function(event) {
    event.preventDefault();
    alert( "Behaviour changed!" );
  });
});
Question 29:

What is the difference between event.preventDefault and event.stopPropagation?

e.preventDefault() will prevent the default behavious from happening, e.stopPropagation() will prevent the event from propagating up to other DOM elements.

Question 30:

What is the difference between event.PreventDefault and "return false"?

The event.preventDefault() method is used to  stop any element from behaving its default behaviour whereas "return false" does two things i.e. it stops any element from its default behaviour as well as stops the propagation of event to DOM element.

function() {
  return false;
}

The above code snippet is similar to-

function(e) {
  e.preventDefault();
  e.stopPropagation();
}
Share interview questions

Comments

Comments
comments powered by Disqus

Navigation

Social Media