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.
