Showing posts with label jQuery Interview Questions. Show all posts
Showing posts with label jQuery Interview Questions. Show all posts

Wednesday 4 November 2020

JQuery Interview Questions And Answers For Experienced



JQuery Interview Questions And Answers For Experienced
jQuery is a fast, small, and rich-featured JavaScript library.

It makes things like HTML document traversal and manipulation, event handling, animation, Ajax and much simpler with an easy-to-use jQuery. Jquery works across a multiple of browsers. 

With a combination of versatility and extensible, jQuery has changed the way that millions of people write JavaScript. It help for Fast development.


Question: What is current stable version of jQuery?
Version: 3.4.1 (May 1, 2019)


Quesion: In Which language jQuery is written?
JavaScript


Question: What is offical website of jQuery?
https://jquery.com/


Question: Which file need to include to use jQuery functions.
We must include a jQuery file.
We can also include jQuery from their official website.
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



Question: What are other jQuery Foundation Projects?
  • jQuery User Interface
  • jQuery Mobile
  • QUnit
  • Sizzle


Question: What is JQuery UI?
JQuery UI is a jQuery library where UI comes with cool widgets, effects and interaction mechanism. Whether you're building highly interactive web applications OR just need to add a date picker to a form control, jQuery UI is the perfect choice.


Question: From where I can get List of jQuery UI Demos?
http://jqueryui.com/demos/



Question: What are the different type of selectors in Jquery?
Following are 3 types of selectors in Jquery
  1. CSS Selector
  2. XPath Selector
  3. Custom Selector


Question: What is the difference between jQuery-x.x.x.js and jQuery.x.x.x-min.js?
In terms of functionality, there is no difference between the jQuery-x.x.x.js and jQuery-x.x.x-min.js. jQuery-x.x.x-min.js also called minified version because in this file there is no space, no tab, no newline, small variable name and very less file size. Minified version load more faster as compare to normal jquery, that's why minified version used in production environment. However this can play a vital role in th


Question: What is the use of Delegate() Method in jQuery?
1. Attach an parent event to each one of its child elements.
2. Attach the event to the elements which is not available at the time of page loading (element will after page load).



Question: What does .size() method of jquery?
Return the number of elements in node.
$("div.webtechnologyexpert").size();



Question: What is the use of jQuery Connect?
It is used to connect or bind a function to another function.It is use to execute a function whenever a function from another object is executed. To use this you need to download the jquer.connect.js file.
        $.connect('fun1',fun2) 
        $.connect(null,'fun1',fun2) 
        $.connect(self,'fun1',fun2) 
        $.connect('fun1',null,fun2)     



Question: What is the use of jQuery disconnect?
It is used to disconnect a function to another function.It is the opposite of $.connect



Question: What is the use of jQuery disconnectAll?
It is used to disconnect all the connected functions.


Question: What is the purpose of jquery-x.x.x-vsdoc.js?
Generally we will use jQuery-x.x.x-vsdoc.js to provide the intellisense support. We can even delete this file. But the thing is that it won't provide the intellisense support if we delete that file.


Question: How to hide and show a div?
$(document).ready(function(){
        $('div#mydiv').hide();
        $('div#mydiv').show();  
    });


Question: How to add data in empty div?
$(document).ready(function(){        
        $('div#mydiv').html();
});


Question: How to add click event on div in jQuery
    $(document).ready(function(){
        $("div#mydiv").click(function(){
            alert('mydiv is clicked')
        });
    });



Question: How to add double-click event on div in jQuery
    $(document).ready(function(){
        $("div#mydiv").dblclick(function(){
            alert('mydiv is double clicked')
        });
    });


Question: How to add hover event on div in jQuery?
    $(document).ready(function(){
        $("div#mydiv").hover(function(){
            alert('Hover on mydiv')
        });
    });    



Question: Is jQuery dependened on operating system?
No, jQuery is independent of any operating system. It works similar in all operating system.



Question: Explain the features of jQuery?
  1. Effects and animations on html
  2. Ajax to send the server call
  3. Extensibility
  4. Add/Change on DOM
  5. Add, Update, delete Events
  6. CSS manipulation with use of jquery
  7. We can add JavaScript Plugins
  8. DOM traversal and modification with use of jquery


Question: Can constructors be parameterized?
Yes, It can be.


