jQuery Quiz Questions 11-20

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: https://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: https://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: https://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: https://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: https://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: https://jsfiddle.net/jquery4u/cAnHC/