jQuery Flashcards
What is jQuery?
jQuery is a library. A library is code that someone else wrote that you can incorporate into your own projects to improve them or make coding easier.
What is the shorthand way to write jQuery?
The dollar sign $
Where should the script tag for the jQuery library be placed?
In the body of our body tag right above our javascript script tag.
What’s a way of ensuring that our javascript library does not access our jQuery library until it is ready (when script tag is placed in the head tag)?
We can use the following code:
$(document).ready(function () {
$(“h1”).css(“color”, “red”);
})
What’s a second way of ensuring that our javascript library does not access our jQuery library until it is ready?
By including the script tag at the bottom of our webpage (bottom of body section above our javascript script tag).
How does minification work to reduce file size?
Minification removes whitespace and comments in your code. The link in our jQuery script tag takes us to to a minimized jQuery library.
Why do we minifiy our code?
All of our code has to be loaded by our user’s browser and depending on their internet speed that may take a short or long time. Minifying helps our code to be loaded much faster.
The browser does not care about comments or spaces.
How do we select elements with jQuery?
We replace the document.querySelector with the keyword jQuery(or the dollar sign).
Ex:
javascript: document.querySelector(“h1.title”)
jQuery: $(“h1.title”)
How do we select multiple elements in jQuery?
By using the same syntax for selecting a single element.
Ex:
javascript: document.querySelectorAll(“button”)
jQuery: $(“button”)
How can we manipulate (set) the style of an element with jQuery?
By using the .css method.
Ex:
$(“h1”).css(“color”, “red”);
The 1st input is the property we want to change and the 2nd input is the value we want to set for the property.
How can we get the current value for a css property?
By having the name of the property as a string within the css jQuery method and logging it to the console.
Example:
console.log($(“h1”).css(“font-size”));
How can we keep our css (styling) and our javascript (behavior) separate?
By first creating a class in our stylesheet and then adding that class with javascript.
Example:
In css:
.big-title {
font-size: 10rem;
color: yellow;
font-family: cursive;
}
In javascript:
$(“h1”).addClass(“big-title”);
How do we add multiple classes in jQuery?
We add multiple classes in jQuery by adding a space in between the classes.
Example:
$(“h1”).addClass(“big-title margin-50”);
Adds both the big-title class and margin-50 class.
How can we see if a selected element has a certain class in jQuery?
By selecting our element and using the hasClass method and query for the specific class.
Example:
$(“h1”).hasClass(“big-title”);
How can we change the text of a selected element using jQuery? (two methods)
1st method:
Select the element than place the new text wanted inside of the text method.
Example:
$(“h1”).text(“bye”);
2nd method
Changing the inner html by using the html method.
Example:
$(“h1”).html(“<em>bye</em>”);
Note: Javascript uses the innerHTML method.
What do we use if we want to get attributes on the fly using jQuery?
We select the element we want, enter the name of the attribute we want in the attribute method, and console log the line of code (to get a specific attribute).
Example:
console.log($(“img”).attr(“src”));
What do we use if we want to set attributes on the fly using jQuery?
We use the same syntax to get the attribute but we enter a second input which will change the current attribute.
Example:
$(“a”).attr(“href”, “ https//www.yahoo.com”) ;
How do we add an event listener using jQuery?
Select the element we want (h1 in this example), use dot notation to add the click method, add the call back function.
Example:
$(“h1”).click(function() {
$(“h1”).css(“color”, “purple”);
});
How do you add an event listener in jQuery to all of the same type of elements at once?
We use the same syntax when selecting one element. jQuery will automatically select all of the element with a specific element name or class. There is no need to use a for loop as we do with plain javascript.
Example:
$(“button”).click(function() {
$(“h1”).css(“color”, “purple”);
});
How do add a keypress event listener?
By targeting the input element, adding a keypress event, and logging that keypress event when detected.
Example:
$(“input”).keypress(function(event) {
console.log(event.key)
}
Or entire document:
$(document).keypress(function(event) {
console.log(event.key)
}
What’s an even more flexible way of adding an event listener in jQuery?
Select the element of interest, add the “on” method, add the event you are listening for, and add a callback function in the second parameter.
$(“h1”).on(“mouseover”, function() {
$(“h1”).css(“color”, “purple”);
};
How can we use jQuery to add new elements before other elements on the fly?
Target the element you want to add another element before, use the before method, and enter the html for the element you want to add before in the parenthesis.
Example:
$(“h1”).before(“<button>New</button>”);
How can we use jQuery to add new elements after other elements on the fly?
Target the element you want to add another element before, use the after method, and enter the html for the element you want to add after in the parenthesis.
Example:
$(“h1”).after(“<button>New</button>”);
What’s the difference between the prepend method and the before method?
Prepend will add your new html element into the item (element) that you selected just after the opening tag.
Example:
$(“h1”).prepend(“<button>New</button>”);
What’s the difference between the append method and the after method?
Append will add your new html element just after the content in the element that you selected but before the closing tag of the selected element.
Example:
$(“h1”).append(“<button>New</button>”);
How can we use jQuery to remove an element?
By using the remove method.
Example:
$(“button”).remove();
Note: This will remove all buttons in the document.
How can we use jQuery to show a selected element when an event occurs?
We can use the show method.
Example:
$(“button”).on(“click”, function() {
$(“h1”).show();
})
How can we use jQuery to hide a selected element when an event occurs?
We can use the hide method.
Example:
$(“button”).on(“click”, function() {
$(“h1”).hide();
})
What are some common animations that we may want to add to our website using jQuery?
hide, show, fade, slide
How can we toggle between hide() and show() for selected elements.
We can use the toggle method. We use the same syntax as the hide and show but we change the method.
Example:
$(“button”).on(“click”, function() {
$(“h1”).toggle();
});
How can we fade out a visible element in jQuery?
We can use the fadeOut() method.
Syntax:
$(selector).fadeOut(speed,callback);
Note: Optional speed duration for the first input.
Example:
$(“button”).on(“click”, function() {
$(“h1”).fadeOut();
});
How can we fade in a visible element in jQuery?
We can use the fadeIn() method.
Syntax:
$(selector).fadeIn(speed,callback);
Note: Optional speed duration for the first input.
Example:
$(“button”).on(“click”, function() {
$(“h1”).fadeIn();
});
How can we toggle between fadeIn() and fadeOut() for selected elements.
We can use the fadeToggle method. We use the same syntax as the fadeIn() and fadeOut() but we change the method.
Example:
$(“button”).on(“click”, function() {
$(“h1”).fadeToggle();
});
How can we slide up or slide down an element when a specific event occurs?
We can use the slideUp() and slideDown() method.
Syntax:
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
Example:
$(“button”).on(“click”, function() {
$(“h1”).slideUp();
}) ;
How can we toggle between slideUp() and slideDown() for selected elements.
We can use the slideToggle method. We use the same syntax as the slideUp() and slideDown() but we change the method.
Example:
$(“button”).on(“click”, function() {
$(“h1”).slideToggle();
});
How can we create custom animations using jQuery?
By adding our own css rule inside of the animate method.
Example:
$(“button”).on(“click”, function() {
$(“h1”).animate({opacity: 0.5});
});
Note: Only use animate method with properties that have a numeric value (opacity, margin, etc.)
How can we have more than one animation occurring at the same time?
We can chain the methods together.
Example:
$(“button”).on(“click”, function() {
$(“h1”).slideUp().slideDown().animate({opacity: 0.5});
});
