J Query Interview Questions & Answers

5 avg. rating (100% score) - 1 votes

J Query Interview Questions & Answers

Getting prepared for JQuery job? Do not panic, we will guide you how and what to answer in your interview. If you are preparing for J Query job interview then go through Wisdomjobs interview questions and answers page. J Query is a JavaScript library. It makes the client side scripting of HTML very easy. It can be downloaded from internet as its free with MIT license. It simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Many candidates are in need of this position. There are many openings for this job as this is much popular and used in all websites. Please have a look at J Query interview questions and answers page to win your interview.

J Query Interview Questions

J Query Interview Questions
    1. Question 1. What Is Jquery Selectors? Give Some Examples?

      Answer :

      • jQuery Selectors are used to select one or a group of HTML elements from your web page.
      • jQuery support all the CSS selectors as well as many additional custom selectors.
      • jQuery selectors always start with dollar sign and parentheses: $()

      There are three building blocks to select the elements in a web document.

      1. Select elements by tag name Example: $(div) It will select all the div elements in the document.
      2. Select elements by ID Example: $(#xyzid”) It will select single element that has an ID of xyzid
      3. Select elements by class Example: $(“.xyzclass”) It will select all the elements having class xyzclass

    2. Question 2. How Can We Give Fade Effect In J Query?

      Answer :

      • In jQuery we have three methods to give the fade effect to elements: fadeIn, fadeOut and fadeTo
      • This methods change the opacity of element with animation.

      Syntax:

      $(selector).fadeIn(speed,callback)
      $(selector).fadeOut(speed,callback)
      $(selector).fadeTo(speed,opacity,callback)
      • “speed” can be one of following values : “slow”, “fast”, “normal” or milliseconds
      • “opacity” specify the value that allows the fading to given opacity.
      • “callback” is the function which we want to run once the fading effect is complete.

      For example

      $("clickme").click(function(){
      $("mydiv").fadeTo("slow",0.50); });
      $("clickme").click(function(){
      $("mydiv").fadeOut(3000); });.

    3. Question 3. Explain The Animate Function?

      Answer :

      The animate function is used to apply the custom animation effect to elements.

      Syntax:

      $(selector).animate({params}, [duration], [easing], [callback])

      • “param” defines the CSS properties on which you want to apply the animation.
      • “duration” specify how long the animation will run. It can be one of following values : “slow”, “fast”, “normal” or milliseconds
      • “easing” is the string which specify the function for the transition.
      • “callback” is the function which we want to run once the animation effect is complete.

      For example

      <div id id="clickToAnimate">
      Click Me
      </div>
      <div id ="mydiv" style=”width:200px; height:300px;
       position: relative; right: 20px;">
      </div>

      Following is the jQuery to animate opacity, left offset, and height of the mydiv element

      $('# clickToAnimate’).click(function() {
      $('#book').animate({
      opacity: 0.30,
      left: '+=20',
      height: 'toggle'
      }, 3000, function() {
      // run after the animation complete.
      });
      });

    4. Question 4. 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. • Syntax : .siblings( [selector])
      • “selector” is the selector expression which specify the matched elements.

      For example

       <ul> 

        <li>item 1</li>

        <li id="&rdquo;second_item&rdquo;">item 2</li>

        <li class="&rdquo;myitem&rdquo;">item 3</li>

        <li class="&rdquo;myitem&rdquo;">item 4</li>

      </ul>

      Now we want to find the siblings of the element of id “second_item” and change the text color to Blue :

      $(‘li.second_item’).siblings().css(‘color’,’blue’);

      If we want specific sibling elements for example the elements having class “myitem” then we can pass a optional selector:

      $(‘li.second_item’).siblings(‘.myitem’).css(‘color’,’blue’);

    5. Question 5. Explain Width() Vs Css('width')?

      Answer :

      • In jQuery, there are two ways to change the width of an element.
      • One way is using .css(‘width’) and other way is using .width().
      • For example

        $(‘#mydiv’).css(‘width’,’300px’);
        $(‘#mydiv’).width(100);
      • The difference in .css(‘width’) and .width() is the data type of value we specify or return from the both functions.
      • In .css(‘width’) we have to add “px” in the width value while in .width() we don’t have to add.
      • When you want to get the width of “mydiv” element then .css(‘width’) will return ‘300px’ while .width() will return only integer value 300.

    6. Question 6. What Is The Use Of Jquery.data()?

      Answer :

      • jQuery.data() is used to set/return arbitrary data to/from an element.
      • Syntax: jQuery.data(element, key, value)
      • “element” is the DOM element to which the data is associated.
      • “key” is an arbitrary name of the piece of data.
      • “value” is value of the specified key.
      • Suppose we want to set the data for a span element:

      jQuery.data(span, “item”, { val1: 10, val2: "myitem" });

      If we want to retrieve the data related to div element and set it to label’s data:

      $("label:val1").text(jQuery.data(div, "item").val1);
      $("label:val2").text(jQuery.data(div, "item").val2);

    7. Question 7. 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.

      For example

      $(document).ready(function(){
      $("#myTable").find("tr").live("click",function(){
      alert($(this).text());
      });
      });

      Above code will not work using live() method. But using delegate() method we can accomplish this.

      $(document).ready(function(){ $("#dvContainer")children("table")
      .delegate("tr","click",function(){
      alert($(this).text());
      });
      });

       

    8. Question 8. Explain The Each() Function?

      Answer :

      The each() function specify the function to be called for every matched element.

      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;”

      For example

      $("#clickme").click(function(){
      $("li").each(function(){
      document.write($(this).text())
      });
      });

      This will write the text for each “li” element.

    9. Question 9. Explain Slidetoggle() Effect?

      Answer :

      slideToggle() effect is used to give animated sliding effect to an element. 

      Syntax:

      slideToggle([ duration] [, easing] [, callback])

      • “duration” is the number specifying how long the animation will run.
      • “easing” is the string which specify the function for the transition.
      • “callback” is the function which we want to run once the animation is complete.
      • If the element is visible then this effect will slide the element up side and make it completely hidden. If the element is hidden then slideToggle() effect will slide it down side and make it visible.
      • We can specify the toggle speed with this effect.

      For example

      $("#clickme").click(function(){
      $("#mydiv").slideToggle(“slow”, function(){
      //run after the animation is complete.
      });
      });

    10. Question 10. What Is Difference Between $(this) And 'this' In Jquery?

      Answer :

      Refer the following example

      $(document).ready(function(){
      $(‘#clickme’).click(function(){
      alert($(this).text());
      alert(this.innerText);
      });
      });
      • this and $(this) references the same element but the difference is that “this” is used in traditional way but when “this” is used with $() then it becomes a jQuery object on which we can use the functions of jQuery.
      • In the example given, when only “this” keyword is used then we can use the jQuery text() function to get the text of the element, because it is not jQuery object. Once the “this” keyword is wrapped in $() then we can use the jQuery function text() to get the text of the element.

    11. Question 11. 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="Arpit";
      empObject.age="24";
      empObject.dept=”IT”;
      $("#clickme").click(function(){
      $("span").text($.param(empObject));
      });

      It will set the text of span to “name=Arpit&age=24&dep=IT”

    12. Question 12. What Is Jquery.holdready() Function?

      Answer :

      • By using jQuery.holdReady() function we can hold or release the execution of jQuery’s ready event.
      • This method should be call before we run ready event.
      • To delay the ready event, we have to call jQuery.holdReady(true);
      • When we want to release the ready event then we have to call jQuery.holdReady(false);
      • This function is helpful when we want to load any jQuery plugins before the execution of ready event.

      For example

      $.holdReady(true);
      $.getScript("xyzplugin.js", function() {
      $.holdReady(false);
      });

       

    13. Question 13. 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() method is same as .remove() method except that the .detach() method doesn’t remove jQuery data associated with the matched elements.
      • .remove() is faster than .empty() or .detach() method.

      Syntax:

      $(selector).empty();
      $(selector).remove();
      $(selector).detach();

    14. Question 14. How To Read, Write And Delete Cookies In Jquery?

      Answer :

      • To deal with cookies in jQuery we have to use the Dough cookie plugin.
      • Dough is easy to use and having powerful features.
      • Create cookie
      $.dough("cookie_name", "cookie_value");
      Read Cookie
      $.dough("cookie_name");
      Delete cookie
      $.dough("cookie_name", "remove");

    15. Question 15. Is Window.onload Is Different From Document.ready()?

      Answer :

      • The window.onload() is Java script function and document.ready() is jQuery event which are called when page is loaded.
      • The difference is that document.ready() is called after the DOM is loaded without waiting for all the contents to get loaded. While window.onload() function waits until the contents of page is loaded.
      • Suppose there is very large image on a page, at that time window.onload() will wait until that image is loaded totally.
      • So while using the window.onlaod() function the execution will be slow, but the document.ready() will not wait until the image is loaded.

    16. Question 16. What Is Chaining In Jquery?

      Answer :

      • Chaining is very powerful feature of jQuery.
      • Chaining means specifying multiple function and/or selectors to an element.
      • Examine the below example
      $(document).ready(function(){
      $('#mydiv').css('color', 'blue');
      $('#mydiv').addClass('myclass');
      $('#mydiv').fadeIn('fast');
      }

      By using chaining we can write above code as follows

      $(document).ready(function(){
      $('#mydiv').css('color','blue').addClass('myclass').fadeIn('fast'); });
      • Advantage of chaining is that it makes your code simple and simple to manage.
      • The execution becomes faster because the code search for the element only once.

       

    17. Question 17. 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.

      For example

      $(document).ready(function(){
      var mylist = [ “Apple”,”Orange”,”Banana”];
      mylist = mylist.sort();
      $(“#mydiv”).html(list.join(“”));
      });

      It will give following output

      Apple
      Banana
      Orange

      Now we declare a numerical array and use sort() method to sort its elements.

      $(document).ready(function(){
      var mylist = [ “20”,”3””100”,”50”];
      mylist = mylist.sort();
      $(“#mydiv”).html(list.join(“”));
      });

      It will give following output

      100
      20
      3
      50

    18. Question 18. What Is Difference Between Prop And Attr?

      Answer :

      • In jQuery both prop() and attr() function is used to set/get the value of specified property of an element.
      • The difference in both the functions is that attr() returns the default value of the property while the prop() returns the current value of the property.

      For example

      <input value="My Value" type="text" />

      $('input').prop('value', 'Changed Value');

      • .attr('value') will return 'My Value'
      • .prop('value') will return 'Changed Value'

    19. Question 19. How To Always Reference Latest Version Of Jquery?

      Answer :

      When you reference the jQuery on your web page, you have to specify the version number also.

      <script type=”text/javascript”
      src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”>
      </script>

      Above code will always load the 1.5.1 version of jQuery. If you reference the latest jQuery then you don’t need to change the code every time the new version of jQuery is released.

      To achieve this you have to use following code

      <script type=”text/javascript”
      src=”http://code.jquery.com/jquery-latest.min.js”>
      </script>

      This code will always reference the latest version of jQuery in your page.

    20. Question 20. What Is Resize() Function In Jquery?

      Answer :

      The resize() function is called whenever the browser size is changed. This event can be only used with $(window).

      Syntax: .resize([event_data], handler(event_object))

      • The “event_data” is the data to be sent to the handler.
      • The “handler(event_object)” is a function to be called each time when the window is resized.

      For example

      $(window).resize(function() {
      $('#message).text('window is resized to'+$(window).width()+
      ‘x’ + $(window).height());
      });

    21. Question 21. What Is Jquery?

      Answer :

      • jQuery is a JavaScript library that simplifies JavaScript and AJAX programming. JavaScript is used to add interactivity and dynamic content to web pages. AJAX (Asynchronous JavaScript and XML) is used for handling external data asynchronously through JavaScript, without refreshing the whole page.
      • jQuery emphasizes the interaction between JavaScript and HTML. jQuery contains all the common DOM, event, effects, and Ajax functions in a single JavaScript file.
      • The jQuery file needs to be included in the file which is going to use the jQuery functionality.
      • jQuery provides a new class called jQuery without extending the built-in JavScript classes which acts as a wrapper around objects for providing them the extended operations.

    22. Question 22. Advantages Of Jquery?

      Answer :

      The advantages of using jQuery are:

      • JavaScript enhancement without the overhead of learning new syntax
      • Ability to keep the code simple, clear, readable and reusable
      • Eradication of the requirement of writing repetitious and complex loops and DOM scripting library calls

    23. Question 23. Explain The Features Of Jquery?

      Answer :

      Features of jQuery are :

      • Effects and animations
      • Ajax • Extensibility
      • DOM element selections functions
      • Events • CSS manipulation
      • Utilities - such as browser version and the each function.
      • JavaScript Plugins • DOM traversal and modification.

    24. Question 24. Explain The Concepts Of "$ Function" In Jquery With An Example?

      Answer :

      The type of a function is "function".

      There are a lot of anonymous functions in jquery.

      $(document).ready(function() {});
      $("a").click(function() {});
      $.ajax({
      url: "someurl.php",
      success: function() {}
      });

    25. Question 25. Why Is Jquery Better Than Javascript?

      Answer :

      • jQuery is great library for developing ajax based application.
      • It helps the programmers to keep code simple and concise and reusable.
      • jQuery library simplifies the process of traversal of HTML DOM tree.
      • jQuery can also handle events, perform animation, and add the ajax support in web applications.

    26. Question 26. Explain How Jquery Works?

      Answer :

      <html>

      <head>
      <script type="text/javascript" src="jquery.js"></script>
           <script type="text/javascript">
               // You can write the code here 
           </script>
      </head>
      <body>
               <a href="http://careerride.com/">CareerRide</a>
      </body>
      </html>

    27. Question 27. When Can You Use Jquery?

      Answer :

      jQuery can be used to developing ajax based applications It can be used to keep the code simple, concise and reusable.

      It simplifies the process of traversal of HTML DOM tree.

      It can also handle events, perform animation, and add the ajax support in web applications.

    28. Question 28. How Can Jquery Library Be Added To Pages? Write A Basic Jquery Code?

      Answer :

      The jquery library is a collection of all the jquery methods. It is stored in the form of a single java script file. The format of adding a jquery file to an html page is:

      <head>
      <script type=”text/javascript” src”jquery.js”></script>
      </head>

      An example of a javascript that will hide all the <p> elements in the page.

      <html>
      <head>
      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript">
      $(document).ready(function(){
      $("button").click(function(){
      $("p").hide();
      });
      });
      </script>
      </head>

      <body>
      <h2>This is a heading</h2>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
      <button>Click me</button>
      </body>
      </html>

    29. Question 29. What Are The Types Of Selectors That Are Used In Jquery? Give Examples?

      Answer :

      Jquery enables the user to select specifically the element that is to be effected. jquery allows the user to select in the following ways:

      jquery element selectors: with the use of css selectors the users can select the elements of an html document.

      For example:

      $("p") will select all the <p> elements.
      $("p.intro") will select all <p> elements with class="intro" defined in them.
      $("p#demo") this will select all <p> elements with id="demo".

      jquery attribute selectors: the xpath expressions are used by jquery to select elements of an html document with defined attributes.

      For example:

      $("[href]") is used to select all elements which have an href attribute.
      $("[href$='.jpg']") can select all elements with an href attribute which will end with ".jpg".

    30. Question 30. How Can Images Be Made To Appear Scrolling One Over Another?

      Answer :

      Jquery provides the user with the ability to change the attributes of a property dynamically. The jquery slide method can be used to change the height of elements gradually. This can be used to give the scroll effect of an image over image.

      The jquery comprises of the following slide methods:

      • $(selector).slideDown(speed,callback)
      • $(selector).slideUp(speed,callback)
      • $(selector).slideToggle(speed,callback)

      The speed parameter is used to effect the speed of change of the jquery. The parameters for it can be slow, fast , normal and time in milliseconds. The parameter of callback is used to refer to the name of the function to be executed once the completion of function occurs.

    31. Question 31. What Are The Various Ajax Functions ?

      Answer :

      Ajax allows the user to exchange data with a server and update parts of a page without reloading the entire page. Some of the functions of ajax are as follows:

      • $.ajax(): This is considered to be the most low level and basic of functions. It is used to send requests . This function can be performed without a selector.
      • $.ajaxSetup(): This function is used to define and set the options for various ajax calls.

      For example:

      $.ajaxSetup({
      "type":"POST",
      "url":"ajax.php",
      "success":function(data){
      $("#bar")
      .css("background","yellow")
      .html(data);
      }
      });
      • Shorthand ajax methods: They comprise of simply the wrapper function that call $.ajax() with certain parameters already set.
      • $.getJSON(): this is a special type of shorthand function which is used to accept the url to which the requests are sent. Also optional data and optional callback functions are possible in such functions.

    32. Question 32. What Are The Guidelines For An Application To Follow The Principles Of Progressive Enhancement?

      Answer :

      Progressive enhancement is web development technique that would allow the application to be accessible to any computer with any Internet connection. For an application to work on the principles of progressive enhancement the following rules / guidelines must be met:

      • The basic content must be available to all browsers with any type of Internet connections.
      • The basic functionalities of an application must be working in all browsers.
      • The application will not override any of the user specified browser settings.
      • The css files are linked externally to control the look and feel of the page.
      • The javascripts should also be externally linked as it can enhance the user experience.

    33. Question 33. How Can Events Be Prevented From Stopping To Work After An Ajax Request?

      Answer :

      There are two ways to handle this issue:

      Use of event delegation: The event delegation technique works on principle by exploiting the event bubbling. It uses event bubbling to capture the events on elements which are present anywhere in the domain object model. In jquery the user can make use of the live and die methods for the events delegation which contains a subset of event types.

      For example: handling event delegation, handling of clicks on any element:

      $('#mydiv').click(function(e){ if( $(e.target).is('a') ) 
      fn.call(e.target,e); }); $('#mydiv').load('my.html')

      Event rebinding usage: When this method is used it requires the user to call the bind method and the added new elements.

      For example:

      $('a').click(fn); $('#mydiv').load('my.html'  ,function(){ 
      $('#mydiv a').click(fn); });

    34. Question 34. How Can An Element Be Checked If It Contains A Specific Class?

      Answer :

      The hasClass method defined can be used to check if an element actually contains the specified class.

      For example: usage of the hasClass:

      $("div").click(function(){
      if ( $(this).hasClass("protected") )
      $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
      });

      The is() method can also be used with a selector for a more advanced level of matching.

      For example:

      if ( $('#myDiv').is('.pretty.awesome') )
      $('#myDiv').show();

      This method can be used to test various other things, such as it could be used to detect if the specified element is hidden or not.

    35. Question 35. Why Is The Block Display Style Used For Animations?

      Answer :

      In html only the block level elements can have custom heights and widths. So when a user defines an animation method for usage such as show, hide, slide up etc the display css property of the block being animated is set to display block style. On completion of the animation the display style of the block would be changed to its original value. This procedure does not work properly for inline elements and the following workarounds can be applied to it:

      • If the user wants the element to remain inline and only want to animate it in and out he can use the fadein and fadeout animation instead of using the show method.
      • The user can also use a block level element with float to make the element appear inline with the rest of the content around it.

    36. Question 36. What Are The Approaches Of Extracting A Query String With Regular Expressions?

      Answer :

      There are two approaches of doing so:

      String based approach: This is the simple way of extracting the information of a query string using the string-based replacement technique. This method makes use of the .replace() method to function.

      For example: var data = string.replace("http://localhost/view.php?", "");

      The above code works fine for the string based approach but has some flexibility issues. It cannot deal effectively with domain name and file name changes.

      Regular expression approach: They are a powerful pattern matching tool available in modern programming languages.

      For the extraction of a query string a pattern would have to be used which looks for a question mark in the string. Once it does it returns everything after it. The regular expression in JS are delimited using the forward slashes at the end of an expression.

    37. Question 37. How Does Jquery Store Data Related To An Element?

      Answer :

      In plain java scripts the information about an element can be stored by adding a domain object model property to the element. This results in memory leak problems in certain browsers. In jquery the user does not has to worry about memory management issues.

      For example: storing and retrieving data related to an element:

      $('#myDiv').data('keyName', { foo : 'bar' });
      $('#myDiv').data('keyName'); // { foo : 'bar' }

      Jquery allows the user to store any kind of information on an element. The $.fn.data is used the most to store data related to an element.

      For ex. storing of relationship between elements with the use of $.fn.data :

      $('#myList li').each(function() {
      var $li = $(this), $div = $li.find('div.content');
      $li.data('contentDiv', $div);
      });
      // later, the user is not required to look for the div again;
      // the data can simply be read from the list items data;
      var $firstLi = $('#myList li:first');
      $firstLi.data('contentDiv').html('new content');

    38. Question 38. Explain The Common Methods Of Sending A Request To A Server?

      Answer :

      The two most common methods of sending a request to a server are :

      1. GET
      2. POST

      GET method: The get method is mostly used for non destructive operations. These operations get data from the server and does not change the data on it. A good example of the application of the search query to a server. In most of the cases GET will send all of the data to be sent in the form of a query string.

      POST method: The POST method is primarily used for destructive operations. These operations can change the data on a server. A good example is a user saving an entry on a site will get the POST request. These requests are not cached by the browser. A query can be a part of a url but any data that is to be sent is done separately as post data.

    39. Question 39. Create A Plugin That Would Add And Remove A Class On Hover?

      Answer :

      The plugin can be considered to be simply a new method that can be used by a user to extend the prototype object of a jquery. A plugin performs some actions on a collection of elements. Each method that comes with the jquery core can be considered to be a plugin.

      The code for creating a plugin that would add and remove a class on hover would be as follows:

      (function($){
      $.fn.hoverClass = function(c) {
      return this.hover(
      function() { $(this).toggleClass(c); }
      );
      };
      })(jQuery);
      // using the plugin
      $('li').hoverClass('hover');

    40. Question 40. Explain The Use Of The .pushstack() Method?

      Answer :

      The pushStack() method works by accepting an array of DOM elements and pushes them into a stack. This is done so that call to methods like .end() and .andSelf are able to behave correctly. The jquery internally uses this method to keep track of all the previous collections of jquery while using a chain traversing method. Good examples of such methods could be .parents() and .filter().

      For example:

      // select some divs
      $('div.container')
      // find some spans inside those divs and add a class to them
      .find('span').addClass('baby')
      // pop those spans off the "stack",
      // returning to the previous collection (div.container)
      .end()
      // add a class to the parent of each div.container
      .parent().addClass('daddy');

    41. Question 41. How Is The Deferred Method In Jquery Important In Relation To Animate Method?

      Answer :

      The .animate() method is used to create animations with other shorthands using it. The queue() method can be used to link together multiple animation methods to create an unique effect. These methods are effective when all the data is available locally and all the methods are executed on as single system only. In case the user wants to use the animation methods on a data that resides on the server and wants to handle at a single go the user can make used of the .deferred method.

      For example:

      var my$ = $.sub();
      my$.fn.animate=function(props,speed,easing,callback){
      var options=speed && typeof speed==="object"?
      jQuery.extend({}, speed) : {
      complete: callback || !callback && easing ||
      jQuery.isFunction( speed ) && speed,
      duration: speed,
      easing: callback && easing || easing &&
      !jQuery.isFunction(easing) && easing
      };
      var dfd = my$.Deferred(),
      complete = options.complete,
      count = this.length;
      options.complete = function() {
      complete && complete.call( this );
      if ( !--count ) {
      dfd.resolve();
      }
      };

    42. Question 42. Explain Some Of The Key Concepts Of Good Code Organization Patterns?

      Answer :

      Some of the key concepts that should be followed while

      • The codes should always be divided into specific units of functionality. They can be divided into modules , services etc. This concept is also known as encapsulation.
      • Use inheritance techniques to avoid rewriting a code again and again.
      • The jquery is dom centric in nature but not all applications are such in nature. All funtionalities should not have a dom representation.
      • All the units of functionality should be existing in a loosely coupled state. This implies that a module can exist independently. Also the communication between the units should be possible and should be handled using a messaging system for example custom events.

    43. Question 43. How Can Related Code Be Encapsulated? Give Example?

      Answer :

      The object literal is one of the simplest ways that the user can encapsulate related code together. It helps by removing any anonymous functions from the users code. It can also be used to centralize configuration options.

      For example:

      An object literal being implemented var myFeature={
      myProperty : 'hello',
      myMethod : function() {
      console.log(myFeature.myProperty);
      },
      init : function(settings) {
      m2yFeature.settings = settings;
      },
      readSettings : function() {
      console.log(myFeature.settings);
      }
      };
      myFeature.myProperty; // 'hello'
      myFeature.myMethod(); // logs 'hello'
      myFeature.init({ foo : 'bar' });
      myFeature.readSettings(); // logs { foo :'bar' }

    44. Question 44. Write A Code For The Implementation Of A Module Pattern?

      Answer :

      The object literal does not provide any privacy for the methods or properties. The module pattern allows the user to offer privacy to functions and variables. It can be used to set to expose limited API.

      For example: The module pattern code:

      
      var feature =(function() {
      var privateThing = 'secret',
      publicThing = 'not secret',
      changePrivateThing = function() {
      privateThing = 'super secret';
      },
      sayPrivateThing = function() {
      console.log(privateThing);
      changePrivateThing();
      };
      return {
      publicThing : publicThing,
      sayPrivateThing : sayPrivateThing
      }
      })();
      feature.publicThing; // 'not secret'
      feature.sayPrivateThing();

    45. Question 45. Write The Code To Define A Requirejs Module With Its Dependencies?

      Answer :

      The RequireJS is a dependency management tool that can be used by the user to manage script modules. It can be used to load scripts once a page has been loaded. This helps in evenly distributing the downloads.

      For example: RequireJS module with dependencies defined:

      require.def("my/shirt",
      ["my/cart", "my/inventory"],
      function(cart, inventory) {
      //return an object to define the "my/shirt" module.
      return {
      color: "blue",
      size: "large"
      addToCart: function() {
      inventory.decrement(this);
      cart.add(this);
      }
      }
      }
      );

      In the above example the my.shirt module is created. This module depends on the my/cart and my/inventory.

    46. Question 46. Explain The Use Of The $.fn.bind And $.fn.trigger?

      Answer :

      Both the $.fn.bind and $.fn.triggers are two important jquery methods. They are primarily used with custom events.

      • $.fn.bind: This method accepts an event type and an event handling function as an argument for itself. This method can also accept event-related data as a second argument.
      • $.fn.trigger: This method can accept an event type as an argument. It can also take an array of values.

      Example: depicting the usage of $.fn.bind and $.fn.triggers using custom data in both the cases:

      $(document).bind('myCustomEvent',{foo:'bar'},
      function(e, arg1, arg2) {
      console.log(e.data.foo); // 'bar'
      console.log(arg1); // 'bim'
      console.log(arg2); // 'baz'
      });
      $(document).trigger('myCustomEvent',['bim','baz']);

    47. Question 47. What Is The Struts2 Jquery Plugin And Its Advantages?

      Answer :

      The struts2 jquery plugin is used to:

      • It provides the user with an easy integration of ajax and widgets.
      • It reduces the number of code to be written by a coder.

      For example: 

      <div id="result">Result Div</div>
      <s:url id="ajax" value="/ajax1.action"/>
      <sj:a id="ajaxlink" href="%{ajax}" indicator="indicator" targets="result" effect="highlight">
      Run AJAX Action
      </sj:a>
      <img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>

      The advantages of using it are:

      • It reduces the number of code to be written dramatically.
      • It also supports ajax form validation.
      • The code becomes much easier to read and hence prevents errors from occurring and is easy to debug.

       

    48. Question 48. When J Query Founded And By Whom?

      Answer :

      It was released in January 2006 at BarCamp NYC by John Resig(Jquery founder).

    49. Question 49. What Scripting Language Is Jquery Written In?

      Answer :

      JavaScript

    50. Question 50. Write A Basic Code For Add Jquery Library To Pages?

      Answer :

      <html>
      <head>
      <script type="text/javascript" src="jquery.js"> </script>
      <script type="text/javascript">
      // You can write the code here
      </script>
      </head>
      <body>
      <a href="http://www.tutoriz.com/"> Jquery Interview Questions and Answers</a>
      </body>
      </html>

    51. Question 51. What $("div.tutoriz") Will Select?

      Answer :

      All the div element with tutoriz class.

    52. Question 52. Jquery Uses Css Selectors And Xpath Expressions To Select Elements True Or False?

      Answer :

      True

    53. Question 53. What Are The Fastest Selectors In Jquery?

      Answer :

      ID and element selectors are the fastest selectors

    54. Question 54. What Are The Slower Selectors In J Query?

      Answer :

      Class selectors are slower

    55. Question 55. Which One Is Faster Jquery Id Selector Or Javascript Getelementbyid()?(jquery Id Selector Vs Javascript Getelementbyid())

      Answer :

      JavaScript getElementById() is faster than Jquery Id ($("#elementID")) selector

    56. Question 56. Where Jquery Code Execute? On Client Browser Or Server Browser?

      Answer :

      On client browser

    57. Question 57. Write The Code For Select Second Last Div Element?

      Answer :

      Code for second last div : $("div.questions > div::nth-last-child(2)").css("color", "red");

    58. Question 58. What Are The Advantages Of Using Jquery Over Javascript In Asp.net Web Application

      Answer :

      Below are the advantages of using j Qery over JavaScript

      1. Jquery is well written optimised javascript code so it will be faster in execution unless we write same standard optimised javascript code.
      2. Jquery is concise java script code ,means minimal ammount 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.

       

    59. Question 59. Is Jquery A Library For Client Scripting Or Server Scripting?

      Answer :

      Client Script

    60. Question 60. What Are Features Of Jquery?

      Answer :

      Features of Jquery

      1. One can easily provide effects and can do animations.
      2. Applying / Changing CSS.
      3. Cool plugins.
      4. Ajax support
      5. DOM selection events
      6. Event Handling

    61. Question 61. How To Check Jquery Ui Loaded Or Not?

      Answer :

      // Checking if jQuery UI is loaded or not

      Code:

      if($.ui){
      // jQuery UI is loaded
      }else {
      // jQuery UI is not loaded
      }

    62. Question 62. How Check Currently Loaded Jquery Ui Version On The Page?

      Answer :

      // Returns jQuery UI version or undefined $.ui.version

    63. Question 63. Write The Code For Setting Datetimepicker On Textbox Click?

      Answer :

      If below is our textbox

      <input type="text" id="abc" name=%26quot%3Bacc%26quot%3B value="Select Date" />

      then Jquery code will be

      $("#abc").datepicker();

    64. Question 64. Name The Jquery Method Which Is Used To Hide Selected Elements?

      Answer :

      .hide()

    65. Question 65. Name The Jquery Methods Which Are Used For Apply Css Class?

      Answer :

      $("#Id1").addClass('YourClassName'); // for apply class
      $("#Id1").removeClass('YourClassName'); // for remove class

    66. Question 66. What Is The Use Of Attr() Method In Jquery?

      Answer :

      The attr() method sets or returns attributes and values of the selected elements.

      When this method is used to return the attribute value, it returns the value of the first matched element.

      When this method is used to set attribute values, it sets one or more attribute/value pairs for the set of matched elements.

      Code:

      $(selector).attr(attribute) //it will return the value of an attribute
      $(selector).attr(attribute,value) //it will set the value of an attribute
      $(selector).attr({attribute:value, attribute:value,...}) //for set multiple attribute

    67. Question 67. Can We Use Both Jquery And Ajax Together?

      Answer :

      yes

    68. Question 68. Tell The Name Of Jquery Method Which Is Used To Perform An Asynchronous Http Request?

      Answer :

      jQuery.ajax()

    69. Question 69. What Is The Use Of Jquery Load() Method?

      Answer :

      The jQuery load() method is a powerful AJAX method.

      The load() method loads data from a server and puts the returned data into the selected element without reload the complete page.

      Example:The following example loads the content of the file "demo_test.txt" into a specific element

      $("#div1").load("demo_test.txt");

    70. Question 70. Can We Use Our Own Specific Character In The Place Of $ Sign In Jquery?

      Answer :

      Yes, You can also create your own shortcut very easily. The noConflict() method returns a reference to jQuery, that you can save in a variable, for later use.

      Here is an example:

      Code:

      var vikas = $.noConflict();
      vikas(document).ready(function(){
      vikas("button").click(function(){
      vikas("p").text("jQuery is still working!");
      });
      });

    71. Question 71. Name The 5 Jquery Events?

      Answer :

      jQuery Events
      jQuery click() event.
      jQuery dblclick() event.
      jQuery mouseenter() event.
      jQuery mouseleave() event.
      jQuery mousedown() event.
      jQuery mouseup() event.
      jQuery hover() event.
      jQuery focus() and blur() events.

    72. Question 72. Jquery Is Replacement Of Java Script?

      Answer :

      NO

    73. Question 73. What Is Difference Between Remove And Detach Method ?

      Answer :

      detach method is same as remove method , but detach keeps the jQuery data associated with the removed elements.

      detach method is more powerful when you have to reinsert the removed data.

    74. Question 74. What Is The Use Of J Query Load() Method ?

      Answer :

      The jQuery load() method is powerful AJAX method.

      The load() method loads data from a server and puts the returned data into the selected element without reload the complete page.

    75. Question 75. What Does Size Method Of Jquery Returns ?

      Answer :

      It returns the number of elements in the object. This method helps in finding the count of elements in the object.

    76. Question 76. How To Debug Jquery ?

      Answer :

      Add the keyword debugger to the line from where we want to start the debugging.

      $(functio()
      {
      debugger;
      $(document).attr('title','20fingers2Brains');
      });

    77. Question 77. What Is Difference Between Document.ready() And Onload() ?

      Answer :

      document.ready() function can be inlcuded multiple times whereas onload() method can be called only once in a page.

      document.ready() is called as soon as DOM is loaded while onload is called when everything is loaded on page i.e. images, DOM and other resources associated with the page.

    78. Question 78. What Is Jquery Ui ?

      Answer :

      jQuery UI is a library which is built on top of jQuery library. jQuery UI comes with cool widgets, effects and interaction mechanism.

    79. Question 79. Can We Use Our Own Specific Character In The Place Of $ Sign In J Query?

      Answer :

      You can create your own shortcut very easily. The noConflict() method returns a reference to jQuery, that you can save in a variable, for later use.

    80. Question 80. What Is The Difference Between .js And .min.js ?

      Answer :

      min.js is basically the minified version of .js file. Both the files are same as far as functionality is concerned.

      .min.js is used to increase the page performance as it is small in size compare to .js and takes less time to load.

    81. Question 81. What Is The Advantage Of Using Minified Version Of Jquery Rather Than Using The Conventional One ??

      Answer :

      The advantage of using a minified version of jQuery file is efficiency. The efficiency of page increases as minified version is small in size and takes less time to load.

    82. Question 82. How To Set Page Title Using Jquery ?

      Answer :

      $(functio()
      {
      $(document).attr('title','20fingers2Brains');
      });

    83. Question 83. Is It Possible To Use Jquery Together With Ajax?

      Answer :

      Yes.

    84. Question 84. What Is The Name Of Jquery Method For An Asynchronous Http Request ?

      Answer :

      jQuery.ajax()

    85. Question 85. What Are The Features Of Jquery In Short ?

      Answer :

      Effects and Animations, Ajax, Extensibility.

    86. Question 86. Name The Method Use To Hide Selected Elements On Ui ?

      Answer :

      hide().

    87. Question 87. What Are The Slow Selectors In Jquery ?

      Answer :

      class selectors are the slow compare to ID and element.

    88. Question 88. How Can You Select All Elements In Page Using Jquery ?

      Answer :

      We can use all selector to select all elements on page.

      example : $('*')

    89. Question 89. How To Select Element Having A Particular Class (".selected") ?

      Answer :

      $('.selected')

    90. Question 90. What Are Jquery Selectors ?

      Answer :

      Selectors are used in jQuery to find and select DOM elements via id, class or element selector. There are many new selectors introduced in jQuery. Using jQuery selectors DOM elements can be selected and manipulated.

    91. Question 91. What Does $("div") Will Select ?

      Answer :

      This will select all the div elements on page.

    92. Question 92. Is Jquery A W3c Standard ?

      Answer :

      No.

    93. Question 93. Which Sign Does Jquery Use As A Shortcut For Jquery ?

      Answer :

      $

      example: $("#div").css('color','red');

    94. Question 94. When And Who Founded Jquery ?

      Answer :

      jQuery was founded by John Resig in January 2006.

    95. Question 95. What Is Difference Between Jquery's Ready And Holdready?

      Answer :

      jQuery's ready is an event which gets triggered automatically when DOM is ready while holdReady is a signal/flag to hold this triggering. holdReady was included in 1.6 version and it works only if used before the execution/triggering of ready event. Once ready event is fired, it has nothing to do. It is useful in dynamically loading scripts before the ready starts. It release ready event execution when used with a true parameter.

    96. Question 96. What Is Jquery $.ajax() Method?

      Answer :

      The Jquery ajax() method is used to perform an AJAX (asynchronous HTTP) request.

    97. Question 97. Name Any Four Parameter Of Jquery Ajax Method?

      Answer :

      url : Specifies the URL to send the request to. Default is the current page

      type : Specifies the type of request. (GET or POST)

      data : Specifies data to be sent to the server

      cache: A Boolean value indicating whether the browser should cache the requested pages. Default is true

      beforeSend(xhr): A function to run before the request is sent

    98. Question 98. How To Select Combobox Selected Value And Text Using Jquery?

      Answer :

      var StateID = $("#StateCbx").val(); // Or you can use it $("#iStateID").val();

      var StateName = $("#StateCbx option:selected").text();

      alert("Selected combobox text is= " + StateName + " and value is= " + StateID);

    99. Question 99. Jquery Html() Method Works For Both Html And Xml Documents?

      Answer :

      It only works for HTML

    100. Question 100. Can You Call C# Codebehind Method Using Jquery?

      Answer :

      Yes

    101. Question 101. How Can You Call A Method Inside Code-behind Using Jquery?

      Answer :

      By $.ajax and by declaring method a WebMethod

    102. Question 102. What Is The Use Of .size() Method In Jquery?

      Answer :

      Jquery's .size() method returns number of element in the object. That means that you can count the number of elements within an object.

    103. Question 103. What Is The Difference Between Jquery.size() And Jquery.length?

      Answer :

      Jquery.size() and jquery.length both returns the number of element found in the object. But, jquery.length is faster than jquery.size() because size() is a method but length is a property.

    104. Question 104. How You Can Debug Jquery Code/what Are The Technique To Debug Jquery?

      Answer :

      Add the keyword "debugger;" to the line from where we want to start the debugging and then run the Visual Studio in Debug mode by pressing F5 or using the Debug button.

    105. Question 105. Do We Need To Add The Jquery File Both At The Master Page And Content Page As Well?

      Answer :

      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>

    106. Question 106. Difference Between Onload() And Document.ready() Function Used In Jquery?

      Answer :

      We can add more than one document.ready() function in a page.

      we can have only one onload function.

      Document.ready() function is called as soon as DOM is loaded.

      body.onload() function is called when everything (DOM, images)gets loaded on the page.

    107. Question 107. What Does $("div.parent") Will Select?

      Answer :

      All the div element with parent class.

    108. Question 108. What Is The Name Of Jquery Method Used For An Asynchronous Http Request?

      Answer :

      jQuery.ajax()

    109. Question 109. What Is Cdn And What Are The Advantage Of Loading Jquery Framework From Cdn?

      Answer :

      Always load your jQuery framework from Google, Microsoft or jQuery CDN(Content Delivery Network). As it provides several advantages.

      1. You always use the latest jQuery framework.
      2. It reduces the load from your server.
      3. It saves bandwidth. jQuery framework will load faster from these CDN.
      4. The most important benefit is it will be cached, if the user has visited any site which is using jQuery framework from any of these CDN.

       

    110. Question 110. Is Jquery Replacement Of Java Script?

      Answer :

      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.

    111. Question 111. What Is The Basic Need To Start With Jquery?

      Answer :

      To start with jQuery, one need to make reference of it's library. The latest version of jQuery can be downloaded from jQuery.com.

    112. Question 112. What Does Dollar Sign ($) Means In Jquery?

      Answer :

      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(){ });

    113. Question 113. Is There Any Difference Between Body Onload() Function Document.ready() Function Used In Jquery?

      Answer :

      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.

    114. Question 114. Can We Have Multiple Document.ready() Function On The Same Page?

      Answer :

      YES. We can have any number of document.ready() function on the same page.

    115. Question 115. What Are The Different Type Of Selectors In Jquery?

      Answer :

      There are 3 types of selectors in Jquery

      1. CSS Selector
      2. XPath Selector
      3. Custom Selector

    116. Question 116. Name Some Of The Methods Of Jquery Used To Provide Effects?

      Answer :

      Some of the common methods are :

      1. Show()
      2. Hide()
      3. Toggle()
      4. FadeIn()
      5. FadeOut()

    117. Question 117. What Are Events In Jquery?

      Answer :

      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".

    118. Question 118. What Are Mouse Events?

      Answer :

      1. click
      2. dblclick
      3. mouseenter
      4. mouseleave

    119. Question 119. What Are Keyboard Events?

      Answer :

      1. keypress
      2. keydown
      3. keyup

    120. Question 120. What Are Form Events?

      Answer :

      1. submit
      2. change
      3. focus
      4. blur

    121. Question 121. What Are Document/window Events?

      Answer :

      1. load
      2. resize
      3. scroll
      4. unload

    122. Question 122. What Is Jquery Syntax For Event Methods And Give An Example?

      Answer :

      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!! });

    123. Question 123. Explain Click() Method In Jquery?

      Answer :

      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(); });

    124. Question 124. Explain Dbclick() Method In Jquery?

      Answer :

      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:

    125. Question 125. Explain Mouseenter() Method In Jquery?

      Answer :

      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!"); });

    126. Question 126. Explain Mousedown() Method In Jquery?

      Answer :

      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!"); });

    127. Question 127. Explain Mouseup() Method In Jquery?

      Answer :

      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!"); });

    128. Question 128. Explain Hover() Method In Jquery?

      Answer :

      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!"); });

    129. Question 129. Explain Focus() Method In Jquery?

      Answer :

      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"); });

    130. Question 130. Explain Blur() Method In Jquery?

      Answer :

      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"); });

    131. Question 131. What Is Difference Between Jquery And Microsoft Ajax?

      Answer :

      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.

    132. Question 132. What Is Jquery Connect ? How To Use Jquery Connect?

      Answer :

      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.

    133. Question 133. In What Scenarios Jquery Can Be Used?

      Answer :

      1. To apply CSS static or dynamic
      2. To call functions on events
      3. Crisscross the documents
      4. Manipulation purpose
      5. To add animation effects In all the cases we are using JavaScript can be replaced with jQuery in the projects. This can reduce maintenance.

    134. Question 134. What Is The Difference Between Jquery Find And Children Methods?

      Answer :

      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.

    135. Question 135. How To Use Length Function In Jquery To Text Existance Of An Element By Id?

      Answer :

      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'');

    136. Question 136. How To Use Jquery In Asp.net Web Application?

      Answer :

      To use jQuery in ASP.NET web application follow the below steps:

      1. Go to http://jquery.com/(The official jQuery WebSite)
      2. Download latest .js jQuery file from the website.
      3. Put it the script(or other folder) in the root of your web application
      4. Add the below tag on the page where you want to use Jquery

    137. Question 137. What Is The Use Of Jquery Min Js File In Asp.net Web Application?

      Answer :

      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.

    138. Question 138. What Is The Advantages Of Use Of Document.ready Functions In Jquery?

      Answer :

      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.

    139. Question 139. How To Write A Callback Function With Arguments In Jquery?

      Answer :

      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));

    140. Question 140. Can A Function That Appears After Parent Function Can Execute Before The Callback Function?

      Answer :

      Yes. A function that appears after parent function may or may not execute before the callback function depending upon the response from parent function.

    141. Question 141. What Is A Callback Function In Jquery?

      Answer :

      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.

    142. Question 142. What Is The Use Of Event.preventdefault Function In Jquery?

      Answer :

      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 disappear slowly.

    143. Question 143. How To Detect Using Java Script If User Is Using Ipad To Access Your Application?

      Answer :

      if(navigator.platform.indexOf("iPad") != -1) { //means it is iPad return true; }

      else { //means it is not iPad return false; }

    144. Question 144. What Is Difference Between Attribute Value And Property Value In Html?

      Answer :

      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.

    145. Question 145. What Is The Use Of Data-role As List View In J Query Mobile?

      Answer :

      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>

    146. Question 146. How To Create A Button With Jquery Mobile?

      Answer :

      Below is the code to create a button with Jquery Mobile

      <a href="#" data-role="button" data-icon="">Press</a>

    147. Question 147. What Is The Use Of Data-role Attribute Of Div In Jquery Mobile?

      Answer :

      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.

    148. Question 148. What Js And Css File We Need To Reference While Developing Jquery Mobile Application?

      Answer :

      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

    149. Question 149. How Can We Check/uncheck An Checkbox In Jquery?

      Answer :

      Using two function, we can perform the operation.

      // Check #x $(“#checkboxid”).attr(“checked”, “checked”);
      // Uncheck #x $(“#checkboxid”).removeAttr(“checked”);

    150. Question 150. How Can We Disable/enable An Element In Jquery?

      Answer :

      you can disable/enable web element using attr and removeAttr functions respectively.

      // Disable #x $(“#x”).attr(“disabled”,”disabled”);
      // Enable #x $(“#x”).removeAttr(“disabled”);

    151. Question 151. How Do I Test Whether An Element Has A Particular Class?

      Answer :

      * 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();

    152. Question 152. How Can We Apply Css In Div Using Jquery?

      Answer :

      using css() method we can apply css in div element.

      example:$(“div”).css(“border”,”1px solid green”);

    153. Question 153. Do I Need To Refer Jquery File Both In Master Page/base Page/template Page And Content Page ?

      Answer :

      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.

    154. Question 154. What Is The Difference Between Jquery-x.x.x.js And Jquery.x.x.x-min.js?

      Answer :

      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.

    155. Question 155. How It Affects The Performance ?

      Answer :

      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.

    156. Question 156. Why To Load Jquery File From Cdn ?

      Answer :

      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.

    157. Question 157. Is It Good To Load Jquery From Cdn(content Delivery Network) ?

      Answer :

      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.

    158. Question 158. We Need To Add The Jquery File Both At The Master Page And Content Page As Well ?

      Answer :

      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>

    159. Question 159. What Is The Advantage Of Using The Minified Version Of Jquery Rather Than Using The Conventional One ?

      Answer :

      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

    160. Question 160. What Is Cdn And How Jquery Is Related To It ?

      Answer :

      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.

J Query Tutorial

J Query Practice Tests

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Tutorial