Following on from jQuery Quiz Questions 1-10 here are questions 11-20. Hopefully you might learn something new about jQuery you didn’t know before. Once more if you find any mistakes please feel free to leave a comment with corrections. Enjoy!

Question 11

Which of the following is the correct way to check which key was pressed using jQuery?

Answers

  • $('#txtValue').keypress(function (event) {
        $('#txtvalue').alert((event.keyCode));
    });
    
  • $(‘#txtValue’).keypress(function (event) {
        alert(String.fromCharCode((event.keyCode)));
    });
    
  • $(‘#txtValue’).keypress(function (event) {
        alert(fromCharCode((event.keyCode)));
    });
    
  • $(‘#txtValue’).keypress(function (event) {
        $(‘#txtvalue’).alert((event.which));
    });
    

Correct Answer

$(‘#txtValue’).keypress(function (event) {
    $(‘#txtvalue’).alert((event.which));
});

API: http://api.jquery.com/keypress/

 


Question 12

Consider the following code snippet:

$('#ul1 li').on('click', function1);
$('#ul1').after('
  • Last item
  • ');

    Is function1 executed if “lastLi” is clicked?

    Answers

    • yes
    • no

    Correct Answer
    no. The .after() function adds the list item outside the UL tag.

     


    Question 13

    $("ul#myId > li");

    What does the above statement return?

    Answers

    • A set of tags whose id is “li”.
    • A set of tags which contains class “li”.
    • A set of li tags which are children of ul tags that have “myId” class.
    • A set of li tags which are children of ul tags that have “myId” id.

    Correct Answer
    A set of li tags which are children of ul tags that have “myId” id.

     


    Question 14

    Consider the following code snippet:

    $('#table1').find('tr').filter(function (index) {
        return index % 3 == 0
    }).addClass('firstRowClass');
    

    The result of the above code snippet is ___.

    Answers

    • the rows of table1 at order 3n + 1 (n = 0, 1, 2, …) have class firstRowClass
    • the rows of table1 at order 3n (n = 1, 2, …) have class firstRowClass
    • all rows of table1 have class firstRowClass
    • no rows of table1 have class firstRowClass

    Correct Answer
    the rows of table1 at order 3n + 1 (n = 0, 1, 2, …) have class firstRowClass
    see answer in action: http://jsfiddle.net/jquery4u/zJW3B/

     


    Question 15

    Which of the following is the correct way to move an element into another element?

    Answers

    • $('#source').prependTo('#destination');
    • $("#source").add("#destination");
    • $("#source").html("#destination");
    • $("#source").add().html().("#destination");

    Correct Answer

    $("#source").add("#destination");

     


    Question 16

    Consider the following code snippet:

    $('span.item').each(function (index) {
        $(this).wrap('
  • Item
  • '); });

    Essentially, what does this code snippet do?

    Answers

    • Wraps each span tag that has class item within a li tag.
    • Inserts each span tag that has class item into a li tag.
    • Inserts Item into each span that has item class.
    • Replaces each span tag that has class item with a
    • Item
    • .

    Correct Answer
    Wraps each span tag that has class item within a li tag.
    see answer in action: http://jsfiddle.net/jquery4u/gv2vq/

     


    Question 17

    What is the result of the following code snippet?

    jQuery.unique([1, 2, 2, 3, 3, 1]);
    

    Answers

    • [1, 2, 3].
    • [3, 2, 1].
    • [1, 1, 2, 2, 3, 3].
    • None of the above.

    Correct Answer
    [1, 2, 3].
    see answer in action: http://jsfiddle.net/jquery4u/gkJsP/

     


    Question 18

    Consider the following code snippet:

    $('#table1').find('tr').hide().slice(10, 20).show();
    

    What is the result of this code snippet?

    Answers

    • Showing table1’s rows from 11th to 20th.
    • Showing table1’s 20 rows from 10th.
    • Deleting rows of table1 from 10th to 20th.
    • Deleting 20 rows of table1 from 10th onward.

    Correct Answer
    Showing table1’s rows from 11th to 20th.
    see answer in action: http://jsfiddle.net/jquery4u/MQjer/

     


    Question 19

    $("div").find("p").andSelf().addClass("border");
    

    The statement adds class border to ___.

    Answers

    • all p tags enclosed in div tag
    • all div tags and p tags in div tags
    • all div tags
    • all p tags

    Correct Answer
    all div tags and p tags in div tags
    see answer in action: http://jsfiddle.net/jquery4u/eUBup/

     


    Question 20

    Which of the following statements return(s) a set of p tags that contain “jQuery”?

    Answers

    1. $('p:contains(jQuery)');
    2. $('p:contains("jQuery")');
    3. $('p:has("jQuery")');
    4. 1 and 2
    5. 1 and 3

    Correct Answer
    1 and 2
    see answer in action: http://jsfiddle.net/jquery4u/cAnHC/

     

    Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

    Free Guide:

    How to Choose the Right Charting Library for Your Application

    How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


    • Bob Jones

      Question 16 didn’t format right ;) Thanks!

      • http://jquery4u.com/ jQuery4u

        Fixed thanks Bob.

    • Bob Jones

      Question 17’s jsfiddle is showing

      [1, 2, 3, 1] not [3, 2, 1]
      … weird!

      • http://jquery4u.com/ jQuery4u

        Fixed. My bad correct answer is obviously [1,2,3]

        • Bob Jones

          Still not quite right… apparently the array has to be sorted first for the expected result.

          Check out my modified code: http://jsfiddle.net/gkJsP/1/

          console.log(jQuery.unique([1, 2, 2, 3, 3, 1, 1, 4, 1]));
          >>[1, 2, 3, 1, 4, 1]

          • http://jquery4u.com/ jQuery4u

            Only for correct sequence it needs to be sorted. It naturally picks the first one.

    • Alessandro

      I like this kind of posts, I was wondering if there was something similar more related to real development issues based on real projects. Thanks

    • Gelly

      Answer 15 seems to be incorrect!

      Moving element is by .append() or .prepend() but .add() only join them for use

      Please see http://stackoverflow.com/a/10893463/2925243

    Learn JavaScript for free!
    Free course: Introduction to JavaScript

    Yours when you take up a free 14-day SitePoint Premium trial.