jQuery Quiz- 3 with answers


1. What is jQuery?

  • jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
  • jQuery is a collection of Ninja techniques compiled in the 15th century in feudal Japan. It is currently curated by John Resig, the only 11th dan ninja in the world.

2. What does the function $('.selector') return?

  • An array.
  • A node list.
  • A new jQuery object.

3. Why do we usually add our jQuery code to the document.ready event?

$(document).ready(function(){
// do something
});
  • The document.ready event is fired when the DOM is initialized, and we can access all the elements on the page with jQuery selectors. We use it because this is the earliest time in the loading of the page that we can execute jQuery code safely.
  • This is the only way we can delay the execution of jQuery code until the page has fully loaded.

4. What do we use jQuery.noConflict() for?

  • To prevent other libraries from stealing the $ (dollar function).
  • To restore the ‘$’ to its previous, non-jQuery owner. This way we can have more than one JavaScript library on the page.

5. Why do we usually add the stop() method before calling animate()?

  • stop() halts the execution of the scripts on the page until the animation has finished.
  • stop() ends any currently running animations on the element, and prevents conflicts and pile-ups.
  • We tell jQuery that the animation has to be stopped at some point.

6. How can you tell if an element is currently being animated?

·         if($('#myDiv').is(':animated')){
// do stuff
}
·         if($('#myDiv').isAnimated()){
// do stuff
}

7. What is Sizzle?

  • A discontinued soft drink.
  • An open source JavaScript library, that is embedded inside jQuery, and handles the CSS-like selection of elements from the DOM.

8. What is the difference between .width() and .outerWidth()?

  • The methods are basically the same. The only difference is that .width() returns a number, whereas outerWidth() a string.
  • width() returns the computed width of the element, while outerWidth() returns the width plus all the margins and paddings.
  • No difference. width() is a shorthand alias for outerWidth()

9. How do you fetch the first span on the page, which has the class ‘green’?

  • $('span, .green, :first')
  • $('first .green span')
  • $('span.green:first')

10. What does the $('#myDiv').hover() method do?

  • It binds the functions you pass as parameters, to the mouseenter and mouseleave events.
  • Converts the element upon which it was called, into a hoverable menu.

11. What actually happens when we write something like this:

      $('#myDiv').find('span').addClass('color','red').width(200);
  • The dollar function creates a new jQuery object. Every method from then on returns that same object modifying it if necessary. This is called chaining.
  • Black magic.

12. If you want to make the #myDiv element 200px wide and 100px tall, can you do this:

      $('#myDiv').width(200).height(100);
  • No you can’t. The width and height methods return numbers, thus chaining would not work.
  • Yes you can. When acting as setters, width and height return the jQuery object.

13. What does the end() method do in this chain?

               $('#myDiv').find('span').hide().end().addClass('.spansHidden');
  • It restores the jQuery object to the state it was before being modified by find(‘span’). This way .addClass('.spansHidden') is applied directly to #myDiv.
  • It ends all the currently running animations and then adds the .spansHidden class to all the spans.

14. Which of the snippets below creates a new div and appends it to the first span on the page?

  • $('span').createElement('div','This is a new div!');
  • $('<div>',{
    html:"This is a new <b>div</b>"
    }).appendTo('span:first');
  • $('span').html('<div>This is a new div!</div>')

15. Why doesn’t this work:

$('p').click(function(){ 
this.html('clicked!');
});
  • All event listening functions are passed the element, and not the jQuery object. For this to work, the second line has to become $(this).html('clicked!');
  • The event listening function is supposed to take parameters.

16. What is the difference between

$('#myDiv').bind('click',function(){
// do something
});

and

$('#myDiv').click(function(){
// do something
});
  • There is no difference. They do the same.
  • bind() binds an event listening function to the click event, whereas click() triggers it.
  • Both bind a function to the click event. The difference is that with bind() an event object is passed as a parameter.

17. Can we do this:

$('#myDiv').bind('myEvent',function(){
// do something
});
  • No, bind only works with events such as ‘click’, ‘mousedown’, ‘mouseover’ etc.
  • Yes, we can bind custom events.

18. Which of the snippets below can listen for events on elements that are yet to be created?

  • $('div.green').bind('click',function(){
    // do stuff
    });
  • $('div.green').click(function(){
    // do stuff
    });
  • $('div.green').live('click',function(){
    // do stuff
    });

19. What does this do:

      $('#myDiv').trigger('click');
  • It simulates a click on the element and runs all the event handlers associated with it.
  • It sets up a trigger. When a click occurs, the trigger is going to be activated.

20. Which of the below is equivalent to

if($(‘#myDiv’).hasClass(‘purple’)){
// do stuff
}
  • if($(‘#myDiv’).find(‘.purple’)){
    // do stuff
    }
  • if($(‘#myDiv’).is(‘.purple’)){
    // do stuff
    }

21. Why do we add a return false here?

$('form.contact').submit(function(e){
// submit the form via AJAX
return false;
});
  • Every function in JavaScript must return a value, so we are placing a dummy return line.
  • return false prevents the web browser from submitting the form and reloading the page.
  • This will not work.

22. What does the serialize() method do in the following line?

      $('#myForm').serialize();
  • It fetches the names and values of all the input fields contained in the form, and generates a URL encoded string representation, ready to be submitted via AJAX or appended to a URL.
  • Fetches the names and values of all input fields, and returns them as an object.
  • Creates a JSON representation of the form.

23. What does the $.get() jQuery function do?

  • It fires a GET AJAX request.
  • It returns the DOM elements that are contained in the jQuery object.

24. What does $('#myDiv').load('page.html') do?

  • It adds the string ‘page.html’ as the contents of the #myDiv div.
  • It fires an AJAX request, fetches the result of page.html as text, and inserts it into the div.

25. What is the difference between $('#element').remove() and $('#element').detach()

  • remove() removes the element from the DOM along with any jQuery data such as event handlers, while detach() only removes the element from the DOM.
  • detach() removes the element along with all the jQuery data, whereas remove() only removes it from the DOM.

26. What does the filter() method do in the following line?

      $('div').filter('.nav')
  • It filters all the ‘.nav’ elements on the page and leaves only the divs.
  • It sifts through all the divs and leaves only those which have the nav class.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s