Q1. What is jQuery?
Ans:jQuery is Lightweight and Cross Browser JavaScript Library/Framework which helps to traverse HTML DOM, make animations, add Ajax interaction, manipulate the page content, change the style and provide cool UI effect. The biggest advantage over Javascript is that it reduces lines of code as huge code written in JavaScript, can be done easily acheived with jQuery in few lines.jQuery is easy to learn.
Q2. Why jQuery?
Ans: Due to following functionality. 1. Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+) 2. AJAX functions 3. CSS functions 4. DOM manipulation 5. DOM transversal 6. Attribute manipulation 7. Event detection and handling 8. JavaScript animation 9. Hundreds of plug-ins for pre-built user interfaces, advanced animations, form validation etc. 10. Expandable functionality using custom plug-ins
Q3. Is jQuery replacement of Java Script?
Ans: No. jQuery is not a replacement of JavaScript. jQuery is a different library which is written on top of JavaScript. jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML.
Q4. What is the basic need to start with jQuery?
Ans: To start with jQuery, one need to make reference of it's library. The latest version of jQuery can be downloaded from jQuery.com.
Q5. What does dollar Sign ($) means in JQuery?
Ans: Dollar Sign is nothing but it's an alias for JQuery. Take a look at below jQuery code. $(document).ready(function(){ }); Over here $ sign can be replaced with "jQuery" keyword. view sourceprint? jQuery(document).ready(function(){ });
Q6. Is there any difference between body onload() function document.ready() function used in jQuery?
Ans: document.ready() function is different from body onload() function due to 2 reasons. 1. We can have more than one document.ready() function in a page where we can have only one body onload function. 2. document.ready() function is called as soon as DOM is loaded where body.onload() function is called when everything gets loaded on the page that includes DOM, images and all associated resources of the page.
Q7. Can we have multiple document.ready() function on the same page?
Ans: YES. We can have any number of document.ready() function on the same page.
Q8. What are the different type of selectors in Jquery?
Ans: There are 3 types of selectors in Jquery 1. CSS Selector 2. XPath Selector 3. Custom Selector
Q9. Name some of the methods of JQuery used to provide effects?
Ans: Some of the common methods are : 1. Show() 2. Hide() 3. Toggle() 4. FadeIn() 5. FadeOut()
Q10. What is JQuery UI?
Ans: jQuery UI is a library which is built on top of jQuery library. jQuery UI comes with cool widgets, effects and interaction mechanism.
11.What are Events in jQuery?
Ans:All the visitors actions that a web page can respond to are called events. An event represents the precise moment when something happens.
Examples: .moving a mouse over an element .selecting a radio button The term "fires" is often used with events.
Example: "The click event fires the moment if you click the mouse".
12.What are mouse events?
a.click b.dblclick c.mouseenter d.mouseleave
13.What are keyboard events?
a.keypress b.keydown c.keyup
14.What are form events?
a.submit b.change c.focus d.blur
15.What are Document/Window events?
a.load b.resize c.scroll d.unload
16.What is jQuery Syntax For Event Methods and give an example?
Most DOM events have an equivalent jQuery method.
Example: Step 1: To assign a click event to all paragraphs on a page, you can do this: $("p").click(); Step 2: The next step is to define what should happen when the event fires. You must pass a function to the event: $("p").click(function(){ // action goes here!! });
17.Explain click() method in jQuery?
The click() method attaches an event handler function to an HTML element. The function is executed when the user clicks on the HTML element. The following example says: When a click event fires on a
element; hide the current
element:
Example: $("p").click(function(){ $(this).hide(); });
18.Explain dblclick() method in jQuery?
The dbclick() method attaches an event handler function to an HTML element. The function is executed when the user double-clicks on the HTML element:</ Example: $("p").dblclick(function(){ $(this).hide(); });
19.Explain mouseenter() method in jQuery?
The mouseenter() method attaches an event handler function to an HTML element. The function is executed when the mouse pointer enters the HTML element:
Example: $("#p1").mouseenter(function(){ alert("You entered p1!"); });
18.Explain mousedown() method in jQuery?
The mousedown() method attaches an event handler function to an HTML element. The function is executed, when the left mouse button is pressed down, while the mouse is over the HTML element: Example: $("#p1").mousedown(function(){ alert("Mouse down over p1!"); });
19.Explain mouseup() method in jQuery? The mouseup() method attaches an event handler function to an HTML element. The function is executed, when the left mouse button is released, while the mouse is over the HTML element: Example: $("#p1").mouseup(function(){ alert("Mouse up over p1!"); });
20.Explain hover() method in jQuery?
The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods. The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element:
Example: $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); });
21.Explain focus() method in jQuery?
The focus() method attaches an event handler function to an HTML form field. The function is executed when the form field gets focus:
Example: $("input").focus(function(){ $(this).css("background-color","#cccccc"); });
22.Explain blur() method in jQuery?
The blur() method attaches an event handler function to an HTML form field. The function is executed when the form field loses focus:
Example: $("input").blur(function(){ $(this).css("background-color","#ffffff"); });
23.What is difference between jQuery and Microsoft Ajax? When do you use Ajax and When do you use jQuery? What is the significance?
jQuery is like the ASP.NET AJAX Client Framework (MicrosoftAjax.js), with selectors, DOM selections/ manipulations, plug-ins, and better animation support. jQuery is more powerful than MS AJAX on the client side due to its light weight nature . This is the reason Microsoft integrated jQuery with Visual Studio. JQuery is integrated for post VS versions 2008, no explicit download of jQuery file is required for the versions above VS2010. Ajax is a Technology for Asynchronous Data Transferring. AJAX is a technique to do an XMLHttpRequest from a web page to the server and send or receive data to be used on the web page.
jQuery can be used ->If you love and comfortable with JavaScript ->Most interaction is client-side only ->If a custom solution is required ->For stunning look and feel of client side UI ->If animations ,DOM Selection are required
Ajax can be used ->If you are using ASP.NET & VS ->When server side Integration is required. ->If you need json and WCF Support
Conclusion: jQuery and Ajax often used in conjunction with each other for better results. jQuery is used to modify data on the webpage dynamically and it can use AJAX to retrieve data that needs without changing the current state of the displayed page through partial post backs
24.What is jQuery Connect ? How to use jQuery Connect?
This is a jQuery plugin that is used to connect / bind a function to another function. It is more of assigning a handler for another function. Connect is used to execute a function whenever a function from another object or plugin is executed. We can connect to an event of a DOM element too using this function. In the sense same connect function can be used for both DOM elements and for the functions. $.connect(refobj,refFuncName, connObj,connFunc); This means that, when the reference function is executed, the connected function gets executed automatically after it. To understand more please analyze the following example function A(){ this.fun1 = function(){ called1 = 'calssA-fun1'; } } var a = new A(); function B(){ this.fun2 = function(){ called2 = 'classB-fun1'; } } var b = new B(); $.connect(a,'fun1',b,fun2); Here we connected "fun2" of object b to "fun1" of object a. When we call b.fun2, a.fun1 will also execute automatically. This is very handy to execute some function when some other function is executed from the plug-in . In order to play with it follow these steps. ->Download jquery.connect.js file. ->Include this file in your html file. ->Take help of $.connect function as illustrated to connect a function to another function.
25.In what scenarios jQuery can be used?
a.To apply CSS static or dynamic b.To call functions on events c.Crisscross the documents d.Manipulation purpose e.To add animation effects In all the cases we are using JavaScript can be replaced with jQuery in the projects. This can reduce maintenance.
26. What is the difference between jQuery find and children methods?
The difference between find() and children() methods are that the children only travels a single level down the DOM tree while the find travels at all level down the DOM tree.
27. How to use length function in jQuery to text existance of an element by Id?
To test if an element exists we can use length method in jQuery as below: if $(''#mySampleDiv'').length )//Tests wheter the div with id mySampleDiv exists or not $(mySampleDiv).find(''div'');
28.What are the advantages of using jQuery over JavaScript in ASP.NET web application? Below are the advantages of using jQuery over JavaScript 1.Jquery is well written optimized javascript code so it will be faster in execution unless we write same standard optimized javascript code. 2.Jquery is concise java script code ,means minimal amount of code is to be written for the same functionality than the javascript. 3.Javascript related Development is fast using Jquery because most of the functionality is already written in the library and we just need to use that. 4.Jquery has cross browser support ,so we save time for supporting all the browsers.
29.How to use jQuery in ASP.NET web application?
To use jQuery in ASP.NET web application follow the below steps: a)Go to http://jquery.com/(The official jQuery WebSite) b)Download latest .js jQuery file from the website. c)Put it the script(or other folder) in the root of your web application d)Add the below tag on the page where you want to use Jquery
30. What is the use of Jquery min js file in ASP.NET web application? JQuery min .js file is actully a minified version of Actual JQuery .js. The min files have less size but same content so this improves the performance.so You should prefer to use min files.
31.What is the advantages of use of document.ready functions in jQuery?
Advantage of using $(document).ready(function () in jQuery is that the code inside this function will excecute only when the full page has been loaded so that there will be no error like the DOM object on which the Jquery has to execute is not loaded.
32.How to write a callback function with arguments in Jquery? The below code is correct for call back using arguments $.get(''samplepage.html'', function(){ sampleCallBackFunction(arg1, arg2); }); where get is parent function and sampleCallBackFunction is call back function Howevwer if you will do like below it will not work: $.get(''samplepage.html'', sampleCallBackFunction(arg1, arg2));
33.Can a function that appears after parent function can execute before the callback function?Yes.A function that appears after parent function may or may not execute before the callback function depending upon the response from parent function.
34.What is a callback function in Jquery?
A callback function is nothing but a function to be passed as an argument to another function and it runs after its parent function has executed. $.get(''sample.html'', sampleCallBackFunction); Note that here sampleCallBackFunction does not have any arguments.
35.What is the use of event.preventDefault function in Jquery?
event.preventDefault function in Jquery is used to prevent the default behaviour of the event in question. For eaxmple if you want to prevent the default behaviour of click event then use the following code $("div").click(function(event){ event.preventDefault(); $(this).hide("slow"); }); Now if you will click on the div it will disapper slowly.
36.How to detect using java script if user is using iPad to access your application?if(navigator.platform.indexOf("iPad") != -1) { //means it is iPad return true; } else { //means it is not iPad return false; }
37.What is difference between attribute value and property value in HTML?
Attribute values are values written in HTML text file But property value are values found in HTML DOM tree. Thus property values can change as per user interaction but Attribute values never changes.
38.What is the use of data-role as listview in Jquery Mobile?
data-role = "listview" in Jquery Mobile is used to create a bulleted list of item as shown below:
- <ul data-role="listview" ></br>
<li><a href="#">A</a></li></br>
<li><a href="#">B</a></li></br>
<li><a href="#">C</a></li></br>
<li><a href="#">D</a></li></br>
</ul>
39.How to create a button with Jquery Mobile?
Below is the code to create a button with Jquery Mobile <a href="#" data-role="button" data-icon="">Press</a>
40.What is the use of data-role attribute of div in Jquery Mobile? data-role attribute of div in Jquery Mobile generally assigned the following values to start with(However other values are there too): <div data-role="page"></br>
<div data-role="header"></br>
<div data-role="content"></br>
This attribute is used for creating styled widget.
41.What js and css file we need to reference while developing Jquery Mobile application?
Below are the generalised version of js and css file we need to reference while developing Jquery Mobile application. jquery.mobile-x.x.x.min.css jquery-x.x.x.min.js jquery.mobile-x.x.x.min.js
42.How can we check/uncheck an checkbox in jquery?
Using two function, we can perform the operation. // Check #x $(“#checkboxid”).attr(“checked”, “checked”); // Uncheck #x $(“#checkboxid”).removeAttr(“checked”);
43.How can we disable/enable an element in jquery?
you can disable/enable web element using attr and removeAttr functions respectively. // Disable #x $(“#x”).attr(“disabled”,”disabled”); // Enable #x $(“#x”).removeAttr(“disabled”);
44.How do I test whether an element has a particular class?
* You can use the is() method along with an appropriate selector if ( $(‘#myDiv’).is(‘.pretty’) ) $(‘#myDiv’).show(); Note that this method allows you to test for other things as well. For example, you can test whether an element is hidden (by using the custom :hidden selector): if ( $(‘#myDiv’).is(‘:hidden’) ) $(‘#myDiv’).show();
45.How can we apply css in div using jquery?
using css() method we can apply css in div element. example: $(“div”).css(“border”,”1px solid green”);
46.Do I need to refer jQuery file both in Master page/base page/template page and content page ?
Ans: No, master page/base page/ template page basically helps to create consistent layout for the page in the application. In case you have referred the jQuery file in master page/base page/ template page that cause rendering the file in the browser, you do not need to refer jQuery file the content page again. In summary, there should not be more than one < script> tag with jQuery file reference in the source code of the rendered web page in the browser.
47.What is the difference between jQuery-x.x.x.js and jQuery.x.x.x-min.js?
Ans: In terms of functionality, there is no difference between the jQuery-x.x.x.js and jQuery-x.x.x-min.js (also called minified version). However this can play a vital role in the performance of the web page.
48: How it affects the performance ?
Ans: jQuery-1.4.4.js file size is 178 KB as against its minified version jQuery-1.4.4-min.js that is only 76.7 KB in size. So when your page loads in the client?s browser if you are not using minified version, it loads 178 KB file that takes more time to load than 76.7 KB.
49.Why to load jQuery file from CDN ?
Ans: You may ask that if we can load the jQuery file from our own server why to load it from the CDNs. The answer is logical and very simple. The browser behavior is that whenever it loads any webpage, it keeps related files (eg. Javascript file, CSS file and Images) used for that page into its cache (also called history). When next time the user browses any web page, browser loads only those files that are new or modified and is not available in the browser cache or history. In this way, browser improves its performance and loads the page. The possibility is that if more and more websites are using CDNs, the user might have already browsed some other web pages that is using CDNs jQuery file and that file may have into browser cache; so when user browse your page and you are also using CDNs file, the older cached version of jQuery file will be used. In this way your page will load faster as browser will not have to load the jQuery file for your page again. The benefit: Faster page load as jQuery file need not to be downloaded Saves your bandwidth as jQuery file is not loaded from your server Scalable - generally CDNs place these files on the servers located at different geographical locations of the world so that they load faster so irrespective of from where your user is browsing your page, your application runs well.
50.Q: Is it good to load jquery from CDN(Content delivery network) ?
Ans: Yes, it is always good to load your jquery from content delivery network. It provides some benefits like :- Caching - It means that if any previously visited site by user is using jQuery from Google CDN then the cached version will be used. It will not be downloaded again. Reduces load - It reduces the load on your web server as it downloads from Google server's.
51. Do we need to add the JQuery file both at the Master page and Content page as well ?
Ans: No, if the Jquery file has been added to the master page then we can access the content page directly without adding any reference to it. This can be done using this simple example < script type="text/javascript" src="jQuery-1.4.1-min.js">< /script>
52. What is the advantage of using the minified version of JQuery rather than using the conventional one ?
Ans: The advantage of using a minified version of JQuery file is Efficiency of the web page increases. The normal version jQuery-x.x.x.js has a file size of 178KB but the minified version jQuery.x.x.x-min.js has 76.7 KB. The reduction in size makes the page to load more faster than you use a conventional jQuery file with 178KB
53. What is CDN and how jQuery is related to it ? Ans: CDN - It stands for Content Distribution Network or Content Delivery Network. Generally, a group of systems at various places connected to transfer data files between them to increase its bandwidth while accessing data. The typical architecture is designed in such a way that a client access a file copy from its nearest client rather than accessing it from a centralized server. So we can load this jQuery file from that CDN so that the efficiency of all the clients working under that network will be increased.
41.What js and css file we need to reference while developing Jquery Mobile application?
Below are the generalised version of js and css file we need to reference while developing Jquery Mobile application. jquery.mobile-x.x.x.min.css jquery-x.x.x.min.js jquery.mobile-x.x.x.min.js
42.How can we check/uncheck an checkbox in jquery?
Using two function, we can perform the operation. // Check #x $(“#checkboxid”).attr(“checked”, “checked”); // Uncheck #x $(“#checkboxid”).removeAttr(“checked”);
43.How can we disable/enable an element in jquery?
you can disable/enable web element using attr and removeAttr functions respectively. // Disable #x $(“#x”).attr(“disabled”,”disabled”); // Enable #x $(“#x”).removeAttr(“disabled”);
44.How do I test whether an element has a particular class?
* You can use the is() method along with an appropriate selector if ( $(‘#myDiv’).is(‘.pretty’) ) $(‘#myDiv’).show(); Note that this method allows you to test for other things as well. For example, you can test whether an element is hidden (by using the custom :hidden selector): if ( $(‘#myDiv’).is(‘:hidden’) ) $(‘#myDiv’).show();
45.How can we apply css in div using jquery?
using css() method we can apply css in div element. example: $(“div”).css(“border”,”1px solid green”);
46.Do I need to refer jQuery file both in Master page/base page/template page and content page ?
Ans: No, master page/base page/ template page basically helps to create consistent layout for the page in the application. In case you have referred the jQuery file in master page/base page/ template page that cause rendering the file in the browser, you do not need to refer jQuery file the content page again. In summary, there should not be more than one < script> tag with jQuery file reference in the source code of the rendered web page in the browser.
47.What is the difference between jQuery-x.x.x.js and jQuery.x.x.x-min.js?
Ans: In terms of functionality, there is no difference between the jQuery-x.x.x.js and jQuery-x.x.x-min.js (also called minified version). However this can play a vital role in the performance of the web page.
48: How it affects the performance ?
Ans: jQuery-1.4.4.js file size is 178 KB as against its minified version jQuery-1.4.4-min.js that is only 76.7 KB in size. So when your page loads in the client?s browser if you are not using minified version, it loads 178 KB file that takes more time to load than 76.7 KB.
49.Why to load jQuery file from CDN ?
Ans: You may ask that if we can load the jQuery file from our own server why to load it from the CDNs. The answer is logical and very simple. The browser behavior is that whenever it loads any webpage, it keeps related files (eg. Javascript file, CSS file and Images) used for that page into its cache (also called history). When next time the user browses any web page, browser loads only those files that are new or modified and is not available in the browser cache or history. In this way, browser improves its performance and loads the page. The possibility is that if more and more websites are using CDNs, the user might have already browsed some other web pages that is using CDNs jQuery file and that file may have into browser cache; so when user browse your page and you are also using CDNs file, the older cached version of jQuery file will be used. In this way your page will load faster as browser will not have to load the jQuery file for your page again. The benefit: Faster page load as jQuery file need not to be downloaded Saves your bandwidth as jQuery file is not loaded from your server Scalable - generally CDNs place these files on the servers located at different geographical locations of the world so that they load faster so irrespective of from where your user is browsing your page, your application runs well.
50.Q: Is it good to load jquery from CDN(Content delivery network) ?
Ans: Yes, it is always good to load your jquery from content delivery network. It provides some benefits like :- Caching - It means that if any previously visited site by user is using jQuery from Google CDN then the cached version will be used. It will not be downloaded again. Reduces load - It reduces the load on your web server as it downloads from Google server's.
51. Do we need to add the JQuery file both at the Master page and Content page as well ?
Ans: No, if the Jquery file has been added to the master page then we can access the content page directly without adding any reference to it. This can be done using this simple example < script type="text/javascript" src="jQuery-1.4.1-min.js">< /script>
52. What is the advantage of using the minified version of JQuery rather than using the conventional one ?
Ans: The advantage of using a minified version of JQuery file is Efficiency of the web page increases. The normal version jQuery-x.x.x.js has a file size of 178KB but the minified version jQuery.x.x.x-min.js has 76.7 KB. The reduction in size makes the page to load more faster than you use a conventional jQuery file with 178KB
53. What is CDN and how jQuery is related to it ? Ans: CDN - It stands for Content Distribution Network or Content Delivery Network. Generally, a group of systems at various places connected to transfer data files between them to increase its bandwidth while accessing data. The typical architecture is designed in such a way that a client access a file copy from its nearest client rather than accessing it from a centralized server. So we can load this jQuery file from that CDN so that the efficiency of all the clients working under that network will be increased.
No comments:
Post a Comment