JQuery interview questions Part - 4

1. Ques: Write a code for get the text value of a selected option?

<select id="ddl">
   <option value="1">Employee</option>
   <option value="2">Manager</option>
   <option value="3">HR</option>
   <option value="4">Teacher</option>
</select>

Answer: $("#pcdsselect").val();


2. Ques: Write a code for check or unchecked a checkbox input or radio button?
Answer:
$('#pcds').attr('checked', true);
$('#pcds').attr('checked', false);


3. Ques: How do You disable or enable a form element?
Answer:
// Disable #pcds
$('#pcds').attr('disabled', true);
// Enable #pcds
$('#pcds').attr('disabled', false);


4. Ques: What is the Document Ready Event syntax ?
Answer:
$(document).ready(function(){

});

5. Ques: Write a code for hide method of different selector ?
Answer:
<p id="myherder" class="myherderclass">This is a paragraph Element in html.</p>

$(this).hide() -its  hides the current element.

$("p").hide() -its   hides all <p> elements.

$(".myherderclass").hide() -its  hides all elements with class="myherder".

$("#myherder").hide() - its  hides the element with id="myherder".


6. Ques: Explain the code syntax and example of  hide() and show() method in Jquery ?
Answer:
Syntax:  $(selector).hide(speed,callback);

Ex:
<p id="ParaId">This is a paragraph Element in html.</p>

$("#ParaId").click(function(){
    $("p").hide();
});

$("#ParaId").click(function(){
    $("p").show();
});

7. Ques: What are the use of jQuery toggle() method ?
Answer:
toggle() method just toggle between the hide() and show() methods in jQuery ?
Ex:
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").toggle();
    });
});
</script>

JQuery interview questions Part 3

1. Ques: What is JQuery.noConflict?
Answer:
jQuery no-conflict just overcome the conflicts between the different js frameworks or libraries.
When we use jQuery no-conflict mode, we are replacing the $ to a new variable and assigning to jQuery some other JavaScript libraries.Use the noConflict() method to specify a new name for the jQuery variable.

2. Ques: What is $(document).ready() function ?
Answer:
The ready event occurs when the DOM (document object model) has been loaded.Because this event occurs after the document is ready, it is a good place to have all other jQuery events and functions. The ready() method specifies what happens when a ready event occurs.


3. Ques: What is difference between prop() and attr() in Jquery ?
attr()

• Get the value of an attribute for the first element in the set of matched elements.
• gives you the value of element as it was defines in the html on page load

prop()

• Get the value of a property for the first element in the set of matched elements.
• It gives the updated values of elements which is modified via javascript/jquery

4. Ques: What is each() function in jQuery ?

Answer:

jQuery.each()is funtion which loop through a collection (object type or array type).it iterated by their index position and value in Array-like objects.


5. Ques: What is Dojo?
Answer:
Dojo is a third-party javascript toolkit for creating rich featured applications. Dojo is an Open Source DHTML toolkit written in JavaScript. It builds on several contributed code bases (nWidgets, Burstlib, f(m)), which is why we refer to it sometimes as a “unified” toolkit. Dojo aims to solve some long-standing historical problems with DHTML which prevented mass adoption of dynamic web application development.

6. Ques: Can we set session variables from JavaScript ?
Answer:
It's not possible to set any session variables directly from javascript as it is purely a client side technology.


7. Ques: Explain the each() function ?
Answer:
each() is the jquery function and it is used to iterate over jquery matched object list.
each() is a traversing method which works only jquery objects.
syntax :
$(selector).each(function(index,element))

•  “index” is the index position of the selector.
•  “selector” specifies the current selector where we can use “this” selector also.
•   In the case when we need to stop the each loop early then we can use “return false;”

Example:
<script>
  $(document).ready(function(){
      $("button").click(function(){
          $("li").each(function(){
              alert($(this).text())
        });
    });
});
</script>


8. Ques: What is the use of param() method ?
Answer:
The param() method is used to represent an array or an object in serialize manner.While making an ajax request we can use these serialize values in the query strings of URL.
Syntax: $.param(object | array, boolValue)
“object | array” specifies an array or an object to be serialized.
“boolValue” specifies whether to use the traditional style of param serialization or not.

For example:
personObj=new Object();
empObject.name="Vijay";
empObject.age="29";
empObject.dept=”Marketing”;
$("#clickme").click(function()
{
     $("span").text($.param(empObject));
});


9. Ques: What is difference between id selector and class selector in jquery ?
Answer:

• Id are unique in html page
• Each element can have only one id
• Each page can have only one element with that id

• Classes are not unique in html page 
• You can use the same class on multiple elements.
• You can use multiple classes on the same element.

ex:
<div id="Body">
<h1>Tile of pages</h1>
<p class="para">here i am showing my blog</p>
<p class="para">css class applied here</p>
</div>