Question: What is Bootstrap, Extension and System Class loader? Can you explain primordial class loader?
Bootstrap class loader
Bootstrap class loader loads those classes those which are essential for JVM to function properly. Bootstrap class loader is responsible for loading all core java classes for instance java.lang.*, java.io.* etc.

The extension class loader
The extension class loader also termed as the standard extensions class loader is a child of the bootstrap class loader. Its primary responsibility is to load classes from the extension directories, normally located the "jre/lib/ext" directory. This provides the ability to simply drop in new extensions, such as various security extensions, without requiring modification to the user's class path.

The system class loader
The system class loader also termed application class loader is the class loader responsible for loading code from the path specified by the CLASSPATH environment variable. It is also used to load an application’s entry point class that is the "static void main ()" method in a class.




Question: How to Merge the contents of two or more objects together into the one/first object?.
jQuery.extend( [ deep ], targetobject, [ object List] )



Question: How do I check if an element is hidden in jQuery?
Since the question refers to a single element, this code might be more suitable.

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");




Question: How do I redirect to another webpage??
// similar behavior as an HTTP redirect
window.location.replace("https://www.web-technology-experts-notes.in/");

// similar behavior as clicking on a link
window.location.href = "https://www.web-technology-experts-notes.in/";




Wednesday 6 September 2017

jQuery naming convention - jQuery tutorial for beginner

JQuery A fast, concise, library that simplifies how to traverse HTML documents, handle events, perform animations, and AJAX and do lot of more things in very simple and quick way..


For all this, Just include the jquery.js file.
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


jQuery naming convention - jQuery tutorial for beginner



JQuery most useful and very common functions used in the development
1) jQuery(this);// Current object
2) jQuery("p");// Select all the P tag
3)jQuery("p.abc");//Select all the P tag having class abc

4) jQuery("ul li:first");//select the first li of ul

5)jQuery("p").hide();// Hide the p tag

6) jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("div.toggle").toggle();
});

});: 
/*When you click the button first time, it will hide the div having class toggle and when click again will show.*/

7)jQuery("div#intro .head"); // select the class having "head" under div having id "intro"

8)jQuery("[hrefjQuery='.jpg']"); //select all href having link ending with jpg

9)jQuery("p.abc").append("greatinformations");;// Add the text "greatinformations" end the div having class abc

10) jQuery("p.abc").after("greatinformations"); /*Add the text "greatinformations" after the ending the div having class abc Enter code here.
Please note: Although no board code and smiley buttons are shown, they are still usable.*/

11)jQuery("div").animate({height:300},"slow"); //change all the div height to 300px

12) jQuery(this).css("background-color"); //get the background color of current html object

13)jQuery(this).css("background-color", 'blue' ); //set the background-color to blue of current html object

14)jQuery("div").animate({left:"100px"},"slow"); // Move the div to 100px

15)/*jQuery Callback:A callback function is executed after the current work is done eg. */

jQuery("button").click(function(){
jQuery("div.class").show(300,function(){
alert("The div is display now ");
});.

16) jQuery("button.a").click(function(){
jQuery("div").load('abc.txt');
});  /* when click on button having class a will load the data from abc.text and upload to div */

17) jQuery("div").load('abc.txt','',function(){alert('hi')}); // after loading file abc.txt, alert the "hi" 





Thursday 19 November 2015

Top 10 jQuery interview Questions and Answers

Top 10 jQuery interview Questions and Answers


Question: How to replace the text of div using class?
Suppose HTML
<div class="myDivClass">
Update this text</div>
jQuery code 
$('.myDivClass').text('Updated'); 



Question: How to replace the text of div using "div id"?
Suppose HTML
<div id="myDivId">
Update this text</div>
jQuery code 
$('#myDivId').text('Updated'); 



Question: How to replace the html of div using class?
Suppose HTML
<div class="myDivClass">
Update this html</div>
jQuery code 
$('.myDivClass').html('Updated'); 



Question: How to replace the text of div using "div id"?
Suppose HTML
<div id="myDivId">
Update this text</div>
jQuery code 
$('#myDivId').html('Updated'); 



Question: How to Check if checkbox is checked?
Suppose HTML is
<input name="lang[]" type="checkbox" value="English" />
<input name="lang[]" type="checkbox" value="Hindi" />
<input name="lang[]" type="checkbox" value="Urdu" />

