jQuery 1

Question 1

Under what circumstances is it not necessary to use document.ready()?

Answer 1

If you place code just before closing body tag, you don’t need it — the result will be the same.

Question 2

You want to find all cases where class = “special” within a div with id = “container”; what are two ways to do this?

Answer 2

1. Use context parameter: $(“.special”, “#container”);

2. Use find(): $(“#container”).find(“.special”);

Question 3

What can the filter() method do that find() or just plain old $(“.someClass”) can’t do?

Answer 3

1. It can find things that aren’t in the DOM (e.g. in a documentFragment).
2. It can take a function which takes one argument, index.

Question 4

What does end() do?

Answer 4

It reverts the selection to its prior state. $(‘p’).find(‘.someClass”)..perform some actions on someClass set….end()…perform some actions on set of p tags.

Question 5

Find an element in a given set by index (integer)

Answer 5

Use the eq(i) function: $(“li”).eq(1);

Alt: $(“li:eq(1)); // NOT AS FAST

Question 6

Name 10 DOM manipulation methods

Answer 6

append(), prepend(), prependTo(), after(), before(), insertAfter(), insertBefore(), wrap(), wrapAll(), wrapInner()

Question 7

What are two ways to select the direct descendants (children) of ul that are li elements?

Answer 7

$(“ul”).children(“li”) or $(“ul > li”);

Question 8

What are the three kinds of selector filters?

Answer 8

Basic, Child, and Content Filter.
Basic: things like :eq, :first, :lt, :not
Child: :first-child, :nth-of-type, etc
Content: :contains(), :has(), :empty.
Note: always use with colon.

Question 9

How could you find all paragraphs that included the text “Hello”?
What if it could be “hello” or “hi” or “hiya”?

Answer 9

1. $(“p:contains(‘Hello’));
2. $(“p”).filter(function( ) { return pattern.text($(this).text());
   }

Question 10

Select all input elements except those that are hidden:

Answer 10

$(‘:input:not(:hidden)’);

Question 11

Select both all input elements and all textarea elements in one call:

Answer 11

$(‘textarea, :input’);

Question 12

Select all images with a common extension of jpg:

Answer 12

$(“img”).filter(function(index){
return /.jpg/.test(this.src);
} // this points to the element not the jquery object

Question 13

Match all div elements with ids like id=”card-1”, id=”card-2”, id=”card-3” etc

Answer 13

$(“div[ id^=’card-‘ ]”);

Question 14

What does [attr$=val] do?

Answer 14

It matches elements that have a particular attribute with a name ending in val. E.g. $(“[id$=’card’]”) will match div id=”big-card”, id=”wide-card”, and id=”small-card”

Question 15

How would you select every element that had a css background image?

Answer 15

$(“*”).filter(function(i){
return !! $(this).css(“backgroundImage”);
}; // !! not necessary but helps clarify

Question 16

How can you extend jQuery’s selector expressions, say, if you wanted to create a custom filter for finding only inline elements.

Answer 16

Use the jQuery.expr[":"] object:
$.expr[":"].inline = function(elem, index, array){
    // must return true or false
    return $(elem).css("display") === "inline";
}

Question 17

How is the $(selector).each() method different from the javascript array.prototype.forEach() method?

Answer 17

jQuery each() takes a function that takes only one argument, the index. You can stop the loop by returning false at any time. Note that there is a separate utility function called each() which is different.
JS forEach() takes a function with 3 params: item, index, array.

Question 18

How can you convert a jQuery object to a raw DOM object? (e.g. instead of the $(“p”) list, you want the list of DOM nodes).

Answer 18

Use array notation, $(“p”)[ 0 ] will get the first node with nodeName of “paragraph”.
Or use get( ) with optional index (which can be negative). No index will return an array of nodes.

Question 19

What does $.grep() do?

Answer 19

It’s a filter method for arrays. Like the native filter method but it takes an array and then a function. Ex: newArray = $.grep(oldArray, function(item, index)) { //return true or false }

Question 20

What is the difference between $.merge() and array.concat()?

Answer 20

merge takes two arrays as arguments and returns the second one concatenated to the first (it changes the first array).
concat() creates a third array that it returns.

Question 21

How do you get the value of an input field?

Answer 21

$(“someInput”).val();

Question 22

If $input is an input field, how do you remove whitespace from its contents?

Answer 22

Use the trim utility:

$.trim( $input.val( ));

Question 23

What is an expando and why can it cause problems?

Answer 23

It’s a property added to an object or DOM node at runtime. It can cause garbage collection problems.

Question 24

What is the jQuery.data() method?

Answer 24

It allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore free from memory leaks.

Question 25

How do you set data on a DOM element using $.data()?

Answer 25

Pass three arguments: the element to assoc. with the data; a string key to name the piece of data; and an object that can contain n values. Ex: jQuery.data( div, “food”, { lunch: “soup”, dinner: “pizza” });

Question 26

Assume we have a jQuery object, $myDiv, which has data associated with it. If the data has a key of “food”, how can you access the property called “dinner”?

Answer 26

$.data( $myDiv, “food” ).dinner );

Question 27

How do you alias jQuery with $?

Answer 27

Use a self-invoking anonymous function, in which you pass jQuery:
(function($){ some jquery code…})( jQuery )

Question 28

Which is faster and why?

$(“#id li.someclass”) or $(“#id”).find(“li.someclass”);

Answer 28

The latter, because sizzle isn’t necessary — near the top of jQuery, it identifies if the selector is an id, and if it is it uses getElementById(); With the former, it has to do a bunch of stuff before it even determines that it can use the id.

Question 29

What does it mean when you add a function to jQuery.fn?

Answer 29

It’s the same as adding it to jQuery.prototype.

Question 30

How do you use jQuery bind() method?

Answer 30

It’s deprecated, so use on();

Question 31

How do you use jQuery on() method?

Answer 31

Pass it an event type and a function:
on (“submit”, function(event){ // });
Note that there are a bunch of shorthand ways to handle certain types of events. You can also pass data to the handler.

Question 32

How do you reduce name lookups in a loop?

Answer 32

If the loop is inside of one or more nested functions, and that loop handles variables, every iterations it will need to look up each variable starting with local and working up to global. Math.abs will look locally, then in outer function and so on. Just cache the references, as in: var abs = Math.abs.

Question 33

what’s a shorthand way to get the current time in milliseconds?

Answer 33

var t1 = +new Date;

Question 34

What does html() method do?

Answer 34

Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element. It uses native innerHTML but cleans is up.

Question 35

How can you prevent animations from getting out of control when using hover effects?

Answer 35

Animations get put in a queue, so it’s smart to stop all existing animations in the queue before starting a new one. Use stop( true ) with true indicating that all animations should be cleared from the queue. y

Question 36

How can you pass data to an event handler? And why would you want to?

Answer 36

The on() method takes an optional data parameter:
$("someSelector").on( "click", { key: value }, handler }); 
// You might want to use the same handler for a variety of events or selectors. The data object enables you to do specific things for each of them.

Question 37

What is the best way to delegate events in jQuery?

Answer 37

Use the on() method with optional descendent selectors. This will attach only one event listener which will delegate to those descendents:
$(“div”).on( “click”, “.class1, .class2”, handler);

Question 38

For best performance, attach delegated events where in relation to the target elements?

Answer 38

Attaching many delegated event handlers near the top of the document tree can degrade performance. Attach a document location as close as possible to the target elements.

Question 39

How could you attach an event handler that fired only once (without manually removing the handler)?

Answer 39

Use the one() method:
$( “p” ).one( “click”, function() {
alert( “that’s it!”);
});

Question 40

What will this do?

$(“#someDiv”).off( );

Answer 40

It will remove all event listeners that are attached to the #someDiv element.

Question 41

How could you be specific in removing listeners from an element?

Answer 41

Pass the selectors and handler used in on(). Selectors must be the same and in same order.
$(“#id”).off( “click”, “.childOfID”, handler);