jQuery Basics

Why may jQuery not run appropriately if there is more than one JS library being utilized?

$ may be used by another library, which can cause jQuery not to work. If you experience this, you should consider using jQuery.noConflict before loading the other libraries.

What is the syntax for making sure jQuery is loaded once the document is ready?

$(document).ready(function() { });

What is the difference between $.each() and .each()

$.each() is a generic iterator function for looping over object, arrays, and array-like objects. Plain objects are iterated via their named properties while arrays and array-like objects are iterated via their indices. .each() is essentially a drop-in replacement of a traditional for or for-in loop. Given:

How do you iterate over objects and arrays in jquery?

.each iterates over each property in an array or an object. Ex: var sum = 0; var arr = [ 1, 2, 3, 4, 5 ]; $.each( arr, function( index, value ){ sum += value; }); console.log( sum ); // 15 .map();

is .not() the opposite of is()? Why or why not?

.not() is not the opposite of .is() because the .is() method returns a boolean, while the .not() method returns a new jQuery object.

How would you use #map to return an array listing the contents of a particular list?

Ex: Iterate over an array or an array like object, invoking a function on each property and then returning an array with the results of the function. $.map( [ 0, 1, 2 ], function( n ) { return n > 0 ? n + 1 : null; });

How do you get back to your original selection?

For example, consider a case where you select an unordered list, make some changes to its list items, and then want to work with the unordered list again. You can use the jQuery .end() method to get back to your original selection. But, this should be used sparingly.

What are getters and setters in the context of jQuery?

Getters retrieve a piece of information from the selection, and setters alter the selection in some way.

What is implicit iteration?

Implicit iteration means that jQuery automatically iterates over all the elements in a selection when you call a setter method on that selection.

Generally speaking, what elements do getters operate on? Setters? What is the exception to this?

In almost all cases, getters operate only on the first element in a selection (.text() is a notable exception); setters operate on all elements in a selection, using what's known as implicit iteration.

In jQuery what does this usually refer to?

In jQuery, this almost always refers to the raw DOM element on which the function is currently operating.

What does $ stand for?

It is a program shorthand for calling jQuery

What does a jQuery selector return?

It returns a jQuery object.

What does the eq() method do?

Reduce the set of matched elements to the one at the specified index. So you can target a specific selector. Ex: Make the third <li> element red. $('li').eq(2).css('background-color','red');

What are the three methods for removing an element?

The .remove() method should be used to remove elements permanently, as it will also unbind any event handlers attached to the elements being removed. The .remove() method returns a reference to the removed elements, but if you re-add the removed elements, the removed elements will no longer have events bound to them. The .detach() method is useful for temporarily removing elements from the document; for example, if you are going to make a lot of changes to your page's structure using jQuery, it will be more efficient to use .detach() to remove the affected elements, make your changes, and then re-attach the element using one of the insertion methods. Elements removed with .detach() will retain their event handlers; you can re-add them to the document with .appendTo() or another DOM insertion method. Finally, the .replaceWith() method replaces an element or elements with the element or HTML passed as an argument to .replaceWith(). The replaced elements are returned, but just like with .remove(), all event handlers are unbound from the replaced elements.

What is chaining?

The ability to call a series of methods on a selection without having to repeat the selection or store the selection in a variable. We can even make new selections based on previous selections, all without breaking the chain.

What are some ways to filter your jQuery selectors?

Use filter('property') // only include elements with property not('property') // only include elements without property has('property) // only include element that has property

What are ways to alter elements?

Use the addClass() / removeClass() .css()

How do you create and add new elements using jquery?

Use the append/prepend/before/after method. Ex: $('body').prepend('<p>Arya Sue</p>'); Add the <p> tag to the bottom of the body element.

When is $(document).ready() not necessary?

When jQuery is placed at the bottom of the page. Since HTML is loaded from top to bottom, $(document).ready() is only needed to ensure the jQuery code does not run before elements in the DOM have loaded and are therefore accessible.

What are some ways to create a new element?

Wrap an element in a jquery object Assign an element to a variable Create an element from a DOM element ex: $( document.body.children[0] );

Can methods be used to both set and retrieve information?

Yes! var input = $( 'input[type="text"]' ); input.val( 'new value' ); input.val(); // returns 'new value'

How do you copy elements?

You can make a copy of an element or a set of elements using jQuery's .clone() method. This will make a copy of the elements, but note that the copy is only in memory — you will need to place it in the document yourself. You can manipulate the cloned element or elements before placing them into the document.

What does it mean to find elements relative to its selector?

You select an element such as $('ul') and then you use methods such as .children(), siblings(), parent(), and find() (which is all items in a list, including nested ones) to select the specific selector you are after

What elements can have a jQuery function invoked on them?

jQuery objects (elements that have $() wrapped around them.)

How can you ensure that the jQuery object is executed? Why is it difficult to determine this?

the $() function always returns a jQuery object, and an object is always truthy, you'll need to test the contents of your selection to determine whether anything was found. Ex: if ( $( '#nonexistent' ).length ) { // This code will only run if there's a matching element} } //this code works become 0 is falsy.

What is the shorthand method for $(document).ready()?

the $() function does double duty as an alias for $(document).ready()

How do you add your original selection to your current selection?

the .addBack() method if you want to add your original selection to your current selection.