Jquery Interview Questions | Page 4


Question 31:

What is the difference between jquery.size() and jquery.length?

Size and length both returns the number of element in an object. But length is faster as compared to the size because length is a property whereas size is a method which has its own overhead.

Question 32:

Why .each() function is used in Jquery?

each() is an iterator function used to loop over object, arrays, and array-like objects. Plain objects are iterated via their named properties while arrays and array-like objects are iterated via their indices.

For example:

Array Iteration using .each() method

$.each( arr, function( index, value ){
  //code here
});

Plain Object Iteration using .each method

$.each( { firstName: "Amit", lastName: "Gupta" }, function(firstName, lastName){
    console.log( " First Name: " + firstName + " Last Name: " + lastName);
});
Question 33:

What is the difference between parent() and parents() methods in jQuery?

parent() - This method selects one element up the DOM tree.

parents() - This method is similar to parent() method but it selects all the matching elements up the DOM tree.

 

Question 34:

How to set the width of an element using jQuery?

You can set the width of any element using css('width', 'value') or width() method in JQuery.

Question 35:

Explain the difference between 'width()' vs css('width') method in Jquery.

.width() method returns a unit-less pixel value for any element for example if the width of any element is 400px it will retrun 400 whereas .css('width') method returns width of element with unit. For example if the width of element is 400px it will return 400px. 

If your code require mathematical calculations then probably you should use .width() method.


Question 36:

How do you add an HTML element in DOM tree using JQuery?

You can use append() method to append any html element in DOM tree using jQuery.

For example:

var htmlElement = $("#example1").html();
$("#example2").append(htmlElement);
Question 37:

What is the use of "clone" method in Jquery?

The clone() method is used to creaate a new copy of matched element.

The clone() method comes in two variation:

Deep Cloning: If you use clone(true) method, it will copy of element(data) and copy the handlers associated with the element.

Shallow Cloning: If you use clone() or clone(false) method, it will copy of element(data) but it will not copy the handlers associated with the element.

<!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-clone-div-example-button").click(function(){
        $("p:first").clone().appendTo("body");
    });
});
</script>
</head>
<body>
To clone the first paragraph and append it <button class="btn btn-success">Click Here</button>
<p>Modern Pathshala</p>
</body>
</html>

Demo:

To clone the first paragraph and append it

Modern Pathshala

Question 38:

Are events copied if you clone any element in JQuery? If not how can you achieve it?

clone() method comes in two variations clone()/clone(false) and clone(true). If you use clone()/clone(false) it will copy the element/data but the handlers associated to it will not get copied whereas clone(true) copy data and handlers associated to element.

Question 39:

Write a code snippet to sort string array.

You can sort string array using sort() method. The following code snippet illustrates how to sort string array in jQuery

For example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var technologyList = ["Java ", "JavaScript ", "JQuery ", "MongoDB "];
$(document).ready(function() {
    $("#jquery-demo-sort-array-output").html(technologyList);
    $("#jquery-demo-sort-array-button").click(function(){
         technologyList.sort();
         $("#jquery-demo-sort-array-output").html(technologyList);
    });
});
</script>
</head>
<body>
        <button id="jquery-demo-sort-array-button" class="btn btn-success">Click To Sort</button>
        <p id="jquery-demo-sort-array-output"></p>
</body>
</html>

Demo

 

Question 40:

How to apply css to any element using Jquery?

You can apply css to any element in jQuery using css("propertyname","value"); method.

For example:

$("p").css("color", "red");

Similarly you can apply multiple css in one element using  css({"propertyname":"value","propertyname":"value",...}); method.

For example:

$("p").css({"color":"red", "background-color":"yellow"});

Share interview questions

Comments

Comments
comments powered by Disqus

Navigation

Social Media