JQuery Flashcards
What function can be used to delay execution of a script until the page is fully loaded?
$(document).ready();
When adding a new element to a page dynamically, you find events are not working for these new items. What could the issue be?
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.
Instead of using $.get, what is another method?
$.ajax({
type: 'GET',
url: url,
data: data,
dataType: 'json'
});What field, in the $.ajax call configures the callback?
success
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?
$(“[data-set~=’4’]”)
How would you load content into a div from a separate HTML file?
$(‘#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.
What is the issue with using window.outerWidth to determine screen size?
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.
How might you write a function that detects screen size change?
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
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?
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)
window.outerWidth does not work in IE 7 and 8. How would you go about determining the size of the window?
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.
What is the difference between the ready and the onload event?
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.
What is the difference between “.html” and “.text” methods?
.html inserts html, whereas .text will insert escaped text, meaning you will see any tags etc in the output.
What JQuery method can you use to stop events from listening?
.off
When you get an array back from a JQuery selector, is the array an array of DOM elements?
No - it’s an array of objects that wrap each of the DOM elements.
What is the difference between a selector and a filter?
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
How would you select paragraph elements that have an index greater than 1?
$(“p:gt(1)”)
How could you use a selector to select all of the p elements bar the second one?
$(“p:not(p:eq(2))”)
So we are saying here, grab all elements, but not the one equal to 2.
Can you chain attribute selectors with JQuery?
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-“.
What does the :contains filter do?
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”.
What does the :parent filter do?
Selects all P tags that are parents, i.e. they contain some other tag.
What does the :has filter do?
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
What would the following selector select?
$(“div p:first-child”)
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.
How would you select the last p in a div, without using last-child?
$(“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.
What is unusual about using nth-child filter?
It’s not 0 based, it starts at 1.
How does the nth-child expression work?
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.
What function will return all the parents of an element, up until a specified parent element?
parentsUntil($(“body”));
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.
var element = $(".para1");
element.parent.css("border", "3px solid red");How does the find function work?
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”);
How does the “each” function work?
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;
});
The second argument passed to the callback in the each function is a jquery object, or a dom element?
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.
There are two ways to create a jQuery object containing a HTML DOM object, what are they?
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.
What is the usage difference between the append and appendTo functions?
$(“#id”).append(“Some text”);
$(“Some Text”).appendTo(“#id);
The functions, append, prepend, appendTo and prependTo insert text/html inside the selectors element. How would you insert text/html BEFORE the element?
Use the functions
before
after
$(“p”).before(“This is text that goes before”);
What would the following code do?
$(“#example p:last”).appendTo(“#example p:first”);
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
append has appendTo, what is the equivalent for after?
insertAfter
insertBefore
(i.e. you specify the content first, then the selector)
$(“stuff”).insertAfter(“#myElement”);
What does the wrap function do?
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).
What is the difference between wrap and wrapAll?
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.
What does the .empty() function do?
Given a selector, it will remove all of the child elements. I.e. it empties containers.
What is the difference between remove and detach functions?
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.
What is the purpose of the replaceAll / replaceWith functions?
They simply find an element in the document, and replace it with the specified text.
What is the difference between replaceAll and replaceWith
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”);
What is one nice feature of replaceWith regarding how you determine selectors?
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.
When you have a callback function (say for the replaceWith function), and you see the following code, what is it doing?
$(this)
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();
What does the following do?
$(this).text().indexOf(1)
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.
What function is used to set an attribute?
$(“img”).attr(“title”, “Great images”);
How can you use the attr function to retrieve the value of an attribute?
If you don’t pass the second argument, it will return the value.
$(“img”).attr(“title”);
Setting the target on an anchor link to _blank does what?
It ensures it opens in a new window
$(“a”).attr(“target”, “_blank”);
The text that appears over images when you hover is derived from…
The title attribute
How do you remove an attribute from an element?
$(“a”).removeAttr(“href”);
How would you change multiple attributes at the same time?
You can pass a json object to the attr function
$(“img”).attr({ src: “src/image.jpg”, title: “fun spring stuff” });
What are the different ways to call .css?
.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
How can you determine if an element has a specific class?
.hasClass(classname)
How can you turn off/on a class?
.toggleClass(classname)
How can you remove a css class?
.removeClass(classname(s))
How do you add a class to an element?
.addClass(classname)
What does the following do?
css(“font-size”, “+=1pt”);
It increases the font size (the current font size, whatever that is) by 1pt
How would you send a Javascript Object to the .css function?
$("#example").css({
"font-weight": "bold",
"font-size": "2pt",
"color": "aubergine"
});When using jQuery to receive widths/heights etc, what is one of the things you must be mindful of?
You will receive fractional values. So you must be careful not to assume that they are always integer values.
Why might the reported height and width of a page differ when looking cross browser?
Each browser has default stylesheets, and differences in those (such as line heights) may cause differences in the values.
If you set a width / height to 200px, will it be 200px?
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.
What are the main positioning jQuery functions?
.height() .width() .innerHeight() .innerWidth() .outerHeight() .outerWidth() .offset().top .offset().left .position().top .position().left
How can you store data on an element?
.data()
.data(key, value) // Set a key value key
.data(jsObject) // Can pass multiple values
.data(key) // return the value for this key
What is the HTML5 standard for naming data?
data-[keyname]
What function is used to remove data from an element?
.removeData()
In jQuery, when dealing with data - do you need to provide the data- prefix?
No, jQuery deals with that.
What method is now used (as of about JQuery 1.8) to bind events?
.on
.off
These replace the old bind, die etc methods.
If you call .on like this:
$(“#evttarget”).on(“mouseover mouseleave”, myfunc);
How would you turn these events off?
$(“#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.
How would you write an event that grabs the users text input from the keyboard?
("#evttarget").on("keypress", function(evt) {
// You can use the
// String.fromCharCode(evt.charCode) method to grab
// the text, and insert it where you will...
});The hover event handler is setup how?
$(“#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.
Normally you would add a new event handler by using the .on method - why are there also methods such as .hover, .click etc?
These are helper methods, there are a couple of helper methods that are added by jQuery to make every day tasks a little easier.
What are the event handler helper methods provided by jQuery?
.hover
.click
.dblclick
.resize
(but there are plenty of others)
What would you typically attach the .resize event handler to ?
The window.
$(window).resize(myhandler);
Why does the jQuery event object exist?
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.
What does the meta key property describe in the event object?
It’s the windows / mac key (or other key depending on system). It’s a boolean value.
What properties are normalised in the event object?
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)
How do you pass data to an event handler so that you can keep track of things like which object was clicked?
$(“#Div1”).on(“click dblclick”, { name: “Div 1” }, function(evt) {});
You can pass (as the second parameter), data in the form of a json object
What does the stopPropagation() method do?
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.
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?
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.
What is the difference between .toggle and toggleClass?
.toggle will toggle the visibility of the element, while toggleClass will toggle the given class of the element.
What does the second parameter in the .show and .hide methods do?
It specifies an ease in/out method. There are two defaults, linear and swing. You can add new ones.
How do you fade out / in an element?
$(“#element”).fadeIn(100);
$(“#element”).fadeOut(100);
NOTE: You can specify “fast” or “slow” too - values are in milliseconds
How do you fade to a specific opacity level?
$(“#element”).fadeTo(100, 1.0);
Over 100 miliseconds - fade to 100% opacity.
How could you create a “pulse” effect in animation?
$(“#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.
What functions can you use to make an object slide into / outof existence?
.slideUp
.slideDown
.slideToggle
If you want to animate seperate animations at the same time (using the animation function), what is the key?
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.
Animate a div 500px to the left, over 1000 milliseconds and with a “swing” easing style.
$(“#div”).animate({ left: “500” }, 1000, “swing”);
What does the following do?
$(“#div”).animate({ left: “+=500” }, 1000);
The += sign adds 500px to the current position, rather than just animating to the 500px position.
If you have to loop through a series of div’s - i.e. for an image rotator, how would you achieve this?
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.
What are some of the $.ajax functions that are used to deal with the return data?
.done
.fail
.always
What helper function is provided to do a get request?
$.get(“url”, successFunction);
What helper function is provided to do a get request, but place the data directly into a page element?
$(“#myelement”).load(“url”);
This will take the data from “url” and insert it into the element provided in the element selector.
If we read an xml document via ajax, what functions can we use to parse that document?
The standard dom API. (Remember, HTML / XML share a common root)
.getElementByTagName
.getElementsByTagName
.firstChild.nodeValue
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)
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.
What are AJAX global events?
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.
What functions are available for registering handlers for global AJAX events?
.ajaxComplete .ajaxSend .ajaxError .ajaxStart .ajaxStop .ajaxSuccess
Global events are fired on each ajax request if…
The value of “global” is set to true on the jQuery.ajaxSetup()
(which it is by default)
Global events (no matter what the value of the variable “global” is) are never fired for…
cross domain scripts and JSONP requests.
What is AHAH?
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.
What is the difference between JSON and JSONP?
JSON is used to send data around within your app - JSONP is JSON with padding and is designed for sending data to remote apps.
Why is one variable preceded by a dollar sign, while the other is not?
var $results = $(‘#rep-lookup-results’),
zipcode = $(‘#txt-zip’).val();
$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.
Many URL’s for API’s have a segment like ?callback=? why is this?
You may need to supply this in the url or else it will not respond with a JSONP object.
