Online - jQuery

Question 1

What is jQuery?

Answer 1

A public domain JavaScript library that is extremely popular and designed to make it much easier to program web apps.

Question 2

What does jQuery provide?

Answer 2

jQuery provides a powerful set of methods for DOM manipulation and event handling that solve many of the cross-browser compatibility issues that arise when using plain JavaScript.

Question 3

How does jQuery enhance the manipulation of CSS selectors and effects?

Answer 3

In JavaScript, if you wanted to do make same changes to a diverse collection of elements, you would need to write one expression or a set of expressions to get the collection of elements, and then you would need to write a loop to apply the changes to the collection.
But now you can use jQuery selectors to do it all in one line, like this:
$(“p,#myDiv,span.movie”).dosomething();

Question 4

How would you load the jQuery library into your index.html file?

Answer 4

stick this in the header

Question 5

What are the two ways to write the jQuery function?

Answer 5

jQuery( selector )
or
$( selector )

Question 6

what are the two ways you can treat the object returned from a function like an array?

Answer 6

$(“#checkerboard”)[0].style[“borderStyle”] = “dashed”;

AND

var squares=$("td.even"); 
for (var i=0; i

Question 7

How do you change the inner HTML using jQuery?

Answer 7

$(“#instructions”).html(“No more instructions!”);

Question 8

How do you change the css background color using jQuery?

Answer 8

$(“td.odd”).css(“backgroundColor”,”blue”);

Question 9

How do you change an attribute to an html element in jQuery?

Answer 9

$(“a”).attr(“href”, “http://www.facebook.com”);

Question 10

How do you change the value of input text using jQuery?

Answer 10

$(“input:text”).val(“A new value”);

input:text selects all input elements of type text. There are also selectors for :button, :checkbox and so on.

Question 11

How do you return values using jQuery?

Answer 11

You can also use each of these methods with one less parameter, and they will return the innerHTML, style property, or attribute of the first element in the matching set. Try the following:

$(“#instructions”).html();
$(“td.odd”).css(“backgroundColor”);
$(“a”).attr(“href”);
$(“input:text”).val();

Question 12

How would you chain multiple methods together in jQuery?

Answer 12

$(“#instructions”).css(“backgroundColor”,”red”).css(“color”,”rgba(255,255,255,0.5)”).html(“Hello, World!”);

Question 13

How do you change the class(es) an element belongs to in jQuery?

Answer 13

.important {
    font-weight: bold;
    font-size: xx-large;
}
.blue {
    color: blue;
}

$(“button”).click(function(){
$(“h1, h2, p”).addClass(“blue”);
$(“div”).addClass(“important”);
});

Question 14

What are some common effects and animations used in jQuery?

Answer 14

$(“#instructions”).fadeOut()
.fadeIn()
.animate({left:”200px”, width:”100px”})

these can be chained as well.