Jquery Interview Questions | Page 2


Question 11:

What is jQuery.noConflict and its usage?

The default namespace of jQuery library & its plugins is jQuery. By default, jQuery uses $ as shortcut for jQuery namespace. Assume, if you are using some other javascript library like prototype.js or YUI, they can run into conflict with $ variable. 

To avoid such errors you can put jQuery in no-conflict mode as shown in below example:

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script>  
var $nc = jQuery.noConflict();

// $nc will be used as an alias to the jQuery function
$nc(document).ready(function() {
    $nc("#jquery-demo-noconflict-example").val("No Conflict Mode Is Working Properly");
});
</script>    
<input type="textbox" id="jquery-demo-noconflict-example" class="form-control"/>
</body>  
</html>
Question 12:

What is the usage of selectors in Jquery?

To manipulate any HTML DOM element using jQuery, first you need to access/fetch it in jQuery. jQuery selectors allow you to select and manipulate HTML elements. jQuery selectors are used to select DOM elements based on their id, classes, attribute, value, type etc.

For example:

  1. To select all div in HTML DOM you can use $("div")
  2. To select div with specific id you can use $("#123") where 123 is the id of div
  3. To select div with specific class you can use $(".myDiv") where myDiv is the class of div
Question 13:

What are the fastest selectors in Jquery?

Id is the fastest selectors in jQuery. Moreover you can use element selectors as they are faster than other available selectors but slower than id selector. For id selectors, jQuery uses the JavaScript function document.getElementById(), which is extremely efficient. Hence it is always preffered to use id selectors.

Question 14:

Out of class selector and id selector which one will you use?

It is preferred to use Id selector instead of class selector as id selector uses JavaScript function document.getElementById(), which is extremely efficient and fast. But it depends upon requirement whether to use id or class. As class can be applied to multiple elements, in contrast to id which are unique, so if you need to use the same specific selector more than once, classes are a better choice.

Question 15:

How to get the value of a textbox using jQuery?

val() method is used to get the value of any input type/text box. Let us look the following code snippet to understand how to get the value of a textbox using jQuery.

<!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-input-textbox-value-button").click(function(){  
    alert($("input").val());  
  });  
});  
</script>  
</head>  
<body>  
<button id="jquery-input-textbox-value-button" class="btn btn-success">Click Here to get the value of textbox</button>   
<div> </div>
<input type="text" value="I am value of textbox, you can change me"></input>
</body>  
</html>

Demo

 


Question 16:

How to replace the text of div using class in JQuery?

"." is used to select any element using its class in Jquery and text() method is used to get and set the text of any selected element. Take a look on following code snippet how you can replace the text of div using its 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(){  
  $("#jquery-replace-text-by-class-button").click(function(){  
    $(".jquery-replace-text-by-class").text("Text Changed");  
  });  
});  
</script>  
</head>  
<body>  
<button id="jquery-replace-text-by-class-button" class="btn btn-success">Click Here to change text of div</button>   
<div class="jquery-replace-text-by-class">Original Text</p>  
</body>  
</html> 

Demo

Original Text
Question 17:

How to replace the html of div using class in jQuery?

"." is used to select any element using its class in Jquery and html() method is used to get and set the html of any selected element. Take a look on following code snippet how you can replace the html of div using its 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(){  
  $("#jquery-replace-html-by-class-button").click(function(){  
    $(".jquery-replace-html-by-class").html("<b>HTML Changed</b>");  
  });  
});  
</script>  
</head>  
<body>  
<button id="jquery-replace-html-by-class-button" class="btn btn-success">Click Here to change html of div</button>   
<div class="jquery-replace-html-by-class">Original HTML</p>  
</body>  
</html> 

Demo

Original HTML
Question 18:

How to replace the text of div using its "id"?

"#" is used to select any element using its id. Hence, take a look on following code snippet how you can replace the text of div using its id.

<!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-replace-text-by-id-button").click(function(){
    $("#jquery-replace-text-by-id").text("Text Changed");
  });
});
</script>
</head>
<body>
<button id="jquery-replace-text-by-id-button" class="btn btn-success">Click Here to change text of div</button> 
<div id="jquery-replace-text-by-id">Original Text</p>
</body>
</html>

Demo

Original Text
Question 19:

How to Check whether the checkbox is checked or not?

You can use prop() method to check whether the checked property is true or false.

In the below example if you check the checkbox output will be Checked in green color text whereas if you uncheck the checkbox output will be Not Checked in red color as shown:

<!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-checkbox-checked-example").click(function(){  
    if($("#jquery-demo-checkbox-checked-example").prop("checked")){  
      $("#jquery-demo-checkbox-checked-output").text("Checked").css("color","green");   
    }else{  
      $("#jquery-demo-checkbox-checked-output").text("Not Checked").css("color","red");   
    }  
 });   
});    
</script>    
</head>    
<body>    
    <input type="checkbox" id="jquery-demo-checkbox-checked-example"/>
    Checkbox is : <b><span id="jquery-demo-checkbox-checked-output">Not Checked</span></b>
</body>    
</html> 

Demo

Checkbox is : Not Checked

Question 20:

Write the code to select second last div element.

The :nth-last-child(n) selector selects all elements that are the nth child, regardless of type, of their parent, counting from the last child.

For example: In this example, the second last div element and changed its text color to green.

<!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:nth-last-child(2)").css({"color":"green"});  
});  
</script>  
</head>  
<body>  
<div>I am part of first div.</div>
<div>I am part of second div.</div> 
<div>I am part of third div.</div> 
<div>I am part of second last div.</div> 
<div>I am part of last div.</div> 
</body>  
</html>

 

Share interview questions

Comments

Comments
comments powered by Disqus

Navigation

Social Media