JQuery interview questions Part 2

1. Ques: How JavaScript and jQuery are different ?
Answer:
JavaScript is a script language.
jQuery not a language. jQuery is a open source library built in the JavaScript language.


2. Ques: What is chaining in jQuery ?
Answer:
Chaining means to connect multiple functions, events on  single selectors.
Chaining allows us to run multiple jQuery methods (on the same element) within a single statement.
Chaining is one of the most powerful feature of jQuery.
it Provides your code shorter and easy to manage for better performance.
e.x.
$(document).ready(function(){
    $('#dvCont').addClass('headertop');
    $('#dvCont').css('color', 'gray');
    $('#dvCont').fadeIn('slow');
});​

3. Ques: What are various methods to make ajax request in jQuery ?
Answer:
folowing are jquery metohd which use for to make ajax calls.
load() : Load a piece of html into a container DOM.
$.getJSON(): Load JSON with GET method.
$.getScript(): Load a JavaScript file.
$.get(): Use to make a GET call and play extensively with the response.
$.post(): Use to make a POST call and don't want to load the response to some container DOM.
$.ajax(): Use this to do something on XHR failures, or to specify ajax options (e.g. cache: true) on the fly.

4. Ques: What is the difference between jQuery and jQuery UI ?
Answer:

• jQuery is the core library. It focuses on the low-level stuff like creating elements, manipulating the DOM, event handling, performing HTTP requests, etc

• jQuery UI is a used for user interface effects, widgets, and themes built on top of the jQuery JavaScript Library. It is a set of user interface components like buttons, dialog boxes, sliders, tabs, more advanced animations, drag/drop functionality.If you use jQueryUI, you must also include jQuery.

JQuery interview questions Part 1

Ques:  What is Jquery?
Answer: 
jquery is a lightweight open source JavaScript library. it is a fast & cross-platform JavaScript library which simply the client-side scripting of HTML. it also simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.


Ques: What are the advantages of jquery?
Answer: 

•  It is light weight and fast  as compared to other java script frameworks.
•  It is Cross-browser compatibility and Open source library
•  DOM manipulation.
•  AJAX Support.
•  Animation and cool Effect.
•  Easy to Use and more flexible.
•  Expand the functionality using custom plugins.
•  Provide Jquery user interface.

Ques: What  is syntax of jquery using in page and what is document ready function ?
Answer:
<script language="javascript" >

         $(document).ready(function(){    
         alert("document is ready");
});
</script>

This is to prevent any jQuery code from running before the document is finished loading.
It is good practice to wait for the document to be fully loaded and ready before working with it.


Ques:What are the types of selectors in jquery ?
Answer:
There are 3 types of selectors in Jquery
1. CSS Selector
2. XPath Selector
3. Custom Selector


Ques:How many types of selectors in jQuery?
Answer:

The list of types of selectors in Jquery as .

1. Universal Selector -Selects all elements as $("*")
1. ID Selector - Selects the element with the id as $("#username")
2. Class Selector - Selects the element with the class name as (".students")
3. Element Selector - Selects the element using its type. For example if the element is a paragraph
4. Animated Selector -Select all elements that are in the progress of an animation at the time the selector is run.
5. Button Selector -Selects all button elements and elements of type button.
6. Attribute Selector -It is used to select elements based on its attribute value.


Ques: What are multiple selectors in jQuery?

Answer:

jQuery supports multiple selectors.it specify any number of selectors to combine into a single result.
ex : $('.dvstyle', '.bar', '#divID').this selector find all element which css is 'dvstyle' and 'bar'  and Id of is divID.


Ques: What are the effects methods used in jQuery ?  Explain with example.
Answer:
These are some effects methods used in jQuery:
show()
hide()
toggle()
fadeIn()
fadeOut()

show()
ex:
<script>
 $(document).ready(function()
  {
    $("#show").click(function(){
        $("p").show();
    });
});
</script>
<button id="show">Show</button>
<p>This is a paragraph content.</p>

hide()
ex:
<script>
 $(document).ready(function()
  {
   $("#hide").click(function(){
        $("p").hide();
    });
});
</script>
<button id="hide">Hide</button>
<p>This is a paragraph content.</p>

toggle()
ex:
<script>
 $(document).ready(function()
{
  $("button").click(function(){
      $("p").toggle();
});
});
</script>

<button>Toggle button </button>
<p>This is a paragraph content.</p>

fadeIn()
ex:
<script>
$(document).ready(function()
   {
       $("button").click(function(){
        $("#div1").fadeIn();      
    });
});
</script>

<button>Click to fade </button>
<div id="div1"></div>

fadeOut()
ex:
<script>
$(document).ready(function()
   {
    $("button").click(function(){
        $("#div1").fadeOut();      
    });
});
</script>

<button>Click to adeOut </button>
<div id="div1"></div>