JQuery code
var totalCheckboxSelected = $('input[name="lang[]"]:checked').length;
if(totalCheckboxSelected){
    console.log(totalCheckboxSelected+' check box checked');
}else{
    console.log('NO checkbox is selected');
}



Question: How can you check for a #hash in a URL?
if(window.location.hash) {
    var hashValue = window.location.hash.substring(1);
    console.log(hashValue);
} else {
  console.log('Hash not found');
} 



Question: How get to know which mouse button is pressed?
$('#divId').mousedown(function(event) {
    switch (event.which) {
        case 1:
            console.log('Left button pressed.');
            break;
        case 2:
            console.log('Middle button pressed.');
            break;
        case 3:
            console.log('Right button pressed.');
            break;
        default:
            console.log('Exception Case!');
    }
});



Question: How to add update the color of div with jQuery?
$('div#divId').css("background-color", "red");



Question: How to remove class from div?
$("div#divId").removeClass('className'); 



Question: How do I get the value of a textbox using jQuery?
Html

<input id="websiteId" name="website" type="text" value="Web Technology Experts Notes" /> jQuery:
$("#websiteId").val();



Question: How to submit form with post method with Ajax?
HTML Form
<form action="/ajax/form-url" id="ajaxform" method="POST" name="ajaxform">
First Name: <input name="fname" type="text" value="" /> <br />
Last Name: <input name="lname" type="text" value="" /> <br />
<input name="submit" type="submit" value="Submit the Form" /> </form>

jQuery Code
$( document ).ready(function() {
    $("#ajaxformSubmit").submit(function(e)
    {
        var postData = $(this).serializeArray();
        var formURL = '/ajax/form-url'
        $.ajax(
        {
            url : formURL,
            type: "POST",
            data : postData,
            success:function(data, textStatus) 
            {            console.log(data);
            }
        });
        e.preventDefault(); //STOP default action
    });
});



Question: How to escape the text?
var someHtmlString = "";
var escaped = $("
").text(someHtmlString).html(); console.log(escaped); //<script>aalert('hi!');</script>



Wednesday 9 September 2015

How to remove all classes using jQuery?

How to remove all classes using jQuery?


Question: How to remove class for single tag or single element with jQuery?
$(document).ready(function() {
    //Use this 
    $("#idName").removeAttr('className');

    //OR use this, both will be work same
    $("#idName").attr('class', '');
});

Any element having id="idName", Its class will be removed.
Element can p, div and p etc.
removeAttr is jQuery's inbuilt function, So you must call this function after loading the jQuery file.

$(document).ready() is used to identify jQuery file loaded.


Question: How to remove class for multiple tags in single line?
$(document).ready(function() {
    $(".className").removeAttr('className');
});

Any element having className class, "class" will be delete from html  tag.
Element can p, div & p etc.
removeAttr is jQuery's inbuilt function, So you must call this function after loading the jQuery file. $(document).ready();, is used to identify jQuery file loaded.


Question: How to remove class for single tag or single element without jQuery?
$(window).load(function() { 
    //Use this 
    document.getElementById('idName').className = '';
});

Any element having idName's class will be removed.
Element can pdiv and p etc.
$(window).load();, is used to identify html is fully loaded.


Friday 17 July 2015

Jquery Interview Questions and Answers for experienced

jquery interview questions and answers for experienced
Question: What is jQuery?
jQuery is a fast, small and feature-rich JavaScript library.
jQuery makes things like HTML document traversal and manipulation, animationevent handling and Ajax much simpler with an easy-to-use API.
It works across a multitude of browsers.


Question: What is Ajax?
Ajax( Short form of Asynchronous JavaScript and XML) is a Web development techniques used on the client-side to create Synchronous OR asynchronous Web applications. It is used to get the data from server without refresh the page.


Question: What is Iframe?
Iframe is an HTML document embedded inside another HTML document on a website. We can embed one OR many iframe in one website.


Question: What is element in HTML?
An HTML element is an individual component of an HTML document or web page.
For example, p,div,span etc know as element.
when these surrounded by angle brackets know as HTML Tags.


Question: What is event in jQuery? Doing any thing, known as event.
For Example, Click event, mouseover event, blur event, double click event etc.


Question: What is jQuery event?
A jQuery object is array-like which means that it contains zero or more indexes.


Question: How to parse a JSON String?
var obj = jQuery.parseJSON( '{ "name": "John" }' );
console.log( obj.name);



Question: How to communicate between iframe and the parent site?
With same domain and same port/protocol
you can use window.opener to change in parent window from child window.
you can use document.getElemetById('#iframeId') to change in child window from parent window.
With different domain OR different port/protocol
You have to use cross-document messaging.

Question: How can I select an element by name or class or id with jQuery?
Select by name
console.log($('div[name=divname]'));

Select by class name
console.log($('div.className'));

Select by classId
console.log($('div#classId'));



Question: How to show the preview an image before it is uploaded to server?
To show the preview you need to use "FileReader" javascript function.
See Demo:http://jsfiddle.net/LvsYc/


Question: How to get html tags from string?
var re = /(<([^>]+)>)/ig; 
    var str = '

Hello!

'; var m; while ((m = re.exec(str)) !== null) { if (m.index === re.lastIndex) { re.lastIndex++; } } console.log(re);



Question: What is use $.each? Give examples?
It is similar to foreach in jQuery.
you can use $.each for normal array OR list of elements. For Example:
$('a.myclass').each(function(index, value){
      console.log($(this).attr('href'));
});

var numberArray = [0,1,2,3,4,5];
jQuery.each(numberArray , function(index, value){
     console.log(index + ':' + value); 
});



Question: What's the difference between jquery.js and jquery.min.js?
Both are same.
only difference jquery.min.js is minified file which have no space, tab.

Question: How to add Email Validation in jQuery?
function IsValidEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}
console.log(IsValidEmail('myvalidemail@domain.com'));
console.log(IsValidEmail('myInvalidemail@'));
console.log(IsValidEmail('myInvalidemail#domain.com'));



