jQuery Fundamentals

Question 1

How does the for each function work with a set of jquery elements?

Answer 1

$someEls.each( function( index, element ) { // act on els } );

Question 2

What is the difference between $(element) and $(this) in a jquery().each() loop?

Answer 2

they’re the same

Question 3

What’s the difference between el.append() and el.after()

Answer 3

append treats ‘el’ as parent, and puts something inside it at the end. After simply puts something after the element.

Question 4

What jQuery method sets and overrides default options in a plugin?

Answer 4

$.extend( { key1: defaultVal1, key2: defaultVal2 }, overrides ); // the overrides var would be passed into the plugin

Question 5

Will this work? $.extend( { someObj { }, someKey: val }, overrides } );

Answer 5

No, because extend doesn’t do a deep merge. Add “true” to make it work.

Question 6

How does $.each() work?

Answer 6

It takes an array or an object as the first argument and a callback as the second. Callback: function( key, objValProp) {} or else function ( index, objValue ) depending on object or array.

Question 7

Search for class “box” inside of the #main section using context parameter.

Answer 7

$( “.box”, “#main”);

Question 8

Get a set of all paragraph elements inside div id=”main” as well as the div. That is, return a set of p’s and div#main.

Answer 8

$(“#main”).find(“p”).andSelf(); // or $(“p”, “#main”).andSelf()

Question 9

Get or set an attribute like id or src

Answer 9

$(“#someElement”).attr( “id”, “newID” ); // set

$(“#el”).attr( “id” ); // get

Question 10

Set multiple attributes at once on an element

Answer 10

$( “el” ).attr( { “id”: “newID”, “title”: “newTitle” } );

Question 11

What’s the difference between $( ‘p’ ).html() and $( ‘p’ ).text() ?

Answer 11

html() returns all the unescaped characters and attributes (e.g for bold text or spans). Text() only returns the text.

Question 12

What’s the difference between $( ‘p’ ).html() and $( ‘p’ ).text() ?

Answer 12

html() returns all the unescaped characters and attributes (e.g for bold text or spans). Text() only returns the text.

Question 13

Fastest way to select all direct children of a node?

Answer 13

$( someNode ).children(); // faster than $(“ node > * “);

Question 14

What’s main difference between $(“div”).find(“.someClass”) and .filter( “.someClass” );

Answer 14

Find looks to all the children of div collection and filter looks to only the div collection

Question 15

What’s main difference between $(“div”).find(“.someClass”) and .filter( “.someClass” );

Answer 15

Find looks to all the children of div collection and filter looks to only the div collection

Question 16

What’s the difference between jquery array map() and js array map() ?

Answer 16

$.map( myArray, function( el, i ) { return el + i; });

myArray.map( function (el, i){ return el + i; });

Question 17

What’s the difference between jquery array map() and js array map() ?

Answer 17

$.map( myArray, function( el, i ) { return el + i; });

myArray.map( function (el, i){ return el + i; });

Question 18

what is the vanilla js version of html() function?

Answer 18

.innerHTML which isn’t a function and is faster.