JQuery

Question 1

What function can be used to delay execution of a script until the page is fully loaded?

Answer 1

$(document).ready();

Question 2

When adding a new element to a page dynamically, you find events are not working for these new items. What could the issue be?

Answer 2

If the event was setup using $(‘id’).click, creating a new element doesn’t seem to bind the event. Use the $(‘body’).on(‘click’ ….) function call instead.

Question 3

Instead of using $.get, what is another method?

Answer 3

$.ajax({
   type: 'GET',
   url: url,
   data: data,
   dataType: 'json'
});

Question 4

What field, in the $.ajax call configures the callback?

Answer 4

success

Question 5

Given an element with a data attribute as such ‘data-set=”4 ,1”’ - how would you select the element if it had the number 4 as one it’s values?

Answer 5

$(“[data-set~=’4’]”)

Question 6

How would you load content into a div from a separate HTML file?

Answer 6

$(‘#divid’).load(‘content/mycoolcontent.html’);

Do this once the page has loaded, and the html content will be loaded into the page at the location specified by the #id.

Question 7

What is the issue with using window.outerWidth to determine screen size?

Answer 7

It doesn’t take into account scroll bars and other such intrusions. The actual content width is usually a bit smaller - and the problem is that media queries use the content width, whereas JavaScript gives you the outerwidth.

Question 8

How might you write a function that detects screen size change?

Answer 8

function checkBrowserSize() {
    windowWidth = window.outerWidth;
    var contentWidth = $('body').width(); 
    var sizeDiff = windowWidth - contentWidth;
    actualSize = windowWidth - sizeDiff;

    if (actualSize > 800) {
        newWindowSize = 'large';
    } else if (actualSize  500) {
        newWindowSize = 'medium';
    } else if (actualSize

Question 9

When using jQuery to animate, you may find that between media queries, the position of elements are not entirely what was expected. Why might this be?

Answer 9

The jQuery animate function adds a ‘style’ attribute to the targeted elements. This could be overriding the css. So you need to remove that style.

$(this).removeAttr(‘style’); (where ‘this’ is targetting the element with the attribute)

Question 10

window.outerWidth does not work in IE 7 and 8. How would you go about determining the size of the window?

Answer 10

NOTE: isIE is a variable set by checking support.leadingWhitespace.

    if (isIE) {
        windowWidth = $('body').width() + 33;
    } else {
        windowWidth = window.outerWidth;
    }

The windowWidth will now have a value (we are using jQuery) - although the + 33 is an arbitrary value, we don’t actually know if there is a scroll bar or not.

Question 11

What is the difference between the ready and the onload event?

Answer 11

onload fires after all images and code has loaded (so it’s blocking). The ready event fires once the DOM has loaded - which means it will fire a lot earlier.

Question 12

What is the difference between “.html” and “.text” methods?

Answer 12

.html inserts html, whereas .text will insert escaped text, meaning you will see any tags etc in the output.

Question 13

What JQuery method can you use to stop events from listening?

Answer 13

.off

Question 14

When you get an array back from a JQuery selector, is the array an array of DOM elements?

Answer 14

No - it’s an array of objects that wrap each of the DOM elements.

Question 15

What is the difference between a selector and a filter?

Answer 15

Selectors find the elements, whereas filters select from a group of elements (chosen by a selector) based on a more granular requirement. For instance.

$(“p”) - selects all of the p elements.
Adding the filter :first
$(“p:first”) - selects only the first p element

Question 16

How would you select paragraph elements that have an index greater than 1?

Answer 16

$(“p:gt(1)”)

Question 17

How could you use a selector to select all of the p elements bar the second one?

Answer 17

$(“p:not(p:eq(2))”)

So we are saying here, grab all elements, but not the one equal to 2.

Question 18

Can you chain attribute selectors with JQuery?

Answer 18

Yes

$(“p[id^=para][lang*=eng-]”)

We are looking for “p” tags that contain an attribute (id) that starts with the word “para” and a lang attribute that contains the word “eng-“.

Question 19

What does the :contains filter do?

Answer 19

It looks at the actual contents of the selector, to see if the specified content is in the tag.. i.e.

$(“p:contains(‘superman’)”)

Would select any p elements that contain the words “superman”.

Question 20

What does the :parent filter do?

Answer 20

Selects all P tags that are parents, i.e. they contain some other tag.

Question 21

What does the :has filter do?

Answer 21

It allows you to search for an element that has another element with some specific condition. i.e.

$(“div:has(p[class=a])”)

Give me all the divs that contain a paragraph element that has a class with a in it

Question 22

What would the following selector select?

$(“div p:first-child”)

Answer 22

The first p, that is a child, and within a div.

NOTE: It’s not necessarily the first p that is a child of the div, but a p that is a first-child somewhere inside the div.

Question 23

How would you select the last p in a div, without using last-child?

Answer 23

$(“div p:last-of-type”)

NOTE: if there are other divs/containers within the outer div, then the p:last-of-type will apply to those containers too. It’s last-of-type at that level.

Question 24

What is unusual about using nth-child filter?

Answer 24

It’s not 0 based, it starts at 1.

Question 25

How does the nth-child expression work?

Answer 25

You can pass it a value n - to get you every nth element. i.e. p:nth-child(2n) will give you every second one.

Question 26

What function will return all the parents of an element, up until a specified parent element?

Answer 26

parentsUntil($("body"));

Question 27

Write a coupleo f lines code that get the element with the "para1" class, and apply a 3px red solid border to it's parent.

Answer 27

``` var element = $(".para1"); element.parent.css("border", "3px solid red"); ```

Question 28

How does the find function work?

Answer 28

You can use it to search through the DOM tree to find an element that is starting at a certain element. i.e. $("#example").find(".foobar").css("border", "2px solid red");

Question 29

How does the "each" function work?

Answer 29

It allows you to specify a callback function that will be run for each element found based on a selector. i.e. var leftmargin = 0; var border = 3; $("#example p").each(function(index, element) { $(element).css("border", border+"px solid red") .css("margin-left", leftmargin+"px"); border += 2; leftmargin += 10; });

Question 30

The second argument passed to the callback in the each function is a jquery object, or a dom element?

Answer 30

A dom element, so you have to pass it to JQuery to turn it into a jquery object. $(element) NOTE: no quotes, because it's a var.

Question 31

There are two ways to create a jQuery object containing a HTML DOM object, what are they?

Answer 31

Directly - but inserting the element into the page using the html tag. $("#myElement").html("Stuff"); And by passing a full string to the jQuery object, and assigning it to a variable. ``` var myjQueryObject = $("Stuff"); $("#myElement").html(myjQueryObject); ``` // NOTE: The contents of both examples ("stuff") should be wrapped in HTML tags, but because of brainscapes stupid way of handling HTML, it's not easy to do reliably.

Question 32

What is the usage difference between the append and appendTo functions?

Answer 32

$("#id").append("Some text"); | $("Some Text").appendTo("#id);

Question 33

The functions, append, prepend, appendTo and prependTo insert text/html inside the selectors element. How would you insert text/html BEFORE the element?

Answer 33

Use the functions before after $("p").before("This is text that goes before");

Question 34

What would the following code do? $("#example p:last").appendTo("#example p:first");

Answer 34

It would actually take the last paragraph, and append it to the first paragraph. So: paragraph 1 paragraph 2 paragraph 3 would end up looking like paragraph1 paragraph3 paragraph2

Question 35

append has appendTo, what is the equivalent for after?

Answer 35

insertAfter insertBefore (i.e. you specify the content first, then the selector) $("stuff").insertAfter("#myElement");

Question 36

What does the wrap function do?

Answer 36

It allows you to wrap content around existing content. For instance: $("#example p").wrap("div style='red'"); NOTE: That you only have to provide a closed tag, you don't need to have the open and closed tag - jquery will work it out. NOTE: I've left out the greater / less than signs because brainscape can't deal with them (even as html characters).

Question 37

What is the difference between wrap and wrapAll?

Answer 37

When jQuery returns a set of jQuery objects based on a selector, wrap will wrap each one with the provided html tag. However, wrapAll will simply wrap ALL of the jQuery objects with a single element.

Question 38

What does the .empty() function do?

Answer 38

Given a selector, it will remove all of the child elements. I.e. it empties containers.

Question 39

What is the difference between remove and detach functions?

Answer 39

Remove will remove all of the specified elements (via the selector) and also all of their data and event handlers. However, detach will remove the specified elements (via the selector), but LEAVE all of the data and event handlers untouched. The contents of the tags are gone - but if you put those elements BACK into the page later, then any data or event handlers that you have added to those elements will still work.

Question 40

What is the purpose of the replaceAll / replaceWith functions?

Answer 40

They simply find an element in the document, and replace it with the specified text.

Question 41

What is the difference between replaceAll and replaceWith

Answer 41

Basically the order in which you provide the arguments. They both replace all the matches. $("A string or HTML").replaceAll("p"); $("p").replaceWith("A string or HTML");

Question 42

What is one nice feature of replaceWith regarding how you determine selectors?

Answer 42

You can pass it a callback function, which can determine elements on the fly. NOTE: The callback will be called for each jQuery object in the set - so the callback should deal with each one individually, and determine if it matches. Then it should return the element that it will replaceWith.

Question 43

When you have a callback function (say for the replaceWith function), and you see the following code, what is it doing? $(this)

Answer 43

Typically, the callback function will be called within a given context. For example, that may be the context of each element in a set of jQuery objects. If that is the case, the "this" variable in the calleback will refer to the DOM element (not the jQuery object itself). So to operate on the DOM element with jQuery, you must revert it to a jQuery object, by passing it to the jQuery object. $(this).text();

Question 44

What does the following do? $(this).text().indexOf(1)

Answer 44

It finds the index (string array) of the value "1" in the given jQuery object. So if it was a DOM element with a string of "I love 1's", it would return a value of 7.

Question 45

What function is used to set an attribute?

Answer 45

$("img").attr("title", "Great images");

Question 46

How can you use the attr function to retrieve the value of an attribute?

Answer 46

If you don't pass the second argument, it will return the value. $("img").attr("title");

Question 47

Setting the target on an anchor link to _blank does what?

Answer 47

It ensures it opens in a new window $("a").attr("target", "_blank");

Question 48

The text that appears over images when you hover is derived from...

Answer 48

The title attribute

Question 49

How do you remove an attribute from an element?

Answer 49

$("a").removeAttr("href");

Question 50

How would you change multiple attributes at the same time?

Answer 50

You can pass a json object to the attr function $("img").attr({ src: "src/image.jpg", title: "fun spring stuff" });

Question 51

What are the different ways to call .css?

Answer 51

.css(propertyName) - returns value .css(propertyName, value) - sets value of property .css(propertyName, func) - sets value of prop based on return value of func .css(properties) - set multiple values at once

Question 52

How can you determine if an element has a specific class?

Answer 52

.hasClass(classname)

Question 53

How can you turn off/on a class?

Answer 53

.toggleClass(classname)

Question 54

How can you remove a css class?

Answer 54

.removeClass(classname(s))

Question 55

How do you add a class to an element?

Answer 55

.addClass(classname)

Question 56

What does the following do? css("font-size", "+=1pt");

Answer 56

It increases the font size (the current font size, whatever that is) by 1pt

Question 57

How would you send a Javascript Object to the .css function?

Answer 57

``` $("#example").css({ "font-weight": "bold", "font-size": "2pt", "color": "aubergine" }); ```

Question 58

When using jQuery to receive widths/heights etc, what is one of the things you must be mindful of?

Answer 58

You will receive fractional values. So you must be careful not to assume that they are always integer values.

Question 59

Why might the reported height and width of a page differ when looking cross browser?

Answer 59

Each browser has default stylesheets, and differences in those (such as line heights) may cause differences in the values.

Question 60

If you set a width / height to 200px, will it be 200px?

Answer 60

No - it may actually be slightly smaller/larger, the pixels will could be fractional. This is expected, but you must take this into account. So - even though the CSS may say 200, you need to read the real values whenever you use them by using functions such as .height() .width() and then making the changes.

Question 61

What are the main positioning jQuery functions?

Answer 61

``` .height() .width() .innerHeight() .innerWidth() .outerHeight() .outerWidth() .offset().top .offset().left .position().top .position().left ```

Question 62

How can you store data on an element?

Answer 62

.data() .data(key, value) // Set a key value key .data(jsObject) // Can pass multiple values .data(key) // return the value for this key

Question 63

What is the HTML5 standard for naming data?

Answer 63

data-[keyname]

Question 64

What function is used to remove data from an element?

Answer 64

.removeData()

Question 65

In jQuery, when dealing with data - do you need to provide the data- prefix?

Answer 65

No, jQuery deals with that.

Question 66

What method is now used (as of about JQuery 1.8) to bind events?

Answer 66

.on .off These replace the old bind, die etc methods.

Question 67

If you call .on like this: $("#evttarget").on("mouseover mouseleave", myfunc); How would you turn these events off?

Answer 67

$("#evttarget").off("mouseover mouseleave", myfunc); NOTE: You pretty much have to call it the same way to turn off the events properly. Even including the function (because presumably, we are only turning off the binding between those events and THAT specific function.

Question 68

How would you write an event that grabs the users text input from the keyboard?

Answer 68

``` ("#evttarget").on("keypress", function(evt) { // You can use the // String.fromCharCode(evt.charCode) method to grab // the text, and insert it where you will... }); ```

Question 69

The hover event handler is setup how?

Answer 69

$("#mydiv").hover(highlight, highlight); The same function is passed twice (in this case) because it is likely using a toggleclass method to add / remove the class that is responsible for adding the highlight.

Question 70

Normally you would add a new event handler by using the .on method - why are there also methods such as .hover, .click etc?

Answer 70

These are helper methods, there are a couple of helper methods that are added by jQuery to make every day tasks a little easier.

Question 71

What are the event handler helper methods provided by jQuery?

Answer 71

.hover .click .dblclick .resize (but there are plenty of others)

Question 72

What would you typically attach the .resize event handler to ?

Answer 72

The window. $(window).resize(myhandler);

Question 73

Why does the jQuery event object exist?

Answer 73

Because, despite a standardisation of the event handlers across browsers, the way the data is passed is actually not standard, and can be inconsistent. jQuery actually provides a normalised event object to deal with that.

Question 74

What does the meta key property describe in the event object?

Answer 74

It's the windows / mac key (or other key depending on system). It's a boolean value.

Question 75

What properties are normalised in the event object?

Answer 75

target - what fired the event relatedTarget which - which key, mouse button (not always used) pageX - Where the event occurred (not always used) pageY metaKey - Which special key (windows key etc)

Question 76

How do you pass data to an event handler so that you can keep track of things like which object was clicked?

Answer 76

$("#Div1").on("click dblclick", { name: "Div 1" }, function(evt) {}); You can pass (as the second parameter), data in the form of a json object

Question 77

What does the stopPropagation() method do?

Answer 77

You call this function on an event, so: evt.stopPropagation(). It prevents the event from bubbling up through the hiearchy. If you have actually processed the event, there is no need to let it keep going, so calling this will stop it.

Question 78

Given a div that you have to highlight, as well as some of the contents, it may be tempting to use jQuery to highlight each element that you have to toggle on - but what is a more efficient way of doing this with CSS doing most of the heavy lifting?

Answer 78

You can use jQuery to toggle on the highlight for the parent container. Say a div with the class "event". .event { background-color: red; } But then instead of explicitly highlighting the containing text, you can just have more CSS which is only enabled when the parent class is active (i.e. during that hover event) .event .mytext { color: white; } This way - only one jQuery call instead of having to find children to the parent etc.

Question 79

What is the difference between .toggle and toggleClass?

Answer 79

.toggle will toggle the visibility of the element, while toggleClass will toggle the given class of the element.

Question 80

What does the second parameter in the .show and .hide methods do?

Answer 80

It specifies an ease in/out method. There are two defaults, linear and swing. You can add new ones.

Question 81

How do you fade out / in an element?

Answer 81

$("#element").fadeIn(100); $("#element").fadeOut(100); NOTE: You can specify "fast" or "slow" too - values are in milliseconds

Question 82

How do you fade to a specific opacity level?

Answer 82

$("#element").fadeTo(100, 1.0); Over 100 miliseconds - fade to 100% opacity.

Question 83

How could you create a "pulse" effect in animation?

Answer 83

$("#element").fadeTo(100, 0.3) .fadeTo(100, 1.0) .fadeTo(100, 0.3) .fadeTo(100, 1.0); NOTE: Because we are using statement chaining here, the functions will not fire until the previous one has finished. So it will appear to pulse.

Question 84

What functions can you use to make an object slide into / outof existence?

Answer 84

.slideUp .slideDown .slideToggle

Question 85

If you want to animate seperate animations at the same time (using the animation function), what is the key?

Answer 85

You have to specify the values together. Running them one of the other (or on two events that fire at the same time) will result in one of the events queueing.

Question 86

Animate a div 500px to the left, over 1000 milliseconds and with a "swing" easing style.

Answer 86

$("#div").animate({ left: "500" }, 1000, "swing");

Question 87

What does the following do? $("#div").animate({ left: "+=500" }, 1000);

Answer 87

The += sign adds 500px to the current position, rather than just animating to the 500px position.

Question 88

If you have to loop through a series of div's - i.e. for an image rotator, how would you achieve this?

Answer 88

``` var curPhoto = $("#current"); var nextPhoto = curPhoto.next(); if (nextPhoto.length == 0) var nextPhoto = $("#images div:first"); ``` i.e. if the result set from curPhoto.next() is zero, then find the first one in the set.

Question 89

What are some of the $.ajax functions that are used to deal with the return data?

Answer 89

.done .fail .always

Question 90

What helper function is provided to do a get request?

Answer 90

$.get("url", successFunction);

Question 91

What helper function is provided to do a get request, but place the data directly into a page element?

Answer 91

$("#myelement").load("url"); This will take the data from "url" and insert it into the element provided in the element selector.

Question 92

If we read an xml document via ajax, what functions can we use to parse that document?

Answer 92

The standard dom API. (Remember, HTML / XML share a common root) .getElementByTagName .getElementsByTagName .firstChild.nodeValue

Question 93

If you have a tag called name, with text in it, how many nodes are there? [name]Joe Bloggs[/name] (these should be angle brackets - but brainscape sucks)

Answer 93

There are two. The text within the name node is itself a node. So when you are retrieving it... ``` var name = getElementsByTagName("name")[0]; var value = name.firstChild.nodeValue; ``` It might seem odd, but the text is the firstChild. You can't just call "nodeValue" on the name field - as the text within it is it's own node.

Question 94

What are AJAX global events?

Answer 94

They are events that allow you to register a function / handler such that an event (like an error) can be handled in a centralised place. You don't have to add error handling functions to every single AJAX call, rather you register the handler - and it will be called whenever an error occurs.

Question 95

What functions are available for registering handlers for global AJAX events?

Answer 95

``` .ajaxComplete .ajaxSend .ajaxError .ajaxStart .ajaxStop .ajaxSuccess ```

Question 96

Global events are fired on each ajax request if...

Answer 96

The value of "global" is set to true on the jQuery.ajaxSetup() (which it is by default)

Question 97

Global events (no matter what the value of the variable "global" is) are never fired for...

Answer 97

cross domain scripts and JSONP requests.

Question 98

What is AHAH?

Answer 98

Asynchronous HTML and HTTP When you use AJAX to grab a chunk of HTML from somewhere, and embed it on your page, you are using AHAH.

Question 99

What is the difference between JSON and JSONP?

Answer 99

JSON is used to send data around within your app - JSONP is JSON with padding and is designed for sending data to remote apps.

Question 100

Why is one variable preceded by a dollar sign, while the other is not? var $results = $('#rep-lookup-results'), zipcode = $('#txt-zip').val();

Answer 100

$results is a jQuery object. The $ sign is used to denote this. The variable zipcode is simply a text string from a dom object (we used "val()" to obtain the value of that dom object). And so should not have the $ sign.

Question 101

Many URL's for API's have a segment like ?callback=? why is this?

Answer 101

You may need to supply this in the url or else it will not respond with a JSONP object.