Question: How to get nth jQuery element?
use eq function.
console.log($("div.myclass:eq(2)")); 



Question: How to remove a row from table?
$('tr#myTableRowId').remove();
OR
$('tr.myTableRowClass').remove();


Question:How to bind shortcut-keys with jQuery?
To bind Ctrl+f to a functionName.
$(document).bind('keydown', 'ctrl+f', functionName);

You can check also: http://github.com/jeresig/jquery.hotkeys


Question: How to convert array to JSON?
You can use stringify.
var yourArray = Array('1','2','3','4');
var myJsonString = JSON.stringify(yourArray);



Question: How to check if a div exists with jquery?
if($("div#idName" + name).length > 0) {
  /** It is exist **/
}



Question: How to call a function after 3 seconds?
setTimeout(
  function(){
/** Do here **/

/** Do here **/    
  }, 3000);
}



Question: How to prevent caching in Ajax?
After loading of jQuery, add the below code at the top of all ajax call.
$.ajaxSetup({ cache: false });

Tuesday 7 April 2015

jQuery Interview Questions and Answers for 2 Year experienced

jQuery Interview Questions and Answers for experienced


Question: How to select all the images of a div tag?
Use below of code snippets
$('div.mydiv').find('img');
OR
$('div.mydiv').children('img');


Question: How to get the value of selected checkbox?
Get the radio button value by button NAME
$("input[name='radioButtonName']:checked").val();
Get the radio button value by button CLASS
$('.radioButtonClass:checked').val();


Question: How to get the value of selected checkbox?
Get the checkbox value by NAME
$("input[name='checkboxName']:checked").val();
Get the checkbox value by CLASS
$('.chekboxClass:checked').val();


Question: How to check, If element exist OR not?
Check the existence of element By ID
if($('#mydivId').length )){
    //console.log('Element exist);
}else{
//console.log('Element does exist);
} 

Check the existence of element By CLASS
if($('.mydivClass').length )){
    //console.log('Element exist);
}else{
//console.log('Element does exist);
} 


Question: How to select elements which have two classes?
Just write the selectors together without spaces, to select the elements having two classes?
myDivClass1$('#mydivId.myDivClass1.c.myDivClass2').val();
It will get all the elements, which have div with mydivId (ID), div with myDivClass1 (Class) and div with myDivClass2(class).


Question: How to disabled a button?
Disabled the button by ID
$("input#myDivId").prop('disabled', true);

Disabled the button by CLASS
$("input#myDivClass").prop('disabled', true);


