JQuery

Question 1

What is a Java library?

Answer 1

A reusable bundle of JavaScript functionality. Its JavaScript code stored on a server. It can be accessed and reused by others.

Question 2

What is a CDN?

Answer 2

A content delivery network is a server optimized for serving static files like JS libraries and doing it very quickly.

Question 3

How does a library fit into the design of a webpage?

Answer 3

A webpage is made up of the user interface (HTML+CSS), interactivity (JS+DOM), and data (which we often bring in through JS). A JS library may take the place of any or all of these parts.

Question 4

What is jQuery?

Answer 4

It is the most popular JavaScript library. It give developers lots of useful functions so they can make their webpage interactive across multiple browsers. It is an open source library with a big community of contributors.

Question 5

What is the main function in jQuery?

Answer 5

$. $(“h1”) finds all the h1’s on a page and stores them in a collection (array).

Question 6

How does JQuery change text of a tag?

Answer 6

$(“p”).text(“message”);

Question 7

What is the syntax of selectors in the JQuery function?

Answer 7

$(“p”);
$(“#identifierName”);
$(“.className”);

Question 8

How is jQuery used to get text from an element?

Answer 8

var variableName = $("#identifierName").text();
The method call with no variables passed to the method returns what is inside the tag with the identity of identifierName.

Question 9

What is the general way to associate an element with a variable using jQuery?

Answer 9

var $variableName = $(“#identifierName”);
It is customary to use a $ to start a variable that stores jQuery object.
Then you can $variableName.text() to get text. You would also say $variableName.text($variableName.text() + “new text to append to the old stuff”);

Question 10

What is the method for passing HTML rather than just text?

Answer 10

.html rather than .text

Question 11

How is a class name added to an element?

Answer 11

$(“a”).addClass(“className”);

Question 12

How is a CSS rule added to an element?

Answer 12

$(“a”).css(“color”, “green”);

Question 13

How is an attribute changed or added to an element?

Answer 13

$(“a”).attr(“href”, “URL”);

Question 14

How is an element created and added to a webpage?

Answer 14

var $newP=$(“<p>”);

$(“body”).append($newP);</p>

Question 15

What is the difference between a DOM element and a jQuery collection?

Answer 15

1.  The DOM node is stored using var nameEL=document.getElementById("identifierName");
The jQuery collection is stored using var $nameEL=$("#identifierName");
2. Each item in the jQuery collection is a DOM node.

3. The jQuery collection includes more methods to manipulate the data than a DOM node.

Question 16

Can a jQuery collection be converted to a DOM node?

Answer 16

Yes.
var nameEl=$nameEl[0];
var $nameEl=$(nameEl);

Question 17

Describe 2 ways of iterating through a jQuery collection?

Answer 17

1. For Loop.
   a. Store the collection in a variable.
   b. Create a loop.
   c. Create a variable and put one element of the collection into it.
   d. Convert the variable to a collection.
   e. Then manipulate it.
2. .each method
   a. Store the collection in a variable.
   b. Use the .each method on the variable
   c. Pass it a function
   d. In the function, creates a variable and put one element into the variable.
   e. Then manipulate it.

Question 18

What is the code for iterating through a jQuery collection using the .each method?

Answer 18

var $nameEls = $(“p”);
$nameEls.each(functionName(index, element){
var $nameEl=$(element or this);
$nameEl.html($nameEl.html()+”appended text”);
});

Question 19

What is chaining?

Answer 19

Adding a method after a method has already been called. For example.
$(“<img></img>”).attr(“src”, “URL”)
.attr(“width”, “100”)
.appendTo(“body”);

Question 20

How is an event listener added via jQuery?

Answer 20

Use the .on method.

$(“#identifierName”).on(“click”, function(){});

Question 21

Where can you find the full list of browser events?

Answer 21

developer.mozilla.org

Question 22

What is the ready function?

Answer 22

It allows the developer to include script anywhere on the page.  It will run whatever is in the function after the page is loaded.
Example,
$(document).ready(function(){
	code to call after page loads;
});

Question 23

How would one use jQuery to evaluate a form submission?

Answer 23

1. Use .on to add an event listener to the form for “submit”
2. Use prevent default to stop the page reload
3. Use .val() to get the value of the selection.
4. Compare with something and take an action.

Question 24

Give an example of using jQuery to evaluate a form submission?

Answer 24

$(“#quiz-form”).on(“submit”, function(event) {
event.preventDefault();
var $answer = $(“#quiz-answer”);
var answer = $answer.val();
console.log(answer);
if (answer === “crocodile”) {
$(“#result”).text(“Woweeee! You got it! WOOO PARTY!”);
} else {
$(“#result”).text(“Try again!”);
}
)};

Question 25

How can you select something via an attribute?

Answer 25

$(“identifierName”).find(“[name=species”]);

Question 26

When using the .on function, what can help with the code in the passed function?

Answer 26

$(this) refers to the element identified and to which the event listener is attached.
    $("form").on("submit", function() {
      // store the value of the input with name='age' 
       var age = $(this).find('[name=age]').val();
    });

Question 27

What are some common jQuery animation methods?

Answer 27

.hide();
.show();
.slideDown();
.fadeIn()
.animate({
  width: "400px",
  marginLeft: "30px",
borderWidth: "10px"
}, 1500);

Question 28

Can you pass a function to .slideDown();?

Answer 28

Yes. The function will then be called after the .slideDown method is complete.
$(“#croc-pic”).slideDown(1000, function() {
$(“#croc-text”).
});

Question 29

What is special about .animate?

Answer 29

It allows for more control. A developer can set the final CSS values in the animate function and it will grow or shrink to that value over the time designated.