Question: How to change the anchor tag's href?
Change the href value by ID
$("a#myATagId").attr("href", "http://www.web-technology-experts-notes.in/p/sitemap.html");
Change the href value by CLASS
$("a.myATagClass").attr("href", "http://www.web-technology-experts-notes.in/p/sitemap.html")


Question: How to set the cookie with jQuery?
jQuery core do not have cookie functions. For this, we can include jQuery cookie plugins and its really make the cookie handling very easy.

Download Cookie plugin from Below URLs.
http://plugins.jquery.com/cookie/
Set the cookie using plugin.
$.cookie("cookieName", "cookieValue", { path: '/', expires: 7 }); 

Get a cookie using plugin.
$.cookie("cookieName");

Delete the cookie.
$.removeCookie("cookieName");



Question: How to update the HTML of container?
Update the container with using ID
$('div#myDivId').html('this is new updated html tag.');

Update the container with using class
$('div.myDivClass').html('this is new updated html tag.');



Question: How to get the HTML of container?
Get the container's value with using ID
$('div#myDivId').html();

Get the container's value with using class
$('div.myDivClass').html();



Question: How to distinguish between left and right mouse click with jQuery on paragraph tag?
$('p#myParagraphId').mousedown(function(event) {
    switch (event.which) {
        case 1:
            //alert('Left Mouse.');
            break;
        case 2:
            //alert('Middle Mouse .');
            break;
        case 3:
           // alert('Right Mouse .');
            break;
        default:
            //alert('Else click');
    }
});


Question: How to get the hash values of URL?
As we know, we can't get the hash values with using PHP. but we can get the hash values with javaScript.
if(window.location.hash) {
  // hash values
}



Question: How to change the image source using jQuery?
Change the image source with using ID
$('img#myImageId').attr('src','http://mydomain.com/newimage.png');

Change the image source with using Class
$('img.myImageClass').attr('src','http://mydomain.com/newimage.png');




Sunday 4 January 2015

Front End Developer Interview Questions and Answers

Front End Developer Interview Questions and Answers

Question: What is the importance of the HTML DOCTYPE?
DOCTYPE is an instruction to the web browser about what version of the markup language the page is written. Its written before the HTML Tag. Doctype declaration refers to a Document Type Definition (DTD).


Question: Explain the difference between visibility:hidden; and display:none?
Visibility:Hidden; - It is not visible but takes up it's original space.
Display:None; - It is hidden and takes no space.


Question: How do you clear a floated element?
clear:both


Question: What is the difference between == and === ?
== is equal to
=== is exactly equal to (value and type)



Question: What is a java script object?
A collection of data containing both properties and methods. Each element in a document is an object. Using the DOM you can get at each of these elements/objects.



Question: Describe what "this" is in JavaScript?
this refers to the object which 'owns' the method.



Question: What is a closure?
Closures are expressions, usually functions, which can work with variables set within a certain context.


Question: How to use a function a Class?
function functionName(name) {  
    this.name = name;
}
// Creating an object
var functionName = new functionName("WTEN");  
console.log(functionName.name);  //WTEN



Question: What is Difference between null and undefined?
null is an object with no value. undefined is a type.
typeof null; // "object"  
typeof undefined; // "undefined"  



Question: What is the difference between HTML and XHTML?
HTML is HyperText Markup Language used to develop the website.
XHTML is modern version of HTML 4. XHTML is an HTML that follows the XML rules which should be well-formed.


Saturday 3 January 2015

How to Add attribute in A-Tag using jQuery

How to Add attribute in A-Tag using jQuery


Following is HTML:
<div class="links">
<a href="http://www.web-technology-experts-notes.in/2014/12/bootstrap-interview-questions-and-answers-for-experienced.html">link1</a>
<a href="http://www.web-technology-experts-notes.in/2014/12/seo-interview-questions-and-answers.html">link2</a>
</div>


Output Should be:
<div class="links">
<a href="http://www.web-technology-experts-notes.in/2014/12/bootstrap-interview-questions-and-answers-for-experienced.html" target="_blank">link1</a>
<a href="http://www.web-technology-experts-notes.in/2014/12/seo-interview-questions-and-answers.html" target="_blank">link2</a>
</div>



Following are Simple ways to do this Using jQuery.
$(document).ready(function() {
    $('div.links p a').attr('target', '_blank');
});

We can also add custom attribute in any html tag.





Monday 27 October 2014

Lightbox vs Fancybox

Lightbox vs Fancybox

Lightbox: It is a lightweight jQuery plugin  used for showing images in overlay on the website.

Following are feature of Lightbox plugin.
  1.     Show image in overlay.
  2.     Show the Title of image in Overlay.
  3.     Show image gallery in overlay with "Left", "Right" Button.
  4.     In Image gallery, It support image movement with "Left" & "Right" keys.
  5.     Open Iframe in overlay does not support.
Demo & Downloadhttp://lokeshdhakar.com/projects/lightbox2/ 




Fancybox: It is jQuery plugin used for displaying images, videos (like youtube) on  iframe and map etc in overlay on the website.

Following are feature of  Fancybox plugin.
  1.     Show image in overlay.
  2.     Show the Title of image in Overlay.
  3.     Show image gallery in overlay with "Left", "Right" Button.
  4.     In Image gallery, It support image movement with "Left" & "Right" keys.
  5.     Open Iframe in overlay - You can play youtube video in overlay.
  6.     Support Ajax Processing Data.
  7.     Play SWF Files in overlay.
  8.     Google Map in Iframe.
  9.     Support callback function when open pages in overlay.
  10.     Handling "Not existing URL/Image" by plugin itself.

Saturday 8 June 2013

Pending Interview Questions and Answers

Who is the Father of PHP?
Rasmus Lerdorf


Which programming language does PHP resemble to?
PHP resemble to pearl and C


How can we create a database using PHP and MySQL?
We can create MySQL database in php with the use of
mysql_create_db ("db_name");


Is variable name case sensitive?
Yes, In PHP variable name case sensitive. We cannot start a variable with number like $777name as a valid variable name starts with a letter or underscore, followed by any number of letters, numbers, or underscores.


How can we execute a php script using command line?
Just run the PHP CLI (Command Line Interface) program and provide the PHP script file name as the command line argument. For example, "php myScript.php", assuming "php" is the command to invoke the CLI program.


Differentiate between in_array() and array_search() in php?
in_array : Checks if a value exists in an array. array_search() : Searches an array for a given value and returns the corresponding key if successful.


How do you call a constructor for a parent class?
parent::constructor($value);


How to delete file in PHP ?
unlink($filename);


How to delete variable in PHP ?
unset($variable);


What is the urlencode and urldecode in php ?
Returns a string in which all non-alphanumeric characters except -_. have been replaced with a percent (%) sign followed by two hex digits and spaces encoded as plus (+) signs.


What is the use of the function htmlentities?
htmlentities Convert all applicable characters to HTML entities This function is identical to htmlspecialchars() in all ways, except with htmlentities(), all characters which have HTML character entity equivalents are translated into these entities.


Differentiate between strstr and stristr in php?
strstr() and stristr both are used to find the first occurence of the string only difference is stristr( ) is case insensitive.


How can we know the total number of elements of Array?
sizeof($array);
count($array);


How to secure your website?
  1. Validate Input.
  2. Use Auth & ACL.
  3. Protect my Session ID
  4. Preventing Cross Site Scripting (XSS) flaws
  5. SQL injection vulnerabilities
  6. Turning off error reporting and exposing to the site for hackers
  7. Protect secure data of website


What is PHP configuration file called?
php.ini.


What is a persistent cookie?
A persistent cookie is a cookie which is stored in a cookie permanently on the browser's computer. By default, cookies are created as temporary cookies which stored only in the browser's memory. When the browser is closed, temporary cookies will be erased automatically.


What are non-key columsn in database?
Answer: A non key attribute in sql server is a columns which can not be used to identify a record uniquely for example name or age columns in customer table


Monday 27 May 2013

Ajax Methods in JQuery

Ajax Methods in JQuery

jQuery Load Method
load(): Load a piece of html into a container DOM.
$('#result').load('ajax/test.html');

jQuery GET Method
$.get(): Use this if you want to make a GET call and play extensively with the response.
$.get('ajax/test.html', function(data) {
  $('.result').html(data);
  alert('Load was performed.');
});

jQuery POST Method
$.post(): Use this if you want to make a POST call and don’t want to load the response to some container DOM.
$.post('ajax/test.html', function(data) {
  $('.result').html(data);
});

jQuery AJAX Method
$.ajax(): Use this if you need to do something when XHR fails, or you need to specify ajax options (e.g. cache: true) on the fly.
$.ajax({
  type: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});




jQuery getJSON Method
Return the Response in JSON Format
$.getJSON("/ajax/json_response", function(result){
    console.log(result)
        
    });



Monday 6 May 2013

jQuery Interview Questions and Answers

Question: What is jQuery?
Answer: JQuery is JavaScript library which helps to traverse HTML documents. you can do some cool animations and add Ajax interaction to web page. It helps programmer to reduce lines of code of core javascript.

Question: What does dollar Sign ($) means in JQuery? 
Answer$ is an alias of JQuery. See Below

/** Example Number 1 **/
$(document).ready(function(){

});
/** Example Number 1 **/

/** Example Number 2 **/
jQuery(document).ready(function(){
});
/** Example Number 2 **/


Question:  How can add margin, in all elements?
Answer:
    $("*").css("margin", "2px");


Question: What are Selectors? Give few Examples.
Answer: jQuery selector are those which help us to select the html element.
Following are some jQuery selectors.

  • Class (for example $(‘.classname’))
  • Id (for example $(“#idname”) 
  • Tag name (for example $(“div”))
  • By attribute (For example $(“input[name=’country’]”));
  • Custom Attribute

Question: What is .siblings() method in jQuery?
Answer: When we want to fetch siblings of every elements in the set of matched elements then we can use siblings() method.We filter the elements fetched by an optional selector.


Question: What is jQuery unbind?
Answer: The unbind() method removes event handlers from selected elements.

This method can remove all or selected event handlers, or stop specified functions from running when the event occurs.
function alertMe()
{
alert("Hello World!");
}
$(document).ready(function(){
  $("p").click(alertMe);
  $("button").click(function(){
    $("p").unbind("click",alertMe);
  });
});


Question: What is the use of jQuery.data()?
Answer: jQuery.data is used to set/get the multiple values.

Question: Explain bind() vs live() vs delegate() methods.
Answer: The bind() method will not attach events to those elements which are added after DOM is loaded while live() and delegate() methods attach events to the future elements also.
The difference between live() and delegate() methods is live() function will not work in chaining. It will work only on an selector or an element while delegate() method can work in chaining.


Question: Explain the each() function?
Answer: Each function is used to transverse the every element. For example
$("#clickme").click(function(){
$("li").each(function(){
alert($(this).text())
});
});

Question: What is difference between $(this) and ‘this’ in jQuery?
Answer: Both represent to the current object but having the very big difference. “this” is current object of JavaScript and can apply on javascipt functions whereas $(this) is current object wrap with jQuery,  can applies jQuery functions on it.

Question: What is the use of param() method?.
Answer: The param() method is used to represent an array or an object in serialize manner. In ajax request we can use these FOR serialize values in the query strings of URL.

Question: Explain .empty() vs .remove() vs .detach().
Answer: empty() method is used to remove all the child elements from matched elements.
remove() method is used to remove all the matched element. This method will remove all the jQuery data associated with the matched element.
detach()  This method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time..

Question: Is window.onload is different from document.ready()?
Answer: document.ready() is called when DOM is loaded whereas window.onload()  is called when all page content is loaded including js, css & images etc.

 Question: What is Chaining in jQuery?
Answer: Multiple functions applies on same object in single line.
$(‘div.abc’).css(‘background-color’,’red’).width(‘100px’).css(‘display’,’block’);
It is concise and fast, as it need not to re-run the object.


Question: What is difference between sorting string array and sorting numerical array in jQuery?
Answer: The sort method is used to sort any array elements. It sorts the string elements alphabetically.
var mylist = [ “Apple”,”Orange”,”Banana”];
mylist = mylist.sort();

Question: What is difference between prop() and attr()?
Answer: Both prop() and attr() function is used to set/get the value of specified property of an element.
Attr return the default value of property where as prop return the current value.


Question: What is event bubbling?
Answer: Event bubbling describes the behavior of events in child and parent nodes in the Document Object Model. that is, all child node events are automatically passed to its parent nodes. The benefit of this method is speed, because the code only needs to traverse the DOM tree once. This is useful when you want to place more than one event listener on a DOM element since you can put just one listener on all of the elements, thus code simplicity and reduction.